:root {
           --color-bg: #f5f7fa;
           --color-surface: #ffffff;
           --color-primary: #0f6a77;
           --color-primary-dark: #1c575f;
           --color-primary-soft: #e0f0f2;
           --color-accent: #0f9fa8; /* heldere blauw */
           --color-text: #19212a;
           --color-muted: #6b7280;
           --color-warm: #e9ddcf;   /* lichtbruin */
           --radius-md: 8px;
           --shadow-soft: 0 18px 40px rgba(15, 38, 58, 0.12);
           --max-width: 1120px;
       }

       * {
           box-sizing: border-box;
       }

       html, body {
           margin: 0;
           padding: 0;
           font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
           color: var(--color-text);
           background: var(--color-bg);
       }

       img {
           max-width: 100%;
           display: block;
       }

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

       .page-wrap {
           min-height: 100vh;
           display: flex;
           flex-direction: column;
       }

       main {
           flex: 1;
       }

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

       h3 {
           font-size: 36px !important;
       }

       /* Header */

       header {
           position: sticky;
           top: 0;
           z-index: 40;
           backdrop-filter: blur(16px);
           background: rgba(245, 247, 250, 0.9);
           border-bottom: 1px solid rgba(15, 38, 58, 0.06);
       }
       @media (max-width: 900px) {
       	header {
           position: relative;
       }
       	
       }
       

       .header-inner {
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 14px 20px;
           max-width: var(--max-width);
           margin: 0 auto;
       }

       .brand {
           display: inline-flex;
           align-items: center;
           gap: 10px;
       }

       .brand-logo {
           height: 100px;
       }

       nav ul {
           list-style: none;
           display: flex;
           gap: 24px;
           margin: 0;
           padding: 0;
           align-items: center;
       }

       nav a {
           font-size: 18px;
           font-weight: 500;
           color: var(--color-primary);
       }

       nav a:hover {
           opacity: 0.8;
       }

       .nav-login {
           position: fixed;
           top: 0;
           right: 20px;
           z-index: 80;
           display: inline-flex;
           align-items: center;
           gap: 10px;
           padding: 14px 18px 16px;
           border-radius: 0 0 10px 10px;
           border: 1px solid #000000;
           font-size: 16px;
           font-weight: 600;
           background: #000000;
           color: #ffffff;
           text-transform: lowercase;
       }

       .nav-login img {
           width: 18px;
           height: 18px;
           object-fit: contain;
           filter: brightness(0) invert(1);
       }

       /* Hero */

       .hero {
           position: relative;
           color: #f9fafb;
           padding-top: 180px;
           padding-bottom: 200px;
           overflow: hidden;
           background-image:
               linear-gradient(120deg, rgba(5, 16, 24, 0.9), rgba(5, 16, 24, 0.6), rgba(5, 16, 24, 0.45)),
               url("images/bg.jpg");
           background-size: cover;
           background-position: center;
       }

       .hero-inner {
           max-width: var(--max-width);
           margin: 0 auto;
           padding: 0 20px;
           display: grid;
           grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
           gap: 40px;
           align-items: flex-start;
       }

       .hero-kicker {
           text-transform: uppercase;
           letter-spacing: 0.16em;
           font-size: 11px;
           font-weight: 600;
           opacity: 0.85;
           margin-bottom: 12px;
       }

       .hero-title {
           font-size: clamp(40px, 6vw, 60px);
           line-height: 1.1;
           font-weight: 700;
           margin-bottom: 16px;
       }

       .hero-subtitle {
           max-width: 520px;
           font-size: 15px;
           line-height: 1.6;
           opacity: 0.9;
           margin-bottom: 26px;
       }

       .hero-actions {
           display: flex;
           flex-wrap: wrap;
           gap: 12px;
           align-items: center;
       }

       .btn {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           padding: 10px 20px;
           border-radius: var(--radius-md);
           font-size: 14px;
           font-weight: 500;
           border: none;
           cursor: pointer;
           transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
           white-space: nowrap;
       }

       .btn-primary {
           background: var(--color-primary);
           color: #fff;
           box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
           padding: 20px 0;
           font-size: 30px;
       }

       .btn-primary-hero {
           background: #ffffff;
           color: var(--color-primary);
           padding: 10px 20px;
           font-size: 14px;
       }

       .btn-primary:hover {
           transform: translateY(-1px);
           box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
       }

       .btn-ghost {
           background: var(--color-primary);
           color: #e5f4f6;
       }

       .btn-ghost:hover {
           background: var(--color-primary-dark);
       }

       .hero-note {
           margin-top: 14px;
           font-size: 12px;
           opacity: 0.8;
       }

       .hero-card {
           background: rgba(10, 22, 34, 0.8);
           border-radius: var(--radius-md);
           padding: 20px 20px 18px;
           backdrop-filter: blur(12px);
           box-shadow: 0 22px 60px rgba(3, 10, 18, 0.7);
           margin-top: 70px;
       }

       .hero-card-title {
           font-size: 13px;
           text-transform: uppercase;
           letter-spacing: 0.18em;
           font-weight: 600;
           opacity: 0.9;
           margin-bottom: 10px;
       }

       .hero-card-text {
           font-size: 13px;
           line-height: 1.7;
           opacity: 0.9;
           margin-bottom: 12px;
       }

       .hero-card-tag {
           display: inline-flex;
           align-items: center;
           padding: 16px 19px;
           border-radius: var(--radius-md);
           font-size: 16px;
           border: 1px solid rgba(238, 250, 251, 0.4);
           color: #e9f7f8;
           opacity: 0.9;
       }

       /* Section base */

       section {
           padding: 68px 0;
       }

       .section-header {
           width: 1100px;
           margin: 0 auto 32px;
           text-align: left;
           max-width: 100%;
       }

       .section-kicker {
           text-transform: uppercase;
           letter-spacing: 0.14em;
           font-size: 11px;
           font-weight: 600;
           color: var(--color-muted);
           margin-bottom: 8px;
       }

       .section-title {
           font-size: 60px;
           line-height: 1.1;
           margin-bottom: 10px;
           color: var(--color-primary);
       }

       .section-title2 {
           font-size: 40px;
           line-height: 1.1;
           margin-bottom: 10px;
           color: var(--color-primary);
       }

       .section-lead {
           font-size: 14px;
           color: var(--color-muted);
           line-height: 1.7;
       }

       .section-grid-2 {
           display: grid;
           grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
           gap: 40px;
           align-items: start;
       }

       .text-block p {
           font-size: 14px;
           line-height: 1.8;
           margin: 0 0 14px;
           color: var(--color-text);
       }

       .card {
           background: var(--color-surface);
           border-radius: var(--radius-md);
           padding: 22px 22px 20px;
           box-shadow: var(--shadow-soft);
           border: 1px solid rgba(15, 38, 58, 0.06);
           margin-top: 70px;
       }

       .card p {
           margin: 0 0 12px;
           font-size: 14px;
           line-height: 1.7;
       }

       .tag-row {
           display: flex;
           flex-wrap: wrap;
           gap: 6px;
           margin-top: 6px;
       }

       .tag {
           font-size: 11px;
           padding: 4px 8px;
           border-radius: var(--radius-md);
           background: var(--color-primary);
           color: #fff;
       }

       /* Strook 2: hoe-werkt (lichtbruin) */

       #hoe-werkt {
           background: #fff;
           padding-bottom: 120px;
       }

       #hoe-werkt .card {
           background: #fff;
           margin-top: 70px;
       }

       /* Strook 3: vier feature-cards */

       #features {
           background: #ffffff;
           padding-bottom: 120px;
       }

       .features-grid {
           display: grid;
           grid-template-columns: repeat(4, minmax(0, 1fr));
           gap: 22px;
       }

       .feature-card {
           background: var(--color-surface);
           border-radius: var(--radius-md);
           padding: 18px 18px 16px;
           border: 1px solid rgba(15, 38, 58, 0.08);
           display: flex;
           flex-direction: column;
           gap: 8px;
           box-shadow: 0 10px 26px rgba(15, 38, 58, 0.08);
           width: 100%;
       }

       .feature-icon {
           width: 100px;
           aspect-ratio: 1/1;
           border-radius: 999px;
           background: var(--color-primary-soft);
           display: inline-flex;
           align-items: center;
           justify-content: center;
           font-size: 16px;
           font-weight: 600;
           color: var(--color-primary);
           margin: 0 auto 20px;
       }

       .feature-title {
           font-size: 16px;
           font-weight: 600;
           color: var(--color-primary);
           min-height: 40px;
       }

       .feature-text {
           font-size: 13px;
           line-height: 1.7;
           color: var(--color-text);
           min-height: 200px;
       }

       .feature-link {
           margin-top: 6px;
           width: 100%;
       }

       .btn-small {
           padding: 13px 14px;
           font-size: 14px;
           border-radius: var(--radius-md);
           width: 100%;
       }

       .demo-strip {
           background: var(--color-primary-dark);
           color: #ffffff;
           padding: 110px 0;
       }

       .demo-strip-inner {
           display: grid;
           grid-template-columns: minmax(0, 1.45fr) auto;
           gap: 28px;
           align-items: center;
       }

       .demo-strip-copy h2 {
           margin: 0 0 10px;
           font-size: clamp(30px, 4vw, 42px);
           line-height: 1.08;
           color: #ffffff;
       }

       .demo-strip-copy p {
           margin: 0;
           font-size: 15px;
           line-height: 1.75;
           color: rgba(255, 255, 255, 0.86);
           max-width: 74ch;
       }

       .demo-strip-action {
           display: flex;
           justify-content: flex-end;
       }

       .btn-demo {
           background: var(--color-primary-soft);
           color: var(--color-primary-dark);
           box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
       }

       .btn-demo:hover {
           background: #c6e6e9;
       }

       /* Strook 4: abonnementen (volle blauwe kleur) */

       #abonnementen {
           background: var(--color-primary);
           color: #f9fafb;
           padding-bottom: 120px;
        }

       #abonnementen .section-header {
           margin-bottom: 34px;
       }

       #abonnementen .section-kicker {
           color: #d9eef1;
       }

       #abonnementen .section-title {
           color: #ffffff;
       }

       #abonnementen .section-lead {
           color: rgba(255, 255, 255, 0.82);
       }

       #functionaliteiten {
           background: var(--color-warm);
           padding-bottom: 120px;
       }

       .pricing-grid {
           display: grid;
           grid-template-columns: repeat(4, minmax(0, 1fr));
           gap: 24px;
       }

       .pricing-toolbar {
           display: flex;
           justify-content: flex-end;
           margin: 0 0 24px;
       }

       .pricing-cycle-picker {
           display: grid;
           gap: 8px;
           min-width: 220px;
       }

       .pricing-cycle-picker label {
           font-size: 13px;
           font-weight: 600;
           color: rgba(255, 255, 255, 0.9);
       }

       .pricing-cycle-picker select {
           width: 100%;
           border: 1px solid rgba(255, 255, 255, 0.22);
           border-radius: 10px;
           padding: 12px 14px;
           font: inherit;
           color: #ffffff;
           background: rgba(255, 255, 255, 0.12);
       }

       .pricing-cycle-picker option {
           color: var(--color-text);
       }

       .pricing-card {
           position: relative;
           background: #ffffff;
           border-radius: 14px;
           padding: 24px 20px 20px;
           border: 1px solid rgba(255, 255, 255, 0.14);
           box-shadow: 0 24px 50px rgba(15, 34, 38, 0.06);
           display: flex;
           flex-direction: column;
           gap: 12px;
       }

       .pricing-head {
           display: flex;
           flex-wrap: wrap;
           align-items: flex-start;
           gap: 12px;
       }

       .pricing-icons {
           display: flex;
           flex: 0 0 auto;
           align-items: center;
           gap: 8px;
       }

       .pricing-icons img {
           width: 34px;
           height: auto;
       }

       .pricing-head-copy {
           min-width: 0;
           flex: 1 1 auto;
       }

       .pricing-card--featured {
           background: #f5fbfc;
           border-color: rgba(15, 106, 119, 0.16);
           box-shadow: 0 28px 56px rgba(8, 36, 48, 0.16);
       }

       .pricing-name {
           margin: 0 0 6px;
           font-weight: 600;
           font-size: 30px;
           line-height: 1.05;
           color: #193c42;
       }

       .pricing-tagline {
           margin: 0;
           font-size: 14px;
           line-height: 1.55;
           color: rgba(25, 60, 66, 0.78);
       }

       .pricing-price {
           font-size: 34px;
           font-weight: 700;
           line-height: 1;
           color: var(--color-primary);
           margin-top: 2px;
       }

       .pricing-price-prefix,
       .pricing-price-suffix {
           font-size: 16px;
           font-weight: 600;
       }

       .pricing-price-note {
           font-size: 12px;
           color: rgba(25, 60, 66, 0.66);
           margin-top: -2px;
       }

       .pricing-note {
           font-size: 13px;
           line-height: 1.7;
           color: rgba(25, 60, 66, 0.84);
       }

       .pricing-features {
           margin: 2px 0 10px;
           padding: 0;
           list-style: none;
       }

       .pricing-features li {
           font-size: 13px;
           line-height: 1.85;
           color: #193c42;
       }

       .pricing-cycle-note {
           font-size: 12px;
           line-height: 1.6;
           color: rgba(25, 60, 66, 0.62);
           font-style: italic;
       }

       .pricing-cycle-note span {
           display: block;
       }

       .pricing-footer {
           margin-top: auto;
       }

       .pricing-badge {
           position: absolute;
           top: -14px;
           right: 16px;
           font-size: 11px;
           padding: 8px 12px;
           border-radius: 12px;
           background: var(--color-primary-dark);
           color: #ffffff;
           white-space: nowrap;
       }

       .btn-light {
           background: var(--color-primary-dark);
           color: #ffffff;
           border: none;
       }

       .btn-light:hover {
           opacity: 0.9;
       }

       .btn-two {
           background: var(--color-primary-dark);
           color: #fff;
       }

       .btn-two:hover {
           opacity: 0.9;
       }

       .btn-outline-light {
           background: var(--color-accent);
           color: #ffffff;
           border: 1px solid rgba(255, 255, 255, 0.08);
       }

       .btn-outline-light:hover {
           background: var(--color-primary-dark);
       }

       .subscribe-strip {
           background: var(--color-accent);
           border-top: 1px solid rgba(15, 38, 58, 0.06);
           border-bottom: 1px solid rgba(15, 38, 58, 0.06);
           padding: 100px 0;
       }

       .subscribe-layout {
           display: grid;
           grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
           gap: 28px;
           align-items: start;
       }

       .subscribe-copy h2 {
           margin: 0 0 16px;
           font-size: clamp(30px, 4vw, 42px);
           line-height: 1.1;
           color: var(--color-primary-dark);
       }

       .subscribe-copy p {
           margin: 0 0 16px;
           font-size: 15px;
           line-height: 1.75;
           color: rgba(25, 33, 42, 0.86);
       }

       .subscribe-note {
           display: grid;
           gap: 8px;
           background: var(--color-primary);
           border: 1px solid rgba(15, 38, 58, 0.08);
           border-radius: var(--radius-md);
           padding: 18px 20px;
           box-shadow: 0 14px 30px rgba(15, 38, 58, 0.08);
       }

       .subscribe-note h3 {
           margin: 0;
           font-size: 20px !important;
           color: #ffffff;
       }

       .subscribe-note span {
           font-size: 14px;
           line-height: 1.7;
           color: rgba(255, 255, 255, 0.9);
       }

       .subscribe-form-card {
           background: #ffffff;
           border-radius: 16px;
           padding: 24px;
           border: 1px solid rgba(15, 38, 58, 0.08);
           box-shadow: 0 20px 48px rgba(15, 38, 58, 0.12);
       }

       .subscribe-form {
           display: grid;
           gap: 14px;
       }

       .subscribe-flash {
           padding: 12px 14px;
           border-radius: 10px;
           font-size: 13px;
           line-height: 1.6;
           background: #ffe8de;
           color: #8a3d1c;
       }

       .subscribe-form label {
           display: grid;
           gap: 8px;
           font-size: 13px;
           font-weight: 600;
           color: var(--color-primary-dark);
       }

       .subscribe-form input,
       .subscribe-form select,
       .subscribe-form textarea {
           width: 100%;
           border: 1px solid rgba(15, 38, 58, 0.12);
           border-radius: 10px;
           padding: 12px 14px;
           font: inherit;
           color: var(--color-text);
           background: #ffffff;
       }

       .subscribe-form textarea {
           min-height: 110px;
           resize: vertical;
       }

       .subscribe-billing {
           display: grid;
           gap: 8px;
       }

       .subscribe-price-live {
           padding: 14px 16px;
           border: 1px solid rgba(15, 38, 58, 0.08);
           border-radius: 12px;
           background: #edf7f8;
           color: var(--color-primary-dark);
       }

       .subscribe-price-live strong {
           display: block;
           margin-bottom: 4px;
       }

       .subscribe-price-live span {
           display: block;
           line-height: 1.6;
           font-size: 14px;
       }

       .subscribe-checkline {
           display: flex;
           align-items: flex-start;
           gap: 10px;
           font-size: 13px;
           font-weight: 500;
           color: var(--color-text);
       }

       .subscribe-checkline input {
           width: auto;
           margin-top: 2px;
       }

       .subscribe-grid {
           display: grid;
           grid-template-columns: repeat(2, minmax(0, 1fr));
           gap: 12px;
       }

       .subscribe-form-note {
           margin: 0;
           font-size: 12px;
           line-height: 1.7;
           color: var(--color-muted);
       }

       /* For-who list */

       #voor-wie {
           background: var(--color-warm);
           padding: 80px 0 120px;
       }

       .for-who-list {
           display: grid;
           grid-template-columns: repeat(2, minmax(0, 1fr));
           gap: 16px;
           margin-top: 18px;
       }

       .pill {
           background: var(--color-primary-dark);
           border-radius: var(--radius-md);
           padding: 20px 18px;
           font-size: 18px;
           line-height: 1.35;
           border: 1px solid var(--color-primary-dark);
           color: #ffffff;
           font-weight: 600;
           letter-spacing: 0;
           text-align: center;
       }

       #faq {
           background: #ffffff;
           border-top: 1px solid rgba(15, 38, 58, 0.06);
           padding-bottom: 120px;
       }

       .faq-grid {
           display: grid;
           grid-template-columns: repeat(2, minmax(0, 1fr));
           gap: 18px;
       }

       .faq-item {
           background: #f8fbfb;
           border: 1px solid rgba(15, 38, 58, 0.08);
           border-radius: var(--radius-md);
           padding: 22px 20px;
           box-shadow: 0 14px 28px rgba(15, 38, 58, 0.06);
       }

       .faq-item h3 {
           font-size: 22px !important;
           margin: 0 0 10px;
           color: var(--color-primary-dark);
       }

       .faq-item p {
           margin: 0;
           font-size: 14px;
           line-height: 1.75;
           color: rgba(25, 33, 42, 0.88);
       }

       /* Footer */

       footer {
           padding: 46px 20px 56px;
           background: var(--color-primary-dark);
           color: #ffffff;
           font-size: 13px;
       }

       .footer-inner {
           max-width: var(--max-width);
           margin: 0 auto;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           gap: 18px;
           text-align: center;
       }

       .footer-logo {
           width: min(560px, 100%);
           height: auto;
       }

       .footer-contact {
           display: grid;
           gap: 4px;
           letter-spacing: 0.02em;
           margin-top: -60px;
       }

       .footer-contact p {
           margin: 0;
           color: rgba(255, 255, 255, 0.8);
       }

       .footer-contact a,
       .footer-links a {
           color: rgba(255, 255, 255, 0.8);
       }

       .footer-links {
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           gap: 12px;
       }

       /* Responsive */

       @media (max-width: 900px) {
           .hero-inner {
               grid-template-columns: minmax(0, 1fr);
               padding-top: 12px;
           }

           .hero-card {
               margin-top: 10px;
           }

           .hero {
               padding-top: 60px;
               padding-bottom: 76px;
           }

           .section-grid-2 {
               grid-template-columns: minmax(0, 1fr);
           }

           .features-grid {
               grid-template-columns: repeat(2, minmax(0, 1fr));
           }

           .pricing-grid {
               grid-template-columns: repeat(2, minmax(0, 1fr));
           }

           .demo-strip-inner,
           .subscribe-layout,
           .footer-inner {
               grid-template-columns: minmax(0, 1fr);
           }

           .demo-strip-action {
               justify-content: flex-start;
           }

           .faq-grid {
               grid-template-columns: minmax(0, 1fr);
           }

           .section-title {
               font-size: 36px;
           }

           .header-inner {
               gap: 18px;
           }

           nav ul {
               gap: 16px;
           }

           nav li:nth-child(2),
           nav li:nth-child(3),
           nav li:nth-child(4),
           nav li:nth-child(5) {
               display: none;
           }
       }

       @media (max-width: 600px) {
           .features-grid {
               grid-template-columns: minmax(0, 1fr);
           }

           .pricing-grid,
           .subscribe-grid {
               grid-template-columns: minmax(0, 1fr);
           }
       }

       /* --- Mobile bottom nav & slide-up menu (900px en kleiner) ------- */

       .mobile-nav {
           position: fixed;
           left: 0;
           right: 0;
           bottom: 0;
           padding: 10px 14px;
           display: none; /* alleen tonen onder 900px */
           align-items: center;
           gap: 8px;
           z-index: 60;
           background: var(--color-primary);
           box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.35);
       }

       .mobile-nav-btn {
           flex: 1;
           border: none;
           border-radius: 8px;
           padding: 10px 14px;
           font-size: 14px;
           font-weight: 600;
           letter-spacing: 0.03em;
           text-transform: uppercase;
           background: rgba(255, 255, 255, 0.14);
           color: #ffffff;
           display: inline-flex;
           justify-content: center;
           align-items: center;
           cursor: pointer;
           transition: background 0.15s ease, transform 0.12s ease;
       }

       .mobile-nav-btn:hover {
           background: rgba(255, 255, 255, 0.24);
           transform: translateY(-1px);
       }

       .mobile-nav-btn--primary {
           background: #ffffff;
           color: var(--color-primary);
       }

       .mobile-nav-btn--primary:hover {
           background: #f3f4f6;
       }

       .mobile-nav-menu {
           flex: 0 0 44px;
           width: 44px;
           height: 44px;
           padding: 0;
           border-radius: 8px;
           background: rgba(12, 28, 40, 0.9);
       }

       .mobile-nav-menu span {
           position: relative;
           width: 18px;
           height: 2px;
           background: #ffffff;
       }

       .mobile-nav-menu span::before,
       .mobile-nav-menu span::after {
           content: "";
           position: absolute;
           left: 0;
           width: 18px;
           height: 2px;
           background: #ffffff;
       }

       .mobile-nav-menu span::before {
           top: -6px;
       }

       .mobile-nav-menu span::after {
           top: 6px;
       }

       .mobile-menu-overlay {
           position: fixed;
           inset: 0;
           display: none;
           align-items: flex-end;
           justify-content: center;
           background: rgba(4, 10, 18, 0.55);
           z-index: 55;
       }

       .mobile-menu-overlay.is-open {
           display: flex;
       }

       .mobile-menu {
           width: 100%;
           max-width: 520px;
           background: #050b10;
           color: #f9fafb;
           border-radius: 18px 18px 0 0;
           padding: 18px 20px 24px;
           box-shadow: 0 -22px 50px rgba(0, 0, 0, 0.65);
           transform: translateY(100%);
           transition: transform 0.22s ease-out;
       }

       .mobile-menu-overlay.is-open .mobile-menu {
           transform: translateY(0);
       }

       .mobile-menu-header {
           display: flex;
           align-items: center;
           justify-content: space-between;
           margin-bottom: 12px;
       }

       .mobile-menu-title {
           font-size: 14px;
           text-transform: uppercase;
           letter-spacing: 0.14em;
           opacity: 0.8;
       }

       .mobile-menu-close {
           background: transparent;
           border: none;
           color: #f9fafb;
           font-size: 22px;
           cursor: pointer;
       }

       .mobile-menu-list {
           list-style: none;
           margin: 10px 0 0;
           padding: 0;
       }

       .mobile-menu-list li + li {
           margin-top: 10px;
       }

       .mobile-menu-list a {
           display: block;
           padding: 10px 0;
           font-size: 16px;
           font-weight: 500;
           color: #f9fafb;
           border-bottom: 1px solid rgba(148, 163, 184, 0.25);
       }

       .mobile-menu-list li:last-child a {
           border-bottom: none;
       }

       @media (max-width: 900px) {
           body {
               padding-bottom: 70px; /* ruimte voor de balk */
           }

           .mobile-nav {
               display: flex;
           }

           /* desktopmenu verbergen op mobiel */
           header nav ul {
               display: none;
           }
       }