/* =====================================
   LANDING PAGE
   BeschrijfJeWensen.nl

   Page-specific styling only.

   Shared header/footer styling:
   /assets/css/style.css
===================================== */


/* =====================================
   DESIGN VARIABLES
===================================== */

:root{
    --home-primary:#5f55d9;
    --home-primary-dark:#4c43c4;
    --home-primary-soft:#f1efff;

    --home-text:#25243a;
    --home-text-soft:#66667a;
    --home-text-light:#858596;

    --home-background:#ffffff;
    --home-background-soft:#f8f8fc;
    --home-background-purple:#f5f3ff;

    --home-border:#e8e7ef;

    --home-shadow-small:
        0 8px 30px rgba(42,39,80,0.06);

    --home-shadow-medium:
        0 18px 50px rgba(42,39,80,0.10);

    --home-radius-small:12px;
    --home-radius-medium:18px;
    --home-radius-large:28px;

    --home-container-width:1180px;
}


/* =====================================
   HOME PAGE BASE
===================================== */

.home-page{
    width:100%;
    overflow:hidden;
    background:var(--home-background);
    color:var(--home-text);
}


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


.home-page .container{
    width:calc(100% - 48px);
    max-width:var(--home-container-width);

    margin-left:auto;
    margin-right:auto;
}


.home-page h1,
.home-page h2,
.home-page h3,
.home-page p{
    padding:0;
}


.home-page h1,
.home-page h2,
.home-page h3{
    color:var(--home-text);
}


.home-page p{
    color:var(--home-text-soft);
}


.home-eyebrow{
    display:inline-block;

    margin-bottom:15px;

    color:var(--home-primary);

    font-size:13px;
    font-weight:800;
    line-height:1.3;

    letter-spacing:1.25px;

    text-transform:uppercase;
}


/* =====================================
   BUTTONS
===================================== */

.home-button{
    min-height:52px;

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

    padding:0 25px;

    border:1px solid transparent;
    border-radius:12px;

    text-decoration:none;

    font-size:16px;
    font-weight:750;
    line-height:1.2;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.home-button:hover{
    transform:translateY(-2px);
}


.home-button-primary{
    background:var(--home-primary);

    color:#fff;

    box-shadow:
        0 10px 24px rgba(95,85,217,0.20);
}


.home-button-primary:hover{
    background:var(--home-primary-dark);

    color:#fff;

    box-shadow:
        0 14px 30px rgba(95,85,217,0.27);
}


.home-button-secondary{
    border-color:#d9d7e6;

    background:#fff;

    color:var(--home-text);
}


.home-button-secondary:hover{
    border-color:#bbb7dd;

    background:#faf9ff;

    color:var(--home-primary);
}


.home-button-light{
    min-width:190px;

    background:#fff;

    color:var(--home-primary);

    box-shadow:
        0 12px 30px rgba(28,23,78,0.16);
}


.home-button-light:hover{
    background:#f7f6ff;

    color:var(--home-primary-dark);
}


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

.home-hero{
    position:relative;

    padding:82px 0 88px;

    background:
        radial-gradient(
            circle at 83% 20%,
            rgba(95,85,217,0.10),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfaff 100%
        );
}


.home-hero-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1.03fr)
        minmax(420px,0.97fr);

    gap:72px;

    align-items:center;
}


.home-hero-content{
    position:relative;

    z-index:2;
}


.home-hero-content h1{
    max-width:680px;

    margin:0;

    font-size:clamp(48px,5.4vw,72px);
    font-weight:800;
    line-height:1.04;

    letter-spacing:-3.1px;
}


.home-hero-content h1 span{
    color:var(--home-primary);
}


.home-hero-text{
    max-width:610px;

    margin:27px 0 0;

    font-size:19px;
    line-height:1.75;
}


.home-hero-buttons{
    display:flex;
    flex-wrap:wrap;

    gap:13px;

    margin-top:34px;
}


/* =====================================
   HERO TRUST POINTS
===================================== */

.home-trust-points{
    display:grid;

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

    gap:20px;

    margin-top:46px;
}


.home-trust-point{
    min-width:0;

    display:flex;
    align-items:flex-start;

    gap:10px;
}


.home-trust-icon{
    width:24px;
    height:24px;

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

    flex:0 0 24px;

    margin-top:1px;

    border-radius:50%;

    background:var(--home-primary-soft);

    color:var(--home-primary);

    font-size:13px;
    font-weight:900;
}


.home-trust-point div{
    min-width:0;
}


.home-trust-point strong{
    display:block;

    margin-bottom:4px;

    color:var(--home-text);

    font-size:14px;
    line-height:1.35;
}


.home-trust-point div > span{
    display:block;

    color:var(--home-text-light);

    font-size:12px;
    line-height:1.45;
}


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

.home-hero-visual{
    position:relative;
}


.home-hero-image-wrapper{
    position:relative;

    width:100%;
    min-height:520px;
}


.home-hero-image-wrapper::before{
    content:"";

    position:absolute;

    top:-25px;
    right:-32px;

    width:230px;
    height:230px;

    border-radius:50%;

    background:var(--home-primary-soft);
}


.home-hero-image-wrapper::after{
    content:"";

    position:absolute;

    left:-32px;
    bottom:-28px;

    width:120px;
    height:120px;

    border-radius:28px;

    background:rgba(95,85,217,0.08);

    transform:rotate(12deg);
}


.home-hero-image{
    position:relative;

    z-index:1;

    display:block;

    width:100%;
    height:520px;

    object-fit:cover;

    border-radius:32px;

    box-shadow:var(--home-shadow-medium);
}


.home-hero-privacy-card{
    position:absolute;

    z-index:3;

    left:-34px;
    bottom:34px;

    min-width:245px;

    display:flex;
    align-items:center;

    gap:13px;

    padding:17px 20px;

    border:1px solid rgba(232,231,239,0.9);
    border-radius:15px;

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

    box-shadow:
        0 18px 45px rgba(42,39,80,0.16);
}


.home-hero-privacy-icon{
    width:39px;
    height:39px;

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

    flex:0 0 39px;

    border-radius:50%;

    background:var(--home-primary-soft);

    color:var(--home-primary);

    font-weight:900;
}


.home-hero-privacy-card strong{
    display:block;

    margin-bottom:3px;

    color:var(--home-text);

    font-size:14px;
}


.home-hero-privacy-card span{
    color:var(--home-text-light);

    font-size:12px;
}


/* =====================================
   PLATFORM INTRODUCTION
===================================== */

.home-platform{
    padding:105px 0 115px;

    background:#fff;
}


.home-section-intro{
    display:grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(320px,0.75fr);

    gap:80px;

    align-items:end;

    margin-bottom:55px;
}


.home-section-intro h2{
    margin:0;

    font-size:clamp(38px,4.2vw,56px);
    font-weight:800;
    line-height:1.08;

    letter-spacing:-2.2px;
}


.home-section-intro-text{
    padding-bottom:5px;
}


.home-section-intro-text p{
    margin:0;

    font-size:16px;
    line-height:1.75;
}


.home-section-intro-text p + p{
    margin-top:15px;
}


/* =====================================
   FEATURE CARDS
===================================== */

.home-feature-grid{
    display:grid;

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

    gap:22px;
}


.home-feature-card{
    position:relative;

    min-height:285px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    padding:31px;

    border:1px solid var(--home-border);
    border-radius:var(--home-radius-medium);

    background:#fff;

    box-shadow:
        0 6px 20px rgba(42,39,80,0.025);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}


.home-feature-card:hover{
    transform:translateY(-4px);

    border-color:#d9d5fa;

    box-shadow:var(--home-shadow-small);
}


.home-feature-icon{
    width:48px;
    height:48px;

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

    margin-bottom:24px;

    border-radius:13px;

    background:var(--home-primary-soft);

    color:var(--home-primary);

    font-size:24px;
    font-weight:800;
}


.home-feature-card h3{
    margin:0;

    font-size:20px;
    font-weight:750;
    line-height:1.3;

    letter-spacing:-0.4px;
}


.home-feature-card p{
    margin:13px 0 23px;

    font-size:15px;
    line-height:1.7;
}


.home-feature-card a{
    margin-top:auto;

    color:var(--home-primary);

    text-decoration:none;

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


.home-feature-card a:hover{
    text-decoration:underline;
}


.home-feature-status{
    min-height:29px;

    display:inline-flex;
    align-items:center;

    margin-top:auto;

    padding:0 11px;

    border-radius:20px;

    background:#f2f1f7;

    color:#797788;

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


/* =====================================
   SECTION HEADING
===================================== */

.home-section-heading{
    max-width:680px;

    margin:0 auto 58px;

    text-align:center;
}


.home-section-heading h2{
    margin:0;

    font-size:clamp(36px,4vw,52px);
    font-weight:800;
    line-height:1.1;

    letter-spacing:-2px;
}


.home-section-heading p{
    max-width:600px;

    margin:18px auto 0;

    font-size:17px;
    line-height:1.7;
}


/* =====================================
   HOW IT WORKS
===================================== */

.home-how{
    padding:105px 0;

    background:var(--home-background-soft);
}


.home-steps{
    position:relative;

    display:grid;

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

    gap:28px;
}


.home-steps::before{
    content:"";

    position:absolute;

    top:34px;
    left:16.66%;
    right:16.66%;

    height:2px;

    background:#dedbef;
}


.home-step{
    position:relative;

    z-index:1;

    padding:0 24px;

    text-align:center;
}


.home-step-number{
    width:68px;
    height:68px;

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

    margin:0 auto 25px;

    border:7px solid var(--home-background-soft);
    border-radius:50%;

    background:var(--home-primary);

    color:#fff;

    font-size:20px;
    font-weight:800;

    box-shadow:
        0 0 0 1px #d9d5fa;
}


.home-step h3{
    margin:0;

    font-size:20px;
    font-weight:750;
}


.home-step p{
    max-width:300px;

    margin:13px auto 0;

    font-size:15px;
    line-height:1.7;
}


.home-centered-action{
    margin-top:50px;

    text-align:center;
}


/* =====================================
   WHY BESCHRIJFJEWENS
===================================== */

.home-why{
    padding:115px 0;

    background:#fff;
}


.home-why-grid{
    display:grid;

    grid-template-columns:
        minmax(0,0.9fr)
        minmax(420px,1.1fr);

    gap:100px;

    align-items:center;
}


.home-why-content h2{
    margin:0;

    font-size:clamp(42px,4.6vw,62px);
    font-weight:800;
    line-height:1.05;

    letter-spacing:-2.5px;
}


.home-why-content p{
    max-width:540px;

    margin:25px 0 0;

    font-size:17px;
    line-height:1.8;
}


.home-why-content p + p{
    margin-top:17px;
}


.home-why-list-wrapper{
    padding:36px 38px;

    border:1px solid var(--home-border);
    border-radius:var(--home-radius-large);

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #faf9ff 100%
        );

    box-shadow:var(--home-shadow-small);
}


.home-check-list{
    margin:0;

    padding:0;

    list-style:none;
}


.home-check-list li{
    display:flex;
    align-items:flex-start;

    gap:15px;

    padding:19px 0;
}


.home-check-list li + li{
    border-top:1px solid var(--home-border);
}


.home-check-list li > span{
    width:29px;
    height:29px;

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

    flex:0 0 29px;

    margin-top:1px;

    border-radius:50%;

    background:var(--home-primary-soft);

    color:var(--home-primary);

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


.home-check-list strong{
    display:block;

    color:var(--home-text);

    font-size:16px;
    line-height:1.4;
}


.home-check-list p{
    margin:5px 0 0;

    font-size:14px;
    line-height:1.6;
}


/* =====================================
   PRIVACY
===================================== */

.home-privacy{
    padding:0 0 110px;

    background:#fff;
}


.home-privacy-card{
    display:grid;

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

    gap:30px;

    align-items:flex-start;

    padding:50px 56px;

    border:1px solid #e0ddfa;
    border-radius:var(--home-radius-large);

    background:
        linear-gradient(
            135deg,
            #f8f7ff 0%,
            #f1efff 100%
        );
}


.home-privacy-icon{
    width:68px;
    height:68px;

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

    border-radius:18px;

    background:var(--home-primary);

    color:#fff;

    font-size:27px;
    font-weight:900;

    box-shadow:
        0 12px 28px rgba(95,85,217,0.22);
}


.home-privacy-content h2{
    max-width:760px;

    margin:0;

    font-size:clamp(30px,3.3vw,43px);
    font-weight:800;
    line-height:1.15;

    letter-spacing:-1.5px;
}


.home-privacy-content p{
    max-width:780px;

    margin:18px 0 20px;

    font-size:16px;
    line-height:1.75;
}


.home-privacy-content a{
    color:var(--home-primary);

    text-decoration:none;

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


.home-privacy-content a:hover{
    text-decoration:underline;
}


/* =====================================
   FAQ
===================================== */

.home-faq{
    padding:105px 0 115px;

    background:var(--home-background-soft);
}


.home-faq-grid{
    max-width:860px;

    margin:0 auto;

    overflow:hidden;

    border:1px solid var(--home-border);
    border-radius:var(--home-radius-medium);

    background:#fff;

    box-shadow:
        0 10px 35px rgba(42,39,80,0.04);
}


.home-faq-item{
    background:#fff;
}


.home-faq-item + .home-faq-item{
    border-top:1px solid var(--home-border);
}


.home-faq-item summary{
    position:relative;

    padding:23px 62px 23px 26px;

    color:var(--home-text);

    font-size:16px;
    font-weight:700;
    line-height:1.5;

    cursor:pointer;

    list-style:none;
}


.home-faq-item summary::-webkit-details-marker{
    display:none;
}


.home-faq-item summary::after{
    content:"+";

    position:absolute;

    top:50%;
    right:25px;

    transform:translateY(-50%);

    color:var(--home-primary);

    font-size:25px;
    font-weight:400;
}


.home-faq-item[open] summary::after{
    content:"−";
}


.home-faq-item p{
    margin:0;

    padding:0 62px 24px 26px;

    font-size:15px;
    line-height:1.75;
}


.home-text-link{
    color:var(--home-primary);

    text-decoration:none;

    font-size:15px;
    font-weight:750;
}


.home-text-link:hover{
    text-decoration:underline;
}


/* =====================================
   FINAL CALL TO ACTION
===================================== */

.home-final-cta{
    padding:95px 0;

    background:#fff;
}


.home-final-cta-card{
    position:relative;

    overflow:hidden;

    display:grid;

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

    gap:60px;

    align-items:center;

    padding:58px 64px;

    border-radius:var(--home-radius-large);

    background:
        linear-gradient(
            135deg,
            #655bdd 0%,
            #5147ca 100%
        );

    box-shadow:
        0 24px 60px rgba(67,57,176,0.20);
}


.home-final-cta-card::before{
    content:"";

    position:absolute;

    top:-130px;
    right:100px;

    width:300px;
    height:300px;

    border-radius:50%;

    background:rgba(255,255,255,0.07);
}


.home-final-cta-card::after{
    content:"";

    position:absolute;

    right:-100px;
    bottom:-160px;

    width:330px;
    height:330px;

    border-radius:50%;

    background:rgba(255,255,255,0.05);
}


.home-final-cta-content,
.home-final-cta-action{
    position:relative;

    z-index:1;
}


.home-final-cta-card .home-eyebrow{
    color:#ddd9ff;
}


.home-final-cta-content h2{
    max-width:720px;

    margin:0;

    color:#fff;

    font-size:clamp(37px,4.3vw,54px);
    font-weight:800;
    line-height:1.08;

    letter-spacing:-2px;
}


.home-final-cta-content p{
    max-width:680px;

    margin:19px 0 0;

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

    font-size:16px;
    line-height:1.7;
}


.home-final-cta-action{
    min-width:205px;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:12px;
}


.home-final-cta-action > span{
    color:rgba(255,255,255,0.72);

    font-size:12px;
}


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

@media (max-width:1050px){

    .home-hero-grid{
        grid-template-columns:
            minmax(0,1fr)
            minmax(350px,0.85fr);

        gap:45px;
    }


    .home-hero-content h1{
        font-size:56px;

        letter-spacing:-2.5px;
    }


    .home-trust-points{
        grid-template-columns:1fr;

        gap:14px;

        margin-top:36px;
    }


    .home-hero-image-wrapper{
        min-height:470px;
    }


    .home-hero-image{
        height:470px;
    }


    .home-feature-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .home-why-grid{
        gap:60px;
    }

}


/* =====================================
   MOBILE
===================================== */

@media (max-width:768px){

    .home-page .container{
        width:calc(100% - 32px);
    }


    /* HERO */

    .home-hero{
        padding:58px 0 68px;
    }


    .home-hero-grid{
        grid-template-columns:1fr;

        gap:50px;
    }


    .home-hero-content{
        text-align:center;
    }


    .home-hero-content h1{
        max-width:620px;

        margin-left:auto;
        margin-right:auto;

        font-size:clamp(42px,12vw,58px);

        letter-spacing:-2.2px;
    }


    .home-hero-text{
        margin-left:auto;
        margin-right:auto;

        font-size:17px;
    }


    .home-hero-buttons{
        justify-content:center;
    }


    .home-trust-points{
        max-width:390px;

        margin-left:auto;
        margin-right:auto;

        text-align:left;
    }


    .home-hero-visual{
        width:100%;
        max-width:560px;

        margin:0 auto;
    }


    .home-hero-image-wrapper{
        min-height:auto;
    }


    .home-hero-image{
        height:auto;
        min-height:390px;

        aspect-ratio:4 / 3;
    }


    .home-hero-privacy-card{
        left:18px;
        bottom:18px;
    }


    /* PLATFORM */

    .home-platform{
        padding:80px 0 85px;
    }


    .home-section-intro{
        grid-template-columns:1fr;

        gap:25px;

        margin-bottom:42px;

        text-align:center;
    }


    .home-section-intro h2{
        font-size:42px;
    }


    .home-section-intro-text{
        max-width:650px;

        margin:0 auto;
    }


    .home-feature-grid{
        grid-template-columns:1fr;
    }


    .home-feature-card{
        min-height:auto;
    }


    /* HEADINGS */

    .home-section-heading{
        margin-bottom:45px;
    }


    .home-section-heading h2{
        font-size:40px;
    }


    /* HOW */

    .home-how{
        padding:80px 0;
    }


    .home-steps{
        grid-template-columns:1fr;

        gap:45px;
    }


    .home-steps::before{
        top:30px;
        bottom:30px;
        left:50%;
        right:auto;

        width:2px;
        height:auto;

        transform:translateX(-50%);
    }


    .home-step{
        padding:0;
    }


    .home-step-number{
        position:relative;
    }


    .home-step h3,
    .home-step p{
        position:relative;

        padding-left:12px;
        padding-right:12px;

        background:var(--home-background-soft);
    }


    /* WHY */

    .home-why{
        padding:85px 0;
    }


    .home-why-grid{
        grid-template-columns:1fr;

        gap:45px;
    }


    .home-why-content{
        text-align:center;
    }


    .home-why-content h2{
        font-size:48px;
    }


    .home-why-content p{
        margin-left:auto;
        margin-right:auto;
    }


    /* PRIVACY */

    .home-privacy{
        padding-bottom:85px;
    }


    .home-privacy-card{
        grid-template-columns:1fr;

        padding:40px;
    }


    /* FAQ */

    .home-faq{
        padding:80px 0 90px;
    }


    /* FINAL CTA */

    .home-final-cta{
        padding:75px 0;
    }


    .home-final-cta-card{
        grid-template-columns:1fr;

        gap:35px;

        padding:48px 40px;

        text-align:center;
    }


    .home-final-cta-content h2,
    .home-final-cta-content p{
        margin-left:auto;
        margin-right:auto;
    }


    .home-final-cta-action{
        min-width:0;
    }

}


/* =====================================
   SMALL MOBILE
===================================== */

@media (max-width:520px){

    .home-hero{
        padding-top:48px;
    }


    .home-eyebrow{
        font-size:11px;

        letter-spacing:1px;
    }


    .home-hero-content h1{
        font-size:41px;

        letter-spacing:-1.8px;
    }


    .home-hero-text{
        font-size:16px;
        line-height:1.65;
    }


    .home-hero-buttons{
        flex-direction:column;
    }


    .home-button{
        width:100%;
    }


    .home-hero-image{
        min-height:320px;
    }


    .home-hero-privacy-card{
        right:14px;
        left:14px;
        bottom:14px;

        min-width:0;
    }


    .home-section-intro h2,
    .home-section-heading h2{
        font-size:35px;

        letter-spacing:-1.4px;
    }


    .home-feature-card{
        padding:26px;
    }


    .home-why-content h2{
        font-size:40px;
    }


    .home-why-list-wrapper{
        padding:25px 24px;
    }


    .home-privacy-card{
        padding:31px 26px;
    }


    .home-privacy-content h2{
        font-size:31px;
    }


    .home-faq-item summary{
        padding:
            20px
            52px
            20px
            20px;
    }


    .home-faq-item summary::after{
        right:20px;
    }


    .home-faq-item p{
        padding:
            0
            20px
            22px;
    }


    .home-final-cta-card{
        padding:40px 25px;
    }


    .home-final-cta-content h2{
        font-size:36px;
    }

}


/* =====================================
   REDUCED MOTION
===================================== */

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

    .home-button,
    .home-feature-card{
        transition:none;
    }

}

.home-feature-secondary-link{
    display:block;
    margin-top:10px;

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

    opacity:.78;
}

.home-feature-secondary-link:hover{
    opacity:1;
}