:root{
    --accent: #E85D44;
    --accent-900: #b73d2b;
    --text: #2C3E50;
    --muted: #5D6D7E;
    --card-bg: #ffffff;
    --card-radius: 12px;
    --card-shadow: 0 10px 30px rgba(44,62,80,0.08);
}

/* Other Projects carousel styles (warm variant) */
.other-projects{ padding: 60px 60px 80px; background: transparent; }
.other-projects .section-header{ max-width:1200px; margin:0 auto 18px; }
.carousel-wrap{ max-width:1200px; margin:0 auto; position:relative; }
.scroller{ display:flex; gap:20px; overflow-x:auto; padding:18px; scroll-snap-type:x mandatory; scroll-padding:40px; -webkit-overflow-scrolling:touch; }
.project-card{ display:block; min-width:300px; max-width:320px; background:var(--card-bg); border-radius:var(--card-radius); box-shadow:var(--card-shadow); scroll-snap-align:center; overflow:hidden; text-decoration:none; color:inherit; border:1px solid rgba(44,62,80,0.04); transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s; }
.project-card:hover{ transform: translateY(-8px); box-shadow: 0 18px 40px rgba(44,62,80,0.12); }
.card-image{ width:100%; height:190px; object-fit:cover; display:block; }
.card-body{ padding:14px 16px; }
.card-title{ font-size:1.15rem; margin-bottom:6px; color:var(--text); font-weight:600; }
.card-desc{ color:var(--muted); font-size:0.96rem; line-height:1.45; margin-bottom:10px; }
.card-meta{ display:flex; gap:10px; align-items:center; }
.tag{ background: linear-gradient(90deg, rgba(232,93,68,0.08), rgba(232,93,68,0.02)); color: var(--accent); padding:6px 10px; border-radius:999px; font-size:0.78rem; font-weight:600; }
.muted{ color:var(--muted); font-size:0.82rem; }
.carousel-btn{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:10px; background:rgba(255,255,255,0.95); border:1px solid rgba(44,62,80,0.06); display:grid; place-items:center; font-size:1.6rem; color:var(--text); cursor:pointer; box-shadow:var(--card-shadow); }
.carousel-btn.prev{ left:8px; }
.carousel-btn.next{ right:8px; }

@media (max-width:640px){
    .scroller{ display:block; overflow:visible; }
    .project-card{ min-width: auto; width:100%; margin-bottom:18px; }
    .carousel-btn{ display:none; }
}

@media (prefers-reduced-motion: reduce){
    .project-card, .scroller, .carousel-btn{ transition: none !important; }
}