:root {
      --neon-pink: #ff2fdc;
      --neon-blue: #00f6ff;
      --bg-dark: #05060a;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Orbitron', sans-serif;
    }

    body {
      background: radial-gradient(circle at top, #0b0f1a, var(--bg-dark));
      color: white;
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* Scanlines */
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.03),
        rgba(255,255,255,0.03) 1px,
        transparent 2px,
        transparent 4px
      );
      pointer-events: none;
      z-index: 999;
    }

    header {
      text-align: center;
      padding: 4rem 1rem 2rem;
    }

    /* Glitch Text */
    .glitch {
      position: relative;
      font-size: clamp(2.5rem, 6vw, 4rem);
      color: var(--neon-blue);
      text-shadow:
        0 0 10px var(--neon-blue),
        0 0 20px var(--neon-blue);
      animation: flicker 3s infinite;
    }

    .glitch::before,
    .glitch::after {
      content: attr(data-text);
      position: absolute;
      inset: 0;
      opacity: 0.8;
    }

    .glitch::before {
      color: var(--neon-pink);
      transform: translate(2px, -2px);
      clip-path: inset(0 0 60% 0);
    }

    .glitch::after {
      color: #fff;
      transform: translate(-2px, 2px);
      clip-path: inset(40% 0 0 0);
    }

    @keyframes flicker {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.85; }
    }

    .container {
      max-width: 1100px;
      margin: auto;
      padding: 2rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 2rem;
    }

    .card {
      background: rgba(10, 15, 30, 0.6);
      border: 1px solid rgba(0, 246, 255, 0.4);
      border-radius: 12px;
      padding: 2rem;
      position: relative;
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .card::before {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: 14px;
      background: linear-gradient(45deg, var(--neon-pink), var(--neon-blue));
      opacity: 0;
      z-index: -1;
      transition: opacity 0.3s;
    }

    .card:hover {
      transform: translateY(-8px);
      box-shadow: 0 0 30px var(--neon-blue);
    }

    .card:hover::before {
      opacity: 1;
    }

    .card h3 {
      color: var(--neon-pink);
      margin-bottom: 0.5rem;
    }

    .card p {
      font-size: 0.9rem;
      opacity: 0.85;
    }

    .btn {
      display: inline-block;
      margin-top: 1.5rem;
      padding: 0.8rem 1.6rem;
      color: white;
      text-decoration: none;
      border: 2px solid var(--neon-blue);
      border-radius: 30px;
      position: relative;
      overflow: hidden;
      transition: color 0.3s;
    }

    .btn::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--neon-blue);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s;
      z-index: -1;
    }

    .btn:hover {
      color: black;
    }

    .btn:hover::before {
      transform: scaleX(1);
    }

    footer {
      text-align: center;
      padding: 2rem;
      opacity: 0.6;
      font-size: 0.8rem;
    }