:root {
    --color-bg           : #101010;
    --scale: 1;
    --coeff: 1;
    --main-width: calc(1440px * var(--coeff));
}

body {
    display: flex;
    width: 100vw;
    height: 100vh;

    font-family: "Mont";
    color: #FFFFFF;
    background-color: var(--color-bg);

    overflow: hidden;

    min-width: 100vw;
    min-height: 100vh;

    max-width: 100vw;
    max-height: 100vh;

    justify-content: center;
}

/* html {

    display: block;
    width: 100vw;
    height: 100vh;

    font-family: "Mont";
    color: #FFFFFF;


    overflow: hidden;

    min-width: 800px;
    min-height: 800px;

} */

.main {
    margin: 0;
    display: flex;

    width: 100vw;
    height: 100vh;

    max-width: var(--main-width);

    min-width: var(--main-width);
    min-height: inherit;
}

.stone {

    margin: 0;
    display: flex;
    flex-direction: column;

    position: absolute;
    z-index: 1;

    background-color: var(--color-bg);
    /* background-size: cover; */

    width: var(--main-width);
    height: 100vh;

    min-width: var(--main-width);
    min-height: 100vh;

    overflow: visible;

    align-items: center;
}

.layer {
    position: absolute;
}

.group.row {
    display: flex;
    flex-direction: row;
} 

.group.column {
    display: flex;
    flex-direction: column;
} 

.group .bottom {
    align-self: flex-end;
}

.main[data-class="page"] .stone .title {
    opacity: 0;
    margin-top: calc(-80px * var(--coeff));
}



.main[data-class="cover"] .menu {
    opacity: 0;
    padding-top: 0px;
    transition: all 0.5s 0s ease-out allow-discrete;
}

.menu {
    opacity: 1;
    position: absolute;
    z-index: 69;

    padding-top: calc(64px * var(--coeff));
    /* margin-left: calc(60px * var(--scale)); */

    font-size: calc(11px * var(--coeff));
    letter-spacing: calc(-0.24px * var(--coeff));

    color: #898989;
    text-transform: uppercase;
    font-weight: 700;


    display: flex;
    width: var(--main-width);
    padding-left: calc(140px * var(--coeff));

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

    box-shadow: 0 calc(24px * var(--coeff)) calc(24px * var(--coeff)) calc(-4px * var(--coeff)) rgba(14, 14, 14, 0.8);
    border-bottom: calc(2px * var(--coeff)) solid rgba(10, 10, 10, 0.4); 

    transition: all 0.5s 0.4s ease-out allow-discrete;
}

.menu .item {
    margin-right: calc(24px * var(--coeff));
    font-weight: 700;
    cursor: pointer;

    padding-bottom: calc(12px * var(--coeff));
    border-bottom: calc(2px * var(--coeff)) solid rgb(10, 10, 10);

    transition: color 0.6s ease-in-out, border-bottom 0.6s 0.2s ease-in-out;
}

.menu .item.active {
    color: #FFFFFF;
    border-bottom: calc(2px * var(--coeff)) solid #FFFFFF;
}


.main[data-class="page"] .stone .subtitle {
    opacity: 0;
    margin-top: calc(-80px * var(--coeff));
}

.main[data-class="page"] .stone .highlighter {
    opacity: 0;
    animation: none;
}

.main[data-class="page"] .page[data-class="cover"] {
    opacity: 0;
    /* padding-top: 600px; */
}

.main[data-class="page"] .stone .image {
    opacity: 0;
    /* background-size: calc(1282px * 1) calc(1359px * 1); */
    /* background-position: 460px 100px; */
}

.main[data-class="page"] .stone .image.blend {
    opacity: 1;
    filter: contrast(1.06) brightness(1.06);
}

.nof .main[data-class="page"] .stone .image.blend {
    opacity: 0.4;
    filter: none;
}

.stone .content {
    /* width: calc(100% - 440px); */
    width: calc(100% - calc(270px * var(--coeff)));
    display: flex;
    justify-content: flex-end;
    height: calc(100% - calc(500px * var(--coeff)));
}

.stone .highlighter {
    width: 100%;
    height: calc(56px * var(--coeff));
    position: absolute;

    background: #FFFFFF;
    opacity: 0.4;
    mix-blend-mode: soft-light;
    transform: translateY(calc(170px * var(--coeff)));


    -webkit-mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 100) 40%, rgba(255, 255, 255, 100) 60%, rgba(255, 255, 255, 0));
    mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 100) 40%, rgba(255, 255, 255, 100) 60%, rgba(255, 255, 255, 0));

    animation: hl-breath 5s infinite;
}

@keyframes hl-breath {
  50% {
    opacity: 0%
  }
  80% {
    opacity: 40%
  }
}

.stone .title {
    opacity: 1;
    background-image: url(/css/media/title-vector.svg);
    width: calc(1064px * var(--coeff));
    height: calc(216px * var(--coeff));

    background-position: center center;
    background-repeat: no-repeat;

    background-size: contain;

    margin-top: calc(80px * var(--coeff));

    display: flex;
    flex-direction: column;

    /* margin-left: calc(170px * var(--scale)); */

    filter: drop-shadow(0 2px calc(75px * var(--coeff)) rgba(214, 214, 214, 0.16))       
            drop-shadow(0 2px calc(16px * var(--coeff)) rgba(255, 255, 255, 0.56))
            drop-shadow(0 calc(5px * var(--coeff)) 0 rgba(11, 11, 11, 0.8))
            drop-shadow(0 calc(9px * var(--coeff)) 0 rgba(80, 80, 80, 0.32));

    animation: breath 7s infinite;
    will-change: filter;
    
    transition: all 0.5s ease-out allow-discrete;
}

.nof .stone .title {
    filter: none;
}

.box.center {
    align-items: center;
}

.box.wide {
    width: 100%;
}

.stone .subtitle {
    margin-top: 0px;
    transition: all 0.5s ease-out allow-discrete;
}

@keyframes breath {
  50% {
    filter: drop-shadow(0 2px calc(75px * var(--coeff)) rgba(214, 214, 214, 0.24))       
            drop-shadow(0 2px calc(16px * var(--coeff)) rgba(255, 255, 255, 0.64))
            drop-shadow(0 calc(5px * var(--coeff)) 0 rgba(11, 11, 11, 0.88))
            drop-shadow(0 calc(9px * var(--coeff)) 0 rgba(80, 80, 80, 0.36));
  }
}

.stone .image {

    margin: 0;
    opacity: 1;
    background-image: url(/css/media/persona2.png);
    width: 100%;
    height: 100vh;

    background-size: contain;

    background-size: calc(1282px * 0.8 * var(--coeff)) calc(1359px * 0.8 * var(--coeff));
    background-position: right bottom;

    background-repeat: no-repeat;
    /* background-position: 520px 160px; */

    /* margin-top: 160px; */
    position: absolute;

    /* filter: drop-shadow(-12px 0 32px rgba(0, 0, 0, 0.8)); */
    /* filter: drop-shadow(0 -4px 4px rgba(30, 30, 30, 0.8)) drop-shadow(0 -24px 56px rgba(40, 40, 40, 0.8)); */
    filter: drop-shadow(0 calc(-4px * var(--coeff)) calc(20px * var(--coeff)) rgba(0, 0, 0, 0.8)) drop-shadow(0 calc(-24px * var(--coeff)) calc(56px * var(--coeff)) rgba(10, 10, 10, 0.8));

    mix-blend-mode: normal;
    transform: translateX(calc(90px * var(--coeff)));

    transition: opacity 1.6s ease-out allow-discrete;
    animation: man 12s infinite;

}

@keyframes man {
  50% {
    filter: drop-shadow(calc(8px * var(--coeff)) calc(-4px * var(--coeff)) calc(20px * var(--coeff)) rgba(0, 0, 0, 0.7)) drop-shadow(calc(8px * var(--coeff)) calc(-20px * var(--coeff)) calc(56px * var(--coeff)) rgba(10, 10, 10, 0.7));
  }
}

.stone .image.blend {
    mix-blend-mode: color-dodge;
    filter: none;
    -webkit-mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 100), rgba(255, 255, 255, 100) 50%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0));
    mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 100), rgba(255, 255, 255, 100) 50%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0));

    animation: none;
}

.subtitle {
    font-weight: 700;
    font-size: calc(12px * var(--coeff));
    line-height: calc(15px * var(--coeff));
    letter-spacing: calc(-0.37px * var(--coeff));

    text-transform: uppercase;

    opacity: 0.8;
}

.stone .content {
    /* margin-top: calc(395px * var(--coeff)); */
    position: absolute;
    /* margin-left: calc(170px * var(--scale)); */
    height: calc(100% - calc(110px * var(--coeff)));
}

.pager {
    align-items: end;
    display: flex;
    flex-direction: column;

    margin-bottom: calc(64px * var(--coeff));
    margin-right: calc(24px * var(--coeff));
}

.pager .dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    margin-bottom: 4px;

    background-color: #4f4f4f;

    transition: background-color 0.6s ease-in-out;

    cursor: pointer;
}

.pager .dot.active {
    background-color: #FFFFFF
}

.spacer {
    width: 100%;
    height: 1px;
    margin-top: calc(24px * var(--coeff));
}

.spacer.xs {
    margin-top: calc(12px * var(--coeff));
}

.spacer.xl {
    margin-top: calc(56px * var(--coeff));
}

.text {
    color: #7A7A7A;
}

.text .highlight {
    color: #FFFFFF;
    animation: hl 6s infinite;
    opacity: 1;
    will-change: opacity;
}

@keyframes hl {
  50% {
     opacity: 0.8;
  }
}

.text span {
    font-weight: 700;
}

.text.xl {
    
    font-weight: 700;
    font-size: calc(52px * var(--coeff));
    line-height: calc(55px * var(--coeff));
    letter-spacing: calc(-1.4px * var(--coeff));

    text-shadow: calc(2px * var(--coeff)) calc(5px * var(--coeff)) calc(4px * var(--coeff)) rgba(122, 122, 122, 0.4);
}

.text.md {
    
    font-weight: 600;
    font-size: calc(20px * var(--coeff));
    line-height: calc(30px * var(--coeff));
    letter-spacing: calc(-0.56px * var(--coeff));

}



.pages {
    position: absolute;
    z-index: 32;
    height: calc(100vh - calc(64px * var(--coeff)));
    margin-top: calc(64px * var(--coeff));
    width: calc(var(--main-width) - calc(240px * var(--coeff)));


    -webkit-mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 100) 10%, rgba(255, 255, 255, 100) 70%, rgba(255, 255, 255, 0) 90%);
    mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 100) 10%, rgba(255, 255, 255, 100) 70%, rgba(255, 255, 255, 0) 90%);

    display: flex;
    flex-direction: column;

    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}


.pages::-webkit-scrollbar {
  display: none;
}

.pages .page {
    
    opacity: 1;

    display: flex;
    height: 100%;
    min-height: 100%;
    width: calc(var(--main-width) - calc(240px * var(--coeff)) - calc(270px * var(--coeff)));

    scroll-snap-align: start;

    /* margin-left: calc(170px * var(--scale)); */
    align-self: center;
}

.button {
    width: calc(200px * var(--coeff));
    height: calc(56px * var(--coeff));
    min-height: calc(56px * var(--coeff));

    border-radius: calc(50px * var(--coeff));
    border: calc(2px * var(--coeff)) solid #7FB7E8;

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

    font-size: calc(16px * var(--coeff));
    font-weight: 700;
    letter-spacing: -0.5px;

    cursor: pointer;
    background-color: rgba(10, 10, 10, 0.1);
    
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);;
}

.button.fix {
    position: absolute;
    z-index: 606;
    margin-left: calc(140px * var(--coeff));
    margin-top: calc(100vh - calc(170px * var(--coeff)));
}

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

.page[data-class="cover"] {
    padding-top: calc(370px * var(--coeff));
    padding-bottom: calc(64px * var(--coeff));

    transition: all 0.2s ease-out allow-discrete;

}

.space {
    justify-content: space-between;
}

.page[data-class="cover"] .container {
        width: calc(100% - calc(280px));
}

.text.right {
    text-align: right;
    justify-self: right;
}

.text.focus {
    color: #FDFDFD;
}

.text.xxs {
    font-size: calc(12px * var(--coeff));
    letter-spacing: calc(15px * var(--coeff));
    font-weight: 400;
    letter-spacing: calc(-0.37px * var(--coeff));
}

.text b {
    font-weight: 700;
}

.qrcode {
    width: calc(140px * var(--coeff));
    height: calc(140px * var(--coeff));
    background-color: rgba(255, 255, 255, 0.88);
    border-radius: calc(8px * var(--coeff));

    background-image: url(/css/media/qr-phone.svg);
    background-size: calc(120px * var(--coeff)) calc(120px * var(--coeff));
    background-repeat: no-repeat;
    background-position: center;

    box-shadow: 0 0 calc(24px * var(--coeff)) 0 rgba(115, 125, 105,0.64);
}

.qrcode.right {
    justify-self: right;
    align-self: flex-end;
    cursor: pointer;
}

.page[data-class="page"] {
    padding-top: calc(160px * var(--coeff));
    padding-bottom: calc(64px * var(--coeff));
}

table {
    font-size: calc(16px * var(--coeff));
    letter-spacing: calc(-0.6px * var(--coeff));
    line-height: calc(24px * var(--coeff));

    font-weight: 600;
    width: 100%;

    color: #A8A8A8;
}

table td {
    padding-bottom: calc(24px * var(--coeff));
    padding-right: calc(32px * var(--coeff));
    width: 35%;
}

table td:first-of-type {
    width: 10%;
    padding-right: calc(40px * var(--coeff));
    text-align: right;
    color: #F0F0F0;
}

table td:last-of-type {
    width: 55%;
    padding-right: 0;
}

li {
    list-style-type: disc;
}



.icon {
    --icon-size: calc(24px * var(--coeff));

    width: var(--icon-size);
    height: var(--icon-size);

    -webkit-mask-size: var(--icon-size) var(--icon-size);
    mask-size: var(--icon-size) var(--icon-size);

    background-color: #FDFDFD;

    -webkit-mask-image: url(/css/media/icn-head.svg);
    mask-image: url(/css/media/icn-head.svg);

    opacity: 0.6;
}

.icon.cardio {
     -webkit-mask-image: url(/css/media/icn-cardio.svg);
    mask-image: url(/css/media/icn-cardio.svg);
}

.icon.pills {
     -webkit-mask-image: url(/css/media/icn-pills.svg);
    mask-image: url(/css/media/icn-pills.svg);
}

.icon.eye-closed {
     -webkit-mask-image: url(/css/media/icn-eye-close.svg);
    mask-image: url(/css/media/icn-eye-close.svg);
}

.icon.location {
     -webkit-mask-image: url(/css/media/icn-location.svg);
    mask-image: url(/css/media/icn-location.svg);
}

.icon.bulb {
     -webkit-mask-image: url(/css/media/icn-bulb.svg);
    mask-image: url(/css/media/icn-bulb.svg);
}

.icon.meditation {
     -webkit-mask-image: url(/css/media/icn-meditation.svg);
    mask-image: url(/css/media/icn-meditation.svg);
}

.icon.telegram {
     -webkit-mask-image: url(/css/media/icn-telegram.svg);
    mask-image: url(/css/media/icn-telegram.svg);
}

.icon.speak {
     -webkit-mask-image: url(/css/media/icn-user-speak.svg);
    mask-image: url(/css/media/icn-user-speak.svg);
}

.icon.speak {
     -webkit-mask-image: url(/css/media/icn-waves.svg);
    mask-image: url(/css/media/icn-waves.svg);
}

.icon.phone {
     -webkit-mask-image: url(/css/media/icn-phone.svg);
    mask-image: url(/css/media/icn-phone.svg);
}

.icon.phone-fill {
     -webkit-mask-image: url(/css/media/icn-phone-fill.svg);
    mask-image: url(/css/media/icn-phone-fill.svg);
}

.icon.airplane {
     -webkit-mask-image: url(/css/media/icn-airplane.svg);
    mask-image: url(/css/media/icn-airplane.svg);
}


table.icons td {
    padding-bottom: calc(24px * var(--coeff));
    padding-right: calc(32px * var(--coeff));
    width: 35%;
}

table.second {
    width: 90%;
}

table.mini {
    width: 50%;
}

table.icons.mini td:first-of-type {
    width: 8%;
    min-width: calc(40px * var(--coeff));
    padding-right: 0;
}

table.icons.second td {
    width: 35%;
}

table.icons td:first-of-type {
    width: 5%;
    min-width: calc(32px * var(--coeff));
    padding-right: 0;
}

table td:last-of-type {
    width: 75%;
    padding-right: 0;
}

table.second td:last-of-type {
    width: 75%;
    padding-right: 0;
}


.hidden {
    display: none;
}

.lg .main.xs {
    display: none;
}

.xs .main.lg {
    display: none;
}

.main.xs {
    --coeff: 0.8;
    width: 100vh;
    height: 100vh;

    display: flex;
    flex-direction: column;

    color: #FFFFFF;

    width: 100vh;
    height: 100vh;
    display: flex;

    max-width: 100vw;
    min-width: 100vw;
    min-height: 100vh;

    overflow-y: scroll;

    -webkit-mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 100) 20%, rgba(255, 255, 255, 100) 90%, rgba(255, 255, 255, 0));
    mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 100) 20%, rgba(255, 255, 255, 100) 90%, rgba(255, 255, 255, 0));

    background-image: linear-gradient(90deg, rgba(10, 10, 10, 0.94), rgba(10, 10, 10, 0.94)), url(/css/media/logo-xs.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

}

.main.xs .content-container {
    width: calc(100% - 0px);
    height: calc(100% - 0px);

    padding: 32px;   
}

.main.xs .text.xl {
    font-weight: 700;
    font-size: calc(46px * var(--coeff));
    line-height: calc(49px * var(--coeff));
    letter-spacing: calc(-1.4px * var(--coeff));
    /* text-shadow: calc(2px * var(--coeff)) calc(5px * var(--coeff)) calc(4px * var(--coeff)) rgba(122, 122, 122, 0.4); */
    text-shadow: none;
}

.avatar.persona {
    width: 64px;
    height: 64px;
    border-radius: 44px;

    background-image: url(/css/media/persona-mini.png);
    background-size: contain;

    margin-right: 12px;
    margin-top: -4px;
}

.main.xs .muted {
    opacity: 0.6;
}

.main.xs .liner {
    width: 100%;
    display: block;
    height: 2px;


    border-bottom: 1px solid rgba(122, 122, 122, 0.4);
    margin-bottom: 22px;
    margin-top: 12px;
}


.main.xs ul {
    margin-left: 12px;
}

.main.xs .icon {
    --icon-size: calc(48px * var(--coeff));
    margin-bottom: 8px;
    margin-left: -4px;
}

.main.xs .text.md ul, .main.xs .text.md.mini {
    font-weight: 600;
    font-size: calc(18px * var(--coeff));
    line-height: calc(26px * var(--coeff));
    letter-spacing: calc(-0.56px * var(--coeff));
}

.main.xs .call-me {
    width: 64px;
    height: 64px;
    border-radius: 32px;
    position: fixed;
    right: 32px;
    bottom: 64px;

    background-color: #0f91cb;

    z-index: 1001;
    /* border: 6px solid rgba(10, 10, 10, 0.6); */
    box-shadow: 0 0 0 4px rgb(0 167 245 / 40%);
}

.main.xs .call-me .icon {
    background-color: #FFFFFF;

    margin-left: 10px;
    margin-top: 12px;

    display: block;
}


.main.xs .sticky {
    position: sticky;
    top: 0px;
    background-color: rgb(10, 10, 10);
    color: #F0F0F0;
    z-index: 1000;
    padding-top: 64px;
    padding-bottom: 2px;
    opacity: 1;
}

@supports not (filter: contrast(1.06) brightness(1.06)) {
  .main[data-class="page"] .stone .image.blend {
    opacity: 0.4;
    filter: none;
  }
}