html {
      scroll-behavior: smooth;
  }
  
   :root {
      --bg: #06070a;
      --panel: rgba(255, 255, 255, .06);
      --panel2: rgba(255, 255, 255, .09);
      --line: rgba(255, 255, 255, .14);
      --text: rgba(255, 255, 255, .92);
      --muted: rgba(255, 255, 255, .72);
      --dim: rgba(255, 255, 255, .55);
      /* Hakendover-kleuren */
      --yellow: #ffd400;
      --blue: #0b4dff;
      --shadow: 0 20px 60px rgba(0, 0, 0, .55);
      --glowY: 0 0 36px rgba(255, 212, 0, .28);
      --glowB: 0 0 42px rgba(11, 77, 255, .28);
      --radius: 18px;
      --radius2: 28px;
      --max: 1120px;
  }
  
  * {
      box-sizing: border-box;
  }
  
  html,
  body {
      height: 100%;
  }
  
  body {
      margin: 0;
      background: radial-gradient(1200px 700px at 18% 12%, rgba(255, 212, 0, .22), transparent 58%), radial-gradient(1000px 650px at 82% 18%, rgba(11, 77, 255, .26), transparent 62%), radial-gradient(900px 600px at 60% 92%, rgba(255, 212, 0, .10), transparent 55%), linear-gradient(180deg, #05060a 0%, #070a14 52%, #05060a 100%);
      color: var(--text);
      font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      overflow-x: hidden;
  }
  /* grid */
  
  body::before {
      content: "";
      position: fixed;
      inset: 0;
      background: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
      background-size: 42px 42px, 42px 42px;
      opacity: .16;
      pointer-events: none;
      mix-blend-mode: overlay;
  }
  
  a {
      color: inherit;
  }
  
  .wrap {
      width: min(var(--max), calc(100% - 44px));
      margin: 0 auto;
  }
  /* Topbar */
  
  .topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(14px);
      background: linear-gradient(180deg, rgba(6, 7, 10, .88), rgba(6, 7, 10, .44));
      border-bottom: 1px solid rgba(255, 255, 255, .10);
  }
  
  .topbar .inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0;
      gap: 18px;
  }
  
  .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      letter-spacing: .3px;
  }
  
  .badge {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(255, 212, 0, .95), rgba(11, 77, 255, .90));
      box-shadow: var(--glowY), var(--glowB);
      position: relative;
      border: 1px solid rgba(255, 255, 255, .18);
      overflow: hidden;
  }
  
  .badge::before {
      content: "";
      position: absolute;
      inset: -40%;
      background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 7px, rgba(255, 255, 255, 0) 7px 14px);
      opacity: .22;
      transform: rotate(16deg);
  }
  
  .brand h1 {
      margin: 0;
      font-size: 14px;
      font-weight: 900;
      text-transform: uppercase;
  }
  
  .brand span {
      display: block;
      margin-top: 2px;
      font-size: 12px;
      color: var(--muted);
      font-weight: 650;
      letter-spacing: .2px;
  }
  
  nav {
      display: flex;
      align-items: center;
      gap: 14px;
      justify-content: flex-end;
  }
  
  nav a {
      font-size: 13px;
      color: var(--muted);
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid transparent;
      transition: .2s ease;
      white-space: nowrap;
      text-decoration: none;
  }
  
  nav a:hover {
      color: var(--text);
      border-color: rgba(255, 255, 255, .16);
      background: rgba(255, 255, 255, .05);
  }
  /* ✅ FIX: desktop nav nooit wrappen -> geen “dubbele” menu-rij */
  
  nav.navDesktop {
      flex-wrap: nowrap;
      white-space: nowrap;
      overflow-x: auto;
      max-width: 100%;
  }
  
  nav.navDesktop a {
      flex: 0 0 auto;
  }
  
  nav.navDesktop::-webkit-scrollbar {
      height: 6px;
  }
  
  nav.navDesktop::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .15);
      border-radius: 999px;
  }
  
  .cta {
      display: flex;
      gap: 10px;
      align-items: center;
  }
  
  .pill {
      display: inline-flex;
      gap: 10px;
      align-items: center;
      padding: 9px 12px;
      border-radius: 999px;
      background: rgba(11, 77, 255, .10);
      border: 1px solid rgba(11, 77, 255, .30);
      color: rgba(255, 255, 255, .88);
      font-weight: 800;
      font-size: 12px;
      text-decoration: none;
  }
  
  .dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--yellow);
      box-shadow: 0 0 18px rgba(255, 212, 0, .55);
      flex: 0 0 auto;
  }
  
  .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 11px 14px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .2px;
      border: 1px solid rgba(255, 255, 255, .18);
      background: rgba(255, 255, 255, .05);
      color: var(--text);
      box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
      transition: transform .15s ease, background .2s ease, border-color .2s ease;
      cursor: pointer;
      text-decoration: none;
  }
  
  .btn:hover {
      transform: translateY(-1px);
      background: rgba(255, 255, 255, .08);
      border-color: rgba(255, 255, 255, .28);
  }
  
  .btn.primary {
      background: linear-gradient(135deg, rgba(255, 212, 0, .95), rgba(11, 77, 255, .90));
      border-color: rgba(255, 255, 255, .22);
      box-shadow: var(--glowY), var(--glowB), 0 12px 35px rgba(0, 0, 0, .45);
  }
  
  .btn.primary:hover {
      transform: translateY(-1px) scale(1.01);
  }
  /* Hero */
  
  header.hero {
      padding: 56px 0 24px;
  }
  
  .heroGrid {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 22px;
      align-items: stretch;
  }
  
  .card {
      border: 1px solid rgba(255, 255, 255, .14);
      background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
  }
  
  .card::before {
      content: "";
      position: absolute;
      inset: -2px;
      background: radial-gradient(520px 240px at 20% 10%, rgba(255, 212, 0, .22), transparent 62%), radial-gradient(520px 240px at 80% 0%, rgba(11, 77, 255, .20), transparent 60%);
      filter: blur(18px);
      opacity: .72;
      pointer-events: none;
  }
  
  .card>* {
      position: relative;
  }
  
  .heroMain {
      padding: 28px 26px;
  }
  
  .kickerRow {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 14px;
  }
  
  .kicker {
      font-weight: 900;
      letter-spacing: .24em;
      text-transform: uppercase;
      font-size: 12px;
      color: rgba(255, 255, 255, .78);
  }
  
  .glitch {
      font-size: clamp(34px, 4.2vw, 56px);
      line-height: 1.05;
      margin: 10px 0 12px;
      font-weight: 950;
      letter-spacing: -.02em;
      text-transform: uppercase;
      position: relative;
  }
  
  .glitch::before,
  .glitch::after {
      content: attr(data-text);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      opacity: .85;
      pointer-events: none;
  }
  
  .glitch::before {
      transform: translate(2px, 0);
      color: rgba(11, 77, 255, .88);
      animation: glitch1 3.2s infinite linear alternate-reverse;
  }
  
  .glitch::after {
      transform: translate(-2px, 0);
      color: rgba(255, 212, 0, .88);
      animation: glitch2 2.6s infinite linear alternate-reverse;
  }
  
  @keyframes glitch1 {
      0% {
          clip-path: inset(0 0 85% 0);
      }
      12% {
          clip-path: inset(35% 0 40% 0);
      }
      25% {
          clip-path: inset(75% 0 10% 0);
      }
      42% {
          clip-path: inset(15% 0 65% 0);
      }
      68% {
          clip-path: inset(55% 0 20% 0);
      }
      100% {
          clip-path: inset(5% 0 80% 0);
      }
  }
  
  @keyframes glitch2 {
      0% {
          clip-path: inset(78% 0 5% 0);
      }
      18% {
          clip-path: inset(10% 0 70% 0);
      }
      33% {
          clip-path: inset(42% 0 35% 0);
      }
      58% {
          clip-path: inset(65% 0 18% 0);
      }
      77% {
          clip-path: inset(22% 0 58% 0);
      }
      100% {
          clip-path: inset(0 0 88% 0);
      }
  }
  
  .lead {
      color: var(--muted);
      max-width: 72ch;
      font-size: 15.5px;
      margin: 0 0 18px;
      font-weight: 650;
  }
  
  .heroActions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 16px;
  }
  
  .heroAside {
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
  }
  
  .tile {
      border: 1px solid rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .04);
      border-radius: var(--radius);
      padding: 14px 14px;
  }
  
  .tile h3 {
      margin: 0 0 10px;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .18em;
      color: rgba(255, 255, 255, .78);
  }
  
  .flag {
      width: 100%;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, .16);
      overflow: hidden;
      background: rgba(0, 0, 0, .25);
      box-shadow: 0 14px 44px rgba(0, 0, 0, .45);
  }
  
  .flag img {
      display: block;
      width: 100%;
      height: auto;
  }
  
  .countdown {
      display: flex;
      gap: 10px;
      align-items: stretch;
      flex-wrap: wrap;
  }
  
  .timebox {
      min-width: 92px;
      padding: 12px 12px;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, .16);
      background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  }
  
  .timebox b {
      display: block;
      font-size: 22px;
      letter-spacing: .02em;
  }
  
  .timebox span {
      color: var(--dim);
      font-size: 12px;
      font-weight: 800;
  }
  
  .fineprint {
      margin-top: 12px;
      color: rgba(255, 255, 255, .60);
      font-size: 12px;
      font-weight: 650;
  }
  
  .mono {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      letter-spacing: .02em;
  }
  /* Sections */
  
  section {
      padding: 18px 0 44px;
  }
  
  .sectionTitle {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin: 14px 0 14px;
  }
  
  .sectionTitle h2 {
      margin: 0;
      font-size: 20px;
      letter-spacing: .02em;
      text-transform: uppercase;
  }
  
  .sectionTitle p {
      margin: 0;
      color: var(--muted);
      font-weight: 750;
      font-size: 13px;
  }
  
  .grid3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
  }
  
  .tagRow {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 10px;
  }
  
  .tag {
      font-size: 11px;
      font-weight: 950;
      letter-spacing: .14em;
      text-transform: uppercase;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .16);
      background: rgba(255, 255, 255, .05);
      color: rgba(255, 255, 255, .86);
  }
  
  .tag.yellow {
      border-color: rgba(255, 212, 0, .40);
      background: rgba(255, 212, 0, .10);
  }
  
  .tag.blue {
      border-color: rgba(11, 77, 255, .40);
      background: rgba(11, 77, 255, .10);
  }
  
  .box {
      border: 1px solid rgba(255, 255, 255, .16);
      background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
      border-radius: var(--radius2);
      padding: 18px 18px;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow);
  }
  
  ul.list {
      margin: 12px 0 0;
      padding: 0 0 0 18px;
      color: rgba(255, 255, 255, .80);
      font-weight: 700;
  }
  
  ul.list li {
      margin: 8px 0;
  }
  
  .muted {
      color: var(--muted);
      font-weight: 650;
  }
  /* Form */
  
  form {
      display: grid;
      gap: 12px;
      margin-top: 14px;
  }
  
  .row2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
  }
  
  label {
      font-weight: 850;
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .78);
  }
  
  input,
  textarea {
      width: 100%;
      padding: 12px 12px;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, .16);
      background: rgba(0, 0, 0, .22);
      color: var(--text);
      outline: none;
      font: inherit;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  }
  
  textarea {
      min-height: 120px;
      resize: vertical;
  }
  
  .help {
      font-size: 12px;
      color: rgba(255, 255, 255, .62);
      font-weight: 650;
      margin-top: -6px;
  }
  
  footer {
      padding: 26px 0 44px;
      border-top: 1px solid rgba(255, 255, 255, .10);
      color: rgba(255, 255, 255, .72);
  }
  
  footer .foot {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      align-items: center;
  }
  /* =========================
     ✅ MOBILE MENU (WERKT)
     ========================= */
  /* default (desktop): mobile knop/paneel uit */
  
  .navToggle {
      display: none;
  }
  
  .mobileNav {
      display: none;
  }
  
  @media (max-width: 980px) {
      .heroGrid {
          grid-template-columns: 1fr;
      }
      nav.navDesktop {
          display: none;
      }
      /* toon hamburgerknop */
      .navToggle {
          display: inline-flex;
      }
      /* paneel: default verborgen via [hidden], zichtbaar als hidden weg is */
      .mobileNav {
          margin-top: 10px;
          padding: 10px 0 14px;
          border-top: 1px solid rgba(255, 255, 255, .10);
          gap: 8px;
      }
      .mobileNav[hidden] {
          display: none;
      }
      .mobileNav:not([hidden]) {
          display: grid;
      }
  }
  
  @media (max-width: 900px) {
      .grid3 {
          grid-template-columns: 1fr;
      }
      .row2 {
          grid-template-columns: 1fr;
      }
      .timebox {
          min-width: 120px;
      }
  }
  
  .mobileNav a {
      display: block;
      text-decoration: none;
      font-size: 13px;
      color: var(--muted);
      padding: 12px 12px;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .04);
  }
  
  .mobileNav a:hover {
      color: var(--text);
      background: rgba(255, 255, 255, .07);
      border-color: rgba(255, 255, 255, .20);
  }
  /* =========================
   PRINT (krantvriendelijk)
   Plak onderaan je style.css
   ========================= */
  
  @media print {
      /* pagina-instellingen */
      @page {
          size: A4;
          margin: 14mm;
      }
      /* alles naar “inkt-vriendelijk” */
      * {
          color: #000 !important;
          background: transparent !important;
          box-shadow: none !important;
          text-shadow: none !important;
          filter: none !important;
      }
      html,
      body {
          height: auto !important;
          overflow: visible !important;
      }
      body {
          font: 11pt/1.45 Georgia, "Times New Roman", Times, serif !important;
      }
      /* geen grid/achtergronden */
      body::before {
          display: none !important;
          content: none !important;
      }
      /* verberg navigatie/knoppen/scripts-only UI */
      .topbar,
      nav,
      .navToggle,
      .mobileNav,
      .cta,
      .btn,
      button,
      video,
      canvas {
          display: none !important;
      }
      /* layout wrapper naar volle breedte */
      .wrap,
      .newsWrap {
          width: 100% !important;
          margin: 0 !important;
          padding: 0 !important;
      }
      /* artikel als “papier” */
      .newsPaper,
      .card,
      .tile,
      .box {
          border: 1px solid #000 !important;
          border-radius: 0 !important;
          overflow: visible !important;
      }
      .newsPaper::before,
      .card::before {
          display: none !important;
          content: none !important;
      }
      /* koppen */
      .masthead {
          border-bottom: 1px solid #000 !important;
      }
      .mastheadTitle {
          font-size: 10pt !important;
          letter-spacing: .12em !important;
      }
      .headline {
          font-size: 20pt !important;
          line-height: 1.1 !important;
      }
      .subhead {
          font-size: 12pt !important;
      }
      .byline {
          border-bottom: 1px dashed #000 !important;
          font-size: 9.5pt !important;
      }
      /* kolommen in print (krantgevoel) */
      .newsBody {
          column-count: 2 !important;
          column-gap: 12mm !important;
          column-width: auto !important;
          padding: 0 !important;
      }
      /* paragrafen */
      .newsBody p {
          margin: 0 0 10pt !important;
          break-inside: avoid;
      }
      /* quotes en lijstblokken */
      .newsBody .pullquote,
      .newsBody .listish {
          border: 1px solid #000 !important;
          background: transparent !important;
          border-radius: 0 !important;
          break-inside: avoid;
          page-break-inside: avoid;
      }
      /* afbeelding netjes op papier */
      .heroFigure {
          padding: 0 !important;
          margin: 10pt 0 8pt !important;
          page-break-inside: avoid;
          break-inside: avoid;
      }
      .heroFigure img {
          max-width: 100% !important;
          height: auto !important;
          border: 1px solid #000 !important;
          border-radius: 0 !important;
      }
      .caption {
          font-size: 9pt !important;
          color: #000 !important;
      }
      /* footer compacter */
      footer {
          border-top: 1px solid #000 !important;
          margin-top: 10mm !important;
          padding: 6mm 0 0 !important;
      }
      .fineprint {
          font-size: 9pt !important;
      }
      /* links als URL afdrukken (handig op papier) */
      a[href] {
          text-decoration: underline !important;
      }
      a[href^="http"]::after {
          content: " (" attr(href) ")" !important;
          font-size: 9pt !important;
          word-break: break-word !important;
      }
  }