.hero .hero-grid { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center; gap:28px; }
.cargo-hero { margin:0; position:relative; min-width:0; }
.cargo-hero__top { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#c3d9e8; font:500 10px/1.5 var(--mono); letter-spacing:.13em; text-transform:uppercase; padding:0 12px; }
.cargo-hero__location { display:flex; align-items:center; gap:8px; }
.cargo-hero__location::before { content:''; width:6px; height:6px; border-radius:50%; background:#f5a623; }
.cargo-hero__viewport { position:relative; width:100%; aspect-ratio:1200/920; isolation:isolate; }
.cargo-hero__viewport::before { content:''; position:absolute; inset:15% 4%; z-index:-1; border-radius:50%; background:radial-gradient(ellipse,rgba(78,158,216,.16),transparent 68%); }
.cargo-hero__poster,.cargo-hero__canvas { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.cargo-hero__canvas { opacity:0; transition:opacity .3s; }
.cargo-hero.is-live .cargo-hero__canvas { opacity:1; }
.cargo-hero.is-live .cargo-hero__poster { visibility:hidden; }
.cargo-hero__stages { display:grid; grid-template-columns:repeat(3,1fr); margin:0 12px; border-top:1px solid rgba(255,255,255,.22); }
.cargo-hero__stage { position:relative; display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:10px 5px; border:0; background:none; color:#c3d9e8; cursor:pointer; font:500 11px/1.4 var(--body); }
.cargo-hero__stage span { color:#f5a623; font:500 10px/1 var(--mono); }
.cargo-hero__stage::before { content:''; position:absolute; top:-1px; left:0; right:0; height:2px; background:#f5a623; opacity:0; }
.cargo-hero__stage[aria-pressed="true"] { color:#fff; }
.cargo-hero__stage[aria-pressed="true"]::before { opacity:1; }
.cargo-hero__stage[data-playing="true"] { color:#fff; }
.cargo-hero__stage[data-playing="true"]::before { opacity:.75; }
.cargo-hero__stage::before { transition:opacity .5s; }
@media (prefers-reduced-motion: reduce) {
  .cargo-hero__stage::before { transition:none; }
}
.cargo-hero__caption { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:44px; padding:0 12px; color:#c3d9e8; font-size:11px; }
.cargo-hero__pause { flex:none; padding:8px; color:#d8e7f2; background:transparent; border:1px solid rgba(255,255,255,.25); border-radius:4px; font:500 10px var(--body); cursor:pointer; }
.cargo-hero__pause[hidden] { display:none; }
.cargo-record-example { margin-top:36px; border:1px solid var(--line); border-radius:5px; max-width:620px; }
.cargo-record-example summary { padding:16px 20px; color:var(--azure-800); cursor:pointer; font-weight:600; }
.cargo-record-example .record { border-top:1px solid var(--line); }
@media(max-width:900px) {
  .hero .hero-grid { grid-template-columns:1fr; gap:40px; }
  .cargo-hero { width:100%; max-width:600px; margin-inline:auto; }
}
@media(max-width:480px) {
  .cargo-hero__top { font-size:9px; padding:0; letter-spacing:.08em; }
  .cargo-hero__stages { margin:0; }
  .cargo-hero__stage { font-size:10px; gap:5px; }
  .cargo-hero__caption { padding:0; font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .cargo-hero__canvas { transition:none; } }