:root{
    --navy:#071c31;
    --navy-2:#0a2744;
    --blue:#1688f5;
    --blue-bright:#48b4ff;
    --ink:#0b2038;
    --muted:#66778d;
    --line:#e7edf3;
    --page-width:1240px;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    color:var(--ink);
    background:#fff;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

img{
    display:block;
    max-width:100%;
}

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

.container{
    width:min(var(--page-width),calc(100% - 48px));
    margin-inline:auto;
}

/* Header */
.site-header{
    position:relative;
    z-index:10;
    background:#fff;
    border-bottom:1px solid var(--line);
}

.header-inner{
    min-height:116px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
}

.header-logo{
    display:flex;
    align-items:center;
    flex:0 1 auto;
    min-width:0;
}

.header-logo img{
    width:var(--header-logo-width,350px);
    height:auto;
    max-height:88px;
    object-fit:contain;
    object-position:left center;
}

.download-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    text-decoration:none;
    color:#fff;
    font-weight:750;
    letter-spacing:-.15px;
    background:linear-gradient(180deg,#2698ff 0%,#127cf1 100%);
    box-shadow:0 12px 28px rgba(18,124,241,.22);
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}

.download-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 34px rgba(18,124,241,.28);
    filter:saturate(1.05);
}

.download-btn:focus-visible{
    outline:3px solid rgba(22,136,245,.28);
    outline-offset:4px;
}

.download-btn-header{
    flex:0 0 auto;
    min-width:176px;
    min-height:52px;
    padding:0 24px;
    border-radius:10px;
    font-size:16px;
}

/* Hero */
.hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:
        radial-gradient(circle at 75% 25%,rgba(45,163,242,.18),transparent 32%),
        linear-gradient(108deg,#06192c 0%,#08223c 49%,#0a2d4c 100%);
}

.hero-grid-overlay{
    position:absolute;
    z-index:-3;
    inset:0;
    opacity:.12;
    background-image:
        linear-gradient(rgba(82,182,255,.24) 1px,transparent 1px),
        linear-gradient(90deg,rgba(82,182,255,.24) 1px,transparent 1px);
    background-size:46px 46px;
    mask-image:linear-gradient(90deg,transparent 5%,#000 65%,#000 100%);
}

.hero-orb{
    position:absolute;
    z-index:-2;
    border-radius:999px;
    filter:blur(70px);
    pointer-events:none;
}

.hero-orb-one{
    width:330px;
    height:330px;
    top:5%;
    right:4%;
    background:rgba(38,168,255,.18);
}

.hero-orb-two{
    width:270px;
    height:270px;
    left:22%;
    bottom:-160px;
    background:rgba(36,145,230,.18);
}

.hero-inner{
    min-height:570px;
    display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(480px,1.12fr);
    align-items:center;
    gap:64px;
    padding-block:58px;
}

.hero-copy{
    min-width:0;
    color:#fff;
}

.eyebrow{
    display:flex;
    align-items:center;
    gap:17px;
    margin-bottom:22px;
    color:#cad8e6;
    font-size:12px;
    font-weight:650;
    letter-spacing:3.8px;
    line-height:1.5;
}

.eyebrow-line{
    width:46px;
    height:2px;
    flex:0 0 auto;
    border-radius:999px;
    background:#58b9ff;
}

.hero h1{
    margin:0 0 20px;
    max-width:620px;
    font-size:clamp(54px,5.2vw,78px);
    line-height:.96;
    font-weight:800;
    letter-spacing:-2.3px;
}

.hero h1 span{
    color:#3faaff;
}

.hero-copy > p{
    max-width:545px;
    margin:0 0 30px;
    color:#d6e2ed;
    font-size:18px;
    line-height:1.62;
}

.hero-actions{
    display:flex;
    align-items:center;
    gap:14px;
}

.download-btn-main{
    min-width:215px;
    min-height:66px;
    padding:0 30px;
    border-radius:14px;
    font-size:19px;
}

.download-meta{
    margin-top:17px;
    color:#bfcddd;
    font-size:13px;
    line-height:1.5;
}

.hero-media{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.media-card{
    position:relative;
    width:100%;
    max-width:680px;
    padding:8px;
    overflow:hidden;
    border-radius:22px;
    background:
        linear-gradient(135deg,rgba(88,188,255,.8),rgba(255,255,255,.08) 42%,rgba(88,188,255,.24));
    box-shadow:
        0 30px 80px rgba(0,0,0,.34),
        0 0 65px rgba(33,158,239,.12);
}

.media-card::after{
    content:"";
    position:absolute;
    inset:8px;
    pointer-events:none;
    border:1px solid rgba(255,255,255,.15);
    border-radius:15px;
}

.media-card img{
    width:100%;
    aspect-ratio:940/440;
    object-fit:cover;
    border-radius:15px;
    background:#0b2844;
}

/* Features */
.features{
    padding:58px 0 62px;
    background:#fff;
}

.features-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:34px;
}

.feature-card{
    min-width:0;
    padding:18px 26px 12px;
    text-align:center;
}

.feature-icon{
    width:84px;
    height:84px;
    display:grid;
    place-items:center;
    margin:0 auto 20px;
    border:1px solid #e3f0fb;
    border-radius:50%;
    background:linear-gradient(180deg,#f4faff 0%,#ebf6ff 100%);
}

.feature-icon svg{
    width:39px;
    height:39px;
    fill:var(--blue);
}

.feature-card h2{
    margin:0 0 9px;
    color:#10243c;
    font-size:20px;
    line-height:1.25;
}

.feature-card p{
    max-width:330px;
    margin:0 auto;
    color:var(--muted);
    font-size:15px;
    line-height:1.62;
}

/* Footer */
.site-footer{
    padding:36px 0;
    color:#fff;
    background:linear-gradient(90deg,#07192c 0%,#102b49 52%,#07192c 100%);
    border-top:1px solid rgba(255,255,255,.05);
}

.footer-inner{
    display:grid;
    grid-template-columns:minmax(250px,1fr) minmax(260px,1.25fr) minmax(190px,.8fr);
    align-items:center;
    gap:28px;
}

.footer-logo-wrap{
    justify-self:start;
    padding:10px 14px;
    border-radius:12px;
    background:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.14);
}

.footer-logo{
    display:block;
}

.footer-logo img{
    width:var(--footer-logo-width,300px);
    height:auto;
    max-height:72px;
    object-fit:contain;
    object-position:left center;
}

.copyright{
    color:#c4d0dc;
    text-align:center;
    font-size:12px;
    line-height:1.5;
}

.footer-message{
    justify-self:end;
    color:#ccd8e5;
    font-size:11px;
    line-height:1.8;
    letter-spacing:3px;
}

.footer-message span{
    display:block;
    width:40px;
    height:2px;
    margin-top:10px;
    border-radius:99px;
    background:#59b8ff;
}

/* Tablet */
@media (max-width:1000px){
    .header-inner{
        min-height:104px;
    }

    .header-logo img{
        width:min(var(--header-logo-width,350px),310px);
    }

    .hero-inner{
        grid-template-columns:1fr;
        gap:40px;
        padding-block:54px;
    }

    .hero-copy{
        max-width:680px;
    }

    .hero-media{
        justify-content:flex-start;
    }

    .media-card{
        max-width:760px;
    }

    .footer-inner{
        grid-template-columns:1fr;
        justify-items:center;
        gap:22px;
        text-align:center;
    }

    .footer-logo-wrap{
        justify-self:center;
    }

    .footer-message{
        justify-self:center;
        text-align:center;
    }

    .footer-message span{
        margin-inline:auto;
    }
}

/* Mobile */
@media (max-width:680px){
    .container{
        width:min(100% - 30px,var(--page-width));
    }

    .header-inner{
        min-height:88px;
        gap:14px;
    }

    .header-logo img{
        width:min(var(--header-logo-width,350px),205px);
        max-height:60px;
    }

    .download-btn-header{
        min-width:auto;
        min-height:44px;
        padding:0 13px;
        border-radius:9px;
        font-size:13px;
        white-space:nowrap;
    }

    .hero-inner{
        min-height:auto;
        gap:34px;
        padding-block:48px;
    }

    .eyebrow{
        gap:11px;
        margin-bottom:18px;
        font-size:10px;
        letter-spacing:2.4px;
    }

    .eyebrow-line{
        width:34px;
    }

    .hero h1{
        margin-bottom:17px;
        font-size:clamp(47px,14vw,58px);
        letter-spacing:-1.8px;
    }

    .hero-copy > p{
        margin-bottom:25px;
        font-size:16px;
        line-height:1.58;
    }

    .download-btn-main{
        width:100%;
        min-height:58px;
        padding-inline:22px;
        font-size:17px;
    }

    .download-meta{
        font-size:12px;
    }

    .media-card{
        padding:5px;
        border-radius:16px;
    }

    .media-card::after{
        inset:5px;
        border-radius:12px;
    }

    .media-card img{
        border-radius:12px;
    }

    .features{
        padding:46px 0 50px;
    }

    .features-grid{
        grid-template-columns:1fr;
        gap:22px;
    }

    .feature-card{
        padding:12px 18px;
    }

    .feature-icon{
        width:76px;
        height:76px;
    }

    .footer-logo img{
        width:min(var(--footer-logo-width,300px),245px);
        max-height:64px;
    }
}

/* Very small phones */
@media (max-width:420px){
    .header-logo img{
        width:165px;
    }

    .download-btn-header{
        padding-inline:10px;
        font-size:12px;
    }

    .hero h1{
        font-size:45px;
    }

    .eyebrow{
        letter-spacing:1.8px;
    }
}


/* FINAL POLISH - footer blend + stable middle image */

/* Footer logo: geen wit vlak meer, logo blend direct in de footer */
.footer-logo-wrap{
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
}

.footer-logo img{
    filter:none !important;
}

/* Middenafbeelding: statisch en rustiger, zonder glanzende/overlappende laag */
.media-card{
    padding:0 !important;
    overflow:hidden !important;
    border:1px solid rgba(88,188,255,.35) !important;
    border-radius:18px !important;
    background:#0a2844 !important;
    box-shadow:0 24px 58px rgba(0,0,0,.28) !important;

    /* Vermindert GPU/compositing-flikkering in sommige browsers */
    transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    contain:paint;
}

.media-card::after{
    display:none !important;
}

.media-card img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:940/440 !important;
    object-fit:cover !important;
    border-radius:17px !important;
    transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

/* Geen onnodige animatie/transitie rond de middenafbeelding */
.hero-media,
.media-card,
.media-card img{
    transition:none !important;
    animation:none !important;
}