:root{--ink:#111827;--muted:#5d6572;--blue:#4a3cf0;--navy:#061124;--line:#e4e7ee;--soft:#f3f0ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}a{text-decoration:none;color:inherit}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.site-header{height:65px;background:#061124;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 47px;position:absolute;z-index:5;width:100%;top:0}.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.085em;font-size:17px;white-space:nowrap}.brand b{font-weight:500}.vmark{font-weight:900;font-size:31px;line-height:1;background:linear-gradient(135deg,#6947ff 25%,#28a4ff 95%);-webkit-background-clip:text;background-clip:text;color:transparent;transform:skew(-13deg)}.topnav{display:flex;align-items:center;gap:35px;font-size:13px}.topnav a{opacity:.98}.lang,.theme-toggle{border:0;background:transparent;color:#fff;font:inherit;cursor:pointer}.theme-toggle{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);width:29px;height:29px;border-radius:7px;line-height:1}.hero{height:565px;padding-top:65px;background-position:center;background-size:cover;background-repeat:no-repeat;position:relative;color:#fff;display:flex;align-items:center;justify-content:space-between;padding-left:80px;padding-right:47px}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,10,22,.80) 0%,rgba(5,12,24,.52) 41%,rgba(5,12,24,.16) 100%);z-index:1}.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,7,17,.03),rgba(2,7,17,.26));z-index:2}.hero__content,.login-card{position:relative;z-index:3}.hero__content{padding-top:16px}.hero h1{font-size:50px;line-height:1.24;margin:0 0 20px;font-weight:800;letter-spacing:-.045em}.hero p{font-size:17px;line-height:1.45;margin:0}.hero-features{display:flex;gap:70px;margin-top:41px}.hero-features span,.feature-grid span,.access span{display:grid;place-items:center;width:33px;height:33px;border-radius:8px;background:rgba(255,255,255,.18);backdrop-filter:blur(8px)}.hero-features p{font-size:13px;margin-top:11px;line-height:1.42}.login-card{width:345px;min-height:444px;background:rgba(255,255,255,.965);color:var(--ink);border-radius:7px;padding:27px 31px 25px;box-shadow:0 18px 42px rgba(0,0,0,.23)}.login-card h2{font-size:22px;margin:0 0 7px;font-weight:800;letter-spacing:-.02em}.login-card p,.login-card small{color:#687080;font-size:12px}.login-card label{display:block;margin:24px 0 9px;font-size:13px;font-weight:700}.login-card input{width:100%;height:37px;border:1px solid #d9dce4;border-radius:5px;padding:0 12px;font-size:12px;background:#fff;outline:none}.input-icon{position:relative}.input-icon svg,.show-pass{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:#7a8190}.show-pass{border:0;background:transparent;padding:0;display:grid;place-items:center;cursor:pointer}.login-card button[type=submit]{width:100%;height:34px;margin-top:10px;border:0;border-radius:4px;background:#071429;color:white;font-weight:600;cursor:pointer}.login-card button svg{width:15px;vertical-align:middle;margin-left:8px}.login-card .purple{background:var(--blue)!important;height:33px}.account-form a{font-size:12px;color:#4034e7;display:inline-block;margin:9px 0 3px}.divider{height:35px;display:flex;align-items:center;gap:18px;color:#111;font-size:13px}.divider:before,.divider:after{content:"";height:1px;background:#e5e7eb;flex:1}.why{text-align:center;padding:31px 80px 38px}.eyebrow{color:#4338f0!important;font-size:11px!important;font-weight:800;letter-spacing:.055em;margin:0 0 8px!important;text-transform:uppercase}.why h2,.gallery-panel h2{font-size:29px;margin:0 0 11px;letter-spacing:-.04em;line-height:1.15}.intro,.gallery-panel>p{font-size:13px!important;color:#4b5563;line-height:1.45;margin-top:0}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:67px;text-align:left;margin-top:32px}.feature-grid span,.access span{background:#f0edff;color:#4438f0;width:48px;height:48px;border-radius:8px}.feature-grid h3{font-size:15px;margin:19px 0 9px}.feature-grid p{font-size:13px;color:#596273;line-height:1.45;margin:0}.gallery-panel{margin:0 47px 18px;padding:23px 28px 28px;text-align:center;border-radius:7px;background:linear-gradient(135deg,#f6f4ff 0%,#fff 72%);box-shadow:0 12px 35px rgba(50,40,100,.08)}.mock-gallery{background:#fff;border-radius:8px;margin-top:18px;padding:12px;box-shadow:0 10px 26px rgba(24,29,45,.12);text-align:left}.tabs{display:flex;align-items:center;gap:20px;margin-bottom:12px}.tabs button{border:0;background:transparent;font-size:11px;color:#4b5563;padding:8px 9px;border-radius:4px;cursor:pointer}.tabs button.active{background:var(--blue);color:#fff;font-weight:700}.tabs a{margin-left:auto;font-size:11px;color:var(--blue);border:1px solid #e4e5ec;padding:8px 10px;border-radius:4px;font-weight:700}.tabs svg{width:13px}.masonry{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.1fr 1fr;grid-auto-rows:69px;gap:5px}.photo{position:relative;overflow:hidden;border-radius:4px;margin:0;background:#dbe1ea}.photo.large{grid-row:span 3}.photo:not(.large){grid-row:span 2}.photo img{width:100%;height:100%;object-fit:cover;display:block}.star,.dl{position:absolute;border:0;color:#fff;background:rgba(0,0,0,.25);width:22px;height:22px;display:grid;place-items:center;border-radius:3px}.star{right:7px;top:7px}.dl{right:7px;bottom:7px}.star svg,.dl svg{width:13px;height:13px}.access{margin:0 47px 22px;padding:20px 30px;border-radius:12px;background:#fff;box-shadow:0 8px 28px rgba(20,30,70,.08);display:flex;justify-content:space-between;align-items:center}.access>div{display:flex;gap:20px;align-items:center}.access h3{margin:0 0 8px;font-size:18px;letter-spacing:-.02em}.access p{margin:0;color:#6b7280;font-size:13px}.access>a{background:var(--blue);color:#fff;padding:14px 24px;border-radius:5px;font-weight:700;font-size:13px}.access svg{vertical-align:middle;width:15px}.footer{background:#061124;color:#fff;padding:28px 47px 18px;display:grid;grid-template-columns:1.7fr 1.2fr 1.2fr 1.4fr;gap:50px;position:relative;min-height:143px}.footer p,.footer a{display:block;color:#d9e0ef;font-size:12px;line-height:1.65;margin:8px 0}.footer h4{font-size:12px;margin:0 0 12px;letter-spacing:.04em}.footer small{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);font-size:11px;color:#8490a3}.foot-brand p{max-width:260px}.footer svg{width:14px;vertical-align:middle;margin-right:8px}body.dark{background:#0b1020;color:#f8fafc}body.dark .why,body.dark .gallery-panel,body.dark .access{background:#10172a;color:#f8fafc}body.dark .mock-gallery,body.dark .login-card{background:#111827;color:#fff}body.dark input{background:#0b1020;color:#fff;border-color:#2a3448}@media(max-width:860px){.site-header{padding:0 20px}.topnav a{display:none}.hero{height:auto;min-height:760px;display:block;padding:100px 20px 40px;background-position:center}.hero h1{font-size:42px}.hero-features{gap:25px}.login-card{width:100%;margin-top:35px}.why{padding:35px 20px}.feature-grid{grid-template-columns:1fr 1fr;gap:25px}.gallery-panel,.access{margin-left:20px;margin-right:20px}.masonry{grid-template-columns:1fr 1fr;grid-auto-rows:120px}.footer{grid-template-columns:1fr}.footer small{position:static;transform:none}}


/* Pixel-perfect desktop alignment based on the supplied 1024px-wide reference screenshot. */
@media (min-width:861px){
  .site-header{
    height:65px;
    padding-left:max(47px,calc(50vw - 465px));
    padding-right:max(22px,calc(50vw - 490px));
  }
  .topnav{gap:35px;}
  .hero{
    height:565px;
    min-height:565px;
    padding:65px 0 0;
    display:block;
    background-position:center center;
  }
  .hero:after{
    background:
      linear-gradient(90deg,rgba(3,10,22,.86) 0%,rgba(5,12,24,.58) 44%,rgba(5,12,24,.12) 100%),
      linear-gradient(180deg,rgba(2,7,17,.04) 0%,rgba(2,7,17,.32) 100%);
  }
  .hero__shade{display:none;}
  .hero__content{
    position:absolute;
    z-index:3;
    left:max(80px,calc(50vw - 432px));
    top:154px;
    padding:0;
    width:430px;
  }
  .hero h1{
    font-size:50px;
    line-height:1.24;
    margin:0 0 18px;
    font-weight:800;
    letter-spacing:-.045em;
  }
  .hero__content>p{
    font-size:17px;
    line-height:1.46;
    margin:0;
  }
  .hero-features{
    margin-top:40px;
    gap:70px;
  }
  .hero-features>div{width:70px;}
  .hero-features span{
    width:33px;
    height:33px;
    border-radius:8px;
  }
  .hero-features p{
    margin-top:11px;
    font-size:13px;
    line-height:1.42;
  }
  .login-card{
    position:absolute;
    z-index:3;
    top:93px;
    right:max(47px,calc(50vw - 465px));
    width:345px;
    min-height:444px;
    border-radius:7px;
    padding:27px 31px 25px;
  }
  .login-card h2{font-size:22px;margin-bottom:7px;}
  .login-card label{margin:24px 0 9px;}
}


/* HARD OVERRIDE: exact hero coordinates from the supplied 1024px reference.
   The previous version centered the hero in a max-width container on wide screens;
   this keeps the screenshot geometry intact instead. */
@media (min-width:861px){
  .site-header{
    height:65px !important;
    padding:0 20px !important;
    justify-content:flex-start !important;
    gap:0 !important;
  }
  .site-header .brand{
    margin:0 !important;
  }
  .topnav{
    margin-left:auto !important;
    gap:35px !important;
  }
  .hero{
    height:565px !important;
    min-height:565px !important;
    padding:65px 0 0 !important;
    display:block !important;
    background-size:cover !important;
    background-position:center center !important;
  }
  .hero__content{
    position:absolute !important;
    left:80px !important;
    top:154px !important;
    width:430px !important;
    padding:0 !important;
  }
  .hero h1{
    font-size:50px !important;
    line-height:1.24 !important;
    margin:0 0 18px !important;
    letter-spacing:-.045em !important;
  }
  .hero__content>p{
    font-size:17px !important;
    line-height:1.46 !important;
  }
  .hero-features{
    margin-top:40px !important;
    gap:70px !important;
  }
  .hero-features>div{width:70px !important;}
  .login-card{
    position:absolute !important;
    left:632px !important;
    right:auto !important;
    top:93px !important;
    width:345px !important;
    min-height:444px !important;
    border-radius:7px !important;
    padding:27px 31px 25px !important;
  }
}

/* FINAL HERO CORRECTION: keep the hero layout attached to the viewport edges like the reference image.
   Left copy keeps the 80px margin; login card keeps the 47px right margin. */
@media (min-width:861px){
  .site-header{height:65px!important;padding:0 20px!important;}
  .brand{font-size:17px!important;gap:10px!important;}
  .vmark{font-size:31px!important;}
  .hero{
    height:565px!important;
    min-height:565px!important;
    padding:65px 0 0!important;
    display:block!important;
    background-position:center center!important;
    background-size:cover!important;
  }
  .hero:after{
    background:linear-gradient(90deg,rgba(3,10,22,.86) 0%,rgba(5,12,24,.64) 42%,rgba(5,12,24,.20) 100%)!important;
  }
  .hero__content{
    position:absolute!important;
    left:80px!important;
    top:154px!important;
    width:430px!important;
    padding:0!important;
  }
  .hero h1{font-size:50px!important;line-height:1.24!important;margin:0 0 18px!important;font-weight:800!important;letter-spacing:-.045em!important;}
  .hero__content>p{font-size:17px!important;line-height:1.46!important;margin:0!important;}
  .hero-features{display:flex!important;margin-top:40px!important;gap:70px!important;}
  .hero-features>div{width:70px!important;}
  .hero-features span{width:33px!important;height:33px!important;border-radius:8px!important;}
  .hero-features p{font-size:13px!important;line-height:1.42!important;margin-top:11px!important;}
  .login-card{
    position:absolute!important;
    top:93px!important;
    left:auto!important;
    right:47px!important;
    width:345px!important;
    min-height:444px!important;
    border-radius:7px!important;
    padding:27px 31px 25px!important;
  }
}

@media (min-width:1200px){
  .hero__content{left:80px!important;}
  .login-card{right:47px!important;}
}


/* v1.5.0 REAL CHANGE: compacte hero tekstblokken. Deze override staat helemaal onderaan,
   zodat hij alle eerdere hero-regels in dit bestand overschrijft. */
@media (min-width:861px){
  .hero__content{
    top:170px!important;
    left:140px!important;
    width:420px!important;
  }
  .hero h1{
    font-size:50px!important;
    line-height:1.06!important;
    margin:0 0 24px!important;
    letter-spacing:-.055em!important;
  }
  .hero__content>p{
    font-size:17px!important;
    line-height:1.28!important;
    margin:0!important;
  }
  .hero-features{
    margin-top:30px!important;
    gap:56px!important;
  }
  .hero-features>div{
    width:58px!important;
  }
  .hero-features p{
    margin-top:8px!important;
    font-size:13px!important;
    line-height:1.22!important;
  }
}