:root {
    color-scheme: only light;
    --background-color: #011844;
    --slide-width: 360px;
    --slide-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.4);
    --slide-thumb-height: 3px;
    --slide-thumb-default-color: rgba(0, 0, 0, 0.4);
    --slide-thumb-active-color: rgba(255, 255, 255, 0.9);
    --motiv-color: #f37021;
    --orange-title: #E48500;
    --black-text: #000000;
    --button-border-radius: 4px;
    --font-nominee-black-extended: 'Nominee-BlackExtended';
    --font-montserrat: 'Montserrat';
    --font-montserrat-semibold: 'Montserrat-SemiBold';
    --white-color: #FFF;
}

body {
    background-color: var(--background-color);
    color-scheme: only light !important;
}

.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #011844 0%, #02254d 50%, #011844 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
}

.loader-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.loader-tree {
    font-size: 80px;
    animation: bounce 1s ease-in-out infinite;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 10px rgba(243, 112, 33, 0.5));
}

@keyframes bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.05); }
}

.loader-ornaments {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.loader-ornament {
    font-size: 24px;
    animation: swing 1.5s ease-in-out infinite;
}

.loader-ornament:nth-child(1) { animation-delay: 0s; }
.loader-ornament:nth-child(2) { animation-delay: 0.3s; }
.loader-ornament:nth-child(3) { animation-delay: 0.6s; }

@keyframes swing {
    0%, 100% { transform: rotate(-15deg); }
    50% { transform: rotate(15deg); }
}

.loader-text {
    color: var(--white-color);
    font-family: var(--font-montserrat);
    font-size: 16px;
    margin: 0;
    animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% { 
        opacity: 0.8; 
        text-shadow: 0 0 5px rgba(243, 112, 33, 0.3);
    }
    50% { 
        opacity: 1; 
        text-shadow: 0 0 20px rgba(243, 112, 33, 0.8), 0 0 30px rgba(243, 112, 33, 0.5);
    }
}

.loader-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

@font-face {
    font-family: 'Nominee-BlackExtended';
    src: url('./font/Nominee Black Extended.otf') format('opentype');
}

@font-face {
    font-family: 'Montserrat';
    src: url('./font/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat-SemiBold';
    src: url('./font/ofont.ru_Montserrat.ttf') format('truetype');
}

img {
    display: block;
    max-width: 100%;
    z-index: 0;
    max-height: 100%;
    height: auto;
    border-radius: 10px;
}

.slide {
    box-shadow: var(--slide-shadow);
    display: grid;
    margin: 20px auto;
    max-width: var(--slide-width);
    position: relative;
    height: auto;
    color-scheme: only light !important;
}

.slide-items {
    border-radius: 5px;
    grid-area: 1/1;
    overflow: hidden;
    position: relative;
    height: auto;
}

.slide-items > *,
.slide-items > * * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

.slide-items>* {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    height: auto;
}

.slide-items .active {
    opacity: 1;
    pointer-events: initial;
    position: relative;
}

.slide-nav {
    display: grid;
    grid-area: 1/1;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    z-index: 100;
}

.slide-thumbs {
    display: flex;
    grid-column: 1 / 3;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide-thumbs.paused {
    transform: translateY(-30px);
    opacity: 0;
}

.slide-thumb-item {
    background-color: var(--slide-thumb-default-color);
    border-radius: 3px;
    display: block;
    flex: 1;
    height: var(--slide-thumb-height);
    margin: 5px;
    overflow: hidden;
}

.slide-thumb-item.active::after {
    animation: thumb 10s forwards linear;
    background-color: var(--slide-thumb-active-color);
    border-radius: 3px;
    content: '';
    display: block;
    height: inherit;
    transform: translateX(-100%);
}

.slide-next,
.slide-prev {
    opacity: 0;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@keyframes thumb {
    to {
        transform: initial;
    }
}

.action-button {
    width: 328px;
    height: 48px;
    background-color: var(--motiv-color);
    color: var(--white-color);
    border: none;
    border-radius: var(--button-border-radius);
    font-family: var(--font-montserrat-semibold);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    position: relative;
    bottom: 16px;
    left: 16px;
}

.titlemini {
    width: 268px;
    height: 29px;
    flex-shrink: 0;
    color: var(--white-color);
    font-family: var(--font-montserrat);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: 0%;
    z-index: 2;
    position: absolute;
    top: 41px;
    left: 56px;
}

.titlemini2 {
    width: 292px;
    height: 29px;
    flex-shrink: 0;
    color: var(--white-color);
    font-family: var(--font-montserrat);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: 0%;
    z-index: 2;
    position: absolute;
    top: 71px;
    left: 56px;
}

.titlemini3 {
    width: 268px;
    height: 29px;
    flex-shrink: 0;
    color: var(--white-color);
    font-family: var(--font-montserrat);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: 0%;
    z-index: 2;
    position: absolute;
    top: 80px;
    left: 56px;
}

.large-title {
    width: 249px;
    height: 70px;
    flex-shrink: 0;
    color: var(--white-color);
    font-family: var(--font-nominee-black-extended);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 38.4px;
    z-index: 2;
    position: absolute;
    top: 39px;
    left: 48px;
}

.large-title2 {
    top: 69px;
    left: 48px;
    width: 249px;
    height: 38px;
    flex-shrink: 0;
    color: var(--white-color);
    font-family: var(--font-nominee-black-extended);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 38.4px;
    z-index: 2;
    position: absolute;
}

.large-title3 {
    width: 328px;
    height: 35px;
    flex-shrink: 0;
    color: var(--white-color);
    font-family: var(--font-nominee-black-extended);
    font-size: 27px;
    font-style: normal;
    font-weight: 400;
    line-height: 38.4px;
    z-index: 2;
    position: absolute;
    top: 62px;
    left: 46px;
}

.large-title4 {
    top: 41px;
    left: 46px;
    width: 292px;
    height: 70px;
    flex-shrink: 0;
    color: var(--white-color);
    font-family: var(--font-nominee-black-extended);
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 38.4px;
    z-index: 2;
    position: absolute;
}

.large-title5 {
    top: 38px;
    left: 56px;
    text-align: center;
    width: 249px;
    height: 70px;
    flex-shrink: 0;
    color: var(--white-color);
    font-family: var(--font-nominee-black-extended);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 38.4px;
    z-index: 2;
    position: absolute;
}

.large-title6 {
    width: 268px;
    height: 38px;
    flex-shrink: 0;
    color: var(--white-color);
    font-family: var(--font-nominee-black-extended);
    font-size: 27px;
    font-style: normal;
    font-weight: 400;
    line-height: 38.4px;
    z-index: 2;
    position: absolute;
    top: 41px;
    left: 56px;
}

.large-title7 {
    top: 51px;
    left: 48px;
    width: 249px;
    height: 38px;
    flex-shrink: 0;
    color: var(--white-color);
    font-family: var(--font-nominee-black-extended);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 38.4px;
    z-index: 2;
    position: absolute;
}

.large-title8 {
    top: 43px;
    width: 293px;
    height: 76px;
    flex-shrink: 0;
    color: var(--white-color);
    font-family: var(--font-nominee-black-extended);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 38.4px;
    z-index: 2;
    position: absolute;
    left: 46px;

}

.large-title9 {
    width: 328px;
    height: 36px;
    flex-shrink: 0;
    color: var(--white-color);
    font-family: var(--font-nominee-black-extended);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 38.4px;
    z-index: 2;
    position: absolute;
    top: 54px;
    left: 46px;
}

.properties,
.properties2,
.properties3,
.properties4,
.properties5,
.properties6,
.properties7 {
    font-family: var(--font-montserrat);
    color: var(--white-color);
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: 0em;
    text-align: left;
    position: absolute;
    z-index: 2;
}

.properties {
    width: 312px;
    height: 30px;
    top: 101px;
    left: 56px;
}

.properties2 {
    width: 284px;
    height: 26px;
    top: 117px;
    left: 48px;
}

.properties3 {
    width: 275px;
    height: 55px;
    top: 96px;
    left: 48px;
}

.properties4 {
    width: 290px;
    height: 26px;
    top: 108px;
    left: 46px;
}

.properties5 {
    width: 303px;
    height: 26px;
    top: 125px;
    left: 46px;
}

.properties6 {
    font-size: 18px;
    width: 220px;
    height: 55px;
    top: 105px;
    left: 46px;
}

.properties7 {
    top: 136px;
    left: 46px;
}

.variable1,
.variable2,
.variable3,
.variable4,
.variable5,
.variable6,
.variable7,
.variable8,
.variable9,
.variable10,
.variable11,
.variable12,
.variable13,
.variable14,
.variable15,
.variable16,
.unit1,
.unit2,
.unit3,
.unit4,
.unit5,
.unit6,
.unit7,
.unit8,
.unit9,
.unit10,
.unit11,
.unit12,
.unit13,
.unit14,
.unit15,
.unit16 {
    display: inline;
    font-weight: 600;
}

.wish-block,
.wish-block2,
.wish-block3,
.wish-block4,
.wish-block5,
.wish-block6,
.wish-block7,
.wish-block8,
.wish-block9,
.wish-block10,
.wish-block11,
.wish-block12 {
    flex-shrink: 0;
    color: var(--white-color);
    font-family: var(--font-montserrat);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
    z-index: 2;
    position: absolute;
    left: 100px;
    bottom: 40px;
}

.wish-block {
    width: 268px;
    height: 125px;
    top: 147px;
}

.wish-block2 {
    width: 293px;
    height: 125px;
    top: 147px;
}

.wish-block3 {
    width: 268px;
    height: 104px;
    top: 117px;
}

.wish-block4 {
    width: 268px;
    height: 104px;
    top: 148px;
}

.wish-block5 {
    width: 252px;
    height: 147px;
    left: 47px;
    /* Изменено местоположение */
    top: 161px;
}

.wish-block6 {
    width: 252px;
    height: 105px;
    top: 145px;
}

.wish-block7 {
    width: 252px;
    height: 126px;
    top: 164px;
}

.wish-block8 {
    width: 299px;
    height: 108px;
    line-height: 20px;
    /* Изменено значение line-height */
    top: 175px;
}

.wish-block9,
.wish-block10,
.wish-block11 {
    width: 290px;
    height: 108px;
    text-align: center;
}

.wish-block9 {
    top: 143px;
    left: 43px;
    font-weight: 600;
}

.wish-block10 {
    top: 153px;
    left: 43px;
    font-weight: 600;
}

.wish-block11 {
    width: 290px;
    height: 108px;
    font-size: 16px;
    /* Изменено значение font-size */
    top: 170px;
    left: 37px;
    font-weight: 600;
}

.wish-block12 {
    width: 299px;
    height: 63px;
    top: 208px;
}

.phone-image {
    width: 242px;
    height: 242px;
    top: 343px;
    left: 65px;
    box-sizing: border-box;
    position: absolute;
    z-index: 3;
}

.telegram {
    width: 416.793px;
    height: 253.014px;
    top: 374px;
    left: 0px;
    box-sizing: border-box;
    position: absolute;
    z-index: 3;
}

.tail {
    width: 452.28px;
    height: 288.35px;
    top: 132.33px;
    left: 0px;
    box-sizing: border-box;
    position: absolute;
    z-index: 3;
}

.mail {
    width: 240.976px;
    height: 182.818px;
    top: 355.18px;
    left: 53.78px;
    position: absolute;
    z-index: 3;
}

.downld {
    width: 269px;
    height: 187px;
    top: 373px;
    left: 56.64px;
    position: absolute;
    z-index: 3;
}

.wifi {
    width: 285.091px;
    height: 260.696px;
    top: 337px;
    left: 33px;
    position: absolute;
    z-index: 3;
    stroke-width: 4px;
    stroke: var(--white-color);
}

.goal {
    width: 302.53px;
    height: 266.43px;
    top: 328.19px;
    left: 9.69px;
    position: absolute;
    z-index: 3;
}

.lock {
    width: 245px;
    height: 275px;
    transform: rotate(-8.319deg);
    top: 337px;
    left: 55px;
    position: absolute;
    z-index: 3;
}

.plane {
    width: 353.42px;
    height: 350.48px;
    top: 261px;
    left: 13px;
    position: absolute;
    z-index: 3;
}

.home {
    width: 278.34px;
    height: 251.36px;
    top: 324.32px;
    left: 36.32px;
    position: absolute;
    z-index: 3;
}

.slide1p {
    width: 100%;
    max-width: 263px;
    top: 0px;
    bottom: auto;
    left: 50%;
    transform: translate(-50%);
    z-index: 5;
    color: var(--white-color);
    text-align: center;
    font-family: var(--font-nominee-black-extended);
    font-weight: 400;
    font-size: 30px;
    line-height: 38.4px;
    position: absolute;
}

.slide11p {
    width: 360px;
    height: 70px;
    top: 40px;
    font-family: var(--font-nominee-black-extended);
    font-size: 32px;
    font-weight: 400;
    line-height: 38px;
    letter-spacing: 0em;
    text-align: center;
    color: #FF7714;
    position: absolute;
    z-index: 4;
}

.slide111p {
    width: 360px;
    height: 70px;
    flex-shrink: 0;
    color: var(--white-color);
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: var(--font-nominee-black-extended);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 38.4px;
    /* 120% */
    position: absolute;
    top: 40px;
    z-index: 3;
}

.slide1111p {
    width: 360px;
    height: 70px;
    flex-shrink: 0;
    color: #F58D07;
    text-align: center;
    font-family: var(--font-nominee-black-extended);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 38.4px;
    /* 120% */
    mix-blend-mode: screen;
    filter: blur(7.5px);
    position: absolute;
    top: 40px;
    z-index: 2;
}

.slide1111-text {
    color: var(--white-color);
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.44);
    font-family: var(--font-montserrat);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 27.2px;
    /* 160% */
    width: 294px;
    position: absolute;
    bottom: 100px;
}

.Rectangle1 {
    width: 297px;
    height: 318px;
    flex-shrink: 0;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.17);
    box-shadow: 3px 11px 11px 0px rgba(0, 0, 0, 0.52);
    position: absolute;
    top: 182px;
    left: 31px;
}

.Rectangle2 {
    width: 303px;
    height: 150px;
    flex-shrink: 0;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.17);
    box-shadow: 0px 4px 4px 0px #000;
    position: absolute;
    top: 125px;
    left: 34px;
}

.learn-more-button {
    position: absolute;
    width: 171px;
    height: 41px;
    border: none;
    border-radius: 10px;
    background: var(--motiv-color);
    color: white;
    font-size: 14px;
    top: 292px;
    left: 95px;
    font-family: var(--font-montserrat-semibold);
    font-weight: 600;
    line-height: 21px;
    letter-spacing: 0em;
    text-align: center;
    z-index: 101;
    cursor: pointer;
}

.target2,
.work-target1 {
    position: absolute;
    bottom: 13px;
    left: 50%;
    transform: translateX(-50%);
    width: 284px;
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--motiv-color);
    color: #fff;
    font-family: var(--font-montserrat-semibold);
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    border: none;
    border-radius: 10px;
    z-index: 999;
    cursor: pointer;
    -webkit-appearance: none;
    /* убирает системный стиль iOS */
    appearance: none;
    -webkit-transform: translateX(-50%) translateZ(0);
    /* фикс для рендеринга */
    transform: translateX(-50%) translateZ(0);
    backface-visibility: hidden;
    /* предотвращает “исчезновение” стиля */
}

@media (max-height: 650px) {
    .target2,
    .work-target1 {
        position: fixed;
    }
}

.contest-target1 {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 284px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #ffffff;
    color: #E45D12;
    font-family: var(--font-montserrat-semibold);
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    border: none;
    border-radius: 30px;
    box-shadow: 0 0 45px 15px rgba(243, 112, 33, 0.6), 0 0 80px 25px rgba(243, 112, 33, 0.3);
    z-index: 999;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-transform: translateX(-50%) translateZ(0);
    transform: translateX(-50%) translateZ(0);
    backface-visibility: hidden;
}

@media (max-height: 650px) {
    .contest-target1 {
        position: fixed;
    }
}


.learn-more-button3 {
    position: absolute;
    width: 171px;
    height: 41px;
    border: none;
    border-radius: 10px;
    background: var(--motiv-color);
    color: white;
    font-size: 14px;
    top: 292px;
    left: 95px;
    font-family: var(--font-montserrat-semibold);
    font-weight: 600;
    line-height: 21px;
    letter-spacing: 0em;
    text-align: center;
    z-index: 102;
    cursor: pointer;
}

.error-box {
    box-sizing: border-box;
    width: 315px;
    height: 126px;
    flex-shrink: 0;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.44);
    position: absolute;
    top: 54px;
    left: 27px;
}

.error-title {
    width: 100%;
    max-width: 273px;
    top: 0px;
    bottom: auto;
    left: 24px;
    z-index: 5;
    color: var(--white-color);
    text-align: left;
    font-family: var(--font-nominee-black-extended);
    font-weight: 400;
    font-size: 30px;
    line-height: 38.4px;
    position: absolute;
}

.error-message {
    top: auto;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 312px;
    z-index: 5;
    color: #070707;
    text-align: center;
    font-family: var(--font-montserrat);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    position: absolute;
}

.error-button {
    width: 191px;
    height: 41px;
    top: 206px;
    left: 85px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--motiv-color);
    color: white;
    position: absolute;
    box-sizing: border-box;
    border: 2px;
    cursor: pointer;
    /* Добавлено для указания на возможность нажатия */
}

.stories-button-panel-actions {
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 102;
}

.button-panel-action-share {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    text-align: center;
    user-select: none;
    --loaderBackgroundColor: white;
    --loaderBackgroundAccentColor: transparent;
    --timelineBlockTopOffset: 8px;
    --tick: 2.4462122727554907%;
    --tickOpacity: 1;
    visibility: visible;
    color: var(--white-color);
    box-sizing: border-box;
    cursor: pointer;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 38px;
    position: absolute;
    bottom: 0px;
    right: 7px;
    z-index: 102;
}

.button-panel-action-like-up {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    text-align: center;
    user-select: none;
    --timelineBlockTopOffset: 8px;
    --tick: 53.39178492897958%;
    --tickOpacity: 1;
    visibility: visible;
    color: var(--white-color);
    box-sizing: border-box;
    cursor: pointer;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 38px;
    position: absolute;
    left: 10px;
    z-index: 102;
    bottom: 0px;
}

.button-panel-action-like-down {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    text-align: center;
    user-select: none;
    --loaderBackgroundColor: white;
    --loaderBackgroundAccentColor: transparent;
    --timelineBlockTopOffset: 8px;
    --tick: 53.39178492897958%;
    --tickOpacity: 1;
    visibility: visible;
    color: var(--white-color);
    box-sizing: border-box;
    cursor: pointer;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 38px;
    position: absolute;
    left: 60px;
    z-index: 102;
    bottom: 0px;
}

.erid {
    display: inline-flex;
    height: 20px;
    padding: 6px;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    bottom: 2px;
    right: 6px;
    position: absolute;
    z-index: 101;
    cursor: pointer;
}

.info {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 101;
}

.bottomsheet {
    display: none;
    position: fixed;
    bottom: -200px;
    /* Начинаем с отрицательного значения, чтобы спрятать BottomSheet за пределы экрана */
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    height: 200px;
    border-radius: 20px 20px 0 0;
    background-color: #FFFFFF;
    box-sizing: border-box;
    padding: 20px;
    box-shadow: 0px -10px 20px rgba(0, 0, 0, 0.2);
    /* Добавляем тень снизу */
    transition: bottom 0.5s ease;
    /* Добавляем плавную анимацию */
    z-index: 103;
}

.bottomsheet2 {
    display: none;
    position: fixed;
    bottom: -200px;
    /* Начинаем с положительного значения, чтобы спрятать BottomSheet за пределы экрана */
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    height: 220px;
    border-radius: 20px 20px 0 0;
    background-color: #FFFFFF;
    box-sizing: border-box;
    padding: 20px;
    box-shadow: 0px -10px 20px rgba(0, 0, 0, 0.2);
    /* Добавляем тень снизу */
    transition: bottom 0.5s ease;
    /* Добавляем плавную анимацию */
    z-index: 103;
}

.bottomsheet-text {
    color: #000000;
    font-family: Montserrat;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0em;
    text-align: left;
    font-weight: 600;
    top: 40px;
    left: 23px;
    position: absolute;
    z-index: 103;
    width: 303px;
    height: 49px;
    flex-shrink: 0;

}

.bottomsheet-text:nth-child(2) {
    font-size: 18px;
    height: 20px;
    line-height: 21px;
    width: 263px;
    top: 0px;
    left: 23px;
    position: absolute;
    z-index: 103;
    flex-shrink: 0;
    font-weight: bold;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 103;
}

.bottomsheet.show {
    transform: translateX(-50%) translateY(179px);
    /* выезд снизу вверх */
}

.drag-handle {
    width: 32px;
    height: 4px;
    flex-shrink: 0;
    border-radius: 100px;
    opacity: 0.4;
    background: var(--m-3-sys-light-outline, #79747E);
    box-sizing: border-box;
    z-index: 103;
    top: 10px;
    left: 165px;
    position: absolute;
    cursor: grab;
}

.copy-button {
    position: absolute;
    bottom: 65px;
    left: 15px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 103;
    color: var(--motiv-color);
}

.copy-button-text {
    color: var(--motiv-color);
    font-family: Montserrat;
    font-size: 12px;
    line-height: 21px;
    letter-spacing: 0em;
    text-align: left;
    font-weight: 600;
    position: absolute;
    top: -3px;
    left: 30px;
    z-index: 103;
    width: 252px;
    height: 20px;
    flex-shrink: 0;
}

.bottom-space {
    display: none;
}

.recommend {
    color: #000000;
    font-family: Montserrat;
    font-size: 12px;
    line-height: 21px;
    letter-spacing: 0em;
    text-align: left;
    font-weight: 600;
    position: absolute;
    bottom: 45px;
    left: 23px;
    z-index: 103;
    width: 319px;
    height: 20px;
    flex-shrink: 0;
}

/* Glassmorphism блоки для слайдов */
.glass-container {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0;
}

#slide1 .glass-container {
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 400px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 30%, rgba(255, 255, 255, 0) 70%);
    background-blend-mode: normal;
    filter: blur(35px);
    border-radius: 50%;
    pointer-events: none;
}

#slide2 .glass-container,
#slide3 .glass-container,
#slide4 .glass-container,
#slide5 .glass-container,
#slide6 .glass-container,
#slide7 .glass-container,
#slide8 .glass-container,
#slide9 .glass-container,
#slide10 .glass-container {
    height: 75%;
    background: radial-gradient(110% 70% at 50% 100%, #E2E8ED 45%, rgba(226, 232, 237, 0) 100%);
    filter: blur(8px);
    border-radius: 0 0 5px 5px;
}

/* Заголовки слайдов */
.slide-title {
    width: 100%;
    max-width: 263px;
    top: 0px;
    bottom: auto;
    left: 24px;
    z-index: 5;
    color: var(--white-color);
    text-align: left;
    font-family: var(--font-nominee-black-extended);
    font-weight: 400;
    font-size: 30px;
    line-height: 38.4px;
    position: absolute;
}

/* Обновленные позиции для элементов внутри glassmorphism блоков */
#slide2 .slide-title,
#slide3 .slide-title,
#slide4 .slide-title,
#slide5 .slide-title,
#slide6 .slide-title,
#slide7 .slide-title,
#slide8 .slide-title,
#slide9 .slide-title,
#slide10 .slide-title {
    width: 100%;
    max-width: 263px;
    top: 25px;
    bottom: auto;
    left: 24px;
    z-index: 5;
    color: var(--white-color);
    text-align: left;
    font-family: var(--font-nominee-black-extended);
    font-weight: 400;
    font-size: 30px;
    line-height: 38.4px;
    position: absolute;
}

#slide4 .titlemini,
#slide5 .titlemini,
#slide6 .titlemini,
#slide7 .titlemini,
#slide8 .titlemini,
#slide9 .titlemini {
    bottom: 185px;
    top: auto;
    left: 50px;
    color: #26292D;
    font-size: 20px;
}

#slide5 .titlemini2,
#slide6 .titlemini2,
#slide8 .titlemini2,
#slide9 .titlemini2 {
    bottom: 160px;
    top: auto;
    left: 50px;
    color: #26292D;
    font-size: 15px;
    font-weight: 900;
}

#slide7 .titlemini2 {
    bottom: 140px;
    top: auto;
    left: 50px;
    color: #26292D;
    font-size: 15px;
    font-weight: 900;
    line-height: 20px;
}


#slide4 .properties,
#slide5 .properties,
#slide6 .properties,
#slide7 .properties,
#slide8 .properties,
#slide9 .properties {
    bottom: 125px;
    top: auto;
    left: 50px;
    color: #26292D;
}

#slide4 .titlemini2 {
    bottom: 160px;
    top: auto;
    left: 50px;
    color: #26292D;
    font-size: 15px;
    font-weight: 900;
}

#slide4 .bottom-text-block {
    position: absolute;
    bottom: 40px;
    left: 50px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 256px;
}

#slide4 .bottom-text-block .wish-block3 {
    position: static;
    color: #26292D;
    width: 100%;
    height: auto;
    font-size: 14px;
    line-height: 20px;
}

#slide5 .wish-block3,
#slide8 .wish-block3 {
    bottom: 40px;
    top: auto;
    left: 50px;
    color: #26292D;
    width: 256px;
    height: auto;
    font-size: 14px;
    line-height: 20px;
}

#slide6 .wish-block3 {
    bottom: 60px;
    top: auto;
    left: 50px;
    color: #26292D;
    width: 256px;
    height: auto;
    font-size: 14px;
    line-height: 20px;
}

#slide7 .wish-block4 {
    bottom: 20px;
    top: auto;
    left: 50px;
    color: #26292D;
    width: 256px;
    height: auto;
    font-size: 14px;
    line-height: 20px;
}

#slide9 .wish-block3 {
    bottom: 60px;
    top: auto;
    left: 50px;
    color: #26292D;
    width: 256px;
    height: auto;
    font-size: 14px;
    line-height: 20px;
}

#slide10 .wish-block9,
#slide10 .wish-block10,
#slide10 .wish-block11,
#slide10 .wish-block12 {
    bottom: 120px;
    top: auto;
    left: 50px;
    color: #26292D;
    width: 256px;
    height: auto;
    font-size: 14px;
    line-height: 20px;
}


#slide2 .titlemini,
#slide3 .titlemini {
    bottom: 185px;
    /* Large Stat Line 1 */
    top: auto;
    left: 40px;
    color: #26292D;
    font-size: 20px;
    /* Larger font */
    font-weight: 700;
}

#slide2 .titlemini2,
#slide3 .titlemini2 {
    bottom: 160px;
    /* Small text middle */
    top: auto;
    left: 40px;
    color: #26292D;
    font-size: 14px;
    font-weight: 700;
}

#slide2 .properties,
#slide3 .properties {
    bottom: 135px;
    /* Large Stat Line 2 */
    top: auto;
    left: 40px;
    color: #26292D;
    font-size: 20px;
    /* Larger font */
    font-weight: 700;
}

#slide2 .wish-block,
#slide2 .wish-block2,
#slide3 .wish-block2,
#slide3 .wish-block {
    bottom: 30px;
    top: auto;
    left: 40px;
    color: #26292D;
    width: 262px;
    height: auto;
    font-size: 14px;
    line-height: 20px;
}

/* Обновленные стили кнопок */
.learn-more-button,
.learn-more-button3 {
    border-radius: 12px;
    background: linear-gradient(135deg, #FF7714 0%, #FF9A44 100%);
    box-shadow: 0 4px 15px rgba(255, 119, 20, 0.3);
    transition: all 0.3s ease;
    font-family: var(--font-montserrat-semibold);
    font-weight: 600;
}

.learn-more-button:hover,
.learn-more-button3:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 119, 20, 0.4);
}


.error-button {
    border-radius: 12px;
    background: linear-gradient(135deg, #FF7714 0%, #FF9A44 100%);
    box-shadow: 0 4px 15px rgba(255, 119, 20, 0.3);
    font-family: var(--font-montserrat-semibold);
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
}

.error-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 119, 20, 0.4);
}

/* Slide 1 Specifics */
/* Slide 1 Specifics */
/* Slide 1 Specifics */
#slide1 .slide1111-text {
    top: auto;
    bottom: 130px;
    z-index: 5;
    color: #000000;
    text-shadow: none;
    font-weight: 600;
    width: 294px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 14px;
    line-height: 22px;
}

.slide1p {
    color: var(--white-color);
}

.slide11p,
.slide111p,
.slide1111p {
    display: none;
}

#slide1 .logo-container {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    z-index: 10;
    display: flex;
    justify-content: center;
}

#slide1 .logo-container img {
    width: 100%;
    height: auto;
}

/* Slide 10 Specifics */
#slide10 .learn-more-button,
#slide10 .learn-more-button3 {
    top: auto;
    bottom: 40px;
    position: absolute;
    left: 50%;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 260px;
    height: 45px;
    border-radius: 25px;
    font-family: var(--font-montserrat);
    font-weight: 600;
    font-size: 14px;
    background: #F37021;
    box-shadow: none;
    z-index: 102;
    position: absolute;
}



.error-button {
    top: auto;
    bottom: 30px;
    position: absolute;
    left: 50%;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 260px;
    height: 45px;
    border-radius: 25px;
    font-family: var(--font-montserrat);
    font-weight: 600;
    font-size: 14px;
    background: #F37021;
    box-shadow: none;
    z-index: 5;
    position: absolute;
}

.info path {
    fill: #999DA2;
}

.info {
    top: auto;
    bottom: 180px;
    right: 24px;
}

.top-logo {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 48px;
    height: 48px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.share-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 10001;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.share-modal {
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 20px;
    width: 100%;
    max-width: 400px;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.share-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.share-modal-header span {
    font-family: var(--font-montserrat-semibold);
    font-size: 18px;
    color: #333;
}

.share-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.share-modal-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.share-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px 10px;
    border: none;
    background: #f5f5f5;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s, background 0.2s;
}

.share-btn:hover {
    background: #eee;
    transform: scale(1.05);
}

.share-btn:active {
    transform: scale(0.95);
}

.share-btn span {
    font-family: var(--font-montserrat);
    font-size: 11px;
    color: #333;
    text-align: center;
}

.share-btn svg {
    flex-shrink: 0;
}

@media (max-width: 360px) {
    .share-modal-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
}