
    :root {
      --primary: #FFD700;
      --secondary: #00B4D8;
      --dark: #0A0F0F;
      --cyber-pattern: url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path fill="%2300B4D8" d="M45,-78.9C56.8,-71.2,63.6,-56.2,69.1,-41.7C74.6,-27.2,78.7,-13.1,79.5,0.6C80.3,14.3,77.8,28.6,70.8,40.4C63.8,52.3,52.3,61.7,39.8,67.9C27.3,74.1,13.7,77.2,-1.5,79.8C-16.7,82.5,-33.4,84.7,-46.6,79C-59.8,73.3,-69.5,59.7,-76.8,45.3C-84.1,30.9,-89,15.4,-89.5,-0.3C-90,-15.9,-86.1,-31.9,-77.1,-44.2C-68.1,-56.5,-54,-65.2,-39.9,-71.8C-25.8,-78.4,-11.7,-82.9,3.3,-88.3C18.3,-93.7,36.6,-100,45,-78.9Z"/></svg>');
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'IBM Plex Sans Arabic', sans-serif;
    }

    body {
      background: var(--dark);
      color: white;
      overflow-x: hidden;
    }

    .cyber-vortex {
      position: fixed;
      width: 200vw;
      height: 200vh;
      background: repeating-radial-gradient(
        circle at 50% 50%,
        rgba(0, 180, 216, 0.1) 0%,
        rgba(0, 180, 216, 0) 15%
      );
      animation: vortex 60s linear infinite;
      z-index: -1;
    }

    @keyframes vortex {
      0% { transform: rotate(0deg) scale(1); }
      50% { transform: rotate(180deg) scale(1.5); }
      100% { transform: rotate(360deg) scale(1); }
    }

    .neon-frame {
      border: 3px solid var(--primary);
      box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
      position: relative;
      background:
        linear-gradient(45deg,
        transparent calc(50% - 2px),
        var(--primary) calc(50% - 2px),
        var(--primary) calc(50% + 2px),
        transparent calc(50% + 2px)
        ),
        rgba(0,0,0,0.8);
    }

    .quantum-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      padding: 2rem;
      position: relative;
    }

    .holographic-card {
      background:
        linear-gradient(145deg,
        rgba(255,215,0,0.1) 0%,
        rgba(0,180,216,0.2) 100%
        );
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 2rem;
      transition: transform 0.5s;
      position: relative;
      overflow: hidden;
    }

    .holographic-card::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: var(--cyber-pattern);
      opacity: 0.1;
      animation: patternMove 20s linear infinite;
    }

    @keyframes patternMove {
      0% { transform: translate(0,0); }
      100% { transform: translate(100px,100px); }
    }

    .cyber-avatar {
      width: 250px;
      height: 250px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 30% 30%,
        var(--primary) 0%,
        transparent 50%),
        url('../img/businessman.png');
      background-size: cover;
      box-shadow:
        0 0 50px var(--primary),
        inset 0 0 30px rgba(0, 180, 216, 0.5);
      animation: float 6s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
    }

    .neon-typing {
      font-size: 4em;
      background: linear-gradient(45deg, var(--primary), var(--secondary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;
    }

    .neon-typing::after {
      content: '|';
      animation: typing 1s infinite;
      color: var(--secondary);
    }

    @keyframes typing {
      50% { opacity: 0; }
    }

    .particle-network {
      position: absolute;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    @media (max-width: 768px) {
      .neon-typing { font-size: 2.5em; }
      .cyber-avatar { width: 180px; height: 180px; }
    }
  