/*
 * HC_REALTIME_DEMAND_HALL_V1_CSS
 */

:root{
    --hc-demand-green:#5d963c;
    --hc-demand-green-deep:#326d2e;
    --hc-demand-green-soft:#eef6e8;
    --hc-demand-ink:#172033;
    --hc-demand-muted:#687386;
    --hc-demand-line:#e8ece5;
    --hc-demand-bg:#f6f8f5;
    --hc-demand-white:#ffffff;
}

.hc-demand-hall-page{
    margin:0;
    background:
        var(--hc-demand-bg);
    color:
        var(--hc-demand-ink);
}

.hc-demand-hall,
.hc-demand-hall *{
    box-sizing:border-box;
}

.hc-demand-hall{
    width:100%;
    margin:0 auto;
    padding-bottom:70px;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "PingFang SC",
        "Microsoft YaHei",
        sans-serif;
}

.hc-demand-hero{
    position:relative;
    display:grid;
    grid-template-columns:
        minmax(0,1.45fr)
        minmax(340px,.75fr);
    gap:58px;
    align-items:center;

    max-width:1480px;
    margin:28px auto 0;
    padding:62px 70px;

    overflow:hidden;

    border:
        1px solid #e6ebdf;
    border-radius:26px;

    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(113,171,70,.20),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #fbfdf8 0%,
            #f2f8ee 100%
        );
}

.hc-demand-hero:after{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    right:-150px;
    bottom:-190px;
    border-radius:50%;
    background:
        rgba(83,143,58,.09);
}

.hc-demand-hero-copy,
.hc-demand-hero-panel{
    position:relative;
    z-index:1;
}

.hc-demand-eyebrow{
    margin-bottom:15px;
    font-size:16px;
    font-weight:800;
    color:
        var(--hc-demand-green);
}

.hc-demand-hero h1{
    margin:0;
    max-width:780px;

    font-size:
        clamp(
            38px,
            4.2vw,
            68px
        );

    line-height:1.08;
    letter-spacing:-2px;
}

.hc-demand-lead{
    max-width:720px;
    margin:22px 0 0;

    color:
        var(--hc-demand-muted);

    font-size:18px;
    line-height:1.9;
}

.hc-demand-hero-number{
    display:flex;
    align-items:flex-end;
    gap:12px;

    margin-top:28px;
}

.hc-demand-hero-number strong{
    color:
        var(--hc-demand-green);
    font-size:46px;
    line-height:1;
}

.hc-demand-hero-number span{
    padding-bottom:5px;
    font-size:17px;
    font-weight:700;
}

.hc-demand-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;

    margin-top:30px;
}

.hc-demand-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:48px;
    padding:0 24px;

    border-radius:12px;

    text-decoration:none;
    font-weight:800;
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.hc-demand-btn:hover{
    transform:
        translateY(-1px);
}

.hc-demand-btn.primary{
    color:#fff;
    background:
        linear-gradient(
            135deg,
            #64a23e,
            #43822f
        );
    box-shadow:
        0 10px 24px
        rgba(73,132,47,.20);
}

.hc-demand-btn.secondary{
    color:#315f2d;
    background:#fff;
    border:
        1px solid #d9e5d2;
}

.hc-demand-btn.light{
    color:#315f2d;
    background:#f0f7eb;
}

.hc-demand-trust{
    display:flex;
    flex-wrap:wrap;
    gap:12px 22px;

    margin-top:30px;

    color:#5d6d59;
    font-size:13px;
    font-weight:700;
}

.hc-demand-hero-panel{
    padding:28px;

    border:
        1px solid
        rgba(255,255,255,.85);

    border-radius:22px;

    background:
        rgba(255,255,255,.84);

    box-shadow:
        0 24px 60px
        rgba(34,63,25,.10);

    backdrop-filter:
        blur(14px);
}

.hc-demand-panel-title{
    margin-bottom:18px;
    font-size:18px;
    font-weight:900;
}

.hc-demand-stat-grid{
    display:grid;
    grid-template-columns:
        repeat(2,1fr);
    gap:12px;
}

.hc-demand-stat{
    min-height:112px;
    padding:20px;

    border-radius:16px;
    background:#f7faf5;
}

.hc-demand-stat strong{
    display:block;

    color:
        var(--hc-demand-green-deep);

    font-size:30px;
}

.hc-demand-stat span{
    display:block;

    margin-top:8px;

    color:
        var(--hc-demand-muted);

    font-size:14px;
}

.hc-demand-panel-tip{
    margin-top:18px;
    padding-top:16px;

    border-top:
        1px solid
        var(--hc-demand-line);

    color:#7c8677;
    font-size:12px;
    line-height:1.7;
}

.hc-demand-business{
    max-width:1480px;
    margin:28px auto 0;
    padding:36px;

    border:
        1px solid
        var(--hc-demand-line);

    border-radius:24px;

    background:#fff;
}

.hc-demand-section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
}

.hc-demand-section-kicker{
    color:
        var(--hc-demand-green);

    font-size:12px;
    font-weight:900;
    letter-spacing:1.5px;
}

.hc-demand-section-head h2{
    margin:6px 0 0;
    font-size:32px;
}

.hc-demand-section-head p{
    margin:8px 0 0;
    color:
        var(--hc-demand-muted);
}

.hc-demand-entry-links{
    display:flex;
    gap:10px;
}

.hc-demand-entry-links a{
    padding:10px 16px;

    border-radius:999px;
    background:
        var(--hc-demand-green-soft);

    color:
        var(--hc-demand-green-deep);

    text-decoration:none;
    font-size:13px;
    font-weight:800;
}

.hc-demand-filter-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-top:28px;
    padding:16px;

    border-radius:16px;
    background:#f7f9f6;
}

.hc-demand-types{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.hc-demand-types button{
    appearance:none;
    min-height:38px;
    padding:0 15px;

    border:
        1px solid transparent;
    border-radius:999px;

    background:#fff;
    color:#4c5868;

    cursor:pointer;
    font-weight:700;
}

.hc-demand-types button.active{
    background:
        var(--hc-demand-green);
    color:#fff;
}

.hc-demand-time-filter{
    display:flex;
    align-items:center;
    gap:8px;

    white-space:nowrap;

    color:
        var(--hc-demand-muted);

    font-size:13px;
}

.hc-demand-time-filter select{
    min-height:38px;
    padding:0 34px 0 12px;

    border:
        1px solid #dfe5db;
    border-radius:9px;

    background:#fff;
    color:#344053;
}

.hc-demand-result-info{
    display:flex;
    justify-content:space-between;
    gap:20px;

    margin:20px 2px 14px;

    color:
        var(--hc-demand-muted);

    font-size:13px;
}

.hc-demand-privacy-note{
    color:#7a8c73;
}

.hc-demand-grid{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:16px;
}

.hc-demand-card{
    display:flex;
    flex-direction:column;

    min-height:300px;
    padding:22px;

    border:
        1px solid
        var(--hc-demand-line);

    border-radius:18px;

    background:#fff;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.hc-demand-card:hover{
    transform:
        translateY(-2px);

    border-color:#cbdcc2;

    box-shadow:
        0 18px 40px
        rgba(31,62,26,.08);
}

.hc-demand-card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.hc-demand-status{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:0 10px;

    border-radius:999px;

    background:
        #edf7e8;

    color:
        #3f7b30;

    font-size:12px;
    font-weight:900;
}

.hc-demand-time{
    color:#929aa5;
    font-size:12px;
}

.hc-demand-card h3{
    margin:18px 0 5px;

    font-size:23px;
    line-height:1.25;
}

.hc-demand-location{
    color:
        var(--hc-demand-green);
    font-size:13px;
    font-weight:800;
}

.hc-demand-meta{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:10px;

    margin-top:18px;
}

.hc-demand-meta-item{
    padding:12px;

    border-radius:11px;
    background:#f8faf7;
}

.hc-demand-meta-item span{
    display:block;

    color:#89928a;
    font-size:11px;
}

.hc-demand-meta-item strong{
    display:block;
    margin-top:4px;

    color:#263044;
    font-size:14px;
}

.hc-demand-description{
    flex:1;

    margin:16px 0 0;

    color:
        var(--hc-demand-muted);

    font-size:13px;
    line-height:1.75;
}

.hc-demand-card-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;

    margin-top:18px;
    padding-top:16px;

    border-top:
        1px solid
        var(--hc-demand-line);
}

.hc-demand-response{
    color:#778277;
    font-size:12px;
}

.hc-demand-response strong{
    color:
        var(--hc-demand-green-deep);
}

.hc-demand-card-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:38px;
    padding:0 15px;

    border-radius:9px;

    color:#fff;
    background:
        var(--hc-demand-green);

    text-decoration:none;
    font-size:12px;
    font-weight:800;
}

.hc-demand-contact-state{
    margin-top:12px;

    color:#75806f;
    font-size:12px;
}

.hc-demand-contact-state.ready{
    color:#478038;
    font-weight:700;
}

.hc-demand-empty{
    padding:70px 20px;
    text-align:center;
}

.hc-demand-empty-icon{
    font-size:50px;
}

.hc-demand-empty h3{
    margin:16px 0 0;
}

.hc-demand-empty p{
    margin:10px 0 24px;
    color:
        var(--hc-demand-muted);
}

.hc-demand-conversion{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;

    max-width:1480px;
    margin:28px auto 0;
    padding:42px 48px;

    border-radius:24px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #315f2d,
            #609a3b
        );
}

.hc-demand-conversion-label{
    color:
        rgba(255,255,255,.72);

    font-size:13px;
    font-weight:800;
}

.hc-demand-conversion h2{
    margin:8px 0 0;
    font-size:32px;
    line-height:1.35;
}

.hc-demand-conversion p{
    margin:12px 0 0;
    color:
        rgba(255,255,255,.78);
}

.hc-demand-conversion-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:10px;
}

.hc-demand-conversion .hc-demand-btn.primary{
    color:#386d2e;
    background:#fff;
    box-shadow:none;
}

.hc-demand-conversion .hc-demand-btn.light{
    color:#fff;
    background:
        rgba(255,255,255,.13);
}


@media (max-width:1100px){

    .hc-demand-hero,
    .hc-demand-business,
    .hc-demand-conversion{
        margin-left:18px;
        margin-right:18px;
    }

    .hc-demand-hero{
        grid-template-columns:1fr;
        gap:28px;
        padding:40px;
    }

    .hc-demand-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}


@media (max-width:760px){

    .hc-demand-hall{
        padding-bottom:
            calc(
                92px +
                env(safe-area-inset-bottom)
            );
    }

    .hc-demand-hero,
    .hc-demand-business,
    .hc-demand-conversion{
        margin-left:12px;
        margin-right:12px;
        border-radius:18px;
    }

    .hc-demand-hero{
        margin-top:14px;
        padding:28px 20px;
    }

    .hc-demand-hero h1{
        font-size:36px;
        letter-spacing:-1px;
    }

    .hc-demand-lead{
        font-size:15px;
    }

    .hc-demand-hero-number strong{
        font-size:38px;
    }

    .hc-demand-hero-actions,
    .hc-demand-entry-links,
    .hc-demand-conversion-actions{
        width:100%;
    }

    .hc-demand-btn{
        width:100%;
    }

    .hc-demand-stat-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    .hc-demand-business{
        padding:22px 16px;
    }

    .hc-demand-section-head,
    .hc-demand-filter-bar,
    .hc-demand-result-info,
    .hc-demand-conversion{
        align-items:flex-start;
        flex-direction:column;
    }

    .hc-demand-time-filter{
        width:100%;
        justify-content:space-between;
    }

    .hc-demand-grid{
        grid-template-columns:1fr;
    }

    .hc-demand-conversion{
        padding:30px 22px;
    }

    .hc-demand-conversion h2{
        font-size:26px;
    }
}

/*
 * HC_REALTIME_DEMAND_HALL_V1_CSS_END
 */