
    /* الأنماط الأصلية للهيدر والقائمة */
    :root {
      --hologram-blue: #00f3ff;
      --cyber-purple: #bc13fe;
      --matrix-green: #0fff50;
      --neon-pink: #ff00ff;
      --void-black: #00010c;
    }

    body {
      background: var(--void-black);
      color: white;
      font-family: 'Tajawal', sans-serif;
      overflow-x: hidden;
    }

    .cyber-nav {
      background: linear-gradient(45deg,
      transparent 20%,
      rgba(0,243,255,0.1) 50%,
      transparent 80%);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--hologram-blue);
      box-shadow: 0 0 50px rgba(0,243,255,0.1);
    }

    .hologram-header {
      height: 100vh;
      clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
      background:
              radial-gradient(circle at 70% 20%, rgba(188,19,254,0.3), transparent),
              linear-gradient(45deg, var(--void-black), #00093c);
      position: relative;
      overflow: hidden;
    }

    .cyber-title {
      font-family: 'Jomhuria', cursive;
      font-size: 6rem;
      text-shadow:
              0 0 30px var(--hologram-blue),
              0 0 60px var(--cyber-purple);
      animation: glitch 2s infinite;
    }

    @keyframes glitch {
      0%, 100% { text-shadow: 0 0 30px var(--hologram-blue); }
      50% { text-shadow: 0 0 50px var(--neon-pink); }
    }

    /* التصميم الجديد للجزء الرئيسي */
    .neo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      padding: 2rem;
    }

    .holo-card {
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--hologram-blue);
      border-radius: 15px;
      overflow: hidden;
      transition: all 0.4s ease;
      position: relative;
      backdrop-filter: blur(10px);
    }

    .holo-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 0 40px rgba(0,243,255,0.2);
    }

    .card-glitch {
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg,
      transparent,
      rgba(0,243,255,0.1),
      transparent);
      animation: glitch-flow 8s linear infinite;
      mix-blend-mode: screen;
    }

    @keyframes glitch-flow {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    .card-content {
      position: relative;
      z-index: 1;
      padding: 1.5rem;
      background: rgba(0,0,0,0.7);
    }

    .card-image {
      width: 100%;
      height: 250px;
      object-fit: cover;
      border-bottom: 2px solid var(--hologram-blue);
    }

    .neo-btn {
      background: transparent;
      border: 2px solid var(--hologram-blue);
      color: var(--hologram-blue);
      transition: all 0.3s ease;
    }

    .neo-btn:hover {
      background: var(--hologram-blue);
      color: var(--void-black);
    }

    @media (max-width: 768px) {
      .cyber-title { font-size: 4rem; }
      .hologram-header { height: 70vh; }
    }
  