.product-card {
    --charcoal-card: var(--app-color-primary-light);
    --linear-accent: var(--app-color-accent-light);
    --accent-soft: var(--app-color-accent-soft);
    --accent-light: var(--app-color-accent-light);
    --border: var(--app-color-glass-border)
    
    position:relative; 
    overflow:hidden;
    padding:2.5rem;
    background: var(--charcoal-card);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.03);
    transition: background .3s, 
    transform .3s;
    cursor:pointer;
    display: block;
    width: 100%;
}
.product-card::before {
    content:''; 
    position:absolute; 
    inset:0;
    background: linear-gradient(135deg, var(--app-color-accent-soft) 0%, transparent 60%);
    opacity:0; 
    transition: opacity .3s;
}
.product-card:hover { 
    background:rgba(25,20,10,0.9); 
}
.product-card:hover::before { 
    opacity:1; 
}

.product-num {
    font-family: var(--app-font-primary);
    font-size:3rem; 
    font-weight:300;
    color: var(--app-color-secondary);
    line-height:1; margin-bottom:1rem;
    transition: color .3s;
}
.product-card:hover .product-num { 
    color: var(--accent-light); 
}

.product-icon {
    width: 50px;
    height: 50px;
    margin-bottom:1.2rem;
    background: var(--app-color-glass); 
    border:1px solid var(--border);
    display:flex; 
    align-items:center; 
    justify-content:center;
    font-size:1.3rem;
}

.product-icon > svg {
    width: 32px;
    height: 32px;
    color: var(--app-color-text);
    fill: currentColor;
}

.product-name {
    font-weight:600;
    color:var(--app-color-text); 
    margin-bottom:0.6rem;
    transition: color .3s;
}
.product-card:hover .product-name { 
    color: var(--app-color-accent); 
}

.product-desc {
    font-size:.925rem; 
    color:var(--app-color-secondary);
    line-height:1.8; 
    letter-spacing:0.05em;
}

.product-arrow {
    position:absolute; 
    bottom:1.5rem; 
    right:1.5rem;
    width:32px; 
    height:32px;
    border:1px solid var(--app-color-glass-border);
    display:flex; 
    align-items:center; 
    justify-content:center;
    color:var(--app-color-accent); 
    font-size:0.8rem;
    opacity:0; 
    transform:translateX(-8px);
    transition: opacity .3s, 
    transform .3s;
}

.product-card:hover .product-arrow { 
    opacity:1; 
    transform:translateX(0); 
}