/* ─────────────────────────────────────────────────────────────
   Salmon homepage hero v2 — "Research, not records"
   + one-panel researching→resolved widget.
   Fully namespaced with .hx- to avoid collisions with home.css/main.css.
   Custom props defined on .hx-hero; descendants inherit them.
   ───────────────────────────────────────────────────────────── */
.hx-hero{
  --hx-dark:#1f1f1f; --hx-darker:#181818; --hx-surface:#2a2a2a;
  --hx-border:#303030; --hx-border2:#3a3a3a;
  --hx-salmon:#fc7869; --hx-salmon-l:#ff9a8b; --hx-salmon-bdr:rgba(252,120,105,0.25);
  --hx-charcoal:#a3a3a3; --hx-grey:#d4d4d4; --hx-white:#fff; --hx-green:#5ab46e;
  --hx-mono:'SF Mono','Fira Code',monospace;
  padding:6rem 0 4.5rem; overflow:hidden; position:relative;
}
.hx-wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem;}
.hx-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:3rem;align-items:center;}
.hx-copy{min-width:0;}
@media(max-width:991px){.hx-grid{grid-template-columns:1fr;gap:2.5rem;}}

.hx-eyebrow{font-size:0.7rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--hx-charcoal);margin-bottom:1.1rem;}
.hx-h1{font-size:clamp(2.6rem,5.2vw,3.9rem);font-weight:800;line-height:1.02;letter-spacing:-0.03em;color:var(--hx-white);margin-bottom:1.2rem;}
.hx-h1 em{font-style:normal;color:var(--hx-salmon);}
.hx-sub{font-size:1.08rem;line-height:1.6;color:var(--hx-grey);max-width:34rem;margin-bottom:1.5rem;}
.hx-bullet{display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;color:var(--hx-charcoal);margin-bottom:1.75rem;}
.hx-bullet .hx-g{width:7px;height:7px;border-radius:50%;background:var(--hx-green);box-shadow:0 0 8px rgba(90,180,110,0.6);}
.hx-stats{display:flex;gap:1.6rem;flex-wrap:wrap;margin-bottom:1.75rem;}
.hx-stat{border-left:1px solid var(--hx-border);padding-left:0.9rem;}
.hx-num{font-size:1.7rem;font-weight:300;color:var(--hx-white);font-variant-numeric:tabular-nums;line-height:1;}
.hx-lbl{font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--hx-charcoal);margin-top:0.35rem;}
.hx-cta-row{display:flex;gap:0.75rem;flex-wrap:wrap;margin-bottom:1.6rem;}
.hx-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.7rem 1.4rem;border-radius:0.375rem;font-size:0.92rem;font-weight:600;cursor:pointer;transition:all 0.2s;border:1px solid transparent;text-decoration:none;}
.hx-btn-primary{background:var(--hx-salmon);color:var(--hx-dark);}
.hx-btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 20px rgba(252,120,105,0.28);}
.hx-btn-ghost{background:transparent;border-color:var(--hx-border2);color:var(--hx-grey);}
.hx-btn-ghost:hover{border-color:var(--hx-salmon-bdr);color:var(--hx-salmon);}
.hx-integrations{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;opacity:0.85;}
.hx-integrations img{height:19px;width:auto;}
.hx-int-custom{font-size:0.78rem;color:var(--hx-charcoal);}

/* ── ONE PANEL: researching → resolved ── */
.hx-viz{position:relative;display:flex;align-items:center;justify-content:center;min-height:360px;min-width:0;}
.hx-replay{position:absolute;top:-1.9rem;right:0;z-index:9;display:none;align-items:center;gap:0.3rem;background:transparent;border:1px solid var(--hx-border2);color:var(--hx-charcoal);font-family:inherit;font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;padding:0.3rem 0.6rem;border-radius:100px;cursor:pointer;transition:all 0.2s;}
.hx-replay:hover{color:var(--hx-salmon);border-color:var(--hx-salmon-bdr);}
.hx-viz.hx-done .hx-replay{display:inline-flex;}

.hx-panel{position:relative;width:452px;max-width:100%;background:var(--hx-surface);border:1px solid var(--hx-border2);border-radius:0.9rem;box-shadow:0 26px 64px rgba(0,0,0,0.5);overflow:hidden;opacity:0;transform:translateY(14px) scale(0.98);transition:opacity 0.7s ease, transform 0.7s cubic-bezier(0.23,1,0.32,1), box-shadow 0.9s ease;}
.hx-viz.hx-in .hx-panel{opacity:1;transform:translateY(0) scale(1);}
.hx-viz.hx-resolved .hx-panel{box-shadow:0 26px 64px rgba(0,0,0,0.5), 0 0 60px rgba(252,120,105,0.13);}

.hx-phead{position:relative;padding:0.95rem 1.1rem;border-bottom:1px solid var(--hx-border);min-height:70px;}
.hx-hstate{position:absolute;left:1.1rem;right:1.1rem;top:0.95rem;display:flex;align-items:center;gap:0.7rem;transition:opacity 0.6s ease;}
.hx-hresearch{opacity:1;}
.hx-hidentity{opacity:0;}
.hx-viz.hx-resolved .hx-hresearch{opacity:0;}
.hx-viz.hx-resolved .hx-hidentity{opacity:1;}
.hx-spin{width:15px;height:15px;border:2px solid var(--hx-salmon-bdr);border-top-color:var(--hx-salmon);border-radius:50%;animation:hx-spin 0.8s linear infinite;flex-shrink:0;}
@keyframes hx-spin{to{transform:rotate(360deg);}}
.hx-ht{font-size:0.9rem;color:var(--hx-white);font-weight:500;}
.hx-hs{font-size:0.68rem;color:var(--hx-charcoal);margin-top:0.1rem;}
.hx-av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--hx-salmon),var(--hx-salmon-l));display:flex;align-items:center;justify-content:center;font-size:0.95rem;font-weight:700;color:var(--hx-dark);flex-shrink:0;}
.hx-rid{flex:1;min-width:0;}
.hx-rname{font-size:0.95rem;font-weight:600;color:var(--hx-white);}
.hx-rtitle{font-size:0.72rem;color:var(--hx-charcoal);margin-top:0.1rem;}
.hx-vbadge{display:inline-flex;align-items:center;gap:0.25rem;font-size:0.56rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--hx-green);background:rgba(90,180,110,0.1);border:1px solid rgba(90,180,110,0.25);padding:0.2rem 0.5rem;border-radius:100px;flex-shrink:0;}

.hx-pbody{position:relative;height:250px;}
.hx-bview{position:absolute;inset:0;padding:0.9rem 1.1rem;transition:opacity 0.6s ease;}
.hx-bresearch{opacity:1;}
.hx-bresolved{opacity:0;pointer-events:none;}
.hx-viz.hx-resolved .hx-bresearch{opacity:0;pointer-events:none;}
.hx-viz.hx-resolved .hx-bresolved{opacity:1;pointer-events:auto;}

.hx-srcrow{display:flex;flex-wrap:wrap;gap:0.35rem;margin-bottom:0.85rem;}
.hx-src{font-size:0.63rem;padding:0.26rem 0.55rem;border-radius:100px;background:var(--hx-dark);border:1px solid var(--hx-border);color:var(--hx-charcoal);opacity:0.4;transition:all 0.35s ease;display:inline-flex;align-items:center;gap:0.3rem;}
.hx-src .hx-sd{width:5px;height:5px;border-radius:50%;background:var(--hx-charcoal);transition:all 0.3s;}
.hx-src.hx-on{opacity:1;border-color:var(--hx-salmon-bdr);color:var(--hx-salmon);}
.hx-src.hx-on .hx-sd{background:var(--hx-salmon);box-shadow:0 0 7px rgba(252,120,105,0.7);}
.hx-src.hx-ok{opacity:1;border-color:rgba(90,180,110,0.35);color:var(--hx-green);}
.hx-src.hx-ok .hx-sd{background:var(--hx-green);box-shadow:none;}

.hx-reason{font-family:var(--hx-mono);font-size:0.72rem;line-height:1.7;}
.hx-rline{color:var(--hx-charcoal);opacity:0;transform:translateY(4px);transition:all 0.4s ease;display:flex;gap:0.4rem;}
.hx-rline.hx-show{opacity:1;transform:translateY(0);}
.hx-rline.hx-old{opacity:0.34;}
.hx-rk{color:var(--hx-salmon);}
.hx-rline .hx-ok{color:var(--hx-green);}

.hx-fields{display:grid;grid-template-columns:1fr 1fr;gap:0.72rem 1.1rem;}
.hx-f{opacity:0;transform:translateY(5px);transition:all 0.45s ease;}
.hx-viz.hx-resolved .hx-f{opacity:1;transform:translateY(0);}
.hx-f .hx-k{font-size:0.58rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--hx-charcoal);}
.hx-f .hx-v{font-size:0.85rem;color:var(--hx-white);margin-top:0.14rem;display:flex;align-items:center;gap:0.3rem;}
.hx-f .hx-v svg{color:var(--hx-green);flex-shrink:0;}
.hx-signal{grid-column:1/-1;border-top:1px solid var(--hx-border);padding-top:0.6rem;margin-top:0.1rem;}
.hx-signal .hx-v{color:var(--hx-salmon);font-size:0.82rem;}
.hx-signal .hx-v svg{color:var(--hx-salmon);}

.hx-pfoot{display:flex;align-items:center;justify-content:space-between;padding:0.7rem 1.1rem;border-top:1px solid var(--hx-border);background:var(--hx-darker);font-family:var(--hx-mono);font-size:0.63rem;color:var(--hx-charcoal);}
.hx-fs-research{color:var(--hx-charcoal);}
.hx-fs-done{display:none;color:var(--hx-green);}
.hx-viz.hx-resolved .hx-fs-research{display:none;}
.hx-viz.hx-resolved .hx-fs-done{display:inline;}
.hx-score{color:var(--hx-charcoal);font-weight:600;transition:color 0.5s ease;}
.hx-viz.hx-resolved .hx-score{color:var(--hx-salmon);}

@media (prefers-reduced-motion:reduce){
  .hx-panel,.hx-hstate,.hx-bview,.hx-src,.hx-rline,.hx-f{transition:none!important;animation:none!important;}
}

/* ── Tablet / mobile ─────────────────────────────────────────────────────────
   Site breakpoints: 991 (nav collapses) · 767 · 479. Grid stacks at 991 above. */
@media (max-width:767px){
  .hx-hero{padding:5.5rem 0 3rem;} /* clear the 4rem fixed nav + breathing room */
  .hx-wrap{padding:0 var(--pad,1.25rem);}
  .hx-h1{font-size:clamp(2.4rem,11vw,3.2rem);}
  .hx-sub{font-size:1rem;max-width:100%;}
  .hx-bullet{font-size:0.82rem;align-items:flex-start;}
  .hx-bullet .hx-g{margin-top:0.45rem;flex-shrink:0;}
  /* 2×2 stat grid instead of an overflowing single row */
  .hx-stats{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 1rem;}
  .hx-stat{min-width:0;}
  .hx-num{font-size:1.5rem;}
  /* Panel fills the column; no fixed 452px blowing out the layout */
  .hx-viz{min-height:auto;}
  .hx-panel{width:100%;}
  .hx-pbody{height:270px;}
}

@media (max-width:479px){
  .hx-cta-row{gap:0.6rem;}
  .hx-cta-row .hx-btn{flex:1 1 100%;justify-content:center;}
  .hx-integrations{gap:0.9rem;}
  .hx-int-custom{flex-basis:100%;}
  .hx-fields{gap:0.7rem 0.8rem;}
}