/* =================================================================
   ASEAN-CONNECT V3 — ANALYTICS EDITION (Homepage Only)
   Shared layout styles (header/footer/ticker) are in v3-layout.css
   ================================================================= */

/* Homepage-scoped resets — do not affect other pages */
.hero, .trust-m, .cats, .pulse, .feats, .authority, .cta-s, .catalogs, .expos, .industry-groups {
    box-sizing: border-box;
    line-height: 1.6;
}
.hero *, .trust-m *, .cats *, .pulse *, .feats *, .authority *, .cta-s *, .catalogs *, .expos *, .industry-groups * {
    box-sizing: border-box;
}
.hero a, .cats a, .pulse a, .catalogs a, .expos a, .authority a, .cta-s a, .industry-groups a {
    text-decoration: none; color: inherit;
}
.hero img, .trust-m img, .cats img, .pulse img, .catalogs img, .expos img {
    max-width: 100%; display: block;
}

/* Homepage container override */
.hero .container, .trust-m .container, .cats .container, .pulse .container,
.feats .container, .authority .container, .cta-s .container, .catalogs .container,
.expos .container, .industry-groups .container {
    max-width: 1280px; margin: 0 auto; padding: 0 32px;
}

/* ── HERO ────────────────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 100vh;
    padding-top: 100px;
    background: var(--b900);
    display: flex; align-items: center;
    overflow: hidden;
}
.hero-bg {
    position: absolute; inset: 0; z-index: 0;
}
.hero-bg::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(76,154,255,0.15) 1px, transparent 1px);
    background-size: 32px 32px;
    animation: bgShift 40s linear infinite;
}
@keyframes bgShift {
    0% { background-position: 0 0; }
    100% { background-position: 320px 320px; }
}
.hero-bg::after {
    content: '';
    position: absolute; inset: -20%; width: 140%; height: 140%;
    background:
        radial-gradient(ellipse 600px 400px at 15% 50%, rgba(0,82,204,0.25), transparent),
        radial-gradient(ellipse 500px 500px at 85% 30%, rgba(101,84,192,0.12), transparent),
        radial-gradient(ellipse 400px 300px at 60% 80%, rgba(0,168,112,0.08), transparent);
    animation: orbFloat 20s ease-in-out infinite alternate;
}
@keyframes orbFloat {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(30px, -20px) scale(1.05); }
    66%  { transform: translate(-20px, 15px) scale(0.97); }
    100% { transform: translate(15px, -10px) scale(1.03); }
}

.hero-streaks {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden; pointer-events: none;
}
.hero-streak {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(76,154,255,0.3), transparent);
    animation: streakMove linear infinite;
    opacity: 0;
    width: 300px;
}
@keyframes streakMove {
    0%   { left: -400px; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: 110%; opacity: 0; }
}

.hero-particles {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden; pointer-events: none;
}
.hero-particle {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(76,154,255,0.4);
    animation: particleFloat linear infinite;
}
@keyframes particleFloat {
    0%   { bottom: -10px; opacity: 0; transform: translateX(0); }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { bottom: 110%; opacity: 0; transform: translateX(40px); }
}

.hero-inner {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.hero-anim {
    opacity: 0;
    transform: translateY(24px);
    animation: heroReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-anim:nth-child(1) { animation-delay: 0.15s; }
.hero-anim:nth-child(2) { animation-delay: 0.3s; }
.hero-anim:nth-child(3) { animation-delay: 0.45s; }
.hero-anim:nth-child(4) { animation-delay: 0.6s; }
.hero-anim:nth-child(5) { animation-delay: 0.75s; }
@keyframes heroReveal {
    to { opacity: 1; transform: translateY(0); }
}

.hero-title em {
    font-style: normal;
    background: linear-gradient(90deg, var(--b400) 0%, var(--b300) 25%, #a8d8ff 50%, var(--b300) 75%, var(--b400) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.hero-flagship {
    display: inline-flex; align-items: stretch; gap: 0;
    margin-bottom: 24px;
}
.hero-flagship-col {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 0 20px;
}
.hero-flagship-label {
    font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.4);
    letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap;
}
.hero-flagship-c21 {
    height: 34px; width: auto; filter: brightness(0) invert(1); opacity: 0.9;
}
.hero-flagship-divider {
    width: 1px; align-self: stretch;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.2), transparent);
}
.hero-flagship-initiative {
    height: 38px; width: auto;
}
.hero-flagship-catalog {
    height: 44px; width: auto; border-radius: 4px;
}
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px; padding: 5px 6px 5px 14px;
    font-size: 12px; font-weight: 500; color: var(--b300);
    margin-bottom: 24px;
}
.hero-eyebrow-badge {
    background: var(--g600); color: #fff;
    padding: 2px 10px; border-radius: 100px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px;
}
.hero-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(38px, 4.5vw, 58px);
    font-weight: 900; color: #fff;
    line-height: 1.05; letter-spacing: -1.5px;
    margin-bottom: 20px;
}
.hero-sub {
    font-size: 17px; color: rgba(255,255,255,0.55);
    max-width: 480px; margin-bottom: 32px; line-height: 1.7;
}

/* Search */
.hero-search-box {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    padding: 10px;
    backdrop-filter: blur(24px);
    max-width: 580px;
    margin-bottom: 28px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.05) inset;
}
.hero-search-tabs {
    display: flex; gap: 4px; margin-bottom: 12px;
}
.hero-search-tab {
    padding: 5px 14px; border-radius: var(--r-sm);
    font-size: 12px; font-weight: 600;
    border: none;
    color: rgba(255,255,255,0.4);
    background: transparent;
    transition: all 0.15s;
}
.hero-search-tab.active {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.hero-search-row {
    display: flex;
    align-items: stretch;
}
.hero-search-country {
    display: flex; align-items: center; gap: 7px;
    padding: 0 14px;
    background: rgba(37,99,235,0.25);
    border: none;
    border-right: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px 0 0 12px;
    color: #fff; font-size: 13.5px; font-weight: 600;
    white-space: nowrap; letter-spacing: 0.01em;
}
.hero-search-country i { color: var(--b300); font-size: 12px; }
.hero-search-country + .hero-search-input {
    border-left: none; border-radius: 0;
}
.hero-search-input {
    flex: 1; padding: 16px 20px;
    border: none;
    border-radius: 12px 0 0 12px;
    background: transparent;
    color: #fff; font-size: 15.5px; font-family: inherit;
    outline: none; transition: box-shadow 0.2s;
}
.hero-search-input::placeholder { color: rgba(255,255,255,0.35); }
.hero-search-input:focus { box-shadow: none; }
.hero-search-btn {
    padding: 14px 28px;
    background: var(--b600); color: #fff; border: none;
    border-radius: 12px;
    font-size: 15px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
    transition: background 0.2s, transform 0.1s; white-space: nowrap;
    cursor: pointer;
}
.hero-search-btn:hover { background: var(--b500); transform: translateY(-1px); }
.hero-search-hint {
    margin-top: 10px;
    font-size: 12px; color: rgba(255,255,255,0.3);
}
.hero-search-hint span {
    display: inline-block;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px; padding: 2px 8px;
    margin: 2px 3px; font-size: 11px;
    cursor: pointer; transition: all 0.15s;
}
.hero-search-hint span:hover {
    background: rgba(76,154,255,0.15);
    border-color: rgba(76,154,255,0.3);
    color: var(--b300);
}

/* Animated search suggestions */
.hero-search-suggest {
    margin-top: 10px;
    font-size: 13px; color: rgba(255,255,255,0.4);
    display: flex; align-items: center; gap: 6px;
    height: 20px;
}
.hero-suggest-label { white-space: nowrap; }
.hero-suggest-text {
    color: var(--b300); font-weight: 500;
}
.hero-suggest-cursor {
    color: var(--b400);
    animation: blink 0.8s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Top countries card */
.hp-countries-list { display: flex; flex-direction: column; gap: 8px; }
.hp-country-item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px; border-radius: 6px;
    transition: background 0.15s;
}
.hp-country-item:hover { background: rgba(255,255,255,0.04); }
.hp-country-flag {
    width: 24px; height: 16px; border-radius: 2px;
    object-fit: cover; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.hp-country-name {
    font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.8);
}

/* Inline search results section */
.inline-search-section {
    padding: 48px 0 64px;
    background: var(--n50, #f7f8fa);
    min-height: 400px;
}
.isr-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 28px;
}
.isr-header h2 {
    font-size: 22px; font-weight: 700; color: var(--n900, #1a1a2e); margin: 0;
}
.isr-close-btn {
    background: none; border: 1px solid var(--n300, #ccc); border-radius: 8px;
    padding: 8px 16px; font-size: 13px; font-weight: 600;
    color: var(--n600, #555); cursor: pointer; transition: all 0.15s;
}
.isr-close-btn:hover { background: var(--n100, #eee); }
.isr-status {
    text-align: center; padding: 48px 0; font-size: 15px; color: var(--n500, #888);
}
.isr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}
.isr-card {
    background: #fff; border-radius: 12px;
    border: 1px solid var(--n200, #e5e7eb);
    padding: 20px; transition: box-shadow 0.2s, transform 0.2s;
    text-decoration: none; color: inherit; display: block;
}
.isr-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.isr-card-title {
    font-size: 16px; font-weight: 700; color: var(--n900, #1a1a2e);
    margin-bottom: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.isr-card-meta {
    font-size: 13px; color: var(--n500, #888); margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.isr-card-meta i { font-size: 11px; }
.isr-card-desc {
    font-size: 13px; color: var(--n600, #555); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.isr-card-tags { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.isr-card-tag {
    font-size: 11px; padding: 2px 8px; border-radius: 4px;
    background: rgba(76,154,255,0.08); color: var(--b600, #2563eb);
    border: 1px solid rgba(76,154,255,0.15);
}
.isr-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; margin-top: 32px;
}
.isr-page-btn {
    background: #fff; border: 1px solid var(--n300, #ccc); border-radius: 8px;
    padding: 8px 18px; font-size: 13px; font-weight: 600;
    color: var(--n700, #333); cursor: pointer; transition: all 0.15s;
}
.isr-page-btn:hover { background: var(--n100, #eee); }
.isr-page-btn:disabled { opacity: 0.4; cursor: default; }
.isr-page-info { font-size: 13px; color: var(--n500, #888); }

/* News section */
.news-section {
    padding: 72px 0 80px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px; margin-top: 40px;
}
.news-card {
    background: #fff; border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.news-card:hover {
    box-shadow: 0 16px 40px rgba(0,0,0,0.1);
    transform: translateY(-4px);
}
.news-card-img {
    height: 200px; background: var(--n100, #eee);
    overflow: hidden; position: relative;
}
.news-card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s ease;
}
.news-card:hover .news-card-img img {
    transform: scale(1.05);
}
.news-card-body {
    padding: 24px; flex: 1;
    display: flex; flex-direction: column;
}
.news-card-date {
    font-size: 11px; color: var(--b600, #2563eb);
    font-weight: 600; text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
}
.news-card-title {
    font-size: 17px; font-weight: 700;
    color: var(--n900, #0f172a);
    margin-bottom: 10px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    letter-spacing: -0.2px;
}
.news-card-excerpt {
    font-size: 14px; color: var(--n500, #64748b);
    line-height: 1.7; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
}
.news-card-read {
    margin-top: 16px; font-size: 13px; font-weight: 700;
    color: var(--b600, #2563eb);
    display: flex; align-items: center; gap: 6px;
    transition: gap 0.2s;
}
.news-card:hover .news-card-read { gap: 10px; }
.news-loading {
    grid-column: 1 / -1; text-align: center;
    padding: 56px 0; font-size: 14px; color: var(--n400, #94a3b8);
}
.news-more {
    text-align: center; margin-top: 40px;
}
.news-more-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 32px; border-radius: 10px;
    font-size: 14px; font-weight: 700;
    color: var(--b600); border: 2px solid var(--b600);
    text-decoration: none; transition: all 0.25s;
    letter-spacing: 0.2px;
}
.news-more-btn:hover {
    background: var(--b600); color: #fff;
    box-shadow: 0 4px 16px rgba(37,99,235,0.3);
}
@media (max-width:1024px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:640px) {
    .news-grid { grid-template-columns: 1fr; gap: 20px; }
    .news-card-img { height: 160px; }
}

/* Country flags */
.hero-flags-wrap { max-width: 520px; }
.hero-flags-label {
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.3);
    text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px;
}
.hero-flags {
    display: flex; flex-wrap: wrap; gap: 5px;
}
.hf {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 8px; border-radius: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    transition: all 0.15s; cursor: pointer;
    font-size: 0; line-height: 1;
}
.hf:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.18); }
.hf.active { background: rgba(0,82,204,0.15); border-color: var(--b400); }
.hf img { width: 18px; height: 12px; border-radius: 2px; object-fit: cover; flex-shrink: 0; }
.hf-name { font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.6); white-space: nowrap; }
.hf-ct { font-size: 9px; font-weight: 700; color: var(--b400); white-space: nowrap; }
.hf-soon { font-size: 8px; font-weight: 600; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.2px; white-space: nowrap; }
.hf.hf-coming-soon { opacity: 0.35; cursor: default; pointer-events: none; }
.hf.hf-coming-soon .hf-ct { color: rgba(255,255,255,0.3); }

/* Right: Dashboard panel */
.hero-panel {
    display: flex; flex-direction: column; gap: 16px;
}
.hp-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--r-lg);
    padding: 24px;
    backdrop-filter: blur(16px);
    opacity: 0; transform: translateY(20px);
    animation: hpIn 0.6s ease forwards;
}
.hp-card:nth-child(1) { animation-delay: 0.3s; }
.hp-card:nth-child(2) { animation-delay: 0.5s; }
.hp-card:nth-child(3) { animation-delay: 0.7s; }
@keyframes hpIn { to { opacity: 1; transform: translateY(0); } }

.hp-card-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.hp-card-title {
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.4);
    text-transform: uppercase; letter-spacing: 1px;
}
.hp-card-badge {
    font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 100px;
}
.hp-card-badge.live {
    background: rgba(0,168,112,0.15); color: var(--g500);
}

/* GSC Keywords list in hero panel */
.hp-kw-list { display: flex; flex-direction: column; gap: 8px; }
.hp-kw-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
}
.hp-kw-rank {
    width: 20px; height: 20px; border-radius: 5px;
    background: rgba(76,154,255,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: var(--b400);
    flex-shrink: 0;
}
.hp-kw-text { font-size: 12px; color: rgba(255,255,255,0.6); flex: 1; }
.hp-kw-text strong { color: rgba(255,255,255,0.85); }
.hp-kw-clicks {
    font-size: 10px; font-weight: 700; color: var(--b400);
    white-space: nowrap;
}
.hp-kw-ctr {
    font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.3);
    white-space: nowrap;
}

/* GA visitors mini chart in hero panel */
.hp-ga-row {
    display: flex; align-items: flex-end; gap: 2px;
    height: 40px; margin-bottom: 14px;
}
.hp-ga-bar {
    flex: 1;
    border-radius: 2px 2px 0 0;
    background: rgba(0,168,112,0.15);
    transition: height 0.5s ease;
}
.hp-ga-bar.today { background: var(--g500); }
.hp-ga-stats {
    display: flex; gap: 16px;
}
.hp-ga-stat-num {
    font-size: 22px; font-weight: 800; color: #fff;
    font-family: 'Poppins', sans-serif;
}
.hp-ga-stat-label {
    font-size: 11px; color: rgba(255,255,255,0.35);
    font-weight: 500;
}

/* Map placeholder */
.hp-map {
    height: 140px;
    border-radius: var(--r-md);
    background:
        radial-gradient(circle 120px at 35% 45%, rgba(76,154,255,0.2), transparent),
        radial-gradient(circle 80px at 55% 55%, rgba(0,168,112,0.15), transparent),
        radial-gradient(circle 60px at 70% 35%, rgba(212,175,55,0.12), transparent),
        var(--b800);
    position: relative;
    overflow: hidden;
}
.hp-map-dot {
    position: absolute;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--b400);
    box-shadow: 0 0 8px var(--b400);
}
.hp-map-dot::after {
    content: '';
    position: absolute; inset: -4px;
    border-radius: 50%;
    border: 1px solid var(--b400);
    opacity: 0.3;
}
.hp-map-label {
    position: absolute; bottom: 12px; left: 14px;
    font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase; letter-spacing: 1px;
}

/* GA Visitors card in Market Pulse */
.ga-visitors-chart { margin-bottom: 16px; }
.ga-visitors-bars {
    display: flex; align-items: flex-end; gap: 3px;
    height: 80px; margin-bottom: 8px;
}
.ga-vbar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: var(--b100);
    transition: height 0.5s ease;
    position: relative;
}
.ga-vbar:hover { background: var(--b400); }
.ga-vbar.highlight { background: var(--b600); }
.ga-visitors-labels {
    display: flex; gap: 3px;
}
.ga-visitors-labels span {
    flex: 1; text-align: center;
    font-size: 9px; color: var(--n400); font-weight: 500;
}
.ga-visitors-summary {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
    margin-top: 16px;
}
.ga-vs-item {
    text-align: center;
    padding: 12px 8px;
    border-radius: var(--r-sm);
    background: var(--n25);
}
.ga-vs-num {
    font-size: 18px; font-weight: 800; color: var(--n900);
    font-family: 'Poppins',sans-serif;
}
.ga-vs-label {
    font-size: 10px; font-weight: 600; color: var(--n400);
    text-transform: uppercase; letter-spacing: 0.3px;
}
.ga-vs-change {
    font-size: 10px; font-weight: 700; color: var(--g600);
}

/* GSC search keywords card in Market Pulse */
.gsc-kw-table { width: 100%; }
.gsc-kw-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--n100);
}
.gsc-kw-row:last-child { border-bottom: none; }
.gsc-kw-rank-num {
    width: 24px; height: 24px; border-radius: 6px;
    background: var(--n50);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: var(--n600);
    flex-shrink: 0;
}
.gsc-kw-rank-num.top { background: var(--b600); color: #fff; }
.gsc-kw-term { font-size: 13px; font-weight: 500; color: var(--n700); flex: 1; }
.gsc-kw-metric {
    font-size: 11px; font-weight: 700; color: var(--n600);
    width: 60px; text-align: right;
}
.gsc-kw-metric.clicks { color: var(--b600); }
.gsc-kw-metric.ctr { color: var(--g600); }
.gsc-kw-header {
    display: flex; gap: 10px; padding: 0 0 8px;
    border-bottom: 2px solid var(--n100); margin-bottom: 4px;
}
.gsc-kw-header span {
    font-size: 10px; font-weight: 700; color: var(--n400);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.gsc-kw-header span:first-child { width: 24px; flex-shrink: 0; }
.gsc-kw-header span:nth-child(2) { flex: 1; }
.gsc-kw-header span:nth-child(3),
.gsc-kw-header span:nth-child(4) { width: 60px; text-align: right; }

@media (max-width:1024px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-panel { display: none; }
}
@media (max-width:640px) {
    .hero-search-row { flex-direction: column; gap: 8px; }
    .hero-search-country { border-radius: 12px; border-right: none; padding: 12px 14px; justify-content: center; }
    .hero-search-country + .hero-search-input { border-left: none; border-radius: 12px; }
    .hero-search-input { border-radius: 12px; background: rgba(255,255,255,0.06); padding: 14px 18px; }
    .hero-search-btn { border-radius: 12px; justify-content: center; padding: 14px 24px; }
}

/* ── TRUST MARQUEE ───────────────────────────────────────────── */
.trust-m {
    background: #fff;
    padding: 20px 0;
    border-bottom: 1px solid var(--n100);
    overflow: hidden;
}
.trust-m-track {
    display: flex; align-items: center; gap: 48px;
    animation: trustScroll 30s linear infinite;
    width: max-content;
}
@keyframes trustScroll {
    0% { transform: translateX(0); } 100% { transform: translateX(-50%); }
}
.trust-m-item {
    display: flex; align-items: center; gap: 10px;
    white-space: nowrap;
}
.trust-m-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.trust-m-icon.bl { background: var(--b100); color: var(--b600); }
.trust-m-icon.gr { background: var(--g100); color: var(--g600); }
.trust-m-icon.pu { background: var(--p100); color: var(--p600); }
.trust-m-icon.go { background: var(--gold100); color: var(--gold); }
.trust-m-num {
    font-size: 18px; font-weight: 800; color: var(--n900);
    font-family: 'Poppins',sans-serif;
}
.trust-m-label { font-size: 11px; color: var(--n400); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }

/* ── SECTION HEADER ──────────────────────────────────────────── */
.sh { margin-bottom: 48px; }
.sh--center { text-align: center; }
.sh-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 2px; color: var(--b600);
    margin-bottom: 10px;
}
.sh-label::before {
    content: ''; width: 24px; height: 2px;
    background: var(--b600); border-radius: 1px;
}
.sh-title {
    font-family: 'Poppins',sans-serif;
    font-size: clamp(26px,3.5vw,38px);
    font-weight: 800; color: var(--n900);
    letter-spacing: -0.5px; margin-bottom: 10px;
}
.sh-desc {
    font-size: 15px; color: var(--n500); max-width: 540px;
}
.sh--center .sh-desc { margin: 0 auto; }

/* ── CATEGORIES ──────────────────────────────────────────────── */
.cats { padding: 80px 0; background: #fff; }
.cats-top { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; }
.cats-link {
    font-size: 13px; font-weight: 600; color: var(--b600);
    display: inline-flex; align-items: center; gap: 6px;
    transition: gap 0.2s;
}
.cats-link:hover { gap: 10px; }

.cats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
.cat-card {
    padding: 20px 16px;
    border-radius: var(--r-md);
    background: var(--n25);
    border: 1px solid var(--n100);
    text-align: center;
    transition: all 0.25s;
    position: relative;
    display: block;
}
.cat-card:hover {
    background: #fff;
    border-color: var(--b200);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,82,204,0.1);
}
.cat-card-icon {
    width: 48px; height: 48px; border-radius: 14px;
    margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    transition: transform 0.2s;
}
.cat-card:hover .cat-card-icon { transform: scale(1.1); }
.cat-card-icon.i1 { background: var(--b100); color: var(--b600); }
.cat-card-icon.i2 { background: var(--g100); color: var(--g600); }
.cat-card-icon.i3 { background: var(--gold100); color: var(--gold); }
.cat-card-icon.i4 { background: var(--p100); color: var(--p600); }
.cat-card-icon.i5 { background: #fde8e8; color: var(--red); }
.cat-card-icon.i6 { background: #e0f7fa; color: #0097a7; }
.cat-card-name {
    font-size: 13px; font-weight: 600; color: var(--n800);
    margin-bottom: 4px;
}
.cat-card-ct {
    font-size: 11px; color: var(--n400); font-weight: 500;
}
@media (max-width:1024px) { .cats-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width:640px) { .cats-grid { grid-template-columns: repeat(2,1fr); } }

/* Sub-category tag cloud below the grid */
.cats-tags {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 24px; padding-top: 24px;
    border-top: 1px solid var(--n100);
}
.cats-tag {
    padding: 5px 14px; border-radius: 100px;
    font-size: 12px; font-weight: 500;
    color: var(--n600);
    background: var(--n50);
    border: 1px solid var(--n100);
    transition: all 0.15s;
    display: inline-block;
}
.cats-tag:hover {
    background: var(--b50); border-color: var(--b200); color: var(--b600);
}

/* ── MARKET PULSE ─────────────────────────────────────────────── */
.pulse { padding: 80px 0; background: var(--n25); border-top: 1px solid var(--n100); border-bottom: 1px solid var(--n100); }
.pulse-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}
.pulse-card {
    background: #fff;
    border-radius: var(--r-lg);
    border: 1px solid var(--n100);
    padding: 28px;
    transition: all 0.3s;
}
.pulse-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.pulse-card-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px;
}
.pulse-card-title {
    font-size: 13px; font-weight: 700; color: var(--n800);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.pulse-card-badge {
    font-size: 10px; font-weight: 700; padding: 3px 8px;
    border-radius: 100px;
    background: var(--g100); color: var(--g600);
    text-transform: uppercase;
}

/* Trending Industries list */
.trend-list { display: flex; flex-direction: column; gap: 12px; }
.trend-item {
    display: flex; align-items: center; gap: 12px;
}
.trend-rank {
    width: 24px; height: 24px; border-radius: 6px;
    background: var(--n50);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: var(--n600);
    flex-shrink: 0;
}
.trend-rank.top { background: var(--b600); color: #fff; }
.trend-name { font-size: 13px; font-weight: 500; color: var(--n700); flex: 1; }
.trend-bar-wrap {
    width: 80px; height: 6px; border-radius: 3px;
    background: var(--n100); overflow: hidden;
}
.trend-bar-fill {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, var(--b600), var(--b400));
}
.trend-pct {
    font-size: 11px; font-weight: 700; color: var(--g600);
    width: 40px; text-align: right;
}

/* Country breakdown list */
.country-bars { display: flex; flex-direction: column; gap: 0; }
.country-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--n100);
}
.country-row:last-child { border-bottom: none; }
.country-row img {
    width: 22px; height: 15px; border-radius: 2px; object-fit: cover; flex-shrink: 0;
}
.country-row-name {
    font-size: 13px; font-weight: 500; color: var(--n700);
    flex: 1;
}
.country-row-ct {
    font-size: 15px; font-weight: 700; color: var(--n800);
    text-align: right; white-space: nowrap;
}

@media (max-width:900px) { .pulse-grid { grid-template-columns: 1fr; } }

/* ── FEATURED CATALOGS ───────────────────────────────────────── */
.catalogs { padding: 80px 0; background: #fff; }
.catalogs-scroll {
    display: flex; gap: 20px;
    overflow-x: auto; padding: 8px 4px 24px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.catalogs-scroll::-webkit-scrollbar { height: 4px; }
.catalogs-scroll::-webkit-scrollbar-thumb { background: var(--b600); border-radius: 2px; }
.catalogs-scroll::-webkit-scrollbar-track { background: var(--n100); }

.cc {
    flex: 0 0 300px;
    background: #fff;
    border-radius: var(--r-lg);
    border: 1px solid var(--n100);
    overflow: hidden;
    transition: all 0.3s;
    scroll-snap-align: start;
}
.cc:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,82,204,0.12);
    border-color: var(--b200);
}
.cc-accent { height: 3px; background: linear-gradient(90deg, var(--b600), var(--b400)); }
.cc-head {
    padding: 18px; display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid var(--n50);
}
.cc-logo {
    width: 44px; height: 44px; border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px; color: #fff; flex-shrink: 0;
}
.cc-name { font-size: 14px; font-weight: 700; color: var(--n900); }
.cc-cat-tag {
    font-size: 11px; font-weight: 600; color: var(--b600);
    background: var(--b100); padding: 2px 8px; border-radius: 100px;
    display: inline-block; margin-top: 3px;
}
.cc-body { padding: 18px; }
.cc-preview {
    height: 160px;
    background: var(--n50);
    border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--n300); font-size: 28px;
    border: 1px dashed var(--n200);
    margin-bottom: 12px;
    overflow: hidden;
}
.cc-preview img { width: 100%; height: 100%; object-fit: cover; }
.cc-pdf-iframe { width: 100%; height: 100%; border: none; pointer-events: none; }
.cc-desc {
    font-size: 12.5px; color: var(--n500); line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.cc-foot {
    padding: 14px 18px; border-top: 1px solid var(--n50);
    display: flex; gap: 8px;
}
.cc-btn {
    flex: 1; padding: 9px; border-radius: var(--r-sm);
    font-size: 12px; font-weight: 600; text-align: center;
    border: none; transition: all 0.15s;
    display: inline-block;
}
.cc-btn.pri { background: var(--b600); color: #fff; }
.cc-btn.pri:hover { background: var(--b700); }
.cc-btn.out { background: #fff; color: var(--b600); border: 1.5px solid var(--b600); }
.cc-btn.out:hover { background: var(--b50); }

@media (max-width:640px) { .cc { flex: 0 0 260px; } }

/* ── EXHIBITIONS ─────────────────────────────────────────────── */
.expos { padding: 80px 0; background: var(--n25); border-top: 1px solid var(--n100); }
.expos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.expo {
    border-radius: var(--r-lg);
    border: 1px solid var(--n100);
    overflow: hidden;
    background: #fff;
    transition: all 0.3s;
}
.expo:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}
.expo-img {
    height: 180px;
    position: relative; overflow: hidden;
}
.expo-img-bg {
    position: absolute; inset: 0;
}
.expo-img-bg i {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    font-size: 48px;
    color: rgba(255,255,255,0.08);
}
.expo-img-bg img {
    width: 100%; height: 100%; object-fit: cover;
}
.expo-date-pill {
    position: absolute; top: 14px; left: 14px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    color: #fff; padding: 6px 14px; border-radius: var(--r-sm);
    font-size: 12px; font-weight: 700;
    display: flex; align-items: center; gap: 6px;
}
.expo-status-pill {
    position: absolute; top: 14px; right: 14px;
    padding: 4px 10px; border-radius: 100px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px;
}
.expo-status-pill.upcoming { background: var(--g100); color: var(--g600); }
.expo-body { padding: 20px; }
.expo-meta {
    display: flex; gap: 16px; margin-bottom: 10px;
    font-size: 12px; color: var(--n400);
}
.expo-meta i { color: var(--b400); }
.expo-title {
    font-size: 16px; font-weight: 700; color: var(--n900);
    margin-bottom: 8px;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.expo-desc {
    font-size: 13px; color: var(--n500); line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 16px;
}
.expo-link {
    font-size: 13px; font-weight: 600; color: var(--b600);
    display: inline-flex; align-items: center; gap: 6px;
    transition: gap 0.2s;
}
.expo-link:hover { gap: 10px; }
@media (max-width:900px) { .expos-grid { grid-template-columns: 1fr; } }

/* ── FEATURES (dark) ─────────────────────────────────────────── */
.feats {
    padding: 80px 0;
    background: var(--b900);
    position: relative; overflow: hidden;
}
.feats::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(76,154,255,0.07) 1px, transparent 1px);
    background-size: 24px 24px;
}
.feats .sh-label { color: var(--b400); }
.feats .sh-label::before { background: var(--b400); }
.feats .sh-title { color: #fff; }
.feats .sh-desc { color: rgba(255,255,255,0.45); }

.feats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative; z-index: 1;
}
.feat {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--r-lg);
    padding: 32px 24px;
    transition: all 0.3s;
    text-align: center;
}
.feat:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-4px);
}
.feat-icon {
    width: 56px; height: 56px; border-radius: 16px;
    margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.feat-icon.fi1 { background: rgba(0,82,204,0.15); color: var(--b400); }
.feat-icon.fi2 { background: rgba(0,168,112,0.15); color: var(--g500); }
.feat-icon.fi3 { background: rgba(101,84,192,0.15); color: var(--p400); }
.feat-icon.fi4 { background: rgba(212,175,55,0.15); color: #f0d060; }
.feat-title {
    font-size: 15px; font-weight: 700; color: #fff;
    margin-bottom: 8px;
}
.feat-desc {
    font-size: 13px; color: rgba(255,255,255,0.4); line-height: 1.65;
}
@media (max-width:900px) { .feats-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px) { .feats-grid { grid-template-columns: 1fr; } }

/* ── TESTIMONIALS / AUTHORITY ─────────────────────────────────── */
.authority {
    padding: 80px 0;
    background: #fff;
}
.auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.auth-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.auth-stat {
    padding: 28px;
    border-radius: var(--r-lg);
    background: var(--n25);
    border: 1px solid var(--n100);
    transition: all 0.2s;
}
.auth-stat:hover {
    border-color: var(--b200);
    box-shadow: 0 8px 24px rgba(0,82,204,0.06);
}
.auth-stat-num {
    font-size: 36px; font-weight: 900; color: var(--b600);
    font-family: 'Poppins',sans-serif; line-height: 1;
    margin-bottom: 4px;
}
.auth-stat-label {
    font-size: 13px; font-weight: 500; color: var(--n500);
}

.auth-quotes { display: flex; flex-direction: column; gap: 20px; }
.auth-quote {
    padding: 24px;
    border-radius: var(--r-lg);
    background: var(--n25);
    border: 1px solid var(--n100);
    border-left: 4px solid var(--b600);
}
.auth-quote-text {
    font-size: 14px; color: var(--n700); font-style: italic;
    line-height: 1.7; margin-bottom: 12px;
}
.auth-quote-author {
    display: flex; align-items: center; gap: 10px;
}
.auth-quote-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #fff;
}
.auth-quote-name { font-size: 13px; font-weight: 600; color: var(--n800); }
.auth-quote-role { font-size: 11px; color: var(--n400); }
@media (max-width:900px) { .auth-grid { grid-template-columns: 1fr; } }

/* ── CTA ─────────────────────────────────────────────────────── */
.cta-s { padding: 80px 0; background: var(--n25); }
.cta-box {
    background: linear-gradient(135deg, var(--b800), var(--b900));
    border-radius: var(--r-2xl);
    padding: 72px 64px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative; overflow: hidden;
}
.cta-box::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle 300px at 10% 50%, rgba(76,154,255,0.12), transparent),
        radial-gradient(circle 200px at 90% 50%, rgba(101,84,192,0.08), transparent);
}
.cta-box * { position: relative; z-index: 1; }
.cta-title {
    font-family: 'Poppins',sans-serif;
    font-size: clamp(28px,3vw,36px);
    font-weight: 800; color: #fff;
    letter-spacing: -0.5px; margin-bottom: 14px;
}
.cta-desc { font-size: 16px; color: rgba(255,255,255,0.55); margin-bottom: 28px; line-height: 1.7; }
.cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-btn {
    padding: 14px 32px; border-radius: var(--r-sm);
    font-size: 14px; font-weight: 600; border: none;
    transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 8px;
}
.cta-btn.w { background: #fff; color: var(--b600); }
.cta-btn.w:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.cta-btn.g { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.2); }
.cta-btn.g:hover { border-color: #fff; background: rgba(255,255,255,0.05); }

.cta-right-stats { display: flex; flex-direction: column; gap: 16px; }
.cta-stat-row {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--r-md);
}
.cta-stat-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.cta-stat-icon.c1 { background: rgba(76,154,255,0.15); color: var(--b400); }
.cta-stat-icon.c2 { background: rgba(0,168,112,0.15); color: var(--g500); }
.cta-stat-icon.c3 { background: rgba(212,175,55,0.15); color: #f0d060; }
.cta-stat-num { font-size: 20px; font-weight: 800; color: #fff; }
.cta-stat-lbl { font-size: 12px; color: rgba(255,255,255,0.4); }
@media (max-width:900px) { .cta-box { grid-template-columns: 1fr; padding: 48px 32px; } }

/* Footer and Back-to-top styles are in v3-layout.css */

/* ── PENANG INDUSTRY GROUPS ──────────────────────────────────── */
.industry-groups { padding: 80px 0; background: #fff; }
.industry-groups-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.industry-group-card {
    padding: 24px;
    border-radius: var(--r-lg);
    background: var(--n25);
    border: 1px solid var(--n100);
    transition: all 0.25s;
}
.industry-group-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--b200);
}
.industry-group-icon {
    font-size: 28px;
    margin-bottom: 12px;
}
.industry-group-name {
    font-size: 14px; font-weight: 700; color: var(--n800);
    margin-bottom: 8px;
}
.industry-group-cats {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.industry-group-cats a {
    font-size: 11px; color: var(--b600); background: var(--b100);
    padding: 2px 8px; border-radius: 100px;
    transition: all 0.15s;
}
.industry-group-cats a:hover { background: var(--b600); color: #fff; }
@media (max-width:900px) { .industry-groups-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:640px) { .industry-groups-grid { grid-template-columns: 1fr; } }