:root{--primary:#667EEA;--secondary:#764BA2;--dark:#1A202C;--light:#F7FAFC;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--light);color:var(--dark);}

.showcase-header{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;padding:80px 40px 60px;text-align:center;}
.header-content h1{font-size:4rem;font-weight:900;margin-bottom:15px;letter-spacing:-2px;}
.header-content p{font-size:1.5rem;opacity:0.95;margin-bottom:40px;}

.filter-buttons{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;}
.filter-btn{padding:12px 28px;background:rgba(255,255,255,0.2);color:#fff;border:2px solid rgba(255,255,255,0.3);border-radius:50px;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.3s;backdrop-filter:blur(10px);}
.filter-btn:hover{background:rgba(255,255,255,0.3);transform:translateY(-2px);}
.filter-btn.active{background:#fff;color:var(--primary);border-color:#fff;}

.demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:30px;max-width:1600px;margin:60px auto;padding:0 40px;}

.demo-card{text-decoration:none;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);transition:all 0.3s;display:block;}
.demo-card:hover{transform:translateY(-8px);box-shadow:0 12px 40px rgba(0,0,0,0.15);}

.demo-thumb{height:240px;background-size:cover;background-position:center;position:relative;overflow:hidden;}
.demo-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.3) 100%);opacity:0;transition:0.3s;}
.demo-card:hover .demo-thumb::after{opacity:1;}

.demo-info{padding:25px;}
.demo-category{display:inline-block;padding:6px 14px;background:var(--primary);color:#fff;border-radius:20px;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:12px;}
.demo-info h3{font-size:1.5rem;color:var(--dark);margin-bottom:8px;font-weight:700;}
.demo-info p{color:#718096;font-size:0.95rem;line-height:1.5;}

.showcase-footer{background:var(--dark);color:#fff;text-align:center;padding:40px 20px;margin-top:80px;}
.showcase-footer p{opacity:0.8;font-size:0.9rem;}

/* Responsive */
@media (max-width:768px){
.showcase-header{padding:60px 20px 40px;}
.header-content h1{font-size:2.5rem;}
.header-content p{font-size:1.2rem;}
.filter-buttons{gap:10px;}
.filter-btn{padding:10px 20px;font-size:0.9rem;}
.demo-grid{grid-template-columns:1fr;gap:20px;padding:0 20px;margin:40px auto;}
.demo-info h3{font-size:1.3rem;}
}

/* Animation */
.demo-card{animation:fadeInUp 0.5s ease-out;}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}

/* Filter animation */
.demo-card.hidden{display:none;}