/* Marga - Websites voor artiesten. Stijl geent op mase.agency (donker, blauw, Barlow). */
:root{
  --blue:#3333ff; --blue2:#6666ff; --blue3:#9999ff;
  --bg:#000005; --card:#0c0c14; --line:rgba(255,255,255,.09);
  --txt:#fff; --mut:#9a9ab4;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Barlow',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--txt); line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; padding-bottom:70px;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
h1,h2,h3{font-weight:800; letter-spacing:-.01em}

/* Achtergrondgloed */
.orbs{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.orb{position:absolute; border-radius:50%; filter:blur(75px); opacity:.5}
.o1{width:320px; height:320px; background:var(--blue); top:-60px; left:6%}
.o2{width:260px; height:260px; background:var(--blue2); top:10%; left:46%; opacity:.4}
.o3{width:300px; height:300px; background:var(--blue); top:0; right:4%; opacity:.45}
.o4{width:260px; height:260px; background:var(--blue3); top:60%; left:4%; opacity:.3}
@media(max-width:640px){ .orb{filter:blur(55px); opacity:.32!important} }
main{position:relative; z-index:1}

/* Topbalk */
.top{position:sticky; top:0; z-index:40; background:rgba(0,0,5,.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.01em}
.brand .dot{width:9px; height:9px; border-radius:50%; background:var(--blue)}
.nav{display:flex; gap:22px; align-items:center}
.nav a{color:var(--mut); font-weight:600; font-size:14.5px}
.nav a:hover, .nav a.actief{color:#fff}
.nav .cta{background:var(--blue); color:#fff; padding:9px 18px; border-radius:10px; font-weight:700}
.nav .cta:hover{background:var(--blue2)}
@media(max-width:760px){ .nav a:not(.cta){display:none} }

/* Eyebrow / sectiekoppen */
.eyebrow{color:var(--blue3); font-size:12.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; margin-bottom:18px}
.sect-h{text-align:center; margin:70px 0 6px; font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--blue3)}
.sect-t{text-align:center; font-size:clamp(24px,3.4vw,34px); font-weight:800; margin-bottom:28px}

/* Hero */
.hero{padding:76px 0 46px; text-align:center; max-width:880px; margin:0 auto}
.hero h1{font-size:clamp(38px,6.6vw,66px); line-height:1.04}
.hero h1 .b{color:var(--blue2)}
.sub{max-width:640px; margin:24px auto 0; color:var(--mut); font-size:clamp(16px,2vw,19px)}
.cta-rij{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px}
.btn{display:inline-flex; align-items:center; gap:9px; padding:14px 26px; border-radius:12px; font-weight:700; font-size:15px; transition:.18s; cursor:pointer; border:0; font-family:inherit}
.btn.p{background:var(--blue); color:#fff}
.btn.p:hover{background:#4a4aff; transform:translateY(-2px)}
.btn.g{background:transparent; color:#fff; border:1px solid var(--line)}
.btn.g:hover{border-color:var(--blue2)}
.btn svg{width:17px; height:17px}

/* Paginakop (subpagina's) */
.paginakop{padding:56px 0 10px; text-align:center}
.paginakop h1{font-size:clamp(30px,5vw,48px)}

/* Kaarten / grid */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:820px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .grid{grid-template-columns:1fr} }
.m{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px; transition:.18s}
.m:hover{transform:translateY(-3px); border-color:rgba(102,102,255,.6); background:#101020}
.m .ic{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--blue); margin-bottom:16px}
.m .ic svg{width:21px; height:21px; stroke:#fff}
.m h3{font-size:18px; margin-bottom:7px}
.m p{color:var(--mut); font-size:14.5px}

/* Stappen (werkwijze) */
.stappen{display:grid; gap:16px; margin:24px 0 10px}
.stap{display:flex; gap:20px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px}
.stap .nr{flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--blue); display:flex; align-items:center; justify-content:center; font-weight:800}
.stap h3{font-size:18px; margin-bottom:6px}
.stap p{color:var(--mut); font-size:14.5px}

/* Band / oproep */
.band{margin:50px 0; padding:38px 32px; border:1px solid rgba(102,102,255,.3); border-radius:22px; background:linear-gradient(120deg,rgba(51,51,255,.12),rgba(102,102,255,.04)); text-align:center}
.band h2{font-size:clamp(22px,3.2vw,30px); margin-bottom:10px}
.band p{color:var(--mut); max-width:560px; margin:0 auto 22px}

/* Vertrouwd-strip */
.strip{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:60px 0}
@media(max-width:640px){ .strip{grid-template-columns:1fr} }
.stat{border:1px solid var(--line); border-radius:16px; padding:22px; text-align:center; background:rgba(255,255,255,.02)}
.stat b{display:block; font-size:21px; margin-bottom:4px}
.stat span{color:var(--mut); font-size:13px}

/* Tekstpagina's (privacy) */
.prose{max-width:720px; margin:0 auto; color:#d7d7ea}
.prose h3{font-size:17px; margin:22px 0 8px; color:#fff}
.prose p{margin-bottom:14px; font-size:15px}
.prose a{color:var(--blue3); text-decoration:underline}

/* Contactkaart */
.contactkaart{max-width:560px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:34px; text-align:center}
.contactkaart p{color:var(--mut); margin-bottom:22px}

/* Footer */
footer{border-top:1px solid var(--line); margin-top:70px; padding:40px 0 30px; color:var(--mut); font-size:13px}
footer .cols{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px}
footer b{color:#fff}
footer .links a{color:var(--mut); margin-right:16px}
footer .links a:hover{color:#fff}
footer .dot{color:var(--blue2)}

/* Mobiele onderbalk */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:45; display:none; background:rgba(12,12,20,.95); backdrop-filter:blur(10px); border-top:1px solid var(--line)}
.tabbar .rij{display:flex; justify-content:space-around; padding:8px 4px calc(6px + env(safe-area-inset-bottom))}
.tabbar a{display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--mut); font-size:11px; font-weight:600; padding:6px 10px}
.tabbar a.actief{color:var(--blue3)}
.tabbar svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:2}
@media(max-width:760px){ .tabbar{display:block} body{padding-bottom:78px} }

/* Cookiebalk: privacyvriendelijk, weigeren staat vooraan */
.cookiebar{position:fixed; left:0; right:0; bottom:0; z-index:60; background:#0c0c14; border-top:1px solid var(--line); padding:16px 20px; display:none; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; font-size:13.5px; color:var(--mut)}
.cookiebar.toon{display:flex}
.cookiebar a{color:var(--blue3); text-decoration:underline}
.cookiebar .rij{display:flex; gap:10px; flex-wrap:wrap}
.cookiebar .btn{padding:9px 16px; font-size:13.5px}
@media(max-width:760px){ .cookiebar{bottom:70px} }