@charset "UTF-8";

@view-transition {
    navigation: auto;
}

/* уважение предпочитающим покой */
@media (prefers-reduced-motion: reduce) {

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

:root {
    --dark: #1a1f2b;

    --blue-ultra-light: #eaf2ff;
    --blue: #234BFF;
    --blue-bright: #0070ff;

    --gray: #ececec;
    --gray-dark: #b5b5b5;
    --gray-black: #393939;

    --yellow-dark: #ffce00;
    --yellow: #ffce00;
    --yellow-bright: #ffce00;

    --orange: #ff6600;

    --green: #0cd000;

    --bg-light-blue-color: #edf0f6;
    --bg-light-green-color: #ecf4f5;
    --bg-light-warm-color: #f6f3ed;

    --max-res: 1080px;
    --gap: 35px;
    --gap-auto-v: max(calc(var(--gap) * 1.2), 5vh);
    --gap-main: var(--gap-auto-v) var(--gap);
    --gap-app: var(--gap-auto-v) 0;
    --padding: calc(var(--gap) / 1.5);

    --gap1: 35px;
    --gap2: max(10px, .5vw);

    --gpu-preheat-blur-max: 20px;
}

/* ПРОГРЕВ GPU \ ПРЕРЕНДЕР */

gpu-preheat.backdrop-filter {
    position: fixed;
    inset: 0;
    backdrop-filter: blur(var(--gpu-preheat-blur-max));
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

/* ПРОГРЕВ GPU \ ПРЕРЕНДЕР */

html,
body {
    all: unset;
}

html {
    background-color: var(--bg-light-blue-color);
}

::selection {
    background: #000;
    color: #fff;
}

body ::-webkit-scrollbar-thumb:hover {
    background: var(--dark);
}

body ::-webkit-scrollbar-thumb {
    background: #b0b0b0;
    border-radius: 40px;
    border: none;
}

body ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background: #e2e2e2;
    border-radius: 40px;
}

[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

:is([contenteditable], textarea, input:not([type="checkbox"], [type="radio"])):focus {
    cursor: text !important;
}

@supports (-moz-appearance:none) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #b0b0b0 #e2e2e2;
    }
}

main {
    display: grid;
    flex-direction: column;
    grid-gap: var(--gap-main);
    max-width: var(--max-res);
    min-width: 0;

    @container (max-width: 15rem) {}
}

figure {
    margin: 0;
}

p {
    line-height: 1.45;
}

svg {
    overflow: visible;
    height: auto;
    flex-shrink: 0;
    fill: currentColor;
    pointer-events: none;
}

a {
    text-decoration: none;
    color: var(--dark);
}

a:visited {
    color: rgb(0, 0, 238);
    color: var(--dark);
}

a:hover {
    text-decoration: underline;
}

:is(a, button).dashed-blue {
    font-weight: 600;
    font-size: .88em;
    color: var(--blue);
    border-bottom: 2px dashed var(--blue);
    text-decoration: none;
    cursor: pointer;

    &:hover {
        border-bottom-style: solid;
    }

    &:active {
        --blue: red;
    }

    & svg {
        fill: currentColor;
    }
}

:is(a, button).button {
    position: relative;
    min-height: 45.67px;
    padding: 12px 16px 15px;
    margin: auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    line-height: 1;
    letter-spacing: -0.5px;
    font-weight: 100;
    text-align: left;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 16px;
    user-select: none;
    -webkit-user-select: none;
    transition: color .3s, border .3s, transform .2s;

    &:is(a) {
        text-decoration: none;
        font-weight: 200;

        &:not(.filled-light) {
            padding: 8px 12px 11px;
        }
    }

    &:active {
        transform: translateY(3px) scale(0.98);
        transition: transform 0.05s;
    }

    &.filled {
        color: white;
        --bg-color: var(--blue);
        --bg-color-hover: var(--blue-bright);

        &:hover {
            --bg-color: var(--bg-color-hover);
        }
    }

    &.filled-light {
        color: var(--blue);
        --bg-color: var(--blue-ultra-light);
        --rotate: 10deg;
        --opacity: 85%;
        --shadow-offset-y-top: 0.5px;
        --saturate-dark: 2;

        &:hover {
            filter: saturate(3);
        }
    }

    &.dashed {
        background-color: white;
        color: var(--blue);
        border: 2px dashed var(--blue);

        &:hover {
            border-style: solid;
        }
    }

    @supports (corner-shape: squircle) {
        border-radius: 50px;
        corner-shape: squircle;
    }
}

.--shine {
    --white: white;
    --black: black;
    --opacity: 80%;
    --rotate: 139deg;
    --saturate-light: 1;
    --saturate-dark: 1;
    --shadow-offset-y: -1px;
    --shadow-offset-x: -1px;
    --shadow-offset-y-top: -1px;
    --shadow-offset-x-top: -1px;
    --shadow-blur: 25px;

    --shadow-offset: var(--shadow-offset-y) var(--shadow-offset-x);
    --shadow-offset-top: var(--shadow-offset-y-top) var(--shadow-offset-x-top);
    --bg-color: var(--blue);

    ---light: color-mix(in srgb, var(--bg-color) var(--opacity), var(--white));
    ---dark: color-mix(in srgb, var(--bg-color) var(--opacity), var(--black));

    background: var(--bg-color);
    background: linear-gradient(var(--rotate),
            var(---light) 0%,
            var(--bg-color) 60%,
            var(--bg-color) 80%,
            var(---dark));
    box-shadow:
        inset 2.5px 6px var(--shadow-blur) var(---light),
        inset var(--shadow-offset) 1px 0 var(---dark),
        inset var(--shadow-offset-top) 1px 0 var(---dark);
}

/* Safari 18+ */
@supports (content-visibility: hidden) {
    .--shine {
        --bg-color-hsl: hsl(from var(--bg-color) h s l);
        --light-hsl: hsl(from var(---light) h calc(s * var(--saturate-light)) l);
        --dark-hsl: hsl(from var(---dark) h calc(s * var(--saturate-dark)) l);

        --bg-color-adjusted: var(--bg-color-hsl);
        --light-adjusted: var(--light-hsl);
        --dark-adjusted: var(--dark-hsl);

        background: linear-gradient(var(--rotate),
                var(--light-adjusted) 0%,
                var(--bg-color-adjusted) 60%,
                var(--bg-color-adjusted) 80%,
                var(--dark-adjusted));
        box-shadow:
            inset var(--shadow-offset) 1px 0 var(--dark-adjusted),
            inset 2.5px 6px var(--shadow-blur) var(--light-adjusted),
            inset var(--shadow-offset-top) .3px 0 var(--dark-adjusted);
    }
}

h1,
h2,
h3,
h4 {
    line-height: 1;
    margin: 0;
}

h1 {
    font-size: 3em;
    font-weight: 900;
    text-wrap-style: balance;
    color: var(--dark);
}

h2 {
    font-size: 2.2em;
    font-weight: 900;
    font-variant-caps: petite-caps;
    color: var(--dark);
}

h3 {
    font-weight: 900;
}

body {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    height: 100%;
    margin: 0;
}

body,
input,
textarea,
button {
    font: inherit;
    /* font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; */
    font-family: system-ui;
}

input:not([type='checkbox']),
textarea,
button {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
}

input[type=file],
input[type=file]::-webkit-file-upload-button {
    cursor: pointer;
}

button {
    padding: 0;
    background-color: transparent;
}

ul,
ol {
    padding: 0;
    margin: auto;
    list-style: none;
}

br {
    display: none;
}

/* SOCIAL */

.__social {
    display: flex;
    gap: 1px;
    align-items: flex-end;

    --ico-size: 20px;

    &:before {
        content: "Контакт → ";
        white-space: nowrap;
        padding-inline-end: 5px;
    }

    &>a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: var(--ico-size);
        width: var(--ico-size);
        height: var(--ico-size);
        aspect-ratio: 1 / 1;
        border-radius: 7px;
        color: white;
        text-decoration: none;
        background-color: var(--accentColor);

        & .icon {
            width: calc(var(--ico-size) - 5px);
            height: calc(var(--ico-size) - 5px);
            color: var(--accentColor);
        }

        &.ws {
            --accentColor: #25d366;

            & .icon {
                width: calc(var(--ico-size) / 2);
                height: calc(var(--ico-size) / 2);
                color: white;
            }
        }

        &.tg {
            --accentColor: #23a0dc;
        }

        &.max {
            --accentColor: #4543E9;

            & .icon {
                color: white;
            }
        }

        &.vk {
            --accentColor: #0077ff;
        }

        &.yandex {
            --accentColor: #f8604a;
        }

        &.mail {
            --accentColor: var(--dark);

            & .icon {
                fill: white;
            }
        }
    }
}

/* SOCIAL */


/** для больших экранов */
@media (min-width: 1400px) {

    html {

        & #app {
            zoom: 1.35;
        }

        & dialog {
            zoom: 1.1;
        }
    }
}




#app {
    padding: var(--gap-main) var(--padding);
    grid-gap: var(--gap-app);
    justify-items: center;
    align-items: start;
    box-sizing: border-box;
    min-height: 100%;
    width: -webkit-fill-available;
    width: stretch;
}



.header {
    display: flex;
    gap: var(--gap2);
    align-items: center;


    & .logo {
        background-color: var(--dark);
        border-radius: 40px;
        padding: var(--padding);
        box-sizing: border-box;

        @supports (corner-shape: squircle) {
            border-radius: 60px;
            corner-shape: squircle;
        }

        & img {
            max-width: 200px;
        }
    }

    & .text {
        max-width: 18vw;
        min-width: 45%;
        font-size: 1.1em;
        font-weight: 100;
    }
}

.cards {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.cards .card {
    position: relative;
    display: grid;
    grid-gap: 20px;
    align-items: center;
    height: fit-content;
    padding: var(--padding);
    box-sizing: border-box;
    overflow: hidden;
    text-decoration: none;
    border-radius: 30px;
    /* background-color: #f4f4f4; */
    background-color: white;
    /* box-shadow: 0 0 0 1px #ececec, inset 0 0 30px #00000021; */
    /* transition: .25s box-shadow; */
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;

    contain: content;
    content-visibility: auto;

    @supports (corner-shape: squircle) {
        border-radius: 50px;
        corner-shape: squircle;
    }

    & header {
        display: flex;
        gap: var(--gap1);
        align-items: center;

        & .name-logo {
            display: flex;
            gap: var(--gap2);
            align-items: center;

            & img {
                max-width: 80px;
                height: 100%;
            }
        }

        & .desc {
            line-height: 1;
        }
    }

    & .hrefs {
        display: flex;
        gap: 15px;
        padding-inline: 10px;

        & .href {
            display: flex;
            align-items: flex-end;
            gap: 3px;

            & img {
                width: 19px;
                aspect-ratio: 1;
                border-radius: 7px 7px 4px 4px;
                background-color: var(--blue);
                border: 1px solid var(--blue);
            }

            & .icon {
                margin: -10px 0 5px;
            }
        }
    }

    & .targets {
        display: flex;
        flex-direction: column;
        gap: var(--gap2);
        margin: 15px auto;

        @media (min-width: 1000px) {
            @supports (writing-mode: sideways-lr) {
                flex-direction: row;
                align-items: center;

                h2 {
                    writing-mode: sideways-lr;
                }
            }
        }

        & h2::after {
            content: " ↓";
            text-wrap-mode: nowrap;
            white-space: nowrap;
        }

        & .in-cards {
            display: grid;
            gap: var(--gap2);
            grid-template-columns: auto auto auto;
            justify-content: start;

            & .in-card {
                display: flex;
                flex-direction: column;
                gap: 10px;
                max-width: 370px;
                padding: 20px;
                border-radius: 22px;
                /* background: linear-gradient(45deg, var(--dark) 80%, #ff3737); */
                color: white;

                @supports (corner-shape: squircle) {
                    border-radius: 50px;
                    corner-shape: squircle;
                }

                & h3 {
                    font-size: 1.85em;
                    font-weight: 100;
                    font-variant-caps: petite-caps;
                    margin-block-end: auto;
                    text-shadow: 0 0 black;
                }

                & .item {
                    font-size: .9em;
                }

                & .mark {
                    font-weight: 700;
                    font-variant-caps: petite-caps;
                }

                &.minec {
                    /* 25% */
                    background: linear-gradient(rgb(0 0 0 / 40%), rgb(0 5 23 / 90%) 80%), url(/files/public/static/media/vector/site/minec.svg);
                    background-position: 50% 50%;
                    background-size: 100%;
                    background-color: #e32b26;
                }

                &.gydra {
                    /* background: linear-gradient(45deg, #054c9a 55%, #F58000); */
                    background: linear-gradient(rgb(0 0 0 / 25%), rgb(0 5 23 / 90%) 80%), url(/files/public/static/media/bitmap/site/RusHydro.png);
                    background-size: 100%;
                    background-color: #0087de;
                }

                &.zhataj {
                    background: linear-gradient(rgb(0 0 0 / 25%), rgb(0 5 23 / 90%) 80%), url(/files/public/static/media/bitmap/site/zhataj.png);
                    background-size: contain;
                    background-position: center;
                    background-repeat: no-repeat;
                    background-color: #01bcf3;
                }
            }
        }
    }

    & .wrap {
        display: flex;
        flex-direction: column;
        gap: var(--gap2);

        & h2::after {
            content: " →";
            text-wrap-mode: nowrap;
            white-space: nowrap;
        }
    }

    & .micro-cards {
        display: flex;
        gap: var(--gap2);

        &.green .micro-card {
            background-color: var(--bg-light-green-color);
        }

        & .micro-card {
            display: flex;
            gap: 7.5px;
            justify-content: space-between;
            align-items: center;
            padding: 12px;
            border-radius: 12px;
            background-color: var(--bg-light-warm-color);

            &:has(.icon-name) {
                flex-direction: column;
                align-items: flex-start;
                gap: 5.5px;
            }

            & .icon-name {
                display: flex;
                gap: 5px;
            }

            & .text {
                line-height: 1.1;
                font-size: .85em;
                font-weight: 200;
            }

            & h3 {
                white-space: nowrap;
            }
        }
    }

    & .buttons-wrap {
        display: flex;
        gap: 10px;
        align-items: center;

        & h3::after {
            content: " →";
            text-wrap-mode: nowrap;
            white-space: nowrap;
        }

        & .buttons {
            display: grid;
            gap: var(--gap2);
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            width: stretch;
        }
    }
}

/* анимация карточек */



.cards .card:first-child > * {
    transition: transform cubic-bezier(0.41, 0.4, 0.08, 1.18) .5s;
    transform: perspective(70px) translateY(calc(50px + (var(--i) * var(--step))));
    --step: 50px;

    &:nth-child(1) {
        --i: 0;
    }

    &:nth-child(2) {
        --i: 1;
        transition-delay: .1s;
    }

    &:nth-child(3) {
        --i: 2;
        transition-delay: .2s;
    }

    &:nth-child(4) {
        --i: 3;
        transition-delay: .3s;
    }

    &:nth-child(5) {
        --i: 4;
        transition-delay: .4s;
    }

    &:nth-child(6) {
        --i: 5;
        transition-delay: .5s;
    }

    &:nth-child(7) {
        --i: 6;
        transition-delay: .6s;
    }

    &:nth-child(8) {
        --i: 7;
        transition-delay: .7s;
    }
}

html.post-ready .cards .card>* {
    transform: perspective(70px) translateY(0px);
}

/* анимация карточек */

.works {
    display: flex;
    flex-direction: column;
    gap: var(--gap2);

    background-color: var(--dark);
    color: white;
    /* box-shadow: inset 0 0 30px #ffffff4d; */

    position: relative;
    display: grid;
    grid-gap: 20px;
    align-items: center;
    height: fit-content;
    padding: var(--padding);
    box-sizing: border-box;
    overflow: hidden;
    text-decoration: none;
    border-radius: 30px;

    contain: content;
    content-visibility: auto;

    @supports (corner-shape: squircle) {
        border-radius: 50px;
        corner-shape: squircle;
    }

    /* & h1 {
        font-size: 3vw;
        text-align: center;
        margin-inline: -10vw;
    } */

    & h1,
    h2 {
        font-variant-caps: petite-caps;
        color: white;
    }

    & h2::after {
        content: " ↓";
        text-wrap-mode: nowrap;
        white-space: nowrap;
    }

    & .wrap {
        display: flex;
        gap: var(--gap1);
        flex-direction: column;

        & features {
            display: flex;
            gap: 5px;

            & feature {
                padding: 10px;
                border-radius: 14px;
                background-color: #ffffff0d;
                line-height: 1.2;

                & .icon {
                    margin-block-end: -5px;
                    fill: var(--green);
                }
            }
        }

        & work {
            display: flex;
            gap: var(--gap2);
            flex-direction: column;

            & items {
                display: flex;
                gap: var(--gap);

                & item {
                    display: flex;
                    flex-direction: column;
                    width: 100%;

                    & from {
                        display: block;
                        width: fit-content;
                        font-weight: 100;
                        font-size: 3vw;
                        letter-spacing: -5px;
                        font-variant: petite-caps;
                        color: var(--green);
                    }

                    & h3 {
                        font-weight: 700;
                    }

                    & data {
                        & figure {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            align-items: center;
                            gap: 2px;
                            padding: 10px;
                            border-radius: 10px;
                            background-color: #fff;

                            & img {
                                width: 100%;
                                max-width: 85px;
                            }

                            figcaption {
                                font-weight: 700;
                                font-size: 1.1em;
                                font-variant-caps: unicase;
                                color: var(--dark);
                            }

                            @supports (corner-shape: squircle) {
                                border-radius: 20px;
                                corner-shape: squircle;
                            }
                        }

                        &:has(figure) {
                            display: grid;
                            grid-template-columns: repeat(auto-fit, minmax(90px, auto));
                            grid-auto-flow: dense;
                            gap: 5px;
                        }
                    }
                }
            }
        }
    }
}

main {
    &:last-child {
        margin-block-end: 20vh;
    }
}

footer {
    display: flex;
    gap: 5px;
    margin: auto;
    font-variant-caps: petite-caps;
    font-weight: 100;
}



/* /bobr */

.scheme {

}

/* /bobr */



/* @media (min-width: 2350px) {
    .cards .card {
        overflow: initial;
        contain: initial;
        content-visibility: initial;
    
        & h2 {
            position: absolute;
            right: calc(100% + var(--padding) + -12px);
            white-space: nowrap;

            transition: transform cubic-bezier(0.41, 0.4, 0.08, 1.18) .5s .25s, opacity .5s .25s;
            transform: translateX(-100px);
            opacity: 0;

            &::after {
                content: " →"!important;
            }
        }
    }

    html.post-ready .cards .card h2 {
        transform: none;
        opacity: 1;
    }
} */

@media (max-width: 1400px) {
    .works {
        & .wrap {
            & work {
                & items {
                    & item {
                        & from {
                            letter-spacing: -1px;
                            font-size: clamp(2em, calc(4vw + 2vh), 5em);
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1200px) {
    .works {
        & .wrap {
            & work {
                & items {
                    & item {
                        & data {
                            & figure img {
                                max-width: none;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1200px) and (min-width: 600px) {
    .works {
        & .wrap {
            & work {
                & items {
                    & item {
                        & data {
                            &:has(figure) {
                                display: grid;
                                grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 950px) {
    #app {
        padding: var(--padding);
    }

    h1 {
        font-size: 10vw;
        line-height: .7;
    }

    .header {
        flex-direction: column;

        & .logo {
            & img {
                max-width: 400px;
            }
        }

        & .text {
            text-align: center;
            text-wrap-style: pretty;
        }
    }

    .cards .card {
        & header {
            flex-direction: column;

            & .name-logo {
                & img {
                    max-width: 120px;
                }
            }
        }
    }
}

@media (max-width: 920px) {
    .cards .card {
        & .micro-cards {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
        }

        & .hrefs {
            justify-content: center;
        }
    }
}

@media (max-width: 900px) {
    .cards .card {
        & .buttons-wrap {
            align-items: flex-start;
            flex-direction: column;

            & h3::after {
                content: " ↓";
            }
        }
    }

    .cards .card {
        & .hrefs {
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 5px;
        }
    }
}

@media (max-width: 750px) {
    .header {
        & .text {
            line-height: 1.2;
            max-width: 56vw;
        }
    }
}

@media (max-width: 725px) {
    .cards .card {
        & .targets {
            & .in-cards {
                display: flex;
                flex-direction: column;

                & .in-card {
                    max-width: none;
                }
            }
        }
    }
}

@media (max-width: 640px) {
    .cards .card {
        & .micro-cards {
            grid-template-columns: 1fr 1fr;
        }
    }

    footer {
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: 3em;
    }

    .header {
        & .text {
            max-width: none;
        }

        & .logo {
            & img {
                max-width: 300px;
            }
        }
    }

    .cards .card {
        & header {
            & .desc {
                line-height: initial;
            }
        }
        & .buttons-wrap {
            & .buttons {
                grid-template-columns: 1fr;
            }
        }
    }

    .works {
        & .wrap {
            & features {
                flex-direction: column;
            }

            & work {
                flex-direction: column;
                gap: var(--gap1);

                & items {
                    & item {
                        gap: 15px;

                        & from {
                            line-height: .7;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 450px) {
    :root {
        --padding: calc(var(--gap) / 2);
    }

    #app {
        padding: 5px;
    }

    .header {
        & .logo {
            & img {
                max-width: 100%;
            }
        }
    }

    .cards .card {
        & h1 {
            font-size: 4em;
        }

        & .micro-cards {
            grid-template-columns: 1fr;

            & .micro-card {
                justify-content: flex-start;
            }
        }

        & .wrap {
            & h2::after {
                content: " ↓";
            }
        }
    }

    .works {
        & .wrap {
            & work {
                & items {
                    & item {
                        & data {
                            & figure img {
                                width: auto;
                                max-height: 86px;
                            }
                        }
                    }
                }
            }
        }
    }
}