/*
===========================================
BASIS
===========================================
*/

:root {

    --background: #f7f5ff;

    --surface: #ffffff;

    --text: #28263a;

    --text-soft: #706d82;

    --purple: #7655d8;

    --purple-dark: #5136ad;

    --purple-soft: #eee9ff;

    --pink: #e652a2;

    --blue: #5d9df5;

    --border: #e8e3f4;

    --shadow:
        0 24px 70px
        rgba(61, 45, 105, 0.12);

}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color:
        var(--text);

    background:

        radial-gradient(
            circle at 10% 10%,
            rgba(230, 82, 162, 0.08),
            transparent 28%
        ),

        radial-gradient(
            circle at 90% 20%,
            rgba(93, 157, 245, 0.1),
            transparent 32%
        ),

        var(--background);

}


a {
    color: inherit;
}


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

.page {

    width:
        min(
            calc(100% - 40px),
            1240px
        );

    margin:
        0 auto;

}


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

.hero {

    min-height:
        700px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(380px, 0.85fr);

    align-items:
        center;

    gap:
        80px;

    padding:
        80px
        0
        60px;

}


.hero-content {

    max-width:
        650px;

}


.status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        28px;

    padding:
        10px
        16px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

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

    color:
        var(--purple-dark);

    font-size:
        14px;

    font-weight:
        700;

}


.status-dot {

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        #55c882;

    box-shadow:
        0 0 0 5px
        rgba(85, 200, 130, 0.14);

}


.eyebrow {

    margin:
        0
        0
        12px;

    color:
        var(--purple);

    font-size:
        14px;

    font-weight:
        800;

    letter-spacing:
        1.6px;

    text-transform:
        uppercase;

}


.hero h1 {

    margin:
        0;

    max-width:
        720px;

    font-size:
        clamp(
            52px,
            6vw,
            90px
        );

    line-height:
        0.95;

    letter-spacing:
        -4px;

}


.hero h1 span {

    display:
        block;

    color:
        var(--purple);

}


.intro {

    max-width:
        570px;

    margin:
        30px
        0
        0;

    color:
        var(--text-soft);

    font-size:
        20px;

    line-height:
        1.7;

}


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

.actions {

    display:
        flex;

    gap:
        15px;

    margin-top:
        34px;

}


.button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        15px
        21px;

    border-radius:
        14px;

    text-decoration:
        none;

    font-weight:
        700;

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

}


.button:hover {

    transform:
        translateY(-2px);

}


.button-primary {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--pink)
        );

    box-shadow:
        0 12px 28px
        rgba(118, 85, 216, 0.22);

}


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

.hero-visual {

    position:
        relative;

    min-height:
        500px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


/*
===========================================
UILTJE
===========================================
*/

.owl {

    position:
        relative;

    z-index:
        2;

    animation:
        owlFloat
        4.5s
        ease-in-out
        infinite;

}


.owl-body {

    position:
        relative;

    width:
        310px;

    height:
        350px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    padding-top:
        80px;

    border:
        5px solid
        #3a3157;

    border-radius:
        48% 48%
        38% 38%;

    background:
        linear-gradient(
            145deg,
            #8366dc,
            #6348bd
        );

    box-shadow:
        var(--shadow);

}


.owl-ear {

    position:
        absolute;

    z-index:
        -1;

    top:
        5px;

    width:
        90px;

    height:
        100px;

    background:
        #7655d8;

    border:
        5px solid
        #3a3157;

}


.owl-ear-left {

    left:
        15px;

    transform:
        rotate(-25deg);

    border-radius:
        10px
        60px
        20px
        60px;

}


.owl-ear-right {

    right:
        15px;

    transform:
        rotate(25deg);

    border-radius:
        60px
        10px
        60px
        20px;

}


.owl-eyes {

    display:
        flex;

    gap:
        18px;

}


.owl-eye {

    position:
        relative;

    overflow:
        hidden;

    width:
        92px;

    height:
        92px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        5px solid
        #3a3157;

    border-radius:
        50%;

    background:
        #ffffff;

}


.owl-eye span {

    width:
        33px;

    height:
        33px;

    border-radius:
        50%;

    background:
        #302748;

    animation:
        owlLook
        5s
        ease-in-out
        infinite;

}


.owl-eye::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        -100%;

    width:
        100%;

    height:
        100%;

    background:
        #7655d8;

    border-radius:
        50%;

    animation:
        owlBlink
        6s
        infinite;

}


.owl-beak {

    width:
        0;

    height:
        0;

    margin-top:
        -7px;

    border-left:
        16px solid
        transparent;

    border-right:
        16px solid
        transparent;

    border-top:
        26px solid
        #ffb44d;

}


.owl-code {

    margin-top:
        38px;

    padding:
        13px
        20px;

    border-radius:
        13px;

    color:
        #ffffff;

    background:
        rgba(46, 37, 75, 0.46);

    font-family:
        Consolas,
        monospace;

    font-size:
        26px;

    font-weight:
        700;

}


.owl-feet {

    display:
        flex;

    justify-content:
        center;

    gap:
        70px;

    margin-top:
        -5px;

}


.owl-feet span {

    width:
        45px;

    height:
        13px;

    border-radius:
        0 0
        15px 15px;

    background:
        #ffb44d;

}


/*
===========================================
ZWEVENDE LABELS
===========================================
*/

.code-card {

    position:
        absolute;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        11px
        15px;

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

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

    box-shadow:
        0 12px 30px
        rgba(61, 45, 105, 0.1);

    font-size:
        14px;

    font-weight:
        700;

}


.code-card i {

    color:
        var(--purple);

}


.code-card-left {

    left:
        0;

    top:
        120px;

    animation:
        cardFloatLeft
        5.5s
        ease-in-out
        infinite;

}


.code-card-right {

    right:
        0;

    bottom:
        100px;

    animation:
        cardFloatRight
        6s
        ease-in-out
        infinite;

}


/*
===========================================
OVER
===========================================
*/

.about {

    padding:
        60px
        0
        80px;

}


.about-intro {

    max-width:
        650px;

}


.about h2 {

    margin:
        0
        0
        16px;

    font-size:
        clamp(
            32px,
            4vw,
            46px
        );

    letter-spacing:
        -1.5px;

}


.about-intro > p:last-child {

    color:
        var(--text-soft);

    font-size:
        17px;

    line-height:
        1.7;

}


/*
===========================================
ONTWIKKELEN / TESTEN / ONTDEKKEN
===========================================
*/

.cards {

    display:
        grid;

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

    gap:
        0;

    margin-top:
        50px;

    border-top:
        1px solid
        var(--border);

    border-bottom:
        1px solid
        var(--border);

}


.card {

    position:
        relative;

    padding:
        38px
        34px;

    background:
        transparent;

}


.card:not(:last-child) {

    border-right:
        1px solid
        var(--border);

}


.card-icon {

    width:
        44px;

    height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        22px;

    border-radius:
        12px;

    color:
        var(--purple);

    background:
        var(--purple-soft);

    font-size:
        18px;

}


.card h3 {

    margin:
        0
        0
        10px;

    font-size:
        20px;

    letter-spacing:
        -0.4px;

}


.card p {

    max-width:
        280px;

    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        15px;

    line-height:
        1.65;

}


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

footer {

    width:
        min(
            calc(100% - 40px),
            1240px
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    margin:
        0 auto;

    padding:
        30px
        0
        42px;

    border-top:
        1px solid
        var(--border);

    color:
        var(--text-soft);

    font-size:
        14px;

}


footer div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

}


footer strong {

    color:
        var(--text);

}


footer a {

    color:
        var(--purple);

    font-weight:
        700;

    text-decoration:
        none;

}


footer a:hover {

    text-decoration:
        underline;

}


/*
===========================================
ANIMATIES
===========================================
*/

@keyframes owlFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-10px);

    }

}


@keyframes owlBlink {

    0%,
    43%,
    47%,
    100% {

        top:
            -100%;

    }

    44%,
    46% {

        top:
            0;

    }

}


@keyframes owlLook {

    0%,
    100% {

        transform:
            translateX(0);

    }

    30% {

        transform:
            translateX(4px);

    }

    65% {

        transform:
            translateX(-3px);

    }

}


@keyframes cardFloatLeft {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(-5deg);

    }

    50% {

        transform:
            translateY(-7px)
            rotate(-3deg);

    }

}


@keyframes cardFloatRight {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(5deg);

    }

    50% {

        transform:
            translateY(8px)
            rotate(3deg);

    }

}


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

@media (
    max-width: 900px
) {

    .hero {

        grid-template-columns:
            1fr;

        gap:
            35px;

        padding-top:
            70px;

    }


    .hero-content {

        max-width:
            720px;

    }


    .hero-visual {

        min-height:
            450px;

    }


    .cards {

        grid-template-columns:
            1fr;

    }


    .card {

        padding:
            30px
            10px;

    }


    .card:not(:last-child) {

        border-right:
            0;

        border-bottom:
            1px solid
            var(--border);

    }

}


@media (
    max-width: 600px
) {

    .page,
    footer {

        width:
            calc(100% - 30px);

    }


    .hero {

        min-height:
            auto;

        padding-top:
            45px;

    }


    .hero h1 {

        font-size:
            52px;

        letter-spacing:
            -3px;

    }


    .intro {

        font-size:
            17px;

    }


    .hero-visual {

        min-height:
            390px;

        transform:
            scale(0.88);

    }


    .owl-body {

        width:
            280px;

        height:
            320px;

    }


    .code-card-left {

        left:
            -15px;

    }


    .code-card-right {

        right:
            -15px;

    }


    footer {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}


/*
===========================================
MINDER BEWEGING
===========================================
*/

@media (
    prefers-reduced-motion: reduce
) {

    .owl,
    .owl-eye::after,
    .owl-eye span,
    .code-card-left,
    .code-card-right {

        animation:
            none;

    }

}