/* ============= CONFERENCE HERO / COUNTDOWN ================ */
.conference-hero {
    --conference-primary: #5d66b3;
    --conference-primary-dark: #454e99;
    --conference-primary-soft: #eef0ff;
    --conference-accent: #f2b420;
    --conference-text: #162b3a;
    --conference-body: #4c5a68;
    --conference-muted: #7d8792;
    padding: 0 0 30px;
}
/* ============== MAIN CARD=================== */
.conference-hero-card { position: relative; overflow: hidden; padding: 40px 36px; background: linear-gradient( 135deg, #ffffff 0%, #f5f6ff 100% ); border: 1px solid #e3e6f2; border-radius: 26px; box-shadow: 0 18px 50px rgba(41, 50, 93, .10); }
/* decorative glow */
.conference-hero-card::before { content: ""; position: absolute; top: -110px; right: -90px; width: 280px; height: 280px; background: radial-gradient( circle, rgba(93, 102, 179, .18), transparent 70% ); pointer-events: none; }
/* ============ EYEBROW ================ */
.conference-eyebrow { position: relative; margin-bottom: 24px; color: var(--conference-primary); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-align: center; }
/* ================ COUNTDOWN================== */
.modern-countdown { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1020px; margin: 0 auto 38px; }
.countdown-item { position: relative; padding: 23px 15px 18px; text-align: center; background: #ffffff; border: 1px solid #e1e5f1; border-radius: 18px; box-shadow: 0 10px 26px rgba(53, 63, 113, .09); transition: transform .2s ease, box-shadow .2s ease; }
.countdown-item:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(53, 63, 113, .13); }
/* subtle top accent */
.countdown-item::before { content: ""; position: absolute; top: 0; left: 22%; width: 56%; height: 4px; background: linear-gradient( 90deg,
var(--conference-primary), #7f87cf ); border-radius: 0 0 10px 10px; }
.countdown-number { color: var(--conference-primary-dark); font-size: clamp(40px, 5vw, 64px); font-weight: 700; line-height: 1; }
.countdown-label { margin-top: 10px; color: var(--conference-muted); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
/* =========================================================
MAIN INFORMATION
========================================================= */
.conference-main-info { position: relative; max-width: 1000px; margin: 0 auto; text-align: center; }
.conference-date { color: var(--conference-text); font-size: clamp(27px, 3vw, 42px); font-weight: 700; line-height: 1.3; }
.conference-date-divider { display: inline-block; margin: 0 7px; color: var(--conference-primary); }
.conference-location { display: inline-flex; align-items: center; gap: 8px; margin-top: 13px; padding: 8px 15px; color: #44519c; background: var(--conference-primary-soft); border-radius: 999px; font-size: 16px; font-weight: 600; }
.conference-location i { color: var(--conference-primary); }
.conference-name { max-width: 950px; margin: 24px auto 0; color: #344453; font-size: clamp(17px, 2vw, 23px); font-weight: 500; line-height: 1.55; }
.conference-name span { color: var(--conference-primary); font-weight: 700; }
/* =========================================================
INTRODUCTION
========================================================= */
.conference-intro { display: flex; align-items: flex-start; gap: 20px; margin-top: 24px; padding: 27px 30px; background: #ffffff; border: 1px solid #e5e8ef; border-left: 5px solid var(--conference-primary); border-radius: 18px; box-shadow:
0 10px 28px rgba(31, 45, 61, .055); }
.conference-intro-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; min-width: 46px; color: var(--conference-primary); background: var(--conference-primary-soft); border-radius: 13px; font-size: 20px; }
.conference-intro-content { min-width: 0; }
.conference-intro-title { margin-bottom: 9px; color: var(--conference-text); font-size: 19px; font-weight: 700; }
.conference-intro p { margin-bottom: 10px; color: var(--conference-body); font-size: 15px; line-height: 1.8; }
/* ============== TABLET================ */
@media (max-width: 991.98px) {
    .conference-hero-card { padding: 32px 24px; }
    .modern-countdown { gap: 12px; }
    .countdown-item { padding: 20px 12px 16px; }
}
/* ============= MOBILE ================== */
@media (max-width: 767.98px) {
    .conference-hero { padding: 22px 0 40px; }
    .conference-hero-card { padding: 25px 17px; border-radius: 20px; }
    /*  2 × 2 countdown on mobile */
    .modern-countdown { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 28px; }
    .countdown-item { padding: 18px 10px 14px; border-radius: 14px; }
    .countdown-number { font-size: 42px; }
    .countdown-label { margin-top: 8px; font-size: 10px; letter-spacing: 1px; }
    .conference-date { font-size: 27px; }
    .conference-location { font-size: 14px; }
    .conference-name { margin-top: 18px; font-size: 16px; line-height: 1.6; }
    .conference-intro { gap: 14px; margin-top: 16px; padding: 20px; border-radius: 15px; }
    .conference-intro-icon { width: 40px; height: 40px; min-width: 40px; font-size: 17px; }
    .conference-intro-title { font-size: 17px; }
    .conference-intro p { font-size: 14px; line-height: 1.7; }
}
/* ============= SMALL MOBILE =============== */
@media (max-width: 480px) {
    .conference-eyebrow { font-size: 10px; letter-spacing: 1.4px; }
    .countdown-number { font-size: 36px; }
    .conference-date { font-size: 23px; }
    .conference-intro { display: block; padding: 17px; }
    .conference-intro-icon { margin-bottom: 12px; }
}