Stack Glow

:root {
      --ink: #050607;
      --acid: #b8ff2e;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      min-height: 100vh;
      display: grid;
      place-items: center;
      background: var(--ink);
      font-family: "Segoe UI", system-ui, sans-serif;
      color: #fff;
      padding: 2rem;
    }

    .stack {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.25rem;
      width: min(900px, 100%);
    }

    .item {
      position: relative;
      padding: 1.4rem;
      border-radius: 20px;
      background: linear-gradient(165deg, #12151c, #0a0c10);
      border: 1px solid rgba(255, 255, 255, 0.07);
      overflow: hidden;
      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .item::before {
      content: "";
      position: absolute;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--glow, rgba(184, 255, 46, 0.35)), transparent 70%);
      top: -60px;
      right: -40px;
      transition: transform 0.5s ease, opacity 0.3s ease;
      opacity: 0.6;
    }

    .item:hover {
      transform: translateY(-8px);
      border-color: rgba(184, 255, 46, 0.35);
      box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45), 0 0 40px var(--glow, rgba(184, 255, 46, 0.15));
    }

    .item:hover::before { transform: scale(1.3); opacity: 1; }

    .item:nth-child(2) { --glow: rgba(90, 160, 255, 0.4); }
    .item:nth-child(3) { --glow: rgba(255, 90, 180, 0.35); }

    .icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      margin-bottom: 1rem;
      font-size: 1.2rem;
      position: relative;
      z-index: 1;
    }

    h3 {
      font-size: 1.15rem;
      font-weight: 800;
      margin-bottom: 0.45rem;
      position: relative;
      z-index: 1;
    }

    p {
      color: rgba(255, 255, 255, 0.5);
      font-size: 0.9rem;
      line-height: 1.55;
      position: relative;
      z-index: 1;
    }

    .tag {
      display: inline-block;
      margin-top: 1rem;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--acid);
      position: relative;
      z-index: 1;
    }

    .item:nth-child(2) .tag { color: #7eb6ff; }
    .item:nth-child(3) .tag { color: #ff8ec8; }