:root {
  --bg: #0b0204;
  --bg-2: #140508;
  --ink: #f2e6e8;
  --ink-dim: rgba(242, 230, 232, 0.55);
  --accent: #ff6f8a;
  --pink: #ead6d9;
  --pink-ink: #1a0508;
  --line: rgba(242, 230, 232, 0.07);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 15px/1.5 Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ---------- 3D section ---------- */
#hero { position: relative; height: 100vh; min-height: 620px; overflow: hidden; background: var(--bg); }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.columns { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); pointer-events: none; padding: 0 16px; }
.columns i { border-left: 1px solid var(--line); }
.columns i:last-child { border-right: 1px solid var(--line); }

.top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start;
  padding: 22px 28px; z-index: 5; pointer-events: none; }
.top a { pointer-events: auto; text-decoration: none; }
.logo { font: 700 64px/0.8 Unbounded, sans-serif; letter-spacing: -0.04em; color: var(--pink); }
.top nav { display: flex; gap: 34px; font-size: 18px; color: var(--ink-dim); padding-top: 6px; }
.top nav a:hover { color: var(--ink); }


.hint { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 4; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); transition: opacity .6s; pointer-events: none;
  display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.hint::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 12px var(--accent); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.steps { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 5; }
.steps button { background: none; border: 1px solid transparent; color: var(--ink-dim); font: 500 13px Manrope, sans-serif;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.steps button span { opacity: .5; font-size: 11px; }
.steps button:hover { color: var(--ink); }
.steps button.on { color: var(--ink); border-color: rgba(242, 230, 232, .25); }

/* stage visibility */
body.stage-focus .steps { opacity: 0; pointer-events: none; }

/* labels of the exploded view */
#leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
#leaders line { stroke: rgba(242, 230, 232, .35); stroke-width: 1; }
#leaders circle { fill: var(--ink); }
#labels { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.label { position: absolute; transform: translateY(-50%); font: 600 11px/1.25 Manrope, sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-dim); pointer-events: auto; cursor: pointer; white-space: nowrap;
  transition: color .25s, opacity .4s; opacity: 0; }
.label.right { transform: translate(-100%, -50%); text-align: right; }
.label small { display: block; font-weight: 400; letter-spacing: .04em; text-transform: none; font-size: 12px; opacity: .7; }
body.stage-explode .label { opacity: 1; }
.label.hot { color: var(--ink); }

/* component panel */
#panel { position: absolute; top: 110px; right: 28px; bottom: 90px; width: min(420px, 34vw); z-index: 6; overflow-y: auto;
  padding: 26px 28px; background: rgba(20, 5, 8, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(242, 230, 232, .1); border-radius: 18px; transform: translateX(calc(100% + 40px));
  transition: transform .7s cubic-bezier(.2, .8, .2, 1); scrollbar-width: thin; scrollbar-color: rgba(242, 230, 232, .2) transparent; }
body.stage-focus #panel { transform: none; }
#panel .back { background: none; border: none; color: var(--ink-dim); font: 500 13px Manrope, sans-serif; cursor: pointer; padding: 0;
  margin-bottom: 22px; }
#panel .back:hover { color: var(--ink); }
#panel .group { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
#panel h2 { font: 500 30px/1.12 Unbounded, sans-serif; margin: 8px 0 10px; letter-spacing: -.01em; }
#panel h3 { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); margin: 22px 0 6px; font-weight: 600; }
#panel .lead { font-size: 17px; color: var(--ink); margin: 0 0 14px; }
#panel .hq { display: flex; align-items: center; gap: 8px; min-height: 18px; margin: -2px 0 12px; font-size: 12px;
  color: var(--ink-dim); }
#panel .hq i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s infinite; }
#panel .hq.done i { animation: none; background: #8fe3b0; box-shadow: 0 0 8px rgba(143, 227, 176, .6); }
#panel .hq:has(span:empty) { display: none; }
#panel p { color: rgba(242, 230, 232, .78); margin: 0 0 10px; }
.facts { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.facts li { border-top: 1px solid rgba(242, 230, 232, .12); padding-top: 8px; font-size: 12px; color: var(--ink-dim); }
.facts b { display: block; font: 500 20px Unbounded, sans-serif; color: var(--ink); }
.cta { display: inline-flex; gap: 12px; align-items: center; text-decoration: none; background: var(--pink); color: var(--pink-ink);
  font-weight: 600; padding: 14px 22px; border-radius: 999px; transition: transform .2s, background .2s; }
.cta:hover { transform: translateY(-2px); background: #fff; }

/* loader */
#loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  z-index: 10; background: var(--bg); transition: opacity 1s; }
#loader .bar { width: 220px; height: 1px; background: rgba(242, 230, 232, .15); }
#loader .bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .2s; }
#loader-text { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
body:not(.stage-loading) #loader { opacity: 0; pointer-events: none; }

/* ---------- vacancies ---------- */
#vacancies { background: var(--pink); color: var(--pink-ink); padding: 110px 28px 80px; min-height: 100vh; }
.vac-head { max-width: 980px; }
.eyebrow { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .6; }
#vacancies h2 { font: 500 clamp(30px, 4.4vw, 58px)/1.05 Unbounded, sans-serif; letter-spacing: -.02em; margin: 14px 0 18px; }
#vacancies p { font-size: 18px; max-width: 640px; opacity: .75; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 30px 0 34px; }
.filters button { border: 1px solid rgba(26, 5, 8, .25); background: none; color: var(--pink-ink); padding: 9px 16px; border-radius: 999px;
  font: 500 14px Manrope, sans-serif; cursor: pointer; }
.filters button.on { background: var(--pink-ink); color: var(--pink); }
.vac-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1px; background: rgba(26, 5, 8, .15);
  border: 1px solid rgba(26, 5, 8, .15); }
.vac { background: var(--pink); padding: 26px 24px 22px; min-height: 200px; display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; transition: background .25s; }
.vac:hover { background: #f4e6e8; }
.vac .team { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.vac h3 { font: 500 21px/1.2 Unbounded, sans-serif; margin: 0; flex: 1; }
.vac .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.vac .tags span { font-size: 12px; border: 1px solid rgba(26, 5, 8, .2); border-radius: 999px; padding: 3px 10px; }
.vac .go { align-self: flex-end; font-size: 22px; }
.vac.flash { animation: flash 1.2s ease; }
@keyframes flash { 0% { background: #fff; } 100% { background: var(--pink); } }
.to-top { display: inline-block; margin-top: 40px; font-weight: 600; text-decoration: none; }

@media (max-width: 900px) {
  .top nav { display: none; }
  .logo { font-size: 44px; }
  #panel { left: 12px; right: 12px; width: auto; top: auto; bottom: 12px; max-height: 52vh; padding: 20px 20px; }
  #panel h2 { font-size: 24px; }
  #panel .back { margin-bottom: 12px; }
  body.stage-focus #panel { transform: none; }
  #panel { transform: translateY(calc(100% + 40px)); }
  .hint { bottom: 80px; font-size: 11px; }
  body.stage-focus .hint { bottom: auto; top: 92px; white-space: normal; text-align: center; width: calc(100% - 32px);
    justify-content: center; line-height: 1.5; }
}
@media (max-width: 700px) {
  #labels, #leaders { display: none; }
}