:root {
      --bg: #07070b;
      --panel: #0f1120;
      --border: #2b2f52;
      --text: #e7e7ff;
      --muted: #a9add6;
      --accent: #40ffd1;
      --accent2: #ff4fd8;
      --shadow: rgba(0, 0, 0, .55);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      color: var(--text);
      background: radial-gradient(1200px 700px at 20% 10%, rgba(64, 255, 209, .10), transparent 60%),
        radial-gradient(900px 500px at 90% 30%, rgba(255, 79, 216, .10), transparent 60%),
        var(--bg);
      min-height: 100vh;
    }

    /* subtiele scanlines */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background: repeating-linear-gradient(to bottom,
          rgba(255, 255, 255, .04) 0px,
          rgba(255, 255, 255, .04) 1px,
          transparent 2px,
          transparent 4px);
      mix-blend-mode: overlay;
      opacity: .25;
    }

    header {
      padding: 28px 18px 10px;
      display: flex;
      justify-content: center;
    }

    .wrap {
      max-width: 920px;
      margin: 0 auto;
      padding: 0 18px 40px;
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 12px 14px;
      border: 2px solid var(--border);
      background: linear-gradient(180deg, rgba(15, 17, 32, .92), rgba(10, 12, 24, .92));
      box-shadow: 0 14px 40px var(--shadow);
      border-radius: 10px;
    }

    .logo-badge {
      width: 52px;
      height: 52px;
      border: 2px solid var(--accent);
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: var(--accent);
      text-shadow: 0 0 18px rgba(64, 255, 209, .45);
      letter-spacing: 1px;
      font-weight: 800;
    }

    .logo-title {
      line-height: 1.1;
    }

    .logo-title h1 {
      margin: 0;
      font-size: 18px;
      letter-spacing: .5px;
    }

    .logo-title p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

    .panel {
      margin-top: 18px;
      border: 2px solid var(--border);
      background: linear-gradient(180deg, rgba(15, 17, 32, .92), rgba(10, 12, 24, .92));
      border-radius: 12px;
      box-shadow: 0 14px 40px var(--shadow);
      overflow: hidden;
    }

    .panel-topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 12px;
      border-bottom: 2px solid rgba(43, 47, 82, .75);
      background: rgba(9, 10, 18, .55);
      font-size: 12px;
      color: var(--muted);
    }

    .dots {
      display: flex;
      gap: 7px;
      align-items: center;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      border: 1px solid rgba(231, 231, 255, .25);
      background: rgba(231, 231, 255, .10);
    }

    .content {
      padding: 18px 14px 16px;
    }

    .headline {
      font-size: 16px;
      margin: 0 0 10px;
    }

    .sub {
      margin: 0 0 16px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .grid {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      margin-top: 10px;
    }

    .card {
      border: 2px solid rgba(43, 47, 82, .9);
      background: rgba(7, 7, 11, .35);
      border-radius: 10px;
      padding: 14px;
      position: relative;
      overflow: hidden;
    }

    .card::after {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: 10px;
      background: radial-gradient(380px 120px at 20% 10%, rgba(64, 255, 209, .10), transparent 70%),
        radial-gradient(420px 160px at 80% 30%, rgba(255, 79, 216, .08), transparent 70%);
      pointer-events: none;
    }

    .os-title {
      position: relative;
      margin: 0 0 6px;
      font-size: 14px;
      letter-spacing: .3px;
    }

    .os-meta {
      position: relative;
      margin: 0 0 12px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 10px;
      text-decoration: none;
      color: #071015;
      background: linear-gradient(180deg, var(--accent), rgba(64, 255, 209, .75));
      border: 2px solid rgba(64, 255, 209, .55);
      box-shadow: 0 10px 24px rgba(64, 255, 209, .16);
      font-weight: 800;
      font-size: 13px;
      letter-spacing: .2px;
      user-select: none;
      transition: transform .08s ease, filter .15s ease;
    }

    .btn:hover {
      transform: translateY(-1px);
      filter: brightness(1.05);
    }

    .btn:active {
      transform: translateY(0px);
      filter: brightness(.98);
    }

    .btn.disabled {
      color: rgba(231, 231, 255, .55);
      background: rgba(231, 231, 255, .08);
      border-color: rgba(231, 231, 255, .12);
      box-shadow: none;
      pointer-events: none;
      font-weight: 700;
    }

    footer {
      margin-top: 14px;
      color: rgba(169, 173, 214, .85);
      font-size: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px 16px;
      align-items: center;
      justify-content: space-between;
      padding: 0 4px;
    }

    .kbd {
      border: 1px solid rgba(231, 231, 255, .18);
      background: rgba(231, 231, 255, .06);
      padding: 2px 6px;
      border-radius: 6px;
      color: rgba(231, 231, 255, .85);
    }
/*    .card:nth-child(2) .btn {
      background: linear-gradient(180deg, #00ff66, #00cc55);
      border-color: #00ff66;
      color: #001a0a;
    }
*/
    /* --- MS-DOS terminal vibe --- */
    .terminal {
      position: relative;
      margin: 10px 0 12px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 2px solid rgba(0, 255, 102, .35);
      background: rgba(0, 20, 10, .35);
      box-shadow: 0 10px 22px rgba(0, 255, 102, .08);
      overflow: hidden;
    }

    .terminal::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(to bottom,
          rgba(0, 255, 102, .06) 0px,
          rgba(0, 255, 102, .06) 1px,
          transparent 2px,
          transparent 5px);
      opacity: .35;
      pointer-events: none;
    }

    .prompt {
      position: relative;
      color: #9dffbf;
      text-shadow: 0 0 12px rgba(0, 255, 102, .18);
      font-size: 12px;
      line-height: 1.5;
      white-space: nowrap;
    }

    .prompt .path {
      color: #c7ffd9;
      font-weight: 800;
    }

    .prompt .typing {
      display: inline-block;
      vertical-align: bottom;
      overflow: hidden;
      width: 0;
      animation: dosType 3.2s steps(26, end) infinite;
    }

    .prompt .cursor {
      display: inline-block;
      width: 8px;
      height: 14px;
      margin-left: 2px;
      background: rgba(157, 255, 191, .9);
      box-shadow: 0 0 10px rgba(0, 255, 102, .25);
      animation: blink 0.85s steps(1) infinite;
      vertical-align: -2px;
    }

    /* Typen + pauze + reset (door width te animeren) */
    @keyframes dosType {
      0% {
        width: 0;
      }

      45% {
        width: 26ch;
      }

      /* typed tot 26 tekens */
      80% {
        width: 26ch;
      }

      /* even blijven staan */
      100% {
        width: 0;
      }

      /* reset */
    }

    @keyframes blink {

      0%,
      49% {
        opacity: 1;
      }

      50%,
      100% {
        opacity: 0;
      }
    }

    /* DOS-knop styling (alleen de DOS kaart) */
    /*
    .card.dos .btn {
      background: linear-gradient(180deg, #00ff66, #00cc55);
      border-color: #00ff66;
      color: #001a0a;
      box-shadow: 0 10px 24px rgba(0, 255, 102, .14);
    }*/