/* ═══════════════════════════════════════════════════════════
   TDS HUB PAGE — hub-*.css  (matches design screenshot)
   ═══════════════════════════════════════════════════════════ */

/* ── Base ── */
.hub-wrap { font-family:'Inter',sans-serif; background:var(--tds-bg,#f8fafc); color:var(--tds-text,#1e293b); }
.hub-wrap * { box-sizing:border-box; }
.hub-wrap a { text-decoration:none; color:inherit; }

/* ── Section shell ── */
.hub-section { max-width:1280px; margin:0 auto; padding:56px 32px; }
.hub-section--gray { background:#f1f5f9; max-width:100%; }
.hub-section--gray > * { max-width:1280px; margin-left:auto; margin-right:auto; padding-left:32px; padding-right:32px; }
.hub-section__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; gap:16px; flex-wrap:wrap; }
.hub-section__title { font-size:1.5rem; font-weight:800; color:#1e293b; margin:0; }
.hub-section__sub { font-size:0.9rem; color:#64748b; margin:4px 0 0; }
.hub-section__view-all { font-size:0.85rem; font-weight:700; color:#2563eb; white-space:nowrap; }
.hub-section__view-all:hover { text-decoration:underline; }
.hub-tools-count { padding:6px 16px; background:#eff6ff; color:#2563eb; border-radius:20px; font-size:0.82rem; font-weight:700; white-space:nowrap; }

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.hub-hero {
    display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
    max-width:1280px; margin:0 auto; padding:64px 32px 48px;
}
.hub-hero__eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    font-size:0.8rem; font-weight:700; color:#2563eb;
    background:#eff6ff; border:1px solid #bfdbfe;
    padding:6px 14px; border-radius:20px; margin-bottom:20px;
}
.hub-eyebrow-dot { width:8px; height:8px; background:#22c55e; border-radius:50%; display:inline-block; animation:pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.4} }
.hub-hero__title { font-size:2.8rem; font-weight:900; line-height:1.15; margin:0 0 16px; color:#0f172a; }
.hub-hero__accent { color:#2563eb; }
.hub-hero__desc { font-size:1rem; color:#475569; line-height:1.7; max-width:500px; margin:0 0 28px; }

/* Search */
.hub-search {
    display:flex; align-items:center; gap:10px;
    background:#fff; border:2px solid #e2e8f0; border-radius:12px;
    padding:0 16px; height:52px; max-width:520px; transition:border .2s;
}
.hub-search:focus-within { border-color:#2563eb; box-shadow:0 0 0 4px #dbeafe; }
.hub-search__icon { color:#94a3b8; flex-shrink:0; }
.hub-search__input { flex:1; border:none; outline:none; font-size:0.95rem; color:#1e293b; background:none; font-family:inherit; }
.hub-search__kbd { font-size:0.72rem; color:#94a3b8; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:5px; padding:2px 6px; flex-shrink:0; }

/* Popular tags */
.hub-popular { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:16px; }
.hub-popular__label { font-size:0.78rem; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.06em; }
.hub-popular__tag {
    font-size:0.78rem; padding:4px 12px; border:1px solid #e2e8f0;
    border-radius:20px; color:#475569; background:#fff; transition:all .2s;
}
.hub-popular__tag:hover { border-color:#2563eb; color:#2563eb; background:#eff6ff; }

/* ── Hero visual (node diagram) ── */
.hub-hero__visual {
    position:relative; width:100%; aspect-ratio:1; max-width:420px; justify-self:center;
}
.hub-node {
    position:absolute; display:flex; flex-direction:column; align-items:center; gap:4px;
    background:#fff; border:1.5px solid #e2e8f0; border-radius:14px;
    padding:10px 14px; box-shadow:0 4px 16px rgba(0,0,0,.08);
    transition:transform .2s, box-shadow .2s; cursor:default;
    white-space:nowrap;
}
.hub-node:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(37,99,235,.15); }
.hub-node__icon { font-size:1.4rem; }
.hub-node__label { font-size:0.68rem; font-weight:700; color:#475569; }
.hub-node__lines { position:absolute; inset:0; width:100%; height:100%; color:#94a3b8; pointer-events:none; }
/* Positions */
.hub-node--center   { top:50%; left:50%; transform:translate(-50%,-50%); background:#1a2e6c; color:#fff; border-color:#1a2e6c; padding:16px 20px; z-index:2; }
.hub-node--center .hub-node__label { color:#bfdbfe; }
.hub-node--top-left { top:5%; left:5%; }
.hub-node--top      { top:2%; left:50%; transform:translateX(-50%); }
.hub-node--top-right{ top:5%; right:5%; }
.hub-node--right    { top:50%; right:0; transform:translateY(-50%); }
.hub-node--bottom-right { bottom:5%; right:5%; }
.hub-node--bottom   { bottom:2%; left:50%; transform:translateX(-50%); }
.hub-node--bottom-left  { bottom:5%; left:5%; }
.hub-node--left     { top:50%; left:0; transform:translateY(-50%); }

/* ══════════════════════════════════════════
   TOOL CARDS GRID
══════════════════════════════════════════ */
.hub-tools-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:20px;
}
.hub-tool-card {
    background:#fff; border:1.5px solid #e2e8f0; border-radius:16px; padding:24px;
    display:flex; flex-direction:column; gap:10px; transition:all .22s;
    position:relative; overflow:hidden;
}
.hub-tool-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:4px;
    background:var(--card-color,#2563eb); border-radius:16px 16px 0 0;
    transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.hub-tool-card:hover::before { transform:scaleX(1); }
.hub-tool-card:hover { border-color:var(--card-color,#2563eb); box-shadow:0 8px 32px rgba(0,0,0,.1); transform:translateY(-3px); }
.hub-tool-card__header { display:flex; align-items:center; justify-content:space-between; }
.hub-tool-card__icon-wrap {
    width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--card-color,#2563eb) 10%, #f8fafc);
    font-size:1.4rem;
}
.hub-tool-card__badge {
    font-size:0.68rem; font-weight:800; padding:3px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:.05em;
}
.hub-tool-card__badge--popular { background:#fef3c7; color:#b45309; }
.hub-tool-card__badge--new     { background:#d1fae5; color:#059669; }
.hub-tool-card__badge--updated { background:#ede9fe; color:#7c3aed; }
.hub-tool-card__name { font-size:1rem; font-weight:700; color:#1e293b; margin:0; }
.hub-tool-card__desc { font-size:0.82rem; color:#64748b; line-height:1.5; flex:1; margin:0; }
.hub-tool-card__footer { padding-top:12px; border-top:1px solid #f1f5f9; }
.hub-tool-card__cta { font-size:0.8rem; font-weight:700; color:var(--card-color,#2563eb); }
.hub-no-results { display:flex; align-items:center; justify-content:center; gap:12px; padding:48px; color:#94a3b8; font-size:1rem; background:#fff; border-radius:16px; border:2px dashed #e2e8f0; }

/* ══════════════════════════════════════════
   CATEGORY CARDS
══════════════════════════════════════════ */
.hub-cats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; max-width:1280px; margin:0 auto; }
.hub-cat-card {
    display:flex; align-items:center; gap:14px; background:#fff; border:1.5px solid #e2e8f0;
    border-radius:14px; padding:16px 18px; transition:all .2s;
}
.hub-cat-card:hover { border-color:#2563eb; box-shadow:0 4px 16px rgba(37,99,235,.1); }
.hub-cat-card--featured { border-color:#bfdbfe; background:linear-gradient(135deg,#eff6ff,#fff); grid-column:span 2; }
.hub-cat-card__icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; color:#fff; }
.hub-cat-card__body { flex:1; min-width:0; }
.hub-cat-card__body strong { display:block; font-size:0.9rem; font-weight:700; color:#1e293b; }
.hub-cat-card__body p { font-size:0.75rem; color:#64748b; margin:4px 0 0; line-height:1.4; }
.hub-cat-card__count { font-size:0.72rem; color:#94a3b8; font-weight:600; }
.hub-cat-card__arrow { color:#94a3b8; font-size:1rem; flex-shrink:0; }
.hub-cat-card:hover .hub-cat-card__arrow { color:#2563eb; }

/* ══════════════════════════════════════════
   ACCORDION + RIGHT SIDEBAR
══════════════════════════════════════════ */
.hub-accordion-layout { display:grid; grid-template-columns:1fr 340px; gap:40px; align-items:start; }
.hub-accordion-list { display:flex; flex-direction:column; gap:0; border:1.5px solid #e2e8f0; border-radius:16px; overflow:hidden; background:#fff; }
.hub-accordion-item { border-bottom:1px solid #e2e8f0; }
.hub-accordion-item:last-child { border-bottom:none; }
.hub-accordion-trigger {
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:18px 20px; background:none; border:none; cursor:pointer; font-family:inherit; text-align:left;
}
.hub-accordion-trigger:hover { background:#f8fafc; }
.hub-accordion-item--open .hub-accordion-trigger { background:#eff6ff; }
.hub-accordion-trigger__left { display:flex; align-items:center; gap:12px; }
.hub-accordion-trigger__left span { font-size:1.2rem; }
.hub-accordion-trigger__left strong { display:block; font-size:0.95rem; font-weight:700; color:#1e293b; }
.hub-accordion-trigger__left small { font-size:0.78rem; color:#64748b; }
.hub-accordion-arrow { flex-shrink:0; color:#94a3b8; transition:transform .2s; }
.hub-accordion-item--open .hub-accordion-arrow { color:#2563eb; }
.hub-accordion-body { padding:16px 20px 20px; background:#fafbff; }
.hub-accordion-tools { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.hub-accordion-tool {
    display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
    background:#fff; border:1px solid #e2e8f0; border-radius:8px; font-size:0.8rem;
    font-weight:600; color:#1e293b; transition:all .15s;
}
.hub-accordion-tool:hover { border-color:#2563eb; color:#2563eb; background:#eff6ff; }
.hub-accordion-related { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.hub-accordion-related__label { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; }
.hub-accordion-related a { font-size:0.78rem; color:#475569; padding:3px 10px; background:#f1f5f9; border-radius:6px; }
.hub-accordion-related a:hover { color:#2563eb; background:#eff6ff; }
.hub-accordion-countries { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hub-country-chip { font-size:0.78rem; padding:3px 10px; background:#f1f5f9; border-radius:6px; color:#475569; }

/* Right sidebar */
.hub-sidebar-right { display:flex; flex-direction:column; gap:20px; }
.hub-stat-box { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#e2e8f0; border:1.5px solid #e2e8f0; border-radius:14px; overflow:hidden; }
.hub-stat { background:#fff; padding:20px 12px; text-align:center; display:flex; flex-direction:column; gap:4px; }
.hub-stat__num { font-size:1.6rem; font-weight:900; color:#2563eb; }
.hub-stat__label { font-size:0.72rem; color:#64748b; font-weight:600; }
.hub-sidebar-card { background:#fff; border:1.5px solid #e2e8f0; border-radius:14px; overflow:hidden; }
.hub-sidebar-card__head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #f1f5f9; font-size:0.88rem; font-weight:700; color:#1e293b; }
.hub-popular-row { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid #f8fafc; transition:background .15s; }
.hub-popular-row:last-child { border-bottom:none; }
.hub-popular-row:hover { background:#f8fafc; }
.hub-popular-row__num { font-size:0.75rem; font-weight:800; color:#94a3b8; width:18px; }
.hub-popular-row__text { flex:1; font-size:0.82rem; color:#334155; }
.hub-comparison-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid #f1f5f9; transition:background .15s; }
.hub-comparison-row:last-child { border-bottom:none; }
.hub-comparison-row:hover { background:#f8fafc; }
.hub-comparison-row strong { display:block; font-size:0.85rem; color:#1e293b; }
.hub-comparison-row p { font-size:0.75rem; color:#64748b; margin:2px 0 0; }
.hub-comparison-row > span { color:#94a3b8; font-size:1rem; flex-shrink:0; }

/* ══════════════════════════════════════════
   COUNTRY TABS
══════════════════════════════════════════ */
.hub-country-tabs { display:flex; gap:0; background:#fff; border:1.5px solid #e2e8f0; border-radius:12px; padding:4px; width:fit-content; margin-bottom:24px; flex-wrap:wrap; max-width:1280px; }
.hub-country-tab { padding:8px 20px; border:none; background:none; border-radius:9px; font-size:0.85rem; font-weight:600; color:#64748b; cursor:pointer; transition:all .2s; font-family:inherit; }
.hub-country-tab--active { background:#2563eb; color:#fff; box-shadow:0 2px 8px rgba(37,99,235,.25); }
.hub-countries-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:12px; max-width:1280px; }
.hub-country-card { display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 12px; background:#fff; border:1.5px solid #e2e8f0; border-radius:12px; transition:all .2s; }
.hub-country-card:hover { border-color:#2563eb; box-shadow:0 4px 16px rgba(37,99,235,.1); transform:translateY(-2px); }
.hub-country-card__flag { font-size:2rem; }
.hub-country-card__name { font-size:0.78rem; font-weight:600; color:#475569; text-align:center; }

/* ══════════════════════════════════════════
   UPDATES GRID
══════════════════════════════════════════ */
.hub-updates-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.hub-update-card { background:#fff; border:1.5px solid #e2e8f0; border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:8px; position:relative; overflow:hidden; }
.hub-update-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--upd-color,#2563eb); }
.hub-update-card__top { display:flex; align-items:center; justify-content:space-between; }
.hub-update-card__icon { font-size:1.4rem; }
.hub-update-card__badge { font-size:0.68rem; font-weight:800; padding:3px 10px; border-radius:20px; text-transform:uppercase; }
.hub-update-card__badge--updated { background:#ede9fe; color:#7c3aed; }
.hub-update-card__badge--new     { background:#d1fae5; color:#059669; }
.hub-update-card__name { font-size:0.95rem; font-weight:700; color:#1e293b; }
.hub-update-card__date { font-size:0.75rem; color:#94a3b8; }
.hub-request-card { background:linear-gradient(135deg,#1a2e6c,#2563eb); color:#fff; border-radius:14px; padding:24px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.hub-request-card__emoji { font-size:1.6rem; }
.hub-request-card strong { font-size:1rem; font-weight:800; }
.hub-request-card p { font-size:0.82rem; opacity:.85; margin:0; line-height:1.5; }
.hub-request-btn { display:inline-flex; align-items:center; padding:8px 18px; background:#fff; color:#2563eb; border-radius:8px; font-size:0.85rem; font-weight:700; margin-top:4px; transition:all .2s; }
.hub-request-btn:hover { background:#eff6ff; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:1024px){
  .hub-hero { grid-template-columns:1fr; }
  .hub-hero__visual { display:none; }
  .hub-accordion-layout { grid-template-columns:1fr; }
  .hub-sidebar-right { display:grid; grid-template-columns:1fr 1fr; }
  .hub-stat-box { grid-column:1/-1; }
  .hub-cats-grid { grid-template-columns:repeat(3,1fr); }
  .hub-cat-card--featured { grid-column:span 1; }
}
@media(max-width:768px){
  .hub-hero { padding:40px 20px 32px; }
  .hub-section { padding:40px 20px; }
  .hub-hero__title { font-size:2rem; }
  .hub-tools-grid { grid-template-columns:1fr 1fr; }
  .hub-cats-grid { grid-template-columns:1fr 1fr; }
  .hub-sidebar-right { grid-template-columns:1fr; }
  .hub-countries-grid { grid-template-columns:repeat(4,1fr); }
  .hub-updates-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:480px){
  .hub-tools-grid { grid-template-columns:1fr; }
  .hub-cats-grid { grid-template-columns:1fr; }
  .hub-cat-card--featured { grid-column:span 1; }
  .hub-countries-grid { grid-template-columns:repeat(3,1fr); }
  .hub-updates-grid { grid-template-columns:1fr; }
  .hub-hero__title { font-size:1.6rem; }
}