/* ============================================================================
   /back-office hub — built on the comms foundation (global styles.css tokens +
   house classes: wrap, section-pad, h1/h2, lead, eyebrow, ios, btn) and the
   canonical landing backdrop `.hp2-bg` (home2/bg.css) on the page root. Scoped
   `.hub`. Two signature stages:
     • the hero "morning board" — the night's back-office jobs clear themselves
       on a loop (driver: hub.js adds .hub-board--js, per-row .cleared, .is-clear).
     • the "engine sections" — one full section per specialist (insurance, account
       management, HR, inventory), each with copy + a live console whose rows
       stream in on view (driver: hub.js adds .hub-eng-sec--js, toggles .in on rows).
   De-boxed throughout: sections are transparent so the hp2-bg wash reads as one
   band; only the live cards carry elevation. Sand-blue family; --mint = done.
   ============================================================================ */

.hub { --hub-blue: #3d63a4; --hub-sky: #6f93cc; --hub-ink: #283142; position: relative; }

/* keep every section transparent so the shared hp2-bg backdrop shows through
   (no conflicting full-bleed section fills) */
.hub-hero, .hub-floor-sec, .hub-eng-sec, .hub-mkt, .hub-cta { background: transparent; }

/* ── HERO ─────────────────────────────────────────────────────────────── */
.hub-hero { position: relative; overflow: hidden; }
.hub-hero::before {
  content: ""; position: absolute; inset: -10% -5% auto auto; width: 60%; height: 520px;
  background: radial-gradient(60% 60% at 78% 6%, color-mix(in srgb, var(--hub-blue) 13%, transparent), transparent 62%);
  pointer-events: none; z-index: 0;
}
.hub-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 11fr); gap: clamp(34px, 5.5vw, 84px); align-items: center; }
.hub-hero-copy .eyebrow { color: var(--indigo-700); }
.hub-hero-copy h1 { margin: 14px 0 0; font-size: clamp(40px, 6vw, 80px); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; }
.hub-hl { color: var(--hub-blue); position: relative; }
.hub-hero-copy .lead { max-width: 48ch; margin-top: 18px; }
.hub-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hub-hero-stats { display: flex; gap: 30px; margin-top: 32px; flex-wrap: wrap; }
.hub-hero-stat b { display: block; font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.02em; color: var(--hub-blue); font-variant-numeric: tabular-nums; }
.hub-hero-stat > span { font-size: 13px; color: var(--ink-60); }

/* the morning board — one elevated, living stage panel */
.hub-board-wrap { position: relative; }
.hub-board-halo {
  position: absolute; inset: -14% -10%; z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(50% 50% at 55% 35%, color-mix(in srgb, var(--hub-sky) 30%, transparent), transparent 70%);
  filter: blur(28px); opacity: .7;
}
.hub-board {
  position: relative; z-index: 1; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-soft); box-shadow: var(--shadow-float); overflow: hidden;
  transform: translateZ(0); transition: transform .3s ease;
}
.hub-board-top { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--line-2); }
.hub-board-title { display: flex; align-items: center; gap: 10px; font-weight: 640; font-size: 14px; color: var(--hub-ink); }
.hub-board-title .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); transition: background .5s ease; box-shadow: 0 0 0 0 transparent; }
.hub-board-clock { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-40); font-variant-numeric: tabular-nums; margin-left: 2px; }
.hub-board-count { font-size: 13px; font-weight: 600; color: var(--ink-60); font-variant-numeric: tabular-nums; }
.hub-board-count b { color: var(--hub-blue); }
.hub-board-sweep { height: 3px; background: var(--line-2); position: relative; overflow: hidden; }
.hub-board-sweep i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--hub-sky), var(--hub-blue)); transition: inset 1.4s cubic-bezier(.4,.1,.2,1); }

.hub-jobs { list-style: none; margin: 0; padding: 4px 0; }
.hub-job { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 13px 20px; border-bottom: 1px solid var(--line-2); }
.hub-job:last-child { border-bottom: none; }
.hub-job-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 16px; background: color-mix(in srgb, var(--hub-blue) 8%, #fff); }
.hub-job-main b { display: block; font-weight: 620; font-size: 13.5px; color: var(--hub-ink); }
.hub-job-main span { display: block; font-size: 12px; color: var(--ink-60); margin-top: 1px; }
.hub-job-st { position: relative; display: inline-grid; justify-items: end; }
.hub-job-st > * { grid-area: 1/1; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; transition: opacity .45s ease, transform .45s ease; }
.hub-job-st > *::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hub-job-st .bad { color: var(--rose); background: color-mix(in srgb, var(--rose) 11%, #fff); }
.hub-job-st .ok { color: var(--mint); background: color-mix(in srgb, var(--mint) 12%, #fff); }
.hub-job-st .ok::before { display: none; }
.hub-job-tick { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: var(--mint); color: #fff; font-size: 8px; }

.hub-board-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; border-top: 1px solid var(--line-2); background: color-mix(in srgb, var(--hub-blue) 4%, #fff); }
.hub-board-foot-l { font-size: 12.5px; font-weight: 600; color: var(--hub-ink); }
.hub-board-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-40); }
.hub-board-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--hub-sky); }

/* ---- resolved state = default (no-JS / reduced-motion read as "done") ---- */
.hub-job-st .bad { opacity: 0; transform: translateY(-3px); }
.hub-job-st .ok { opacity: 1; }

/* ---- JS-driven: start from chaos, then clear row-by-row ---- */
.hub-board--js .hub-board-title .dot { background: var(--rose); }
.hub-board--js .hub-board-sweep i { inset: 0 100% 0 0; }
.hub-board--js .hub-job-st .bad { opacity: 1; transform: none; }
.hub-board--js .hub-job-st .ok { opacity: 0; transform: translateY(3px); }
.hub-board--js .hub-board-foot { opacity: .45; transition: opacity .5s ease; }
.hub-board--js .hub-job.cleared .hub-job-st .bad { opacity: 0; transform: translateY(-3px); }
.hub-board--js .hub-job.cleared .hub-job-st .ok { opacity: 1; transform: none; }
.hub-board--js.is-clear .hub-board-title .dot { background: var(--mint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 22%, transparent); }
.hub-board--js.is-clear .hub-board-sweep i { inset: 0; }
.hub-board--js.is-clear .hub-board-foot { opacity: 1; }
/* freeze animation for a clean, instant reset between loops */
.hub-board--reset .hub-board-sweep i, .hub-board--reset .hub-job-st > * { transition: none !important; }

/* ── ENGINE SECTIONS — one full section per specialist ─────────────────── */
.hub-floor-sec { position: relative; }
.hub-floor-head { max-width: 56ch; }
.hub-floor-head .eyebrow { color: var(--indigo-700); }
.hub-floor-head h2 { margin: 12px 0 0; }
.hub-floor-head .lead { margin-top: 12px; max-width: 52ch; }

/* each specialist gets its own transparent section on the shared hp2-bg wash,
   copy + live console side by side, the console side alternating down the page */
.hub-eng-sec { position: relative; padding-top: clamp(30px, 4vw, 54px); padding-bottom: clamp(30px, 4vw, 54px); }
.hub-eng-sec::before { content: ""; position: absolute; inset: 0 0 auto; border-top: 1px solid var(--line); opacity: .7; pointer-events: none; }
.hub-eng-sec::after {
  content: ""; position: absolute; z-index: 0; top: 6%; right: -6%; width: 46%; height: 84%; pointer-events: none;
  background: radial-gradient(58% 55% at 72% 42%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 66%);
}
.hub-eng-sec--alt::after { right: auto; left: -6%; background: radial-gradient(58% 55% at 28% 42%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 66%); }

.hub-eng-row { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 4.5vw, 66px); align-items: center; }
/* flip which side the console lands on for odd sections (grid order, keeps DOM order copy→console for a11y) */
.hub-eng-sec--alt .hub-panel-copy { order: 2; }
.hub-eng-sec--alt .hub-console { order: 1; }

.hub-panel-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 80%, var(--hub-ink)); }
.hub-panel-h { margin: 12px 0 0; font-size: clamp(25px, 3vw, 40px); font-weight: 500; letter-spacing: -.03em; line-height: 1.12; color: var(--hub-ink); }
.hub-panel-lead { margin: 12px 0 0; font-size: clamp(16.5px, 1.35vw, 20px); font-weight: 400; color: var(--ink-60); line-height: 1.55; max-width: 42ch; }
.hub-points { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.hub-points li { position: relative; padding-left: 24px; font-size: 13.5px; color: var(--ink-60); line-height: 1.5; }
.hub-points li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--hub-sky), var(--accent, var(--indigo))); }
.hub-points li b { color: var(--hub-ink); font-weight: 620; }
.hub-seelink { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; font-weight: 640; font-size: 15px; color: var(--accent, var(--hub-blue)); text-decoration: none; }
.hub-seelink .arrow { transition: transform .25s ease; }
.hub-seelink:hover .arrow { transform: translateX(4px); }

/* the live console */
.hub-console { background: #fff; border: 1px solid var(--line); border-radius: var(--r-mid); box-shadow: var(--shadow-2); padding: 16px 18px; transition: transform .3s ease; }
.hub-con-h { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 4px; }
.hub-con-live { display: inline-flex; align-items: center; gap: 5px; color: color-mix(in srgb, var(--accent) 80%, var(--mint)); }
.hub-con-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: hub-pulse 1.6s infinite; }
.hub-con-rows { display: grid; }
.hub-con-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.hub-con-row:last-child { border-bottom: none; }
.hub-con-row .k { color: var(--ink-60); }
.hub-con-row .v { font-weight: 640; color: var(--hub-ink); font-variant-numeric: tabular-nums; }
.hub-con-row .v.ok { color: var(--mint); font-weight: 700; }
.hub-con-row .v.num { color: var(--hub-blue); }
.hub-con-row .v.muted { color: var(--ink-40); }
.hub-con-bar { flex: 1; height: 7px; max-width: 130px; border-radius: 4px; background: var(--line-2); overflow: hidden; margin-left: 12px; }
.hub-con-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--hub-sky), var(--accent, var(--hub-blue))); width: var(--w, 96%); }
/* streamed row entrance — hub.js adds .hub-eng-sec--js to a section and toggles
   .in on its rows when the section scrolls into view */
.hub-eng-sec--js .hub-con-row { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; transition-delay: calc(var(--i, 0) * .08s); }
.hub-eng-sec--js .hub-con-row.in { opacity: 1; transform: none; }
.hub-eng-sec--js .hub-con-bar i { width: 0; transition: width 1.2s cubic-bezier(.4,.1,.2,1); transition-delay: calc(var(--i, 0) * .08s + .2s); }
.hub-eng-sec--js .hub-con-row.in .hub-con-bar i { width: var(--w, 96%); }

@keyframes hub-pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent);} 70%{box-shadow:0 0 0 7px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }

/* ── marketing assist band (de-boxed) ─────────────────────────────────── */
.hub-mkt { position: relative; }
.hub-mkt::before { content: ""; position: absolute; inset: 0; border-top: 1px solid var(--line); pointer-events: none; }
.hub-mkt-grid { position: relative; display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); gap: clamp(24px,4vw,60px); align-items: center; }
.hub-mkt-grid .eyebrow { color: var(--indigo-700); }
.hub-mkt-grid h2 { margin: 12px 0 0; }
.hub-mkt-grid .lead { margin-top: 12px; max-width: 44ch; }
.hub-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hub-chips span { font-size: 12.5px; font-weight: 600; color: var(--indigo-700); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }

.hub-winback { background: #fff; border: 1px solid var(--line); border-radius: var(--r-mid); box-shadow: var(--shadow-2); padding: 18px 20px; }
.hub-winback-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.hub-winback-stat { padding: 14px 4px; border-radius: 12px; background: color-mix(in srgb, var(--hub-blue) 5%, #fff); text-align: center; }
.hub-winback-stat b { display: block; font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.02em; color: var(--hub-blue); font-variant-numeric: tabular-nums; }
.hub-winback-stat span { display: block; font-size: 11.5px; color: var(--ink-60); margin-top: 4px; line-height: 1.3; }
.hub-winback-money b { color: var(--mint); }

/* ── closing CTA (de-boxed, morning-board motif) ──────────────────────── */
.hub-cta { position: relative; text-align: center; overflow: hidden; border-top: 1px solid var(--line); }
.hub-cta-glow { position: absolute; inset: -30% 0 auto; height: 420px; z-index: 0; pointer-events: none; background: radial-gradient(50% 60% at 50% 0%, color-mix(in srgb, var(--hub-blue) 14%, transparent), transparent 65%); }
.hub-cta .wrap { position: relative; z-index: 1; }
.hub-cta .eyebrow { color: var(--indigo-700); }
.hub-cta h2 { max-width: 18ch; margin: 14px auto 0; }
.hub-cta .lead { margin: 14px auto 0; max-width: 54ch; }
.hub-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.hub-cta-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 30px 0 0; padding: 0; }
.hub-cta-strip li { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--hub-ink); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; box-shadow: var(--shadow-2); }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hub-hero-grid, .hub-eng-row, .hub-mkt-grid { grid-template-columns: 1fr; }
  /* stack copy above its console on every section, regardless of alt side */
  .hub-eng-sec--alt .hub-panel-copy, .hub-eng-sec--alt .hub-console { order: 0; }
  .hub-eng-sec::after { display: none; }
  .hub-board-wrap { margin-top: 8px; }
}

/* ── phone hardening — collapse the last multi-column grid the 900px
   pass doesn't reach, and trim padding so cards don't feel boxed-in ── */
@media (max-width: 700px) {
  .hub-winback-grid { grid-template-columns: 1fr; gap: 8px; }
  .hub-winback-stat { display: flex; align-items: baseline; justify-content: space-between; text-align: left; padding: 10px 14px; }
  .hub-winback-stat span { margin-top: 0; }
  .hub-job { padding: 12px 16px; }
  .hub-console { padding: 14px 16px; }
}
@media (max-width: 460px) {
  .hub-hero-stats { gap: 20px; }
  .hub-board-top { padding: 13px 16px; }
  .hub-job { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 11px 14px; }
}

@media (prefers-reduced-motion: reduce), (max-width: 700px) {
  /* board resolves instantly; no chaos, no loop */
  .hub-board--js .hub-board-title .dot { background: var(--mint); }
  .hub-board--js .hub-board-sweep i { inset: 0; transition: none; }
  .hub-board--js .hub-job-st .bad { opacity: 0; }
  .hub-board--js .hub-job-st .ok { opacity: 1; }
  .hub-board--js .hub-board-foot { opacity: 1; }
  .hub-job-st > * { transition: none; }
  /* console rows appear without motion; bars land filled */
  .hub-eng-sec--js .hub-con-row { opacity: 1; transform: none; transition: none; }
  .hub-eng-sec--js .hub-con-bar i, .hub-eng-sec--js .hub-con-row.in .hub-con-bar i { width: var(--w, 96%); transition: none; }
  .hub-con-live i { animation: none; }
}