.hk-home {
    --hk-ink: #143047;
    --hk-muted: #567085;
    --hk-bg: #eef4f9;
    --hk-surface: #ffffff;
    --hk-border: #d4e1ed;
    --hk-accent: #0f7d73;
    --hk-accent-2: #1d5a91;
    color: var(--hk-ink);
    font-family: "IBM Plex Sans", "Noto Sans TC", "Noto Sans HK", sans-serif;
    position: relative;
}

.hk-home::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 10%, rgba(29, 90, 145, 0.14), transparent 32%),
        radial-gradient(circle at 88% 14%, rgba(15, 125, 115, 0.12), transparent 30%),
        linear-gradient(180deg, #f7fafc 0%, var(--hk-bg) 100%);
}

.hk-home h1,
.hk-home h2,
.hk-home h3 {
    font-family: "IBM Plex Serif", "Noto Serif TC", "Noto Serif HK", serif;
}

.hk-home p,
.hk-home li,
.hk-home small,
.hk-home span {
    line-height: 1.68;
}

.hk-home-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    padding: 2.4rem;
    background: linear-gradient(135deg, #16375f 0%, #1f5986 44%, #0f8679 100%);
    box-shadow: 0 20px 42px rgba(15, 39, 65, 0.18);
    color: #f6fbff;
}

.hk-home-hero::before,
.hk-home-hero::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.hk-home-hero::before {
    width: 18rem;
    height: 18rem;
    top: -5rem;
    right: -3rem;
    background: rgba(255, 255, 255, 0.13);
    filter: blur(10px);
}

.hk-home-hero::after {
    width: 14rem;
    height: 14rem;
    left: -4rem;
    bottom: -5rem;
    background: rgba(255, 185, 108, 0.22);
    filter: blur(14px);
}

.hk-home-hero > .row {
    position: relative;
    z-index: 1;
}

.hk-home-kicker {
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.82rem;
    color: #d5ecff;
    font-weight: 700;
}

.hk-home-hero .lead {
    color: rgba(246, 251, 255, 0.95);
}

.hk-home-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.hk-home-meta-pill,
.hk-home-section-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    font-size: 0.84rem;
    padding: 0.45rem 0.85rem;
}

.hk-home-meta-pill {
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
    color: #f3fbff;
}

.hk-home-section-pill {
    border: 1px solid #cfe0ef;
    background: #eef5fb;
    color: #1c446a;
}

.hk-home-stat-grid {
    display: grid;
    gap: 0.9rem;
}

.hk-home-stat,
.hk-home-section,
.hk-home-card,
.hk-home-highlight-card,
.hk-home-directory-card,
.hk-home-faq-item,
.hk-home-editorial-card,
.hk-home-link-card {
    border: 1px solid var(--hk-border);
    background: linear-gradient(160deg, var(--hk-surface) 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15, 39, 65, 0.06);
}

.hk-home-stat {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    padding: 1rem;
}

.hk-home-stat-value {
    display: block;
    font-size: 1.08rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.2rem;
}

.hk-home-stat-label {
    display: block;
    font-size: 0.82rem;
    color: #d7efff;
}

.hk-home-section {
    border-radius: 1.1rem;
    padding: 1.2rem;
}

.hk-home-market-bar,
.hk-home-guide-card,
.hk-home-controls,
.hk-home-map-detail,
.hk-home-compare-tray {
    border: 1px solid var(--hk-border);
    background: linear-gradient(160deg, var(--hk-surface) 0%, #f5faff 100%);
    box-shadow: 0 10px 24px rgba(15, 39, 65, 0.06);
}

.hk-home-market-bar {
    border-radius: 1rem;
    padding: 1rem 1.1rem;
}

.hk-home-market-bar-actions,
.hk-home-market-switch,
.hk-home-source-preview,
.hk-home-chip-list,
.hk-home-map-meta,
.hk-home-hub-districts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.hk-home-market-switch {
    padding-top: 0.9rem;
    border-top: 1px solid #dbe6f0;
}

.hk-home-market-switch-label {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hk-muted);
    font-weight: 700;
}

.hk-home-market-link,
.hk-home-source-chip,
.hk-home-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid #cfe0ef;
    background: #f4f8fc;
    color: var(--hk-accent-2);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.25;
    padding: 0.45rem 0.85rem;
    text-decoration: none;
}

.hk-home-market-link:hover,
.hk-home-market-link:focus,
.hk-home-source-chip:hover,
.hk-home-source-chip:focus,
.hk-home-chip:hover,
.hk-home-chip:focus {
    border-color: #b5cee5;
    background: #edf4fb;
    color: #16375f;
}

.hk-home-market-link.is-primary {
    border-color: #16375f;
    background: #16375f;
    color: #ffffff;
}

.hk-home-market-link.is-primary:hover,
.hk-home-market-link.is-primary:focus {
    border-color: #112b48;
    background: #112b48;
    color: #ffffff;
}

.hk-home-translation-note {
    border-radius: 1rem;
    padding: 0.8rem 0.95rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(246, 251, 255, 0.94);
    font-size: 0.92rem;
    max-width: 42rem;
}

.hk-home-anchor-nav-wrap {
    margin-top: -0.2rem;
}

.hk-home-anchor-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.hk-home-anchor-link {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #cfe0ef;
    background: #f4f8fc;
    color: var(--hk-accent-2);
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.45rem 0.85rem;
    text-decoration: none;
}

.hk-home-anchor-link:hover,
.hk-home-anchor-link:focus {
    border-color: #b5cee5;
    background: #edf4fb;
    color: #16375f;
}

.hk-home-anchor-link.is-active,
.hk-home-anchor-link[aria-current="location"] {
    border-color: #0f7d73;
    background: #0f7d73;
    color: #ffffff;
}

.hk-home-card,
.hk-home-highlight-card,
.hk-home-directory-card,
.hk-home-faq-item,
.hk-home-editorial-card,
.hk-home-link-card {
    border-radius: 1rem;
    padding: 1.1rem;
}

.hk-home-card-label {
    color: var(--hk-accent-2);
    font-weight: 700;
}

.hk-home-card-english {
    color: var(--hk-muted);
    font-size: 0.88rem;
}

.hk-home-card-focus,
.hk-home-highlight-focus {
    font-weight: 700;
    color: var(--hk-ink);
}

.hk-home-card-action {
    color: var(--hk-accent-2);
    font-weight: 700;
    text-decoration: none;
}

.hk-home-card-action:hover,
.hk-home-card-action:focus {
    text-decoration: underline;
}

.hk-home-card-pill,
.hk-home-map-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.32rem 0.68rem;
}

.hk-home-card-pill {
    background: #ecf7f4;
    border: 1px solid #c7e7da;
    color: #0f6d62;
}

.hk-home-map-meta-pill {
    background: #eef5fb;
    border: 1px solid #d4e2f0;
    color: #22496c;
}

.hk-home-mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.hk-home-mini-stats span {
    border-radius: 999px;
    background: #eef6ff;
    border: 1px solid #d3e4f5;
    color: #22496c;
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
}

.hk-home-directory-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.hk-home-directory-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-decoration: none;
    border-radius: 0.9rem;
    border: 1px solid #d7e5f0;
    background: #f5f9fd;
    padding: 0.75rem 0.85rem;
    color: var(--hk-ink);
}

.hk-home-directory-item:hover,
.hk-home-directory-item:focus {
    border-color: #adcbe2;
    background: #edf5fb;
}

.hk-home-directory-item small {
    color: var(--hk-muted);
}

.hk-home-guide-card {
    border-radius: 1rem;
    padding: 1.1rem;
    height: 100%;
}

.hk-home-guide-eyebrow {
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hk-accent-2);
    font-weight: 700;
}

.hk-home-chip {
    appearance: none;
    cursor: pointer;
}

.hk-home-controls {
    border-radius: 1rem;
    padding: 1rem 1.1rem;
}

.hk-home-controls .form-label {
    color: var(--hk-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.hk-home-controls .form-control,
.hk-home-controls .form-select {
    border-color: #c9d8e8;
    background: rgba(255, 255, 255, 0.92);
}

.hk-home-controls .form-control:focus,
.hk-home-controls .form-select:focus {
    border-color: #8fb4d7;
    box-shadow: 0 0 0 0.2rem rgba(29, 90, 145, 0.12);
}

.hk-home-filter-status {
    color: var(--hk-muted);
    font-weight: 600;
}

.hk-home-empty-state {
    color: #8c2231;
    font-weight: 700;
}

.hk-home-note {
    color: var(--hk-muted);
    font-size: 0.88rem;
}

.hk-home-note kbd {
    border-radius: 0.45rem;
    background: #173b68;
    color: #ffffff;
    padding: 0.12rem 0.4rem;
}

.hk-home-map-section {
    overflow: hidden;
}

.hk-home-map-shell {
    border-radius: 1rem;
    border: 1px solid #d7e4f0;
    background:
        radial-gradient(circle at 18% 18%, rgba(29, 90, 145, 0.08), transparent 30%),
        linear-gradient(180deg, #fbfdff 0%, #eef5fb 100%);
    padding: 1rem;
    min-height: 100%;
}

.hk-home-map {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.hk-home-map-cluster {
    fill: rgba(20, 58, 102, 0.05);
    stroke: rgba(29, 90, 145, 0.18);
    stroke-width: 2;
}

.hk-home-map-cluster-kowloon {
    fill: rgba(15, 125, 115, 0.05);
}

.hk-home-map-cluster-territories {
    fill: rgba(44, 106, 76, 0.05);
}

.hk-home-map-cluster-islands {
    fill: rgba(45, 93, 184, 0.05);
}

.hk-home-map-link {
    cursor: pointer;
    text-decoration: none;
    transition: opacity 180ms ease;
}

.hk-home-map-hit-area {
    fill: transparent;
}

.hk-home-map-link.is-hidden {
    opacity: 0.18;
    pointer-events: none;
}

.hk-home-map-node {
    fill: #1d5a91;
    stroke: #f8fbff;
    stroke-width: 3;
    transition: fill 180ms ease, stroke-width 180ms ease, opacity 180ms ease;
}

.hk-home-map-node-hong-kong-island {
    fill: #1d5a91;
}

.hk-home-map-node-kowloon {
    fill: #0f7d73;
}

.hk-home-map-node-new-territories {
    fill: #2c6a4c;
}

.hk-home-map-node-islands {
    fill: #2d5db8;
}

.hk-home-map-link:hover .hk-home-map-node,
.hk-home-map-link:focus .hk-home-map-node,
.hk-home-map-link:focus-visible .hk-home-map-node,
.hk-home-map-node.is-active {
    fill: #f0ab3d;
    stroke-width: 4;
}

.hk-home-map-label {
    fill: #173b68;
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
    pointer-events: none;
}

.hk-home-map-link.is-active .hk-home-map-label {
    fill: #0f7d73;
}

.hk-home-map-link:focus-visible {
    outline: none;
}

.hk-home-map-detail {
    border-radius: 1rem;
    padding: 1.1rem;
}

.hk-home-map-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.hk-home-map-legend-card {
    border-radius: 0.9rem;
    border: 1px solid #d7e4f0;
    background: #f6fbff;
    padding: 0.75rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.hk-home-map-legend-card strong {
    color: #173b68;
}

.hk-home-map-legend-card small,
.hk-home-map-legend-card span {
    color: var(--hk-muted);
}

.hk-home-compare-tray {
    border-radius: 1rem;
    padding: 1.1rem;
}

.hk-home-compare-table {
    width: 100%;
    min-width: 42rem;
    border-collapse: collapse;
}

.hk-home-compare-table th,
.hk-home-compare-table td {
    border: 1px solid #d9e5ef;
    padding: 0.8rem 0.9rem;
    vertical-align: top;
    background: rgba(255, 255, 255, 0.9);
}

.hk-home-compare-table thead th {
    background: #edf5fb;
    color: #173b68;
    font-size: 0.85rem;
}

.hk-home-compare-table tbody th {
    width: 10rem;
    background: #f7fbff;
    color: var(--hk-muted);
    font-size: 0.82rem;
}

.hk-home-compare-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 1rem;
}

.hk-home-compare-card {
    border-radius: 0.9rem;
    border: 1px solid #d7e4f0;
    background: #ffffff;
    padding: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.hk-home-compare-toggle.is-selected {
    border-color: #173b68;
    background: #173b68;
    color: #ffffff;
}

.hk-home-highlight-card {
    display: flex;
    flex-direction: column;
}

.hk-home-compare-column[hidden],
.hk-home-directory-region[hidden],
.hk-home-directory-item[hidden] {
    display: none !important;
}

.hk-home-link-grid,
.hk-home-editorial-grid {
    display: grid;
    gap: 0.85rem;
}

.hk-home-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hk-home-link-card {
    display: block;
    color: var(--hk-ink);
    text-decoration: none;
}

.hk-home-link-card:hover,
.hk-home-link-card:focus {
    border-color: #aecce3;
    background: #edf5fb;
}

.hk-home-editorial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hk-home-editorial-list {
    margin: 0;
    padding-left: 1.1rem;
}

@media (max-width: 991px) {
    .hk-home-hero {
        padding: 1.8rem;
    }

    .hk-home-link-grid,
    .hk-home-editorial-grid {
        grid-template-columns: 1fr;
    }

    .hk-home-map-legend,
    .hk-home-compare-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .hk-home-market-bar,
    .hk-home-controls,
    .hk-home-section,
    .hk-home-card,
    .hk-home-highlight-card,
    .hk-home-directory-card,
    .hk-home-faq-item,
    .hk-home-editorial-card,
    .hk-home-link-card,
    .hk-home-guide-card,
    .hk-home-map-detail,
    .hk-home-compare-tray {
        padding: 0.95rem;
    }

    .hk-home-anchor-link,
    .hk-home-market-link {
        width: 100%;
    }

    .hk-home-anchor-link,
    .hk-home-market-link,
    .hk-home-chip {
        justify-content: center;
    }

    .hk-home-map-shell {
        padding: 0.75rem;
    }
}