/* =========================================================
   Home — hero visual ("transformation" dashboard cards)
   Extracted from the original inline <style> on index.html.
   ========================================================= */

.hv-halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.hv-halo-cyan  { width: 60%; height: 60%; left: -8%; top: 8%;
  background: radial-gradient(circle, rgba(63,186,201,.45), transparent 70%); }
.hv-halo-amber { width: 50%; height: 50%; right: -6%; bottom: 4%;
  background: radial-gradient(circle, rgba(245,166,35,.40), transparent 70%); }

.hv-card {
  position: absolute;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 24px 60px -16px rgba(15,42,63,.18),
    0 8px 22px -10px rgba(15,42,63,.10);
  overflow: hidden;
}
.hv-card-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.hv-card-bar .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--line-strong);
}
.hv-card-bar .dot-r { background: #F47168; }
.hv-card-bar .dot-y { background: #F5C843; }
.hv-card-bar .dot-g { background: #5BC990; }
.hv-card-title {
  margin-left: 10px;
  font-size: .68rem;
  color: var(--ink-soft);
  letter-spacing: .04em;
  text-transform: lowercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.hv-card-body { padding: 22px; }

.hv-card-back {
  width: 60%;
  top: 6%;
  left: -2%;
  z-index: 1;
  transform: rotate(-5deg);
  opacity: .92;
}
.hv-card-back .hv-card-body { padding: 14px 16px 18px; }
.hv-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 6px; margin-bottom: 8px;
}
.hv-row span {
  height: 8px; border-radius: 3px;
  background: var(--line);
}
.hv-row:nth-child(odd) span:nth-child(1) { background: color-mix(in srgb, var(--amber) 35%, var(--line)); }
.hv-row:nth-child(2) span:nth-child(3)   { background: color-mix(in srgb, #F47168 50%, var(--line)); }
.hv-row:nth-child(3) span:nth-child(2)   { background: color-mix(in srgb, var(--amber) 50%, var(--line)); }
.hv-row:nth-child(4) span:nth-child(1)   { background: color-mix(in srgb, #F47168 40%, var(--line)); }
.hv-row:nth-child(5) span:nth-child(2)   { background: color-mix(in srgb, var(--amber) 30%, var(--line)); }

.hv-card-front {
  width: 86%;
  right: 0;
  bottom: 4%;
  z-index: 2;
  animation: hvFloat 8s ease-in-out infinite;
}
@keyframes hvFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.hv-kpi {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
}
.hv-kpi-main { display: flex; flex-direction: column; gap: 4px; }
.hv-kpi-label {
  font-size: .65rem;
  color: var(--ink-soft);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hv-kpi-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--marine);
  line-height: 1;
}
.hv-kpi-value small {
  font-size: .55em;
  font-weight: 700;
  color: var(--amber-deep);
  margin-left: 2px;
}
.hv-kpi-delta {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--cyan-deep);
  font-weight: 600;
  letter-spacing: .02em;
}
.hv-spark {
  width: 130px; height: 50px;
  flex-shrink: 0;
}
.hv-spark-dot { animation: hvDotPulse 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes hvDotPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.6); }
}

.hv-divider {
  height: 1px;
  background: var(--line);
  margin: 20px 0 16px;
}

.hv-phase-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.hv-phase-head .mono {
  font-size: .65rem;
  color: var(--ink-soft);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hv-phase-pct {
  color: var(--marine) !important;
  font-weight: 600;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: .8rem !important;
}
.hv-phase-track {
  position: relative;
  height: 6px;
  background: var(--bg-alt);
  border-radius: 999px;
  overflow: hidden;
}
.hv-phase-fill {
  position: absolute; inset: 0;
  width: 75%;
  background: linear-gradient(90deg, var(--cyan), var(--amber));
  border-radius: 999px;
}
.hv-phase-stops {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 10px;
}
.hv-stop {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .04em;
  color: var(--ink-faint);
  position: relative;
  padding-left: 12px;
}
.hv-stop::before {
  content: "";
  position: absolute; left: 0; top: 5px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line-strong);
}
.hv-stop.done { color: var(--ink-muted); }
.hv-stop.done::before { background: var(--cyan); }
.hv-stop.current {
  color: var(--amber-deep);
  font-weight: 600;
}
.hv-stop.current::before {
  background: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 25%, transparent);
}

.hv-mini {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 18px;
}
.hv-mini-pill {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  background: var(--bg-alt);
  border-radius: 10px;
}
.hv-mini-pill .mono {
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hv-mini-pill strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--marine);
  letter-spacing: -0.01em;
}
.hv-mini-pill strong small {
  font-size: .65em;
  color: var(--ink-soft);
  font-weight: 500;
}

.hv-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink);
  box-shadow: var(--shadow);
  animation: chipFloat 6s ease-in-out infinite;
  z-index: 3;
  white-space: nowrap;
}
.hv-chip .mono {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.005em;
  font-size: .85rem;
}
.hv-chip-1 { top: -3%; right: 6%;  animation-delay: 0s;   color: var(--cyan-deep);  border-color: var(--cyan); }
.hv-chip-2 { top: 42%; right: -7%; animation-delay: 1.5s; color: var(--amber-deep); border-color: var(--amber); }
.hv-chip-3 { bottom: 2%;  left: 2%;  animation-delay: 3s;   color: var(--marine); border-color: var(--line-strong); }
.hv-chip-4 { top: 22%; left: -4%; animation-delay: 4.5s; color: var(--ink); border-color: var(--line-strong); }
@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (max-width: 920px) {
  .hv-chip-1 { right: 2%; }
  .hv-chip-2 { right: 2%; }
  .hv-chip-3 { left: 2%; }
  .hv-chip-4 { left: 2%; }
  .hv-card-back { width: 64%; }
  .hv-card-front { width: 84%; }
}
@media (max-width: 640px) {
  .hero-visual { aspect-ratio: 4 / 3; }
  .hv-card-back { width: 58%; top: 4%; }
  .hv-card-body { padding: 16px; }
}

/* Dark mode — keep dashboard cards white, restyle chips */
[data-theme="dark"] .hv-card {
  background: #FAFBFC;
  border-color: rgba(15,42,63,.12);
  color: #0F2A3F;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 24px 60px -16px rgba(0,0,0,.55),
    0 8px 22px -10px rgba(0,0,0,.4);
}
[data-theme="dark"] .hv-card-bar {
  background: #EEF2F6;
  border-bottom-color: rgba(15,42,63,.10);
}
[data-theme="dark"] .hv-card-bar .dot { background: rgba(15,42,63,.18); }
[data-theme="dark"] .hv-card-title { color: #7E8A99; }
[data-theme="dark"] .hv-kpi-value { color: #0F2A3F; }
[data-theme="dark"] .hv-kpi-value small { color: #C68314; }
[data-theme="dark"] .hv-kpi-delta { color: #2A8590; }
[data-theme="dark"] .hv-kpi-label,
[data-theme="dark"] .hv-phase-head .mono { color: #7E8A99; }
[data-theme="dark"] .hv-phase-pct { color: #0F2A3F !important; }
[data-theme="dark"] .hv-phase-track { background: #EEF2F6; }
[data-theme="dark"] .hv-divider { background: rgba(15,42,63,.10); }
[data-theme="dark"] .hv-stop { color: #A5B0BD; }
[data-theme="dark"] .hv-stop.done { color: #4A5A6B; }
[data-theme="dark"] .hv-stop::before { background: rgba(15,42,63,.18); }
[data-theme="dark"] .hv-stop.done::before { background: #3FBAC9; }
[data-theme="dark"] .hv-stop.current { color: #C68314; }
[data-theme="dark"] .hv-stop.current::before {
  background: #F5A623;
  box-shadow: 0 0 0 3px rgba(245,166,35,.25);
}
[data-theme="dark"] .hv-mini-pill { background: #EEF2F6; }
[data-theme="dark"] .hv-mini-pill .mono { color: #7E8A99; }
[data-theme="dark"] .hv-mini-pill strong { color: #0F2A3F; }
[data-theme="dark"] .hv-mini-pill strong small { color: #7E8A99; }
[data-theme="dark"] .hv-row span { background: rgba(15,42,63,.12); }

[data-theme="dark"] .hv-chip {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.5);
}
[data-theme="dark"] .hv-chip-1 {
  background: rgba(63,186,201,.18);
  border-color: rgba(63,186,201,.55);
  color: #A6DDE3;
}
[data-theme="dark"] .hv-chip-2 {
  background: rgba(245,166,35,.18);
  border-color: rgba(245,166,35,.55);
  color: #FFD584;
}
[data-theme="dark"] .hv-chip-3,
[data-theme="dark"] .hv-chip-4 {
  background: rgba(232,238,245,.08);
  border-color: rgba(232,238,245,.25);
  color: #E8EEF5;
}

.team-intro { grid-template-columns: 1fr 2fr; }
@media (max-width: 720px) { .team-intro { grid-template-columns: 1fr !important; } }