/* =========================================================
   FINY ROOM — PREMIUM LINKTREE STYLE
   Полностью адаптивный CSS
   Центральная колонка: max-width 480px
   ========================================================= */


/* =========================================================
   1. RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-width: 0;
    min-height: 100vh;

    overflow-x: hidden;

    font-family:
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    color: #ffffff;

    background:
        #0b071b;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
}


/* =========================================================
   2. LINKS
   ========================================================= */

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


/* =========================================================
   3. BACKGROUND
   Фон всегда занимает весь экран.
   Контент НЕ зависит от размеров фона.
   ========================================================= */

.background {
    position: fixed;

    top: -40px;
    left: -40px;
    right: -40px;
    bottom: -40px;

    width: auto;
    height: auto;

    z-index: -10;

    overflow: hidden;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(117, 53, 188, 0.38) 0%,
            rgba(117, 53, 188, 0.16) 20%,
            transparent 45%
        ),

        radial-gradient(
            circle at 10% 55%,
            rgba(67, 40, 150, 0.30) 0%,
            transparent 40%
        ),

        radial-gradient(
            circle at 90% 70%,
            rgba(155, 54, 160, 0.25) 0%,
            transparent 42%
        ),

        linear-gradient(
            145deg,
            #080516 0%,
            #100722 35%,
            #12082b 65%,
            #080517 100%
        );

    transform:
        translate3d(0, 0, 0)
        scale(1.04);

    will-change: transform;
}


/* =========================================================
   ЕСЛИ ПОТОМ ПОЯВИТСЯ ФОНОВОЕ ИЗОБРАЖЕНИЕ

   Можно заменить background выше на:

   background-image:
       linear-gradient(
           rgba(10, 5, 30, 0.65),
           rgba(8, 4, 24, 0.95)
       ),
       url("background.jpg");

   background-size: cover;
   background-position: center;
   ========================================================= */


/* =========================================================
   4. BACKGROUND OVERLAY
   ========================================================= */

.background-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(8, 4, 24, 0.20) 0%,
            rgba(8, 4, 24, 0.42) 35%,
            rgba(7, 4, 20, 0.78) 75%,
            rgba(6, 3, 17, 0.96) 100%
        );

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);
}


/* =========================================================
   5. GLOWING ORBS
   ========================================================= */

.gradient-orb {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter:
        blur(90px);

    opacity: 0.45;

    will-change: transform;

    animation:
        orbFloat
        15s
        ease-in-out
        infinite
        alternate;
}


.orb-one {
    width: 380px;
    height: 380px;

    top: -160px;
    left: -130px;

    background:
        rgba(111, 48, 202, 0.42);
}


.orb-two {
    width: 330px;
    height: 330px;

    top: 30%;
    right: -140px;

    background:
        rgba(176, 49, 160, 0.28);

    animation-delay:
        -5s;
}


.orb-three {
    width: 300px;
    height: 300px;

    bottom: -160px;
    left: 15%;

    background:
        rgba(74, 43, 186, 0.32);

    animation-delay:
        -9s;
}


@keyframes orbFloat {

    0% {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    100% {
        transform:
            translate3d(
                45px,
                -30px,
                0
            );
    }

}


/* =========================================================
   6. STARS
   ========================================================= */

.stars {
    position: absolute;

    inset: 0;

    pointer-events: none;
}


.star {
    position: absolute;

    color:
        rgba(
            255,
            224,
            255,
            0.75
        );

    text-shadow:
        0 0 12px
        rgba(
            203,
            130,
            255,
            0.9
        );

    animation:
        starPulse
        4s
        ease-in-out
        infinite;
}


.star-1 {
    top: 14%;
    left: 12%;
    font-size: 14px;
}


.star-2 {
    top: 32%;
    left: 7%;
    font-size: 9px;
    animation-delay: -1s;
}


.star-3 {
    top: 20%;
    right: 10%;
    font-size: 17px;
    animation-delay: -2s;
}


.star-4 {
    top: 47%;
    right: 7%;
    font-size: 10px;
    animation-delay: -3s;
}


.star-5 {
    bottom: 24%;
    left: 8%;
    font-size: 14px;
    animation-delay: -2s;
}


.star-6 {
    bottom: 30%;
    right: 10%;
    font-size: 17px;
    animation-delay: -1s;
}


.star-7 {
    top: 7%;
    left: 35%;
    font-size: 9px;
}


.star-8 {
    bottom: 12%;
    right: 28%;
    font-size: 10px;
}


@keyframes starPulse {

    0%,
    100% {
        opacity: 0.3;

        transform:
            scale(0.8)
            rotate(0deg);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.25)
            rotate(15deg);
    }

}


/* =========================================================
   7. PARTICLES
   ========================================================= */

.particles {
    position: absolute;

    inset: 0;

    pointer-events: none;
}


.particle {
    position: absolute;

    width: 2px;
    height: 2px;

    border-radius: 50%;

    background:
        rgba(
            255,
            224,
            255,
            0.8
        );

    box-shadow:
        0 0 10px
        rgba(
            200,
            130,
            255,
            0.9
        );

    animation:
        particleFloat
        12s
        ease-in-out
        infinite;
}


@keyframes particleFloat {

    0% {
        opacity: 0;

        transform:
            translate3d(
                0,
                35px,
                0
            );
    }

    20% {
        opacity: 0.7;
    }

    80% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;

        transform:
            translate3d(
                15px,
                -80px,
                0
            );
    }

}


/* =========================================================
   8. MAIN PAGE
   ========================================================= */

.page {
    position: relative;

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

    display: flex;

    justify-content: center;

    align-items: flex-start;

    padding:
        38px
        16px
        70px;
}


/* =========================================================
   9. CENTRAL LINKTREE CONTAINER

   ВАЖНО:
   Здесь находится ВСЯ страница.

   Максимум 480px.
   На ПК — узкая колонка.
   На телефоне — 95% ширины.
   ========================================================= */

.profile-container {
    position: relative;

    width: 100%;

    max-width: 480px;

    min-width: 0;

    margin:
        0 auto;

    display: flex;

    flex-direction: column;

    align-items: stretch;
}


/* =========================================================
   10. PROFILE HEADER
   ========================================================= */

.profile {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    margin-bottom:
        24px;

    animation:
        profileEnter
        0.9s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


@keyframes profileEnter {

    from {
        opacity: 0;

        transform:
            translateY(25px)
            scale(0.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* =========================================================
   11. AVATAR
   ========================================================= */

.avatar-wrapper {
    position: relative;

    width: 158px;
    height: 158px;

    display: flex;

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

    margin-bottom:
        12px;
}


.avatar-glow {
    position: absolute;

    width: 145px;
    height: 145px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #b35cff,
            #7542ff,
            #e95fe7
        );

    filter:
        blur(25px);

    opacity:
        0.62;

    animation:
        avatarGlow
        4s
        ease-in-out
        infinite;
}


@keyframes avatarGlow {

    0%,
    100% {
        transform:
            scale(0.92);

        opacity:
            0.48;
    }

    50% {
        transform:
            scale(1.07);

        opacity:
            0.78;
    }

}


.avatar-ring {
    position: relative;

    z-index: 2;

    width: 142px;
    height: 142px;

    padding: 4px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #d07cff 0%,
            #7441ff 48%,
            #ef6fe9 100%
        );

    box-shadow:
        0 0 0 1px
        rgba(
            255,
            255,
            255,
            0.22
        ),

        0 0 28px
        rgba(
            155,
            75,
            255,
            0.75
        );

    animation:
        avatarFloat
        5s
        ease-in-out
        infinite;
}


@keyframes avatarFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-6px);
    }

}


.avatar {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;

    background:
        #17102d;
}


/* =========================================================
   12. AVATAR SPARKLES
   ========================================================= */

.avatar-sparkle {
    position: absolute;

    z-index: 5;

    color:
        #f3d8ff;

    text-shadow:
        0 0 14px
        rgba(
            195,
            108,
            255,
            0.95
        );

    animation:
        sparkleAnimation
        2.5s
        ease-in-out
        infinite;
}


.sparkle-one {
    top: 5px;
    right: 3px;

    font-size: 20px;
}


.sparkle-two {
    bottom: 6px;
    left: 3px;

    font-size: 14px;

    animation-delay:
        -1.2s;
}


@keyframes sparkleAnimation {

    0%,
    100% {
        opacity: 0.35;

        transform:
            scale(0.8)
            rotate(0deg);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.2)
            rotate(20deg);
    }

}


/* =========================================================
   13. PROFILE TITLE
   ========================================================= */

.profile-name {
    max-width: 100%;

    font-size:
        32px;

    line-height:
        1.15;

    font-weight:
        800;

    letter-spacing:
        -1px;

    text-shadow:
        0 3px 18px
        rgba(
            0,
            0,
            0,
            0.45
        );
}


.coffee {
    display:
        inline-block;

    font-size:
        0.72em;

    margin-left:
        2px;

    animation:
        coffeeAnimation
        3s
        ease-in-out
        infinite;
}


@keyframes coffeeAnimation {

    0%,
    100% {
        transform:
            rotate(-5deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(5deg)
            translateY(-3px);
    }

}


/* =========================================================
   14. PROFILE DESCRIPTION
   ========================================================= */

.profile-description {
    max-width:
        400px;

    margin-top:
        9px;

    padding:
        0 8px;

    color:
        rgba(
            255,
            255,
            255,
            0.84
        );

    font-size:
        14px;

    line-height:
        1.65;

    font-weight:
        500;

    text-shadow:
        0 2px 10px
        rgba(
            0,
            0,
            0,
            0.5
        );
}


/* =========================================================
   15. SOCIAL ICONS
   ========================================================= */

.social-links {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    margin-top:
        17px;
}


.social-link {
    position: relative;

    width: 46px;
    height: 46px;

    display: flex;

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

    flex: 0 0 46px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.32
        );

    border-radius: 50%;

    background:
        rgba(
            32,
            20,
            62,
            0.72
        );

    backdrop-filter:
        blur(12px);

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

    font-size:
        18px;

    overflow:
        hidden;

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


.social-link:hover {
    transform:
        translateY(-5px)
        scale(1.08);

    border-color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    background:
        rgba(
            70,
            40,
            105,
            0.8
        );
}


.social-link.youtube:hover {
    box-shadow:
        0 0 24px
        rgba(
            255,
            50,
            75,
            0.55
        );
}


.social-link.telegram:hover {
    box-shadow:
        0 0 24px
        rgba(
            45,
            170,
            255,
            0.55
        );
}


.social-link.tiktok:hover {
    box-shadow:
        0 0 24px
        rgba(
            255,
            70,
            170,
            0.55
        );
}


.social-link.donate:hover {
    box-shadow:
        0 0 24px
        rgba(
            255,
            190,
            75,
            0.55
        );
}


/* =========================================================
   16. MAIN BUTTONS
   ========================================================= */

.main-links {
    width: 100%;

    display: flex;

    flex-direction: column;

    gap:
        11px;

    animation:
        linksEnter
        1s
        0.15s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


@keyframes linksEnter {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   17. MAIN LINK CARD
   ========================================================= */

.main-link {
    position: relative;

    width: 100%;

    min-width: 0;

    min-height:
        76px;

    display: flex;

    align-items: center;

    padding:
        11px
        14px;

    border:
        1px solid
        rgba(
            222,
            174,
            255,
            0.42
        );

    border-radius:
        23px;

    overflow:
        hidden;

    background:
        linear-gradient(
            105deg,
            rgba(
                125,
                57,
                163,
                0.72
            ),
            rgba(
                65,
                37,
                98,
                0.72
            )
        );

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.10
        ),

        0 9px 25px
        rgba(
            0,
            0,
            0,
            0.20
        );

    backdrop-filter:
        blur(18px);

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

    transition:
        transform 0.35s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),

        box-shadow 0.35s ease,

        border-color 0.35s ease;
}


.main-link:hover {
    border-color:
        rgba(
            238,
            202,
            255,
            0.70
        );

    box-shadow:
        0 14px 35px
        rgba(
            93,
            39,
            145,
            0.38
        ),

        0 0 25px
        rgba(
            162,
            87,
            255,
            0.18
        );
}


/* =========================================================
   18. LINK ICON
   ========================================================= */

.link-icon {
    position: relative;

    width: 52px;
    height: 52px;

    flex:
        0 0 52px;

    display: flex;

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

    border-radius:
        50%;

    font-size:
        22px;

    color:
        #ffffff;

    box-shadow:
        inset 0 1px 2px
        rgba(
            255,
            255,
            255,
            0.25
        ),

        0 7px 18px
        rgba(
            0,
            0,
            0,
            0.22
        );

    transition:
        transform 0.35s ease;
}


.main-link:hover .link-icon {
    transform:
        scale(1.08)
        rotate(-4deg);
}


.youtube-icon {
    background:
        linear-gradient(
            135deg,
            #ff4566,
            #d71f4c
        );
}


.telegram-icon {
    background:
        linear-gradient(
            135deg,
            #42c8ff,
            #2085db
        );
}


.game-icon {
    background:
        linear-gradient(
            135deg,
            #a46aff,
            #6237df
        );
}


.donate-icon {
    background:
        linear-gradient(
            135deg,
            #ffe083,
            #e79a3d
        );

    color:
        #43210c;
}


/* =========================================================
   19. LINK CONTENT
   ========================================================= */

.link-content {
    min-width:
        0;

    flex:
        1;

    margin-left:
        14px;

    overflow:
        hidden;
}


.link-content h2 {
    width:
        100%;

    font-size:
        16px;

    line-height:
        1.3;

    font-weight:
        700;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.link-content p {
    width:
        100%;

    margin-top:
        3px;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    font-size:
        12px;

    line-height:
        1.4;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


/* =========================================================
   20. ARROW
   ========================================================= */

.link-arrow {
    width:
        36px;

    height:
        36px;

    flex:
        0 0 36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        rgba(
            255,
            255,
            255,
            0.9
        );

    font-size:
        14px;

    transition:
        transform 0.3s ease;
}


.main-link:hover .link-arrow {
    transform:
        translateX(4px);
}


/* =========================================================
   21. LINK SHINE
   ========================================================= */

.link-shine {
    position:
        absolute;

    top:
        -100%;

    left:
        -60%;

    width:
        35%;

    height:
        300%;

    pointer-events:
        none;

    transform:
        rotate(20deg);

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

    transition:
        left 0.8s ease;
}


.main-link:hover .link-shine {
    left:
        130%;
}


/* =========================================================
   22. BOTTOM CARDS GRID

   ПК:
   ┌───────────┐ ┌───────────┐
   │   ИГРЫ    │ │  ОБО МНЕ  │
   └───────────┘ └───────────┘

   Связь будет ниже на всю ширину.
   ========================================================= */

.feature-grid {
    width:
        100%;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        11px;

    margin-top:
        15px;

    animation:
        cardsEnter
        1s
        0.25s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


@keyframes cardsEnter {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   23. FEATURE CARD
   ========================================================= */

.feature-card {
    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            222,
            177,
            255,
            0.34
        );

    border-radius:
        20px;

    background:
        rgba(
            38,
            22,
            63,
            0.80
        );

    box-shadow:
        0 10px 25px
        rgba(
            0,
            0,
            0,
            0.20
        );

    backdrop-filter:
        blur(18px);

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

    transition:
        transform 0.35s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),

        border-color 0.35s ease,

        box-shadow 0.35s ease;
}


.feature-card:hover {
    border-color:
        rgba(
            238,
            202,
            255,
            0.68
        );

    box-shadow:
        0 16px 35px
        rgba(
            78,
            32,
            125,
            0.35
        );
}


/* =========================================================
   24. FEATURE IMAGE
   ========================================================= */

.feature-image {
    position:
        relative;

    width:
        100%;

    height:
        120px;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #251443,
            #140b29
        );
}


.feature-image img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.6s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.feature-card:hover .feature-image img {
    transform:
        scale(1.08);
}


.feature-image-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            transparent 30%,
            rgba(
                12,
                6,
                25,
                0.65
            ) 100%
        );
}


/* =========================================================
   25. FEATURE CONTENT
   ========================================================= */

.feature-content {
    position:
        relative;

    min-height:
        82px;

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        12px;
}


.feature-icon {
    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        #ffffff;

    font-size:
        15px;

    box-shadow:
        0 6px 15px
        rgba(
            0,
            0,
            0,
            0.25
        );
}


.feature-icon.pink {
    background:
        linear-gradient(
            135deg,
            #ee408e,
            #c42b70
        );
}


.feature-icon.purple {
    background:
        linear-gradient(
            135deg,
            #9155ff,
            #6035d8
        );
}


.feature-text {
    min-width:
        0;

    flex:
        1;
}


.feature-text h3 {
    width:
        100%;

    font-size:
        13px;

    line-height:
        1.3;

    font-weight:
        700;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.feature-text p {
    width:
        100%;

    margin-top:
        4px;

    color:
        rgba(
            255,
            255,
            255,
            0.55
        );

    font-size:
        10px;

    line-height:
        1.35;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.feature-arrow {
    flex:
        0 0 auto;

    font-size:
        12px;

    color:
        rgba(
            255,
            255,
            255,
            0.8
        );

    transition:
        transform 0.3s ease;
}


.feature-card:hover .feature-arrow {
    transform:
        translateX(4px);
}


/* =========================================================
   26. THIRD CARD — СВЯЗЬ

   ВАЖНО:
   HTML оставляем прежним.

   Если третий feature-card находится третьим:
   он занимает всю ширину.
   ========================================================= */

.feature-card:nth-child(3) {
    grid-column:
        1 / -1;
}


/* =========================================================
   THIRD CARD IMAGE
   Делаем её чуть выше для визуального баланса.
   ========================================================= */

.feature-card:nth-child(3) .feature-image {
    height:
        135px;
}


/* =========================================================
   27. ADVERTISEMENT
   ========================================================= */

.advertisement {
    position:
        relative;

    width:
        100%;

    min-height:
        160px;

    margin-top:
        24px;

    padding:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            220,
            174,
            255,
            0.22
        );

    border-radius:
        19px;

    background:
        rgba(
            27,
            15,
            48,
            0.48
        );

    backdrop-filter:
        blur(15px);

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

    overflow:
        hidden;
}


.advertisement-label {
    position:
        absolute;

    top:
        9px;

    left:
        50%;

    transform:
        translateX(-50%);

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

    color:
        rgba(
            255,
            255,
            255,
            0.22
        );
}


.yandex-ad {
    width:
        100%;

    min-height:
        125px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        rgba(
            255,
            255,
            255,
            0.18
        );

    font-size:
        10px;

    text-align:
        center;
}


/* =========================================================
   28. RIPPLE
   ========================================================= */

.ripple {
    position:
        absolute;

    width:
        20px;

    height:
        20px;

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        rgba(
            255,
            255,
            255,
            0.30
        );

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

    animation:
        rippleEffect
        0.7s
        ease-out
        forwards;
}


@keyframes rippleEffect {

    to {
        transform:
            translate(
                -50%,
                -50%
            )
            scale(20);

        opacity:
            0;
    }

}


/* =========================================================
   29. TABLET
   ========================================================= */

@media (
    min-width: 481px
) and (
    max-width: 768px
) {

    .page {
        padding:
            35px
            18px
            60px;
    }

    .profile-container {
        max-width:
            480px;
    }

}


/* =========================================================
   30. MOBILE
   ========================================================= */

@media (
    max-width: 480px
) {

    .page {
        width:
            100%;

        padding:
            25px
            2.5%
            50px;
    }


    .profile-container {
        width:
            100%;

        max-width:
            none;
    }


    .avatar-wrapper {
        width:
            145px;

        height:
            145px;
    }


    .avatar-glow {
        width:
            132px;

        height:
            132px;
    }


    .avatar-ring {
        width:
            130px;

        height:
            130px;
    }


    .profile-name {
        font-size:
            28px;
    }


    .profile-description {
        font-size:
            13px;

        line-height:
            1.6;
    }


    .social-links {
        gap:
            11px;
    }


    .social-link {
        width:
            44px;

        height:
            44px;

        flex-basis:
            44px;

        font-size:
            17px;
    }


    .main-links {
        gap:
            10px;
    }


    .main-link {
        min-height:
            70px;

        padding:
            9px
            11px;

        border-radius:
            20px;
    }


    .link-icon {
        width:
            48px;

        height:
            48px;

        flex-basis:
            48px;

        font-size:
            20px;
    }


    .link-content {
        margin-left:
            11px;
    }


    .link-content h2 {
        font-size:
            15px;
    }


    .link-content p {
        font-size:
            11px;
    }


    .link-arrow {
        width:
            32px;

        height:
            32px;

        flex-basis:
            32px;
    }


    .feature-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            9px;

        margin-top:
            13px;
    }


    .feature-image {
        height:
            105px;
    }


    .feature-card:nth-child(3) .feature-image {
        height:
            120px;
    }


    .feature-content {
        min-height:
            78px;

        padding:
            9px;

        gap:
            7px;
    }


    .feature-icon {
        width:
            34px;

        height:
            34px;

        flex-basis:
            34px;

        font-size:
            13px;
    }


    .feature-text h3 {
        font-size:
            11px;
    }


    .feature-text p {
        font-size:
            9px;
    }


    .feature-arrow {
        font-size:
            10px;
    }


    .advertisement {
        min-height:
            145px;

        margin-top:
            20px;
    }


    .yandex-ad {
        min-height:
            115px;
    }

}


/* =========================================================
   31. VERY SMALL PHONES
   ========================================================= */

@media (
    max-width: 360px
) {

    .page {
        padding:
            20px
            2.5%
            40px;
    }


    .avatar-wrapper {
        width:
            135px;

        height:
            135px;
    }


    .avatar-ring {
        width:
            120px;

        height:
            120px;
    }


    .profile-name {
        font-size:
            25px;
    }


    .profile-description {
        font-size:
            12px;
    }


    .social-links {
        gap:
            9px;
    }


    .social-link {
        width:
            42px;

        height:
            42px;

        flex-basis:
            42px;
    }


    .main-link {
        min-height:
            66px;

        padding:
            8px
            9px;
    }


    .link-icon {
        width:
            44px;

        height:
            44px;

        flex-basis:
            44px;

        font-size:
            18px;
    }


    .link-content {
        margin-left:
            9px;
    }


    .link-content h2 {
        font-size:
            14px;
    }


    .link-content p {
        font-size:
            10px;
    }


    .feature-content {
        padding:
            8px;
    }


    .feature-icon {
        width:
            31px;

        height:
            31px;

        flex-basis:
            31px;

        font-size:
            12px;
    }


    .feature-text h3 {
        font-size:
            10px;
    }


    .feature-text p {
        font-size:
            8px;
    }

}


/* =========================================================
   32. REDUCED MOTION
   ========================================================= */

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

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }

}