.hero{text-align:center;background:var(--bg-hero);opacity:0;border-radius:30px;margin:40px 0;padding:60px 0;transition:all .8s cubic-bezier(.4,0,.2,1);transform:translateY(30px)}.hero.visible{opacity:1;transform:translateY(0)}.hero h2{color:var(--text-primary);margin:20px 0 12px;font-size:2.5rem}.hero p{color:var(--text-secondary);max-width:600px;margin:0 auto;font-size:1.2rem}.list{flex-direction:column;gap:40px;margin:40px 0;display:flex}.card{background:var(--bg-card);box-shadow:0 10px 30px var(--shadow-color);border:1px solid var(--border-color);border-radius:24px;grid-template-columns:300px 1fr;transition:all .3s;display:grid;overflow:hidden}.card:hover{box-shadow:0 20px 40px var(--shadow-hover);transform:translateY(-5px)}.image{background:var(--bg-secondary);justify-content:center;align-items:center;min-height:250px;padding:20px;display:flex}.imagePlaceholder{text-align:center}.imagePlaceholder .icon{margin-bottom:10px;font-size:4rem;display:block}.imagePlaceholder .text{color:var(--text-secondary);font-size:1.1rem;font-weight:600}.content{flex-direction:column;padding:30px;display:flex}.header{flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:16px;display:flex}.category{color:#fff;background:#2563eb;border-radius:30px;padding:4px 12px;font-size:.8rem;font-weight:500}.header h3{color:var(--text-primary);margin:0;font-size:1.5rem}.description{color:var(--text-primary);margin-bottom:12px;font-size:1.1rem;font-weight:500}.longdesc{color:var(--text-secondary);margin-bottom:20px;line-height:1.6}.tech,.features{margin-bottom:16px}.tech strong,.features strong{color:var(--text-primary);margin-bottom:8px;font-size:.9rem;display:block}.techTags{flex-wrap:wrap;gap:8px;display:flex}.techTags .tag{background:var(--bg-secondary);color:var(--text-secondary);border-radius:30px;padding:4px 14px;font-size:.85rem}.features ul{flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none;display:flex}.features li{color:var(--text-secondary);font-size:.9rem}.link{color:#fff;background:linear-gradient(135deg,#2563eb,#7c3aed);border-radius:50px;align-self:flex-start;align-items:center;gap:8px;margin-top:auto;padding:12px 24px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex}.link:hover{transform:translate(5px);box-shadow:0 8px 20px #2563eb4d}@media (max-width:768px){.card{grid-template-columns:1fr}.image{min-height:180px}.header h3{font-size:1.2rem}.hero h2{font-size:1.8rem}.features ul{flex-direction:column;gap:6px}.link{justify-content:center;width:100%}}