:root{
  --bg:#0d0c10;--panel:#16151b;--panel2:#1d1c24;--ink:#e8e4dc;--dim:#9a948a;
  --gold:#b08d57;--gold2:#d4b98a;--line:#2c2c32;--green:#5faf7d;
}
*{margin:0;padding:0;box-sizing:border-box}
html, body{
  overflow-x:hidden;
  width:100%;
  scroll-behavior:smooth;
  background:var(--bg);
  color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;
  line-height:1.6;
}
.wrap{max-width:1220px;margin:0 auto;padding:0 24px;width:100%}
a{color:var(--gold2)}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(13,12,16,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);width:100%}
.nav{display:flex;justify-content:space-between;align-items:center;height:72px}
.merk{font-size:1.1rem;letter-spacing:.24em;color:var(--ink);text-decoration:none;font-weight:bold}
.merk b{color:var(--gold)}
.menu{display:flex;gap:24px;align-items:center}
.menu a{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-decoration:none;transition:color .2s;white-space:nowrap}
.menu a:hover{color:var(--gold2)}

.menu a.gh-nav{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(176,141,87,.3);color:var(--dim);padding:6px 14px;border-radius:20px;font-size:.74rem;transition:all .2s;background:rgba(22,21,27,.6);text-decoration:none}
.menu a.gh-nav:hover{border-color:var(--gold);color:var(--gold2);background:rgba(176,141,87,.15)}
.menu a.gh-nav svg{width:13px;height:13px;fill:currentColor}

.menu a.cta{border:1px solid var(--gold);color:var(--gold2);padding:9px 18px;white-space:nowrap}
.menu a.cta:hover{background:var(--gold);color:#1a1a1e}

/* hero */
.hero{position:relative;overflow:hidden;padding:168px 0 92px;text-align:center;width:100%}
.hero-bg-video{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden;pointer-events:none}
.hero-bg-video video{width:100%;height:100%;object-fit:cover;opacity:0.38}
.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center, rgba(13,12,16,.4) 0%, rgba(13,12,16,.94) 85%)}
.hero-content{position:relative;z-index:2}
.hero .kicker{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.hero h1{font-size:clamp(1.75rem,3.1vw,2.55rem);font-weight:normal;letter-spacing:.02em;max-width:1120px;margin:0 auto 26px;line-height:1.24}
.hero h1 em{font-style:italic;color:var(--gold2)}
.desktop-br{display:inline}
.hero p{max-width:680px;margin:0 auto 38px;color:var(--dim);font-size:1.02rem}
.hero .btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 28px;border:1px solid var(--gold);color:var(--gold2);text-decoration:none;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;transition:all .25s;text-align:center;max-width:100%}
.btn:hover{background:var(--gold);color:#1a1a1e}
.btn.ghost{border-color:var(--line);color:var(--dim)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold2);background:none}

/* stats strip */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel);width:100%}
.stats .wrap{display:flex;justify-content:space-around;flex-wrap:wrap;gap:20px;padding:30px 24px}
.stat{text-align:center}
.stat .n{font-size:1.7rem;color:var(--gold2)}
.stat .l{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:4px}

/* sections */
section{padding:84px 0;width:100%}
.kicker{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:normal;letter-spacing:.02em;margin-bottom:30px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px}
.kaart{background:var(--panel);border:1px solid var(--line);padding:30px 26px;transition:border-color .25s}
.kaart:hover{border-color:var(--gold)}
.kaart h3{font-size:1.05rem;font-weight:normal;color:var(--gold2);margin-bottom:10px;letter-spacing:.04em}
.kaart p{color:var(--dim);font-size:.92rem;line-height:1.6}
.kaart .tag{display:inline-block;margin-top:16px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);padding:4px 10px}

/* familie grid */
.lid h3{font-size:1.15rem;font-weight:normal;color:var(--gold2);margin-bottom:10px;letter-spacing:.04em}
.lid p{color:var(--dim);font-size:.92rem;line-height:1.65}

/* case */
.case{background:var(--panel);border:1px solid var(--line);padding:34px}
.case .cijfer{font-size:2rem;color:var(--gold2)}
.case ul{margin:18px 0 0 18px;color:var(--dim);font-size:.94rem}
.case ul li{margin-bottom:8px}

/* contact */
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:8px}
.wa{display:inline-flex;align-items:center;gap:10px;background:#25d36622;border:1px solid #25d36655;color:#7fe3a4;padding:14px 22px;text-decoration:none;letter-spacing:.08em;font-size:.85rem;transition:background .2s;max-width:100%}
.wa:hover{background:#25d36633}
.mail{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);color:var(--gold2);padding:14px 22px;text-decoration:none;letter-spacing:.08em;font-size:.85rem;max-width:100%}
.mail:hover{border-color:var(--gold)}

/* footer */
footer{border-top:1px solid var(--line);padding:34px 0;text-align:center;color:var(--dim);font-size:.8rem;letter-spacing:.08em;width:100%}
footer b{color:var(--gold)}

/* MOBIELE STIJLEN & BREAKPOINTS */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: border-box;
}

.mobile-actions { display: none; }
.mobile-drawer { display: none; }

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

@media (max-width: 860px) {
  .wrap { padding: 0 16px; width: 100%; max-width: 100%; box-sizing: border-box; }
  .nav { height: 64px; }
  .merk { font-size: 1.05rem; letter-spacing: .18em; }
  
  /* Hide desktop menu, show mobile header controls */
  .menu { display: none !important; }
  .mobile-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .mobile-cta {
    border: 1px solid var(--gold);
    color: var(--gold2);
    padding: 7px 12px;
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
    background: rgba(22, 21, 27, 0.6);
  }
  .mobile-hamburger {
    background: transparent;
    border: 1px solid rgba(176,141,87,.35);
    border-radius: 4px;
    width: 38px;
    height: 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 0;
  }
  .mobile-hamburger span {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--gold2);
    transition: all .2s;
  }

  /* Fullscreen luxury mobile drawer */
  .mobile-drawer {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 12, 16, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 999999;
    padding: 20px 24px;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease;
  }
  .mobile-drawer.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }
  .drawer-close {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--dim);
    font-size: 1.25rem;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .drawer-close:hover {
    border-color: var(--gold);
    color: #fff;
  }
  .drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .drawer-link {
    font-size: 1.15rem;
    font-family: Georgia, serif;
    color: #fff;
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .drawer-link:hover {
    color: var(--gold2);
  }
  .drawer-divider {
    height: 1px;
    background: var(--line);
    margin: 8px 0;
  }
  .drawer-gh {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dim);
    text-decoration: none;
    font-size: .88rem;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
  }
  .drawer-gh svg { width: 16px; height: 16px; fill: currentColor; }
  .drawer-cta {
    background: var(--gold);
    color: #121116 !important;
    text-align: center;
    padding: 14px;
    font-family: sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .85rem;
    border-radius: 4px;
    margin-top: 4px;
  }
  .drawer-wa {
    background: rgba(37,211,102,.12);
    border: 1px solid rgba(37,211,102,.4);
    color: #7fe3a4;
    text-align: center;
    padding: 12px;
    font-size: .85rem;
    border-radius: 4px;
    text-decoration: none;
  }

  /* Hero & Headings */
  .hero { padding: 110px 0 60px; }
  .hero h1 { font-size: 1.65rem; line-height: 1.3; margin-bottom: 18px; word-break: normal; }
  .hero p { font-size: .94rem; line-height: 1.6; margin-bottom: 24px; }
  .hero .btns { flex-direction: column; gap: 12px; width: 100%; }
  .hero .btns .btn { width: 100%; padding: 13px 18px; text-align: center; }
  .desktop-br { display: none; }

  /* Stats grid */
  .stats .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
    padding: 20px 16px;
  }
  .stat .n { font-size: 1.4rem; }
  .stat .l { font-size: .65rem; }

  /* General Grids & Cards */
  section { padding: 50px 0; }
  .grid4, .grid3, .grid2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
  }
  .kaart, .case, .codex-card, .roadmap-card, .arch-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 22px 18px !important;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Tables on mobile */
  .matrix-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* Floating widget spacing */
  body { padding-bottom: 40px; }
}