/* Reset */

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


/* Base */

body {
    font-family:
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Ubuntu,
        Arial,
        sans-serif;

    margin: 0;
    background: #ffffff;
    color: #222;
}


/* Header */

.header {
    text-align: center;
    padding: 40px 20px;
}

.logo {
    width: 190px;
    margin-bottom: 5px;
}

.subtitle {
    color: #777;
    font-weight: 400;
    margin-bottom: 10px;
}


/* Layout */

.container {
    max-width: 760px;
    margin: auto;
    padding: 10px;
}

h2 {
    text-align: center;
    margin: 18px 0;
}


/* Buttons */

.btn {
    display: flex;
    align-items: center;
    gap: 18px;

    width: 100%;
    padding: 18px 20px;
    margin-bottom: 10px;

    color: white;
    text-decoration: none;

    border-radius: 10px;

    font-weight: 500;
    font-size: 16px;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, .12),
        inset 0 1px 0 rgba(255, 255, 255, .25);

    transition: transform .15s ease, box-shadow .15s ease;

    animation: fade .5s ease;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

.btn img {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    image-rendering: -webkit-optimize-contrast;
}


/* Button colors */

.wb {
    background: linear-gradient(45deg, #ff49d7, #6f01fb);
    background-size: 200% 200%;
    animation: grad 6s ease infinite;
}

.ozon {
    background: #1a6cff;
}

.ym {
    background: linear-gradient(15deg, #ff5226, #ffbc09);
}

.telegram {
    background: #3390ec;
}

.whatsapp {
    background: #2cb742;
}

.max {
    background: #563bed;
}

.mail {
    background: #ff8c00;
}

.phone {
    background: #ff3366;
}

.vk {
    background: #0077ff;
}

.tiktok {
    background: #222222;
}

.instagram {
    background: #e1306c;
}

.youtube {
    background: #c4302b;
}


/* Animations */

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes grad {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* Footer */

.note {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 40px 20px;
}