/* ============================================================
   Hero — animated fake dashboard + floating feature pop-ups
   ============================================================ */

.hero-viswrap { position: relative; max-width: 1060px; margin: 0 auto; }
.hero-viswrap .frame { max-width: none; }

/* ---------- dashboard ---------- */
.hd { display: grid; grid-template-columns: 218px 1fr; background: var(--sidebar); font-family: var(--font); color: var(--ink); text-align: left; }
.hd-side { background: var(--sidebar); border-right: 1px solid var(--line); padding: 18px 14px; display: flex; flex-direction: column; gap: 4px; }
.hd-logo { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; letter-spacing: -.3px; padding: 4px 8px 14px; }
.hd-logo .m { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(120deg, var(--accent-deep), var(--accent-bright)); color: #fff; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.hd-nav { display: flex; flex-direction: column; gap: 2px; }
.hd-nav a { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); padding: 8px 10px; border-radius: 9px; text-decoration: none; }
.hd-nav a svg { width: 15px; height: 15px; flex: 0 0 auto; }
.hd-nav a.on { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-card); border: 1px solid var(--line); }
.hd-nav .lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-3); padding: 12px 10px 5px; }
.hd-user { margin-top: auto; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 9px 11px; }
.hd-user .av { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.hd-user b { display: block; font-size: 12.5px; letter-spacing: -.1px; }
.hd-user span { display: block; font-size: 11px; color: var(--ink-3); font-weight: 500; }

.hd-main { padding: 26px 30px 30px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hd-greet h3, .hd-greet .hd-greet-h { margin: 0 0 6px; font-size: 25px; font-weight: 800; letter-spacing: -.6px; }
.hd-greet p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.hd-greet b { color: var(--ink); }

.hd-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); }
.hd-ready { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; padding: 20px 24px; }
.hd-ring { position: relative; width: 124px; height: 124px; margin: 0 auto; }
.hd-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hd-ring .track { stroke: var(--surface-sunk); }
.hd-ring .fill { stroke: url(#hd-grad); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: hd-ring 1.7s .7s cubic-bezier(.3,0,.2,1) forwards; }
@keyframes hd-ring { to { stroke-dashoffset: 36; } }
.hd-ring .num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hd-ring .num b { font-size: 25px; font-weight: 800; letter-spacing: -.5px; line-height: 1; }
.hd-ring .num span { font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; color: var(--ink-3); margin-top: 3px; }
.hd-rows { display: flex; flex-direction: column; }
.hd-rows .ttl { font-size: 15px; font-weight: 800; letter-spacing: -.2px; margin-bottom: 8px; }
.hd-row { display: grid; grid-template-columns: 122px 1fr 56px; align-items: center; gap: 14px; padding: 5.5px 0; }
.hd-row .nm { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.hd-row .st { font-size: 11.5px; font-weight: 700; color: var(--ink-3); text-align: right; }
.hd-row .st.done { color: oklch(0.46 0.13 152); }
.hd-bar { height: 7px; border-radius: 5px; background: var(--surface-sunk); overflow: hidden; }
.hd-bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright)); animation: hd-fill 1.1s cubic-bezier(.3,0,.2,1) forwards; }
@keyframes hd-fill { to { width: var(--w, 60%); } }

.hd-insight { background: linear-gradient(115deg, var(--accent-deep), oklch(0.38 0.13 300)); color: #fff; border: none; padding: 18px 22px; display: flex; gap: 14px; align-items: flex-start; }
.hd-insight .spark { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.hd-insight .tag { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; opacity: .8; margin-bottom: 5px; }
.hd-insight p { margin: 0; font-size: 13.5px; line-height: 1.55; opacity: .94; }
.hd-insight b { color: #fff; }

/* entrance animations (one-shot on load) */
.hd .rise { opacity: 0; transform: translateY(14px); animation: hd-rise .55s ease forwards; }
@keyframes hd-rise { to { opacity: 1; transform: translateY(0); } }

/* ---------- floating pop-ups ---------- */
.hpop {
  position: absolute; z-index: 3; display: flex; align-items: flex-start; gap: 11px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-float); padding: 13px 16px; max-width: 250px;
  font-family: var(--font); font-size: 13px; line-height: 1.45; color: var(--ink-2); text-align: left;
  opacity: 0; transform: translateY(12px) scale(.92);
}
.hpop b { color: var(--ink); }
.hpop .sub { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--accent-bright); margin-bottom: 3px; }
.hpop .m-dot { width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; background: linear-gradient(120deg, var(--accent-deep), var(--accent-bright)); color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.hpop .ok { width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto; background: oklch(0.62 0.15 152); color: #fff; display: flex; align-items: center; justify-content: center; }
.hpop .ok svg { width: 13px; height: 13px; }
.hpop .av { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; background: var(--accent-tint); color: var(--accent); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

.hpop.show { animation: hpop-in .65s cubic-bezier(.2,.9,.3,1.25) forwards, hpop-bob 6.5s ease-in-out infinite; }
@keyframes hpop-in { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hpop-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -9px; } }

.hp1 { top: 6%; left: -54px; animation-delay: 1.1s, 1.75s; }
.hp2 { top: 22%; right: -58px; animation-delay: 1.9s, 2.55s; max-width: 270px; }
.hp3 { bottom: 18%; left: -44px; animation-delay: 2.7s, 3.35s; }
.hp4 { bottom: 7%; right: -38px; animation-delay: 3.5s, 4.15s; }

@media (max-width: 1180px) {
  .hp1 { left: -10px; }
  .hp2 { right: -12px; }
  .hp3 { left: -8px; }
  .hp4 { right: -6px; }
}
@media (max-width: 880px) {
  .hd { grid-template-columns: 1fr; }
  .hd-side { display: none; }
  .hpop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hd .rise { animation-duration: .01s; animation-delay: 0s !important; }
  .hd-ring .fill, .hd-bar i { animation-duration: .01s; animation-delay: 0s !important; }
  .hpop.show { animation: hpop-in .01s forwards; }
}