/* ════════════ HERO — TEACHER PHOTO (pre-composed) ════════════ */
.hero-visual { position: relative; align-self: start; }
.scene { position: relative; width: 100%; transform: translate(6%, -7%); }

/* floating decorative accents */
.deco { position: absolute; z-index: 2; border-radius: 50%; }
.deco.d-dot1 { width: 18px; height: 18px; left: 2%; top: 18%; background: var(--kg-yellow); box-shadow: 0 4px 10px rgba(245,159,0,.35); }
.deco.d-dot2 { width: 11px; height: 11px; right: 6%; top: 8%; background: #FF8A3D; }
.deco.d-dot3 { width: 14px; height: 14px; left: 6%; bottom: 18%; background: #51CF66; box-shadow: 0 3px 8px rgba(64,196,99,.3); }
.deco.d-ring { width: 26px; height: 26px; right: 1%; bottom: 30%; background: none; border: 4px solid #9775FA; opacity: .55; }

.hero-photo {
  position: relative; z-index: 1;
  width: 100%; height: auto; display: block;
}

/* ── FLOATING CHIPS ── */
.vchip {
  position: absolute; z-index: 3; background: #fff; border-radius: 18px;
  padding: 15px 22px; box-shadow: 0 18px 34px -12px rgba(31,29,20,.32), 0 3px 8px rgba(31,29,20,.08);
}
.vchip b { display: block; font-size: 19px; font-weight: 800; color: var(--kg-label-strong); letter-spacing: -.02em; white-space: nowrap; }
.vchip small { display: block; font-size: 14px; font-weight: 600; color: var(--kg-label-alternative); margin-top: 3px; white-space: nowrap; }
.vchip.v-time { right: -4%; top: 6%; left: auto; padding: 14px 18px; }
.vchip.v-rate { left: 2%; top: 22%; right: auto; }
.vchip.v-rate b { color: var(--amber); }
.vchip.v-cert { left: -3%; bottom: 14%; }
.vchip.v-cert b { color: var(--kg-status-positive); }

/* multi-timezone chip */
.vt-head { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--kg-label-neutral); margin-bottom: 10px; white-space: nowrap; }
.vt-live { width: 8px; height: 8px; border-radius: 50%; background: var(--kg-status-negative); box-shadow: 0 0 0 3px rgba(250,82,82,.18); flex: none; }
@media (prefers-reduced-motion: no-preference) { .vt-live { animation: vtPulse 1.6s ease-in-out infinite; } }
@keyframes vtPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.vt-rows { display: flex; flex-direction: column; gap: 7px; }
.vt-rows span { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; white-space: nowrap; }
.vt-rows i { font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--kg-label-alternative); }
.vt-rows b { font-size: 16px; font-weight: 800; color: var(--kg-label-strong); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .scene { transform: none; }
  .vchip.v-time { right: -2%; top: 4%; left: auto; transform: scale(.77); transform-origin: top right; }
  .vchip.v-rate { left: -2%; top: 46%; right: auto; }
  .vchip.v-cert { left: 0; bottom: 10%; }
  .vchip { padding: 12px 17px; border-radius: 15px; }
  .vchip b { font-size: 16px; }
  .vchip small { font-size: 12.5px; }
}