/* bootstrap media query steps */
@media only screen and (max-width: 1199px) /* md */ {}
@media only screen and (max-width: 991px) /* sm */ {}
@media only screen and (max-width: 767px) /*xs */ {}

:root{
    --base-font-family: "Inter", sans-serif;

    --h: 180;
    --s: 100%;
    --l: 23%;
    --theme-color: hsl(var(--h), var(--s), var(--l));
    /* --theme-color: hsl(190, 100%, 23%); */

    --base-dark: hsl(var(--h), var(--s), 3%);
    --base-light: hsl(var(--h), var(--s), 98%);

    --ah: 166;
    --as: 89%;
    --al: 42%;
    --accent-color: hsl(var(--ah), var(--as), var(--al));

    --color-blue: hsl(214 39% 15%);
    --color-blue-hex: #172435;

    --container-padding: 10px;
    --container-max-width: 1440px;
    --minus-container-padding: calc(-1 * var(--container-padding));

    --success-color: #3fe43f;
    --error-color: #ffa90d;

    --f-scrollbar-compensate: 0px!important;
}
@media screen and (width >= 500px)  { :root{ --container-padding: 1rem; } }
@media screen and (width >= 768px)  { :root{ --container-padding: 2vw;  } }
@media screen and (width >= 1200px) { :root{ --container-padding: 3rem; } }

@view-transition {
    navigation: auto;
}
::view-transition(*){
    animation-duration: 400ms;
    animation-timing-function: ease;
}


.start-hide{
    opacity: 0;
    animation-name: fadein;
    animation-duration: 400ms;
    animation-timing-function: ease;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: calc(var(--animation-order, 0) * 100ms);
}
@keyframes fadein {
    from{ opacity: 0; scale: .9; }
    to  { opacity: 1; scale: 1; }
}

@media screen and (width >= 768px) {
    .scroll-fadein{
        opacity: 0;
        animation-name: scroll-fadein;
        animation-duration: 1ms;
        animation-timing-function: ease;
        animation-fill-mode: both;
        animation-iteration-count: 1;
        animation-timeline: view();

        animation-range-end: entry 20svh;
    }
}
@keyframes scroll-fadein {
    from{ opacity: 0; scale: .9; translate: 0 5rem; }
    to  { opacity: 1; scale: 1; translate: 0 0; }
}


@supports not ( animation-timeline: scroll() ){
    .scroll-fadein, .hero{
        opacity: 1!important;
        animation: none!important;
    }
    .block-title{
        clip-path: none!important;
    }
}

body{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    font-family: var(--base-font-family);
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--base-light);
    min-height: 100lvh;
}
body, .body-bg{
    position: relative;
    background-attachment: fixed;
    background-color: var(--base-dark);
    background-image: radial-gradient(hsla(from var(--theme-color) h s l / 35%), var(--base-dark) 60%);
    background-size: 200lvh 200lvh;
    background-position: center 0;
    background-repeat: no-repeat;
}
body::before, .body-bg::before{
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-attachment: fixed;
    background-size: 200lvw 200lvh;
    background-position: 0 -100lvh;
    background-repeat: no-repeat;
    background-image: radial-gradient(var(--color-blue), transparent 70%);
}

html{
    scrollbar-gutter: stable;
}
body::-webkit-scrollbar { width: 6px; }
body::-webkit-scrollbar-track { background: var(--base-dark); }
body::-webkit-scrollbar-thumb { background-color:var(--color-blue); border-radius: 3px; border: none; }

body[opened]{
    overflow: hidden;
}

@media screen and (width < 768px) { .hidden-xs{ display: none!important; } }
@media screen and (width >= 768px) { .visible-xs{ display: none!important; } }

:root{
    --container-bg: rgba(255,255,255,.05);
}
.main-bg{
    --container-bg: hsl(from var(--theme-color) h 15% 98%);
}
.container{
    width: 100%;
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);

    &.container--bg{
        background: var(--container-bg);
        border-radius: var(--main-border-radius);
        padding-block: clamp(var(--main-border-radius), 2.5vw, 2.5rem);
        max-width: calc(var(--container-max-width) - 2 * var(--container-padding));
    }
    &.container--bg-gradient{
        background: linear-gradient(180deg, var(--container-bg), transparent);
        border-radius: var(--main-border-radius);
        padding-top: clamp(var(--main-border-radius), 2.5vw, 2.5rem);
        max-width: calc(var(--container-max-width) - 2 * var(--container-padding));
    }
}
@media screen and (width >= 1400px) { 
    .main-bg .container--bg,
    .main-bg .container--bg-gradient{
        border-radius: 0;
    }
}


/* for scroll with fixed header */
*[id]{ scroll-margin-top: calc(var(--header-height, 70px) + 2rem); }
@media screen and (width >= 768px) {
    *[id]{ scroll-margin-top: calc(var(--header-height, 100px) + 2rem); }
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    margin: 1.5em 0 0.5em;
    font-weight: 500;
    text-wrap: balance;
}
h1, .h1, .fontsize-xxl  { font-size: 1.5rem;   /* 24px */ line-height: 110%;    }
h2, .h2, .fontsize-xl   { font-size: 1.25rem;  /* 20px */ line-height: 120%;   }
h3, .h3, .fontsize-l    { font-size: 1.125rem; /* 18px */ line-height: 140%;  }
h4, .h4, .fontsize-m    { font-size: 1rem;     /* 16px */ line-height: 150%;  }
h5, .h5, .fontsize-s    { font-size: 0.875rem; /* 14px */ line-height: 150%;  }
h6, .h6, .fontsize-xs   { font-size: 0.75rem;  /* 12px */ line-height: 150%;   }
@media screen and (width >= 768px) {
    h1, .h1,
    h2, .h2,
    h3, .h3,
    h4, .h4,
    h5, .h5,
    h6, .h6 {
        margin: 2em 0 1em;
        font-weight: 500;
    }

    h1, .h1, .fontsize-xxl  { font-size: 1.175rem; /* 28px */ }
    h2, .h2, .fontsize-xl   { font-size: 1.375rem; /* 22px */ }
    h3, .h3, .fontsize-l    { font-size: 1.125rem; /* 18px */ }
    h4, .h4, .fontsize-m    { font-size: 1rem;     /* 16px */ }
    h5, .h5, .fontsize-s    { font-size: 0.875rem; /* 14px */ }
    h6, .h6, .fontsize-xs   { font-size: 0.75rem;  /* 12px */ }
}
@media screen and (width >= 1100px) {
    h1, .h1, .fontsize-xxl  { font-size: 2rem;      /* 32px */ }
    h2, .h2, .fontsize-xl   { font-size: 1.5rem;    /* 24px */ }
    h3, .h3, .fontsize-l    { font-size: 1.1875rem; /* 19px */ }
    h4, .h4, .fontsize-m    { font-size: 1rem;      /* 16px */ }
    h5, .h5, .fontsize-s    { font-size: 0.875rem;  /* 14px */ }
    h6, .h6, .fontsize-xs   { font-size: 0.75rem;   /* 12px */ }
}

mark{
    background: color-mix(in srgb, var(--accent-color) 75%, transparent);
    color: #fff;
}

body p{
    --paragraphMarginBottom: 1em;
    margin: 0 0 1em;
}

ul:not([class]){
    padding-inline-start: 2em;
}

.phone, .email{
    white-space: nowrap;
    display: inline-block;
}

.no-margin-top{
    margin-top: 0!important;
}

/* links */
a{
    color: var(--link-color, currentColor);
    transition: all 150ms ease;
    text-decoration: none;

    &.underline{
        text-decoration: underline;
    }
}
@media (hover: hover) and (pointer: fine){
    a.underline:hover{
        text-decoration: none;
    }
}
a.dotted-link, span.dotted-link{
    border-bottom: 1px dotted;
    text-decoration: none!important;
    white-space: nowrap;
    display: inline-block;
    font-style: italic;
}
@media (hover: hover) and (pointer: fine){
    a.dotted-link:hover{
        border-bottom: 1px solid;
    }
}
/* links - END */


/* fancybox */
.fancybox__container{
    --fancybox-backdrop-bg: color-mix(in srgb, var(--base-dark) 90%, transparent);
}
a.fancybox.zoom{
    display: block;
    position: relative;
}
a.fancybox.zoom:before, a.fancybox.zoom:after{
    content: "";
    position: absolute;
    display: block;
    opacity: 0;
    transition: opacity 200ms ease;
    z-index: 1;
}
a.fancybox.zoom:before{
    inset: 0;
    background: var(--base-dark);
}
a.fancybox.zoom:after{
    content: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%23fff' d='M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/%3E%3C/svg%3E");
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    width: 3rem;
}
a.fancybox.zoom:hover:before{
    opacity: 0.25;
}
a.fancybox.zoom:hover:after{
    opacity: 0.5;
}
/* fancybox - END */


/* svg */
svg{
    fill: currentColor;
}
svg.svg--inline{
    display: inline-block;
    vertical-align: middle;
    height: 1lh;
    width: auto;
}
/* svg - END */


.blockquote{
    margin-block: 2em;
    font-size: clamp(10px, .875vw, .875rem);
    font-style: italic;
    padding-inline: clamp(1em, 1.5vw, 1.5rem);
    padding-block: clamp(.5em, 1vw, 1rem);
    background: var(--container-bg);
    color: color-mix(in srgb, currentColor 60%, transparent);
    border-left: 2px solid var(--accent-color);
    font-weight: 200;
    width: fit-content;
    max-width: 800px;
    text-wrap: pretty;

    &::before{ content: '"'; }
    &::after { content: '"'; }
    &:has(*){
        &::before, &::after { content: none; }
    }
}
.main-bg {
    .blockquote{
        color: hsl(from var(--theme-color) h 5% 40%);
        border-left: 2px solid var(--theme-color);
    }
    .container--bg .blockquote{
        background: color-mix(in srgb, currentColor 3%,transparent);
    }
}

.bgblock{
    margin-block: 1.5em;
    padding-inline: 1.25em;
    padding-block: 1.25em;
    background: var(--container-bg);
    width: fit-content;
    text-wrap: pretty;
    border-radius: 1em;
}



/* popup */
:root{
    --popup-duration: 200ms;
}
[popup]{
    cursor: pointer;
}
.popup{
    position: fixed;
    z-index: var(--z-index-popup);
    inset: 0 0 auto;
    min-height: 100lvh;
    display: grid;
    place-items: center;
    transition: translate 1ms ease var(--popup-duration);
    translate: 0 100%;
    overflow: hidden;

    &[open]{
        transition: translate 1ms ease 0ms;
        translate: 0 0;
    }

    .popup__bg{
        position: absolute;
        inset: 0;
        background: color-mix(in srgb, var(--base-dark) 90%, transparent);
        touch-action: manipulation;
        opacity: 0;
        transition: opacity var(--popup-duration) ease;
    }
    &[open] .popup__bg{
        opacity: 1;
    }

    .popup__window{
        max-width: calc(100svw - 2rem);
        max-height: calc(100svh - 7rem);
        position: relative;
        transition-duration: var(--popup-duration);
        transition-property: opacity, translate, scale;
        opacity: 0;
        translate: 0 2rem;
        scale: .9 1;

        .popup__closer{
            all: unset;
            
            display: block;
            cursor: pointer;
            position: absolute;
            font-size: clamp(1.5rem, 2vw, 2rem);
            inset: auto -.5em 100% auto;
            padding: .5em;
            color: #fff;
            
            touch-action: manipulation;
            user-select: none;
            -webkit-user-select: none;

            svg{
                display: block;
                width: 1em;
                height: auto;
            }
        }
    
        .popup__content{
            max-width: 100%;
            max-height: 100%;

            .popup__def{
                max-height: calc(100svh - 4rem);
                overflow-y: auto;
                background-color: var(--base-light);
                color: var(--base-dark);
                padding-block: clamp(1rem, 2vw, 2rem);
                padding-inline: var(--container-padding);
                max-width: calc(var(--container-max-width) - 4 * var(--container-padding));
                border-radius: var(--main-border-radius);

                --accent-color: hsl(var(--ah), var(--as), 30%);
                --btn-gradient-1: hsl(from var(--accent-color) h s calc(l + 5));
                --btn-gradient-2: hsl(from var(--accent-color) h s calc(l - 12));
                --btn-font-weight: 500;
                --btn-color: #fff;
                --container-bg: color-mix(in srgb, currentColor 7%, transparent);

                &::-webkit-scrollbar { width: 6px;}
                &::-webkit-scrollbar-track { 
                    background: transparent; 
                    border-radius: 2px;
                    border: 1px solid transparent;
                }
                &::-webkit-scrollbar-thumb {  
                    background-color:  color-mix(in srgb, var(--theme-color), currentColor 20%); 
                    border-radius: 3px; 
                    border-bottom: calc(var(--main-border-radius) - 6px) solid transparent;
                    border-top: calc(var(--main-border-radius) - 6px) solid transparent;
                    border-left: 1px solid transparent;
                    border-right: 1px solid transparent;
                    background-clip: padding-box
                }
            }
        }
    }
    &[open] .popup__window{ 
        opacity: 1;
        translate: 0 0;
        scale: 1 1;
    }
}
/* popup - END */


/* btn */
.btn{
    all: unset;
    min-width: max-content;
    cursor: pointer;
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 130%;
    background: transparent;
    color: var(--btn-color, currentColor);
    text-shadow: none;
    text-decoration: none;
    position: relative;
    border: none;
    font-weight: var(--btn-font-weight, 400);
    /* font-style: italic; */
    outline-offset: 0;
    transition: all 75ms cubic-bezier(.18,.37,.52,1.01);
    scale: 1 1;

    padding: var(--btn-padding, .75em 1.5em);
    gap: var(--btn-gap, .5em);
    border-radius: var(--btn-radius, .75em);

    
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    
    &.btn--xs { --btn-padding: .25em;  }
    &.btn--s  { --btn-padding: .5em;   }
    &.btn--m  { --btn-padding: .75em;  }
    &.btn--l  { --btn-padding: 1em;    }
    &.btn--xl { --btn-padding: 1.25em; }
    
    &.btn--wide{
        display: flex;
        width: 100%;
        padding: var(--btn-padding, .75em .75em);
    }

    &:has( > span){
        min-width: 5em;
    }
    & > span{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        flex-shrink: 1;
        min-width: 3em;
    }

    svg{
        flex-shrink: 0;
        display: block;
        fill: var(--btn-color-icon, var(--btn-color, currentColor));
        height: 1lh;
        width: auto;
    }

    &.btn--icon{
        padding: var(--btn-padding, .75em);
    }

    &:disabled{
        cursor: not-allowed;
        filter: grayscale(50%) opacity(50%);
    }

    &:not(:disabled):active{
        scale: 1.05 .95;   
    }

    &.btn--fill{
        background: var(--btn-bg, color-mix(in srgb, currentColor 10%, transparent));
    }
    &.btn--gradient{
        background: linear-gradient(
            var(--btn-gradient-angle, 155deg), 
            var(--btn-gradient-1, color-mix(in srgb, currentColor 10%, transparent)), 
            var(--btn-gradient-2, color-mix(in srgb, currentColor 25%, transparent))
        );
        color: var(--btn-color, var(--base-dark));
    }
    &.btn--border{
        outline: 1px solid color-mix(in srgb, currentColor 50%, transparent);
        outline-offset: -1px;
    }
}
@media (hover: hover) and (pointer: fine) {
    .btn.btn--fill:hover{ background: var(--btn-bg, color-mix(in srgb, currentColor 20%, transparent)); }
    .btn.btn--border:hover{ outline-color: currentColor; }
}

@media screen and (width >= 768px) {
    .btn--showtext::after{
        content: attr(title);
    }
}
/* btn - END */




/* forms defs */
input[type="text"],
input[type="tel"],
input[type="email"],
textarea{

    color: inherit;
    padding: .5em;
    font-size: 1em;
    line-height: 130%;
    border-radius: .75em;
    border-width: 1px;
    border-style: solid;
    border-color: color-mix(in srgb, currentColor 10%, transparent);
    background: color-mix(in srgb, currentColor 2%, transparent);
    width: 100%;
    outline: none!important;

    padding: var(--input-padding, .75em 1em);
    border-radius: var(--input-padding, .75em);

    transition-property: color, border-color;
    transition-duration: 150ms;

    &::placeholder {
        color: color-mix(in srgb, currentColor 30%, transparent);
        font-weight: 200;
    }
    &:focus{
         border-color: color-mix(in srgb, currentColor 50%, transparent);
    }
    &:user-invalid{
        color: var(--error-color);
        border-color: currentColor;

        &::placeholder {
            color: currentColor;
        }
    }
    &:disabled{
        cursor: not-allowed;
        color: color-mix(in srgb, currentColor 20%, transparent);
    }
}
/* forms defs - END */


/* minform */
.minform{
    max-width: 20em;

    .minform__main{
        position: relative;

        .minform__row{
            position: relative;
            font-size: 1.25em;

            .minform__input{
                input{
                    padding-block: .5em;
                    font-variant-numeric: tabular-nums;
                }
            }

            .minform__submit{
                position: absolute;
                inset: 2px 2px 2px auto;

                .btn{
                    padding: 0;
                    height: 100%;
                    aspect-ratio: 1;
                    width: auto;
                    border-radius: calc(.75em - 1px);
                    overflow: hidden;
                    --loader-bg: transparent;

                    svg{
                        transition-property: opacity, scale;
                        transition-duration: 150ms;
                    }

                    .loader{
                        font-size: 1em;
                        color: rgba(255,255,255,.5);
                    }

                    &[loading="loading"]{
                        opacity: .5;
                        pointer-events: none;

                        & > svg{ 
                            scale: 0;
                            opacity: 0;
                        }
                    }
                }
            }

            .output{
                display: none;
                position: absolute;
                inset: 0;
                z-index: 5;
                border-radius: .75em;
                display: none;
                padding: .25em .5em;
                align-items: center;                
                border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
                gap: .5em;

                .text{
                    display: block;
                    line-height: 140%;
                    flex-grow: 1;
                    font-size: clamp(10px, .6em, .6em);
                    text-wrap: balance;

                    b{
                        display: block;
                    }
                    span{
                        font-weight: 200;
                        font-size: .9em;
                        color: color-mix(in srgb, currentColor 80%, transparent);
                    }
                }

                svg{
                    width: 1.5em;
                    height: auto;
                }
                path{
                    opacity: 0;
                }
                
                &[status]{
                    display: flex;

                    &[status="success"]{
                        color: var(--success-color);
                        path[success]{ opacity: 1; }
                    }
                    &[status="error"]{
                        color: var(--error-color);
                        path[error]{ opacity: 1; }
                    }
                }
            }

        }
    }

    .minform__agree{
        font-size: clamp(10px, .75vw, 12px);
        padding-left: 1em;
        margin-top: 1em;
        color: color-mix(in srgb, currentColor 40%, transparent);
    }

    &:has(.output[status]){
        .minform__submit, .minform__input, .minform__agree{
            opacity: 0!important;
            pointer-events: none;
        }
    }
}
/* minform - END */


/* popupform */
#popup-form{
    padding-bottom: calc(100lvh - 100dvh + 1rem);
    place-items: end center;
}
@media screen and (width >= 768px) {
    #popup-form{
        padding-bottom: 0;
        place-items: center;

        .popupform{
            max-width: 28em;
        }
    }
}
.popupform{
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    background: linear-gradient(45deg, var(--theme-color), var(--color-blue));
    color: var(--base-light);
    border-radius: var(--main-border-radius);
    border: 1px solid color-mix(in srgb, var(--base-light) 12%, transparent);
    overflow: hidden;

    .popupform__section--head{
        position: relative;
        z-index: 1;

        .popupform__contacts{
            display: flex;
            justify-content: center;
            gap: 1em;
            /* align-items: center; */
            padding: clamp(1em, 2vw, 2em) clamp(1em, 3vw, 3em);
            
            .popupform__contact__img{
                flex: 0 0 5em;

                span{
                    display: block;
                    aspect-ratio: 1;
                    overflow: hidden;
                    border-radius: 100%;
                    border: 2px solid color-mix(in srgb, var(--base-light) 12%, transparent);
                    border: 2px solid var(--theme-color);
                    box-shadow: .1em .1em .5em rgba(0,0,0,.5);

                    img{
                        object-position: center;
                        object-fit: cover;
                        width: 100%;
                        height: 100%;

                        & + img{
                            height: auto;
                            translate: 29% -64%;
                            /* scale: .85; */
                            transform-origin: right bottom;
                        }
                    }
                }
            }
            .popupform__contact__content{
                flex-grow: 1;
                
                .popupform__contact__name{
                    font-size: clamp(1.5em, 2vw, 2em);
                }
                .popupform__contact__phone{
                    font-weight: 200;
                    margin-block: .5em;

                    a{
                        display: inline-flex;
                        align-items: center;
                        gap: .2em;

                        svg{
                            height: 1em;
                            opacity: .2;
                        }
                    }
                }
                .popupform__contacts__soc{
                    font-size: clamp(10px, .6em, .6em);
                    --btn-padding: .5em .8em;
                    color: hsl(from var(--theme-color) h 40% 60%);

                    .btn{
                        line-height: 120%;
                    }
                    span{
                        font-size: .8em;
                    }
                }
            }
        }
    }
    .popupform__section--form{
        padding: clamp(1em, 2vw, 2em) clamp(1em, 3vw, 3em);
        
        color: var(--base-light);
        background-color: rgba(0,0,0,.35);
        background-clip: padding-box;
        overflow: hidden;
        z-index: 1;
        position: relative;
        border-top: 1px solid color-mix(in srgb, var(--base-light) 12%, transparent);

         .popupform__title{
            font-size: 1em;
            text-transform: uppercase;
            margin-bottom: .5em;
            opacity: .2;
            padding-left: .5em;
        }

        .minform{ margin-inline: auto; }
    }
}
/* popupform - END */


/* city-select */
.city-select{
    width: clamp(0px, 80vw, 1200px);

    .city-select__head{
        margin-bottom: 1rem;
        gap: 1rem;
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        white-space: nowrap;

        .block-title{
            margin-block: 0;
        }
        .city-select__form{
            flex-basis: 400px;
            max-width: 100%;

            input[find]{
                border-color: var(--success-color);
            }
        }
    }

    nav{
        font-size: .75rem;

        p{
            opacity: .25;
        }
        
        & > ul{
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(clamp(250px, 20vw, 20rem), 1fr));
            gap: 1rem;

            & > li{
                background-color: color-mix(in srgb, currentColor 4%, transparent);
                border-radius: 1rem;
                padding: 1em 2em;
                position: relative;

                &:last-child{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    text-wrap: balance;

                    & > div{
                        opacity: 1;
                    }
                }

                & > div{
                    font-size: 1rem;
                    font-weight: 700;
                    margin-bottom: .4em;
                    opacity: .25;
                    line-height: 120%;

                    b{
                        position: absolute;
                        inset: auto .5rem .25rem auto;
                        font-size: clamp(5rem, 5vw, 5rem);
                        line-height: 100%;
                        display: block;
                        color: #fff;
                        text-shadow: 0 0 .5em rgba(0,0,0,.2);
                        font-variant-numeric: tabular-nums;
                        
                    }
                }

                & > ul{
                    list-style-type: disc;
                }
            }
        }
    }
}
/* city-select - END */



/* contacts */
.contacts{
    margin-top: clamp(2rem,4vw,4rem);

    .popupform{
        border: none;
        
        .popupform__title{
            text-align: center;
        }
    }
}
@media screen and (width >= 768px) {
    .contacts{
        .popupform{
            display: flex;
            background: radial-gradient(var(--theme-color), var(--color-blue) 104%);
            background-size: var(--container-max-width) var(--container-max-width);

            & > div{
                flex: 1 1 50%;
            }
            .popupform__section--form{
                border-top: none;
                border-left: 1px solid color-mix(in srgb,var(--base-light) 12%,transparent);
            }

            .popupform__section--form, .popupform__contacts{
                padding-block: clamp(2rem, 4vw, 4rem);
            }

            .popupform__contact__img{
                align-self: center;
            }
        }
    }
}
/* contacts - END */




/* callbtn */
#callbtn-wrap{
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: var(--z-index-header);

    animation-name: callbtn-scroll;
    animation-duration: 1ms;
    animation-fill-mode: both;
    animation-timing-function: ease;
    animation-timeline: scroll(root block);
    animation-range: calc(100% - 30rem) 100%;
}
@supports not (animation-timeline: scroll()) {
    #callbtn-wrap{
        animation: none;
    }
}
@keyframes callbtn-scroll {
    50% {
        translate: 0 5rem;
        opacity: 0;
        scale: .8;
    }
    100%{
        translate: 0 5rem;
        opacity: 0;
        scale: .8;
    }
}
#callbtn{
    all: unset;

    --color: var(--theme-color);
    --icon-color: #fff;
    --time-percent: 50ms;
    --accent: var(--accent-color);

    position: absolute;
    left: 1em;
    bottom: 1em;
    
    font-size: 14px;
    cursor: pointer;
    display: block;
    width: 4em;
    aspect-ratio: 1;

    transition-property: opacity, translate, scale;
    transition-duration: 200ms;

    translate: 0 100%;
    opacity: 0;
    scale: 0.8;
    
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}
body[loading="ready"] #callbtn{
    transition-delay: 500ms;
    translate: 0 0;
    opacity: 1;
    scale: 1;
}
body[opened] #callbtn{
    transition-delay: 0ms;
    translate: 0 150%;
    opacity: 0;
    scale: 0.8;
}
@media screen and (width >= 768px) {
    #callbtn{ 
        font-size: 16px; 
        animation: none;
    }
}
@media screen and (width >= 1200px) {
    #callbtn-wrap{
        left: calc((50vw - var(--container-max-width) / 2) / 4);
        bottom: calc((50vw - var(--container-max-width) / 2) / 6);
    }
    #callbtn{ 
        font-size: 20px; 
    }
}
#callbtn::before, #callbtn::after{
    content: "";
    pointer-events: none;
    display: block;
    position: absolute;
    z-index: 3;
    inset: 0;
    border-radius: 50%;
    animation: callbtn-wave linear calc(var(--time-percent) * 25.4) infinite;
    background: var(--accent);
}
#callbtn::after{
    animation-delay: calc(var(--time-percent) * 17);
}
.callbtn__icons{
    position: absolute;
    inset: 0;
    z-index: 5;
    background: var(--color);

    background: linear-gradient(155deg, color(srgb 0.1306 0.9494 0.758346), color(srgb 0.033 0.567 0.4424));

    border-radius: 50%;
    line-height: 100%;
    box-shadow: 0 0 1em rgba(0,0,0,.1);
}
.callbtn__icon{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    animation: calc(var(--time-percent) * 100) ease 0s normal infinite both running callbtn-change-icon;
    scale: 0; 
    opacity: 0;
}
.callbtn__icon:nth-child(2){ animation-delay: calc(var(--time-percent) * 70); }
.callbtn__icon:nth-child(3){ animation-delay: calc(var(--time-percent) * 80); }
.callbtn__icon:nth-child(4){ animation-delay: calc(var(--time-percent) * 90); }
@keyframes callbtn-change-icon {
    0%   { scale: 0.5; opacity: 0; rotate: 25deg; }
    5%   { scale: 1; opacity: 1; rotate: 0deg; }
    10%  { scale: 1; opacity: 1; rotate: 0deg; }
    15%  { scale: 0.5; opacity: 0; rotate: -25deg; }
    100% { scale: 0.5; opacity: 0; }
}
.callbtn__icon--call{
    animation-name: callbtn-change-icon1;
}
@keyframes callbtn-change-icon1 {
    0%   { scale: 0.5; opacity: 0; }
    5%   { scale: 1; opacity: 1; }
    70%  { scale: 1; opacity: 1; }
    75%  { scale: 0.5; opacity: 0; }
    100% { scale: 0.5; opacity: 0; }
}
.callbtn__icon svg{
    display: block;
    width: 2.5em;
    height: auto;
    fill: var(--icon-color);
}
.callbtn__icon--vk svg{ margin-top: .2em; margin-left: -.1em; }
.callbtn__icon--max svg{ margin-top: -.15em; margin-left: .1em; }
.callbtn__icon--call svg{
    animation: calc(var(--time-percent) * 25) ease 0s normal none 1 running callbtn-shake;
    animation-iteration-count: infinite;
    will-change: rotate, scale;
}
@keyframes callbtn-shake {
    0%   { rotate: 0deg; scale: .95; }
    10%  { rotate: -30deg;  }
    20%  { rotate: 15deg; scale: 1.05; }
    30%  { rotate: -10deg;  }
    40%  { rotate: 7.5deg; }
    50%  { rotate: -6deg;  }
    60%  { rotate: 5deg; }
    70%  { rotate: -4.28571deg; }
    80%  { rotate: 3.75deg; }
    90%  { rotate: -3.33333deg; }
    100% { rotate: 0deg; scale: .95; }
}
@keyframes callbtn-wave {
    0%   { scale: 1;   opacity: .4; }
    70%  { scale: 2.5; opacity: 0; }
    100% { scale: 2.5; opacity: 0; }
}
.callbtn__desc{
    display: none;
}
@media (hover: hover) and (pointer: fine) {
    .callbtn__icons{
        transition-timing-function: ease;
        transition-property: scale, opacity;
        transition-duration: 400ms;
    }
    #callbtn:hover .callbtn__icons{
        opacity: 1;
        scale: .8;
    }
    #callbtn:hover .callbtn__desc{
        width: auto;
        opacity: 1;
        scale: 1;
    }
    #callbtn:hover::before, .callbtn__desc:hover::after{
        animation-duration: 800ms;
        inset: .5em;
    }
    #callbtn:hover::after{
        animation-delay: 350ms;
    }
    .callbtn__desc{
        position: absolute;
        z-index: 1;
        inset: 0 auto 0 0;
        background: #fff;
        color: var(--base-dark);
        white-space: nowrap;
        border-radius: 2em;
        display: grid;
        align-items: center;
        box-shadow: 0 0 2em rgba(0,0,0,.1);
        overflow: hidden;
        interpolate-size: allow-keywords;
        width: 1em;
        box-sizing: border-box;
        transition-property: opacity, scale, width;
        transition-duration: 400ms;
        transition-timing-function: ease;
        opacity: 0;
        scale: .8;
    }
    .callbtn__desc::after{
        content: "";
        position: absolute;
        inset: 0 0 0 auto;
        width: 1.5em;
        background: linear-gradient(-90deg, #fff, transparent);
    }
    .callbtn__desc span{
        display: block;
        white-space: nowrap;
        padding: 0 1.125em 0 4.25em;
        font-size: 1.125em;
        text-transform: uppercase;
        font-weight: 800;
        transition-property: opacity;
        transition-timing-function: ease;
        transition-duration: inherit;
        opacity: 0;
    }
    #callbtn:hover .callbtn__desc span{
        opacity: 1;
    }
}
/* callbtn - END */


/* gradient-border */
.gradient-border{
    position: relative;

    &::before{
        content: "";
        pointer-events: none;
        position: absolute;
        inset: 0;
        background-image: conic-gradient( from .125turn, 
            transparent, 
            var(--border-color, currentColor), 
            transparent,
            var(--border-color, currentColor), 
            transparent
            );
        box-sizing: border-box;
        border-radius: inherit;
        padding: 1px;
        mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
        mask-composite: exclude;
    }
}
/* gradient-border - END */




/* custom checkbox */
.checkbox-group{
    display: flex;
    flex-direction: column;
    gap: 1px;

    & > label{
        --radius1: .3em;
        --radius2: .3em;
        --radius3: .3em;
        --radius4: .3em;

        &:first-child{ --radius1: .75em; --radius2: .75em; }
        &:last-child { --radius3: .75em; --radius4: .75em; }
    }

    &.checkbox-group--inline{
        flex-direction: row;
        overflow: auto;
        white-space: nowrap;
        scrollbar-width: none;

        & > label{
            flex: 0 0 auto;
            min-width: 0;

            &:first-child{ --radius1: .75em; --radius2: .75em; }
            &:last-child { --radius3: .75em; --radius4: .75em; }
        }
    }
}
label.checkbox, label.radio{
    display: block;
    position: relative;
    color: inherit;
    font-weight: inherit;
    padding-left: 1.5em;
    line-height: 120%;
    text-wrap: balance;
    transition: all 150ms;

    & > input{ display: none!important; }

    & > svg{
        display: block;
        fill: currentColor;
        position: absolute;
        left: 0;
        top: calc((1lh - 1.2em) / 2);
        width: auto;
        height: 1.2em;
        
        &[active]{ 
            fill: var(--checbox-active-color, var(--btn-color-icon, var(--btn-color-text, currentColor)));
            opacity: 0; 
        }
    }
    &:has(input:checked) > svg{ 
        opacity: 0;
        &[active]{ opacity: 1; }
    }

    &:has(input:user-invalid){
        color: var(--error-color);
    }

}
/* custom checkbox - END */



/* radio-switch */
.radio-switch{
    display: inline-flex;
    padding: 2px;
    border-radius: calc(1.7em + 2px);
    background-color: color-mix(in srgb, currentColor 5%, transparent);

    label{
        border-radius: 1.7em;
        line-height: 1.2em;
        padding: .25em 1em .3em;
        transition: all 150ms ease;
        font-weight: 400;

        &:has(input:checked) {
            background-color: var(--checked-bg, color-mix(in srgb, currentColor 10%, transparent));
            color: var(--checked-color, currentColor);
        }

        input{
            display: none;
        }
    }
}
/* radio-switch - END */



/* menu-opener icon */
.menu-opener-icon{
    font-size: clamp(1.25rem, 1.75vw, 1.75rem);
    display: block;
    width: 1em;
    aspect-ratio: 1;
    position: relative;
    vertical-align: middle;

    span, &::before, &::after{
        content: "";
        background: currentColor;
        border-radius: .5px;
        position: absolute;
        display: block;
        inset: 50% 0 auto 0;
        height: 1px;
        opacity: 1;

        transition-property: rotate, translate, opacity;
        transition-duration: 200ms;
        transition-timing-function: (.37,-0.84,.55,1.83);

        &span{
            transition-property: opacity;
            transition-duration: 100ms;
            transition-delay: 100ms;
        }
    }
    &::before, &::after{ transition-delay: 0ms, 100ms, 100ms; }
    &::before{ translate: 0 -.35em; }
    &::after{ translate: 0 .35em; }
}
body[opened="mainmenu"]{
    .menu-opener-icon{
        span{ opacity: 0; transition-delay: 0ms; }
        &::before, &::after{ transition-delay: 100ms, 0ms, 0ms; }
        &::before{ rotate: -45deg; translate: 0 0; }
        &::after{ rotate: -135deg; translate: 0 0; }
    }
}
/* menu-opener icon - END */



/* menu */
:root{
    --mainmenu-duration: 400ms;
}
#mainmenu{
    position: fixed;
    z-index: var(--z-index-mainmenu);
    inset: 0 0 auto 0;
    min-height: 100lvh;
    translate: 0 100%;
    transition: translate 1ms ease var(--mainmenu-duration);
    font-size: clamp(.875rem, 1vw, 1.5rem);

    .mainmenu__bg{
        position: absolute;
        z-index: 1;
        inset: 0;
        opacity: 0;
        transition-property: opacity;
        transition-duration: var(--mainmenu-duration);
        transition-timing-function: linear;
        transition-timing-function: cubic-bezier(.4,.93,.78,1.01);
    }
    .mainmenu__in{
        position: absolute;
        z-index: 2;
        inset: 0 0 auto 0;
        overflow: auto;
        color: var(--base-light);
        display: grid;
        grid-template-columns: 1fr;
        place-items: center;
        max-width: 100%;
        
        .mainmenu__content{
            display: flex;
            height: 100svh;
            max-height: 50em;
            padding-top: calc(var(--header-height) + var(--header-bg-bottom) - 1rem);
            padding-bottom: 1rem;
            flex-direction: column;
            justify-content: space-between;
            gap: 1em;
            padding-inline: var(--container-padding);
            padding-inline: 1.5em;
            max-width: 45em;
            width: 100%;
        }

        .mainmenu__animate-item{
            opacity: 0;
            translate: 0 -1rem;
            transition-property: opacity, translate;
            transition-duration: 100ms;
            transition-timing-function: cubic-bezier(.4,.93,.78,1.01);
            transition-delay: 0ms;
        }

        nav ul{
            list-style: none;
            display: flex;
            flex-direction: column;
            padding: 0;
            margin: 0;

            li{
                padding: 1em 0;
                margin: 0;
                border-bottom: 1px solid rgba(255,255,255,.05);

                &:last-child{
                    border-bottom: none;
                }

                a{
                    display: flex;
                    padding: .25em 0;
                    font-size: 1.125em;
                    font-weight: 200;
                    justify-content: space-between;
                    align-items: center;

                    svg{
                        height: 1em;
                        width: auto;
                    }
                }
            }
        }

        .mainmenu__title{
            text-align: center;
            background: var(--container-bg);
            border-radius: 1rem;
            margin-block: 1em;
            padding-block: 1em;
            align-self: center;
            max-width: 26em;
            width: 100%;

            .mainmenu__desc{
                font-size: .75em;
            }
            .mainmenu__name{
                font-size: 2em;
                color: hsl(from var(--accent-color) h s 60%);
            }
        }

        .mainmenu__contact{
            text-align: center;

            .mainmenu__phone{
                font-size: 1.5em;
                font-weight: 200;
                margin-bottom: .5em;
            }

            .mainmenu__soc{
                .soc a{ --bg: transparent!important; }
            }
        }
    }
}
body[opened="mainmenu"]{
    /* --mainmenu-duration: 200ms; */

    header .header__logo-wrap .header__logo b{
        mask-position: 0 0!important;
    }

    #mainmenu{ 
        transition-delay: 0ms;
        translate: 0 0;

        .mainmenu__bg{
            opacity: 1;
        }
        .mainmenu__in{

            .mainmenu__animate-item{
                transition-delay: calc(var(--animation-order) * 30ms);
                opacity: 1;
                translate: 0px 0px;
            }
        }
    }
}
/* menu - END */


/* runline */
.runline-wrap{
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.runline{
    position: relative;
    animation: runline var(--speed, 7s) infinite linear;
    width: auto;
    display: inline-block;
    top: 0;
    left: 0;
}
.runline:after{
    content: var(--text, "атрибут text не задан(");
    position: absolute;
    left: 100%;
    top: 0;
}
@keyframes runline {
    from { transform: translateX(0%); }
    to { transform: translateX(-100%); }
}
/* runline - END */



/* soc */
.soc{
    display: inline-flex;
    gap: .5em;

    a{
        border-radius: .5em;
        background-color: var(--container-bg);
        height: 2em;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        position: relative;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, currentColor 12%, transparent);

        span.icon-bg{
            display: block;
            position: absolute;
            inset: 0;
            background: var(--bg);
        }

        svg{
            width: 65%;
            height: auto;
            position: relative;
            color: #fff;

            &:is(.soc a.soc__item--max svg){ width: 55%; }
            &:is(.soc a.soc__item--vk svg){ translate: 0 2%; }
        }
    }
}
.soc-btns{
    display: inline-flex;
    gap: .5em;
    flex-wrap: wrap;
}
/* soc - END */



/* block-title */
.bold-transform{
    transform: scaleY(0.8);
    font-weight: 700;
    line-height: 100%;
    text-wrap: balance;
}

.block-title{
    isolation: isolate;
    position: relative;
    width: fit-content;

    clip-path: inset(0 100% 0 0);
    will-change: clip-path;
    backface-visibility: hidden;

    view-timeline-name: --block-title;
    animation-name: block-title-scroll;
    animation-timing-function: ease;
    animation-timeline: --block-title;
    animation-range-end: entry 50svh;
    animation-duration: 1ms;
    animation-fill-mode: both;

    &.center{
        margin-inline: auto;
    }
}
@keyframes block-title-scroll {
    to{ clip-path: inset(0 0 0 0); }
}
.block-title span{
    color: var(--accent-color); 
}
.main-bg .block-title span{
    color: var(--theme-color);
}
/* block-title - END */


/* Svg outer border-radius (right-bottom)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<defs>
		<mask id="outer-circle" x="0" y="0" width="100" height="100">
			<rect height="100" width="100" style="fill: white"></rect>
			<circle cx="0" cy="0" r="100" style="fill: black"/>
		</mask>
	</defs>
	<rect height="100" width="100" mask="url(#outer-circle)"></rect>
</svg>
*/
/* Svg outer border-radius - END */


/* global z-index */
:root{
    --z-index-header: 1000;
    --z-index-mainmenu: 999;
    --z-index-popup: 1500;
}
/* global z-index - END */


/* header */
:root{
    --header-height: 3rem;
    --header-bg-bottom: 2rem;
    --header-container-max-width: 100vw;
    --header-container-padding: clamp(10px, 2vw, 2vw);
}
@media screen and (width >= 768px) {
    :root{
    }
}
header{
    position: fixed;
    z-index: var(--z-index-header);
    inset: 0 0 auto 0;
	white-space: nowrap;
    
    --container-max-width: var(--header-container-max-width);
    --container-padding: var(--header-container-padding);

    animation-name: header-scroll;
    animation-fill-mode: both;
    animation-timeline: scroll(root block);
    animation-range: 0px 200px;
    animation-duration: 1ms;
    animation-timing-function: ease;

    /* background-color: color-mix(in srgb, var(--base-dark) 50%, transparent); */
    /* backdrop-filter: blur(20px); */

    .container{
        /* max-width: unset; */
    }

    &::before{
        --bottom-blur: calc(var(--header-bg-bottom) + 1rem);
        --bg-base: hsl(from var(--theme-color) h 24% 14%);
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: calc(var(--header-height) + var(--header-bg-bottom));
        pointer-events: none;

        background: linear-gradient(to bottom, var(--color-blue), color-mix(in srgb, var(--color-blue) 70%, transparent) calc(var(--header-height) / 1.5), transparent);
        opacity: 1;

        animation-name: header-bg;
        animation-fill-mode: both;
        animation-timeline: scroll(root block);
        animation-range: 0px 200px;
        animation-duration: 1ms;
        animation-timing-function: ease;
    }
}
@keyframes header-bg {
    from { translate: 0 -100%; }
    to   { translate: 0 0; }
}
@keyframes header-scroll {
    from { translate: 0 0; }
    to   { translate: 0 -10%; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .header::before {
        background-color: color-mix(in srgb, var(--base-dark) 50%, transparent);
        backdrop-filter: unset;
        -webkit-backdrop-filter: unset;
    }
}
.logo-svg{
    height: 1lh;
    width: auto;

    .logo-svg__name{
        .logo-svg__name--accent{
            fill: var(--accent-color);
        }
    }
    .logo-svg__desc-stroke{
        fill: var(--base-dark);
    }
}
.header__row{
    /* padding-inline: .5em; */
    font-size: clamp(1rem, 2vw, 2rem);
    height: var(--header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
    gap: var(--container-padding);
    
    .header__logo-wrap{
        font-size: 1.25em;
        white-space: nowrap;
        line-height: 140%;

        .header__logo{
            display: block;
            position: relative;

            .logo-svg{
                .logo-svg__name{
                    will-change: clip-path, opacity; 
                }
            }
        }
    }
    .header__contacts{
        display: none;
    }
    .header__contacts, .header__opener-wrap{
        opacity: 0;
        animation-duration: 400ms;
        animation-fill-mode: both;
        animation-iteration-count: 1;

        &.header__contacts{
            animation-delay: 100ms;
        }
    }
}
@media only screen and (width >= 768px) {

    :root{
        --header-height: clamp(3rem, 6vw, 6rem);
        --header-bg-bottom: 2rem;
    }

    header .header__row{
        
        .header__contacts{
            display: flex;
            align-items: center;
            gap: .5em;
            position: relative;
            margin-left: auto;
            line-height: 100%;

            .phone{
                font-weight: 200;
                font-size: clamp(1rem, 1.5vw, 1.5rem);
            }
            .header__soc-wrap{
                font-size: .875rem;
                line-height: 100%;

                .soc a{
                    --bg: transparent!important;
                }
            }
        }
    }
}
/* logo-animation */
body[loading="ready"]{
    .header__row{

        .header__logo-wrap .header__logo{
            .logo-svg{
                .logo-svg__name{
                    animation: header-logo-show .5s ease 0ms 1 normal both;
                    opacity: 0;
                }
                .logo-svg__desc-stroke, .logo-svg__desc{
                    animation: header-logo-desc .5s ease 300ms 1 normal both;
                    opacity: 0;
                }
            }
        }
        .header__contacts, .header__opener-wrap{
            animation-name: fadein;
        }
        
    } 
}
@keyframes header-logo-show { 
    0%{
        opacity: 0;
        clip-path: inset(0 100% 0 -20%);
    }
    100%{
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}
@keyframes header-logo-desc { 
    from { 
        opacity: 0;
        translate: 0 20%;
    }
    to { 
        opacity: 1;
        translate: 0 0;
    }
}
/* logo-animation - END */

/* header - END */



/* portrait */
.portrait{
    position: relative;
    overflow: hidden;

    img{
        pointer-events: none;
        width: 100%;
        height: auto;
        translate: 10% 0;
    }
    & > img{
        clip-path: inset(0 0 50% 0);
    }
    .portrait__shape{
        background: var(--theme-color);
        background: linear-gradient(45deg, hsl(from var(--theme-color) h s 22%), hsl(from var(--theme-color) h s 12%));
        position: absolute;
        inset: auto 0 0 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        /* clip-path: url(#hero-blob); */
        clip-path: url(#hero-blob2);
        overflow: hidden;

        img{
            display: block; 
            width: 100%; 
            height: 100%; 
            object-fit: cover;
            object-position: center bottom;
        }
    }
}
/* portrait - END */


/* hero */
@keyframes hero-scroll {
    from{ opacity: 1; translate: 0 0; }
    to  { opacity: 0; translate: 0 50svh; }
}
.hero{
    --container-max-width: var(--header-container-max-width);
    --container-padding: var(--header-container-padding);

    padding-bottom: clamp(3rem, 5vw, 5rem);
    overflow: clip;

    animation-timeline: scroll(root block);
    animation-range-end: 100svh;
    animation-name: hero-scroll;
    animation-duration: 1ms;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-timing-function: linear;
    
    .hero__in{
        /* height: 100svh; */
        display: flex;
        flex-direction: column;
        gap: 2rem;
        justify-content: space-around;
        padding-top: calc(var(--header-height) + 1rem);
    }
    
    .hero__content{
        position: relative;
        display: flex;
        flex-direction: column;

        .hero__top{
            position: relative;

            .hero__head{
                aspect-ratio: 7 / 5;
                max-height: 20rem;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                
                .hero__name{
                    font-size: clamp(10px, .875vw, .875rem);
                    font-weight: 200;
                    font-style: italic;
                    opacity: .5;
                    padding-bottom: .5em;
                    border-bottom: 1px solid rgba(255,255,255,.1);
                }
                .hero__title{
                    margin-block: 0;
                    max-width: 80%;
                    font-size: clamp(1.5rem, 3vw, 5rem);
                    line-height: 120%;
                    color: #fff;
                    text-transform: uppercase;
                    font-weight: 700;
                    text-wrap: balance;

                    span{ color: var(--accent-color); }
                }
                .hero__desc{
                    text-wrap: balance;
                    margin-block: auto;
                    max-width: 55%;
                    font-size: clamp(10px, .875vw, .875rem);
                    font-style: italic;
                    color: color-mix(in srgb, currentColor 40%, var(--base-dark));
                    line-height: 130%;
                    font-weight: 200;
                }
                .hero__runline{
                    max-width: 80%;
                    font-size: clamp(1rem, 1.5vw, 1.5rem);
                    opacity: .2;
                    line-height: 150%;
                    text-transform: uppercase;
                    font-weight: 700;
                    text-wrap: balance;
                    margin-bottom: .5rem;

                    &:has(.runline-wrap){
                        max-width: unset;
                    }
                    .runline-wrap{
                        margin-inline: var(--minus-container-padding);
                    }
                }
            }
            
            .hero__portrait{
                position: absolute;
                inset: -1em var(--minus-container-padding) 0 auto;
                margin-right: -1em;

                .portrait{
                    position: absolute;
                    height: 100%;
                    top: 0;
                    right: 0;

                    & > img{
                        height: 100%;
                        width: auto;
                        max-width: unset;
                    }
                }
            }
            
        }

        .hero__slogans__btns{
            display: flex;
            justify-content: space-between;
            padding-block: 1rem;
            border-bottom: 1px solid rgba(255,255,255,.05);
            margin-bottom: 1rem;
        }
        .hero__slogans{
            flex-grow: 1;
            font-size: clamp(.75rem, 1vw, 1rem);
            font-style: italic;
            font-weight: 200;
            position: relative;
            color: color-mix(in srgb, currentColor 70%, transparent);
            text-align: right;
        }
        .hero__slogan{
            display: flex;
            margin-bottom: 0;
            flex-direction: column;
            position: absolute;
            inset: 0;
            white-space: nowrap;

            &[num="0"]{
                position: relative;
                inset: auto;
            }

            & .bold-transform{
                white-space: nowrap;
            }

            .hero__slogan__big{
                font-size: clamp(1em, 1.25vw, 1.25em);
                line-height: 100%;
                font-weight: 400;
                color: #fff;
            }

            & > span{
                display: block;
                opacity: 0;
                translate: 0 .5rem; 
                animation-name: slogan-item;
                animation-iteration-count: infinite;
            }
        }
        .hero__buttons{
            font-size: clamp(.75rem, 1.5vw, 1.5rem);

            .hero__button{
                &.hero__button--1{
                    --btn-font-weight: 700;
                    color: var(--base-dark);
                    --btn-gradient-1: hsl(from var(--accent-color) h s calc(l + 12));
                    --btn-gradient-2: hsl(from var(--accent-color) h s calc(l - 12));
                }
                &.hero__button--2{
                    color: hsl(from var(--accent-color) h s 70%);
                    backdrop-filter: blur(15px);
                    display: none;
                }
            }
        }
    }

    .hero__items{
        .hero__items__title{
            font-size: 1em;
            text-wrap: balance;
            margin-bottom: .5em;
            color: rgba(255,255,255,.3);
        }
        ul{
            font-size: .75em;
            list-style: none;
            padding: 1px var(--container-padding); 
            margin: 0 var(--minus-container-padding);
            overflow: auto;
            scrollbar-width: none;
            display: flex;
            gap: 1em;

            li{
                flex: 0 0 12em;

                .hero__item{
                    --border-color: color-mix(in srgb, var(--accent-color) 50%, transparent);
                    height: 100%;
                    padding: .75em 1em;
                    border-radius: 1em;
                    background-color: rgba(255,255,255,.05);
                    display: flex;
                    flex-direction: column;
                    gap: .4em;
                    text-wrap: balance;

                    svg{
                        height: 1.75em;
                        width: auto;
                    }
                }

                .hero__lastitem{
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    gap: 1em;

                    & > div{
                        flex-grow: 1;

                        a{
                            height: 100%;
                            /* font-size: 1.125em; */
                        }
                    }


                    .hero__lastitem__more{
                        --btn-bg: rgba(255,255,255,.05);
                    }
                    .hero__lastitem__form{
                        color: var(--base-dark);
                        --btn-font-weight: 700;
                        --btn-gradient-1: hsl(from var(--accent-color) h s calc(l + 12));
                        --btn-gradient-2: hsl(from var(--accent-color) h s calc(l - 12));
                    }
                }
            }
        }
    }

    .hero__preims{
        display: none;
    }
}
@media screen and (width >= 768px) {
    .hero{

        .hero__content{
            position: relative;
            
            .hero__top{
                .hero__head{
                    max-width: 100%;
                    aspect-ratio: unset;
                    height: calc(90svh - var(--header-height) - 2rem);
                    max-height: 60lvw;
                    padding-top: 5vw;
                    
                    .hero__name{ order: 1; }
                    .hero__title{ 
                        order: 2; 
                        max-width: 55%; 
                    }
                    .hero__desc{
                        order: 3; 
                        max-width: 35%; 
                    }
                    .hero__preims{
                        display: block;
                        align-self: flex-start;
                        margin-top: auto;
                        order: 4;
                        width: 40%;
                        text-align: center;
                        font-size: clamp(.875em, 1.125vw, 1.5rem);

                        .hero__preims__row{
                            text-align: left;
                            display: inline-flex;
                            position: relative;
                            color: color-mix(in srgb, currentColor 50%, transparent);
                            font-weight: 200;
                            background: rgba(255,255,255,.02);
                            transform: skewX(-10deg);
                            gap: 2em;
                            padding: 1em 2em;

                            &::before, &::after{
                                content: "";
                                position: absolute;
                                inset: 0 auto auto 0;
                                width: .4em;
                                aspect-ratio: 1;
                                border-left: 1px solid var(--accent-color);
                                border-top: 1px solid var(--accent-color);
                            }
                            &::after{
                                inset: auto 0 0 auto;
                                rotate: .5turn;
                            }

                            & > div{
                                display: flex;
                                align-items: center;
                                gap: .75em;
                                text-wrap: balance;

                                b{
                                    font-size: 2em;
                                    font-weight: 300;
                                    line-height: 100%;
                                    color: #fff;

                                    svg{
                                        height: 1lh;
                                        width: auto;
                                    }
                                }
                            }
                        }
                    }

                    .hero__runline{
                        order: 5;
                        font-size: clamp(2rem, 5vw, 5rem);
                        opacity: .02;
                        --speed: 12s;
                    }
                }
                .hero__portrait{
                    inset: 0 auto 0 58%;
                    max-height: 50vw;
                    margin-right: 0;
                    translate: -50% 0;

                    .portrait{
                        position: relative;
                    }
                }
            }
            .hero__slogans__btns{
                border-bottom: none;

                .hero__slogans{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 55%;
                    margin-bottom: 0;
                    margin-top: 0;
                    text-align: center;
                    font-size: clamp(1em, 1vw, 1.5rem);
                }
                .hero__buttons{
                    display: flex;
                    gap: 1em;
                    font-size: .875rem;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    width: 50%;
                    max-width: 31em;
                    margin-bottom: 0;

                    & > div{
                        flex: 50% 1 1;
                    }

                    .hero__button--2{
                        display: inline-flex;
                    }
                }
            }
            
            .hero__items{
                position: absolute;
                right: 0;
                top: 5vw;
                width: auto;

                .hero__items__title{
                    text-align: right;
                    margin-bottom: 2.5em;
                    font-size: clamp(10px, .875vw, 1.5rem);
                    font-weight: 200;
                    font-style: italic;
                    transform: scaleY(1);
                    opacity: .5;
                }

                ul{
                    margin-inline: auto 0;
                    padding-inline: 0;
                    font-size: clamp(12px, 1vw, 1.5rem);
                    display: flex;
                    flex-direction: column;
                    overflow: visible;
                    
                    li{
                        flex: auto;
                        margin-left: calc(sibling-index() * 1.5em);
                        
                        &:last-child{
                            display: none!important;
                        }

                        .hero__item{
                            padding: 0;
                            background: none;
                            flex-direction: row;
                            align-items: center;
                            gap: 1em;
                            line-height: 120%;

                            &::before{
                                content: none;
                            }
                        }
                    }
                }
            }
        }
    } 
}
/* hero */



/* main */
:root{
    --main-border-radius: clamp(15px, 2vw, 2rem);
}
main{
    flex-grow: 1;
    position: relative;

    &::before{
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        translate: -50% -350%;
        background-color: color-mix(in srgb, var(--base-light) 30%, transparent);
        height: 4px;
        border-radius: 2px;
        width: 3.5rem;
    }
}
.main-bg{
    width: 100%;
    max-width: calc(var(--container-max-width) - 2 * var(--container-padding));
    margin-inline: auto;
    background-color: color-mix(in srgb, var(--base-light) 95%, transparent);
    color: var(--base-dark);
    --accent-color: hsl(var(--ah), var(--as), 30%);

    --btn-gradient-1: hsl(from var(--accent-color) h s calc(l + 5));
    --btn-gradient-2: hsl(from var(--accent-color) h s calc(l - 12));
    .btn.btn--gradient{ color: var(--btn-color, #fff); }

    border-radius: var(--main-border-radius);
    padding-block: clamp(1rem, 3vw, 3rem);

    animation-timeline: view();
    animation-range-end: entry 50%;
    animation-duration: 1ms;
    animation-fill-mode: both;
    animation-timing-function: ease;
    animation-name: main-bg-view;
}
@keyframes main-bg-view{
    from{ opacity: 0; }
    to  { opacity: 100%; }
}
.post-content{
    font-size: .75rem;
}
@media screen and (width >= 800px) {
    .post-content{
        font-size: .875rem;
    }
}
/* main - END */




/* footer */
footer{
    color: #808080;
    font-size: .75rem;
    margin-top: clamp(3rem, 5vw, 5rem);
    --link-color: #c1c1c1;
    overflow: hidden;

    p{
        margin-bottom: .5em;
    }

    .footer__row{
        padding-block: 3rem 1rem;
        border-top: 1px solid rgba(255,255,255,.05);
        display: grid;
        grid-template-columns: 1fr;
        gap: 2em;

        .footer__menu{
            white-space: nowrap;

            ul{
                margin: 0;
                padding: 0;
                columns: 2 auto;
                column-gap: clamp(1em, 10vw, 10rem);;
                list-style-position: inside;
            }
        }

        .footer__contacts{
            padding-top: 2em;
            border-top: 1px solid rgba(255,255,255,.05);
            a{ --bg: transparent !important; }
        }
    }
}
@media screen and (width >= 1000px) {
    footer{

        .footer__row{
            grid-template-columns: 25em 1fr 15em;

            .footer__menu{
                max-width: 50em;
                margin: 0 auto;
            }
            .footer__contacts{
                padding-top: 0;
                border-top: none;
                text-align: right;
            }
        }
    }
}
/* footer - END */


/* page404 */
.page404{
    flex-grow: 1; 
    display: flex;  
    place-items: center;

    .page404__content{
        position: relative;
        font-size: clamp(.875rem, 1vw, 1rem);

        .page404__big{
            font-size: clamp(2rem, 15vw, 15rem);
            opacity: .05;
            line-height: clamp(7rem, 1em, 1em);
            white-space: nowrap;
            text-align: center;
        }
        .page404__title{
            position: absolute;
            bottom: 100%;
            left: 0;
            font-style: italic;
            opacity: .75;
        }
        .page404__btn{
            position: absolute;
            top: 100%;
            right: 0;
            --btn-gradient-1: hsl(from var(--accent-color) h s calc(l + 12));
            --btn-gradient-2: hsl(from var(--accent-color) h s calc(l - 12));
        }
    }
}
/* page404 - END */



/* blockprice */
.blockprice{
    --gap: clamp(.75rem, 1.5vw, 1.5rem);
    font-size: clamp(.75rem, 1.25vw, 1.25rem);
    font-size: clamp(.75rem, 1vw, 1rem);
    margin-top: clamp(3rem, 4vw, 4rem);

    .blockprice__top, .blockprice__main, .blockprice__text{
        max-width: 55em;
        margin-bottom: clamp(1rem, 3vw, 3rem);
    }

    .blockprice__top{
        display: flex;
        flex-direction: column;
        gap: var(--gap);
    }
    .blockprice__discount{
        display: flex;
        gap: var(--gap);
        white-space: nowrap;

        & > *{
            flex: 1 1 45%;
            padding: .75em;
            border-radius: 1.25em;
            background-color: rgba(255,255,255,.05);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .blockprice__discount__price{
            
            flex-grow: 0;
            flex-shrink: 1;
            background-color: color-mix(in srgb, var(--theme-color) 35%, transparent);
            color: var(--base-light);

            & > span{
                font-size: .75em;
                display: block;

                & > span{
                    text-decoration: line-through;
                    opacity: .5;
                }

                &::after{
                    content: attr(percent);
                    color: var(--accent-color);
                    font-weight: 700;
                }
            }
            & > div{
                font-size: 1.5em;
                white-space: nowrap;
            }
        }
        .blockprice__discount__timer{
            --border-color: var(--accent-color);
            min-width: 0;

            & > span{
                font-size: .75em;
                display: block;
                opacity: .5;
            }
            & > div{
                white-space: nowrap;
                span{ color: var(--accent-color); }
            }
            & > div{
                font-size: 1.25em;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }

    .blockprice__preims{
        font-size: .875em;
        font-weight: 200;

        ul{
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: space-between;
            gap: clamp(1px, .4vw, .4rem);
            gap: .3em;

            li{
                padding: .75em 1em .5em;
                border-radius: .3em;
                background-color: rgba(255, 255, 255, .05);
                flex-grow: 1;
                line-height: 120%;
                display: flex;
                flex-direction: column;
                white-space: nowrap;

                &:first-child{ border-radius: 1.25em .3em .3em 1.25em; }
                &:last-child{ border-radius: .3em 1.25em 1.25em .3em; }

                svg{
                    width: 1.5;
                    height: auto;
                    margin-bottom: .2em;
                    opacity: .5;
                    margin-top: 0;
                }
                span{
                    display: block;
                    margin-block: auto;
                }
            }
        }
    }

    .blockprice__text{
        font-size: .875em;
        opacity: .5;
        font-style: italic;
        text-wrap: balance;
    }

    .blockprice__main{
        padding: 1em;
        border-radius: 1.25em;
        background-color: rgba(255,255,255,.05); 

        .blockprice__main__head{
            display: flex;
            gap: var(--gap);
            justify-content: space-between;
            align-items: center;
            
            .blockprice__main__minprice{
                flex-grow: 1;

                div{
                    font-size: 1.25em;
                    text-transform: uppercase;
                    margin-bottom: .1em;
                }

                i{
                    opacity: .5;
                    font-weight: 200;
                    font-style: normal;
                }
            }

            .blockprice__main__more{

                label{
                    input{
                        display: none;
                    }
                    span{
                        transition-property: color;
                        transition-duration: 200ms;
                        position: relative;
                        min-width: 5em;
                        text-align: center;

                        &::before{
                            content: "свернуть";
                            position: absolute;
                            inset: 0;
                            text-align: center;
                            transition-property: color;
                            transition-duration: 200ms;
                            color: transparent;
                        }
                    }
                    svg *{
                        transition-duration: 200ms;
                        transition-property: opacity;
                        
                        &[closer]{ opacity: 0; }
                    } 
                    &:has(input#blockprice-opener:checked){

                        background-color: rgba(255,255,255,.02);

                        span{
                            color: transparent;

                            &::before{
                                color: rgba(255,255,255,.1);
                            }
                        }

                        svg *{
                            opacity: 0;
                            &[closer]{ opacity: 1; }
                        }
                    } 
                }
            }
        }

        .blockprice__main__table{
            margin-inline: -.25em;

            opacity: 0;
            height: 0;
            transform: translateY(-1em);
            overflow: hidden;
            interpolate-size: allow-keywords;
            transition-duration: 200ms;
            transition-property: height, opacity, transform;

            .accent{
                color: var(--accent-color);
            }

            .blockprice__main__table__items{
                padding-top: 1em;
                font-size: clamp(10px, 1vw, 1rem);

                & > div{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    gap: .5em;
                    padding-block: 1em;
                    border-bottom: 1px solid rgba(255,255,255,.05);

                    &:first-child > div{
                        text-transform: uppercase;
                    }
                    &:last-child{
                        margin-bottom: 1em;
                    }

                    & > div{

                        &:first-child{
                            flex: 0 0 40%;
                            max-width: 15em;
                            text-wrap: balance;
                            opacity: .5;
                        }
                        &:last-child{
                            flex-grow: 1;
                            padding-left: .5em;
                        }
                    }
                    & > i{
                        opacity: .5;
                        display: none;
                    }
                    & > svg{
                        grid-column: 2 / span 1;
                        grid-row: 1 / span 2;
                        place-content: center;
                    }
                }
            }
            .blockprice__main__table__desc{
                display: flex;
                gap: .5em;
                font-size: clamp(10px, .875vw, .875rem);
                max-width: 80em;
                text-wrap: balance;
                opacity: .5;
                font-weight: 200;
                font-style: italic;

                i{
                    flex-grow: 0;
                }
            }
        }
        &:has(input#blockprice-opener:checked) .blockprice__main__table{
            height: auto;
            opacity: 1;
            transform: translateY(0);
        }
    }

    .blockprice__footer{
        --btn-gradient-1: hsl(from var(--accent-color) h s calc(l + 12));
        --btn-gradient-2: hsl(from var(--accent-color) h s calc(l - 12));
        --btn-color: var(--base-dark);
        --btn-font-weight: 700;
        /* text-align: center; */
        position: relative;

        .blockprice__img{
            display: none;
        }
    }
}
@media screen and (width >= 768px) {
    .blockprice{

        .blockprice__top{
            flex-direction: row;

            & > *{
                flex: 1 1 auto;
            }

            .blockprice__discount {
                .blockprice__discount__timer {
                    min-width: unset;
                }
            }
        }

        .blockprice__main {
            .blockprice__main__table {
                .blockprice__main__table__items {
                    & > div {
                        & > div {
                            text-wrap: balance;
                            &:first-child {
                                max-width: unset;
                            }
                        }
                    }
                }
            }
        }

    }
}
@media screen and (width >= 1200px) {
    .blockprice{
        
        .container{
            padding-block: var(--container-padding);
            border-radius: var(--main-border-radius);
            background: var(--container-bg);
            max-width: calc(var(--container-max-width) - 2 * var(--container-padding));
            overflow: clip;

            & > *{
                position: relative;
                z-index: 10;
            }
        }

        .blockprice__footer{
            z-index: 5;

            .blockprice__img{
                display: block;
                position: absolute;
                inset: auto 0 0 auto;
                z-index: -1;
                color: #fff;
                pointer-events: none;

                svg{
                    width: 24rem;
                    height: auto;
                    display: block;
                    translate: 5% 10%;
                    rotate: 10deg;
                    opacity: .02;
                    transform-origin: 50% 100%;
                    transition-property: rotate, scale, opacity, translate;
                    transition-duration: 200ms;
                    
                    &:is(.blockprice:has(#blockprice-opener:checked) .blockprice__img svg){
                        rotate: -10deg;
                        scale: 1.8;
                        translate: 2% 8%;
                        opacity: .01;
                    }
                }
            }
        }
    }
}
.blockprice__runline{
    font-size: clamp(2rem, 3vw, 4rem);
    margin-top: 1em;
    font-weight: 800;
    text-transform: uppercase;
    scale: 1 .75;
    opacity: .05;
    --speed: 10s;
}
@media screen and (width >= 768px) {
    .blockprice__runline{
        --speed: 15s;
    }
}
/* blockprice - END */



/* ease page !!!!!!!!!!!!!!!!!!!!!!!!! */


/* easymain */
.easymain{
    overflow: clip;
    padding-bottom: clamp(2rem,4vw,4rem);

    ul{
        font-style: italic;
        opacity: .5;
    }

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

        .easymain__text{
            grid-column: 1 / -1;
        }
        .easymain__min{
            font-size: .75rem;
        }
        .easymain__bottom{
            text-wrap: balance;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .btn{
                align-self: flex-start;
            }
        }
        .easymain__img{
            position: relative;
            z-index: -1;

            & > div{
                margin: -10% -25% -15% -15%;
                img{
                    object-position: center;
                    object-fit: contain;
                }
            }
        }
    }
}
@media screen and (width >= 768px) {
    .easymain{
        .easymain__grid{
            margin-top: clamp(3vw, 3vw, 4rem);
            margin-bottom: clamp(2vw, 2vw, 2rem);

            .easymain__text{
                grid-column: 1 / span 1;
                grid-row: 1 / span 1;
                
                .bgblock, ul{
                    margin-bottom: 3em;
                }
            }
            .easymain__bottom{
                grid-column: 1 / span 1;
                grid-row: 2 / span 1;
            }
            .easymain__img{
                grid-column: 2 / span 1;
                grid-row: 1 / span 2;
                & > div{
                    margin: -10% -10% -10% 0;
                }
            }
        }
    }
}
/* easymain - END */


/* easywho */
.easywho{
    margin-bottom: clamp(2rem,4vw,4rem);

    .easywho__table{
        margin-inline: var(--minus-container-padding);
        border-radius: 1lh;
        overflow: clip;
        margin-bottom: 1.5em;
        font-size: clamp(11px, 1em, 1rem);

        & > div{
            display: grid;
            grid-template-columns: clamp(7.5em,9vw,9rem) 1fr 1fr;
            gap: 1px;
            margin-bottom: 1px;

            & > div{
                display: flex;
                flex-direction: column;
                text-align: center;
                gap: .25lh;
                background-color: color-mix(in srgb, currentColor 3%, transparent);
                padding-block: .5lh;
                padding-inline: .5lh;
                border-radius: .3lh;
                text-wrap: balance;

                &:first-child{
                    white-space: nowrap;
                    font-style: italic;
                    opacity: .5;
                }

                svg{
                    height: 1lh;
                    width: auto;
                    color: var(--theme-color);
                }

                &:nth-child(3){
                    background-color: color-mix(in srgb, rgb(162, 41, 41) 10%, transparent);
                    svg{
                        color: rgb(162, 41, 41);
                    }
                }
            }

            &:last-child{
                grid-template-columns: clamp(7.5em,9vw,9rem) 1fr;
                margin-bottom: 0;

                & > div{
                    color: var(--theme-color);
                    background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);
                    &:last-child{ font-weight: 700; font-style: italic; }
                }
            }
        }

        
    }
}
@media screen and (width >= 768px) {
    .easywho{
        text-align: center;

        .blockquote{
            margin-inline: auto;
        }

        .easywho__table{
            max-width: 65em;
            margin-inline: auto;

            & > div{
                & > div{
                    padding-block: 1lh;
                    padding-inline: 1lh;
                }
            }
        }
    }
}
/* easywho - END */


/* easymin */
.easymin{
    margin-bottom: clamp(2rem,4vw,4rem);

    .block-title{
        margin-bottom: .5rem;
    }
    .easymin__titledesc{
        font-size: .75rem;
        font-style: italic;
        opacity: .5;
        /* text-wrap: balance; */
        margin-bottom: 2rem;
        max-width: 60em;
    }

    .easymin__row{
        display: flex;
        flex-direction: column;
        gap: clamp(1.5em, 6vw, 6rem);
        margin-bottom: clamp(1.5em, 3vw, 3rem);

        .easymin__col1{
            background-color: var(--container-bg);
            border-radius: 1.5em;
            padding-inline: clamp(1em, 3vw, 3rem);
            padding-block: clamp(1em, 2vw, 2rem);
            box-shadow: .25rem .25rem 1rem rgba(0,0,0,.1);

            ul{
                font-style: italic;
                opacity: .5;            
            }
        }
        .easymin__col2{
            p{ opacity: .5; font-style: italic; font-size: .75rem; max-width: 42em; }
        }

        .easymin__title{
            span{
                color: var(--theme-color);
            }
        }
    }
}
@media screen and (width >= 768px) {
    .easymin{
        .easymin__row{
            flex-direction: row;
            /* justify-content: space-between; */
            align-items: center;

            & > *{
                flex: 0 1 auto;
                max-width: 50%;

                &:first-child{
                    flex: 0 1 30em;
                }
            }
        }
    }
}
.easyconstruct{
    margin-bottom: clamp(2rem,4vw,4rem);
}
#easyconstruct-more .easyconstruct__more{
    max-width: 60em;

    ul{
        margin-top: 0;
        li{
            margin-top: .5em;
        }
    }
}
/* easymin - END */


/* easywhyme */
.easywhyme{
    overflow: clip;
    padding-bottom: clamp(2rem,4vw,4rem);
    
    .block-title{
        margin-bottom: .5rem;
    }
    .easywhyme__titledesc{
        font-size: .75rem;
        font-style: italic;
        opacity: .5;
        text-wrap: balance;
        width: fit-content;
    }

    ul{
        font-style: italic;
        opacity: .5;
    }
    .easywhyme__grid{
        margin-top: clamp(2em, 4vw, 4rem);
        position: relative;

        & > *{
            &.easywhyme__grid1,
            &.easywhyme__grid2,
            &.easywhyme__grid3{
                border-radius: 1em;
                padding-block: 1em;
                padding-inline: 1.5em;
                box-shadow: .25em .25em 1em rgba(0,0,0,.1);
                background-color: #fff;
                margin-bottom: 1em;
                
                .btn{
                    display: none;
                }
            }
            &.easywhyme__grid__img{
                position: relative;
                z-index: 1;

                img{
                    position: absolute;
                    right: -5em;
                    bottom: -2em;
                    width: auto;
                    height: 12em;
                    max-width: unset;
                }
            }
        }
    }
}
@media screen and (width >= 768px) {
    .easywhyme{
        .block-title, .easywhyme__titledesc{
            margin-inline: auto;
        }
        .easywhyme__grid{
            position: relative;
            z-index: 1;
            height: 23lh;

            & > .btn{
                display: none;
            }
            & > *{
                position: absolute;

                ul{
                    font-size: .75rem;
                    li + li{
                        margin-top: .5em;
                    }
                }

                &.easywhyme__grid--bg{
                    width: 30em;
                    border: 1px solid var(--theme-color);

                    .btn{
                        display: inline-flex;
                    }
                }
                &.easywhyme__grid1{ inset: 0 auto auto 0; max-width: 30%; }
                &.easywhyme__grid2{ inset: 2lh 0 auto auto; max-width: 25%; }
                &.easywhyme__grid3{ inset: auto auto 0 50%; width: 25em; margin-left: -6em; max-width: 25%; }
                &.easywhyme__grid4{ /*inset: 50% 50% auto auto; translate: 50% -50%;*/ display: none; }

                &.easywhyme__grid__img{
                    display: block;
                    inset: 0 auto auto 50%;
                    translate: -50% 0;
                    width: 25%;
                    z-index: -1;

                    img{
                        position: relative;
                        inset: auto;
                        width: 100%;
                        height: auto;
                    }

                    &::before, &::after{
                        content: "";
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        translate: -50% 0;
                        height: 1px;
                        width: 300%;
                        background: linear-gradient(90deg, 
                            var(--theme-color) 30%, 
                            transparent 40%, 
                            transparent 63%, 
                            var(--theme-color) 73%);
                        opacity: .5;
                        z-index: -1;
                    }
                    &::after{
                        width: 1px;
                        height: 12lh;
                        background: var(--theme-color);
                    }
                }
            }
            
        }
    }
}
/* easywhyme - END */


/* ease page - END !!!!!!!!!!!!!!!!!!!!!!!!! */



/* whatmain */
.whatmain{
    margin-bottom: 3rem;
    font-size: clamp(.75rem, 1vw, 1rem);

    .whatmain__main{

        .whatmain__list__title{ 
            font-size: clamp(.75rem, .75vw, .75rem);
            margin-block: 1em .75em;
            color: #b0b0b0;
            font-style: italic;
            text-transform: lowercase;

            span{
                color: var(--theme-color);
                font-weight: 800;
                text-transform: uppercase;
                font-size: 1.125em;
                background-color: var(--container-bg);
                display: inline-block;
                padding-inline: .3em;
                font-style: normal;
                vertical-align: baseline;
                transform: skew(-10deg, 0deg);
                line-height: 140%;
                border-radius: .2em;
                box-shadow: 0 .25em .5em rgba(0,0,0,.05);
                border: 1px solid #fff;
            }
        }

        ul{
            list-style: none;
            display: flex;
            gap: 1em;
            overflow: auto;
            padding: .75em var(--container-padding);
            margin: -.5rem var(--minus-container-padding) clamp(1em, 3vw, 3rem);
            scrollbar-width: none;

            li{
                flex: 1 0 12em;
                box-sizing: content-box;

                a{
                    background-color: var(--container-bg);
                    border-radius: 1em;
                    --pad: clamp(1em, 1.75vw, 1.75rem);
                    padding: calc(.75 * var(--pad)) var(--pad) var(--pad);
                    box-shadow: 0 .25em .5em rgba(0,0,0,.05);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    gap: .5em;
                    position: relative;
                    border: 1px solid #fff;
                    height: 100%;
                    line-height: 120%;

                    &[popup]::after{
                        content: "подробнее »";
                        display: block;
                        font-size: clamp(10px, .8em, 1em);
                        opacity: .75;
                        translate: 0 .25em;
                        line-height: 120%;
                        color: var(--theme-color);
                        text-align: right;
                    }
                    & > svg{
                        position: absolute;
                        right: .5em;
                        top: .6em;
                        width: 1.5em;
                        height: auto;
                        opacity: .1;
                    }
                    i{
                        font-weight: 800;
                        font-style: normal;
                        opacity: .1;
                        font-size: 1.25em;
                        margin-bottom: .25em;

                    }
                    span{
                        margin-block: auto;
                        opacity: .4;
                        font-size: clamp(10px, .8em, 1em);
                        line-height: 110%;
                        text-wrap: balance;
                    }
                }

                &:last-child a{
                    background-color: var(--theme-color);
                    color: #fff;
                    font-weight: 200;

                    background: linear-gradient(var(--btn-gradient-angle, 155deg), var(--btn-gradient-1, color-mix(in srgb, currentColor 10%, transparent)), var(--btn-gradient-2, color-mix(in srgb, currentColor 25%, transparent)));

                    &::after{
                        content: "бесплатная консультация";
                        color: inherit;
                    }
                } 

            }
        }
    }
}
@media screen and (width >= 768px) {
    .whatmain {
        .whatmain__main {
            ul {
                li {
                    &:last-child a {
                        background: #fff;
                        color: var(--base-dark);
                        box-shadow: inset 0 0 1em rgba(0,0,0,.15);
                        font-weight: 400;

                        b, &::after{
                            color: var(--theme-color);
                        }
                    }
                }
            }
        }
    }
}
/* whatmain - END */



/* howitwork */
.howitwork{
    margin-bottom: 3rem;
    --gap: clamp(.5rem, 3vw, 3rem);
    font-size: clamp(.75rem, 1vw, 1rem);

    .block-title-desc{
        opacity: .5;
        line-height: 120%;
    }

    .howitwork__wrap{
        
        .howitwork__grid{
            display: grid;
            padding-block: 1.5em;
            grid-template-columns: 3fr 1fr 3fr;
            gap: 1em;
            line-height: 140%;
            text-wrap: balance;

            .howitwork__cell{
                position: relative;
                grid-row-start: var(--y);
                grid-row-end: span var(--height, 2);
                grid-column-end: span 1;

                &[before]::before{
                    content: attr(before);
                    position: absolute;
                    top: -1.5em;
                    left: .5em;
                    font-weight: 700;
                    color: var(--theme-color);
                }

                &.howitwork__cell--client{
                    grid-column-start: 1;
                    --border-width: 2px;
                }
                &.howitwork__cell--shop{
                    grid-column-start: 3;
                    --border-color: var(--theme-color);
                }
                &.howitwork__cell--between{
                    grid-column-start: 2;
                    line-height: 120%;
                    color: var(--theme-color);
                    font-weight: 500;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    svg{
                        translate: 0 -5%;
                    }
                }
            }
            
            
            .howitwork__item{
                background-color: var(--container-bg);
                border-radius: 1em;
                padding: .75em 1em 1em;
                box-shadow: 0 .25em .5em rgba(0,0,0,.05);
                min-height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                gap: .2em;
                position: relative;
                border: var(--border-width, 1px) solid var(--border-color, #fff);

                &.howitwork__item--hasnext{

                    &::before{
                        content: "";
                        position: absolute;
                        inset: 100% auto -2em 1.25em;
                        background-color: var(--border-color, #fff);
                        width: var(--border-width, 1px);
                    }
                }

                &[popup]::after{
                    content: "подробнее »";
                    display: block;
                    font-size: clamp(10px, .8em, 1em);
                    opacity: .75;
                    /* text-align: right; */
                    translate: 0 .25em;
                    line-height: 120%;
                }

                & > svg{
                    position: absolute;
                    right: .5em;
                    top: .6em;
                    width: 1.5em;
                    height: auto;
                    opacity: .1;
                }

                i{
                    font-weight: 800;
                    font-style: normal;
                    opacity: .1;
                }
                b{

                }
                span{
                    line-height: 120%;
                    opacity: .4;
                    font-size: clamp(10px, .8em, 1em);
                }

            }
            
        }

        
        .howitwork__switch{
            margin-bottom: 1em;
            background-color: #fff;
            box-shadow: 0 0 .5em color-mix(in srgb, currentColor 10%, transparent);
            --checked-bg: var(--theme-color);
            --checked-color: var(--base-light);
        }
        .howitwork__grid[howitwork-switch]{ display: none; }
        &:has(input[value="1"]:checked) .howitwork__grid[howitwork-switch="1"],
        &:has(input[value="2"]:checked) .howitwork__grid[howitwork-switch="2"]{
            display: grid;
        }

    }
}
@media screen and (width >= 768px) {
    .howitwork{
        .howitwork__wrap{
            display: flex;
            gap: clamp(1em, 5vw, 5rem);

            .howitwork__grids{
                flex: 1 1 70%;
            }
        }
    }
}

.howitwork__row{
    font-size: clamp(.75rem, 1em, .875rem);
    padding: clamp(.75em, .75vw, .75rem) clamp(1em, 1.5vw, 1.5rem);
    margin-block: 2em;
    display: flex;
    align-items: center;
    gap: 1em;
    background-color: var(--container-bg);
    box-shadow: 0 .25em .5em rgba(0,0,0,.05);
    border-radius: 1em;
    --btn-color: #fff;

    max-width: 41em;

    .howitwork__row__content{
        flex-grow: 1;
        font-style: italic;

        .howitwork__row__title{
            font-weight: 700;
            font-size: 1.25em;
            margin-bottom: .5em;
            & + p{
                font-size: .875em;
            }
        }
    }
    p{
        opacity: .5;
        text-wrap: balance;
    }
    .howitwork__row__svg{
        flex: 0 0 6em;
    }
}
@media screen and (width >= 768px) {
    .howitwork__row{

        .howitwork__row__content{
            
        }
    }
}
/* howitwork - END */


/* profit-animate-svg */
.profit-animate-svg {

    text-align: right;

    & > svg{
        color: hsl(from var(--theme-color) h 22% 85%);
        width: 100%;
        height: auto;
        view-timeline-name: --timeline_reasonblock_svg;
        
        .reasonblock__svg__r1{ 
            fill: color-mix(in srgb, #fff 80%, var(--theme-color)); 
            animation-range: contain 0% contain 5svh;
        }
        .reasonblock__svg__r2{ 
            fill: color-mix(in srgb, #fff 65%, var(--theme-color)); 
            animation-range: contain 5% contain 10svh;
        }
        .reasonblock__svg__r3{ 
            fill: color-mix(in srgb, #fff 50%, var(--theme-color)); 
            animation-range: contain 10% contain 15svh;
        }
        .reasonblock__svg__r4{ 
            fill: color-mix(in srgb, #fff 35%, var(--theme-color)); 
            animation-range: contain 15% contain 20svh;
        }
        .reasonblock__svg__r5{ 
            fill: color-mix(in srgb, #fff 20%, var(--theme-color)); 
            animation-range: contain 20% contain 25svh;
        }
        .reasonblock__svg__r, .reasonblock__svg__dollar2{
            animation-name: reasonblock-svg-r;
            animation-duration: 4s;
            animation-fill-mode: both;
            animation-timing-function: ease;
            animation-timeline: --timeline_reasonblock_svg;
        }
        .reasonblock__svg__dollar2{
            animation-range: contain 15% contain 25svh;
            fill: var(--theme-color);
        }
    }
}
/* profit-animate-svg - END */



/* reasonblock */
.reasonblock{
    margin-bottom: 3rem;
    --gap: clamp(.5rem, 3vw, 3rem);


    .reasonblock__row{
        display: flex;
        gap: var(--gap);
        font-size: clamp(.75rem, 1vw, 1rem);
        position: relative;
        z-index: 1;

        .reasonblock__title{
            min-width: 0;
            max-width: 20em;
            display: flex;
            gap: var(--gap);
            flex-direction: column;
            justify-content: space-between;
            text-wrap: balance;
            position: relative;
            z-index: 1;
            box-shadow: 0 .25em .5em rgba(0,0,0,0.1);
            border-radius: 1em;
            padding: var(--gap);
            --border-color: var(--theme-color);
            --btn-bg: var(--theme-color);
            --btn-color: hsl(from var(--theme-color) h s 95%);


            & > i{
                line-height: 130%;
                color: #808080;
                
                b{
                    color: var(--theme-color);
                }
            }
            
        }
        .reasonblock__content{
            flex: 0 0 16em;

            ol{
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;
                gap: .25em;

                li{
                    margin: 0 0 0 2.25em;
                    padding: .75em .1em .75em 0;
                    line-height: 130%;
                    position: relative;
                    z-index: 1;

                    &:last-child{
                        list-style: none;
                        color: #808080;
                        font-style: italic;
                    }

                    &::before{
                        content: "";
                        position: absolute;
                        inset: 0 0 0 -2.25em;
                        box-shadow: 0 .1em .5em rgba(0,0,0,0.05);
                        border: 1px solid #fff;
                        background-color: rgba(255,255,255,.4);
                        border-radius: .3em;
                        z-index: -1;
                    }
                    &:first-child::before{ border-top-left-radius: 1em; border-top-right-radius: 1em; }
                    &:last-child::before{ border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; }

                    span{
                        color: #808080;
                        display: block;
                        font-size: .875em;
                    }
                }
            }
        }
    }
}
@keyframes reasonblock-svg-r {
    from    { opacity: 0; }
    to      { opacity: 1; }
}
@media screen and (width >= 768px) {
    
    .reasonblock{

        .reasonblock__row{
            
            .reasonblock__title{
                flex: 1 1 40%;
                max-width: unset;
                padding-inline: clamp(1rem, 3vw, 3rem);
                box-sizing: content-box;

                span:has(.btn){
                    text-align: center;
                    
                    .btn{
                        max-width: 18em;
                        margin-inline: auto;
                    }
                }
            }
            .reasonblock__content{
                flex: 1 1 60%;

                ol {
                    height: 100%;
                    gap: .5rem;

                    li{
                        padding: 1.5em;
                        flex-grow: 1;
                        max-width: 30em;
                    }
                }
            }
        }

    }

}
/* reasonblock - END */


/* sitemake */
.sitemake{
    font-size: clamp(.75rem, 1vw, 1rem);
    
    .sitemake__desc{
        font-size: 1.125em;
        max-width: 30em;
        background-color: var(--container-bg);
        border-radius: 1em;
        padding: 1em;
        color: color-mix(in srgb, currentColor 50%, transparent);

        margin-bottom: 1em;

        b{
            color: var(--theme-color);
        }
    }

    .sitemake__grid{

        ul{
            list-style: none;
            margin-block: 0;
            display: flex;
            gap: 1em;
            overflow: auto;
            scrollbar-width: none;
            margin-inline: var(--minus-container-padding);
            padding-inline: var(--container-padding);
            padding-bottom: 1em;

            li{
                flex: 0 0 10rem;
                border-radius: 1em;
                text-wrap: balance;
               
                &.sitemake__grid__item--last{
                    padding: 0;

                    button{
                        width: 100%;
                        border: none;
                        outline: none!important;
                        border-radius: inherit;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        text-align: center;
                        gap: 1em;
                        text-transform: uppercase;
                        
                        background: linear-gradient(155deg, hsl(from var(--accent-color) h s calc(l + 5)), hsl(from var(--accent-color) h s calc(l - 12)));
                        color: hsl(from var(--theme-color) h s 95%);

                        span{
                            font-size: 1.25em;
                        }
                        svg{
                            max-height: 4em;
                        }
                    }
                } 

                &.sitemake__grid__item--item{
                    background-color: hsl(from var(--theme-color) h 15% 98%);
                    box-shadow: 0 .25em .5em rgba(0,0,0,.05);

                    div{
                        display: flex;
                        flex-direction: column;
                        gap: .5em;
                        justify-content: space-between;
                        height: 100%;
                        padding: .75em .75em 1em;
                        position: relative;

                        &::before{
                            content: attr(num);
                            font-weight: 900;
                            font-size: 2em;
                            color: #ebebeb;
                            line-height: 100%;
                        }

                        b{
                            color: var(--theme-color);
                            font-size: 1.25em;
                            padding-right: 1em;
                        }

                        span{
                            font-size: clamp(10px, .75vw, .75rem);
                            color: #808080;
                            line-height: 120%;
                            margin-block: auto;
                        }
                    }
                }
            }
        }
    }

    .sitemake__footer{
        color: var(--base-light);
    }
}
@media screen and (width >= 768px) {
    .sitemake .sitemake__grid ul{
        overflow: hidden;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: clamp(1em, 2vw, 2rem);

        li{
            

        }
    }
}
/* sitemake - END */



/* contrast__table */
.contrast{
    --container-bg: hsl(from var(--theme-color) h 15% 95%);
    margin-bottom: clamp(2rem, 4vw, 4rem);
    font-size: clamp(.75rem, 1vw, 1rem);
        
    .container--bg{
        box-shadow: inset 0 0 3rem #fff;
    }

    .contrast__table{
        line-height: 120%;

        .contrast__table__tr{
            display: grid;
            grid-template-columns: 8em 1fr 1fr;
            gap: 1em;

            &:not(:last-child){
                border-bottom: 1px solid rgba(0,0,0,.05);
            }

            
            .contrast__table__td{
                text-wrap: pretty;
                padding: .75em 0;
                overflow: hidden;
            }
            .contrast__table__td:nth-child(1){ color: #808080; font-style: italic; }
            .contrast__table__td:nth-child(2){ color: #080707; opacity: .8; order: 10; }
            .contrast__table__td:nth-child(3){ 
                font-weight: 600;
                color: hsl(from var(--accent-color) h s calc(l - 12)); 
                background-color: hsl(from var(--theme-color) h 15% 98%);
                background-color: #fff;
                margin-inline: -.5em 0;
                padding-inline: .5em;
            }
            .contrast__table__td.contrast__table__th{
                color: var(--base-dark);
                font-weight: 700;

                .bold-transform{
                    font-size: 1.25em;
                    text-transform: uppercase;
                }
            }

            &:first-child > .contrast__table__td { 
                padding-top: 1em;
                border-radius: 1em 1em 0 0;
            }
            &:last-child > .contrast__table__td { 
                padding-bottom: 1em;
                border-radius: 0 0 1em 1em;
            }

            .contrast__table__td:has(.score){ 
                padding-top: 1em; 
            }
            .score{
                position: relative;
                display: inline-block;
                vertical-align: baseline;
                width: 5em;
                height: .4em;
                border-radius: .2em;
                box-shadow: 0 2px 4px rgba(0,0,0,.1);
                background-color: #fff;
                background-image: linear-gradient(90deg,hsl(from var(--accent-color) h s calc(l + 5)),hsl(from var(--accent-color) h s calc(l - 12)));
                background-size: var(--val) 100%;
                background-repeat: no-repeat;

                &::before{
                    content: "max";
                    position: absolute;
                    left: auto;
                    right: 0;
                    bottom: 100%;
                    font-size: .8em;
                }

                &[bad]{
                    --accent-color: #b2b2b2;

                    &::before{
                        content: "min";
                        left: 0;
                        right: auto;
                    }
                }
                & + svg{
                    /* height: 1em; */
                }
            }
        }
    }

    .contrast__footer{
        margin-top: 2em;
        color: #404040;
        display: flex;
        gap: .5em;
        justify-content: center;

        .btn--gradient{
            color: #fff;
        }
    }
}
@media screen and (width >= 768px) {
    .contrast {
        .contrast__table{
            max-width: 60em;
            margin-inline: auto;

            & + .blockquote{
                margin-inline: auto;
                text-align: center;
                border-left: none;
                max-width: 60em;
            }

            .contrast__table__tr{
                grid-template-columns: 2fr 2fr 2fr;

                .contrast__table__td{
                    text-align: center;

                    &:first-child{
                        text-align: right;
                        padding-right: 3em;
                    }
                }
            }

        }
    }
}
/* contrast__table - END */




/* portfolio */
.portfolio{
    view-timeline-name: --portfolio_view_timeline;
    position: relative;
    z-index: 1;
    color: var(--base-light);
    margin-block: 20lvh 50svh;
    height: 1px;
    --btn-color: var(--base-light);

    &:has(+ .main-bg){
        margin-bottom: 30svh;
    }

    .portfolio__fly, .portfolio__bg{
        position: fixed;
        inset: 0 0 auto 0;
        height: 100lvh;
        /* top: 1000lvh; */
        
        animation-duration: 1ms;
        animation-fill-mode: both;
        animation-timeline: --portfolio_view_timeline;
        animation-range: 0% 100lvh;

        &.portfolio__fly{ 
            animation-name: portfolio-fly; 
            animation-timing-function: cubic-bezier(.2,.79,.76,.29);
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-weight: 200;
        }
        &.portfolio__bg{ 
            animation-name: portfolio-bg; 
            animation-timing-function: ease;
            background-color: var(--base-dark);
            overflow: hidden;
            pointer-events: none;
        }
    }

    .portfolio__fly__content{
        max-width: 40em;
        
        .block-title span, .post-content b{
            color: hsl(from var(--accent-color) h s 60%);
        }
        .portfolio__btns{
            /* font-size: .75rem; */
        }
    }


    .portfolio__gallery{
        --gap: .5rem;
        --img-height: 20svh;
        height: calc(var(--img-height) * 2 + var(--gap));
        position: relative;
        pointer-events: none;

        transform: skew(5deg, -13deg);
        
        animation-duration: 1ms;
        animation-fill-mode: both;
        animation-timeline: --portfolio_view_timeline;
        animation-range: 0% 100lvh;
        animation-name: portfolio-block; 
        animation-timing-function: ease;

        ul{
            isolation: isolate;
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            gap: var(--gap);
            position: absolute;
            left: 0;
            top: 0;

            animation-duration: 1ms;
            animation-fill-mode: both;
            animation-timeline: --portfolio_view_timeline;
            animation-range: 0% 100lvh;
            animation-name: portfolio-row; 
            animation-timing-function: linear;

            & + ul{
                margin-top: var(--gap);
                animation-direction: reverse;
                flex-direction: row-reverse;
                top: auto;
                bottom: 0;
            }

            &::before, &::after{
                content: "";
                position: absolute;
                inset: 0 100% 0 auto;
                width: var(--img-height);
                border-radius: var(--gap);
                background: currentColor;
                opacity: .1;
                margin-inline: var(--gap);
            }
            &::after{
                inset: 0 auto 0 100%;
            }

            li{
                flex: 0 0 auto;
                min-width: 0;
                margin: 0;
                padding: 0;
                display: flex;
                gap: var(--gap);

                & > div{ /* item */
                    flex: 0 0 auto;
                    height: var(--img-height);
                    overflow: hidden;
                    border-radius: var(--gap);
                    position: relative;

                    &::before{
                        content: "";
                        position: absolute;
                        inset: 0;
                        border-radius: inherit;
                        border: 1px solid var(--base-dark);
                    }

                    img{
                        object-position: top center;
                        object-fit: cover;
                        width: 100%;
                        height: 100%;
                        filter: contrast(90%);
                    }
                }
            }
            & + ul > li{
                flex-direction: row-reverse;
            }
        }
    }
}
@keyframes portfolio-fly {
    0%   { translate: 0 100%;  opacity: 0; top: 1000lvh; /* for lazy img */ }
    1%   { translate: 0 100%;  opacity: 0; top: 0; }
    15%  {                     opacity: 1; }
    75%  {                     opacity: 1; }
    99%  { translate: 0 -70%; opacity: 0; }
    100% { translate: 0 -100%; opacity: 0; top: 0; }
}
@keyframes portfolio-bg {
    0%   { translate: 0 100%;  opacity: 0; }
    1%   { translate: 0 0;     opacity: 0; }
    15%  { translate: 0 0;     opacity: 1; }
    75%  { translate: 0 0;     opacity: 1; }
    99%  { translate: 0 0;     opacity: 0; }
    100% { translate: 0 -100%; opacity: 0; }
}
@keyframes portfolio-block {
    0%   { translate: 0 -2rem; opacity: 1; }
    75%  {                     opacity: 1; }
    100% { translate: 0 3rem; opacity: 0; }
}
@keyframes portfolio-row {
    0%   { translate: 100vw 0; }
    100% { translate: -100% 0; }
}
@supports not ( animation-timeline: scroll() ){
    .portfolio{
        margin-block: 3rem;
        height: auto;
        overflow: clip;

        .portfolio__bg{
            display: none!important;
        }
        .portfolio__fly{
            position: relative;
            inset: auto;
            height: auto;
        }
        *{
            animation: none!important;
        }
    }
}
/* portfolio - END */




/* concept */
.concept{
    /* margin-bottom: 1rem; */

    .concept__reason{
        font-size: .875rem;
        background: var(--container-bg);
        border-radius: 1rem;
        padding: 1rem;
        max-width: 35em;

        .concept__reason__title{
            b{ 
                font-size: 1.125em;
                color: var(--theme-color);
            }
        }
        ul{
            opacity: .75;
            margin: 0;
            padding: 0;
            list-style: none;

            li{
                position: relative;
                margin-top: .5em;
                padding-left: 1.25em;

                svg{
                    position: absolute;
                    left: -.25em;
                    width: .7lh;
                    height: .7lh;
                    top: .17lh;
                    opacity: .5;
                }
            }
        }
    }

    .concept__slogan{
        transform-origin: center top;
        display: flex;
        margin-inline: var(--minus-container-padding);
        color: #fff;
        gap: .5em;
        align-items: stretch;
        justify-content: center;
        text-transform: uppercase;
        font-size: min(5vw, 1.25rem);
        font-weight: 700;
        line-height: 2em;
        view-timeline-name: --concept_view_timeline;
        
        background-color: var(--base-dark);
        background-image: linear-gradient(155deg, hsla(from var(--theme-color) h s l / 50%) 20%, var(--base-dark) 100%);

        b{ color: hsl(from var(--accent-color) h s 60%); font-weight: 700; }

        & > div{
            height: 1lh;
            overflow: hidden;
            
            & > div{
                text-align: right;
                animation-name: concept-slogan;
                animation-timing-function: ease;
                animation-fill-mode: both;
                animation-duration: 1ms;
                animation-timeline: --concept_view_timeline;
                animation-range: 50% 60%;

                span{
                    display: block;
                }
            }
            & + div > div{ 
                text-align: left;
                animation-range: 50% 65%; 
            }
        }
    }

    .concept__titledesc{
        margin-top: 2rem;
        opacity: .5;
        font-size: .75rem;
    }

    ul.concept__cards{
        display: grid;
        gap: clamp(.25em, 2vw, 2rem);
        grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
        margin: 1rem 0 0;
        padding: 0;
        list-style: none;
        font-size: clamp(.75rem, 1vw, 1rem);
        font-weight: 500;
        line-height: 120%;

        li{
            padding-inline: clamp(1em, 1.25vw, 1.25rem);
            padding-block: clamp(.75em, 1vw, 1rem) clamp(.75em, 1.25vw, 1.25rem);
            border-radius: 1em;
            background-color: hsl(from var(--theme-color) h 15% 98%);
            position: relative;
            box-shadow: 0 .25rem 1rem rgba(0,0,0,0.1);
            min-height: 6em;

            svg{
                font-size: clamp(2em, 3vw, 3rem);
                height: 1em;
                width: auto;
                color: hsl(from var(--theme-color) h 78% 34%);
                display: block;
                margin-bottom: .5em;
            }

            button{
                border: none;
                outline: none!important;
                text-align: left;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                position: absolute;
                inset: 0;
                color: var(--base-light);
                border-radius: inherit;
                padding: inherit;
                background: linear-gradient(
                    var(--btn-gradient-angle, 155deg), 
                    var(--btn-gradient-1, color-mix(in srgb, currentColor 10%, transparent)), 
                    var(--btn-gradient-2, color-mix(in srgb, currentColor 25%, transparent))
                );

                svg{
                    color: inherit;
                }
            }
        }
    }
    .concept__footer{
        font-size: clamp(.75rem, 1vw, 1rem);
        --btn-bg: var(--container-bg);
    }
}
@keyframes concept-slogan {
    from { translate: 0 0; }
    to   { translate: 0 -50%; }
}
@media screen and (width >= 768px) {
    .concept{
        .concept__slogan{
            max-width: 20em;
            margin-inline: 0;
            border-radius: 1em;
            line-height: 3em;
            position: relative;
        }
    }
}
@media screen and (width >= 1200px) {
    .concept{
        .concept__top{
            padding-block: 2rem;
            padding: 3rem 2rem;
            background: var(--container-bg);
            border-radius: 2rem;
            margin-bottom: 2em;

            display: flex;
            gap: 4rem;
            align-items: center;

            .concept__reason{
                background: #fff;
                box-shadow: 0 0 1rem rgba(0,0,0,.05);
                position: relative;
                z-index: 5;
            }
            .concept__titledesc{
                margin-top: 0;
            }
            .block-title{
                margin-bottom: .5em;
            }
        }
        
        ul.concept__cards{
            grid-template-columns: repeat(3, 1fr);

            li{
                padding-block: 1.5em 2em;
            }
        }
    }
}
/* concept - END */



/* about */
.about{
    
    .about__main{
        font-size: clamp(.875rem, 1vw, 1rem);
        overflow: hidden;

        & > p{
            text-wrap: pretty;
            span{
                opacity: .5;
                font-weight: 200;
            }
        } 

        .about__main__title{
            display: flex;
            align-items: center;
            gap: .5em;
            white-space: nowrap;
            font-size: .875em;

            & > div{
                border-radius: .5em;
                padding: .5em .75em;
            }

            .about__main__name{
                background: var(--container-bg);
                width: fit-content;
            }
            .about__main__desc{
                opacity: .4;
                font-weight: 200;
                border: 1px solid rgba(255,255,255,.1);
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        dl{
            font-size: .875em;
            margin-block: clamp(1em, 2vw, 2rem);
            
            dt{
                color: #b8b8b8;
                margin-top: .5em;
            }
            dd{
                font-variant-numeric: tabular-nums;
                b{
                    color: #fff;
                    font-size: 1.25em;
                    font-weight: 400;
                }
            }
        }
        
        .about__footer{
            --btn-font-weight: 700;
            color: var(--base-dark);
            --btn-gradient-1: hsl(from var(--accent-color) h s calc(l + 12));
            --btn-gradient-2: hsl(from var(--accent-color) h s calc(l - 12));
        }
    }
    .about__img{
        display: none;
    }
}
@media screen and (width >= 768px) {
    .about{
        .about__row{
            display: flex;
            align-items: center;
            justify-content: space-between;

            .about__main{
                flex: 0 0 50%;

                & > p{
                    span{
                        display: block;
                    }
                }
            }
            .about__img{
                display: block;
                flex: 0 0 30%;
                margin-top: -3lh;
            }
        }
    }
}
/* about - END */