/* =====================================================================
   PlaysOut homepage v5 (preview) — v3 infrastructure look + product-deck content
   ===================================================================== */
body.v5{--hl:#98A3FF;--live:#3ddc84;--card:rgba(255,255,255,.025);--hair-2:rgba(255,255,255,.14)}
/* second clause of each headline in the v3 hero gradient */
.v5 .hl{background:linear-gradient(90deg,#c9cdff,#98A3FF 40%,#495CF5);-webkit-background-clip:text;background-clip:text;color:transparent}
.v5 .v3-hero h1{max-width:18ch}
/* investors in colour: greyscale turns 4399 and similar logos into blank blocks */
.v5 .v3-inv .logo-chip img{filter:none;opacity:.85}
/* metrics stay as v3 hairline cells, quiet numbers */
.v5 .v3-metrics + .v3-metrics{border-top:none}

/* ---------- product-deck sections ---------- */
.v4-sub{margin:28px 0 12px}
.v5 .v3-metrics + .v4-sub{margin-top:28px}
.v5 .v3-metrics b{font-size:clamp(2rem,3.6vw,2.9rem)}
.v5 .v3-metrics span{text-transform:none;letter-spacing:0;font-family:var(--font);font-size:.92rem;color:var(--t2)}
.v5 .v3-metrics div:nth-child(even) b{color:var(--hl)}
.v4-note{margin-top:18px;font-size:.8rem;color:var(--t3)}

.v4-stack{display:flex;flex-direction:column;gap:12px}
.v4-layer{display:grid;grid-template-columns:44px 1fr auto;gap:22px;align-items:center;padding:20px 24px;border-radius:16px;
  background:var(--card);box-shadow:inset 3px 0 0 var(--hl),inset 0 0 0 1px var(--hair)}
.v4-layer.g{box-shadow:inset 3px 0 0 var(--live),inset 0 0 0 1px var(--hair)}
.v4-num{font-size:1.5rem;font-weight:800;color:var(--hl)}
.v4-layer.g .v4-num{color:var(--live)}
.v4-layer h3{font-size:1.15rem;letter-spacing:-.02em}
.v4-layer p{color:var(--t2);font-size:.95rem;margin-top:2px}
.v4-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.v4-tags i{font-style:normal;font-size:.78rem;font-weight:600;color:var(--hl);background:rgba(142,152,255,.12);padding:5px 12px;border-radius:999px}
.v4-layer.g .v4-tags i{color:var(--live);background:rgba(62,224,160,.12)}
.v4-eco{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:18px 24px;border-radius:16px;
  background:linear-gradient(90deg,rgba(61,62,253,.35),rgba(61,62,253,.12));box-shadow:inset 0 0 0 1px rgba(142,152,255,.35)}
.v4-eco b{color:#fff}.v4-eco span{color:var(--t2)}
.v4-ready{margin-top:18px;padding:22px 26px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--hair)}
.v4-ready-h{color:var(--t2);font-size:.95rem}
.v4-ready-h span{color:var(--live);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem;background:rgba(62,224,160,.12);padding:5px 12px;border-radius:999px;margin-right:10px}
.v4-ready ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 24px;margin-top:18px}
.v4-ready li{font-weight:600;color:#fff;padding-left:26px;position:relative}
.v4-ready li::before{content:"\2713";position:absolute;left:0;color:var(--live)}

.v4-cases{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.v4-case{padding:30px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--hair)}
.v4-case-top{margin-bottom:18px}
.v4-live{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t2);padding:5px 12px 5px 5px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--hair-2)}
.v4-live img{width:22px;height:22px;border-radius:6px}
.v4-case h3{font-size:1.7rem}
.v4-case-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0 18px}
.v4-case-stats b{display:block;font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:800;letter-spacing:-.03em;color:var(--live)}
.v4-case-stats div:nth-child(n+2) b{color:var(--hl)}
.v4-case-stats span{font-size:.85rem;color:var(--t2)}
.v4-case > p{color:var(--t3);font-size:.9rem}

.v4-loop{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.v4-step{padding:26px 24px;border-radius:16px;background:var(--card);box-shadow:inset 0 3px 0 var(--hl),inset 0 0 0 1px var(--hair)}
.v4-step:nth-child(2){box-shadow:inset 0 3px 0 var(--live),inset 0 0 0 1px var(--hair)}
.v4-step span{font-family:var(--mono);font-size:.78rem;color:var(--hl)}
.v4-step h3{font-size:1.1rem;margin:12px 0 8px;letter-spacing:-.02em}
.v4-step p{color:var(--t2);font-size:.92rem}
.v4-engine{margin-top:16px;padding:24px 28px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--hair)}
.v4-engine .v3-mono{color:var(--hl)}
.v4-engine ul{list-style:none;margin-top:10px}
.v4-engine li{display:grid;grid-template-columns:240px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--hair)}
.v4-engine li:last-child{border-bottom:none}
.v4-engine b{color:#fff}.v4-engine span{color:var(--t2)}

@media(max-width:1024px){
  .v4-cases{grid-template-columns:1fr}
  .v4-loop{grid-template-columns:1fr 1fr}
  .v4-ready ul{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .v4-layer{grid-template-columns:32px 1fr}
  .v4-tags{grid-column:2;justify-content:flex-start}
  .v4-loop,.v4-ready ul,.v4-case-stats{grid-template-columns:1fr}
  .v4-engine li{grid-template-columns:1fr;gap:4px}
}

/* press rows: outlet logos instead of text */
.v5 .v4-src{display:flex;align-items:center;height:28px}
.v5 .v4-src img{height:22px;width:auto;max-width:150px;object-fit:contain;object-position:left center;opacity:.9}
.v5 .v4-wm{font-family:var(--font);font-weight:800;font-size:1.05rem;letter-spacing:-.02em;text-transform:none;color:#fff;opacity:.9}

/* app logos in the hero, under the subline (as on the deck cover) */
.v4-hero-apps{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:36px}
.v4-hero-apps .logo-chip,.v4-hero-apps .logo-chip img{height:40px}
.v4-hero-apps .logo-chip img{border-radius:10px;max-width:120px}
@media(max-width:760px){.v4-hero-apps .logo-chip,.v4-hero-apps .logo-chip img{height:34px}}
/* supply/distribution nodes: brighter subtext + hover glow */
.v3-node{transition:box-shadow .25s ease,transform .25s ease,background .25s ease}
.v3-node span{color:var(--t2,#A9AFC7)}
.v3-node:hover{transform:translateY(-2px);background:rgba(73,92,245,.08);box-shadow:inset 0 0 0 1px rgba(152,163,255,.45),0 8px 28px -10px rgba(73,92,245,.55)}
.v3-core-head img{width:auto;height:24px}
.v3-node .v3-node-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.v3-node-chip img{width:28px;height:28px}
.v3-node-more{width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;color:var(--t1);box-shadow:inset 0 0 0 1px var(--hair);background:rgba(255,255,255,.04)}
/* logos right under the CTAs, diagram pushed below */
.v5-apps-label{margin-top:56px}
.v5-apps-label + .v4-hero-apps{margin-top:18px}
.v4-hero-apps .logo-chip,.v4-hero-apps .logo-chip img{height:48px}
.v5 .v3-arch{margin-top:140px}
@media(max-width:760px){.v4-hero-apps .logo-chip,.v4-hero-apps .logo-chip img{height:36px}.v5 .v3-arch{margin-top:80px}}
/* traction: experience tiles in the black look */
.v5-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:0}
.v5 .v5-tiles .fcard{background:rgba(255,255,255,.025);border:1px solid var(--hair);min-height:230px;padding:28px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.v5 .v5-tiles .f-title{font-weight:600;font-size:1.02rem;color:var(--t1);margin-top:8px}
.v5 .v5-tiles .f-desc{font-size:.86rem;color:var(--t2);line-height:1.5}
@media(max-width:1000px){.v5-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.v5-tiles{grid-template-columns:1fr}.v5 .v5-tiles .fcard{min-height:0}}
/* how it works: list + isometric stack */
.v5-how{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.v5-how .v4-tags{display:none}
.v5-how .v4-layer{grid-template-columns:44px 1fr;cursor:default;transition:background .25s,box-shadow .25s}
.v5-how .v4-layer.on{background:rgba(73,92,245,.1);box-shadow:inset 3px 0 0 var(--hl),inset 0 0 0 1px rgba(152,163,255,.4)}
.v5-iso{width:100%;height:auto;display:block;overflow:visible}
.v5-iso-l{transition:opacity .3s ease,transform .3s ease}
.v5-iso.focus .v5-iso-l{opacity:.28}
.v5-iso.focus .v5-iso-l.on{opacity:1;transform:translateY(-6px)}
.v5-iso-name{font:600 15px/1 "Red Hat Display",system-ui,sans-serif;fill:#f4f4fa}
.v5-iso-sub{font:400 12px/1 "Red Hat Text",system-ui,sans-serif;fill:#a3a3b8}
.v5-iso-chip{animation:v5chip 2s ease-in-out infinite}
@keyframes v5chip{0%,100%{opacity:.35}50%{opacity:1}}
.v5-iso-core{animation:v5core 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes v5core{0%,100%{transform:scale(.85)}50%{transform:scale(1.15)}}
@media(max-width:900px){.v5-how{grid-template-columns:1fr;gap:32px}.v5-how-art{max-width:520px;margin:0 auto;width:100%}}
@media(prefers-reduced-motion:reduce){.v5-iso-chip,.v5-iso-core{animation:none}}
.v5-how{grid-template-columns:1fr 1fr;gap:64px}
.v5-how-left .v3-head{margin-bottom:36px}
.v5-how-art{display:flex;justify-content:center}
.v5-how-art .v5-iso{max-width:520px}
.v5-how-art{align-self:end;margin-bottom:-56px}
@media(max-width:900px){.v5-how-art{align-self:auto;margin-bottom:0}}
/* catalogue: games and dramas grouped */
.v5-cat{grid-template-columns:repeat(4,1fr)!important;gap:8px;padding:14px 16px 16px}
.v5-cat-h{grid-column:1/-1;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin:4px 0 0}
.v5-cat-h:not(:first-child){margin-top:10px;padding-top:12px;border-top:1px solid var(--hair)}
/* catalogue: diagonal slash, games left / dramas right */
.v5-slash-wrap{padding:14px 16px 18px}
.v5-slash-h{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin:2px 2px 12px}
.v5-slash-h span:last-child{color:#7fe8bd}
.v5-slash-h span:first-child{color:#b8bfff}
.v5-slash{--s:64px;--g:5px;position:relative;display:grid;grid-template-columns:calc(50% + var(--s)/2) calc(50% + var(--s)/2);margin:0}
.v5-side{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.v5-side-l{clip-path:polygon(0 0,calc(100% - var(--g)) 0,calc(100% - var(--s) - var(--g)) 100%,0 100%)}
.v5-side-r{margin-left:calc(var(--s) * -1);clip-path:polygon(calc(var(--s) + var(--g)) 0,100% 0,100% 100%,var(--g) 100%)}
.v5-side-l .v3-cat-tile:nth-child(3n){transform:none}
.v5-slash-line{position:absolute;top:-6px;bottom:-6px;left:calc(50% - var(--s)/2);width:var(--s);height:calc(100% + 12px);overflow:visible;filter:drop-shadow(0 0 6px rgba(152,163,255,.8));pointer-events:none}
.v5-side .v3-cat-tile{transition:transform .3s ease}
.v5-side .v3-cat-tile:hover{transform:scale(1.04)}
/* slash v2: one 6-col grid, both sides stacked and clipped */
.v5-slash{display:grid;grid-template-columns:1fr}
.v5-side{grid-area:1/1;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:0}
.v5-side-l .v3-cat-tile:nth-child(3n+1){grid-column:1}
.v5-side-r .v3-cat-tile:nth-child(3n+1){grid-column:4}
.v5-side-l{clip-path:polygon(0 0,calc(50% + var(--s)/2 - var(--g)) 0,calc(50% - var(--s)/2 - var(--g)) 100%,0 100%)}
.v5-side-r{margin-left:0;clip-path:polygon(calc(50% + var(--s)/2 + var(--g)) 0,100% 0,100% 100%,calc(50% - var(--s)/2 + var(--g)) 100%)}
/* compute: animated globe */
.v5-globe-wrap{position:relative;margin-top:8px;border-radius:20px;padding:24px 8px 16px;background:radial-gradient(60% 70% at 55% 45%,rgba(62,224,160,.07),transparent 70%),rgba(255,255,255,.015);box-shadow:inset 0 0 0 1px var(--hair)}
.v5-globe{width:100%;height:auto;display:block;overflow:visible}
.v5-hub-name{font:500 11px/1 var(--mono);fill:#c9cdff;letter-spacing:.04em}
.v5-hub{opacity:.35;animation:v5hub 4.2s ease-in-out infinite;animation-delay:var(--d)}
@keyframes v5hub{0%,100%{opacity:.4}25%,60%{opacity:1}}
.v5-hub-halo{transform-box:fill-box;transform-origin:center;animation:v5halo 2.2s ease-out infinite;animation-delay:var(--d)}
@keyframes v5halo{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}
.v5-hub-core{animation:v5chip 1.4s ease-in-out infinite}
.v5-globe-key{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;font:500 .74rem/1 var(--mono);color:var(--t3);letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
.v5-globe-key span{display:inline-flex;align-items:center;gap:8px}
.v5-globe-key i{display:inline-block;width:10px;height:10px;border-radius:2px}
.k-node{border:1.4px solid #3EE0A0;background:#0d1a1a}.k-flow{height:2px!important;width:18px!important;background:linear-gradient(90deg,#3EE0A0,#98A3FF)}.k-app{border-radius:3px!important;border:1px solid rgba(255,255,255,.3)}
@media(prefers-reduced-motion:reduce){.v5-hub,.v5-hub-halo{animation:none;opacity:1}}
/* audiences: illustrated cards */
.v5-aud{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.v5-aud-card{border-radius:20px;padding:20px 22px 24px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--hair);display:flex;flex-direction:column;gap:8px;transition:transform .3s,box-shadow .3s}
.v5-aud-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(152,163,255,.4),0 24px 60px -30px rgba(73,92,245,.6)}
.v5-aud-card h3{font-size:1.35rem;letter-spacing:-.02em}
.v5-aud-card ul{list-style:none;padding:0;margin:6px 0 10px;display:flex;flex-direction:column;gap:8px;color:var(--t2);font-size:.92rem}
.v5-aud-card li{padding-left:16px;position:relative}.v5-aud-card li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:2px;background:var(--hl)}
.v5-aud-card .v3-tlink{margin-top:auto}
.v5-aud-art{position:relative;height:190px;border-radius:14px;margin-bottom:12px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(80% 90% at 50% 100%,rgba(73,92,245,.22),transparent 70%),#0b0b16;box-shadow:inset 0 0 0 1px var(--hair)}
.v5-phone{width:118px;height:168px;margin-top:40px;border-radius:22px;padding:16px 12px;background:#12122a;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18);display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start}
.v5-phone span img{width:100%;aspect-ratio:1;border-radius:8px;display:block;object-fit:cover}
.v5-po{border-radius:8px;background:#495CF5;display:grid!important;place-items:center;box-shadow:0 0 0 2px rgba(152,163,255,.6),0 0 24px rgba(73,92,245,.9);animation:v5po 2.4s ease-in-out infinite}
.v5-po img{width:70%!important;aspect-ratio:auto!important;border-radius:0!important;object-fit:contain!important}
@keyframes v5po{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.v5-fan{position:relative;width:200px;height:140px}
.v5-fan img{position:absolute;left:50%;top:50%;width:96px;height:120px;object-fit:cover;border-radius:12px;box-shadow:0 14px 30px -10px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.1);transition:transform .45s ease}
.v5-fan img:nth-child(1){transform:translate(-50%,-50%) translateX(-58px) rotate(-12deg)}
.v5-fan img:nth-child(2){transform:translate(-50%,-50%) translateY(-6px);z-index:2}
.v5-fan img:nth-child(3){transform:translate(-50%,-50%) translateX(58px) rotate(12deg)}
.v5-aud-card:hover .v5-fan img:nth-child(1){transform:translate(-50%,-50%) translateX(-76px) rotate(-18deg)}
.v5-aud-card:hover .v5-fan img:nth-child(3){transform:translate(-50%,-50%) translateX(76px) rotate(18deg)}
.v5-chip-live{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font:600 .68rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#3EE0A0;background:rgba(62,224,160,.12);padding:6px 10px;border-radius:999px;z-index:3}
.v5-adcard{position:relative;width:150px;height:150px;border-radius:16px;overflow:hidden;box-shadow:0 14px 30px -10px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.12)}
.v5-adcard img{width:100%;height:100%;object-fit:cover;display:block}
.v5-ad-pill{position:absolute;top:8px;left:8px;font:600 .62rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:rgba(0,0,0,.6);color:#FFC24B;padding:5px 8px;border-radius:999px}
.v5-ad-bar{position:absolute;left:10px;right:10px;bottom:10px;height:4px;border-radius:4px;background:rgba(255,255,255,.25);overflow:hidden}
.v5-ad-bar i{display:block;height:100%;width:0;background:#FFC24B;animation:v5bar 3s linear infinite}
@keyframes v5bar{to{width:100%}}
.v5-coin{position:absolute;right:22%;top:26%;font:700 .8rem/1 var(--font,inherit);color:#1a1200;background:linear-gradient(180deg,#FFD877,#FFB020);padding:7px 10px;border-radius:999px;box-shadow:0 8px 20px -6px rgba(255,176,32,.7);animation:v5coin 3s ease-in-out infinite}
@keyframes v5coin{0%,70%{opacity:0;transform:translateY(16px) scale(.8)}80%,95%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-10px)}}
@media(max-width:900px){.v5-aud{grid-template-columns:1fr}.v5-hub-name{font-size:14px}}
/* press list: uniform text outlet names */
.v5-src{font:600 .95rem/1 "Red Hat Display",system-ui,sans-serif;color:var(--t1);letter-spacing:-.01em;white-space:nowrap}
/* backed by: equal boxes, no distortion, optical sizing */
.v5 .v3-inv{display:grid;grid-template-columns:repeat(8,1fr);gap:20px 28px;align-items:center;max-width:1180px;margin-left:auto;margin-right:auto}
.v5 .v3-inv .logo-chip{height:56px;display:flex;align-items:center;justify-content:center}
.v5 .v3-inv .logo-chip img{height:auto;width:auto;max-width:100%;max-height:34px;object-fit:contain}
.v5 .v3-inv img[src*="kbw"]{max-height:42px}
.v5 .v3-inv img[src*="tencent"]{max-height:56px}
.v5 .v3-inv img[src*="4399"]{max-height:38px}
.v5 .v3-inv img[src*="venturesouq"]{max-height:20px}
@media(max-width:900px){.v5 .v3-inv{grid-template-columns:repeat(4,1fr)}}
/* backed by v2: height-matched per logo shape so all read at the same weight */
.v5 .v3-inv{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px 32px;max-width:1200px}
.v5 .v3-inv .logo-chip{height:56px}
.v5 .v3-inv .logo-chip img{max-width:none;max-height:none}
.v5 .v3-inv img[src*="kbw"]{height:40px}
.v5 .v3-inv img[src*="pacific-century"]{height:19px}
.v5 .v3-inv img[src*="whampoa"]{height:19px}
.v5 .v3-inv img[src*="longling"]{height:32px}
.v5 .v3-inv img[src*="kenetic"]{height:28px}
.v5 .v3-inv img[src*="venturesouq"]{height:19px}
.v5 .v3-inv img[src*="tencent"]{height:52px}
.v5 .v3-inv img[src*="4399"]{height:36px}
@media(max-width:900px){.v5 .v3-inv{justify-content:center}}
/* backed by v3: one row */
.v5 .v3-inv{justify-content:center;gap:24px 30px;flex-wrap:wrap}
.v5 .v3-inv img[src*="kbw"]{height:34px}
.v5 .v3-inv img[src*="pacific-century"]{height:16px}
.v5 .v3-inv img[src*="whampoa"]{height:15px}
.v5 .v3-inv img[src*="longling"]{height:26px}
.v5 .v3-inv img[src*="kenetic"]{height:24px}
.v5 .v3-inv img[src*="venturesouq"]{height:16px}
.v5 .v3-inv img[src*="tencent"]{height:46px}
.v5 .v3-inv img[src*="4399"]{height:30px}
/* nav: logo never squashes; links tighten before they collide */
.v5 .brand{flex:none;margin-right:24px}
.v5 .brand-logo{flex:none;width:auto;max-width:none;object-fit:contain}
.v5 .nav-cta{flex:none}
@media(max-width:1280px){.v5 .nav-links{gap:24px}.v5 .nav-links a{font-size:.85rem}}
@media(max-width:1080px){.v5 .nav-links{gap:16px}.v5 .nav-cta .btn:last-child{display:none}}
/* hero app logos: continuous carousel moving left to right */
.v5-marquee{display:block!important;overflow:hidden;max-width:980px;margin-left:auto;margin-right:auto;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.v5-marquee-track{display:flex;gap:16px;width:max-content;animation:v5marq 32s linear infinite}
.v5-marquee-track .logo-chip{flex:none}
.v5-marquee:hover .v5-marquee-track{animation-play-state:paused}
@keyframes v5marq{from{transform:translateX(calc(-50% - 8px))}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.v5-marquee-track{animation:none}}
/* core grid: one type system */
.v5 .v3-core-grid div{gap:4px;padding:14px 16px}
.v5 .v3-core-grid b{font-family:'Red Hat Display',sans-serif;font-size:.95rem;font-weight:600;letter-spacing:-.01em;color:#fff;line-height:1.2}
.v5 .v3-core-grid span{font-family:'Red Hat Text',sans-serif;font-size:.82rem;line-height:1.3;color:rgba(255,255,255,.55)}
/* players node: the sum of the two above */
.v5 .v5-players{position:relative;box-shadow:inset 0 0 0 1px rgba(143,150,255,.35),0 0 40px -12px rgba(124,131,255,.45)}
.v5 .v5-pl-row{display:flex;align-items:center;gap:14px;margin-top:2px}
.v5 .v5-pl-stack{display:flex}
.v5 .v5-pl-stack i{width:34px;height:34px;border-radius:50%;margin-left:-10px;border:2px solid #0d0d14;background:linear-gradient(135deg,#8f96ff,#4b4fd6)}
.v5 .v5-pl-stack i:first-child{margin-left:0}
.v5 .v5-pl-stack i:nth-child(2){background:linear-gradient(135deg,#00E27A,#0a8f55)}
.v5 .v5-pl-stack i:nth-child(3){background:linear-gradient(135deg,#ffcc4d,#e08a00)}
.v5 .v5-pl-stack i:nth-child(4){background:linear-gradient(135deg,#ff6b8b,#c2185b)}
.v5 .v5-pl-stack i:nth-child(5){background:linear-gradient(135deg,#5ee7ff,#1b8fb3)}
.v5 .v5-pl-num{font-family:'Red Hat Display',sans-serif;font-weight:700;font-size:1.6rem;letter-spacing:-.02em;color:#fff}
.v5 .v5-pl-sub{font-size:.85rem;color:rgba(255,255,255,.55)}
/* one section rhythm, every page */
:root{--sec-y:72px}
@media(max-width:900px){:root{--sec-y:56px}}
@media(max-width:600px){:root{--sec-y:44px}}
.v5 .v3-sec,.v5 .v3-sec.v3-sec-tight,.v5 .v3-sec.v3-sec-alt,.v5 .v3-sec.v5-compute,
body.v5-page .section{padding-top:var(--sec-y)!important;padding-bottom:var(--sec-y)!important}
.v5 .v3-hero{padding-bottom:var(--sec-y)!important}
body.v5-page .page-hero{padding-bottom:var(--sec-y)!important}
body.v5-page .section:first-of-type{padding-top:var(--sec-y)!important}
.v5 .v3-hero .v3-arch{margin-top:var(--sec-y)!important}
/* super-apps card: generic app-icon field */
.v5-icons{position:absolute;inset:-14px -30px;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(5,1fr);gap:10px;padding:0;align-items:center;justify-items:center;-webkit-mask:radial-gradient(70% 75% at 50% 50%,#000 45%,transparent 100%);mask:radial-gradient(70% 75% at 50% 50%,#000 45%,transparent 100%)}
.v5-icons span{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;opacity:.8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);animation:v5bob 4s ease-in-out infinite}
.v5-icons span svg{width:58%;height:58%}
.v5-icons .v5-po{width:52px;height:52px;border-radius:14px;opacity:1;background:#3E46E8;box-shadow:0 0 0 6px rgba(73,92,245,.18),0 0 40px rgba(110,120,255,.8);animation:none;z-index:1;padding:6px}
.v5-icons .v5-po img{width:100%;height:100%;object-fit:contain}
@keyframes v5bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.v5-icons span{animation:none}}
/* audience card CTAs as buttons */
.v5-aud-card .v3-tlink{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;font-size:.92rem;font-weight:600;color:#fff;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);text-decoration:none;transition:background .2s,color .2s,box-shadow .2s}
.v5-aud-card .v3-tlink:hover,.v5-aud-card:hover .v3-tlink{background:#fff;color:#07070f;box-shadow:inset 0 0 0 1px #fff}
/* advertisers card: rotating creatives, 1.5s each */
.v5-adrot{position:relative;width:132px;height:176px;border-radius:14px;overflow:hidden;box-shadow:0 18px 36px -12px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.12);background:#111}
.v5-adrot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateX(100%);animation:v5adrot 9s cubic-bezier(.7,0,.3,1) infinite}
@keyframes v5adrot{0%{opacity:1;transform:translateX(100%)}4%{transform:translateX(0)}16.67%{opacity:1;transform:translateX(0)}20.67%{opacity:1;transform:translateX(-100%)}21%,100%{opacity:0;transform:translateX(100%)}}
.v5-adrot .v5-ad-pill{z-index:2}
@media(prefers-reduced-motion:reduce){.v5-adrot img{animation:none}.v5-adrot img:first-child{opacity:1;transform:none}}
.v5-art-ads{place-items:center!important}.v5-adrot{width:120px;height:160px;margin:0!important}
.v5 .v3-inv img[src*="okx"]{height:32px}
/* arch diagram: strict grid — equal rows, shared top line, same heights across columns */
@media(min-width:901px){
.v5 .v3-arch{--node-h:112px;--node-gap:12px;--head-h:32px;--body-h:calc(var(--node-h)*3 + var(--node-gap)*2);align-items:start!important}
.v5 .v3-arch-col{gap:var(--node-gap)!important}
.v5 .v3-arch-h{height:18px;line-height:18px;margin:0 0 calc(var(--head-h) - 18px - var(--node-gap))!important}
.v5 .v3-arch .v3-node{height:var(--node-h);box-sizing:border-box;padding:0 20px!important;justify-content:center;gap:6px!important;border-radius:14px}
.v5 .v3-arch .v3-node b{font-family:'Red Hat Display',sans-serif;font-size:1rem;font-weight:600;line-height:1.2;color:#fff}
.v5 .v3-arch .v3-node > span:not(.v3-node-row):not(.v5-pl-row){font-size:.85rem;line-height:1.3}
.v5 .v3-arch .v3-node .v3-node-row{margin-top:2px!important}
.v5 .v3-arch-link{height:var(--body-h)!important;margin-top:var(--head-h)}
.v5 .v3-arch-core{height:var(--body-h);margin-top:var(--head-h);box-sizing:border-box;display:flex;flex-direction:column;padding:20px!important}
.v5 .v3-arch-core .v3-core-head{margin-bottom:14px!important}
.v5 .v3-arch-core .v3-core-grid{flex:1;grid-template-rows:1fr 1fr;gap:10px!important}
.v5 .v3-arch-core .v3-core-grid div{justify-content:center;padding:0 16px!important}
.v5 .v3-arch-core .v3-core-grid span{white-space:nowrap}
.v5 .v5-pl-row{gap:0!important;margin-top:2px}
.v5 .v5-pl-stack i{width:28px!important;height:28px!important;margin-left:-8px!important}
.v5 .v5-pl-stack i:first-child{margin-left:0!important}
.v5 .v5-pl-sub{font-size:.85rem!important;line-height:1.3}
}
/* experience tiles: breathing room + compact, aligned */
.v5 .v5-tiles{margin-top:40px!important;gap:16px!important}
.v5 .v5-tiles .fcard{min-height:0!important;padding:24px 18px!important;gap:8px!important;justify-content:flex-start;border-radius:16px}
.v5 .v5-tiles .tile-ico{width:44px!important;height:44px!important;border-radius:12px!important}
.v5 .v5-tiles .tile-ico svg{width:20px!important;height:20px!important}
.v5 .v5-tiles .f-title{font-size:.98rem!important;line-height:1.25;margin-top:10px!important;min-height:2.5em;display:flex;align-items:center;justify-content:center}
.v5 .v5-tiles .f-desc{font-size:.84rem!important;line-height:1.45}
html{scroll-padding-top:96px}
/* headings a fraction smaller, everywhere */
.v5 .v3-hero h1{font-size:clamp(2.4rem,5.4vw,4.6rem)!important}
.v5 .v3-head h2{font-size:clamp(2rem,3.6vw,2.9rem)!important}
/* hero diagram: smaller, sleeker, more air above */
@media(min-width:901px){
.v5 .v3-hero .v3-arch{max-width:980px;margin-top:120px!important;--node-h:88px;--node-gap:10px;--head-h:28px;grid-template-columns:1fr 44px 1.1fr 44px 1fr}
.v5 .v3-arch .v3-node{padding:0 16px!important;gap:4px!important;border-radius:12px}
.v5 .v3-arch .v3-node b{font-size:.88rem!important}
.v5 .v3-arch .v3-node > span:not(.v3-node-row):not(.v5-pl-row),.v5 .v5-pl-sub{font-size:.76rem!important}
.v5 .v3-arch .v3-node-chip img,.v5 .v3-arch .v3-node-more{width:22px!important;height:22px!important;border-radius:6px!important}
.v5 .v3-arch .v3-node .v3-node-row{gap:6px!important}
.v5 .v5-pl-stack i{width:22px!important;height:22px!important;margin-left:-6px!important;border-width:1.5px!important}
.v5 .v3-arch-core{padding:16px!important;border-radius:16px}
.v5 .v3-arch-core .v3-core-head{margin-bottom:10px!important;font-size:.92rem}
.v5 .v3-arch-core .v3-core-head img{height:20px!important}
.v5 .v3-arch-core .v3-core-grid{gap:8px!important}
.v5 .v3-arch-core .v3-core-grid div{padding:0 12px!important;border-radius:9px}
.v5 .v3-arch-core .v3-core-grid b{font-size:.84rem!important}
.v5 .v3-arch-core .v3-core-grid span{font-size:.74rem!important}
.v5 .v3-arch-h{font-size:.64rem!important}
}

/* ================= MOOD SWITCH ================= */
.po-mood{position:fixed;left:18px;bottom:18px;z-index:9999;display:flex;align-items:center;gap:8px;padding:6px;border:0;background:none;cursor:pointer;opacity:.28;transition:opacity .3s}
.po-mood:hover,.po-mood:focus-visible{opacity:1}
.po-mood-track{position:relative;width:40px;height:18px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.po-mood-track i{position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .35s cubic-bezier(.6,-.3,.4,1.4),background .3s,box-shadow .3s}
.po-mood[data-pos="1"] .po-mood-track i{transform:translateX(11px);background:#FFC24B;box-shadow:0 0 8px #FFC24B}
.po-mood[data-pos="2"] .po-mood-track i{transform:translateX(22px);background:#39FF14;box-shadow:0 0 10px #39FF14,0 0 18px #FF2BD6}
.po-mood-label{font:500 .62rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s}
.po-mood:hover .po-mood-label{opacity:.8;transform:none}

/* LIGHT (milky): invert the dark design with extra contrast, warm it to off-white, flip media back */
html[data-mood="light"]{filter:invert(1) hue-rotate(180deg) contrast(1.22);background:#f3ede2}
html[data-mood="light"] img,html[data-mood="light"] video,html[data-mood="light"] picture,html[data-mood="light"] svg image,html[data-mood="light"] .po-mood,html[data-mood="light"] [style*="background-image"],html[data-mood="light"] .v5-icons span,html[data-mood="light"] .v5-pl-stack i{filter:contrast(.82) hue-rotate(180deg) invert(1)}
html[data-mood="light"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;background:#0a1122;mix-blend-mode:screen}

/* NEON: 80s disco. Deep violet night, sunset chrome headlines, hot pink + cyan glow */
html[data-mood="neon"] body{--hl:#FF2E97;--live:#00F0FF;--periwinkle:#FF2E97;--accent:#FF2E97;--navy:#0d0221;background:#0d0221!important}
html[data-mood="neon"] body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(60% 40% at 15% 10%,rgba(255,46,151,.22),transparent 70%),radial-gradient(50% 40% at 90% 20%,rgba(0,240,255,.16),transparent 70%),radial-gradient(70% 50% at 50% 110%,rgba(176,38,255,.3),transparent 70%)}
html[data-mood="neon"] section,html[data-mood="neon"] footer,html[data-mood="neon"] .v3-sec-alt{background:transparent!important}
html[data-mood="neon"] .hl,html[data-mood="neon"] h1 .hl,html[data-mood="neon"] h2 .hl{background:linear-gradient(180deg,#FFE53B 0%,#FF9A3C 38%,#FF2E97 70%,#B026FF 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;filter:drop-shadow(0 0 12px rgba(255,46,151,.55)) drop-shadow(0 0 30px rgba(176,38,255,.35))}
html[data-mood="neon"] h1,html[data-mood="neon"] h2{color:#fff;text-shadow:0 0 6px #fff,0 0 18px rgba(0,240,255,.8),0 0 40px rgba(0,240,255,.4)}
html[data-mood="neon"] .v3-mono,html[data-mood="neon"] .eyebrow,html[data-mood="neon"] .hero-eyebrow,html[data-mood="neon"] .v3-arch-h{color:#00F0FF!important;text-shadow:0 0 8px rgba(0,240,255,.8)}
html[data-mood="neon"] .v3-node,html[data-mood="neon"] .fcard,html[data-mood="neon"] .v5-aud-card,html[data-mood="neon"] .v4-layer,html[data-mood="neon"] .ncard,html[data-mood="neon"] .v3-core-grid div,html[data-mood="neon"] .v5-flow-node,html[data-mood="neon"] .gate{background:rgba(26,4,52,.6)!important;box-shadow:inset 0 0 0 1px rgba(255,46,151,.6),0 0 22px -6px rgba(255,46,151,.7)!important}
html[data-mood="neon"] .v3-arch-core{background:rgba(26,4,52,.75)!important;box-shadow:inset 0 0 0 1.5px #00F0FF,0 0 46px -6px rgba(0,240,255,.6)!important}
html[data-mood="neon"] .v3-btn-solid,html[data-mood="neon"] section .btn--blue{background:linear-gradient(90deg,#FF2E97,#B026FF)!important;color:#fff!important;box-shadow:0 0 24px rgba(255,46,151,.7)!important;animation:poDisco 4s linear infinite}
html[data-mood="neon"] .v3-btn-line,html[data-mood="neon"] .v5-aud-card .v3-tlink,html[data-mood="neon"] section .btn--dark{color:#00F0FF!important;box-shadow:inset 0 0 0 1.5px #00F0FF,0 0 16px -4px #00F0FF!important}
@keyframes poDisco{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
html[data-mood="neon"] .v3-grid-bg,html[data-mood="neon"] .page-hero::after,html[data-mood="neon"] .gate-wrap::after{background-image:linear-gradient(rgba(255,46,151,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,46,151,.35) 1px,transparent 1px)!important;background-size:64px 64px!important;transform:perspective(500px) rotateX(58deg);transform-origin:50% 100%;opacity:.7}
html[data-mood="neon"] .v3-node b,html[data-mood="neon"] .v3-core-grid b,html[data-mood="neon"] h3,html[data-mood="neon"] h4,html[data-mood="neon"] .f-title{color:#FFE53B!important;text-shadow:0 0 10px rgba(255,229,59,.5)}
html[data-mood="neon"] .nav-links a.active,html[data-mood="neon"] .nav-links a:hover{color:#FF2E97!important;text-shadow:0 0 10px #FF2E97}
html[data-mood="neon"] .po-mood-track{box-shadow:inset 0 0 0 1px #FF2E97,0 0 10px #FF2E97}
@media(prefers-reduced-motion:reduce){html[data-mood="neon"] .v3-btn-solid,html[data-mood="neon"] section .btn--blue{animation:none}}
html[data-mood="neon"] .po-mood[data-pos="2"] .po-mood-track i{background:#FF2E97;box-shadow:0 0 10px #FF2E97,0 0 18px #00F0FF}
@media(prefers-reduced-motion:reduce){.po-mood-track i{transition:none}}
/* light mood: white brand marks and mono logos should flip to dark, so don't re-invert them */
html[data-mood="light"] img[src*="playsout-logo"],html[data-mood="light"] img[src*="playsout-icon"],html[data-mood="light"] .v3-inv img,html[data-mood="light"] .brand-logo,html[data-mood="light"] footer img{filter:none!important}
/* light: warm milky tint (pre-filter colour chosen so it lands beige after invert+hue-rotate) */
html[data-mood="light"] body::after{background:#1c1408!important}
/* neon: keep the sunset gradient visible, tighter glow */
html[data-mood="neon"] .hl{text-shadow:none!important}
html[data-mood="neon"] h1,html[data-mood="neon"] h2{text-shadow:0 0 2px #fff,0 0 12px rgba(0,240,255,.7),0 0 28px rgba(176,38,255,.45)!important}
html[data-mood="neon"] .v3-hero::after{content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:45%;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(255,46,151,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(255,46,151,.55) 1px,transparent 1px);background-size:80px 40px;transform:perspective(420px) rotateX(62deg);transform-origin:50% 100%;-webkit-mask:linear-gradient(transparent,#000 60%);mask:linear-gradient(transparent,#000 60%);opacity:.55}
html[data-mood="neon"] .v3-hero>*{position:relative;z-index:1}
/* neon v2: green neon (overrides the disco pink/orange) */
html[data-mood="neon"] body{--hl:#39FF14;--live:#39FF14;--periwinkle:#39FF14;--accent:#39FF14;background:#030a06!important}
html[data-mood="neon"] body::before{background:radial-gradient(60% 40% at 15% 8%,rgba(57,255,20,.16),transparent 70%),radial-gradient(50% 40% at 90% 18%,rgba(0,240,255,.12),transparent 70%),radial-gradient(70% 50% at 50% 110%,rgba(57,255,20,.18),transparent 70%)!important}
html[data-mood="neon"] .hl,html[data-mood="neon"] h1 .hl,html[data-mood="neon"] h2 .hl{background:linear-gradient(180deg,#E6FF4D 0%,#39FF14 55%,#00F0B0 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;filter:drop-shadow(0 0 10px rgba(57,255,20,.6)) drop-shadow(0 0 26px rgba(57,255,20,.3))!important}
html[data-mood="neon"] h1,html[data-mood="neon"] h2{text-shadow:0 0 2px #fff,0 0 12px rgba(57,255,20,.55),0 0 28px rgba(57,255,20,.3)!important}
html[data-mood="neon"] .v3-mono,html[data-mood="neon"] .eyebrow,html[data-mood="neon"] .hero-eyebrow,html[data-mood="neon"] .v3-arch-h{color:#39FF14!important;text-shadow:0 0 8px rgba(57,255,20,.8)!important}
html[data-mood="neon"] .v3-node,html[data-mood="neon"] .fcard,html[data-mood="neon"] .v5-aud-card,html[data-mood="neon"] .v4-layer,html[data-mood="neon"] .ncard,html[data-mood="neon"] .v3-core-grid div,html[data-mood="neon"] .v5-flow-node,html[data-mood="neon"] .gate{background:rgba(4,22,10,.6)!important;box-shadow:inset 0 0 0 1px rgba(57,255,20,.5),0 0 20px -6px rgba(57,255,20,.6)!important}
html[data-mood="neon"] .v3-arch-core{background:rgba(4,22,10,.75)!important;box-shadow:inset 0 0 0 1.5px #39FF14,0 0 46px -6px rgba(57,255,20,.6)!important}
html[data-mood="neon"] .v3-btn-solid,html[data-mood="neon"] section .btn--blue{background:#39FF14!important;color:#03140a!important;box-shadow:0 0 24px rgba(57,255,20,.7)!important;animation:none!important}
html[data-mood="neon"] .v3-btn-line,html[data-mood="neon"] .v5-aud-card .v3-tlink,html[data-mood="neon"] section .btn--dark{color:#39FF14!important;box-shadow:inset 0 0 0 1.5px #39FF14,0 0 16px -4px #39FF14!important}
html[data-mood="neon"] .v3-node b,html[data-mood="neon"] .v3-core-grid b,html[data-mood="neon"] h3,html[data-mood="neon"] h4,html[data-mood="neon"] .f-title{color:#E6FF4D!important;text-shadow:0 0 10px rgba(230,255,77,.45)!important}
html[data-mood="neon"] .nav-links a.active,html[data-mood="neon"] .nav-links a:hover{color:#39FF14!important;text-shadow:0 0 10px #39FF14!important}
html[data-mood="neon"] .v3-hero::after,html[data-mood="neon"] .v3-grid-bg,html[data-mood="neon"] .page-hero::after,html[data-mood="neon"] .gate-wrap::after{background-image:linear-gradient(rgba(57,255,20,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(57,255,20,.45) 1px,transparent 1px)!important}
html[data-mood="neon"] .po-mood-track{box-shadow:inset 0 0 0 1px #39FF14,0 0 10px #39FF14!important}
html[data-mood="neon"] .po-mood[data-pos="2"] .po-mood-track i{background:#39FF14!important;box-shadow:0 0 10px #39FF14,0 0 18px #39FF14!important}
html[data-mood="neon"] .v5-aud-card li::before{background:#39FF14!important}
/* neon v3: random colour via --neon / --neon-rgb (set by theme-toggle.js) */
.po-mood-wrap{position:fixed;left:18px;bottom:18px;z-index:9999;display:flex;align-items:center;gap:4px}
.po-mood-wrap .po-mood{position:static}
.po-shuffle{display:none;width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;font-size:13px;line-height:26px;color:var(--neon,#39FF14);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(var(--neon-rgb,57,255,20),.6),0 0 10px rgba(var(--neon-rgb,57,255,20),.5);opacity:.5;transition:opacity .2s,transform .3s}
.po-shuffle:hover{opacity:1;transform:rotate(90deg)}
html[data-mood="neon"] .po-shuffle{display:inline-block}
html[data-mood="neon"] body{--hl:var(--neon);--live:var(--neon);--periwinkle:var(--neon);--accent:var(--neon);background:#040406!important}
html[data-mood="neon"] body::before{background:radial-gradient(60% 40% at 15% 8%,rgba(var(--neon-rgb),.16),transparent 70%),radial-gradient(70% 50% at 50% 110%,rgba(var(--neon-rgb),.18),transparent 70%)!important}
html[data-mood="neon"] .hl,html[data-mood="neon"] h1 .hl,html[data-mood="neon"] h2 .hl{background:linear-gradient(180deg,#fff -30%,var(--neon) 55%)!important;-webkit-background-clip:text!important;background-clip:text!important;filter:drop-shadow(0 0 10px rgba(var(--neon-rgb),.6)) drop-shadow(0 0 26px rgba(var(--neon-rgb),.3))!important}
html[data-mood="neon"] h1,html[data-mood="neon"] h2{text-shadow:0 0 2px #fff,0 0 12px rgba(var(--neon-rgb),.55),0 0 28px rgba(var(--neon-rgb),.3)!important}
html[data-mood="neon"] .v3-mono,html[data-mood="neon"] .eyebrow,html[data-mood="neon"] .hero-eyebrow,html[data-mood="neon"] .v3-arch-h{color:var(--neon)!important;text-shadow:0 0 8px rgba(var(--neon-rgb),.8)!important}
html[data-mood="neon"] .v3-node,html[data-mood="neon"] .fcard,html[data-mood="neon"] .v5-aud-card,html[data-mood="neon"] .v4-layer,html[data-mood="neon"] .ncard,html[data-mood="neon"] .v3-core-grid div,html[data-mood="neon"] .v5-flow-node,html[data-mood="neon"] .gate{background:rgba(var(--neon-rgb),.05)!important;box-shadow:inset 0 0 0 1px rgba(var(--neon-rgb),.5),0 0 20px -6px rgba(var(--neon-rgb),.6)!important}
html[data-mood="neon"] .v3-arch-core{background:rgba(var(--neon-rgb),.07)!important;box-shadow:inset 0 0 0 1.5px var(--neon),0 0 46px -6px rgba(var(--neon-rgb),.6)!important}
html[data-mood="neon"] .v3-btn-solid,html[data-mood="neon"] section .btn--blue{background:var(--neon)!important;color:#050505!important;box-shadow:0 0 24px rgba(var(--neon-rgb),.7)!important}
html[data-mood="neon"] .v3-btn-line,html[data-mood="neon"] .v5-aud-card .v3-tlink,html[data-mood="neon"] section .btn--dark{color:var(--neon)!important;box-shadow:inset 0 0 0 1.5px var(--neon),0 0 16px -4px var(--neon)!important}
html[data-mood="neon"] .v3-node b,html[data-mood="neon"] .v3-core-grid b,html[data-mood="neon"] h3,html[data-mood="neon"] h4,html[data-mood="neon"] .f-title{color:color-mix(in srgb,var(--neon) 65%,#fff)!important;text-shadow:0 0 10px rgba(var(--neon-rgb),.45)!important}
html[data-mood="neon"] .nav-links a.active,html[data-mood="neon"] .nav-links a:hover{color:var(--neon)!important;text-shadow:0 0 10px var(--neon)!important}
html[data-mood="neon"] .v3-hero::after,html[data-mood="neon"] .v3-grid-bg,html[data-mood="neon"] .page-hero::after,html[data-mood="neon"] .gate-wrap::after{background-image:linear-gradient(rgba(var(--neon-rgb),.45) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--neon-rgb),.45) 1px,transparent 1px)!important}
html[data-mood="neon"] .po-mood-track{box-shadow:inset 0 0 0 1px var(--neon),0 0 10px var(--neon)!important}
html[data-mood="neon"] .po-mood[data-pos="2"] .po-mood-track i{background:var(--neon)!important;box-shadow:0 0 10px var(--neon),0 0 18px var(--neon)!important}
html[data-mood="neon"] .v5-aud-card li::before{background:var(--neon)!important}

/* ================= MOOD JOYSTICK (replaces the bottom-left switch) ================= */
.po-mood-wrap,.po-mood{display:none!important}
.po-joy{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:9999;display:flex;align-items:center;gap:8px}
.po-joy-stick{width:44px;height:52px;padding:4px;border:0;border-radius:14px;cursor:pointer;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);opacity:.45;transition:opacity .25s,background .25s,box-shadow .25s}
.po-joy:hover .po-joy-stick,.po-joy.open .po-joy-stick,.po-joy-stick:focus-visible{opacity:1;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.po-joy-stick svg{width:100%;height:100%;overflow:visible}
.po-joy .j-base{fill:#2a2a3a}.po-joy .j-rod{fill:#9a9ab0}
.po-joy .j-ball{fill:#98A3FF;transition:fill .3s}
.po-joy .j-btn{fill:#FF2E97}.po-joy .j-btn2{fill:#00F0FF}
.po-joy .j-stick{transform-origin:20px 38px;transition:transform .3s cubic-bezier(.5,-.6,.4,1.6)}
.po-joy:hover .j-stick{transform:rotate(-8deg)}
.po-joy.tilt-l .j-stick{animation:poTiltL .5s}.po-joy.tilt-r .j-stick{animation:poTiltR .5s}
@keyframes poTiltL{40%{transform:rotate(-24deg)}}@keyframes poTiltR{40%{transform:rotate(24deg)}}
.po-joy[data-m="neon"] .j-ball{fill:var(--neon)}
.po-joy[data-m="neon"] .po-joy-stick{opacity:.8;box-shadow:inset 0 0 0 1px rgba(var(--neon-rgb),.6),0 0 14px rgba(var(--neon-rgb),.45)}
.po-joy-menu{display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:12px;background:rgba(12,12,20,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 12px 30px -10px rgba(0,0,0,.8);opacity:0;pointer-events:none;transform:translateX(-6px);transition:opacity .2s,transform .2s}
.po-joy:hover .po-joy-menu,.po-joy.open .po-joy-menu{opacity:1;pointer-events:auto;transform:none}
.po-joy-menu button{all:unset;cursor:pointer;font:500 .68rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);padding:8px 12px;border-radius:8px;white-space:nowrap}
.po-joy-menu button:hover{color:#fff;background:rgba(255,255,255,.06)}
.po-joy-menu button.on{color:#07070f;background:#fff}
.po-joy[data-m="neon"] .po-joy-menu button.on{background:var(--neon);box-shadow:0 0 12px rgba(var(--neon-rgb),.6)}
.po-joy-dice{opacity:.7}
@media(max-width:600px){.po-joy{left:8px}.po-joy-stick{width:36px;height:44px}}
@media(prefers-reduced-motion:reduce){.po-joy .j-stick{transition:none;animation:none!important}}

/* ================= LIGHT v2: milky beige, black text ================= */
/* No screen overlay and no contrast boost (they washed out logos). Instead the dark base colour is
   swapped for one that lands on milky beige (#F2EBDD) after invert + hue-rotate. */
html[data-mood="light"]{filter:invert(1) hue-rotate(180deg)!important;background:#F2EBDD}
html[data-mood="light"] body::after{display:none!important}
html[data-mood="light"] body{--navy:#1a1305;--slate:#211a0b;background:#1a1305!important}
html[data-mood="light"] body > section:not(.v3-sec-alt):not(.v5-compute),html[data-mood="light"] footer,html[data-mood="light"] .gate-wrap{background-color:#1a1305!important}
html[data-mood="light"] img,html[data-mood="light"] video,html[data-mood="light"] picture,html[data-mood="light"] svg image,html[data-mood="light"] [style*="background-image"],html[data-mood="light"] .v5-icons span,html[data-mood="light"] .v5-pl-stack i,html[data-mood="light"] .po-joy{filter:hue-rotate(180deg) invert(1)!important}
html[data-mood="light"] img[src*="playsout-logo"],html[data-mood="light"] img[src*="playsout-icon"],html[data-mood="light"] .v3-inv img,html[data-mood="light"] .brand-logo,html[data-mood="light"] footer img{filter:none!important}
/* text goes solid (white pre-invert = black on screen); secondary text stays a touch softer */
html[data-mood="light"] h1,html[data-mood="light"] h2,html[data-mood="light"] h3,html[data-mood="light"] h4,html[data-mood="light"] b,html[data-mood="light"] strong,html[data-mood="light"] .f-title,html[data-mood="light"] .v3-row-title{color:#fff!important}
html[data-mood="light"] p,html[data-mood="light"] li,html[data-mood="light"] span:not(.hl):not(.hl *),html[data-mood="light"] small,html[data-mood="light"] .nav-links a,html[data-mood="light"] footer a,html[data-mood="light"] label{color:rgba(255,255,255,.86)!important}
html[data-mood="light"] .v3-mono,html[data-mood="light"] .eyebrow,html[data-mood="light"] .hero-eyebrow,html[data-mood="light"] .v3-arch-h,html[data-mood="light"] .tag{color:rgba(255,255,255,.7)!important}
/* keep buttons that are dark-text-on-white readable */
html[data-mood="light"] .v3-btn-solid,html[data-mood="light"] .v3-btn-solid *,html[data-mood="light"] section .btn--blue,html[data-mood="light"] section .btn--blue *,html[data-mood="light"] .po-joy *,html[data-mood="light"] .v5-aud-card:hover .v3-tlink{color:#07070f!important}
html[data-mood="light"] .po-joy-menu button:not(.on){color:rgba(255,255,255,.6)!important}
html[data-mood="light"] .v3-sec-alt,html[data-mood="light"] .v5-compute{background:#271e0c!important}
html[data-mood="light"] .v3-press-logos img{filter:none!important}
html[data-mood="light"] .arrow,html[data-mood="light"] .arrow *,html[data-mood="light"] .nav-cta .btn span.arrow{color:#07070f!important}
html[data-mood="light"] .nav.scrolled{background:rgba(26,19,5,.85)!important}

/* ================= LIGHT v3: plain invert (exactly reversible) so logos/photos stay crisp and true =================
   hue-rotate isn't truly reversible and was washing out every image. With invert only, images flip back exactly.
   Accent colours are written pre-inverted; illustrations are flipped back as dark "screens". */
html[data-mood="light"]{filter:invert(1)!important;background:#F2EBDD}
html[data-mood="light"] body{background:#0d1422!important;--navy:#0d1422}
html[data-mood="light"] body > section:not(.v3-sec-alt):not(.v5-compute),html[data-mood="light"] footer,html[data-mood="light"] .gate-wrap{background-color:#0d1422!important}
html[data-mood="light"] .v3-sec-alt,html[data-mood="light"] .v5-compute{background:#161f31!important}
html[data-mood="light"] .nav.scrolled{background:rgba(13,20,34,.85)!important}
/* flip media back (exact) */
html[data-mood="light"] img,html[data-mood="light"] video,html[data-mood="light"] svg image,html[data-mood="light"] [style*="background-image"],html[data-mood="light"] .v5-icons span,html[data-mood="light"] .v5-pl-stack i,html[data-mood="light"] .po-joy,
html[data-mood="light"] .v5-iso,html[data-mood="light"] .v5-globe-wrap,html[data-mood="light"] .v5-slash-wrap,html[data-mood="light"] .v5-aud-art,html[data-mood="light"] .tile-ico{filter:invert(1)!important}
/* but not twice inside an already-flipped block */
html[data-mood="light"] :is(.v5-iso,.v5-globe-wrap,.v5-slash-wrap,.v5-aud-art,.tile-ico,.po-joy) :is(img,svg image,span,i,[style*="background-image"]){filter:none!important}
/* white brand marks and mono logos: let them invert to dark */
html[data-mood="light"] img[src*="playsout-logo"],html[data-mood="light"] img[src*="playsout-icon"]:not(:is(.v5-aud-art,.v5-iso,.v5-globe-wrap) *),html[data-mood="light"] .v3-inv img[src*="whampoa"],html[data-mood="light"] .v3-inv img[src*="okx"],html[data-mood="light"] .v3-inv img[src*="longling"],html[data-mood="light"] .v3-inv img[src*="venturesouq"],html[data-mood="light"] .brand-logo,html[data-mood="light"] footer img{filter:none!important}
/* accents, pre-inverted: indigo on beige */
html[data-mood="light"] .hl{background:linear-gradient(90deg,#c4c040,#a4a30f 45%,#d5d061)!important;-webkit-background-clip:text!important;background-clip:text!important}
html[data-mood="light"] .nav-links a.active,html[data-mood="light"] .tag,html[data-mood="light"] .read,html[data-mood="light"] .v4-num,html[data-mood="light"] .hint a{color:#c4c040!important}
html[data-mood="light"] .v3-arch-core{background:rgba(0,0,0,.25)!important;box-shadow:inset 0 0 0 1px rgba(196,192,64,.6)!important}
html[data-mood="light"] .v5-aud-card li::before{background:#c4c040!important}
html[data-mood="light"] .v3-inv img,html[data-mood="light"] .v3-press-logos img{filter:invert(1)!important}
/* light: partner + press logos as crisp solid dark marks (white pre-invert = black on screen) */
html[data-mood="light"] .v3-inv img,html[data-mood="light"] .v3-inv img[src],html[data-mood="light"] .v3-press-logos img{filter:brightness(0) invert(1)!important;opacity:.85!important}
/* light: illustration labels readable (these sit inside flipped blocks, so authored colours show as-is) */
html[data-mood="light"] .v5-iso .v5-iso-name{fill:#07070f!important}
html[data-mood="light"] .v5-iso .v5-iso-sub{fill:#3a3a4a!important}
html[data-mood="light"] .v5-globe-wrap{background:#0b0b16!important;border-radius:20px}
html[data-mood="light"] .v3-inv img[src*="pacific-century"],html[data-mood="light"] .v3-press-logos img[src*="hackernoon"]{filter:invert(1)!important;opacity:1!important}
/* advertisers: two rotating ad screens side by side, offset by half a beat */
.v5-adpair{display:flex;gap:14px;align-items:center;justify-content:center}
.v5-adpair .v5-adrot{width:112px!important;height:150px!important}
.v5-adpair .v5-adrot:nth-child(2){transform:translateY(10px)}
.v5-adpair .v5-ad-pill{font-size:.55rem;padding:4px 7px;top:7px;left:7px}

/* ===== Mobile pass (phones only, <=600px) ===== */
@media(max-width:900px){.v5-how{grid-template-columns:1fr!important;gap:28px!important}.v5-how-art{align-self:auto!important;margin:0 auto!important}}
@media(max-width:600px){
  .wrap{padding-left:16px!important;padding-right:16px!important}
  /* type scale */
  .v5 h1,.v5-page h1{font-size:2.1rem!important;line-height:1.08!important}
  .v5 h2,.v5-page h2,.v5-page .title{font-size:1.65rem!important;line-height:1.12!important}
  .v3-lede,.v3-sub{font-size:1rem!important;line-height:1.5!important}
  .v3-mono,.eyebrow,.hero-eyebrow{font-size:.66rem!important}
  .v3-head{margin-bottom:28px!important}
  .v3-lede{margin-top:12px!important}
  .v3-btn,.v5 .btn,.v5-page .btn{height:42px!important;font-size:.9rem!important}
  /* hero */
  .v3-hero{padding-top:104px!important;padding-bottom:32px!important}
  .v3-sub{margin-top:16px!important}
  .v3-cta{margin-top:24px!important}
  .v4-hero-apps{margin-top:36px!important}
  .v3-arch{margin-top:36px!important;gap:10px!important}
  .v3-node{padding:10px 14px!important;border-radius:12px!important}
  .v3-node b,.v3-node strong,.v3-node h4{font-size:.95rem!important}
  .v3-node span,.v3-node p{font-size:.8rem!important}
  .v3-arch-core{padding:16px!important}
  /* stats */
  .v5 .v3-metrics div{padding:18px 14px!important;gap:6px!important}
  .v5 .v3-metrics b{font-size:1.9rem!important}
  .v5 .v3-metrics span{font-size:.82rem!important}
  /* feature tiles: icon left, text right */
  .v5 .v5-tiles{gap:10px!important;margin-top:24px!important}
  .v5 .v5-tiles .fcard{display:grid!important;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;text-align:left!important;padding:14px 16px!important;min-height:0!important}
  .v5 .v5-tiles .tile-ico{grid-row:1 / span 2;width:40px!important;height:40px!important;margin:0!important}
  .v5 .v5-tiles .f-title{font-size:.98rem!important;margin:0!important;align-self:end;text-align:left!important;display:block!important;min-height:0!important}
  .v5 .v5-tiles .f-desc{font-size:.84rem!important;margin:0!important;align-self:start;text-align:left!important;max-width:none!important}
  .v5 .v3-inv{gap:12px 22px!important}
  .v5 .v3-inv .logo-chip{height:40px!important}
  .v5 .v3-inv .logo-chip img{max-height:24px!important}
  .v5 .v3-inv img[src*="kbw"]{max-height:30px!important}
  .v5 .v3-inv img[src*="tencent"]{max-height:38px!important}
  .v5 .v3-inv img[src*="venturesouq"]{max-height:14px!important}
  /* how it works */
  .v5-how .v4-layer{grid-template-columns:28px 1fr!important;gap:12px!important;padding:14px 16px!important}
  .v5-how .v4-num{font-size:1.15rem!important}
  .v5-how .v4-layer h3{font-size:1rem!important}
  .v5-how .v4-layer p{font-size:.86rem!important;line-height:1.45!important}
  .v5-how .v4-stack{gap:10px!important}
  .v5-how-art .v5-iso{max-width:300px!important}
  .v5-how-left .v3-head{margin-bottom:24px!important}
  /* audience cards */
  .v5-aud{gap:14px!important}
  .v5-aud-card{padding:16px!important}
  .v5-aud-card h3{font-size:1.15rem!important}
  .v5-aud-card li{font-size:.88rem!important}
  /* press */
  .v3-head-row{align-items:flex-start!important;gap:16px!important}
  .v3-press-logos{gap:16px 28px!important;padding-bottom:20px!important}
  .v3-press-logos .logo-chip,.v3-press-logos img{height:22px!important}
  .v3-row{padding:14px 0!important}
  .v3-row-title{font-size:.98rem!important;line-height:1.35!important}
  .v3-row-src{font-size:.72rem!important}
  .v3-logo-row{gap:18px 22px!important;margin-top:20px!important}
  /* closing CTA */
  .v3-final{padding:44px 18px!important;border-radius:16px!important}
  .v3-final h2{font-size:1.65rem!important}
  .v3-form{margin-top:20px!important}
  /* footer */
  .footer{padding:44px 0 28px!important}
  .footer-top{grid-template-columns:1fr 1fr!important;gap:24px 16px!important;padding-bottom:28px!important}
  .footer-brand{grid-column:1 / -1}
  .footer-icon{height:44px!important;width:auto!important}
  .footer h5{font-size:.82rem!important;margin-bottom:10px!important}
  .footer ul{gap:8px!important}
  .footer li a{font-size:.74rem!important}
  .footer-bottom{gap:10px 20px!important;padding-top:20px!important;font-size:.8rem!important}
  .footer-bottom .spacer{display:none}
  .footer-legal{gap:8px 16px!important}
  .footer-legal a{font-size:.78rem!important}
  /* inner pages */
  .v5-page .page-hero{padding-top:104px!important;padding-bottom:32px!important}
  .v5-page .feature-row{grid-template-columns:1fr!important;gap:10px!important}
  .v5-page .fcard{padding:16px!important;min-height:0!important}
  .v5-page .sec-head{margin-bottom:24px!important}
  .v5-page .hero-cta{flex-direction:row!important;flex-wrap:wrap;justify-content:center;gap:10px!important}
  .v5-page .hero-cta .btn{width:auto!important;flex:0 0 auto}
  .v5-page .cta-final{padding:44px 18px!important;border-radius:16px!important}
  /* theme picker: tuck into bottom-left corner so it never sits on content */
  .po-joy{top:auto!important;bottom:14px!important;transform:none!important;left:10px!important}
  .po-joy-stick{width:34px!important;height:40px!important}
}