/* VHC Demo page — phone mockups + hub walkthrough. Uses site :root tokens. */

.demo-intro{max-width:680px;}

/* Five-hub walkthrough grid */
.demo-hubs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:8px;}
.demo-hub{background:var(--panel);border:1px solid var(--line-soft);border-radius:16px;padding:22px;}
.demo-hub .num{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--gold);}
.demo-hub h3{font-family:var(--font-display);color:var(--gold);font-size:21px;font-weight:600;margin:8px 0 4px;}
.demo-hub .role{color:var(--muted);font-size:13.5px;line-height:1.5;margin:0 0 14px;}
.demo-hub .scrn{display:flex;flex-wrap:wrap;gap:6px;}
.demo-hub .scrn span{font-family:var(--font-mono);font-size:11px;color:var(--white);background:rgba(255,255,255,.04);border:1px solid var(--line-soft);border-radius:6px;padding:4px 9px;}
.demo-hub .scrn span.tier{color:var(--gold);border-color:var(--line);background:rgba(224,222,168,.06);}

/* Phone mockup */
.demo-stage{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:8px;}
.demo-phone{width:236px;background:#0a0a0a;border:1px solid var(--line);border-radius:32px;padding:12px;box-shadow:var(--glow);}
.dp-screen{background:#0c0d0f;border-radius:22px;padding:14px;display:flex;flex-direction:column;gap:9px;min-height:440px;}
.dp-mark{text-align:center;font-family:var(--font-mono);font-size:9px;letter-spacing:.22em;color:var(--gold);}
.dp-greet{font-family:var(--font-display);color:var(--gold);font-size:19px;font-weight:600;line-height:1.1;}
.dp-sub{color:var(--muted);font-size:11px;margin-top:-4px;}
.dp-card{background:#1a1a1a;border:1px solid var(--line-soft);border-radius:11px;padding:9px 11px;font-size:12px;color:var(--white);display:flex;align-items:center;justify-content:space-between;}
.dp-card .k{color:var(--muted);font-size:10px;}
.dp-tier{background:#20200f;border:1px solid var(--line);}
.dp-tier .t{color:var(--gold);font-weight:500;}
.dp-macros{display:flex;justify-content:space-between;}
.dp-macros div{text-align:center;}
.dp-macros .v{color:var(--gold);font-weight:500;font-size:12px;}
.dp-macros .l{color:var(--muted);font-size:9px;}
.dp-tabs{display:flex;justify-content:space-around;align-items:center;border-top:1px solid var(--line-soft);padding-top:11px;margin-top:auto;}
.dp-tabs i{width:7px;height:7px;border-radius:50%;background:rgba(245,244,239,.3);display:block;}
.dp-tabs i.on{background:var(--gold);}
.dp-tabs .add{width:18px;height:18px;border-radius:5px;background:var(--gold);}
.dp-cap{text-align:center;color:var(--muted);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;margin-top:12px;}

/* Rotating five-hub orbit (mirrors the ConnorRichFit / clients orbit) */
.demo-orbit-stage{position:relative;height:640px;perspective:1700px;perspective-origin:50% 45%;margin-top:18px;}
.demo-orbit{position:absolute;top:50%;left:50%;width:224px;height:380px;margin:-190px 0 0 -112px;transform-style:preserve-3d;animation:orbit-spin 36s linear infinite;}
.demo-orbit.paused,.demo-orbit:hover{animation-play-state:paused;}
.demo-orbit-card{position:absolute;inset:0;transform:rotateY(var(--a)) translateZ(300px);background:#0b0c0e;border:1px solid var(--line);border-radius:30px;padding:12px;backface-visibility:hidden;box-shadow:var(--glow);}
.op-screen{background:#0c0d0f;border-radius:20px;padding:13px;display:flex;flex-direction:column;gap:7px;height:100%;box-sizing:border-box;}
.op-mark{text-align:center;font-family:var(--font-mono);font-size:8px;letter-spacing:.2em;color:var(--gold);}
.op-h{font-family:var(--font-display);color:var(--gold);font-size:18px;font-weight:600;line-height:1.05;margin-top:2px;}
.op-sub{color:var(--muted);font-size:9.5px;}
.op-card{background:#1a1a1a;border:1px solid var(--line-soft);border-radius:10px;padding:7px 9px;font-size:10.5px;color:var(--white);display:flex;justify-content:space-between;align-items:center;}
.op-card .k{color:var(--muted);font-size:8.5px;}
.op-tier{background:#20200f;border-color:rgba(224,222,168,.4);}
.op-tier .t{color:var(--gold);font-weight:500;}
.op-tabs{display:flex;justify-content:space-around;align-items:center;border-top:1px solid var(--line-soft);padding-top:9px;margin-top:auto;}
.op-tabs i{width:5px;height:5px;border-radius:50%;background:rgba(245,244,239,.3);display:block;}
.op-tabs i.on{background:var(--gold);box-shadow:0 0 6px rgba(224,222,168,.7);}
.op-tabs .add{width:14px;height:14px;border-radius:4px;background:var(--gold);}
.op-tabs .add.on{box-shadow:0 0 9px rgba(224,222,168,.9);}
.demo-orbit-core{position:absolute;top:50%;left:50%;width:14px;height:14px;transform:translate(-50%,-50%);border-radius:50%;background:var(--gold);box-shadow:var(--glow);}
.demo-orbit-hint{text-align:center;color:var(--muted);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;margin-top:6px;}
@media (max-width:560px){
  .demo-orbit-stage{height:540px;perspective:1100px;}
  .demo-orbit{width:200px;height:340px;margin:-170px 0 0 -100px;}
  .demo-orbit-card{transform:rotateY(var(--a)) translateZ(250px);}
}
@media (prefers-reduced-motion: reduce){ .demo-orbit{animation:none;} }

/* Tier comparison helpers */
.tier .feat-new{color:var(--gold);}
.tier .market{color:var(--muted);font-size:12px;font-family:var(--font-mono);letter-spacing:.06em;}