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

body{
    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

/* Верхняя панель */

.topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;

    height:50px;
    background:#fff;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 18px;
    z-index:10;

    box-shadow:0 1px 2px rgba(0,0,0,.08);
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
}

.brand img{
    width:32px;
    height:32px;
}

.brand span{
    font-size:18px;
    font-weight:600;
    color:#444;
}

.download-btn{
    background:#2196f3;
    border:none;
    color:#fff;

    height:34px;
    padding:0 18px;

    border-radius:18px;

    font-size:13px;
    font-weight:700;
    cursor:pointer;
}

/* Основной фон */

.hero{
    position:relative;

    width:100vw;
    height:100vh;

    background:
    linear-gradient(
        90deg,
        #9cccbc,
        #d4dca9
    );

    display:flex;
    justify-content:center;
    align-items:center;
}

.hero::before{
    content:"";

    position:absolute;
    inset:0;

    background:url("pattern.png"); no-repeat center center;
    background-size: cover; /* масштабирует картинку на весь экран */
    z-index:1;
}

.overlay{
    position:absolute;
    inset:0;

    background:
    radial-gradient(
        circle at bottom,
        rgba(255,255,180,.35),
        transparent 45%
    );
}

/* Карточка */

.card{
    position:relative;
    z-index:2;

    width:370px;

    background:white;

    border-radius:18px;

    text-align:center;

    padding:35px 35px 30px;

    box-shadow:
    0 8px 30px rgba(0,0,0,.12);
}

.avatar{
    width:110px;
    height:110px;

    border-radius:50%;
    object-fit:cover;
}

.card h1{
    margin-top:22px;

    font-size:24px;
    font-weight:700;

    color:#111;
}

.subs{
    margin-top:10px;
    margin-bottom:10px;
    color:#8a8a8a;
    font-size:15px;
}

/* Кнопки */

.btn{
    display:flex;

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

    width:160px;
    height:40px;

    margin:18px auto 0;

    text-decoration:none;

    border-radius:22px;

    font-size:14px;
    font-weight:700;
}

.primary{
    background:#2aabee;
    color:white;
}

.outline{
    color:#2aabee;
    border:2px solid #2aabee;
    background:white;
}
.btn{
    transition:.25s;
}

.btn:hover{
    transform:translateY(-2px);
}
@media (max-width:500px){

    .card{
        width:92%;
    }

    .card h1{
        font-size:22px;
    }
}