:root{ --teal:#1B8A8F; --ink:#1c2b2b; --grijs:#5b6b6b; --zacht:#f4f7f6; --lijn:#e3ebe9; --oranje:#E8833A; }
  *{box-sizing:border-box}
  body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);line-height:1.55}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  header{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--lijn)}
  .logo{font-weight:bold;letter-spacing:.5px;color:var(--teal);font-size:20px}
  nav a{color:var(--grijs);text-decoration:none;margin-left:20px;font-size:14px}
  nav a.login{border:1px solid var(--lijn);border-radius:20px;padding:6px 14px;color:var(--teal);font-weight:bold}
  .lang{border:1px solid var(--lijn);border-radius:20px;padding:4px 10px;color:var(--grijs);font-size:13px}
  .btn{display:inline-block;background:var(--teal);color:#fff;text-decoration:none;padding:14px 26px;border-radius:30px;font-weight:bold;font-size:16px}
  .btn.ghost{background:#fff;color:var(--teal);border:2px solid var(--teal)}
  /* HERO */
  .hero{padding:70px 0 60px;text-align:center;background:linear-gradient(180deg,#fff, var(--zacht))}
  .hero .eyebrow{color:var(--oranje);font-weight:bold;letter-spacing:1px;text-transform:uppercase;font-size:13px}
  .hero h1{font-size:44px;line-height:1.15;margin:14px auto 18px;max-width:820px}
  .hero p.sub{font-size:20px;color:var(--grijs);max-width:720px;margin:0 auto 30px}
  .hero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .mini{color:var(--grijs);font-size:13px;margin-top:16px}
  /* narratief */
  section.step{padding:56px 0;border-bottom:1px solid var(--lijn)}
  .step .q{color:var(--oranje);font-weight:bold;font-size:14px;letter-spacing:.5px;text-transform:uppercase}
  .step h2{font-size:30px;margin:8px 0 14px;max-width:760px}
  .step p{font-size:18px;color:var(--grijs);max-width:760px;margin:0}
  .step.alt{background:var(--zacht)}
  /* uitleg 3 beelden */
  .drie{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
  .kaart{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:22px}
  .kaart h3{margin:0 0 6px;color:var(--teal);font-size:18px}
  .kaart p{font-size:15px}
  /* contrast */
  .versus{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--lijn);border-radius:14px;overflow:hidden;margin-top:26px}
  .versus>div{padding:24px}
  .versus .oud{background:#fff}
  .versus .mis{background:var(--teal);color:#fff}
  .versus h4{margin:0 0 10px;font-size:16px}
  .versus ul{margin:0;padding-left:18px;font-size:15px}
  /* trust */
  .trust{padding:56px 0;text-align:center}
  .trust h2{font-size:30px;margin-bottom:8px}
  .pijlers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
  .pijler{padding:18px;border:1px solid var(--lijn);border-radius:14px;background:#fff}
  .pijler .big{font-size:26px;color:var(--teal);font-weight:bold}
  .pijler p{font-size:14px;color:var(--grijs);margin:6px 0 0}
  /* eerste stap */
  .stap{background:var(--ink);color:#fff;padding:64px 0;text-align:center}
  .stap h2{font-size:32px;margin:0 0 12px}
  .stap p{color:#cfe0de;max-width:640px;margin:0 auto 26px;font-size:18px}
  footer{padding:36px 0;color:var(--grijs);font-size:14px;text-align:center}
  /* video */
  .video{padding:56px 0;text-align:center;background:var(--zacht)}
  .video h2{font-size:30px;margin-bottom:8px}
  .video .players{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
  .player{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0d1b1b;border:1px solid var(--lijn);display:flex;align-items:center;justify-content:center}
  .player .play{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center}
  .player .play::after{content:'';border-left:20px solid var(--teal);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
  .player .label{position:absolute;bottom:12px;left:14px;color:#fff;font-weight:bold;font-size:14px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
  .embed-note{font-size:12px;color:var(--grijs);margin-top:14px}
  /* instagram */
  .ig{padding:56px 0;text-align:center}
  .ig h2{font-size:30px}
  .ig .feed{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
  .ig .post{aspect-ratio:1;border-radius:12px;background:var(--zacht);border:1px dashed var(--lijn);display:flex;align-items:center;justify-content:center;color:var(--grijs);font-size:13px;text-align:center;padding:8px}
  /* bewijs-strip */
  .proof{background:#fff;border-bottom:1px solid var(--lijn);padding:22px 0}
  .proofrow{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;text-align:center}
  .proofrow>div{flex:1;min-width:150px}
  .proofrow .n{display:block;font-weight:bold;color:var(--teal);font-size:20px}
  .proofrow .l{color:var(--grijs);font-size:13px}
  /* zones (groen/geel/rood) */
  .zones{display:flex;gap:8px;max-width:540px;margin:20px auto 0}
  .zones .z{flex:1;text-align:center;padding:11px 6px;border-radius:8px;color:#fff;font-weight:bold;font-size:14px}
  .z.rood{background:#C0324B}.z.oranje{background:#E8833A}.z.groen{background:#1B8A8F}
  /* thema-chips */
  .themes{padding:52px 0;text-align:center;border-bottom:1px solid var(--lijn)}
  .themes h2{font-size:30px;margin-bottom:6px}
  .themes .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:840px;margin:22px auto 0}
  .themes .chip{background:#fff;border:1px solid var(--lijn);border-radius:20px;padding:8px 14px;font-size:14px;color:var(--ink)}
  .themes .chip.kern{border-color:var(--teal);color:var(--teal);font-weight:bold}
  /* COCKPIT-TEASER */
  .cockpit{padding:60px 0;background:#0d1b1b;color:#fff;text-align:center}
  .cockpit h2{font-size:30px;margin-bottom:8px}
  .cockpit .lead{color:#a9c6c3;max-width:640px;margin:0 auto 30px}
  .dash{max-width:640px;margin:0 auto;background:#0f2a29;border:1px solid #1f4a47;border-radius:18px;padding:24px;text-align:left;box-shadow:0 20px 60px rgba(0,0,0,.35)}
  .dashhead{color:#8fe3dd;font-weight:bold;font-size:14px;margin-bottom:18px;display:flex;align-items:center;gap:9px}
  .dashhead .dot{width:10px;height:10px;border-radius:50%;background:#37d0c5;box-shadow:0 0 0 4px rgba(55,208,197,.2)}
  .drow{display:flex;align-items:center;gap:14px;margin:14px 0}
  .drow .rl{width:150px;font-size:14px;color:#dfece9;flex-shrink:0}
  .drow .bar{position:relative;flex:1;height:12px;border-radius:8px;background:linear-gradient(90deg,#C0324B,#E8833A,#1B8A8F)}
  .drow .bar i{position:absolute;top:-4px;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #0f2a29;box-shadow:0 1px 5px rgba(0,0,0,.6);transform:translateX(-50%)}
  .hh{margin-top:20px;background:#12726B;border-radius:14px;padding:13px 16px;font-size:14px;color:#eafffb;display:flex;gap:10px;align-items:flex-start}
  .hh b{color:#bafff4}
  .kijk{color:#8fb8b3;font-size:13px;margin-top:18px}
  /* PRIJZEN */
  .prijzen{padding:60px 0;text-align:center}
  .prijzen h2{font-size:30px;margin-bottom:6px}
  .prijzen .lead{color:var(--grijs);max-width:640px;margin:0 auto}
  .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px;align-items:stretch}
  .pcard{background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:28px 22px;text-align:left;display:flex;flex-direction:column}
  .pcard.pop{border:2px solid var(--teal);box-shadow:0 10px 34px rgba(27,138,143,.16);position:relative}
  .pcard .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--teal);color:#fff;font-size:12px;font-weight:bold;padding:5px 15px;border-radius:20px;white-space:nowrap}
  .pcard h3{color:var(--teal);font-size:20px;margin:0 0 2px}
  .pcard .ptag{color:var(--grijs);font-size:13px;font-style:italic;margin-bottom:16px}
  .pcard .price{font-size:32px;font-weight:bold;margin-bottom:2px;color:var(--ink)}
  .pcard .per{color:var(--grijs);font-size:13px;margin-bottom:18px}
  .pcard ul{list-style:none;padding:0;margin:0 0 22px;font-size:14px;color:var(--ink)}
  .pcard li{padding:7px 0 7px 26px;position:relative}
  .pcard li::before{content:'✓';position:absolute;left:0;color:var(--teal);font-weight:bold}
  .pcard .btn{margin-top:auto;text-align:center;font-size:15px;padding:13px 22px}
  .byod{margin-top:22px;color:var(--ink);font-size:15px;background:var(--zacht);border:1px solid var(--lijn);border-radius:14px;padding:16px 20px;max-width:680px;margin-left:auto;margin-right:auto}
  .promo{margin-top:22px;color:var(--oranje);font-size:14px;font-weight:bold}
  .stepband{display:inline-block;background:var(--ink);color:#fff;font-weight:bold;font-size:15px;padding:8px 20px;border-radius:24px;margin:34px 0 18px}
  .pgrid.two{grid-template-columns:1fr 1fr;max-width:760px;margin-left:auto;margin-right:auto}
  .arrowdown{color:var(--grijs);font-size:15px;font-weight:bold;margin:26px 0 0}
  @media(max-width:760px){.pgrid.two{grid-template-columns:1fr}}
  @media(max-width:760px){.tmgrid{grid-template-columns:1fr}.qwgrid{grid-template-columns:1fr}}
  @media(max-width:760px){.drie,.versus,.pijlers,.pgrid{grid-template-columns:1fr}.hero h1{font-size:32px}.video .players{grid-template-columns:1fr}.ig .feed{grid-template-columns:1fr 1fr}.drow .rl{width:110px}}
  /* testimonials */
  .tm{padding:56px 0;background:var(--zacht)}
  .tm h2{text-align:center;font-size:30px;margin-bottom:8px}
  .tm .lead{text-align:center;color:var(--grijs);max-width:640px;margin:0 auto 26px}
  .tmgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .tmcard{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:22px}
  .tmcard p{font-size:16px;margin:0 0 12px;line-height:1.5}
  .tmcard .who{font-weight:bold;color:var(--teal);font-size:14px}
  .tmcard .role{color:var(--grijs);font-size:13px}
  .vertrouwd{text-align:center;color:var(--grijs);margin-top:20px;font-size:14px;font-weight:bold}
  /* quote-wall (dagelijkse overwinningen) */
  .qw{padding:50px 0}
  .qw h3{text-align:center;font-size:22px;margin-bottom:24px}
  .qwgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .qwq{background:var(--teal);color:#fff;border-radius:12px;padding:18px;font-size:16px;font-style:italic;line-height:1.4}

/* ===== gedeeld: doelgroeppagina's, boeken, podcast, reach ===== */
.ahero{padding:64px 0 52px;text-align:center;background:linear-gradient(180deg,#fff,var(--zacht));border-bottom:1px solid var(--lijn)}
.ahero .eyebrow{color:var(--oranje);font-weight:bold;letter-spacing:1px;text-transform:uppercase;font-size:13px}
.ahero h1{font-size:40px;line-height:1.15;margin:12px auto 16px;max-width:820px}
.ahero p.sub{font-size:19px;color:var(--grijs);max-width:720px;margin:0 auto 26px}
.sec{padding:52px 0;border-bottom:1px solid var(--lijn)}
.sec .q{color:var(--oranje);font-weight:bold;font-size:14px;letter-spacing:.5px;text-transform:uppercase}
.sec h2{font-size:28px;margin:8px 0 14px;max-width:760px}
.sec p{font-size:17px;color:var(--grijs);max-width:820px}
.sec.alt{background:var(--zacht)}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
.card{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:22px}
.card h3{margin:0 0 6px;color:var(--teal);font-size:18px}
.card p{font-size:15px;margin:0;color:var(--grijs)}
.ctaband{background:var(--ink);color:#fff;padding:56px 0;text-align:center}
.ctaband h2{font-size:30px;margin:0 0 12px}
.ctaband p{color:#cfe0de;max-width:640px;margin:0 auto 24px;font-size:18px}
.note{font-size:13px;color:var(--grijs);margin-top:16px;font-style:italic}
/* reach band */
.reach{background:var(--teal);color:#fff;text-align:center;padding:14px 0;font-size:15px;font-weight:bold;letter-spacing:.3px}
/* boeken & podcast */
.media{padding:56px 0;text-align:center}
.media h2{font-size:30px;margin-bottom:8px}
.media .lead{color:var(--grijs);max-width:640px;margin:0 auto}
.books{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.book{background:#fff;border:1px solid var(--lijn);border-radius:14px;overflow:hidden;text-align:left}
.book .cover{height:140px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:bold;font-size:22px;letter-spacing:2px}
.book .binfo{padding:16px 18px}
.book h3{margin:0 0 4px;color:var(--ink);font-size:18px}
.book p{margin:0;color:var(--grijs);font-size:14px}
.podcast{margin-top:28px;background:var(--zacht);border:1px solid var(--lijn);border-radius:14px;padding:22px;display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}
.podcast .pl{width:54px;height:54px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.podcast .pt{text-align:left;max-width:460px}
.podcast .pt strong{color:var(--ink)}
@media(max-width:760px){.cards3,.cards2,.books{grid-template-columns:1fr}.ahero h1{font-size:30px}}

.logo img{height:30px;width:auto;display:block}
.logo a{display:inline-block;line-height:0}

.pgrid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.pgrid.four{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pgrid.four{grid-template-columns:1fr}}

/* Chip-subtitel (wetenschappelijke naam klein) */
.chip small{display:block;font-size:11px;font-weight:normal;opacity:.55;margin-top:2px}

/* De trap / onboarding */
.stair{padding:60px 0;background:var(--zand,#faf7f2);text-align:center}
.stair h2{margin-bottom:8px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left;max-width:1000px;margin:0 auto}
.step{display:block;background:#fff;border:1px solid #e7e2d8;border-radius:14px;padding:20px 18px;text-decoration:none;color:inherit;transition:.15s;position:relative}
.step:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.08);border-color:var(--teal)}
.step .sn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--teal);color:#fff;font-weight:bold;font-size:14px;margin-bottom:10px}
.step b{display:block;font-size:16px;margin-bottom:6px}
.step span{display:block;color:var(--grijs);font-size:13px;line-height:1.5}
.step em{display:inline-block;margin-top:12px;color:var(--teal);font-style:normal;font-weight:bold;font-size:14px}
.step.highlight{background:linear-gradient(135deg,#eafaf6,#fff);border-color:var(--teal)}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* Waarom-blok */
.why{padding:56px 0;background:#0f2e2a;color:#fff;text-align:center}
.why .q{color:var(--teal,#2fb8a0);font-weight:bold;letter-spacing:.5px;text-transform:uppercase;font-size:13px;margin-bottom:6px}
.why h2{color:#fff;margin:0 0 14px}
.why p{max-width:680px;margin:0 auto;font-size:17px;line-height:1.7;opacity:.92}

/* Duo: HostHero + OSCAR */
.duo{padding:56px 0}
.duogrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:920px;margin:0 auto}
.duocard{background:#fff;border:1px solid #e7e2d8;border-radius:16px;padding:26px}
.duocard .ico{font-size:30px;margin-bottom:10px}
.duocard h3{margin:0 0 8px;font-size:19px}
.duocard p{color:var(--grijs);line-height:1.6;margin:0}
@media(max-width:760px){.duogrid{grid-template-columns:1fr}}

/* Ecosysteem */
.eco{padding:56px 0;background:var(--zand,#faf7f2);text-align:center}
.eco .q{color:var(--teal,#2fb8a0);font-weight:bold;letter-spacing:.5px;text-transform:uppercase;font-size:13px;margin-bottom:6px}
.ecogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:960px;margin:0 auto;text-align:left}
.ecocard{display:block;background:#fff;border:1px solid #e7e2d8;border-radius:14px;padding:20px;text-decoration:none;color:inherit;transition:.15s}
.ecocard:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.08);border-color:var(--teal)}
.ecocard .ei{font-size:26px;display:block;margin-bottom:8px}
.ecocard b{display:block;margin-bottom:4px}
.ecocard span{display:block;color:var(--grijs);font-size:13px;line-height:1.5}
@media(max-width:760px){.ecogrid{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.ecogrid{grid-template-columns:1fr}}

/* Merkbelofte-band */
.promise{background:var(--teal,#2fb8a0);color:#fff;text-align:center;padding:16px 0}
.promise .wrap{font-size:20px;font-weight:bold;letter-spacing:.3px}
@media(max-width:600px){.promise .wrap{font-size:17px}}

/* HostHero-avatar in duocard */
/* HostHero-figuur */
.herohead{width:120px;height:120px;border-radius:50%;margin-bottom:12px;display:block}
/* OSCAR-badge: donkere 'stille intelligentie' met sterrenveld */
.oscarbadge{width:120px;height:120px;border-radius:50%;margin-bottom:12px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 25%,#1a4d5c,#0f2e2a);
  box-shadow:inset 0 0 0 4px #0f2e2a, 0 0 0 3px #2fb8a0;position:relative;overflow:hidden}
.oscarbadge::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(#7fe3d0 1px,transparent 1px),radial-gradient(#7fe3d0 1px,transparent 1px);
  background-size:22px 22px,34px 34px;background-position:0 0,11px 17px;opacity:.35}
.oscarbadge span{position:relative;color:#eafaf6;font-weight:bold;letter-spacing:2px;font-size:18px}

/* Bestel-nu tussenband */
.buynow{background:linear-gradient(135deg,#eafaf6,#fff);border-top:1px solid #d9efe9;border-bottom:1px solid #d9efe9;padding:22px 0}
.buynow .wrap{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;text-align:center}
.buynow span{font-size:18px;font-weight:bold;color:#0f2e2a}
.buynow .btn{margin:0}

/* HostHero-figuurtjes als ecosysteem-iconen */
.ei-img{width:76px;height:76px;border-radius:50%;display:block;margin-bottom:10px}

/* ===== WARME HERO (sfeer) ===== */
.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#f6f1e8 0%,#eafaf6 55%,#dcf1ec 100%);padding:64px 0 60px}
.hero .blob{position:absolute;border-radius:50%;z-index:0;filter:blur(6px)}
.hero .blob.b1{width:360px;height:360px;background:radial-gradient(circle at 35% 35%,#7fe3d0,#2fb8a0);top:-110px;right:-70px;opacity:.22}
.hero .blob.b2{width:240px;height:240px;background:radial-gradient(circle at 35% 35%,#f5a3c7,#f5d24e);bottom:-70px;left:-40px;opacity:.20}
.hero .blob.b3{width:150px;height:150px;background:radial-gradient(circle at 35% 35%,#6fd0e8,#378add);top:40%;left:52%;opacity:.14}
.hero .wrap{position:relative;z-index:1}
.herogrid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;text-align:left}
.herotext{text-align:left}
.herotext h1{text-align:left}
.hero .cta-row{justify-content:flex-start}
.hero .mini{text-align:left}
/* Video-kaart als pronkstuk */
.herovideo{display:flex;flex-direction:column;align-items:center;gap:12px}
.videocard{position:relative;width:100%;aspect-ratio:16/10;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-decoration:none;color:#fff;padding:26px;overflow:hidden;background:linear-gradient(135deg,#0f2e2a 0%,#12564a 55%,#1a6f7f 100%);box-shadow:0 24px 60px rgba(15,46,42,.28);transition:transform .15s}
.videocard:hover{transform:translateY(-3px)}
.videocard::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#f5a3c7,#f5d24e);opacity:.18;bottom:-50px;right:-40px}
.videocard .playbtn{width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;font-size:26px;padding-left:5px;position:relative;z-index:1}
.videocard .vcap{font-size:15px;max-width:270px;text-align:center;line-height:1.5;position:relative;z-index:1}
.vsub{color:var(--grijs);font-size:13px}
@media(max-width:820px){.herogrid{grid-template-columns:1fr;gap:30px}.herotext,.herotext h1,.hero .cta-row,.hero .mini{text-align:center;justify-content:center}}

/* Zachtere, warmere kaarten globaal */
.kaart,.duocard,.step,.pcard,.ecocard{border-radius:16px}

/* Echte video in hero */
.herovid{width:100%;border-radius:22px;box-shadow:0 24px 60px rgba(15,46,42,.28);background:#0f2e2a;display:block;aspect-ratio:16/10;object-fit:cover}
/* App-sectie */
.appsec{padding:64px 0;background:linear-gradient(160deg,#eafaf6,#f6f1e8)}
.appgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.appimg img{width:100%;max-width:540px;display:block;margin:0 auto}
.apptext h2{margin:6px 0 12px}
.apptext p{color:var(--grijs);line-height:1.7;max-width:470px}
.stores{display:flex;gap:14px;align-items:center;margin-top:20px;flex-wrap:wrap}
.stores img{height:46px;width:auto}
@media(max-width:820px){.appgrid{grid-template-columns:1fr}}

/* sticky navigatie */
.sticktop{position:sticky;top:0;z-index:1000;background:#fff;max-width:none;margin:0;box-shadow:0 1px 10px rgba(15,46,42,.07)}
.sticktop>header{max-width:1080px;margin:0 auto;padding:14px 24px}
@media(max-width:820px){footer>div{grid-template-columns:1fr 1fr !important}}
@media(max-width:520px){footer>div{grid-template-columns:1fr !important}}