/* ─── Demo Hero ─── */
.demo-hero {
    position: relative;
    padding: 140px 0 80px;
    overflow: hidden;
    text-align: center;
}
.demo-hero-bg {
    position: absolute; inset: 0; pointer-events: none;
}

/* Hide MapLibre self-attribution added by MapLibre GL JS v4 */
.maplibregl-ctrl-attrib-inner a[href*="maplibre.org"] { display: none !important; }
#demo-hero-map {
    position: absolute; inset: 0; width: 100%; height: 100%;
}
.demo-hero-overlay {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(9,9,11,0.7) 0%, rgba(9,9,11,0.92) 100%);
}
.demo-hero .container { position: relative; z-index: 2; }
.demo-hero h1 {
    font-size: 3.5rem; font-weight: 900; letter-spacing: -2px; margin-bottom: 16px;
}
.demo-hero p {
    color: var(--text-secondary); font-size: 1.1rem; max-width: 560px; margin: 0 auto 40px; line-height: 1.7;
}

/* ─── Demo Sections ─── */
.demo-section {
    padding: 100px 0;
    position: relative;
}
.demo-section:nth-child(even) { background: var(--bg-secondary); }

.demo-split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.demo-split.reverse { direction: rtl; }
.demo-split.reverse > * { direction: ltr; }

.demo-info { max-width: 460px; }
.demo-info .section-tag { margin-bottom: 12px; }
.demo-info h2 {
    font-size: 2.25rem; font-weight: 800; letter-spacing: -1.5px; margin-bottom: 16px; line-height: 1.15;
}
.demo-info p {
    color: var(--text-secondary); font-size: 1rem; line-height: 1.7; margin-bottom: 24px;
}
.demo-info .feature-list {
    list-style: none; padding: 0; margin-bottom: 32px;
}
.demo-info .feature-list li {
    padding: 8px 0; color: var(--text-secondary); font-size: 0.9rem;
    display: flex; align-items: center; gap: 10px;
}
.demo-info .feature-list li::before {
    content: ''; width: 20px; height: 20px; flex-shrink: 0;
    background: var(--accent-dim); border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 5l2.5 2.5L8 3' stroke='%231cc5b0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
}

.demo-map-container {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    aspect-ratio: 4/3;
}
.demo-map-container .map-instance {
    width: 100%; height: 100%;
}

/* Map badge overlay */
.map-badge {
    position: absolute; top: 16px; left: 16px; z-index: 10;
    padding: 6px 14px; border-radius: 100px;
    background: rgba(9,9,11,0.85); backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    font-size: 0.75rem; font-weight: 600; color: var(--accent);
    display: flex; align-items: center; gap: 6px;
}
.map-badge .live-dot {
    width: 6px; height: 6px; background: #ef4444; border-radius: 50%;
    animation: livePulse 1.5s ease infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}

/* Route info overlay */
.route-info {
    position: absolute; bottom: 16px; left: 16px; z-index: 10;
    padding: 14px 18px; border-radius: var(--radius);
    background: rgba(9,9,11,0.9); backdrop-filter: blur(12px);
    border: 1px solid var(--border); min-width: 180px;
}
.route-info h4 {
    font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 8px;
}
.route-stat {
    display: flex; justify-content: space-between; padding: 4px 0;
    font-size: 0.85rem;
}
.route-stat .label { color: var(--text-secondary); }
.route-stat .value { color: var(--text-primary); font-weight: 600; }

/* POI markers */
.poi-marker {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent); border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: transform 0.2s;
}
.poi-marker:hover { transform: scale(1.2); }

/* Full-width showcase */
.demo-fullwidth {
    padding: 100px 0;
}
.demo-fullwidth .section-header { text-align: center; margin: 0 auto 48px; }
.demo-fullwidth-map {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    height: 500px;
}
.demo-fullwidth-map .map-instance { width: 100%; height: 100%; }

/* Cinematic label */
.cinematic-label {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
    z-index: 10; display: flex; align-items: center; gap: 8px;
    padding: 8px 20px; border-radius: 100px;
    background: rgba(9,9,11,0.85); backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    font-size: 0.82rem; font-weight: 500; color: var(--text-secondary);
}
.cinematic-label .city-name { color: var(--text-primary); font-weight: 700; }

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .demo-hero { padding: 120px 0 60px; }
    .demo-hero h1 { font-size: 2.2rem; }
    .demo-split { grid-template-columns: 1fr; gap: 32px; }
    .demo-split.reverse { direction: ltr; }
    .demo-map-container { aspect-ratio: 16/10; }
    .demo-fullwidth-map { height: 350px; }
    .route-info { display: none; }
    .style-switcher { left: 50%; transform: translateX(-50%); }
    #demo-hero-map { height: 300px; }
}

@media (max-width: 480px) {
    .demo-hero { padding: 100px 0 48px; }
    .demo-hero h1 { font-size: 1.75rem; line-height: 1.2; }
    .demo-hero p { font-size: 0.95rem; }
    .demo-fullwidth-map { height: 280px; }
    .demo-map-container { aspect-ratio: 1; }
    .style-switcher {
        flex-direction: column;
        width: auto;
        left: 8px;
        transform: none;
    }
    .map-badge { font-size: 0.7rem; padding: 4px 10px; }
    .cinematic-label { font-size: 0.75rem; padding: 4px 10px; }
}

/* Non-interactive map containers */
#map-routing, #map-pois { cursor: default !important; }
#map-routing canvas, #map-pois canvas { cursor: default !important; }