.hk-coming-soon{

padding:90px 20px;

background:
linear-gradient(180deg,#f8fffb,#ffffff);

text-align:center;

}

.hk-coming-badge{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:#e9f8ef;

color:#166534;

font-weight:700;

margin-bottom:24px;

}

.hk-coming-soon h1{

font-size:clamp(2rem,5vw,3.5rem);

margin-bottom:20px;

line-height:1.1;

}

.hk-coming-text{

max-width:700px;

margin:0 auto 40px;

font-size:1.08rem;

color:#5b6675;

}

.hk-coming-actions{

display:flex;

justify-content:center;

gap:16px;

flex-wrap:wrap;

margin-bottom:50px;

}

.hk-btn-primary,
.hk-btn-secondary{

padding:14px 26px;

border-radius:999px;

text-decoration:none;

font-weight:700;

transition:.25s;

}

.hk-btn-primary{

background:#166534;

color:#fff;

}

.hk-btn-primary:hover{

transform:translateY(-2px);

}

.hk-btn-secondary{

background:#eef8f2;

color:#166534;

}

.hk-coming-card{

max-width:620px;

margin:auto;

padding:35px;

background:#fff;

border-radius:24px;

box-shadow:0 18px 45px rgba(0,0,0,.06);

}

.hk-coming-card h3{

margin-bottom:18px;

}

.hk-coming-card ul{

list-style:none;

padding:0;

margin:0;

display:grid;

gap:14px;

text-align:left;

}

blockquote{

margin:60px auto 0;

font-size:1.2rem;

font-style:italic;

color:#166534;

}

.hk-coming-soon {
    position: relative;
    overflow: hidden;
}

.hk-coming-soon::before {
    content: "";
    position: absolute;
    top: -140px;
    left: -120px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.10);
}

.hk-coming-soon::after {
    content: "";
    position: absolute;
    right: -140px;
    bottom: -160px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(22, 101, 52, 0.08);
}

.hk-coming-soon .hk-container {
    position: relative;
    z-index: 1;
}

.hk-coming-card {
    max-width: 860px;
}

.hk-coming-card h3 {
    font-size: 1.35rem;
}

.hk-coming-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.hk-coming-links a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    min-height: 150px;
    padding: 20px 16px;

    border-radius: 22px;
    text-decoration: none;

    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,250,248,0.94));

    border: 1px solid rgba(22, 101, 52, 0.10);

    color: #0f172a;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.hk-coming-links a:hover {
    transform: translateY(-3px);
    border-color: rgba(22, 101, 52, 0.22);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}

.hk-coming-links span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border-radius: 18px;

    background: rgba(22, 163, 74, 0.08);

    font-size: 1.3rem;
}

.hk-coming-links strong {
    font-size: 0.95rem;
}

.hk-coming-links small {
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.45;
}

@media (max-width: 760px) {
    .hk-coming-links {
        grid-template-columns: 1fr;
    }

    .hk-coming-links a {
        min-height: auto;
        flex-direction: row;
        align-items: center;
        text-align: left;
    }

    .hk-coming-links a::after {
        content: "→";
        margin-left: auto;
        color: #166534;
        font-weight: 900;
    }

    .hk-coming-links small {
        display: none;
    }
}