:root { --bg: #050505; --red: #ff0000; --text: #e0e0e0; } body { background: var(--bg); color: var(--text); font-family: 'Courier New', monospace; margin: 0; min-height: 100vh; display: flex; flex-direction: column; } nav { display: flex; justify-content: space-between; padding: 2rem; border-bottom: 1px solid var(--red); align-items: center; } .logo { font-weight: bold; letter-spacing: 5px; color: var(--red); } nav ul { display: flex; list-style: none; } nav a { color: var(--red); text-decoration: none; margin-left: 20px; text-transform: uppercase; font-size: 0.8rem; } .hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } h1 { font-size: 5rem; color: var(--red); text-shadow: 0 0 10px var(--red); margin: 0; } .content { flex: 1; padding: 4rem; max-width: 1000px; margin: auto; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .card { border: 1px solid var(--red); padding: 2rem; transition: transform 0.3s; } .card:hover { transform: scale(1.02); background: #1a0000; } footer { padding: 2rem; display: flex; justify-content: center; align-items: center; border-top: 1px solid var(--red); margin-top: auto; } .qr-container { text-align: center; color: var(--red); } #qr-code { width: 100px; height: 100px; border: 2px solid var(--red); padding: 5px; }

/* Karbon Sites Branding */

  #karbon-promo-banner {
      position: fixed;
      bottom: 10px;
      right: 10px;
      background-color: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 8px 16px;
      border-radius: 8px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      font-size: 14px;
      z-index: 10000;
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      transition: transform 0.2s ease-in-out;
  }
  #karbon-promo-banner:hover {
      transform: scale(1.05);
  }