:root{
  --bg:#f6f7fb;
  --surface:#ffffff;
  --surface-soft:#fbfcff;

  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;

  --brand:#2563eb;
  --brand-soft:rgba(37,99,235,.12);

  --radius:18px;
  --max:1100px;

  --shadow:0 10px 30px rgba(15,23,42,.08);
  --shadow-soft:0 6px 18px rgba(15,23,42,.06);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(99,102,241,.08), transparent 60%),
    var(--bg);
  color:var(--text);
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:24px;
}

/* header */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(246,247,251,.8);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:-.2px;
}
.dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--brand);
  box-shadow:0 0 0 4px var(--brand-soft);
}
.badge{
  font-size:13px;
  color:var(--muted);
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
}

.links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.links a{
  padding:8px 10px;
  border-radius:12px;
  color:var(--muted);
}
.links a:hover{
  background:var(--surface);
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--text);
}

/* hero */
.hero{
  padding:36px 0 14px;
}
.h1{
  font-size:42px;
  line-height:1.05;
  margin:0 0 12px;
  letter-spacing:-.8px;
}
.p{
  max-width:70ch;
  color:var(--muted);
  margin:0 0 20px;
  line-height:1.6;
}

.cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-soft);
}
.btn.primary{
  background:linear-gradient(135deg, var(--brand-soft), rgba(99,102,241,.10));
  border-color:rgba(37,99,235,.25);
}
.btn:hover{
  filter:brightness(1.03);
  text-decoration:none;
}

.hr{
  height:1px;
  background:var(--border);
  margin:20px 0;
}

/* grid */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
  margin:18px 0 36px;
}

.card{
  grid-column:span 6;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg,#fff,#f9fafb);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card:hover{
  box-shadow:0 18px 40px rgba(15,23,42,.12);
}
@media (max-width:900px){
  .card{ grid-column:span 12; }
  .h1{ font-size:32px; }
}

.cover{
  width:100%;
  height:170px;
  object-fit:cover;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg, var(--brand-soft), rgba(99,102,241,.10));
}

.content{
  padding:16px;
}

.kicker{
  font-size:13px;
  color:var(--muted);
  margin:0 0 6px;
}
.title{
  font-size:18px;
  margin:0 0 10px;
  letter-spacing:-.2px;
}

.tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 12px;
}
.tag{
  font-size:12px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  color:#334155;
}

.meta{
  font-size:14px;
  color:var(--muted);
  line-height:1.5;
}

/* project page */
.page{
  padding:28px 0 10px;
}
.page h1{
  font-size:30px;
  margin:0 0 10px;
  letter-spacing:-.5px;
}
.page h2{
  font-size:18px;
  margin:22px 0 8px;
}
.page p{
  color:var(--muted);
  line-height:1.6;
  margin:0 0 12px;
}
.page ul{
  padding-left:18px;
  color:var(--muted);
  line-height:1.7;
}

.panel{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  padding:14px;
  box-shadow:var(--shadow-soft);
}

.gallery{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
  margin-top:14px;
}
.shot{
  grid-column:span 6;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}
@media (max-width:900px){
  .shot{ grid-column:span 12; }
}
.shot img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}

.footer{
  border-top:1px solid var(--border);
  padding:20px 0 30px;
  color:var(--muted);
  font-size:13px;
}

.small{
  font-size:13px;
  color:var(--muted);
}
/* categorie blokje */
.category-title{
  font-weight:800;
  letter-spacing:-.2px;
}
.filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:14px 0 18px;
}

.filter-btn{
  cursor:pointer;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--muted);
  box-shadow:var(--shadow-soft);
  font: inherit;
}

.filter-btn:hover{
  filter:brightness(1.03);
  color:var(--text);
}

.filter-btn.active{
  color:var(--text);
  border-color:rgba(37,99,235,.28);
  background:linear-gradient(135deg, var(--brand-soft), rgba(99,102,241,.10));
}

.category-wrap{ margin-top:22px; }
.category-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.hidden{ display:none !important; }


.modules{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
  margin-top:12px;
}
.module{
  grid-column:span 6;
}
@media (max-width:900px){
  .module{ grid-column:span 12; }
}
.module .title{
  margin:0 0 8px;
}
.module .meta{
  margin:0 0 10px;
}