﻿.product-showcase-section{padding:30px 0;background-color:var(--bg-black)}.single-card-container{width:90%;max-width:860px;margin:0 auto}.procreate-card{position:relative;background-color:var(--bg-canvas);border:1px solid var(--bg-card-border);border-radius:var(--radius-card);overflow:hidden;min-height:640px;box-shadow:var(--shadow-card);transition:border-color var(--transition),transform var(--transition);display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.procreate-card:hover{border-color:var(--bg-card-border-hover);box-shadow:var(--shadow-card-hover)}.card-bg-media{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.card-slide{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;opacity:0;transition:opacity 1.2s cubic-bezier(0.4,0,0.2,1);will-change:opacity}.card-slide.active{opacity:1}.card-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;background:linear-gradient(
180deg,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.3) 40%,rgba(0,0,0,0.88) 100%
);pointer-events:none}.card-copy{position:relative;z-index:3;padding:60px 30px 40px;text-align:center;display:flex;flex-direction:column;align-items:center;width:100%}.card-category-tag{font-size:0.85rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.7);margin-bottom:12px;display:inline-block}.card-heading{font-size:3.2rem;font-weight:800;line-height:1.05;letter-spacing:-1.5px;color:var(--text-white);margin-bottom:24px}.card-buttons{display:flex;align-items:center;justify-content:center;margin-bottom:35px}.card-indicators{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;z-index:10;background:rgba(0,0,0,0.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:8px 16px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,0.12)}.indicator-dot{width:8px;height:8px;border-radius:50%;background-color:rgba(255,255,255,0.35);border:none;padding:0;cursor:pointer;transition:all 0.35s cubic-bezier(0.16,1,0.3,1)}.indicator-dot.active{width:26px;border-radius:4px;background-color:#ffffff}.indicator-dot:hover:not(.active){background-color:rgba(255,255,255,0.7)}