:root { --tarot-card: rgba(13,13,40,.88); }

/* ── Hero ── */
.tarot-hero { padding: 2.5rem 0 3rem; text-align: center; position: relative; overflow: hidden; }
.tarot-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124,58,237,.07) 0%, transparent 70%); pointer-events: none; }
.hero-tag { font-family: 'Cinzel', serif; font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; color: var(--purple); margin-bottom: 1.25rem; display: inline-block; }
.hero-title { font-family: 'Cinzel Decorative', serif; font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; line-height: 1.2; color: var(--text); margin-bottom: 1rem; }
.hero-title .accent { color: var(--purple); }
.hero-subtitle { font-family: 'Raleway', sans-serif; font-size: 1.05rem; color: var(--muted); max-width: 560px; margin: 0 auto; font-weight: 300; line-height: 1.7; }

/* ── Section headings ── */
.section-heading { font-family: 'Cinzel', serif; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--purple); margin-bottom: .75rem; }
.section-title { font-family: 'Cinzel Decorative', serif; font-size: clamp(1.3rem, 3vw, 1.9rem); color: var(--text); margin-bottom: 2rem; }
.suit-divider { display: flex; align-items: center; gap: 1rem; margin: 2.5rem 0 1.5rem; }
.suit-divider::before, .suit-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.suit-label { font-family: 'Cinzel', serif; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--purple); white-space: nowrap; }

/* ── Card grid ── */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.tarot-card-link { text-decoration: none; }
.tarot-card { background: var(--tarot-card); border: 1px solid rgba(167,139,250,.2); border-radius: 12px; padding: 1.25rem 1rem 1rem; display: flex; flex-direction: column; align-items: center; text-align: center; transition: all .22s; cursor: pointer; position: relative; overflow: hidden; }
.tarot-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(124,58,237,.12) 0%, transparent 70%); opacity: 0; transition: opacity .22s; }
.tarot-card:hover { border-color: rgba(167,139,250,.45); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(124,58,237,.18); }
.tarot-card:hover::before { opacity: 1; }
.card-icon { font-size: 1.6rem; margin-bottom: .6rem; display: block; line-height: 1; }
.card-num { font-family: 'Cinzel', serif; font-size: .65rem; color: #9e9abe; letter-spacing: .1em; margin-bottom: .3rem; }
.card-title { font-family: 'Cinzel', serif; font-size: .82rem; color: #c8b8f0; line-height: 1.3; margin-bottom: .5rem; }
.card-badge { font-size: .62rem; padding: .15rem .5rem; border-radius: 50px; font-family: 'Cinzel', serif; letter-spacing: .08em; text-transform: uppercase; }
.badge-major    { background: rgba(124,58,237,.18); border: 1px solid rgba(124,58,237,.35); color: #c084fc; }
.badge-wands    { background: rgba(239,108,0,.1);   border: 1px solid rgba(239,108,0,.3);   color: #ff9f43; }
.badge-cups     { background: rgba(33,150,243,.1);  border: 1px solid rgba(33,150,243,.3);  color: #74c7ec; }
.badge-swords   { background: rgba(224,224,224,.1); border: 1px solid rgba(200,200,220,.3); color: #c8c4dc; }
.badge-pentacles{ background: rgba(76,175,80,.1);   border: 1px solid rgba(76,175,80,.3);   color: #a5d6a7; }
.suit-icon-wands     { color: #ff9f43; }
.suit-icon-cups      { color: #74c7ec; }
.suit-icon-swords    { color: #c8c4dc; }
.suit-icon-pentacles { color: #a5d6a7; }
.suit-icon-major     { color: #c084fc; }

/* Footer spacing override */
.site-footer { margin-top: 5rem; }

@media (max-width: 576px) { .cards-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }