body {
    margin: 0;
    background: #f3f4f6;
    font-family: sans-serif;
    color: #111827;
}


/* Hero Banner */

.hero {

    width: 100%;

    height: 100px;

    background-image: url("images/header.png");

    background-repeat: no-repeat;

    background-position: right center;

    background-size: auto 100px;

    background-color: #F7FBFD;

    display: flex;

    align-items: center;

    padding: 30px 60px;

    box-sizing: border-box;

    overflow: hidden;
}


/* Hero Text */

.hero-text {

    width: 100%;

    max-width: 900px;

    z-index: 2;
}


/* Main Title */

.hero-title {

    margin: 0;

    font-size: 42px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: 1px;

    color: #0f172a;

    max-width: 900px;

    white-space: normal;

    word-break: keep-all;
}


/* Subtitle */

.hero p {

    margin-top: 14px;

    font-size: 16px;

    line-height: 1.45;

    font-weight: 400;

    color: #1e293b;

    max-width: 820px;
}


/* Section Layout */

.dashboard-section {

    max-width: 1600px;

    margin: 60px auto;

    padding: 0 40px;
}


/* Section Titles */

.section-title {

    position: relative;
}

.section-title h2 {

    margin-bottom: 36px;

    font-size: 38px;

    font-weight: 700;
}

.section-title::after {

    display: none;
}


/* Grid */

.grid-2 {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 32px;

    align-items: start;
}


/* Full Width Card */

.full-width-card {

    grid-column: 1 / -1;
}


/* Chart Card */

.chart-card {

    background: white;

    border-radius: 24px;

    padding: 24px;

    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);

    overflow: hidden;
}


/* Remove Hover */

.chart-card:hover {

    transform: none;

    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
}


/* Number Badge */

.chart-number {

    width: 44px;

    height: 44px;

    border-radius: 12px;

    background: #2563eb;

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    font-weight: bold;

    margin-bottom: 18px;
}


/* Card Titles */

.chart-card h3 {

    margin-top: 0;

    margin-bottom: 20px;

    font-size: 24px;

    line-height: 1.35;

    font-weight: 700;

    color: #0f172a;
}


/* Annotation */

.annotation {

    margin-top: 18px;

    font-size: 15px;

    line-height: 1.7;

    color: #4b5563;
}


/* Vega */

.vega-embed {

    width: 100%;

    overflow: hidden;
}


/* Important for Vega */

.vega-embed canvas,
.vega-embed svg {

    max-width: 100%;

    display: block;
}


/* Hide Vega Menu */

.vega-embed summary {

    display: none;
}

.vega-embed details {

    display: none;
}


/* Map Timeline */

.map-timeline {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;

    margin-top: 20px;
}


/* Map Box */

.map-box {

    flex: 1;

    min-width: 0;

    overflow: hidden;
}


/* Remove Arrow */

.map-arrow {

    display: none;
}


/* Platform Grid */

.platform-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 24px;

    margin-top: 10px;
}


/* Mini Chart */

.mini-chart {

    background: #f8fafc;

    border-radius: 18px;

    padding: 18px;

    overflow: hidden;
}

.mini-chart h4 {

    margin-top: 0;

    margin-bottom: 16px;

    font-size: 18px;

    color: #0f172a;
}


/* Mobile */

@media screen and (max-width: 1000px) {

    .hero {

        height: 220px;

        padding: 24px 32px;

        background-size: 1200px 220px;

        background-position: right center;
    }

    .hero-title {

        font-size: 42px;

        max-width: 520px;
    }

    .hero p {

        font-size: 16px;

        max-width: 520px;
    }

    .grid-2 {

        grid-template-columns: 1fr;
    }

    .map-timeline {

        flex-direction: column;
    }

    .platform-grid {

        grid-template-columns: 1fr;
    }

    .section-title h2 {

        font-size: 30px;
    }
}