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

html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    font-family:
        "Montserrat",
        sans-serif;

    color: white;

    background:
        radial-gradient(circle at top, #3045b8 0%, transparent 40%),
        radial-gradient(circle at bottom right, #2f1f69 0%, transparent 40%),
        linear-gradient(135deg, #0b1220, #111827 65%, #05070f);

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 3rem;
}


/* ================================
   Header
================================ */


header {

    text-align: center;

    margin-bottom: 2.5rem;
}


header h1 {

    margin: 0;

    font-size:
        clamp(4rem, 7vw, 6rem);

    font-weight: 300;

    letter-spacing: -0.05em;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #c9dcff
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}


header p {

    margin-top: .8rem;

    color: #b5bfd4;

    font-size: 1rem;
}


/* ================================
   Main Glass Panel
================================ */


main {

    width:
        min(1500px, 95vw);

    padding:
        2.5rem;

    border-radius:
        30px;


    background:
        rgba(255,255,255,.05);


    border:
        1px solid rgba(255,255,255,.08);


    backdrop-filter:
        blur(24px);


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


    box-shadow:

        0 30px 80px rgba(0,0,0,.45),

        inset 0 1px 0 rgba(255,255,255,.05);
}


/* ================================
   Grid
================================ */


.buttons {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 2rem;
}


/* ================================
   Wrapper Handles Movement + Shadow
================================ */


.card-wrapper {

    position: relative;

    transition:
        transform .35s ease;

    border-radius: 24px;
}


.card-wrapper:hover {

    transform:
        translateY(-8px);
}


/* Shadow layer */

.card-wrapper::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 24px;

    z-index: -1;

    opacity: 0;

    transition:
        opacity .35s ease;

    pointer-events: none;
}


.cloud-wrapper:hover::after {

    opacity: 1;

    box-shadow:
        0 0px 40px rgba(76,145,255,.45);
}


.streaming-wrapper:hover::after {

    opacity: 1;

    box-shadow:
        0 0px 40px rgba(132,94,255,.40);
}


.more-wrapper:hover::after {

    opacity: 1;

    box-shadow:
        0 0px 40px rgba(255,184,66,.35);
}



/* ================================
   Card
================================ */


.button {

    position: relative;

    aspect-ratio:
        16 / 9;


    border-radius:
        24px;


    overflow:
        hidden;


    text-decoration:
        none;


    color:
        white;


    display:
        flex;


    align-items:
        flex-end;


    background-size:
        cover;


    background-position:
        center;
}



/* ================================
   Background Blur
================================ */


.button::before {

    content: "";

    position: absolute;

    inset: -10%;


    background:
        inherit;


    background-size:
        cover;


    background-position:
        center;


    filter:
        blur(5px);


    transform:
        scale(1.08);


    transition:
        transform .5s ease;
}


.card-wrapper:hover .button::before {

    transform:
        scale(1.15);
}



/* ================================
   Overlay
================================ */


.overlay {

    position: absolute;

    inset: 0;


    background:

        linear-gradient(
            to top,
            rgba(0,0,0,.82),
            rgba(0,0,0,.30),
            rgba(0,0,0,.15)
        );


    backdrop-filter:
        blur(5px);
}



/* ================================
   Text Bar
================================ */


.content {

    position: relative;

    width: 100%;


    padding:
        1.4rem 1.6rem;


    display:
        flex;


    flex-direction:
        column;


    gap:
        .35rem;


    background:
        rgba(20,25,40,.40);


    backdrop-filter:
        blur(18px);


    border-top:
        1px solid rgba(255,255,255,.08);
}


.content h2 {

    margin: 0;

    font-size:
        2rem;

    font-weight:
        700;
}


.content p {

    margin: 0;

    color:
        rgba(255,255,255,.75);

    font-size:
        .95rem;
}



/* ================================
   Images
================================ */


.cloud {

    background-image:
        url("images/cloud.jpg");
}


.streaming {

    background-image:
        url("images/streaming.jpg");
}


.more {

    background-image:
        url("images/more.jpg");
}



/* ================================
   Disabled
================================ */


.disabled {

    cursor:
        default;

    pointer-events:
        none;
}



/* ================================
   Responsive
================================ */


@media (max-width: 1100px) {

    .buttons {

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


@media (max-width:750px) {

    body {

        padding:
            1.25rem;
    }


    main {

        width:
            100%;

        padding:
            1.5rem;
    }


    .buttons {

        grid-template-columns:
            1fr;
    }


    header h1 {

        font-size:
            3rem;
    }
}