.page-hero { background: linear-gradient(160deg, #1A1A2E 0%, #0D2B3A 40%, #1A1A2E 70%, #0F1A30 100%); }
.page-hero::before { background: radial-gradient(ellipse 60% 50% at 30% 60%, rgba(46,134,171,0.12), transparent 70%), radial-gradient(ellipse 40% 60% at 70% 30%, rgba(45,183,209,0.06), transparent 70%); }
.page-hero h1 { text-shadow: 0 2px 20px rgba(46,134,171,0.3); }
.map-container { background: #1A1A2E; border-radius: 12px; padding: 32px; margin: 24px 0; position: relative; overflow: hidden; }
.map-container::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(46,134,171,0.08), transparent 70%); }
.map-title { color:#fff; font-size:1.2rem; margin-bottom:20px; text-align:center; position:relative; }
.map-dots { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; position:relative; }
.map-dot { text-align:center; }
.map-dot .dot-circle { width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;margin:0 auto 8px;transition:transform 0.3s; }
.map-dot:hover .dot-circle { transform:scale(1.15); }
.map-dot .dot-label { color:#fff;font-size:0.85rem;font-weight:600; }
.map-dot .dot-num { color:rgba(255,255,255,0.6);font-size:0.75rem; }
.dialect-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin:24px 0; }
.dialect-card { background:#fff; border-radius:10px; padding:20px; box-shadow:0 2px 12px rgba(0,0,0,0.05); border:1px solid #E8E0D5; border-left:4px solid var(--primary); transition:all 0.3s; }
.dialect-card:nth-child(2n) { border-left-color:#D4A843; }
.dialect-card:nth-child(3n) { border-left-color:#2E86AB; }
.dialect-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.08); }
.dialect-card h4 { font-size:1rem; margin-bottom:4px; }
.dialect-card .dc-region { font-size:0.8rem; color:#999; margin-bottom:6px; }
.dialect-card .dc-pop { font-size:0.9rem; color:var(--primary); font-weight:700; }
.region-cols { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:24px 0; }
.region-block { background:#fff; border-radius:12px; padding:24px; box-shadow:0 2px 16px rgba(0,0,0,0.06); border:1px solid #E8E0D5; }
.region-block h3 { font-size:1.1rem; margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--primary); }
.region-block p { color:#666; font-size:0.9rem; line-height:1.7; }
@media (max-width:768px) { .region-cols { grid-template-columns:1fr; } }