/* ============================================================
   GOTS 2026 — Design System  (Phase 1 complete rebuild)
   Authoritative stylesheet. Loaded LAST so it owns the cascade.
   No inline CSS anywhere — tokens + modular components only.
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;450;500;600;700&display=swap');

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
    /* Brand palette — deep "control-room" navy + signal cyan */
    --c-ink-900: #0b1629;
    --c-ink-800: #0f1e36;
    --c-ink-700: #142640;
    --c-ink-600: #1a3050;
    --c-line:    rgba(255, 255, 255, .09);
    --c-line-2:  rgba(255, 255, 255, .16);

    --c-brand:   #28b4dc;
    --c-brand-2: #7dd5ec;
    --c-brand-2-rgb: 125, 213, 236;
    --c-cyan:    #36d1dc;   /* OT/cyber signal accent */
    --c-cyan-2:  #5b8def;

    --c-text:    #eef3fb;
    --c-muted:   #93a4bf;
    --c-muted-2: #64748b;

    --grad-brand:   linear-gradient(135deg, #28b4dc 0%, #1a8fb5 100%);
    --grad-cyan:    linear-gradient(135deg, #36d1dc 0%, #5b8def 100%);
    --grad-surface: linear-gradient(180deg, #0a1424 0%, #050a16 100%);
    --grad-hero:    radial-gradient(120% 120% at 80% -10%, rgba(54,209,220,.18) 0%, transparent 45%),
                    radial-gradient(120% 120% at 0% 0%, rgba(var(--c-brand-2-rgb),.16) 0%, transparent 40%);

    --glass:     rgba(13, 23, 41, .72);
    --glass-2:   rgba(20, 33, 56, .55);

    /* Type scale (fluid) */
    --fs-display: clamp(2.6rem, 5.2vw, 5rem);
    --fs-h1:      clamp(2.1rem, 4vw, 3.4rem);
    --fs-h2:      clamp(1.7rem, 3vw, 2.6rem);
    --fs-h3:      clamp(1.25rem, 1.8vw, 1.6rem);
    --fs-lead:    clamp(1.05rem, 1.3vw, 1.2rem);
    --fs-body:    1rem;
    --fs-sm:      .875rem;
    --fs-xs:      .75rem;

    --ff-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --ff-body:    "Inter", system-ui, -apple-system, sans-serif;

    /* Spacing scale (8pt) */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
    --sp-9: 96px; --sp-10: 128px;

    --maxw: 1240px;

    --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

    --sh-sm: 0 1px 2px rgba(0,0,0,.4);
    --sh-md: 0 10px 30px -10px rgba(0,0,0,.55);
    --sh-lg: 0 30px 80px -20px rgba(0,0,0,.7);
    --sh-glow: 0 0 0 1px rgba(var(--c-brand-2-rgb),.4), 0 16px 50px -12px rgba(var(--c-brand-2-rgb),.4);

    --ease: cubic-bezier(.22,.61,.36,1);
    --t-fast: .18s var(--ease);
    --t: .32s var(--ease);
    --nav-h: 100px;
}

/* ============================================================
   2. RESET / BASE  (override legacy body + Bootstrap)
   ============================================================ */
.gots * { font-family: var(--ff-body); }

body {
    background: var(--c-ink-900) !important;
    color: var(--c-text) !important;
    font-family: var(--ff-body) !important;
    font-size: var(--fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

.gots h1, .gots h2, .gots h3, .gots h4,
h1 span, h2 span, h3 span {
    font-family: var(--ff-display);
    line-height: 1.08;
    letter-spacing: -.02em;
    font-weight: 600;
}

.gots img { max-width: 100%; display: block; }
::selection { background: var(--c-brand); color: #fff; }

html { scroll-behavior: smooth; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--c-ink-900); }
::-webkit-scrollbar-thumb { background: var(--c-ink-600); border-radius: 99px; border: 3px solid var(--c-ink-900); }
::-webkit-scrollbar-thumb:hover { background: var(--c-brand); }

/* ============================================================
   3. LAYOUT PRIMITIVES
   ============================================================ */
.gots-shell { background: var(--c-ink-900); position: relative; }

.section {
    padding: clamp(56px, 8vw, 120px) 0;
    position: relative;
}
.section--tight { padding: clamp(40px, 5vw, 72px) 0; }

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 40px);
}

.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--split { grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(32px, 5vw, 72px); }

@media (max-width: 980px) {
    .grid--split, .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) and (min-width: 981px) {
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   4. TYPOGRAPHY HELPERS
   ============================================================ */
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--ff-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-brand-2);
    padding: 7px 14px;
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-pill);
    background: var(--glass-2);
    backdrop-filter: blur(8px);
}
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c-brand); box-shadow: 0 0 12px var(--c-brand); flex: 0 0 auto; }

.section-head { max-width: 720px; margin-bottom: var(--sp-8); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--fs-h2); margin: var(--sp-4) 0 var(--sp-3) !important; }
.section-head p { color: var(--c-muted); font-size: var(--fs-lead); }

.text-gradient { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-cyan { background: var(--grad-cyan); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============================================================
   5. BUTTONS  (preserve .global_btn hook)
   ============================================================ */
.global_btn,
.btn-2026 {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--ff-body) !important;
    font-weight: 600 !important;
    font-size: .95rem !important;
    letter-spacing: .01em;
    padding: 14px 28px !important;
    border-radius: var(--r-pill) !important;
    border: none !important;
    cursor: pointer;
    color: #fff !important;
    background: var(--grad-brand) !important;
    box-shadow: 0 10px 30px -8px rgba(var(--c-brand-2-rgb),.5) !important;
    transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast) !important;
    text-decoration: none !important;
    line-height: 1.1;
}
.global_btn:hover, .btn-2026:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 16px 40px -8px rgba(var(--c-brand-2-rgb),.65) !important;
    color: #fff !important;
}
.global_btn:active, .btn-2026:active { transform: translateY(0); }

.btn-ghost {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--ff-body); font-weight: 600; font-size: .95rem;
    padding: 13px 26px; border-radius: var(--r-pill);
    color: var(--c-text); text-decoration: none;
    background: var(--glass-2);
    border: 1px solid var(--c-line-2);
    backdrop-filter: blur(10px);
    transition: var(--t-fast);
}
.btn-ghost:hover { background: rgba(255,255,255,.07); border-color: var(--c-brand); color: var(--c-text); transform: translateY(-2px); }

/* ============================================================
   6. NAVBAR  (sticky glass)  — preserves nav structure hooks
   ============================================================ */
nav { position: sticky; top: 0; z-index: 1000; }

/* Hide legacy decorative blocks we no longer use */
.topNav, .event_date, .nav_right_block { display: none !important; }

.nav-bar {
    position: sticky; top: 0; z-index: 1000;
    background: var(--glass);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--c-line);
    transition: var(--t);
}
/* neutralize legacy .myNav (same element carries both classes) */
.nav-bar.myNav {
    display: block !important;
    background: var(--glass) !important;
    padding: 0 !important;
    box-shadow: none;
    flex-wrap: nowrap;
    gap: 0;
}
.nav-bar.sticky,
.nav-bar.myNav.sticky { background: rgba(5,10,22,.92) !important; box-shadow: 0 12px 40px -18px rgba(0,0,0,.8); padding: 0 !important; }

.nav-inner {
    max-width: var(--maxw); margin-inline: auto;
    padding: 0 clamp(18px, 4vw, 36px);
    height: var(--nav-h);
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

.nav-brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav-brand img { height: 72px; width: auto; filter: drop-shadow(0 2px 12px rgba(40,180,220,.22)); transition: height .3s; }

/* shrink logo slightly on mobile */
@media (max-width: 1180px) {
    .nav-brand img { height: 58px; }
}
@media (max-width: 600px) {
    .nav-brand img { height: 50px; }
}

/* announcement micro-bar */
.nav-ticker {
    background: linear-gradient(135deg, #0a2e52 0%, #0d4f87 100%);
    color: #fff;
    text-align: center;
    font-size: var(--fs-sm); font-weight: 600; line-height: 1.4;
    padding: 7px 16px;
    display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: nowrap;
    overflow: hidden;
    /* slide-in from left to right on first load */
    animation: nav-ticker-slide-in .8s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes nav-ticker-slide-in {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}
.nav-ticker b { font-weight: 700; }
.nav-ticker sup { font-size: .65em; }
.nav-ticker .sep { opacity: .55; }
.nav-ticker__divider { width: 1px; height: 22px; background: rgba(255,255,255,.35); flex-shrink: 0; }
.nav-ticker__badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 8px;
    padding: 4px 10px 4px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}
.nav-ticker__badge .ticker-label { /* "Organised by" / "Presenting Partner" text */
    display: inline;
}
.nav-ticker__logo {
    height: 28px; width: auto; object-fit: contain;
    vertical-align: middle;
    background: #fff;
    border-radius: 4px;
    padding: 2px 8px;
    filter: none;
    opacity: 1;
    flex-shrink: 0;
}

/* Mobile ticker — single tight row, hide label text, show only logos */
@media (max-width: 600px) {
    .nav-ticker { font-size: .7rem; gap: 8px; padding: 6px 12px; }
    .nav-ticker .sep { display: none; }
    .nav-ticker__divider { display: none; }
    .nav-ticker__badge .ticker-label { display: none; } /* hide "Organised by" text */
    .nav-ticker__badge { padding: 3px 6px; gap: 4px; border-radius: 6px; }
    .nav-ticker__logo { height: 22px; padding: 2px 5px; }
}

/* desktop menu */
.nav-menu { display: flex; align-items: center; gap: 1px; flex-wrap: nowrap; }
.nav-menu > li { position: relative; }
.nav-menu > li > a {
    display: inline-flex; align-items: center; gap: 4px;
    white-space: nowrap;
    color: var(--c-text); text-decoration: none;
    font-size: .8rem; font-weight: 500;
    padding: 9px 10px; border-radius: var(--r-sm);
    transition: var(--t-fast);
    text-transform: none; letter-spacing: .01em;
}
.nav-menu > li > a:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-menu > li > a i { font-size: 1rem; transition: var(--t-fast); margin-left: -2px; }
.nav-menu > li:hover > a i.bx-chevron-down { transform: rotate(180deg); color: var(--c-brand); }

/* dropdown */
.nav-menu .dropdown_menu__list {
    position: absolute; top: calc(100% + 10px); left: 0;
    min-width: 252px;
    background: rgba(10,20,36,.97);
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-md);
    padding: 8px;
    box-shadow: var(--sh-lg);
    backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: var(--t-fast);
    z-index: 50;
}
.nav-menu .dropdown_menu:hover > .dropdown_menu__list { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu .dropdown_menu__list > a {
    display: block; color: #eef3fb !important; text-decoration: none;
    font-size: .85rem; font-weight: 500;
    padding: 10px 12px; border-radius: 8px;
    transition: var(--t-fast);
    text-transform: none; letter-spacing: 0; line-height: 1.35;
}
.nav-menu .dropdown_menu__list > a:hover { background: rgba(var(--c-brand-2-rgb),.18); color: var(--c-brand) !important; }

/* nested */
.nested_dropdown { position: relative; }
.nested_dropdown > a.has_submenu {
    display: flex; align-items: center; justify-content: space-between;
    color: #eef3fb !important; font-size: .85rem; font-weight: 500;
    padding: 10px 12px; border-radius: 8px; text-decoration: none;
    text-transform: none; letter-spacing: 0;
}
.nested_dropdown > a.has_submenu:hover { background: rgba(var(--c-brand-2-rgb),.18); color: var(--c-brand) !important; }
.nested_dropdown__list {
    position: absolute; top: -8px; left: calc(100% + 8px);
    min-width: 230px;
    background: rgba(10,20,36,.98);
    border: 1px solid var(--c-line-2); border-radius: var(--r-md);
    padding: 8px; box-shadow: var(--sh-lg);
    opacity: 0; visibility: hidden; transform: translateX(8px);
    transition: var(--t-fast); z-index: 60;
}
.nested_dropdown:hover > .nested_dropdown__list { opacity: 1; visibility: visible; transform: translateX(0); }
.nested_dropdown__list a {
    display: block; color: #eef3fb !important; font-size: .82rem; font-weight: 500;
    padding: 9px 12px; border-radius: 8px; text-decoration: none; text-transform: none;
}
.nested_dropdown__list a:hover { background: rgba(var(--c-brand-2-rgb),.18); color: var(--c-brand) !important; }

.nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* redundant with the REGISTER NOW menu item — hidden on desktop, present in mobile slide menu */
.nav-register { display: none; }

/* hamburger */
.menu_icon {
    display: none; cursor: pointer;
    width: 44px; height: 44px; border-radius: 12px;
    align-items: center; justify-content: center;
    background: rgba(40,180,220,.15);
    border: 1.5px solid rgba(40,180,220,.4);
    color: #28b4dc;
    font-size: 1.5rem;
    transition: background .2s, border-color .2s;
}
.menu_icon:hover {
    background: rgba(40,180,220,.28);
    border-color: #28b4dc;
}

@media (max-width: 1180px) {
    .nav-menu { display: none; }
    .menu_icon { display: inline-flex; }
}

/* ============================================================
   7. MOBILE NAV  (preserve .mobile_nav.show / toggleMobileDropdown)
   ============================================================ */
.mobile_nav {
    position: fixed; inset: 0; z-index: 2000;
    background: #061220;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    visibility: hidden;
}
/* SOLID dark panel — override legacy `.mobile_nav.show{background:rgba(0,0,0,.5)}`
   (specificity 0,2,0) which otherwise leaves the panel half-transparent and the
   page bleeds through. */
.mobile_nav.show { transform: translateX(0); visibility: visible; background: #061220; }
/* Neutralise legacy style.css (white bg, position:absolute, 33/50/90% width)
   so the menu is a SOLID, full-width dark panel. */
.mobile_nav__content {
    position: static;
    width: 100%;
    min-height: 100vh;
    background: #061220;
    box-shadow: none;
    padding: 0 0 80px;
}

/* Header row inside mobile nav */
.mobile_header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 16px;
    border-bottom: 1px solid rgba(40,180,220,.15);
    background: rgba(4,12,30,.9);
    position: sticky; top: 0; z-index: 10;
}
.mobile_logo img {
    height: 48px; width: auto;
    filter: drop-shadow(0 2px 8px rgba(40,180,220,.3));
}
.cancel_icon {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(40,180,220,.12);
    border: 1.5px solid rgba(40,180,220,.35);
    color: #28b4dc; font-size: 1.5rem; cursor: pointer;
    transition: background .2s;
}
.cancel_icon:hover { background: rgba(40,180,220,.25); }

/* Mobile menu list */
.mobile_menu { padding: 8px 0; }
.mobile_menu ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }

/* Top-level items */
.mobile_menu > ul > li > a,
.mobile_menu__dropdown > a {
    display: flex; align-items: center; justify-content: space-between;
    color: #e2eaf6 !important;
    text-decoration: none;
    font-size: 1rem; font-weight: 500;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,.14);
    background: transparent;
    transition: background .18s, color .18s;
}
.mobile_menu > ul > li > a:hover,
.mobile_menu__dropdown > a:hover {
    background: rgba(40,180,220,.08);
    color: #28b4dc !important;
}
.mobile_menu__dropdown > a i {
    color: #28b4dc;
    font-size: 1.1rem;
    transition: transform .25s;
    flex-shrink: 0;
}

/* Sub-list container — collapsed by default, expands when the parent <li>
   gets `.active`. Authoritative: overrides legacy style.css `height:0` rule. */
.mobile_menu__dropdown-list {
    background: rgba(4,12,30,.6);
    border-left: 2px solid rgba(40,180,220,.35);
    margin: 0 0 0 20px;
    height: auto;            /* neutralise legacy height:0 */
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s var(--ease);
}
.mobile_menu__dropdown.active > .mobile_menu__dropdown-list {
    max-height: 2500px;      /* generous cap so tall/nested lists never clip */
}

/* chevron flips when its own dropdown is open */
.mobile_menu__dropdown > a i {
    transition: transform .3s var(--ease);
}
.mobile_menu__dropdown.active > a > i {
    transform: rotate(180deg);
}
.mobile_menu__dropdown-list ul {
    list-style: none; margin: 0; padding: 0;
}
.mobile_menu__dropdown-list li a {
    display: flex; align-items: center; justify-content: space-between;
    color: rgba(200,215,235,.85) !important;
    font-size: .9rem; font-weight: 400;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(255,255,255,.09);
    text-decoration: none;
    transition: background .18s, color .18s;
}
.mobile_menu__dropdown-list li a:hover {
    background: rgba(40,180,220,.1);
    color: #28b4dc !important;
}

/* Nested sub-sub-list */
.mobile_menu__dropdown-list .mobile_menu__dropdown > a {
    color: rgba(200,215,235,.85) !important;
    font-size: .9rem;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}
.mobile_menu__dropdown-list .mobile_menu__dropdown-list {
    margin-left: 16px;
    border-left: 2px solid rgba(40,180,220,.2);
}
.mobile_menu__dropdown-list .mobile_menu__dropdown-list li a {
    font-size: .83rem;
    padding: 9px 14px;
    color: rgba(170,195,225,.8) !important;
}

/* Register CTA at bottom of mobile menu */
.mobile_menu .mobile-register-cta {
    margin: 20px 20px 0;
}
.mobile_menu .mobile-register-cta a {
    display: block; text-align: center;
    background: linear-gradient(135deg,#1464a0,#28b4dc);
    color: #fff !important;
    font-weight: 700; font-size: .95rem;
    padding: 13px 20px; border-radius: 50px;
    text-decoration: none;
    letter-spacing: .03em;
}

/* ============================================================
   8. HERO / BANNER  (Slick: .banner_slider / .banner_box)
   ============================================================ */
.banner_wrapper { position: relative; background: var(--c-ink-900); }
.banner_wrapper::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: var(--grad-hero);
    pointer-events: none;
}
.banner_slider { position: relative; z-index: 1; }
.banner_box { position: relative; }
.banner_box .banner_img { position: relative; }
.banner_box .banner_img img {
    width: 100%; height: clamp(460px, 76vh, 760px); object-fit: cover;
    opacity: .3;
    filter: saturate(1.05);
}
/* symmetric scrim so any baked-in image text stays subdued and content is centered/readable */
.banner_box .banner_img::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(80% 80% at 50% 50%, rgba(5,10,22,.45) 0%, rgba(5,10,22,.82) 100%),
        linear-gradient(0deg, var(--c-ink-900) 2%, transparent 55%);
}
.banner_content {
    position: absolute !important; z-index: 3;
    top: 50% !important; left: 50% !important; right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 100%; max-width: 980px;
    padding-inline: clamp(20px, 5vw, 40px);
    text-align: center !important;
    display: flex; flex-direction: column; align-items: center;
}
.banner_content .eyebrow { margin: 0 auto 22px; }
.banner_content h1 {
    font-size: var(--fs-display);
    max-width: 18ch; margin: 0 auto 22px !important;
    font-weight: 700; text-shadow: 0 4px 40px rgba(0,0,0,.5);
}
.banner_content p {
    color: #c8d4e6; font-size: var(--fs-lead);
    max-width: 60ch; margin: 0 auto 32px !important;
    text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.banner_content .myBtn { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 0 !important; }

/* slick arrows / dots */
.banner-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 50px; height: 50px; border-radius: 50%;
    background: var(--glass); border: 1px solid var(--c-line-2);
    color: #fff; font-size: 1.6rem; cursor: pointer; backdrop-filter: blur(10px);
    display: flex !important; align-items: center; justify-content: center;
    transition: var(--t-fast);
}
.banner-arrow:hover { background: var(--c-brand); color: #fff; }
.banner-prev { left: clamp(14px,3vw,32px); }
.banner-next { right: clamp(14px,3vw,32px); }
.banner_slider .slick-dots { bottom: 26px; z-index: 6; }
.banner_slider .slick-dots li button:before { color: #fff; opacity: .4; font-size: 9px; }
.banner_slider .slick-dots li.slick-active button:before { color: var(--c-brand); opacity: 1; }

@media (max-width: 768px) {
    .banner-arrow { display: none !important; }
    .banner_box .banner_img img { opacity: .3; }
}

/* previous participants logo slider */
.participants-strip {
    position: relative; z-index: 4;
    margin-top: -1px;
    background: var(--c-ink-800);
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    padding: 22px 0 18px;
}
.participants-strip__head {
    text-align: center;
    margin-bottom: 14px;
}
.participants-strip__head span {
    font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--c-muted);
}
.participants-slider {
    overflow: hidden;
    position: relative;
}
.participants-slider::before,
.participants-slider::after {
    content: "";
    position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.participants-slider::before { left: 0;  background: linear-gradient(to right,  var(--c-ink-800) 0%, transparent 100%); }
.participants-slider::after  { right: 0; background: linear-gradient(to left, var(--c-ink-800) 0%, transparent 100%); }
.participants-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 20px;
    width: max-content;
    animation: logoScroll 42s linear infinite;
}
.participants-track:hover { animation-play-state: paused; }

/* Each logo sits in a fixed-size white pill card so JPEGs
   with white/light backgrounds are always fully visible */
.participants-track .logo-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 150px;
    height: 64px;
    background: #ffffff;
    border-radius: 8px;
    padding: 10px 14px;
    transition: box-shadow .25s ease, transform .25s ease;
}
.participants-track .logo-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,.35);
    transform: translateY(-2px);
}
.participants-track .logo-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    /* no filter — always full original colour */
}

@keyframes logoScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (max-width: 600px) {
    .participants-track { gap: 12px; animation-duration: 28s; }
    .participants-track .logo-card { width: 110px; height: 48px; padding: 8px 10px; }
    .participants-slider::before,
    .participants-slider::after { width: 60px; }
}

/* ============================================================
   9. SURFACE / CARDS
   ============================================================ */
.surface {
    background: linear-gradient(180deg, rgba(22,38,63,.6) 0%, rgba(10,20,36,.6) 100%);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: clamp(24px, 3vw, 40px);
    position: relative;
    overflow: hidden;
}

.feature-card {
    background: linear-gradient(180deg, rgba(22,38,63,.55), rgba(10,20,36,.35));
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: 30px;
    transition: var(--t);
    position: relative; overflow: hidden;
}
.feature-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--grad-brand); transform: scaleX(0); transform-origin: left; transition: var(--t);
}
.feature-card:hover { transform: translateY(-6px); border-color: var(--c-line-2); box-shadow: var(--sh-md); }
.feature-card:hover::before { transform: scaleX(1); }
.feature-card .ic {
    width: 54px; height: 54px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: var(--c-brand);
    background: rgba(var(--c-brand-2-rgb),.12); border: 1px solid rgba(var(--c-brand-2-rgb),.25);
    margin-bottom: 18px;
}
.feature-card h3 { font-size: var(--fs-h3); margin-bottom: 10px !important; color: #fff; }
.feature-card p { color: var(--c-muted); font-size: .95rem; }

/* media split (about) */
.media-frame {
    position: relative; border-radius: var(--r-lg); overflow: hidden;
    border: 1px solid var(--c-line-2); box-shadow: var(--sh-lg);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame::after { content:""; position:absolute; inset:0; box-shadow: inset 0 0 120px rgba(5,10,22,.6); }

/* ============================================================
   10. SPEAKER CARDS  (Slick .testimonial_slider + legacy .speaker-card)
   ============================================================ */
.testimonial_slider { margin: 0 -10px; }
.testimonial_slider .slick-track { display: flex !important; align-items: stretch; padding: 14px 0 44px; }
.testimonial_slider .slick-slide { height: auto; }
.testimonial_slider .slick-slide > div { height: 100%; }

.speaker-card { padding: 0 10px !important; }
.speaker-card .card {
    width: 100% !important;
    display: flex !important; flex-direction: column;
    background: linear-gradient(180deg, rgba(22,38,63,.85), rgba(10,20,36,.92)) !important;
    border: 1px solid var(--c-line) !important;
    border-radius: var(--r-lg) !important;
    overflow: hidden !important;
    transition: var(--t);
    position: relative;
    margin-bottom: 0 !important;
}
.speaker-card .card:hover { transform: translateY(-6px); border-color: var(--c-brand) !important; box-shadow: var(--sh-md); }
.speaker-card .card-img-top {
    width: 100% !important; height: 290px !important; object-fit: cover !important; object-position: top center;
    border-radius: 0 !important; box-shadow: none !important; flex: 0 0 auto;
}
/* name plate */
.speaker-card .card_name {
    position: static !important;
    background: transparent !important;
    font-family: var(--ff-display); font-weight: 600; font-size: 1.02rem; color: #fff;
    text-align: left !important;
    padding: 16px 18px 2px !important;
    line-height: 1.25;
}
/* role / org block — neutralize legacy absolute hover-overlay so it's always visible */
.speaker-card .product-detail {
    position: static !important;
    height: auto !important;
    width: auto !important;
    bottom: auto !important;
    overflow: visible !important;
    background: transparent !important;
    text-align: left !important;
    display: block !important;
    padding: 0 18px 20px !important;
}
.speaker-card .card:hover .product-detail { height: auto !important; display: block !important; }
.speaker-card .product-detail > div { display: block; }
.speaker-card .product-detail p {
    color: var(--c-brand-2); font-size: .78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px !important; line-height: 1.3;
}
.speaker-card .product-detail .card-title,
.speaker-card .product-detail h5 { display: none !important; }
.speaker-card .product-detail blockquote { margin: 0 !important; border: none !important; padding: 0 !important; }
.speaker-card .product-detail blockquote p { color: var(--c-muted); font-size: .88rem; font-weight: 400; text-transform: none; letter-spacing: 0; margin: 2px 0 !important; }
.speaker-card .product-detail blockquote p a { color: var(--c-muted); text-decoration: none !important; }
.speaker-card .product-detail blockquote p a:hover { color: var(--c-brand); }

.sliders .slick-dots li button:before { color: var(--c-muted); }
.sliders .slick-dots li.slick-active button:before { color: var(--c-brand); }

/* ---- Premium speaker card (.spk) ---- */
.speaker-card { height: auto; padding: 0 10px !important; }

/* equal-height slick rows */
.spk-home-slider .slick-track  { display: flex !important; align-items: stretch; }
.spk-home-slider .slick-slide  { display: flex !important; flex-direction: column; height: auto; }
.spk-home-slider .slick-slide > div { display: flex; flex-direction: column; flex: 1 1 auto; }
.spk-home-slider .spk-slide    { display: flex !important; flex-direction: column; flex: 1 1 auto; }
.spk-home-slider .spk-slide .spk { height: 100%; }

.spk {
    position: relative; height: 100%;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, rgba(22,38,63,.85) 0%, rgba(8,15,28,.96) 100%);
    border: 1px solid var(--c-line);
    border-radius: 20px;
    overflow: hidden;
    transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.spk::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 4;
    background: var(--grad-brand); transform: scaleX(0); transform-origin: left;
    transition: transform .45s var(--ease);
}
.spk:hover { transform: translateY(-6px); border-color: rgba(var(--c-brand-2-rgb),.5);
    box-shadow: 0 24px 56px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(var(--c-brand-2-rgb),.22); }
.spk:hover::before { transform: scaleX(1); }

/* fixed-ratio image so every card photo is the same height */
.spk__media {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 3 / 3.6;
    background: #0d1726;
}
.spk__media img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
    transition: transform .6s var(--ease);
}
.spk:hover .spk__media img { transform: scale(1.06); }
.spk__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 45%, rgba(8,15,28,.5) 78%, rgba(8,15,28,.95) 100%); }

.spk__tag {
    position: absolute; left: 14px; bottom: 14px; z-index: 3;
    font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: #fff; background: var(--grad-brand);
    padding: 5px 11px; border-radius: var(--r-pill); max-width: calc(100% - 28px);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.spk__li {
    position: absolute; top: 14px; right: 14px; z-index: 5;
    width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8,15,28,.7); border: 1px solid var(--c-line-2);
    color: #fff; font-size: 1.25rem; text-decoration: none !important;
    backdrop-filter: blur(8px);
    opacity: 1; transform: none; transition: background .25s, border-color .25s;
}
.spk__li:hover { background: #0a66c2; border-color: #0a66c2; color: #fff; }

/* body — fixed height so all cards are uniform */
.spk__body {
    flex: 1 1 auto;
    padding: 16px 18px 20px;
    display: flex; flex-direction: column;
}
.spk__name {
    font-family: var(--ff-display); font-size: 1rem; font-weight: 600;
    color: #fff; line-height: 1.3; margin-bottom: 8px !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.spk__role {
    color: var(--c-brand-2); font-size: .75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; line-height: 1.4;
    margin-bottom: 4px !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.spk__org {
    color: var(--c-muted); font-size: .85rem; line-height: 1.4;
    margin-top: auto;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ============================================================
   11. COUNTER  (preserve .counter_box h3[data-target])
   ============================================================ */
.counter_wrapper {
    background: var(--c-ink-900);
    padding: clamp(48px, 6vw, 80px) 0;
}
.counter_wrapper .main_heading,
.counter_wrapper .white_heading { text-align: center; margin-bottom: var(--sp-7); }

.counter_wrapper__content {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    align-items: stretch;   /* forces all cells to match the tallest in the row */
    grid-auto-rows: 1fr;    /* every row shares the same height */
}

/* each card — starts hidden, animates in via JS */
.counter_box {
    background: var(--c-ink-800);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: 36px 20px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    cursor: default;
    /* equal height: fill the grid cell fully, content centered */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;            /* fill the grid cell — grid-auto-rows:1fr drives uniformity */
    min-height: 220px;       /* safety floor for very wide screens where text never wraps */
    box-sizing: border-box;
    /* slide-up hidden state */
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .55s var(--ease), transform .55s var(--ease),
                border-color .4s, box-shadow .4s;
}
/* revealed state (added by JS) */
.counter_box.cb-visible {
    opacity: 1;
    transform: translateY(0);
}

/* top accent line */
.counter_box::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: 0; height: 2px;
    background: var(--grad-brand);
    border-radius: 0 0 2px 2px;
    transition: width .55s var(--ease), left .55s var(--ease);
}
.counter_box.cb-visible::before { width: 60%; left: 20%; }

/* glow state while counter is running */
.counter_box.cb-counting {
    border-color: rgba(40, 180, 220, .45);
    box-shadow: 0 0 28px -6px rgba(40, 180, 220, .25),
                inset 0 0 40px -20px rgba(40, 180, 220, .10);
}
.counter_box.cb-counting::before { width: 100%; left: 0; }

/* hover */
.counter_box:hover {
    border-color: rgba(40, 180, 220, .35);
    box-shadow: 0 8px 32px -10px rgba(40, 180, 220, .2);
    transform: translateY(-4px) !important;
}

/* icon circle */
.counter_box__icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(40, 180, 220, .10);
    border: 1px solid rgba(40, 180, 220, .25);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
    transition: background .35s, border-color .35s, transform .35s;
}
.counter_box__icon i {
    font-size: 1.55rem;
    color: var(--c-brand);
    transition: transform .35s var(--ease);
}
.counter_box:hover .counter_box__icon {
    background: rgba(40, 180, 220, .18);
    border-color: rgba(40, 180, 220, .5);
    transform: scale(1.1);
}
.counter_box:hover .counter_box__icon i { transform: scale(1.12); }
.counter_box.cb-counting .counter_box__icon {
    background: rgba(40, 180, 220, .18);
    border-color: var(--c-brand);
}

/* number */
.counter_box h3 {
    font-family: var(--ff-display);
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px !important;
    line-height: 1;
    transition: color .3s;
}
.counter_box.cb-counting h3 { color: #7dd5ec; }
.counter_box h3 span { color: var(--c-brand); }

/* label */
.counter_box p {
    color: var(--c-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .11em;
    font-weight: 600;
    margin: 0 !important;
}

/* responsive */

@media (max-width: 1100px) {
    .counter_wrapper__content {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 1fr;
    }
}

@media (max-width: 600px) {
    .counter_wrapper__content {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 1fr;
        gap: 14px;
    }
    .counter_box { min-height: 180px; padding: 28px 14px 22px; }
}

/* ============================================================
   12. SECTION HEADINGS (legacy .main_heading reuse)
   ============================================================ */
.main_heading h2 { font-family: var(--ff-display); font-size: var(--fs-h2); color: #fff; font-weight: 600; }
.main_heading h2 span { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.main_heading p { color: var(--c-muted); margin-top: 12px !important; font-size: var(--fs-lead); }
.main_heading.center, .white_heading { text-align: center; }
.sliders .main_heading { text-align: center; margin-bottom: var(--sp-7); }

.global_wrapper { padding: clamp(56px, 8vw, 110px) 0; background: var(--c-ink-900); }

/* ============================================================
   13. BREADCRUMB / PAGE HERO  (legacy .breadcrumb_wrapper)
   — single source of truth; overrides about.css, pages.css, style.css
   ============================================================ */
.breadcrumb_wrapper,
.about-breadcrumb {
    position: relative !important;
    padding: clamp(36px, 5vw, 52px) 0 clamp(28px, 4vw, 44px) !important;
    background: linear-gradient(135deg, #061827 0%, #0a2540 60%, #0d3560 100%) !important;
    border-bottom: 1px solid var(--c-line);
    overflow: hidden;
    text-align: center !important;
}

/* dot grid texture */
.breadcrumb_wrapper::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.045) 1px, transparent 0);
    background-size: 32px 32px; opacity: .7;
}

/* subtle glow */
.breadcrumb_wrapper::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 70% 120% at 50% 50%, rgba(40,180,220,.08) 0%, transparent 70%);
}

.breadcrumb_wrapper__content {
    position: relative; z-index: 2;
    display: flex; flex-direction: column;
    align-items: center; text-align: center !important;
}
.breadcrumb_wrapper__content .eyebrow {
    margin-bottom: 14px !important;
}
.breadcrumb_wrapper__content h2 {
    font-family: var(--ff-display) !important;
    font-size: clamp(1.6rem, 3.5vw, 2.5rem) !important;
    color: #fff !important; font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-transform: none !important;
}
/* span inside h2 — gradient brand colour, same size as parent */
.breadcrumb_wrapper__content h2 span {
    font-size: inherit !important;
    background: var(--grad-brand) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    color: transparent !important;
}

/* pages.css override: kills the rogue 25px span rule */
.breadcrumb_wrapper__content h2 span { font-size: inherit !important; }

@media (max-width: 768px) {
    .breadcrumb_wrapper,
    .about-breadcrumb { padding: 28px 0 24px !important; }
    .breadcrumb_wrapper__content h2 { font-size: clamp(1.3rem, 5vw, 1.8rem) !important; }
}

/* ============================================================
   14. FORMS  (preserve field names, .error, .global_btn, ids)
   ============================================================ */
.contact_wrapper { background: var(--c-ink-900); }
.contact_left b {
    display: inline-block; font-family: var(--ff-body); font-size: var(--fs-xs);
    letter-spacing: .18em; text-transform: uppercase; color: var(--c-brand-2);
    font-weight: 700; margin-bottom: 14px;
}
.contact_left h3 { font-family: var(--ff-display); font-size: var(--fs-h2); color: #fff; margin-bottom: 14px !important; }
.contact_left h3 span { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.contact_left > p { color: var(--c-muted); font-size: var(--fs-lead); margin-bottom: 28px !important; max-width: 50ch; }

.contact_input { margin-top: 8px; }
.contact_input form .row { margin-bottom: 0; }

.contact_input input,
.contact_input textarea,
.contact_input select,
.form-select,
.brochure-modal__body input,
.brochure-modal__body select,
.brochure-modal__body textarea {
    width: 100%;
    background: var(--glass-2) !important;
    border: 1px solid var(--c-line-2) !important;
    border-radius: var(--r-sm) !important;
    color: var(--c-text) !important;
    font-family: var(--ff-body) !important;
    font-size: .95rem !important;
    padding: 14px 16px !important;
    margin: 8px 0 !important;
    transition: var(--t-fast);
    outline: none !important;
    box-shadow: none !important;
}
.contact_input input::placeholder,
.contact_input textarea::placeholder,
.brochure-modal__body input::placeholder,
.brochure-modal__body textarea::placeholder { color: var(--c-muted-2); }
.contact_input input:focus,
.contact_input textarea:focus,
.contact_input select:focus,
.form-select:focus,
.brochure-modal__body input:focus,
.brochure-modal__body textarea:focus,
.brochure-modal__body select:focus {
    border-color: var(--c-brand) !important;
    box-shadow: 0 0 0 3px rgba(var(--c-brand-2-rgb),.18) !important;
    background: rgba(20,33,56,.85) !important;
}
.contact_input select option, .form-select option { background: var(--c-ink-800); color: var(--c-text); }
.contact_input textarea { min-height: 130px; resize: vertical; }
.contact_input .global_btn { width: 100%; margin-top: 14px !important; }

.error, small.error { display: block; color: #ff7676 !important; font-size: .78rem; margin: 2px 2px 6px; min-height: 0; }

.contact_right .media-frame, .contact_img { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-line-2); box-shadow: var(--sh-lg); }
.contact_img img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }
.contact_right iframe { width: 100% !important; border-radius: var(--r-lg) var(--r-lg) 0 0; display: block; border: 1px solid var(--c-line-2) !important; }
.contact_right { padding-top: clamp(24px, 3vw, 40px); }

/* office info card */
.office_info {
    background: var(--surface, rgba(22,38,63,.5));
    background: linear-gradient(180deg, rgba(22,38,63,.6), rgba(10,20,36,.6));
    border: 1px solid var(--c-line); border-top: none;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    padding: 26px;
}
.office_info h3 { font-family: var(--ff-display); color: #fff; font-size: 1.2rem; margin-bottom: 6px !important; }
.office_info > p { color: var(--c-muted); margin-bottom: 16px !important; font-size: .92rem; }
.office_info__list a { display: flex; align-items: center; gap: 8px; color: var(--c-muted); text-decoration: none; padding: 6px 0; font-size: .9rem; transition: var(--t-fast); }
.office_info__list a:hover { color: var(--c-brand); }
.office_info__list a i { color: var(--c-brand); font-size: 1.05rem; }

.alert { border-radius: var(--r-sm) !important; border: 1px solid var(--c-line-2) !important; }
.alert-success { background: rgba(54,209,220,.12) !important; color: #8feaf2 !important; }
.alert-danger { background: rgba(255,118,118,.12) !important; color: #ffb0b0 !important; }

/* ============================================================
   15. BROCHURE MODAL (#exampleModal) + thank-you popup
   ============================================================ */
.brochure-modal {
    background: var(--c-ink-800) !important;
    border: 1px solid var(--c-line-2) !important;
    border-radius: var(--r-lg) !important;
    overflow: hidden;
    box-shadow: var(--sh-lg) !important;
}
.brochure-modal__header {
    background: var(--grad-brand) !important;
    border: none !important;
    padding: 20px 26px !important;
}
.brochure-modal__header .modal-title { font-family: var(--ff-display); font-weight: 600; color: #fff !important; }
.brochure-modal__body { padding: 26px !important; }
.brochure-modal__body .global_btn { width: 100%; }
.form_poppup .modal-content { background: transparent !important; border: none !important; }
.form_poppup .modal-bg { padding: 0 !important; }
.form_poppup .cancel_form { position: absolute; top: 12px; right: 12px; z-index: 5; }

/* ============================================================
   16. FOOTER  (legacy footer markup, restyled)
   ============================================================ */
footer {
    position: relative; overflow: hidden;
    background:
        radial-gradient(50% 70% at 12% 0%, rgba(var(--c-brand-2-rgb),.08) 0%, transparent 60%),
        var(--c-ink-900);
    border-top: 1px solid var(--c-line);
}
/* gradient top strip */
footer::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
    background: var(--grad-brand);
}
.footer_wrapper { position: relative; z-index: 2; padding: clamp(56px, 8vw, 92px) 0 clamp(32px, 5vw, 48px); }
.footer_img { display: none; }
.footer_wrapper > .container { position: relative; z-index: 2; }
.footer_logo img { height: 76px; width: auto; margin-bottom: 22px; }
.footer_tagline { color: var(--c-muted); font-size: .92rem; line-height: 1.65; max-width: 270px; margin: 0 0 22px !important; }
.footer_left { max-width: 320px; }
.social_icon { display: flex; gap: 10px; flex-wrap: wrap; }
.social_icon a {
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--glass-2); border: 1px solid var(--c-line-2);
    color: var(--c-muted); font-size: 1.3rem; line-height: 1;
    transition: var(--t-fast);
}
.social_icon a i { line-height: 1; }
.social_icon a:hover {
    background: var(--grad-brand); border-color: transparent; color: #fff;
    transform: translateY(-3px); box-shadow: 0 10px 22px -8px rgba(var(--c-brand-2-rgb),.55);
}

.footer_box h3 {
    font-family: var(--ff-body); font-size: var(--fs-xs); letter-spacing: .14em;
    text-transform: uppercase; color: var(--c-brand-2); font-weight: 700;
    margin-bottom: 20px !important; position: relative; padding-bottom: 12px;
}
.footer_box h3::after {
    content: ""; position: absolute; bottom: 0; left: 0;
    width: 38px; height: 3px; border-radius: 99px; background: var(--grad-brand);
}
.footer_links { display: flex; flex-direction: column; gap: 4px; }
.footer_links a { color: var(--c-muted); text-decoration: none; font-size: .92rem; padding: 5px 0; transition: var(--t-fast); display: flex; align-items: center; gap: 7px; }
.footer_links a:hover { color: var(--c-brand); }
.footer_links a i { color: var(--c-brand); }
.confex_footer__logo img, .previous_event_logo { max-height: 60px; width: auto; background: #fff; padding: 8px 12px; border-radius: 10px; }
/* copyright bar — match top announcement bar colour, tight against footer */
.copyright { background: linear-gradient(135deg, #0a2e52 0%, #0d4f87 100%); border-top: none; padding: 0; margin: 0; text-align: center; }
.copyright p { color: #fff; font-size: .85rem; padding: 10px 0; margin: 0; }

/* footer contact roles (replaces former inline styles) */
.footer-role { color: var(--c-brand); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; margin: 10px 0 6px !important; }
.footer-divider { border: none; border-top: 1px solid var(--c-line); margin: 12px 0; }
.contact-divider { border: none; border-top: 1px solid var(--c-line); margin: 16px 0; }

/* ============================================================
   17. GENERIC CONTENT (legacy pages auto-lift)
   ============================================================ */
.mywrapper { background: var(--c-ink-900); }

/* top-align text column with image column */
.about_wrapper .grid--split { align-items: start; }

/* nudge the about image down a little so it doesn't sit flush with the first
   line of text — matches the lower image placement used on the other pages.
   Desktop only (the grid stacks below 981px). */
@media (min-width: 981px) {
    .about_wrapper .grid--split .media-frame { margin-top: 48px; }
}

.about_wrapper .about_content h2,
.about_wrapper .about_content .about-h2 { font-family: var(--ff-display); color:#fff; font-size: var(--fs-h2); margin: 0 0 12px !important; }
.about_wrapper .about_content p { color: #c8d4e6; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.85; margin-bottom: 1.2rem !important; }
.about_wrapper .about_img { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-line-2); box-shadow: var(--sh-lg); }
.about_wrapper .about_img img { width: 100%; height: 100%; object-fit: cover; }
.about_content b {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--c-brand-2);
    padding: 7px 14px; border: 1px solid var(--c-line-2); border-radius: var(--r-pill);
    background: var(--glass-2); margin-bottom: 18px;
}

/* ---- About: organizer / venue panels — glass cards (CTA-card style) ---- */
.moto_wrapper { background: var(--c-ink-900); padding: clamp(56px,8vw,110px) 0; }

.organizer-panel {
    position: relative; overflow: hidden;
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, rgba(22,38,63,.9) 0%, rgba(10,20,36,.9) 100%);
    box-shadow: var(--sh-lg);
}
/* soft glow orbs (orange + cyan) like the CTA card */
.organizer-panel::before {
    content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
    background: var(--c-brand); filter: blur(100px); opacity: .18;
    top: -140px; right: -70px; pointer-events: none; z-index: 0;
}
.organizer-panel::after {
    content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%;
    background: var(--c-cyan); filter: blur(100px); opacity: .13;
    bottom: -150px; left: 8%; pointer-events: none; z-index: 0;
}
.organizer-panel > [class*="col-"] { position: relative; z-index: 2; }

.organizer-panel .panel-dark {
    padding: clamp(28px, 3.5vw, 52px);
    display: flex; flex-direction: column; justify-content: flex-start;
    background: transparent;
}
.organizer-panel .panel-dark p { color: #c8d4e6; font-size: 1.02rem; line-height: 1.8; }
.organizer-panel .panel-dark p + p { margin-top: 16px !important; }

/* logo on a floating white chip inside the glass card (instead of a full white slab) */
.moto_img--white {
    background: transparent !important;
    padding: clamp(26px, 3vw, 48px) !important;
    height: 100%;
}
.moto_img--white img {
    max-height: 130px;
    width: auto;
    margin: auto;
    object-fit: contain;
    display: block;
    /* dark card with gradient border glow — no white box */
    background: rgba(15, 30, 54, 0.85);
    border-radius: var(--r-lg);
    padding: 28px 36px;
    border: 1px solid rgba(40, 180, 220, 0.3);
    box-shadow:
        0 0 0 1px rgba(40, 180, 220, 0.12),
        0 0 32px -8px rgba(40, 180, 220, 0.18),
        0 20px 48px -16px rgba(0, 0, 0, 0.6);
    filter: brightness(1.05);
    transition: box-shadow .35s, border-color .35s;
}
.moto_img--white img:hover {
    border-color: rgba(40, 180, 220, 0.55);
    box-shadow:
        0 0 0 1px rgba(40, 180, 220, 0.25),
        0 0 48px -6px rgba(40, 180, 220, 0.28),
        0 24px 56px -16px rgba(0, 0, 0, 0.65);
}

.organizer-section-label { text-align: center; margin: clamp(40px,6vw,72px) 0 var(--sp-6); }
.organizer-section-label h3 {
    display: inline-block; font-family: var(--ff-display); color: #fff; font-size: var(--fs-h3);
    position: relative; padding-bottom: 12px;
}
.organizer-section-label h3::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 56px; height: 3px; background: var(--grad-brand); border-radius: 99px; }

/* ---- Our Event card (RENEWSEC style) ---- */
.event-card {
    position: relative;
    background: var(--c-ink-700);
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-lg);
}
/* gradient top accent bar */
.event-card__bar {
    height: 4px;
    background: linear-gradient(90deg, #1464a0 0%, #28b4dc 55%, var(--c-cyan) 100%);
}
/* subtle background glow */
.event-card::before {
    content: ""; position: absolute; width: 400px; height: 400px; border-radius: 50%;
    background: var(--c-cyan); filter: blur(120px); opacity: .07;
    top: -160px; right: -80px; pointer-events: none;
}
.event-card::after {
    content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
    background: #1464a0; filter: blur(100px); opacity: .12;
    bottom: -120px; left: 5%; pointer-events: none;
}

/* header: logo + title block */
.event-card__header {
    position: relative; z-index: 2;
    display: flex; align-items: flex-start; gap: clamp(20px, 3vw, 40px);
    padding: clamp(28px, 3.5vw, 48px) clamp(28px, 3.5vw, 48px) 0;
    flex-wrap: wrap;
}
.event-card__logo-wrap {
    flex-shrink: 0;
    background: #fff;
    border-radius: var(--r-md);
    padding: 18px 24px;
    box-shadow: 0 12px 40px -12px rgba(0,0,0,.6);
    display: flex; align-items: center; justify-content: center;
}
.event-card__logo-wrap img {
    height: 72px; width: auto; object-fit: contain; display: block;
}
.event-card__title-block {
    flex: 1; min-width: 220px; padding-top: 4px;
}
.event-card__badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--c-cyan); background: rgba(54,209,220,.1);
    border: 1px solid rgba(54,209,220,.25);
    padding: 5px 12px; border-radius: var(--r-pill);
    margin-bottom: 12px;
}
.event-card__name {
    font-family: var(--ff-display); font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700; color: #fff; line-height: 1.1;
    margin: 0 0 16px !important;
}
.event-card__name span {
    background: linear-gradient(135deg, #28b4dc 0%, var(--c-cyan) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.event-card__chips {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.event-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 500;
    color: var(--c-muted); background: var(--glass-2);
    border: 1px solid var(--c-line-2);
    padding: 6px 14px; border-radius: var(--r-pill);
}
.event-chip i { font-size: .9rem; color: var(--c-brand-2); }
.event-chip--highlight {
    color: var(--c-text); border-color: rgba(var(--c-brand-2-rgb), .3);
    background: rgba(var(--c-brand-2-rgb), .08);
}
.event-chip--highlight i { color: var(--c-brand-2); }

/* divider */
.event-card__divider {
    position: relative; z-index: 2;
    margin: clamp(22px, 2.5vw, 32px) clamp(28px, 3.5vw, 48px);
    height: 1px; background: var(--c-line-2);
}

/* body */
.event-card__body {
    position: relative; z-index: 2;
    padding: 0 clamp(28px, 3.5vw, 48px) clamp(28px, 3.5vw, 48px);
}
.event-card__body p {
    color: #c8d4e6; font-size: 1rem; line-height: 1.8; margin: 0 !important;
}
.event-card__body p + p { margin-top: 14px !important; }

@media (max-width: 600px) {
    .event-card__logo-wrap img { height: 52px; }
    .event-card__logo-wrap { padding: 12px 16px; }
}

/* venue — unified two-column layout */
.venue-unified {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

/* left: text */
.venue-unified__text p {
    color: #c8d4e6;
    font-size: 1.02rem;
    line-height: 1.85;
    margin-bottom: 1rem !important;
}

/* right: image + map stacked */
.venue-unified__media {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 100px;            /* stays in view while user reads long text */
}

.venue-unified__img img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: var(--r-lg);
    border: 1px solid var(--c-line-2);
    box-shadow: var(--sh-lg);
    display: block;
}

.venue-unified__map {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--c-line-2);
    box-shadow: var(--sh-md);
}

.venue-unified__map iframe {
    width: 100%;
    height: 240px;
    border: 0;
    display: block;
}

@media (max-width: 900px) {
    .venue-unified {
        grid-template-columns: 1fr;
    }
    .venue-unified__media { position: static; }
    .venue-unified__img img { height: 220px; }
    .venue-unified__map iframe { height: 200px; }
}

/* legacy classes — kept so other pages aren't broken */
.venue-media { display: grid; gap: 16px; height: 100%; align-content: start; }
.venue-map { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--c-line-2); }
.venue-iframe { width: 100%; height: 230px; border: 0; display: block; }

/* ============================================================
   17b. CTA BAND
   ============================================================ */
.cta-band { background: var(--c-ink-900); }
.cta-card {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(22,38,63,.9), rgba(10,20,36,.9));
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-xl);
    padding: clamp(32px, 5vw, 64px);
}
.cta-card__text { position: relative; z-index: 2; max-width: 60ch; }
.cta-card__text h2 { font-size: var(--fs-h2); color: #fff; margin: 16px 0 12px !important; }
.cta-card__text p { color: var(--c-muted); font-size: var(--fs-lead); }
.cta-card__actions { position: relative; z-index: 2; display: flex; gap: 14px; flex-wrap: wrap; }
.cta-orb-1 { width: 280px; height: 280px; top: -120px; right: -60px; }
.cta-orb-2 { width: 220px; height: 220px; bottom: -120px; left: 20%; opacity: .35; }

/* ============================================================
   17c. CONFERENCE PAGE
   ============================================================ */
.global_wrappers { background: var(--c-ink-900); padding: clamp(48px,7vw,96px) 0; }
.attend_wrapper, .keytopics_wrapper { background: var(--c-ink-900); }
.conf-text p, .conf-attend-list { color: #c8d4e6; font-size: 1.02rem; line-height: 1.8; }
.conf_img, .conference_wrapper__img, .keytopics_img {
    border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-line-2); box-shadow: var(--sh-lg);
}
.conf_img img, .conference_wrapper__img img, .keytopics_img img { width: 100%; height: 100%; object-fit: cover; }

/* bulleted lists rendered from DB -> styled ticks, no native bullet */
.conf-attend-list ul, .keytopics_wrapper__content ul {
    display: grid; gap: 12px;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}
.conf-attend-list li, .keytopics_wrapper__content li {
    position: relative; padding-left: 34px; color: #c8d4e6; line-height: 1.55;
    list-style: none !important;
    list-style-type: none !important;
}
.conf-attend-list li::marker, .keytopics_wrapper__content li::marker { display: none; content: ""; }
.conf-attend-list li::before, .keytopics_wrapper__content li::before {
    content: "\ea41"; font-family: "boxicons" !important; font-size: 1rem;
    position: absolute; left: 0; top: 2px; color: var(--c-brand);
    width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--c-brand-2-rgb),.12); border-radius: 7px;
}
.keytopics_wrapper__content {
    background: linear-gradient(180deg, rgba(22,38,63,.55), rgba(10,20,36,.4));
    border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 26px; height: 100%;
}
.keytopics_wrapper__content p { color: #c8d4e6; }
.conf-theme-badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--c-brand-2); padding: 7px 14px; border: 1px solid var(--c-line-2);
    border-radius: var(--r-pill); background: var(--glass-2); margin-bottom: 16px;
}
.conf-topics-label {
    color: #c8d4e6;
    font-size: clamp(1.1rem, 1.8vw, 1.35rem) !important;
    font-weight: 600;
    letter-spacing: .01em;
    margin-top: 18px !important;
}
.conf-topics-label span { color: var(--c-brand-2); }
.keytopics_wrapper .main_heading { text-align: center; margin-bottom: var(--sp-7); }
.keytopics_wrapper .row { row-gap: 24px; align-items: stretch; }
.attend_wrapper .main_heading, .global_wrappers .main_heading { margin-bottom: var(--sp-6); }

/* ============================================================
   17d. WHY OT CYBERSECURITY — feature grid
   ============================================================ */
.why_wrapper, .why_wrapper.blue_bg { background: var(--c-ink-900); padding: clamp(56px,8vw,110px) 0; }
.why_wrapper .main_heading { margin-bottom: var(--sp-8); }
.why_wrapper .why_box {
    height: 100%;
    background: linear-gradient(180deg, rgba(22,38,63,.55), rgba(10,20,36,.35));
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: 32px;
    transition: var(--t);
    position: relative; overflow: hidden;
}
.why_wrapper .why_box::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--grad-brand); transform: scaleX(0); transform-origin: left; transition: var(--t);
}
.why_wrapper .why_box:hover { transform: translateY(-6px); border-color: var(--c-line-2); box-shadow: var(--sh-md); }
.why_wrapper .why_box:hover::before { transform: scaleX(1); }
.why_box__icon {
    width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6);
}
.why_box__icon img { width: 36px; height: 36px; object-fit: contain; }
.why_box h3 { font-family: var(--ff-display); color: #fff; font-size: 1.18rem; margin-bottom: 10px !important; line-height: 1.3; }
.why_box p { color: var(--c-muted); font-size: .95rem; line-height: 1.6; }
.why_wrapper .row { row-gap: 24px; }

/* homepage variant heading — no badge, uniform size */
.why-home-section { padding-top: clamp(56px, 7vw, 96px); }
.why-home-head {
    text-align: center;
    margin-bottom: clamp(32px, 5vw, 56px);
}
.why-home-head h2 {
    font-family: var(--ff-display);
    font-size: clamp(1.75rem, 3.5vw, 2.6rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 14px !important;
}
/* override any span colouring from old breadcrumb style */
.why-home-head h2 span { color: inherit; font-size: inherit; }
.why-home-head p {
    color: var(--c-muted);
    font-size: clamp(.95rem, 1.5vw, 1.1rem);
    max-width: 680px;
    margin: 0 auto !important;
    line-height: 1.65;
}

/* ============================================================
   17e. ADVISORY COMMITTEE — people cards
   ============================================================ */
.committee_members { background: var(--c-ink-900); }
.badge-post {
    display: inline-block; margin: 0 auto 14px !important;
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #fff; background: var(--grad-brand);
    padding: 6px 16px; border-radius: var(--r-pill);
}
.committee_members .new-card,
.committee_members .new-card-members {
    width: 100%; height: 100%;
    display: flex !important; flex-direction: column;
    background: linear-gradient(180deg, rgba(22,38,63,.85), rgba(8,15,28,.96)) !important;
    border: 1px solid var(--c-line) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    transition: var(--t);
    position: relative;
}
.committee_members .new-card::before,
.committee_members .new-card-members::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 4;
    background: var(--grad-brand); transform: scaleX(0); transform-origin: left; transition: var(--t);
}
.committee_members .new-card:hover,
.committee_members .new-card-members:hover {
    transform: translateY(-8px); border-color: rgba(var(--c-brand-2-rgb),.5) !important;
    box-shadow: 0 30px 64px -26px rgba(0,0,0,.85), 0 0 0 1px rgba(var(--c-brand-2-rgb),.22);
}
.committee_members .new-card:hover::before,
.committee_members .new-card-members:hover::before { transform: scaleX(1); }
.committee_members .new-card img,
.committee_members .new-card-members img {
    width: 100% !important;
    height: 220px !important;
    object-fit: contain !important;
    object-position: top center !important;
    background: var(--c-ink-700);
    border-radius: 0 !important;
    display: block;
}
.committee_members .new-card-members img {
    height: 200px !important;
}
.committee_members .card-body { padding: 14px 16px 18px !important; flex: 1 1 auto; background: transparent; }
.committee_members .card-title {
    font-family: var(--ff-display) !important; font-size: 1rem !important; font-weight: 600 !important;
    color: #fff !important; margin-bottom: 5px !important; line-height: 1.25;
}
.committee_members .card-designation { color: var(--c-brand-2); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; line-height: 1.4; margin-bottom: 3px !important; }
.committee_members .card-company { color: var(--c-muted); font-size: .82rem; line-height: 1.4; }

.members-heading { background: var(--c-ink-900); padding: clamp(28px,5vw,56px) 0 0; }
.members-heading h3 {
    font-family: var(--ff-display); color: #fff; font-size: var(--fs-h2); font-weight: 600;
    position: relative; display: inline-block; left: 50%; transform: translateX(-50%); padding-bottom: 14px;
}
.members-heading h3::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 64px; height: 3px; background: var(--grad-brand); border-radius: 99px; }

/* ============================================================
   17f. SPEAKERS LISTING (4-up glass cards + view-profile modal)
   ============================================================ */
.member_wrapper { background: var(--c-ink-900); padding: clamp(48px,7vw,90px) 0; }
.member_wrapper .row { row-gap: 26px; }
.spk-col { display: flex; }
.spk__media.spk-trigger { cursor: pointer; }
.spk__view {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px; font-size: .82rem; font-weight: 600; letter-spacing: .03em;
    color: #fff; background: linear-gradient(0deg, rgba(8,15,28,.92), transparent);
    opacity: 0; transform: translateY(8px); transition: .32s var(--ease);
}
.spk__view i { color: var(--c-brand); font-size: 1.1rem; }
.spk:hover .spk__view { opacity: 1; transform: translateY(0); }

/* speaker profile modal — dark theme to match */
.speaker-modal .modal-content { background: var(--c-ink-800) !important; border: 1px solid var(--c-line-2) !important; border-radius: var(--r-lg) !important; overflow: hidden; }
.speaker-modal .modal-header { background: var(--c-ink-900) !important; border-bottom: 1px solid var(--c-line) !important; }
.speaker-modal .modal-title { font-family: var(--ff-display); color: #fff; }
.speaker-modal .modal-body { background: var(--c-ink-800) !important; }
.speaker-modal .carousel-item .row { color: var(--c-text); }
.speaker-modal .carousel-item img.rounded { border-radius: var(--r-md) !important; border: 1px solid var(--c-line-2); }
.speaker-modal .carousel-item h3 { font-family: var(--ff-display); color: #fff; margin-bottom: 10px !important; }
.speaker-modal .carousel-item p strong { color: var(--c-brand-2); }
.speaker-modal .carousel-item p { color: var(--c-muted); }

/* ============================================================
   17g. ABOUT EXHIBITION
   ============================================================ */
.exhibiton_img, .exhibit_box__img {
    border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-line-2); box-shadow: var(--sh-lg);
}
.exhibiton_img img, .exhibit_box__img img { width: 100%; height: 100%; object-fit: cover; }
.exh_content p { color: #c8d4e6; font-size: 1.02rem; line-height: 1.8; }
.exhibit_wrapper { background: var(--c-ink-900); }
.exhibit_wrapper .main_heading { margin-bottom: var(--sp-6); }
.exhibit_box__content {
    background: linear-gradient(180deg, rgba(22,38,63,.55), rgba(10,20,36,.4));
    border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: clamp(24px,3vw,38px);
    height: 100%;
}
.exhibit_box__content ul { display: grid; gap: 12px; }
.exhibit_box__content li {
    position: relative; padding-left: 34px; color: #c8d4e6; line-height: 1.55; list-style: none !important;
}
.exhibit_box__content li::before {
    content: "\ea41"; font-family: "boxicons" !important; font-size: 1rem;
    position: absolute; left: 0; top: 2px; color: var(--c-brand);
    width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--c-brand-2-rgb),.12); border-radius: 7px;
}

/* ============================================================
   18. SCROLL REVEAL
   ============================================================ */
/* ---- Scroll reveal — global ---- */
[data-reveal] {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .75s var(--ease), transform .75s var(--ease);
    will-change: opacity, transform;
}
[data-reveal].in                       { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="1"]   { transition-delay: .10s; }
[data-reveal][data-reveal-delay="2"]   { transition-delay: .22s; }
[data-reveal][data-reveal-delay="3"]   { transition-delay: .34s; }

/* directional variants */
[data-reveal-dir="left"][data-reveal]  { transform: translateX(-44px); }
[data-reveal-dir="scale"][data-reveal] { transform: translateY(18px) scale(.96); }
[data-reveal-dir="right"][data-reveal] { transform: translateX(44px); }

/* FIX: the directional start-transforms above are declared AFTER the `.in`
   reset and share its specificity, so once revealed they kept overriding
   `.in` and left the element permanently offset (e.g. images shifted 44px
   off-centre). This higher-specificity, later rule guarantees the revealed
   state always resets to centre. */
[data-reveal-dir][data-reveal].in { transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal], [data-reveal-dir] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* about section — enhanced staggered reveal */
.about-img-reveal[data-reveal] {
    transform: translateX(-52px) scale(.97);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.about-img-reveal[data-reveal].in { opacity: 1; transform: none; }

.about_content [data-reveal] {
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    transform: translateY(40px);
}
.about_content [data-reveal].in { opacity: 1; transform: none; }
.about_content [data-reveal-delay="2"] { transition-delay: .22s; }
.about_content [data-reveal-delay="3"] { transition-delay: .44s; }
@media (prefers-reduced-motion: reduce) {
    .about-img-reveal[data-reveal],
    .about_content [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   19. UTILITIES
   ============================================================ */
.u-center { text-align: center; }
.u-mt-0 { margin-top: 0 !important; }
.divider { height: 1px; background: var(--c-line); border: none; margin: var(--sp-7) 0; }
.glow-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; pointer-events: none; z-index: 0; }
.glow-orb--brand { background: var(--c-brand); }
.glow-orb--cyan { background: var(--c-cyan); }

/* ============================================================
   20. PARTNER / LOGO CARDS
   ============================================================ */
.partner-section { background: var(--c-ink-900); padding: clamp(56px, 8vw, 110px) 0; }
.partner-section .row { 
    row-gap: 20px;
    justify-content: center;
}

/* card wrapper — full link */
.partner-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(22,38,63,.65) 0%, rgba(10,20,36,.65) 100%);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: 22px 18px 18px;
    gap: 14px;
    overflow: hidden;
    height: 100%;
    text-decoration: none !important;
    transition: transform .32s var(--ease), border-color .32s, box-shadow .32s;
}

/* top accent bar slides in on hover */
.partner-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--grad-brand);
    transform: scaleX(0); transform-origin: left;
    transition: transform .4s var(--ease);
}

/* subtle ambient glow behind card */
.partner-card::after {
    content: "";
    position: absolute; inset: 0; z-index: 0; border-radius: var(--r-lg);
    background: radial-gradient(80% 80% at 50% 100%, rgba(var(--c-brand-2-rgb),.07) 0%, transparent 70%);
    opacity: 0; transition: opacity .32s var(--ease);
    pointer-events: none;
}

.partner-card:hover { transform: translateY(-7px); border-color: rgba(var(--c-brand-2-rgb),.38); box-shadow: 0 28px 60px -22px rgba(0,0,0,.85), 0 0 0 1px rgba(var(--c-brand-2-rgb),.16); }
.partner-card:hover::before { transform: scaleX(1); }
.partner-card:hover::after  { opacity: 1; }

/* white logo chip */
.partner-card__logo {
    position: relative; z-index: 1;
    background: #fff;
    border-radius: var(--r-md);
    padding: 28px 32px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    transition: box-shadow .32s var(--ease);
}
.partner-card:hover .partner-card__logo { box-shadow: 0 8px 28px -10px rgba(var(--c-brand-2-rgb),.28); }

.partner-card__logo img {
    max-height: 110px;
    width: 100%;
    object-fit: contain;
    display: block;
    transition: transform .38s var(--ease);
}
.partner-card:hover .partner-card__logo img { transform: scale(1.06); }

/* optional visit label that fades in */
.partner-card__cta {
    position: relative; z-index: 1;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-muted);
    display: flex; align-items: center; gap: 5px;
    opacity: 0; transform: translateY(6px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), color .28s;
}
.partner-card__cta i { font-size: .9rem; color: var(--c-brand); }
.partner-card:hover .partner-card__cta { opacity: 1; transform: translateY(0); color: var(--c-brand-2); }

/* group heading pill */
.partner-group-header { 
    margin: clamp(30px, 6vw, 44px) 0 19px; 
    text-align: center;
    display: flex;
    justify-content: center;
}
.partner-group-header:first-child,
.partner-group-header.first { margin-top: 0; }

.partner-group-title {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-body) !important;
    font-size: .92rem !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--c-brand-2) !important;
    padding: 11px 26px !important;
    border: 1px solid var(--c-line-2) !important;
    border-radius: var(--r-pill) !important;
    background: var(--glass-2) !important;
    backdrop-filter: blur(8px);
    margin: 0 !important;
    width: auto !important;
}
.partner-group-title::before {
    content: "";
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--c-brand); box-shadow: 0 0 10px var(--c-brand); flex-shrink: 0;
}

@media (max-width: 576px) {
    .partner-card__logo { min-height: 110px; padding: 20px 22px; }
    .partner-card__logo img { max-height: 80px; }
}

/* ============================================================
   20b. EXHIBITOR GRID — reuses .partner-card styles from section 20
   ============================================================ */
.partner-grid-section { padding: clamp(56px, 8vw, 110px) 0; }

/* ============================================================
   21. SPEAKER PROFILE MODAL (dark-glass redesign)
   ============================================================ */
.spk-modal .modal-content {
    background: var(--c-ink-800);
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: 0 50px 140px -40px rgba(0,0,0,.95);
}

/* header bar */
.spk-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px;
    background: var(--c-ink-900);
    border-bottom: 1px solid var(--c-line);
}
.spk-modal__close {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
    background: var(--glass-2); border: 1px solid var(--c-line-2);
    color: var(--c-text); font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--t-fast);
}
.spk-modal__close:hover { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }

/* slide body */
.spk-modal__body {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 440px;
}

/* left: image + linkedin */
.spk-modal__img-col {
    background: var(--c-ink-900);
    border-right: 1px solid var(--c-line);
    display: flex; flex-direction: column; align-items: center;
    padding: 28px 20px; gap: 18px;
}
.spk-modal__img-wrap {
    width: 100%; border-radius: var(--r-lg); overflow: hidden;
    border: 1px solid var(--c-line-2); box-shadow: var(--sh-lg);
    aspect-ratio: 3/4;
}
.spk-modal__img-wrap img {
    width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
}
.spk-modal__li {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 11px 18px; border-radius: var(--r-pill);
    background: #0a66c2; color: #fff; text-decoration: none !important;
    font-size: .85rem; font-weight: 600;
    transition: var(--t-fast);
}
.spk-modal__li i { font-size: 1.1rem; }
.spk-modal__li:hover { background: #095ba8; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(10,102,194,.55); }

.spk-modal__counter {
    font-size: var(--fs-xs); color: var(--c-muted-2);
    letter-spacing: .1em; margin-top: auto;
}

/* right: info */
.spk-modal__info-col {
    padding: 36px 40px;
    overflow-y: auto; max-height: 72vh;
    display: flex; flex-direction: column;
}
.spk-modal__post {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: #fff; background: var(--grad-brand);
    padding: 5px 14px; border-radius: var(--r-pill);
    margin-bottom: 18px; width: fit-content;
}
.spk-modal__name {
    font-family: var(--ff-display);
    font-size: clamp(1.4rem, 2.5vw, 2.1rem);
    font-weight: 700; color: #fff; line-height: 1.15;
    margin-bottom: 10px !important;
}
.spk-modal__role {
    color: var(--c-brand-2); font-size: .88rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    margin-bottom: 4px !important;
}
.spk-modal__org {
    color: var(--c-muted); font-size: 1rem; margin-bottom: 0 !important;
}
.spk-modal__divider { height: 1px; background: var(--c-line); margin: 24px 0; }
.spk-modal__bio {
    color: #c8d4e6; font-size: .97rem; line-height: 1.85;
    flex: 1;
}
/* The bio is DB rich-text (TinyMCE) that bakes inline color/font onto its
   text — those inline styles otherwise win and render the copy near-invisible
   on the dark modal. Force readable colour + font on every descendant. */
.spk-modal__bio,
.spk-modal__bio * {
    color: #c8d4e6 !important;
    font-family: var(--ff-body) !important;
    background: transparent !important;
}
.spk-modal__bio strong, .spk-modal__bio b { color: #fff !important; font-weight: 700 !important; }
.spk-modal__bio a { color: var(--c-brand-2) !important; text-decoration: underline; }
.spk-modal__bio [style*="font-size"] { font-size: .97rem !important; }

/* nav arrows */
.spk-modal__prev, .spk-modal__next {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--glass); border: 1px solid var(--c-line-2);
    color: #fff; font-size: 1.6rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--t-fast); backdrop-filter: blur(12px);
}
.spk-modal__prev { left: 14px; }
.spk-modal__next { right: 14px; }
.spk-modal__prev:hover, .spk-modal__next:hover {
    background: var(--c-brand); border-color: var(--c-brand); color: #fff;
}

@media (max-width: 768px) {
    .spk-modal__body { grid-template-columns: 1fr; }
    .spk-modal__img-col { border-right: none; border-bottom: 1px solid var(--c-line); padding: 24px; }
    .spk-modal__img-wrap { max-width: 200px; margin: 0 auto; }
    .spk-modal__info-col { padding: 24px; max-height: none; }
    .spk-modal__prev { left: 6px; } .spk-modal__next { right: 6px; }
}

/* ============================================================
   22. THANK-YOU POPUP (post-event redesign)
   ============================================================ */
.ty-modal__dialog { max-width: 520px; }

.ty-modal {
    position: relative;
    background: var(--c-ink-800);
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-xl);
    overflow: hidden;
    padding: 48px 40px 40px;
    text-align: center;
    box-shadow: 0 60px 120px -30px rgba(0,0,0,.9);
}

/* ambient glow */
.ty-modal__orb {
    position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
    width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--c-brand-2-rgb),.22) 0%, transparent 70%);
    pointer-events: none;
}

/* top accent bar */
.ty-modal::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--grad-brand);
}

.ty-modal__close {
    position: absolute; top: 16px; right: 16px;
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--glass-2); border: 1px solid var(--c-line-2);
    color: var(--c-muted); font-size: 1.4rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--t-fast); z-index: 2;
}
.ty-modal__close:hover { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }

.ty-modal__logo {
    display: flex; justify-content: center; margin-bottom: 20px; position: relative; z-index: 1;
}
.ty-modal__logo img { height: 80px; width: auto; }

.ty-modal .eyebrow { display: inline-flex; margin-bottom: 20px; font-size: .72rem; }

.ty-modal__heading {
    font-family: var(--ff-display);
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700; color: #fff; line-height: 1.2;
    margin-bottom: 14px !important; position: relative; z-index: 1;
}
.ty-modal__heading span {
    background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.ty-modal__sub {
    color: var(--c-muted); font-size: .95rem; line-height: 1.75;
    margin-bottom: 0 !important; position: relative; z-index: 1;
}
.ty-modal__sub strong { color: var(--c-brand-2); font-weight: 600; }

.ty-modal__divider { height: 1px; background: var(--c-line); margin: 28px 0; }

.ty-modal__cta {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.ty-modal__cta .global_btn { padding: 12px 28px !important; font-size: .9rem !important; }
.ty-modal__cta .btn-ghost  { padding: 11px 26px; font-size: .9rem; }

@media (max-width: 576px) {
    .ty-modal { padding: 40px 24px 32px; }
    .ty-modal__cta { flex-direction: column; }
    .ty-modal__cta .global_btn,
    .ty-modal__cta .btn-ghost { width: 100%; justify-content: center; }
}

/* ============================================================
   23. BROCHURE DOWNLOAD MODAL
   ============================================================ */
.bro-modal__dialog { max-width: 620px; }

.bro-modal {
    background: var(--c-ink-800);
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: 0 60px 120px -30px rgba(0,0,0,.9);
}

/* top accent bar */
.bro-modal::before {
    content: ""; display: block; height: 3px;
    background: var(--grad-brand);
}

/* header */
.bro-modal__header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 22px 28px 18px;
    background: var(--c-ink-900);
    border-bottom: 1px solid var(--c-line);
}
.bro-modal__header-left { display: flex; flex-direction: column; gap: 6px; }
.bro-modal__header .eyebrow { font-size: .7rem; }

.bro-modal__title {
    font-family: var(--ff-display);
    font-size: 1.25rem; font-weight: 700;
    color: #fff; margin: 0 !important;
}
.bro-modal__title span {
    background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.bro-modal__close {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    background: var(--glass-2); border: 1px solid var(--c-line-2);
    color: var(--c-muted); font-size: 1.4rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--t-fast); margin-top: 2px;
}
.bro-modal__close:hover { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }

/* body */
.bro-modal__body { padding: 24px 28px 28px; }

.bro-modal__message:not(:empty) {
    background: rgba(var(--c-brand-2-rgb),.1);
    border: 1px solid rgba(var(--c-brand-2-rgb),.25);
    border-radius: var(--r-md);
    color: var(--c-brand-2); font-size: .88rem; font-weight: 500;
    padding: 12px 16px; margin-bottom: 18px;
}

/* form layout */
.bro-form { display: flex; flex-direction: column; gap: 14px; }

.bro-form__row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}

.bro-form__group { display: flex; flex-direction: column; gap: 4px; }

/* inputs */
.bro-form input,
.bro-form select,
.bro-form textarea {
    width: 100%; padding: 11px 14px;
    background: var(--c-ink-700);
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-md);
    color: #eef3fb; font-size: .88rem;
    font-family: var(--ff-body);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    outline: none;
}
.bro-form input::placeholder,
.bro-form textarea::placeholder { color: var(--c-muted-2); }

.bro-form select { color: var(--c-muted); cursor: pointer; }
.bro-form select option { background: var(--c-ink-800); color: #eef3fb; }

.bro-form input:focus,
.bro-form select:focus,
.bro-form textarea:focus {
    border-color: var(--c-brand);
    box-shadow: 0 0 0 3px rgba(var(--c-brand-2-rgb), .15);
}

.bro-form textarea { resize: vertical; min-height: 90px; }

.bro-form .error {
    color: #f87171; font-size: .75rem; min-height: 14px;
}

.bro-form .global_btn {
    margin-top: 4px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: .92rem !important; padding: 13px !important;
}
.bro-form .global_btn i { font-size: 1.1rem; }

@media (max-width: 576px) {
    .bro-modal__dialog { margin: 12px; }
    .bro-form__row { grid-template-columns: 1fr; }
    .bro-modal__body { padding: 20px 18px 24px; }
    .bro-modal__header { padding: 18px 18px 14px; }
}

/* ============================================================
   24. HOMEPAGE SPEAKERS SECTION
   ============================================================ */
.spk-home-section {
    background: var(--c-ink-900);
    padding: clamp(64px, 9vw, 110px) 0;
    position: relative;
    overflow: hidden;
}

/* subtle grid texture */
.spk-home-section::before {
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(var(--c-brand-2-rgb),.07) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 80% 100%, rgba(54,209,220,.06) 0%, transparent 60%);
}

/* ---- slider wrapper ---- */
.spk-home-slider-wrap {
    position: relative;
    z-index: 1;
    /* arrows sit outside the track — give them space */
    margin: 0 -8px;
    padding: 0 64px;
}

.spk-home-slider { opacity: 0; transition: opacity .3s; }
.spk-home-slider.slick-initialized { opacity: 1; }

/* gap between slides */
.spk-slide { padding: 0 10px; }

/* arrows */
.spk-arrow {
    position: absolute;
    top: 40%;                          /* photo midpoint, not text midpoint */
    transform: translateY(-50%);
    z-index: 10;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1.5px solid rgba(40,180,220,.4);
    background: rgba(13,23,38,.85);
    backdrop-filter: blur(6px);
    color: var(--c-brand);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .25s, border-color .25s, color .25s, transform .25s;
    padding: 0; line-height: 1;
}
.spk-arrow i { font-size: 1.6rem; }
.spk-arrow--prev { left: 6px; }
.spk-arrow--next { right: 6px; }
.spk-arrow:hover {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}
.spk-arrow.slick-disabled { opacity: .3; cursor: default; pointer-events: none; }

@media (max-width: 767px) {
    .spk-home-slider-wrap { padding: 0 44px; margin: 0; }
    .spk-arrow { width: 36px; height: 36px; }
    .spk-arrow i { font-size: 1.25rem; }
    .spk-arrow--prev { left: 2px; }
    .spk-arrow--next { right: 2px; }
}

/* push the CTA block */
.spk-home-section__cta {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    margin-top: 52px; text-align: center; position: relative; z-index: 1;
}
.spk-home-section__count {
    color: var(--c-muted); font-size: .9rem; margin: 0 !important;
}
.spk-home-section__count strong { color: var(--c-brand-2); }

.spk-home-section .global_btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 32px !important; font-size: .95rem !important;
}
.spk-home-section .global_btn i { font-size: 1.2rem; transition: transform var(--t-fast); }
.spk-home-section .global_btn:hover i { transform: translateX(4px); }

/* ============================================================
   HERO — two-column, countdown + animated logo ring
   ============================================================ */

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    background: linear-gradient(
    160deg,
    rgba(3, 10, 26, .18) 0%,
rgba(6, 18, 44, .08) 50%,
rgba(3, 10, 26, .15) 100%
);
    pointer-events: none;
}
.hero-overlay .wrap,
.hero-overlay .wrap * { pointer-events: auto; }
.hero-overlay .wrap {
    width: 100%;
    max-width: var(--maxw);
    padding: 0 clamp(18px, 4vw, 48px);
    margin-inline: auto;
}

/* Two-column grid */
.hero-2col {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: clamp(24px, 4vw, 60px);
}

/* ── LEFT column ── */
.hero-left { text-align: left; }

.hero-title {
    font-family: var(--ff-display) !important;
    font-size: clamp(28px, 4vw, 56px) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    color: #fff !important;
    text-shadow: 0 3px 28px rgba(0,0,0,.55);
    margin: 0 0 18px !important;
    letter-spacing: -.01em;
}
.hero-title span { color: #28b4dc; }

.hero-desc {
    font-size: clamp(14px, 1.3vw, 17px);
    color: rgba(255,255,255,.72);
    line-height: 1.7;
    max-width: 560px;
    margin-bottom: 28px;
}

.hero-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.hero-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 28px;
    background: linear-gradient(135deg, #1464a0 0%, #28b4dc 100%);
    color: #fff !important;
    font-size: 15px; font-weight: 600;
    border: none; border-radius: 50px; cursor: pointer;
    letter-spacing: .02em;
    transition: transform var(--t), box-shadow var(--t);
    box-shadow: 0 6px 22px rgba(40,180,220,.35);
    text-decoration: none !important;
}
.hero-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(40,180,220,.5); }

.hero-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 26px;
    background: rgba(255,255,255,.08);
    color: #fff !important;
    font-size: 15px; font-weight: 600;
    border: 1.5px solid rgba(255,255,255,.4);
    border-radius: 50px; cursor: pointer;
    letter-spacing: .02em;
    transition: border-color var(--t), background var(--t), transform var(--t);
}
.hero-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.14); transform: translateY(-3px); }

.hero-info {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    margin-bottom: 28px;
    font-size: clamp(13px, 1.2vw, 15px);
    color: rgba(255,255,255,.72);
}
.hero-info span { display: inline-flex; align-items: center; gap: 7px; }
.hero-info i { color: #28b4dc; font-size: 1.15em; }

/* Countdown */
.hero-countdown {
    display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
}
.hero-countdown__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(6, 18, 44, .75);
    border: 1px solid rgba(40,180,220,.28);
    border-radius: 12px;
    padding: 14px 18px;
    min-width: 74px;
    backdrop-filter: blur(10px);
}
.hero-countdown__item span {
    font-size: clamp(26px, 2.8vw, 40px);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.hero-countdown__item label {
    font-size: 10px; font-weight: 700;
    letter-spacing: .12em;
    color: rgba(255,255,255,.45);
    margin-top: 5px;
    text-transform: uppercase;
    cursor: default;
}

/* ── RIGHT column — logo + animated rings ── */
.hero-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-logo-ring {
    position: relative;
    width: clamp(260px, 36vw, 440px);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-logo-ring img {
    width: 58%;
    height: auto;
    position: relative;
    z-index: 3;
    filter: drop-shadow(0 8px 32px rgba(40,180,220,.42));
    animation: heroPulse 4s ease-in-out infinite;
}
@keyframes heroPulse {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

.ring {
    position: absolute;
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.ring-1 {
    width: 68%; height: 68%;
    border: 1.5px solid rgba(40,180,220,.45);
    animation: ringRotate 20s linear infinite;
}
.ring-2 {
    width: 85%; height: 85%;
    border: 1px solid rgba(40,180,220,.22);
    animation: ringRotate 32s linear infinite reverse;
}
.ring-3 {
    width: 100%; height: 100%;
    border: 1px solid rgba(40,180,220,.10);
}
/* ring tick marks */
.ring-1::before, .ring-2::before {
    content: '';
    position: absolute;
    top: -3px; left: 50%;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #28b4dc;
    transform: translateX(-50%);
}

@keyframes ringRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* LIVE badge */
.hero-logo-ring__live {
    position: absolute;
    top: 9%; right: 9%;
    z-index: 5;
    background: rgba(40,180,220,.15);
    border: 1px solid #28b4dc;
    color: #7dd5ec;
    font-size: 10px; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    padding: 4px 11px; border-radius: 20px;
    backdrop-filter: blur(8px);
}

/* city badge */
.hero-logo-ring__city {
    position: absolute;
    bottom: 6%; left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    background: rgba(4,12,30,.82);
    border: 1px solid rgba(40,180,220,.35);
    color: rgba(255,255,255,.78);
    font-size: 10px; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase;
    padding: 5px 14px; border-radius: 20px;
    backdrop-filter: blur(8px);
    white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .hero-2col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .hero-2col { grid-template-columns: 1fr; gap: 24px; }
    .hero-left { text-align: center; }
    .hero-desc { margin-left: auto; margin-right: auto; }
    .hero-cta  { justify-content: center; }
    .hero-info { justify-content: center; }
    .hero-countdown { justify-content: center; }
    /* Show the ring logo on phones too (was hidden) — placed ABOVE the text
       and scaled down so it works in the single-column stack. */
    .hero-right { display: flex; order: -1; margin-bottom: 6px; }
    .hero-logo-ring { width: clamp(200px, 58vw, 280px); }
    /* Sync banner image height with overlay so no dead space shows.
       Slightly taller now to fit the logo + text, still ~one screen so the
       content reads as centred. */
    .banner_box .banner_img img { height: clamp(540px, 84vh, 700px); }
    /* extra bottom padding lifts the (centred) logo + text a little higher */
    .hero-overlay { padding: 14px 0 72px; }
}
@media (max-width: 480px) {
    .hero-countdown__item { min-width: 62px; padding: 10px 12px; }
    .hero-countdown__item span { font-size: 24px; }
    .hero-btn-primary, .hero-btn-ghost { font-size: 14px; padding: 11px 20px; }
    .hero-info { flex-direction: column; gap: 8px; align-items: center; }
    .hero-logo-ring { width: clamp(180px, 54vw, 240px); }
    .banner_box .banner_img img { height: clamp(500px, 86vh, 640px); }
}

/* ============================================================
   19. UNIFIED TYPOGRAPHY  (authoritative — one type system, every page)
   ------------------------------------------------------------
   Goal: a single font family plus consistent sizing for body text,
   headings and bullet/list text across ALL pages — overriding the
   divergent values scattered through the legacy stylesheets
   (style.css, about.css, pages.css) and any inline sizes baked into
   DB rich-text by the editor. This file loads last, so it wins.

   Heading SIZES are intentionally left to the existing token-driven
   rules (.section-head h2, .main_heading h2, .breadcrumb h1/h2, …) and
   to bespoke components (counters, cards, hero). We unify the family
   and weight here, and unify body/list text — the real inconsistency.
   ============================================================ */
:root {
    --fs-content: 1.05rem;   /* unified paragraph / list / body-copy size */
    --lh-content: 1.75;      /* unified reading rhythm                    */
}

/* 19.1 — One font family everywhere ----------------------------------- */
.gots,
.gots p, .gots a, .gots span, .gots li, .gots dd, .gots dt,
.gots td, .gots th, .gots small, .gots strong, .gots em, .gots b, .gots i,
.gots blockquote, .gots figcaption,
.gots input, .gots textarea, .gots select, .gots button {
    font-family: var(--ff-body);
}
.gots h1, .gots h2, .gots h3, .gots h4, .gots h5, .gots h6,
.gots h1 span, .gots h2 span, .gots h3 span,
.gots h4 span, .gots h5 span, .gots h6 span {
    font-family: var(--ff-display);
}

/* 19.2 — Body copy default (low specificity: bespoke components win) --- */
p  { font-size: var(--fs-content); line-height: var(--lh-content); }
.gots .wrap li,
.gots .container li,
.gots .container-fluid li { line-height: var(--lh-content); }

/* 19.3 — Unified body + bullet/list text inside the DB rich-text content
   containers.  !important so the divergent legacy sizes/weights and any
   editor inline font-size collapse to one consistent value site-wide.
   Scoped to genuine prose containers only — structural component
   wrappers (.global_content, .why_wrapper__content, .exhibit_box__content,
   counters, cards…) keep their deliberate, internally-consistent sizing. */
.about_content p,              .about_content li,
.conf-text p,                  .conf-text li,
.conf-attend-list,             .conf-attend-list p,  .conf-attend-list li,
.keytopics_wrapper__content p, .keytopics_wrapper__content li,
.gallery_content p,            .gallery_content li,
.breadcrumb_wrapper__content p,
.organizer-panel .panel-dark p,
.moto_content p {
    font-family: var(--ff-body) !important;
    font-size: var(--fs-content) !important;
    line-height: var(--lh-content) !important;
    font-weight: 400 !important;
}

/* keep emphasis bold inside the unified body copy */
.about_content strong, .about_content b,
.conf-text strong, .conf-text b,
.conf-attend-list strong, .conf-attend-list b,
.keytopics_wrapper__content strong, .keytopics_wrapper__content b {
    font-weight: 700 !important;
}

/* 19.4 — Neutralise inline font-size / font-family baked into DB prose --
   (does NOT touch component wrappers, so counters/cards are unaffected) */
.about_content [style*="font-size"],
.conf-text [style*="font-size"],
.conf-attend-list [style*="font-size"],
.keytopics_wrapper__content [style*="font-size"],
.gallery_content [style*="font-size"] {
    font-size: var(--fs-content) !important;
}
.about_content [style*="font-family"],
.conf-text [style*="font-family"],
.conf-attend-list [style*="font-family"],
.keytopics_wrapper__content [style*="font-family"],
.gallery_content [style*="font-family"] {
    font-family: var(--ff-body) !important;
}

/* ============================================================
   20. GLOBAL SPACING TIGHTENING  (authoritative — loaded last)
   ------------------------------------------------------------
   The interior pages had oversized vertical padding (up to
   110–120px per side) plus a large empty gap between the page-title
   breadcrumb and the first content block. This tightens the rhythm
   site-wide so content sits closer together and reads better.
   ============================================================ */

/* 20.1 — trim the generous section paddings (was 90–120px maxes) */
.section,
.global_wrapper,
.global_wrappers,
.moto_wrapper,
.why_wrapper,
.why_wrapper.blue_bg,
.member_wrapper,
.partner-section,
.partner-grid-section,
.about_wrapper {
    padding-top: clamp(36px, 5vw, 76px) !important;
    padding-bottom: clamp(36px, 5vw, 76px) !important;
}

/* 20.2 — kill the big empty gap directly under the breadcrumb hero:
   the first content section on every interior page now sits close to it */
.breadcrumb_wrapper + section,
.about-breadcrumb + section {
    padding-top: clamp(24px, 3vw, 40px) !important;
}

/* 20.3 — slim the breadcrumb hero itself a touch */
.breadcrumb_wrapper,
.about-breadcrumb {
    padding: clamp(26px, 4vw, 40px) 0 clamp(20px, 3vw, 30px) !important;
}

/* 20.4 — centre images embedded inside the DB rich-text content.
   Editor-inserted <img> default to left-aligned at their natural width;
   this centres them and keeps them responsive on every page. */
.about_content img,
.conf-text img,
.conf-attend-list img,
.keytopics_wrapper__content img,
.gallery_content img,
.moto_content img,
.organizer-panel .panel-dark img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 20.5 — mobile: never slide content HORIZONTALLY on reveal. The left/right
   slide-in can leave layout images visually off-centre and nudge the page
   sideways. Use a gentle vertical reveal instead (`:not(.in)` so the final
   revealed state still resets to centre). Plus belt-and-braces centring for
   the layout/media images. Fixes the off-centre images on phones site-wide. */
@media (max-width: 980px) {
    [data-reveal][data-reveal-dir="left"]:not(.in),
    [data-reveal][data-reveal-dir="right"]:not(.in),
    .about-img-reveal[data-reveal]:not(.in) {
        transform: translateY(18px);
    }
    .grid--split > .media-frame,
    .grid--3 > .keytopics_img,
    .about_wrapper .about_img {
        width: 100%;
        margin-inline: auto;
    }
    .media-frame img,
    .keytopics_img img,
    .about_img img {
        display: block;
        width: 100%;
        margin-inline: auto;
    }
}

/* reinforce: no horizontal page shift on any viewport */
html { overflow-x: hidden; }

/* 20.6 — centre the auto-opening popups. Legacy pages.css pushes
   `.modal-dialog { top: 33–37% }` which (because Bootstrap makes the dialog
   position:relative) shoves the popup toward the bottom of the screen on
   phones. Reset it so `.modal-dialog-centered` can centre it properly. */
#thankYouModal .modal-dialog,
.form_poppup .modal-dialog,
#exampleModal .modal-dialog {
    top: 0 !important;
}