:root {
            --primary-color: #6e319d;
            --secondary-color: #3ea955;
            --delta-green: #16a34a;
            --delta-orange: #f59e0b;
            --delta-red: #dc2626;
        }
         #carbook-stats-root .container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
            padding-top: 10%;
        }

        .subtitle { font-size: 16px; font-weight: 400; color: #6B7280; margin-bottom: 16px; }
        .update { font-size: 14px; font-weight: 400; color: #6B7280; margin-bottom: 12px; }
        .metrics-hint {
            font-size: 13px; font-weight: 400; color: #9CA3AF;
            margin-bottom: 24px; text-align: center; letter-spacing: 0.01em;
        }
        #metrics {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 24px; margin-bottom: 40px;
        }
        .metric {
            width: 100%; padding: 6% 1%; background-color: #FFFFFF; border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1); text-align: center; cursor: pointer;
            transition: all 0.3s ease; position: relative;
        }
        .metric:hover { background-color: rgba(110,49,157,0.1); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
        .metric.active { background-color: rgba(110,49,157,0.1); box-shadow: 0 6px 16px rgba(110,49,157,0.2); }
        .metric-value { font-size: 28px; font-weight: 700; color: var(--primary-color); margin-bottom: 10px; }
        .metric-description { font-size: 14px; font-weight: 400; color: var(--secondary-color); }
        .metric-delta {
            position: absolute;
            top: 15px;
            right: 15px;
            font-weight: 700;
            border-radius: 999px;
            font-size: 12px; line-height: 1;
        }
        #map { display: block; margin: 0 auto 40px; width: 1000px; height: 750px; }
        #tooltip {
            position: absolute; background-color: #FFFFFF; border: 1px solid #E5E7EB;
            padding: 10px; border-radius: 8px; pointer-events: none; display: none;
            box-shadow: 0 4px 8px rgba(0,0,0,0.15); z-index: 1000; font-size: 14px; color: #1F2A44;
        }
        #tooltip .title { font-weight: 700; margin-bottom: 4px; }
        #tooltip .line { margin-top: 4px; }
        #tooltip .delta {
            display: inline-block; font-weight: 700; padding: 2px 8px; border-radius: 999px;
            font-size: 12px; line-height: 1;
        }
        path { stroke: #FFFFFF; stroke-width: 0.5px; transition: fill 0.3s ease; }
        path:hover { stroke-width: 1px; stroke: var(--primary-color); }
        .label { font-size: 12px; pointer-events: none; text-anchor: middle; font-weight: 500; fill: #1F2A44; stroke: #1F2A44; stroke-width: 1px; }
        .demo-button {
            display: inline-block; padding: 12px 24px; background-color: var(--primary-color);
            color: #FFFFFF; font-size: 16px; font-weight: 500; border-radius: 8px; text-decoration: none;
            transition: all 0.3s ease;
        }
        .demo-button:hover { background-color: #5a2780; box-shadow: 0 4px 8px rgba(110,49,157,0.2); }

        @media (max-width: 1199px) {
            #metrics { grid-template-columns: repeat(2, 1fr); gap: 20px; }
            .metric { padding: 3% 1%; }
            #map { width: 100%; max-width: 600px; height: auto; aspect-ratio: 4/3; }
        }
        @media (max-width: 600px) {
            body { padding: 20px; }
            h2 { font-size: 16px; } h3 { font-size: 24px; }
            .subtitle { font-size: 14px; } .update { font-size: 12px; margin-bottom: 24px; }
            #metrics { grid-template-columns: 1fr; gap: 16px; }
            .metric { max-width: 360px; margin: 0 auto; padding: 2% 1%; }
            .metric-value { font-size: 24px; } .metric-description { font-size: 12px; }
            #map { width: 100%; max-width: 500px; height: auto; aspect-ratio: 4/3; }
            #tooltip { font-size: 12px; max-width: 80%; padding: 8px; }
            .demo-button { font-size: 14px; padding: 10px 20px; }
        }
        
        /* ======================================= */
/* ====== СТИЛІ ДЛЯ ШОРТКОДУ KPI ([carbook-kpi-metrics]) ====== */
/* ======================================= */

.kpi-section {
    padding-top: 3rem;
    padding-bottom: 6rem;
    background-color: #ffffff;
}

.kpi-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* A. Header */
.kpi-header {
    text-align: center;
    margin-bottom: 4rem;
}

.kpi-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    background-color: rgba(111, 45, 189, 0.1);
    color: #6F2DBD;
}

.kpi-title {
    margin-top: 1rem;
    font-size: 2.25rem;
    font-weight: 800;
    color: #1F1F1F;
}

.kpi-title .highlight-green {
    color: #39B54A;
}

.kpi-subtitle {
    margin-top: 0.75rem;
    font-size: 1.125rem;
    color: #555;
}

/* B. Hero numbers grid */
.kpi-metrics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

@media (min-width: 768px) { 
    .kpi-metrics-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .kpi-title {
        font-size: 2.25rem;
    }
}


/* C. Metric Card */
.kpi-metric-card {
    background-color: #F7F8FA;
    border-radius: 1rem;
    padding: 0.5rem;
}

.kpi-card-label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6F2DBD;
}

.kpi-card-value {
    font-size: 3rem;
    font-weight: 800;
    margin: 0.5rem;
}

.kpi-card-value.green {
    color: #39B54A;
}

.kpi-card-value.red {
    color: #7030a1;
}

.kpi-card-description {
    font-size: 0.75rem;
    color: #666;
    margin-top: 0.5rem;
}

.button-analiz-avtobiznesu {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.button-analiz-avtobiznesu .a21 {
  display: inline-block;
  background-color: #00b36b;
  color: #fff;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.button-analiz-avtobiznesu .a21:hover {
  background-color: #00995b;
  transform: translateY(-2px);
}