/* ===== RESET ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== BASE ===== */

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background:
            linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
            url("img/background.png") no-repeat center/cover;
    font-family: system-ui, -apple-system, sans-serif;
}

/* ===== WRAPPER ===== */

.app {
    width: 390px; /* iPhone 14 width */
    max-width: 100vw;

    padding: 0px 24px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;

}

/* ===== LOGO ===== */

.logo-wrap {
    position: relative;
    width: 180px;
    height: 180px;

    margin-bottom: 56px;
    margin-top: 56px;

    border-radius: 50%;
    padding: 4px;

    background: linear-gradient(
            135deg,
            #00d4ff,
            #7a00ff,
            #ff2fa1
    );

    /*box-shadow:*/
    /*        0 0 60px rgba(122,0,255,1),*/
    /*        0 0 120px rgba(255,47,161,1);*/

}
.logo-wrap::after {
    content: "";
    position: absolute;
    inset: -40px;
    z-index: -1;
    border-radius: inherit;
    width: 240px;
    height: 240px;
    background: linear-gradient(
            135deg,
            #00d4ff,
            #7a00ff,
            #ff2fa1
    );
    filter: blur(15px);
    opacity: 0.3;
}
.logo {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 50%;
    display: flex;               /* активуємо flex */
    justify-content: center;     /* горизонтальне вирівнювання по центру */
    align-items: center;
}
.logo img{
    max-width: 80%;             /* адаптивний розмір логотипу */
    height: auto;
    margin-top: 20px;
}
/* ===== BUTTONS ===== */

.buttons {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Base button */
.btn {
    position: relative;
    text-align: left;
    width: 100%;
    height: 64px;
    border-radius: 33px;
    border: none;
    cursor: pointer;
    padding: 0 24px;

    /* Ефект об’ємного скла */
    background: rgba(255, 255, 255, 0.1); /* напівпрозорий фон */
    backdrop-filter: saturate(100%) brightness(150%); /* для яскравості скла */
    /* Об’єм через тіні */
    box-shadow:
            -4px -4px 15px rgba(255, 255, 255, 0.1); /* блик зверху/зліва */
    /* Легкий градієнт поверх скла */
    background-image: linear-gradient(135deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));
    display: inline-flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    text-shadow:
            -1px -1px 0 black,
            1px -1px 0 black,
            -1px 1px 0 black,
            1px 1px 0 black;
}


/* Gradient border */
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(
            135deg,
            #fff,
            #fff,
            #ff2fa1
    );
    -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Gradient shadow */
.btn::after {
    content: "";
    position: absolute;
    inset: -12px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(
            135deg,
            #00d4ff,
            #7a00ff,
            #ff2fa1
    );
    filter: blur(15px);
    opacity: 0.3;
}
.btn .icon{
    height: 40px;
    width: 40px;
    border: solid #fff 1px;
    border-radius: 50%;
}
.footer {
    margin-top: 40px;
    font-size: 13px;
    opacity: 0.6;
    color: #ffffff;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 420px) {

    /*.app {*/
    /*    padding: 40px 20px 48px;*/
    /*}*/

    .logo-wrap {
        width: 160px;
        height: 160px;
        margin-bottom: 48px;
        margin-top: 48px;
    }

    .btn {
        height: 60px;
    }

}