#particle-canvas {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: auto;
      opacity: 20%;
  }

  body>*:not(#particle-canvas) {
      position: relative;
      z-index: 1;
  }

  :root {
      --cyan: #00c8d4;
      --green: #003985;
      --blue: #004a61;
      --purple: #6cc9ff;
      --bg: #f4f8fb;
      --text: #0a1220;
  }

  .neon-line {
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--cyan), var(--purple), var(--green), transparent);
      background-size: 200%;
      animation: lineScan 3s linear infinite;
  }

  @keyframes lineScan {
      from {
          background-position: 0%;
      }

      to {
          background-position: 200%;
      }
  }

  .soc-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      border-radius: 5px;
      font-family: 'Share Tech Mono', monospace;
      font-size: .72rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      text-decoration: none;
      background: rgba(255, 255, 255, .72);
      backdrop-filter: blur(4px);
      transition: transform .18s, box-shadow .18s, border-color .18s;
      white-space: nowrap;
  }

  .soc-btn:hover {
      transform: translateY(-2px);
  }

  .soc-btn:active {
      transform: translateY(0);
  }

  .btn-icon {
      width: 16px;
      height: 16px;
      fill: currentColor;
      flex-shrink: 0;
  }

  .btn-wa {
      border: 1.5px solid rgba(37, 211, 102, .45);
      color: #1a9e4a;
  }

  .btn-wa:hover {
      border-color: #25d366;
      box-shadow: 0 0 12px rgba(37, 211, 102, .28);
  }

  .btn-ig {
      border: 1.5px solid rgba(225, 48, 108, .38);
      color: #c0254c;
  }

  .btn-ig:hover {
      border-color: #e1306c;
      box-shadow: 0 0 12px rgba(225, 48, 108, .28);
  }


  .btn-dl {
      border: 1.5px solid #1d92bd44;
      color: #1d92bd;
  }

  .btn-dl:hover {
      border-color: #097ea8;
      box-shadow: 0 0 12px #0089bb44;
  }

  .btn-fb {
      border: 1.5px solid rgba(24, 119, 242, .38);
      color: #0d5dbf;
  }

  .btn-fb:hover {
      border-color: #1877f2;
      box-shadow: 0 0 12px rgba(24, 119, 242, .28);
  }

  .btn-tg {
      border: 1.5px solid rgba(0, 136, 204, .38);
      color: #0070a8;
  }

  .btn-tg:hover {
      border-color: #0088cc;
      box-shadow: 0 0 12px rgba(0, 136, 204, .28);
  }

  .btn-dc {
      border: 1.5px solid rgba(88, 101, 242, .38);
      color: #4752c4;
  }

  .btn-dc:hover {
      border-color: #5865f2;
      box-shadow: 0 0 12px rgba(88, 101, 242, .28);
  }

  /* ── FADE IN ── */
  main {
      position: relative;
      z-index: 1;
      animation: fadeUp .65s ease both;
  }

  @keyframes fadeUp {
      from {
          opacity: 0;
          transform: translateY(12px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  body {
      background: #ffffff;
      color: #0f172a;
      font-family: 'Share Tech Mono', monospace;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      overflow: hidden;
  }

  /* subtiele glow blobs */
  .bg-glow {
      position: absolute;
      width: 400px;
      height: 400px;
      filter: blur(120px);
      z-index: -1;
      opacity: 0.25;
  }

  .bg1 {
      background: radial-gradient(circle, #00f5ff, transparent);
      top: -100px;
      left: -100px;
  }

  .bg2 {
      background: radial-gradient(circle, #b400ff, transparent);
      bottom: -100px;
      right: -100px;
  }

  .logo {
      width: clamp(200px, 40vw, 400px);
      filter: drop-shadow(0 0 10px rgba(0, 245, 255, .3));
  }

  .title {
      font-family: 'Bebas Neue', sans-serif;
      letter-spacing: 0.2em;
      color: #1c2d37;
  }

  .subtitle {
      font-size: 0.75rem;
      letter-spacing: 0.2em;
      color: #64748b;
  }

  .countdown {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      justify-content: center;
  }

  .box {
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 10px;
      padding: 16px;
      min-width: 80px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  }

  .number {
      font-size: 2.5rem;
      font-family: 'Bebas Neue', sans-serif;
      background: linear-gradient(135deg, #00f5ff, #0050ff, #b400ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }

  .label {
      font-size: 0.65rem;
      letter-spacing: 0.2em;
      color: #94a3b8;
  }

  .btn {
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 10px 20px;
      border-radius: 6px;
      font-size: 0.75rem;
      letter-spacing: 0.15em;
      transition: all .2s;
  }

  .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 12px rgba(0, 245, 255, .2);
      border-color: #00f5ff;
  }

  .btn-social {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: 6px;
      font-size: 0.7rem;
      letter-spacing: 0.15em;
      border: 1px solid #e5e7eb;
      transition: all .25s;
  }

  .btn-social svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
  }

  /* kleuren */
  .wa {
      color: #25D366;
  }

  .tg {
      color: #229ED9;
  }

  .dc {
      color: #5865F2;
  }

  .ig {
      color: #E1306C;
  }

  .fb {
      color: #1877F2;
  }

  /* hover */
  .btn-social:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
  }

  .logo-glitch {
      position: relative;
      width: clamp(220px, 40vw, 420px);
      margin: 0 auto;
  }

  .logo {
      width: 100%;
      display: block;
  }

  /* glitch layers */
  .glitch {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      pointer-events: none;
  }

  /* kleuren */
  .glitch-red {
      filter: drop-shadow(2px 0 #ff2d7a);
  }

  .glitch-blue {
      filter: drop-shadow(-2px 0 #00f5ff);
  }

  /* RANDOM GLITCH BURSTS */
  .logo-glitch:hover .glitch-red {
      animation: glitch-red 0.4s ease;
  }

  .logo-glitch:hover .glitch-blue {
      animation: glitch-blue 0.4s ease;
  }

  /* subtiele auto glitch elke paar seconden */
  .logo-glitch {
      animation: idle-glitch 6s infinite;
  }

  /* KEYFRAMES */

  @keyframes glitch-red {
      0% {
          opacity: 0;
          transform: translate(0);
      }

      20% {
          opacity: 0.6;
          transform: translate(-2px, 1px);
      }

      40% {
          opacity: 0.4;
          transform: translate(2px, -1px);
      }

      60% {
          opacity: 0.6;
          transform: translate(-1px, 1px);
      }

      80% {
          opacity: 0.2;
          transform: translate(1px, -1px);
      }

      100% {
          opacity: 0;
          transform: translate(0);
      }
  }

  @keyframes glitch-blue {
      0% {
          opacity: 0;
          transform: translate(0);
      }

      20% {
          opacity: 0.6;
          transform: translate(2px, -1px);
      }

      40% {
          opacity: 0.4;
          transform: translate(-2px, 1px);
      }

      60% {
          opacity: 0.6;
          transform: translate(1px, -1px);
      }

      80% {
          opacity: 0.2;
          transform: translate(-1px, 1px);
      }

      100% {
          opacity: 0;
          transform: translate(0);
      }
  }

  /* automatische subtiele glitch */
  @keyframes idle-glitch {

      0%,
      92%,
      100% {
          filter: none;
      }

      94% {
          filter: drop-shadow(2px 0 #00f5ff);
          transform: translateX(1px);
      }

      95% {
          filter: drop-shadow(-2px 0 #ff2d7a);
          transform: translateX(-1px);
      }

      96% {
          filter: none;
          transform: translateX(0);
      }
  }