/* ================================================================
   Hydrodiv — Schéma interactif Epuractif
   ================================================================ */

:root {
  --hdd-deep:   #0a4750;
  --hdd-aqua:   #19c1b3;
  --hdd-sand:   #f5efe6;
  --hdd-paper:  #fafaf7;
  --hdd-ink:    #1a2125;
  --hdd-muted:  #5b6b6f;
  --hdd-line:   #e7e1d6;
  --hdd-gold:   #d6a23a;
  --hdd-shadow: 0 1px 2px rgba(10,71,80,.06), 0 12px 32px -16px rgba(10,71,80,.18);
  --hdd-shadow-lg: 0 6px 16px rgba(10,71,80,.10), 0 32px 64px -24px rgba(10,71,80,.28);
  --hdd-radius: 22px;
  --hdd-radius-sm: 14px;
  --hdd-trans: 360ms cubic-bezier(.2,.8,.2,1);
}

#content-wrapper:has(.hd-diag) { padding: 0 !important; }

.hd-diag {
  background: linear-gradient(180deg, var(--hdd-paper) 0%, var(--hdd-sand) 60%, var(--hdd-paper) 100%);
  color: var(--hdd-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0 24px 80px;
}

/* ============ HEADER ============ */
.hd-diag__header {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  padding: 32px 16px 16px;
}
.hd-diag__kicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #226caa;
}
.hd-diag__title {
  margin: 0;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #2c3e50;
}
.hd-diag__lead {
  margin: 12px auto 0;
  font-size: 15px;
  line-height: 1.5;
  color: #5a6975;
  max-width: 600px;
}

/* ============ GATE (initial choice — 2 big striking cards) ============ */
.hd-diag__gate {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
  max-width: 920px;
  margin: 16px auto 36px;
  padding: 0 16px;
}
.hd-diag__gate-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 32px 30px;
  background: #fff;
  border: 2px solid var(--hdd-line);
  border-radius: 18px;
  text-decoration: none !important;
  color: var(--hdd-ink);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 2px 6px rgba(10,71,80,.05), 0 18px 40px -22px rgba(10,71,80,.2);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s;
  overflow: hidden;
}
.hd-diag__gate-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(25,193,179,.10) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}
.hd-diag__gate-btn:hover {
  transform: translateY(-3px);
  border-color: var(--hdd-deep);
  box-shadow: 0 6px 14px rgba(10,71,80,.08), 0 28px 56px -22px rgba(10,71,80,.42);
  text-decoration: none;
  color: var(--hdd-ink);
}
.hd-diag__gate-btn:hover::before { opacity: 1; }

.hd-diag__gate-icon {
  flex-shrink: 0;
  width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--hdd-sand) 0%, #fff 100%);
  color: var(--hdd-deep);
  border-radius: 18px;
  border: 1.5px solid var(--hdd-line);
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.hd-diag__gate-btn:hover .hd-diag__gate-icon {
  background: var(--hdd-deep);
  color: #fff;
  border-color: var(--hdd-deep);
  transform: scale(1.05) rotate(-3deg);
}
.hd-diag__gate-icon svg { width: 44px; height: 44px; }

.hd-diag__gate-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hd-diag__gate-name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--hdd-deep);
  line-height: 1.2;
}
.hd-diag__gate-hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--hdd-muted);
}
.hd-diag__gate-arrow {
  flex-shrink: 0;
  font-size: 28px;
  font-weight: 600;
  color: var(--hdd-deep);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--hdd-sand);
  transition: background .25s, color .25s, transform .25s;
}
.hd-diag__gate-btn:hover .hd-diag__gate-arrow {
  background: var(--hdd-aqua);
  color: #fff;
  transform: translateX(4px);
}

@media (max-width: 575px) {
  .hd-diag__gate-btn { padding: 24px 22px; gap: 16px; }
  .hd-diag__gate-icon { width: 60px; height: 60px; }
  .hd-diag__gate-icon svg { width: 36px; height: 36px; }
  .hd-diag__gate-name { font-size: 17px; }
}

/* ============ TOGGLE (compact, after a config is selected) ============ */
.hd-diag__toggle {
  display: inline-flex;
  margin: 8px auto 28px;
  background: #fff;
  border: 1px solid var(--hdd-line);
  border-radius: 999px;
  padding: 6px;
  gap: 4px;
  box-shadow: var(--hdd-shadow);
}
.hd-diag__toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: transparent;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: var(--hdd-muted);
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -.005em;
  transition: background .25s, color .25s, box-shadow .25s, transform .25s;
}
.hd-diag__toggle-btn:hover {
  color: var(--hdd-deep);
  background: var(--hdd-sand);
  text-decoration: none;
}
.hd-diag__toggle-btn.is-active {
  background: var(--hdd-deep);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(10,71,80,.55);
}
.hd-diag__toggle-btn.is-active:hover {
  color: #fff;
  background: #093a42;
  transform: translateY(-1px);
}
.hd-diag__toggle-btn svg {
  flex-shrink: 0;
  width: 22px; height: 22px;
}

@media (max-width: 720px) {
  .hd-diag__toggle { width: calc(100% - 24px); padding: 5px; }
  .hd-diag__toggle-btn { flex: 1; justify-content: center; padding: 12px 14px; font-size: 14px; }
}

.hd-diag__tour-cta {
  text-align: center;
  margin-top: 14px;
  padding: 12px 0;
}

/* keep toggle centered when inside .hd-diag */
.hd-diag {
  text-align: center;
}
.hd-diag__stage,
.hd-diag__consumables,
.hd-diag__header {
  text-align: left;
}
.hd-diag__header { text-align: center; }

/* ============ STAGE / SCENE ============ */
.hd-diag__stage {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: .5rem;
  background: #fbfaf6;
  box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 12px 28px -16px rgba(0,0,0,.1);
  overflow: hidden;
  border: 1px solid #e5e1d6;
}
.hd-diag__scene-wrap {
  position: relative;
  display: none !important;
  width: 100%;
  visibility: hidden;
}
.hd-diag__scene-wrap.is-active {
  display: block !important;
  visibility: visible;
}
.hd-diag__scene {
  display: block;
  width: 100%;
  height: auto;
}
.hd-diag__bg-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

/* ============ HOTSPOTS ============ */
.hd-diag__hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none; /* let buttons re-enable */
}
.hd-diag__hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
  transition: transform var(--hdd-trans);
}
.hd-diag__hotspot:hover { transform: translate(-50%, -50%) scale(1.08); z-index: 5; }

/* ============ CLUSTER (Subnautica-style) ============ */
/* hidden by default; only shows when a cluster is built */
.hd-diag__hotspot.is-clustered {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.6);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s;
}
.hd-diag__hotspot.is-clustered.is-fanned {
  opacity: 1;
  pointer-events: auto;
  /* fan-out target: the JS sets --fan-x / --fan-y on the element */
  left: var(--fan-x, var(--x));
  top:  var(--fan-y, var(--y));
  transform: translate(-50%, -50%) scale(1);
}

.hd-diag__cluster {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 4;
  transition: transform var(--hdd-trans), opacity var(--hdd-trans);
}
.hd-diag__cluster:hover { transform: translate(-50%, -50%) scale(1.06); }
.hd-diag__cluster.is-open {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.5);
}
.hd-diag__cluster-disc {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--hdd-deep, #0a4750);
  display: flex; align-items: center; justify-content: center;
  padding: 6px;
  box-shadow: 0 8px 22px -6px rgba(10,71,80,.45), inset 0 0 0 2px rgba(255,255,255,.95);
}
.hd-diag__cluster-pulse {
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--hdd-deep, #0a4750);
  opacity: .55;
  animation: hd-diag-pulse 2.4s ease-out infinite;
  pointer-events: none;
}

/* Thumbs grid inside the cluster disc */
.hd-diag__cluster-grid {
  width: 100%; height: 100%;
  display: flex; flex-wrap: wrap;
  gap: 3px;
  align-content: center; justify-content: center;
}
.hd-diag__cluster-thumb {
  width: calc(50% - 2px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--accent, #0a4750);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800;
  color: var(--accent, #0a4750);
}
.hd-diag__cluster-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 2px;
  background: #fff;
}
.hd-diag__cluster-thumb--more {
  background: var(--hdd-deep, #0a4750);
  color: #fff;
  border-color: var(--hdd-deep, #0a4750);
  font-size: 12px;
  letter-spacing: -.04em;
}

/* Total count badge in corner of the cluster */
.hd-diag__cluster-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--hdd-deep, #0a4750);
  color: #fff;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  pointer-events: none;
  z-index: 3;
}
.hd-diag__cluster-tip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--hdd-ink);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.4);
}
.hd-diag__cluster-tip::before {
  content: "";
  position: absolute;
  top: -4px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--hdd-ink);
}
.hd-diag__cluster:hover .hd-diag__cluster-tip {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.hd-diag__hotspot:focus-visible { outline: none; }
.hd-diag__hotspot:focus-visible .hd-diag__hotspot-disc {
  box-shadow: 0 0 0 4px rgba(25,193,179,.35), 0 12px 28px -8px rgba(10,71,80,.45);
}

.hd-diag__hotspot-disc {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent, #0a4750);
  overflow: hidden;
  box-shadow: 0 8px 22px -8px rgba(10,71,80,.4), inset 0 0 0 2px rgba(255,255,255,.9);
  display: block;
  z-index: 2;
  transition: border-color var(--hdd-trans), box-shadow var(--hdd-trans);
}
.hd-diag__hotspot-disc img {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 6px;
}
.hd-diag__hotspot:hover .hd-diag__hotspot-disc {
  border-color: var(--hdd-aqua);
  box-shadow: 0 16px 32px -8px rgba(10,71,80,.55), inset 0 0 0 2px rgba(255,255,255,.95);
}

/* the pulse ring */
.hd-diag__hotspot-pulse {
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--accent, #0a4750);
  opacity: .6;
  animation: hd-diag-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes hd-diag-pulse {
  0%   { transform: scale(.85); opacity: .8; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.hd-diag__hotspot:hover .hd-diag__hotspot-pulse,
.hd-diag__hotspot.is-active .hd-diag__hotspot-pulse {
  animation-duration: 1.6s;
  border-color: var(--hdd-aqua);
}

/* step number badge */
.hd-diag__hotspot-num {
  position: absolute;
  top: -4px; right: -4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #226caa;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  z-index: 3;
}

/* tooltip on hover */
.hd-diag__hotspot-tip {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--hdd-ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hdd-trans), transform var(--hdd-trans);
  z-index: 4;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.4);
  display: flex; flex-direction: column; gap: 2px;
}
.hd-diag__hotspot-tip::before {
  content: "";
  position: absolute;
  top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: var(--hdd-ink);
}
.hd-diag__hotspot-tip-title { font-weight: 700; }
.hd-diag__hotspot-tip-meta {
  font-size: 11px;
  color: var(--hdd-aqua);
  font-weight: 700;
  letter-spacing: .05em;
}
.hd-diag__hotspot:hover .hd-diag__hotspot-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============ CONSUMABLES STRIP ============ */
.hd-diag__consumables {
  max-width: 1280px;
  margin: 56px auto 0;
}
.hd-diag__cons-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hdd-muted);
  text-align: center;
  margin: 0 0 20px;
}
.hd-diag__cons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.hd-diag__cons-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--hdd-line);
  border-radius: var(--hdd-radius-sm);
  box-shadow: var(--hdd-shadow);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform var(--hdd-trans), box-shadow var(--hdd-trans), border-color var(--hdd-trans);
}
.hd-diag__cons-card:hover {
  transform: translateY(-3px);
  border-color: var(--hdd-deep);
  box-shadow: var(--hdd-shadow-lg);
}
.hd-diag__cons-img {
  flex-shrink: 0;
  width: 70px; height: 70px;
  background: var(--hdd-paper);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hdd-line);
}
.hd-diag__cons-img img { max-width: 80%; max-height: 80%; mix-blend-mode: multiply; }
.hd-diag__cons-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hd-diag__cons-name {
  font-weight: 700; font-size: 15px;
  color: var(--hdd-ink);
}
.hd-diag__cons-tagline {
  font-size: 13px;
  color: var(--hdd-muted);
  line-height: 1.4;
}
.hd-diag__cons-price {
  font-size: 16px; font-weight: 800;
  color: var(--hdd-deep);
  margin-top: 4px;
}
.hd-diag__cons-arrow {
  font-size: 20px;
  color: var(--hdd-muted);
  transition: transform var(--hdd-trans), color var(--hdd-trans);
}
.hd-diag__cons-card:hover .hd-diag__cons-arrow { transform: translateX(4px); color: var(--hdd-deep); }

/* ============ SIDE PANEL (Drawer) ============ */
.hd-diag__panel[hidden] { display: none; }
.hd-diag__panel {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; justify-content: flex-end;
  pointer-events: auto;
}
.hd-diag__panel-backdrop {
  position: absolute; inset: 0;
  background: rgba(10,33,37,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: hd-diag-fade-in 320ms ease-out;
}
@keyframes hd-diag-fade-in { from {opacity:0} to {opacity:1} }
.hd-diag__panel-card {
  position: relative;
  z-index: 1;
  width: min(520px, 96vw);
  max-width: 520px;
  height: 100%;
  background: #fff;
  box-shadow: -16px 0 48px -16px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
  animation: hd-diag-slide-in-right 380ms cubic-bezier(.2,.8,.2,1);
  overflow-y: auto;
}
@keyframes hd-diag-slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.hd-diag__panel-close {
  position: sticky; top: 14px;
  align-self: flex-end;
  margin: 14px 14px 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--hdd-line);
  background: #fff;
  font-size: 22px;
  color: var(--hdd-ink);
  cursor: pointer;
  z-index: 2;
  transition: background var(--hdd-trans);
}
.hd-diag__panel-close:hover { background: var(--hdd-sand); }

.hd-diag__panel-content { padding: 0 32px 32px; }

/* === panel inner blocks (rendered by JS) === */
.hd-diag-panel__step {
  display: inline-block;
  padding: 4px 12px;
  background: var(--hdd-sand);
  border: 1px solid var(--hdd-line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hdd-deep);
}
.hd-diag-panel__title {
  margin: 14px 0 6px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--hdd-ink);
}
.hd-diag-panel__tagline {
  margin: 0 0 18px;
  font-size: 16px;
  color: var(--hdd-muted);
  line-height: 1.5;
}
.hd-diag-panel__hero {
  background: linear-gradient(135deg, var(--hdd-sand) 0%, var(--hdd-paper) 100%);
  border-radius: 18px;
  padding: 28px;
  display: flex; align-items: center; justify-content: center;
  min-height: 220px;
  margin-bottom: 22px;
  border: 1px solid var(--hdd-line);
}
.hd-diag-panel__hero img { max-width: 100%; max-height: 220px; mix-blend-mode: multiply; }

/* Key points cards (2×2 grid extracted from product short description) */
.hd-diag-panel__keypoints {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 22px;
}
.hd-diag-panel__kp {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 14px 12px;
  background: linear-gradient(135deg, var(--hdd-paper) 0%, #fff 100%);
  border: 1px solid var(--hdd-line);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(10,71,80,.04);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.hd-diag-panel__kp:hover {
  transform: translateY(-2px);
  border-color: var(--hdd-deep);
  box-shadow: 0 6px 18px -8px rgba(10,71,80,.25);
}
.hd-diag-panel__kp-icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--hdd-aqua);
  color: #fff;
  margin-top: 2px;
  box-shadow: 0 2px 6px -2px rgba(25,193,179,.6);
}
.hd-diag-panel__kp-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hd-diag-panel__kp-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hdd-deep);
  line-height: 1.2;
}
.hd-diag-panel__kp-text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--hdd-ink);
}
@media (max-width: 720px) {
  .hd-diag-panel__keypoints { grid-template-columns: 1fr; }
}

.hd-diag-panel__advantages {
  list-style: none; padding: 0; margin: 0 0 26px;
  display: flex; flex-direction: column; gap: 12px;
}
.hd-diag-panel__advantages li {
  position: relative;
  padding: 14px 16px 14px 48px;
  background: #fff;
  border: 1px solid var(--hdd-line);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--hdd-ink);
}
.hd-diag-panel__advantages li::before {
  content: "✓";
  position: absolute;
  left: 14px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--hdd-aqua);
  color: #fff;
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

.hd-diag-panel__variants {
  display: flex; flex-direction: column; gap: 14px;
  margin: 0 0 22px;
  padding: 16px;
  background: #f7faf9;
  border: 1px solid var(--hdd-line);
  border-radius: 12px;
}
.hd-diag-panel__variant-group {
  display: flex; flex-direction: column; gap: 8px;
}
.hd-diag-panel__variant-label {
  font-size: 12px; font-weight: 700;
  color: var(--hdd-deep);
  text-transform: uppercase; letter-spacing: 0.6px;
}
.hd-diag-panel__variant-options {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.hd-diag-panel__variant-opt {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--hdd-line);
  background: #fff;
  font-size: 14px; font-weight: 600;
  color: var(--hdd-ink);
  cursor: pointer;
  transition: background var(--hdd-trans), border-color var(--hdd-trans), color var(--hdd-trans);
}
.hd-diag-panel__variant-opt:hover { border-color: var(--hdd-aqua); }
.hd-diag-panel__variant-opt.is-selected {
  background: var(--hdd-deep); border-color: var(--hdd-deep); color: #fff;
}

.hd-diag-panel__cta-row {
  display: flex; gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--hdd-line);
}
.hd-diag-panel__price {
  font-size: 28px;
  font-weight: 800;
  color: var(--hdd-deep);
  margin-right: auto;
}
.hd-diag-panel__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform var(--hdd-trans), background var(--hdd-trans);
  cursor: pointer;
}
.hd-diag-panel__btn--primary {
  background: var(--hdd-deep); color: #fff;
}
.hd-diag-panel__btn--primary:hover { background: #093a42; transform: translateY(-2px); color: #fff; }
.hd-diag-panel__btn--ghost {
  background: transparent;
  color: var(--hdd-deep);
  border-color: var(--hdd-line);
}
.hd-diag-panel__btn--ghost:hover { background: var(--hdd-sand); }

/* tour navigation in panel */
.hd-diag-panel__tour-nav {
  margin-top: 22px;
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  padding-top: 18px;
  border-top: 1px dashed var(--hdd-line);
}
.hd-diag-panel__tour-nav button {
  background: transparent;
  border: 1px solid var(--hdd-line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--hdd-deep);
  cursor: pointer;
  transition: background var(--hdd-trans);
}
.hd-diag-panel__tour-nav button:hover:not(:disabled) { background: var(--hdd-sand); }
.hd-diag-panel__tour-nav button:disabled { opacity: .35; cursor: not-allowed; }
.hd-diag-panel__tour-progress {
  font-size: 12px; color: var(--hdd-muted);
  letter-spacing: .04em;
}

/* ============ MOBILE ============ */
@media (max-width: 720px) {
  .hd-diag { padding: 0 12px 56px; }
  .hd-diag__header { padding: 36px 0 18px; }
  .hd-diag__hotspot {
    width: 52px; height: 52px;
  }
  .hd-diag__hotspot-num { width: 20px; height: 20px; font-size: 11px; top: -4px; right: -4px; }
  .hd-diag__hotspot-tip { display: none; } /* tooltip too crowded on mobile */

  /* Bottom-sheet on mobile */
  .hd-diag__panel-card {
    width: 100vw;
    height: 90vh;
    max-height: 90vh;
    margin-top: auto;
    border-radius: 24px 24px 0 0;
    animation: hd-diag-slide-up 380ms cubic-bezier(.2,.8,.2,1);
  }
  @keyframes hd-diag-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .hd-diag__panel { align-items: flex-end; justify-content: center; }
  .hd-diag__panel-content { padding: 0 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .hd-diag__hotspot-pulse { animation: none !important; }
  .hd-diag__panel-card, .hd-diag__panel-backdrop { animation: none !important; }
}