.box {
    padding: 15px;
    background: #444 !important; /* Deep Gaming Black */
    border: none;
    border-radius: 0; /* Sharp edges for high-tech look */
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

/* Hover Effect: The Lift & Glow */
.block:hover .box {
    background: #121212 !important;
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Top accent line (The 'Power' Indicator) */
.box::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 8px;
    background: linear-gradient(90deg, #03a9f4, #9c27b0);
    opacity: 0.8;
}

/* Updated Typography for Dark Background */
.list-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: #03a9f4; /* Cyan labels */
    text-transform: uppercase;
    letter-spacing: 2px;
}

.list-desc {
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff !important; /* White text on black background */
    line-height: 1.2;
}

/* The Image Container */
.img-product {
    border: 1px solid #333;
    border-radius: 4px;
    object-fit: cover;
    background: #1a1a1a;
    transition: 0.3s;
}

.block:hover .img-product {
    border-color: #03a9f4;
    transform: scale(1.03);
}

.block .list-desc {
    line-height: 1.2 !important; /* Fixes the 40px height issue */
    margin-top: 2px;
}

.gaming-btn {
    background: var(--gaming-gradient);
    border: none;
    border-radius: 0;
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
    transition: 0.3s;
}

.gaming-btn:hover {
    filter: brightness(1.2);
    transform: scale(1.02);
}

.system-title-wrap {
    text-align: center;
    padding: 40px 0;
    position: relative;
}

.system-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #121212; /* Deep Obsidian to match cards */
    letter-spacing: 5px;
    margin: 0;
    position: relative;
    display: inline-block;
    /* Subtle 3D text shadow */
    text-shadow: 2px 2px 0px #eee, 4px 4px 0px rgba(0,0,0,0.05);
}

/* The Neon Underline */
.system-title::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 10%;
    width: 80%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #03a9f4, transparent);
    box-shadow: 0 0 15px rgba(3, 169, 244, 0.6);
}

/* Small "Access" sub-text */
.system-subtitle {
    display: block;
    font-size: 10px;
    color: #888;
    letter-spacing: 8px;
    margin-bottom: -10px;
    font-weight: 700;
}
.share-btn-wrap {
    position: absolute;
    left: -10px;
    top: -10px;
    z-index: 10;
    transition: 0.3s;
}

.share-btn-wrap:hover {
    transform: scale(1.1) rotate(-10deg);
}

@media (max-width: 768px) {
    .share-btn-wrap {
        left: 5px;
        top: 5px;
    }
}