:root { --primary: #7c3aed; --primary2: #c026d3; --bg: #faf7ff; --text: #1f2937; --muted: #6b7280; --card: #ffffff; --radius: 18px; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Vazirmatn, 'Segoe UI', Tahoma, sans-serif; background: var(--bg); color: var(--text); line-height: 1.9; }
a { color: var(--primary); }
.container { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
/* هدر بنفش (برگشت) */
.site-header { background: linear-gradient(135deg, var(--primary), var(--primary2)); color: #fff; padding: 48px 0 40px; text-align: center; }
.site-header h1 { margin: 0 0 8px; font-size: 2rem; }
.site-header p { margin: 0; opacity: .9; }
/* اسکرول افقی */
.horizontal-scroll { display: flex; gap: 20px; overflow-x: auto; padding: 32px 0; scroll-snap-type: x mandatory; }
.horizontal-scroll::-webkit-scrollbar { height: 6px; }
.horizontal-scroll::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }
/* کارت */
.h-card { flex: 0 0 320px; background: var(--card); border-radius: var(--radius); box-shadow: 0 6px 24px rgba(124, 58, 237, .12); overflow: hidden; display: flex; flex-direction: column; scroll-snap-align: start; transition: .2s; }
.h-card:hover { transform: translateY(-4px); }
/* تصویر */
.h-card img { width: 100%; height: 180px; object-fit: cover; }
/* متن */
.h-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.h-body h2 { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.meta { font-size: .85rem; color: var(--muted); }
.h-body p { margin: 0; color: #374151; }
/* دکمه */
.btn { align-self: flex-start; margin-top: auto; background: linear-gradient(135deg, var(--primary), var(--primary2)); color: #fff; text-decoration: none; padding: 8px 18px; border-radius: 999px; font-size: .85rem; }
.btn:hover { opacity: .9; }
/* فوتر */
.site-footer { background: #fff; border-top: 1px solid #ede9fe; text-align: center; color: var(--muted); padding: 24px; margin-top: 48px; }
.h-body h2 a { text-decoration: none; color: inherit; transition: .2s; }
.h-body h2 a:hover { color: var(--primary); }

/* موبایل */
@media(max-width: 600px) { .h-card { flex: 0 0 75%; } .h-card img { height: 150px; } .site-header h1 { font-size: 1.5rem; } }