/* City marquee: giant type, solid and outlined, two rows in opposite directions */
.mq-band{background:var(--bg);overflow:hidden;padding-block:8px 96px}
.mq-band .wrap{padding-block:0 32px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee+.marquee{margin-top:6px}
.mq-track{display:flex;width:max-content;animation:mq 70s linear infinite}
.marquee.rev .mq-track{animation-direction:reverse;animation-duration:84s}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-item{display:flex;align-items:center;gap:18px;padding-right:44px;color:var(--fg);white-space:nowrap}
.mq-item:hover{text-decoration:none}
.mq-city{font-family:var(--display);font-size:clamp(56px,9vw,128px);font-weight:800;letter-spacing:-.055em;line-height:1.05;transition:color .25s}
.mq-item.o .mq-city{color:transparent;-webkit-text-stroke:1.6px var(--fg)}
.mq-item:hover .mq-city{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
.mq-meta{display:flex;flex-direction:column;gap:2px;font-size:11px;line-height:1.3;color:var(--fg-2)}
.mq-meta b{color:var(--fg);font-weight:600}
.mq-sep{width:14px;height:14px;border-radius:50%;background:var(--fg);flex:none;margin-left:26px}

/* Word-by-word statement */
.say{font-family:var(--display);font-size:clamp(36px,5.8vw,80px);font-weight:800;letter-spacing:-.048em;line-height:1.06;text-wrap:pretty;max-width:18ch}
.say.js .w{color:var(--fg-3);transition:color .35s}
.say.js .w.on{color:var(--fg)}
.say.js .w.hl.on{color:var(--accent)}
.say-foot{margin-top:40px;display:flex;flex-wrap:wrap;gap:10px}
.say-foot .chip-t{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:980px;padding:8px 14px;font-size:12px;color:var(--fg-2)}
.say-foot .chip-t i{width:7px;height:7px;border-radius:50%;background:var(--ok)}

/* Camera-to-cloud pipeline: 5 cities -> 1 cloud edit -> many outputs */
.pipe{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr);gap:40px 96px;align-items:center;margin-top:72px}
.pipe-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pipe-lines path{fill:none;stroke:var(--line);stroke-width:1.5;stroke-linejoin:round}
.pipe-lines circle{fill:var(--rec)}
.pipe-lines circle.g{fill:var(--ok)}
.pipe-col{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
.node{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center;background:var(--bg);border-radius:16px;padding:14px 16px;box-shadow:0 0 0 1px var(--line-soft),0 10px 30px -22px rgba(0,0,0,.35)}
.node .ic{grid-row:span 2;width:36px;height:36px;border-radius:10px;background:var(--bg-alt);display:grid;place-items:center;color:var(--fg)}
.node .ic .svg{width:18px;height:18px}
.node b{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.02em;min-width:0}
.node .mono{font-size:11px;color:var(--fg-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node.src .ic{background:var(--fg);color:var(--bg)}
.node.src .ic .dot{width:8px;height:8px;box-shadow:none}
.node.out .ic{background:var(--accent-tint);color:var(--accent-ink)}
.hub{position:relative;z-index:1;background:var(--bg);border-radius:32px;padding:40px 30px 34px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 0 0 1px var(--line-soft),0 40px 80px -40px rgba(0,0,0,.35)}
.hub-orb{position:relative;width:120px;height:120px;display:grid;place-items:center;margin-bottom:8px}
.hub-orb::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px dashed var(--line);animation:spin 18s linear infinite}
.hub-orb::after{content:"";position:absolute;inset:14px;border-radius:50%;background:conic-gradient(from 0deg,var(--accent) 0 22%,transparent 22% 100%);-webkit-mask:radial-gradient(circle,transparent 58%,#000 59%);mask:radial-gradient(circle,transparent 58%,#000 59%);animation:spin 2.8s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.hub-orb .core{width:64px;height:64px;border-radius:50%;background:var(--fg);color:var(--bg);display:grid;place-items:center}
.hub-orb .core .svg{width:28px;height:28px}
.hub .k{font-size:11px;letter-spacing:.08em;color:var(--fg-2)}
.hub h3{font-size:clamp(26px,2.6vw,34px);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.hub .tb{font-size:13px;color:var(--ok-ink)}
.hub ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.hub li{font-size:12px;border:1px solid var(--line);border-radius:980px;padding:5px 11px;color:var(--fg-2)}
@media (max-width:900px){
  .pipe{grid-template-columns:minmax(0,1fr);gap:20px}
  .pipe-lines{display:none}
  .pipe-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pipe-col .node:last-child:nth-child(odd){grid-column:span 2}
  .hub::before,.hub::after{content:"";position:absolute;left:50%;width:2px;height:20px;background:repeating-linear-gradient(180deg,var(--accent) 0 4px,transparent 4px 8px)}
  .hub::before{top:-20px}.hub::after{bottom:-20px}
}
@media (max-width:480px){.pipe-col{grid-template-columns:minmax(0,1fr)}.pipe-col .node:last-child:nth-child(odd){grid-column:auto}}

/* Cards take the opposite tone of the band they sit on */
.band:not(.alt) .city{background:var(--bg-alt)}
.alt .case{background:var(--bg)}
.band:not(.alt) .tier{background:var(--bg-alt)}
.alt .form{background:var(--bg)}
.foot{border-top:1px solid var(--line-soft)}
.mq-group{display:flex;flex:none}

/* Dark sections: cinema black with a faint blue glow from above */
.band.stage{background:radial-gradient(1100px 520px at 50% -8%,rgba(41,151,255,.14),transparent 70%),var(--stage)}
.stage .eyebrow.blue{color:#2997ff}
.stage .stat{border-top-color:var(--stage-fg)}
.stage .stat .k,.stage .stat p{color:var(--stage-mute)}
.stage .lv-window{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 60px 140px -40px rgba(41,151,255,.35)}
.stage .lv-path{color:var(--stage-mute)}
.stage .lv-node{background:var(--stage-2);box-shadow:0 0 0 1px var(--stage-line)}
.stage .lv-node b{color:var(--stage-fg)}
.stage .lv-wire{background:repeating-linear-gradient(90deg,var(--stage-line) 0 6px,transparent 6px 10px)}
.stage .tile{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.stage .tile:hover{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 50px 90px -45px rgba(41,151,255,.4)}

/* Logo: option 08 "Many cities, one desk". The REC dot bursts into cities, they connect, then merge back. 10s loop. */
#logomark *{transform-box:fill-box;transform-origin:center}
.lm-city{fill:#ff3b30;opacity:0;animation:lmCity 10s infinite cubic-bezier(.6,0,.3,1) backwards;animation-delay:calc(var(--i) * 70ms - 2.6s)}
@keyframes lmCity{0%,40%{translate:var(--tx) var(--ty);scale:0;opacity:0}45%{opacity:1;scale:1.3}54%{translate:0 0;scale:1;opacity:1}66%{translate:0 0;opacity:1}76%,100%{translate:var(--tx) var(--ty);scale:.6;opacity:0}}
.lm-ln{stroke:currentColor;stroke-width:.4;stroke-dasharray:14 14;stroke-dashoffset:14;opacity:0;animation:lmLn 10s infinite ease-in-out;animation-delay:-2.6s}
@keyframes lmLn{0%,52%{stroke-dashoffset:14;opacity:.5}64%,70%{stroke-dashoffset:0;opacity:.5}78%,100%{stroke-dashoffset:0;opacity:0}}
.lm-dot{animation:lmDot 10s infinite cubic-bezier(.2,.8,.2,1);animation-delay:-2.6s}
@keyframes lmDot{0%,40%{scale:1}44%,74%{scale:0}79%{scale:1.3}83%,100%{scale:1}}

/* Clients: a thin line with names crossing, labelled "Trusted by" (plain text names; swap in logos when supplied) */
.clients{background:var(--bg);padding-bottom:80px}
.cl-wrap{display:flex;align-items:stretch;border-block:1px solid var(--line-soft)}
.cl-lab{flex:none;display:flex;align-items:center;margin:0;padding:0 28px 0 max(24px,env(safe-area-inset-left,0px));font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2);border-right:1px solid var(--line-soft);white-space:nowrap}
.cl-line{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cl-track{display:flex;width:max-content;padding-block:20px;animation:clMove 46s linear infinite}
.cl-line:hover .cl-track{animation-play-state:paused}
.cl-group{display:flex;flex:none;align-items:center}
.cl-item{padding-inline:34px;font-family:var(--display);font-size:clamp(20px,1.9vw,26px);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--fg);white-space:nowrap}
.cl-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--fg)}
@keyframes clMove{to{transform:translateX(-50%)}}
@media (max-width:640px){.cl-wrap{flex-direction:column}.cl-lab{padding:14px max(20px,env(safe-area-inset-left,0px)) 0;border-right:0}.cl-track{padding-block:14px}}