/* ============================================================
   WorkHub360 — product module (lives on the Tech Hub website)
   The PAGE keeps the Tech Hub dark theme + branding. This file
   only adds the WorkHub360 product identity — logo mark, orbit
   hero, chips, endorsement and the in-product desk mock — using
   the site's own CSS variables so it stays visually consistent.
   The logo mark / orbit keep their blue→cyan gradient (the
   product's own guideline colours) as self-contained SVGs.
   ============================================================ */

/* ---- shared mark defs holder ---- */
.rh-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---- logo lockup + mark ---- */
.rh-lockup{display:inline-flex;align-items:center;gap:14px}
.rh-mark{flex:none}
.rh-word{font-family:var(--font-display);font-weight:800;font-size:1.9rem;letter-spacing:-.02em;color:var(--ink);line-height:1}
.rh-word .n{background:var(--plasma);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- hero ---- */
.rh-hero{padding:70px 0 56px;position:relative}
.rh-hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center}
.rh-hero h1{margin-top:16px}
.rh-slogan{font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:-.01em;color:var(--cyan);margin-top:12px}
.rh-lede{font-size:1.12rem;max-width:520px;margin-top:10px}
.rh-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.rh-chip{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--muted);
  border:1px solid var(--stroke);background:var(--surface);border-radius:100px;padding:7px 14px}
.rh-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);flex:none}

/* endorsement */
.rh-endorse{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:.85rem;color:var(--muted)}
.th-tile{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:none;
  background:linear-gradient(150deg,#0e2338,#0a1626);border:1px solid var(--stroke-2);
  font-family:var(--font-display);font-weight:800;font-size:.58rem;letter-spacing:.02em;color:#cfe6f5}

/* ---- orbit visual ---- */
.rh-orbit-stage{display:flex;justify-content:center}
.rh-orbit-stage svg{width:100%;height:auto;max-width:420px;display:block;
  filter:drop-shadow(0 40px 80px rgba(41,197,238,.18))}
.rh-orbit .spin{transform-box:view-box;transform-origin:190px 190px;animation:rh-spin 22s linear infinite}
.rh-orbit .spin-rev{transform-box:view-box;transform-origin:190px 190px;animation:rh-spin 30s linear infinite reverse}
@keyframes rh-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.rh-orbit .spin,.rh-orbit .spin-rev{animation:none}}

/* ---- in-product desk-booking mock ---- */
.rh-app{border:1px solid var(--stroke-2);border-radius:16px;overflow:hidden;background:var(--surface);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.85)}
.rh-app-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:16px 18px;border-bottom:1px solid var(--stroke)}
.rh-app-top h3,.rh-app-top h4{font-size:1rem;margin:0;font-family:var(--font-display)}
.rh-app-top .sub{font-size:.76rem;color:var(--muted)}
.rh-app-top .tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cyan);border:1px solid var(--stroke);border-radius:100px;padding:4px 10px}
.rh-app-body{padding:18px}
.rh-deskgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.rh-desk{aspect-ratio:1.12;border-radius:9px;border:1px solid var(--stroke-2);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.6rem;color:var(--muted);background:var(--surface-2)}
.rh-desk.free{border-color:rgba(47,190,134,.5);color:#8fe6c1;background:rgba(47,190,134,.10)}
.rh-desk.booked{border-color:rgba(245,130,31,.5);color:#f6b57f;background:rgba(245,130,31,.11)}
.rh-desk.occ{border-color:rgba(43,125,209,.6);color:#9cc8f2;background:rgba(43,125,209,.16)}
.rh-desk.sel{outline:2px solid var(--cyan);outline-offset:2px;color:var(--ink);background:rgba(41,197,238,.16);border-color:transparent}
.rh-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.72rem;color:var(--muted);margin-top:15px}
.rh-legend span{display:inline-flex;align-items:center;gap:7px}
.rh-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}

/* ---- brand promise line ---- */
.rh-promise{font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;
  color:var(--ink);max-width:640px;margin:0 auto 10px}

@media(max-width:900px){
  .rh-hero-grid{grid-template-columns:1fr;gap:34px}
  .rh-orbit-stage svg{max-width:280px}
  .rh-word{font-size:1.6rem}
}
@media(max-width:560px){ .rh-deskgrid{grid-template-columns:repeat(4,1fr)} }

/* ---- mobile optimisation (scoped to the WorkHub360 page) ---- */
@media(max-width:600px){
  /* tighter hero under the sticky header */
  .rh-hero{padding:32px 0 42px}
  .rh-hero-grid{gap:26px}
  .rh-hero h1{font-size:2.1rem;line-height:1.14}
  .rh-lede{font-size:1.02rem;line-height:1.55;margin-top:12px}
  .rh-lockup{gap:11px}
  .rh-word{font-size:1.5rem}
  .rh-mark{width:44px;height:44px}
  .rh-orbit-stage svg{max-width:220px}
  .rh-endorse{font-size:.8rem;margin-top:22px}
  /* full-width, thumb-friendly CTAs */
  .rh-hero .hero-actions{flex-direction:column;align-items:stretch;gap:10px}
  .rh-hero .hero-actions .btn{width:100%;justify-content:center}
  /* shorten this long product page — tighter vertical rhythm */
  .rh-page > section.sec,
  .rh-page > section.dark{padding-top:56px;padding-bottom:56px}
  .rh-page .sec-head{margin-bottom:26px}
  /* denser product components */
  .feat-card{padding:18px}
  .feat-card h3{font-size:.95rem}
  .rh-app-body{padding:14px}
  .rh-deskgrid{gap:6px}
  .rh-desk{font-size:.55rem}
  .rh-chips{gap:8px}
  .rh-chip{padding:6px 12px;font-size:.78rem}
  .price-badge{padding:9px 15px}
}
@media(max-width:380px){
  .rh-hero h1{font-size:1.9rem}
  .rh-orbit-stage svg{max-width:190px}
}