/* =========================================================
   ALGEMENE INSTELLINGEN
========================================================= */

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

html {
    min-height: 100%;
}

body {
    min-height: 100vh;

    font-family: "Inter", Arial, sans-serif;

    color: #ffffff;

    background:
        linear-gradient(
            rgba(20, 37, 52, 0.78),
            rgba(20, 37, 52, 0.82)
        ),
        linear-gradient(
            135deg,
            #1b3042 0%,
            #344b5d 45%,
            #7b6756 100%
        );

    background-attachment: fixed;

    -webkit-font-smoothing: antialiased;
}

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


/* =========================================================
   PAGINA
========================================================= */

.page {
    width: 100%;
    min-height: 100vh;

    padding: 55px 35px 25px;
}


/* =========================================================
   HERO
========================================================= */

.hero {
    width: 100%;
    text-align: center;

    margin-bottom: 45px;
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.hero h1 {
    font-size: clamp(48px, 6vw, 82px);

    line-height: 1;

    font-weight: 800;

    letter-spacing: -2px;

    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.25);

    margin-bottom: 25px;
}

.hero-text {
    font-size: clamp(17px, 2vw, 23px);

    line-height: 1.55;

    font-weight: 400;

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

.hero-line {
    width: 165px;
    height: 4px;

    margin: 27px auto 20px;

    border-radius: 10px;

    background: #42a5f5;
}

.heart {
    font-size: 39px;

    font-weight: 300;

    line-height: 1;

    opacity: 0.95;
}


/* =========================================================
   APPLICATIONS GRID
========================================================= */

.applications {

    width: 100%;
    max-width: 1460px;

    margin: 0 auto 40px;

    display: grid;

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

    gap: 20px;
}


/* =========================================================
   APP CARD
========================================================= */

.app-card {

    position: relative;

    min-height: 445px;

    padding: 28px 25px 25px;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;

    border-radius: 18px;

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

    color: #283444;

    border: 2px solid rgba(255, 255, 255, 0.4);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.20);

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

    -webkit-tap-highlight-color: transparent;
}


/* Hover effect */

.app-card:hover {

    transform: translateY(-9px);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   ICON
========================================================= */

.icon-wrapper {

    width: 136px;
    height: 136px;

    display: flex;

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

    border-radius: 50%;

    margin-bottom: 23px;
}

.app-icon {

    font-size: 62px;

    line-height: 1;

    filter:
        drop-shadow(0 3px 3px rgba(0, 0, 0, 0.08));
}


/* Verschillende icon achtergronden */

.radio .icon-wrapper {
    background: #eee7f7;
}

.notes .icon-wrapper {
    background: #e4f2ed;
}

.house .icon-wrapper {
    background: #fff1d6;
}

.bread .icon-wrapper {
    background: #f1e9df;
}

.yahtzee .icon-wrapper {
    background: #e2eff8;
}


/* =========================================================
   TITELS
========================================================= */

.app-card h2 {

    min-height: 58px;

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

    font-size: 23px;

    line-height: 1.25;

    font-weight: 700;

    margin-bottom: 14px;

    letter-spacing: -0.4px;
}


/* =========================================================
   BESCHRIJVING
========================================================= */

.app-card p {

    flex: 1;

    font-size: 15.5px;

    line-height: 1.65;

    color: #46515f;

    margin-bottom: 22px;
}


/* =========================================================
   BUTTON
========================================================= */

.app-button {

    width: 100%;

    min-height: 42px;

    padding: 10px 15px;

    display: flex;

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

    border-radius: 8px;

    color: white;

    font-size: 14px;

    font-weight: 600;

    transition:
        filter 0.2s ease,
        transform 0.2s ease;
}

.app-card:hover .app-button {

    filter: brightness(1.07);

}

.arrow {

    font-size: 25px;

    line-height: 15px;

    font-weight: 300;

    transition:
        transform 0.2s ease;
}

.app-card:hover .arrow {

    transform: translateX(5px);

}


/* =========================================================
   BUTTON KLEUREN
========================================================= */

.radio .app-button {
    background: #7858b2;
}

.notes .app-button {
    background: #429879;
}

.house .app-button {
    background: #e1a72e;
}

.bread .app-button {
    background: #ad875f;
}

.yahtzee .app-button {
    background: #318acb;
}


/* =========================================================
   FOOTER INFO
========================================================= */

.footer-info {

    max-width: 1460px;

    min-height: 105px;

    margin: 0 auto 20px;

    padding: 20px 45px;

    display: grid;

    grid-template-columns:
        1fr 1fr 1fr;

    align-items: center;

    gap: 30px;

    border-radius: 18px;

    background:
        rgba(20, 36, 50, 0.72);

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

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   FOOTER ITEMS
========================================================= */

.footer-item {

    display: flex;

    align-items: center;

    gap: 15px;
}

.footer-icon {

    width: 47px;
    height: 47px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 50%;

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

    font-size: 22px;
}

.footer-item div:last-child {

    display: flex;

    flex-direction: column;

    gap: 5px;
}

.footer-item span {

    font-size: 14px;

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

.footer-item strong {

    font-size: 15px;

    font-weight: 600;
}


/* =========================================================
   QUOTE
========================================================= */

.footer-quote {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    gap: 6px;
}

.leaf {

    font-size: 27px;

    transform:
        rotate(-30deg);

    opacity: 0.9;
}

.footer-quote span {

    font-size: 14px;

    font-style: italic;

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


/* =========================================================
   COPYRIGHT
========================================================= */

.copyright {

    text-align: center;

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

    font-size: 13px;

    padding: 5px 10px 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {

    .applications {

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

        max-width: 950px;
    }

    .app-card {

        min-height: 420px;
    }

    .footer-info {

        max-width: 950px;
    }
}


/* =========================================================
   KLEINERE TABLET
========================================================= */

@media (max-width: 800px) {

    .page {

        padding:
            40px 20px 20px;
    }

    .applications {

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

        gap: 18px;
    }

    .footer-info {

        grid-template-columns: 1fr;

        padding: 25px;

        gap: 25px;

        text-align: center;
    }

    .footer-item {

        justify-content: center;
    }
}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 560px) {

    body {

        background:
            linear-gradient(
                rgba(20, 37, 52, 0.82),
                rgba(20, 37, 52, 0.88)
            ),
            linear-gradient(
                145deg,
                #1b3042,
                #566270
            );

        background-attachment: scroll;
    }

    .page {

        padding:
            30px 14px 18px;
    }

    .hero {

        margin-bottom: 30px;
    }

    .hero h1 {

        font-size: 50px;

        letter-spacing: -1.5px;

        margin-bottom: 18px;
    }

    .hero-text {

        font-size: 16px;

        line-height: 1.5;
    }

    .hero-line {

        width: 120px;

        height: 3px;

        margin-top: 21px;
    }

    .heart {

        font-size: 32px;
    }

    .applications {

        grid-template-columns: 1fr;

        gap: 17px;

        max-width: 440px;

        margin-bottom: 25px;
    }

    .app-card {

        min-height: 0;

        padding:
            25px 22px 22px;

        border-radius: 16px;
    }

    .app-card h2 {

        min-height: 0;

        font-size: 22px;

        margin-bottom: 12px;
    }

    .app-card p {

        font-size: 15px;

        line-height: 1.55;

        margin-bottom: 20px;
    }

    .icon-wrapper {

        width: 110px;
        height: 110px;

        margin-bottom: 18px;
    }

    .app-icon {

        font-size: 52px;
    }

    .app-button {

        min-height: 46px;

        font-size: 14px;

        padding:
            10px 14px;
    }

    .footer-info {

        border-radius: 15px;

        padding: 23px 15px;

        margin-bottom: 15px;
    }

    .footer-quote {

        order: 3;
    }

    .footer-item {

        gap: 12px;
    }

    .footer-icon {

        width: 43px;
        height: 43px;
    }

    .copyright {

        font-size: 12px;

        line-height: 1.5;
    }
}


/* =========================================================
   EXTRA KLEINE TELEFOONS
========================================================= */

@media (max-width: 360px) {

    .page {

        padding-left: 10px;
        padding-right: 10px;
    }

    .hero h1 {

        font-size: 44px;
    }

    .hero-text {

        font-size: 15px;
    }

    .app-card {

        padding:
            22px 18px 19px;
    }

}