/* Blackfluencers project cockpit page — warm PlanB project surface */
:root {
  color-scheme: dark;
  --bg: #09080b;
  --panel: rgba(19, 17, 21, .88);
  --panel2: rgba(31, 24, 27, .92);
  --line: rgba(255, 255, 255, .11);
  --text: #fff7ed;
  --muted: #c8b9ad;
  --dim: #8d8178;
  --hot: #f97316;
  --rose: #fb7185;
  --violet: #a78bfa;
  --ok: #6ee7b7;
  --warn: #facc15;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: var(--heritage-bg, radial-gradient(circle at 10% 0%, rgba(249, 115, 22, .22), transparent 32%), radial-gradient(circle at 86% 8%, rgba(167, 139, 250, .18), transparent 34%), linear-gradient(180deg, #10090e, #08080b 62%)); transition: background .45s ease; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 82%); }
a { color: inherit; }
button, input, textarea { font: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid rgba(249, 115, 22, .85); outline-offset: 3px; }
header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .7rem; padding: calc(env(safe-area-inset-top, 0) + .72rem) .95rem .72rem; border-bottom: 1px solid var(--line); background: rgba(9, 8, 11, .9); backdrop-filter: blur(18px); }
.brand { font-weight: 900; letter-spacing: -.03em; text-decoration: none; }
.brand span { color: var(--hot); }
.spacer { flex: 1; }
.top { min-height: 34px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: .42rem .68rem; color: var(--muted); text-decoration: none; font-size: 12px; white-space: nowrap; background: rgba(255,255,255,.04); }
main { width: min(1180px, 100%); margin: 0 auto; padding: 1rem .92rem calc(env(safe-area-inset-bottom, 0) + 2.4rem); }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .64fr); gap: 1rem; align-items: stretch; border: 1px solid var(--line); border-radius: 24px; padding: clamp(1rem, 3vw, 1.55rem); overflow: hidden; background: linear-gradient(135deg, rgba(55, 24, 22, .92), rgba(13, 10, 14, .9)); box-shadow: 0 30px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08); }
.hero::before { content: ""; position: absolute; inset: 0; background-image: url('/card-images/blackfluencers.svg'); background-size: cover; background-position: center; opacity: .18; filter: saturate(1.12); }
.hero > * { position: relative; }
.eyebrow, .pill, .meta-pill { width: fit-content; display: inline-flex; align-items: center; gap: .38rem; border: 1px solid rgba(249, 115, 22, .28); border-radius: 999px; padding: .24rem .58rem; background: rgba(0,0,0,.24); color: #fed7aa; font: 800 11px/1 ui-monospace, "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
h1 { margin: .72rem 0 .42rem; max-width: 11ch; font-size: clamp(2.4rem, 8.2vw, 5.9rem); line-height: .88; letter-spacing: -.075em; }
.sub { margin: 0; max-width: 64ch; color: var(--muted); line-height: 1.55; font-size: 15px; }
.actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; padding: .52rem .78rem; background: rgba(255,255,255,.05); color: var(--muted); text-decoration: none; cursor: pointer; }
.btn.hot { color: #fff7ed; border-color: rgba(249,115,22,.45); background: linear-gradient(135deg, rgba(249,115,22,.22), rgba(251,113,133,.13)); }
.boom-trigger { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 12px 34px rgba(249,115,22,.18); }
.boom-trigger::after { content: ""; position: absolute; inset: -55% -20%; z-index: -1; background: conic-gradient(from 90deg, transparent, rgba(255,247,237,.3), transparent 24%, rgba(249,115,22,.36), transparent 52%, rgba(167,139,250,.28), transparent); transform: translateX(-55%) rotate(0deg); opacity: .78; animation: boomSweep 2.8s ease-in-out infinite; }
@keyframes boomSweep { 50% { transform: translateX(28%) rotate(32deg); } }
.boom-burst { position: fixed; z-index: 80; width: 1px; height: 1px; pointer-events: none; color: #fff7ed; filter: drop-shadow(0 10px 24px rgba(0,0,0,.5)); }
.boom-word { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,247,237,.28); border-radius: 999px; padding: .42rem .72rem; background: linear-gradient(135deg, rgba(249,115,22,.94), rgba(251,113,133,.88) 54%, rgba(167,139,250,.82)); font: 900 12px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em; white-space: nowrap; }
.boom-burst i { position: absolute; left: calc(var(--s) * -.5); top: calc(var(--s) * -.5); width: var(--s); height: var(--s); border-radius: 999px; background: var(--h); box-shadow: 0 0 18px color-mix(in srgb, var(--h), transparent 42%); }
.is-booming { border-color: rgba(249,115,22,.7) !important; box-shadow: 0 0 0 1px rgba(249,115,22,.22), 0 22px 60px rgba(249,115,22,.15), inset 0 1px 0 rgba(255,255,255,.08) !important; }
.boom-pop { animation: boomPop .52s cubic-bezier(.2,.85,.18,1); }
@keyframes boomPop { 0%, 100% { transform: scale(1); } 42% { transform: scale(1.035) rotate(.35deg); } }
.hero-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .62rem; align-content: end; }
.stat { min-height: 116px; border: 1px solid var(--line); border-radius: 18px; padding: .82rem; background: rgba(0,0,0,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.stat strong { display: block; font-size: clamp(1.55rem, 4vw, 2.4rem); letter-spacing: -.05em; }
.stat span { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
.tabs { display: flex; gap: .5rem; overflow-x: auto; padding: 1rem 0 .72rem; position: sticky; top: calc(env(safe-area-inset-top, 0) + 55px); z-index: 4; background: linear-gradient(180deg, rgba(9,8,11,.98), rgba(9,8,11,.78)); backdrop-filter: blur(14px); }
.tab { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: .55rem .72rem; background: rgba(255,255,255,.04); color: var(--muted); cursor: pointer; }
.tab.active { color: #fff7ed; border-color: rgba(249,115,22,.58); background: rgba(249,115,22,.17); }
.pane { animation: in .18s ease-out; }
@keyframes in { from { opacity: 0; transform: translateY(6px); } }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; }
.panel { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.panel h2 { margin: 0; padding: .9rem 1rem; border-bottom: 1px solid var(--line); font-size: .98rem; }
.panel-body { padding: .95rem 1rem; color: var(--muted); line-height: 1.55; }
.panel-body ul { margin: .45rem 0 0; padding-left: 1.15rem; }
.panel-body li { margin: .26rem 0; }
.card-list { display: grid; gap: .64rem; }
.card { border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: .72rem; background: rgba(0,0,0,.2); }
.card strong { display: block; color: var(--text); margin-bottom: .18rem; }
.card span, .card a { color: var(--muted); font-size: 13px; line-height: 1.45; }
.meta-strip { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.heritage-context { margin: .62rem 0 0; max-width: 68ch; color: #fde68a; font-size: 12px; line-height: 1.45; }
.language-focus { margin-top: .7rem; max-width: 760px; border: 1px solid rgba(250,204,21,.22); border-radius: 18px; padding: .78rem .9rem; background: rgba(0,0,0,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.language-focus h2 { margin: .16rem 0 .18rem; font-size: clamp(1.35rem, 3vw, 2.35rem); letter-spacing: -.045em; }
.language-focus p { margin: 0; color: var(--muted); line-height: 1.42; }
.language-focus small { display: block; margin-top: .58rem; color: #fde68a; line-height: 1.35; }
.phrase-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .46rem; margin: .7rem 0 0; }
.phrase-list div { border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: .55rem .62rem; background: rgba(255,255,255,.045); }
.phrase-list dt { color: var(--dim); font: 900 10px/1.2 ui-monospace, "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .22rem; }
.phrase-list dd { margin: 0; color: #fff7ed; font-weight: 850; line-height: 1.25; }
.peoples-ledger { margin-top: .75rem; max-width: 980px; border: 1px solid rgba(255,255,255,.10); border-radius: 20px; padding: .82rem .9rem; background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(0,0,0,.20)); }
.peoples-ledger h2 { margin: .16rem 0 .28rem; font-size: clamp(1.25rem, 2.6vw, 2rem); letter-spacing: -.04em; }
.peoples-ledger p { margin: 0; color: var(--muted); line-height: 1.42; }
.ledger-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .5rem; margin-top: .72rem; }
.ledger-card { border: 1px solid rgba(250,204,21,.16); border-radius: 14px; padding: .62rem .68rem; background: rgba(0,0,0,.20); }
.ledger-card strong { display: block; color: #fff7ed; font-size: 1rem; margin-bottom: .28rem; }
.ledger-card span { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; margin-top: .2rem; }
.ledger-card b { color: #fde68a; }
.ledger-warning { margin-top: .72rem !important; color: #fde68a !important; font-weight: 800; }
body.native-heritage-mode .hero-board,
body.native-heritage-mode .playlist-punch,
body.native-heritage-mode .peoples-ledger,
body.native-heritage-mode .related-head p,
body.native-heritage-mode footer { display: none; }
body.native-heritage-mode .language-focus { border-color: rgba(250,204,21,.42); }
body.native-heritage-mode .top:first-of-type { display: none; }
body[data-heritage="Umbundu"] { --heritage-bg: radial-gradient(circle at 18% 14%, rgba(250,204,21,.22), transparent 30%), radial-gradient(circle at 78% 20%, rgba(34,197,94,.16), transparent 32%), linear-gradient(135deg, #170f09, #07100d 66%); }
body[data-heritage="Kimbundu"] { --heritage-bg: radial-gradient(ellipse at 28% 12%, rgba(56,189,248,.22), transparent 34%), linear-gradient(120deg, rgba(249,115,22,.14), transparent 42%), linear-gradient(180deg, #081018, #12090d 72%); }
body[data-heritage="Kikongo"] { --heritage-bg: radial-gradient(circle at 50% 32%, rgba(167,139,250,.24), transparent 28%), linear-gradient(90deg, rgba(255,247,237,.08) 1px, transparent 1px), linear-gradient(0deg, rgba(255,247,237,.07) 1px, transparent 1px), linear-gradient(180deg, #0e0b18, #07080b 70%); background-size: auto, 88px 88px, 88px 88px, auto; }
body[data-heritage="Chokwe"] { --heritage-bg: radial-gradient(circle at 12% 18%, rgba(249,115,22,.22), transparent 32%), repeating-linear-gradient(135deg, rgba(250,204,21,.12) 0 2px, transparent 2px 18px), linear-gradient(180deg, #160b08, #08080b 70%); }
body[data-heritage="Kwanyama"] { --heritage-bg: radial-gradient(circle at 80% 18%, rgba(250,204,21,.2), transparent 30%), linear-gradient(135deg, rgba(251,146,60,.14), transparent 44%), linear-gradient(180deg, #171109, #08080b 72%); }
body[data-heritage="Ngangela"] { --heritage-bg: radial-gradient(circle at 20% 70%, rgba(34,197,94,.17), transparent 36%), repeating-linear-gradient(90deg, rgba(56,189,248,.12) 0 1px, transparent 1px 34px), linear-gradient(180deg, #07110e, #09080b 72%); }
.channel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .68rem; }
.channel { min-height: 136px; display: grid; align-content: end; gap: .35rem; border: 1px solid var(--line); border-radius: 18px; padding: .85rem; background: radial-gradient(circle at 20% 0%, rgba(249,115,22,.18), transparent 44%), rgba(0,0,0,.24); text-decoration: none; }
.channel b { font-size: 1rem; }
.channel small { color: var(--muted); line-height: 1.35; }
.youtube-lead { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr); gap: .85rem; align-items: stretch; margin-bottom: .85rem; }
.intro-trailer { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .55fr); gap: .85rem; align-items: center; margin-bottom: .85rem; border: 1px solid rgba(249,115,22,.25); border-radius: 22px; padding: .72rem; background: radial-gradient(circle at 8% 0%, rgba(249,115,22,.22), transparent 46%), rgba(0,0,0,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.intro-trailer video { width: 100%; border: 0; border-radius: 16px; background: #000; box-shadow: 0 18px 50px rgba(0,0,0,.32); }
.render-placeholder { min-height: 260px; border: 1px dashed rgba(250,204,21,.36); border-radius: 16px; display: grid; place-content: center; text-align: center; gap: .35rem; background: radial-gradient(circle at 50% 38%, rgba(250,204,21,.16), transparent 34%), linear-gradient(135deg, rgba(249,115,22,.14), rgba(0,0,0,.22)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.render-placeholder span { font-size: clamp(4rem, 12vw, 9rem); font-weight: 950; line-height: .82; letter-spacing: -.08em; color: #fff7ed; }
.render-placeholder small { color: #fde68a; text-transform: uppercase; letter-spacing: .14em; font: 900 11px/1 ui-monospace, "JetBrains Mono", monospace; }
.intro-trailer strong { display: block; margin-top: .55rem; font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: .92; letter-spacing: -.055em; }
.intro-trailer p { margin: .5rem 0 0; color: var(--muted); line-height: 1.45; }
.video-hero, .video-card { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: rgba(0,0,0,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-copy { padding: .86rem .95rem; }
.video-copy strong { display: block; color: var(--text); line-height: 1.22; }
.video-copy span { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; margin-top: .24rem; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: .75rem; }
.video-card { border-radius: 16px; }
.related-youtube { margin-top: 1rem; border: 1px solid rgba(250,204,21,.18); border-radius: 22px; padding: .9rem; background: radial-gradient(circle at 0 0, rgba(250,204,21,.12), transparent 38%), rgba(0,0,0,.18); }
.related-head { display: grid; gap: .26rem; margin-bottom: .8rem; }
.related-head h2 { margin: 0; font-size: clamp(1.25rem, 2.5vw, 2rem); letter-spacing: -.035em; }
.related-head p { margin: 0; color: var(--muted); line-height: 1.45; max-width: 72ch; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .72rem; }
.related-card { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; background: rgba(0,0,0,.26); }
.related-card .video-frame { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.related-card img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .88; transition: transform .28s ease, opacity .28s ease; }
.related-card:hover img { transform: scale(1.035); opacity: 1; }
.play-chip { position: absolute; right: .55rem; bottom: .55rem; border-radius: 999px; padding: .32rem .52rem; background: rgba(0,0,0,.72); color: #fff7ed; font: 900 11px/1 ui-monospace, "JetBrains Mono", monospace; letter-spacing: .04em; }
.playlist-punch { display: grid; gap: .62rem; }
.punch-card { border: 1px solid rgba(249,115,22,.22); border-radius: 18px; padding: .9rem; background: radial-gradient(circle at 0 0, rgba(249,115,22,.2), transparent 48%), rgba(0,0,0,.24); }
.punch-card b { display: block; color: var(--text); margin-bottom: .24rem; }
.punch-card span { color: var(--muted); line-height: 1.45; font-size: 13px; }
.note { border-left: 3px solid var(--warn); padding: .72rem .86rem; background: rgba(250,204,21,.08); color: #fde68a; border-radius: 12px; }
footer { color: var(--dim); font-size: 12px; margin-top: 1rem; }
@media (max-width: 820px) { .hero, .youtube-lead, .intro-trailer { grid-template-columns: 1fr; } .hero-board { grid-template-columns: 1fr 1fr; } h1 { max-width: 9ch; } }

.language-switcher { display: flex; align-items: center; gap: .3rem; overflow: visible; max-width: min(62vw, 720px); padding: .08rem; scrollbar-width: none; }
.language-switcher::-webkit-scrollbar { display: none; }
.lang-chip { flex: 0 0 auto; min-height: 34px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; padding: .38rem .56rem; background: rgba(255,255,255,.045); color: var(--muted); font: 900 11px/1 ui-monospace, "JetBrains Mono", monospace; letter-spacing: .04em; cursor: pointer; }
.lang-chip.active { color: #fff7ed; border-color: rgba(249,115,22,.72); background: linear-gradient(135deg, rgba(249,115,22,.28), rgba(251,113,133,.15)); box-shadow: 0 0 0 1px rgba(249,115,22,.12), 0 10px 28px rgba(249,115,22,.12); }
.lang-chip.heritage { display: inline-flex; align-items: center; gap: .32rem; color: #fff7ed; border-color: rgba(250,204,21,.34); background: linear-gradient(135deg, rgba(250,204,21,.16), rgba(249,115,22,.12)); }
.lang-chip.heritage.selected { border-color: rgba(250,204,21,.86); box-shadow: 0 0 0 1px rgba(250,204,21,.18), 0 10px 28px rgba(250,204,21,.12); }
.more-languages { position: relative; flex: 0 0 auto; }
.more-toggle { border-color: rgba(167,139,250,.38); }
.more-language-menu { position: absolute; top: calc(100% + .45rem); right: 0; z-index: 20; min-width: 255px; display: grid; grid-template-columns: repeat(3, min-content); gap: .38rem; padding: .68rem; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(9,8,11,.96); box-shadow: 0 22px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(18px); }
.more-language-menu[hidden] { display: none; }
.more-language-menu p { grid-column: 1 / -1; margin: 0 0 .18rem; color: var(--muted); font-size: 11px; line-height: 1.35; }
@media (max-width: 760px) { header { flex-wrap: wrap; } .brand { width: 100%; } .spacer { display: none; } .language-switcher { order: 2; width: 100%; max-width: 100%; overflow-x: auto; overflow-y: visible; } .more-language-menu { left: auto; right: 0; } .top { order: 3; } }