/* site.css — the public careers site. Carbon Gradient, but warmer and roomier
   than the back-office apps: this page is the first thing an applicant meets. */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(16px, 4vw, 40px); gap: 16px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
  background: rgba(6, 5, 9, .82); backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; color: var(--text); }
.brand .falogo { width: 40px; height: 40px; object-fit: contain; animation: faGlow 2.8s ease-in-out infinite; }
.brand .wm { display: inline-flex; flex-direction: column; line-height: 1.05; font-size: 16px; }
.brand .wm small { font-size: 10.5px; font-weight: 600; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
.ref-link { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.ref-link:hover { color: var(--accent); }

main { max-width: 1040px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 40px) 80px; }

/* --- hero ---------------------------------------------------------------- */
.hero { position: relative; margin-bottom: 44px; animation: slideup .5s ease both; }
.hero::before {
  content: ''; position: absolute; top: -140px; left: -120px; width: 380px; height: 380px;
  border-radius: 50%; background: conic-gradient(from 200deg, var(--g1), var(--g2), var(--g3), transparent 70%);
  filter: blur(90px); opacity: .28; pointer-events: none; z-index: -1;
}
.hero h1 { font-size: clamp(32px, 6vw, 52px); line-height: 1.05; margin: 0 0 12px; letter-spacing: -.02em; }
.hero .lede { color: var(--muted); font-size: clamp(15px, 2vw, 18px); max-width: 60ch; margin: 0; }

/* --- filters ------------------------------------------------------------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 28px 0 22px; }
.chip {
  padding: 8px 15px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line);
  color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: transform .12s ease, background .2s ease, color .2s ease;
}
.chip:hover { color: var(--text); background: var(--panel2); }
.chip:active { transform: scale(.96); }
.chip.on { background: var(--grad); color: #fff; border-color: transparent; }

/* --- vacancy cards ------------------------------------------------------- */
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.vcard {
  position: relative; display: block; padding: 20px 22px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--bg2));
  border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--text);
  overflow: hidden; animation: pop .32s ease both;
  transition: transform .16s ease, border-color .2s ease, box-shadow .2s ease;
}
.vcard::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--grad);
  opacity: 0; transition: opacity .2s ease;
}
.vcard:hover { transform: translateY(-3px); border-color: #3a3050; box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.vcard:hover::after { opacity: 1; }
.vcard .role { font-size: 18px; font-weight: 800; margin: 0 0 4px; }
.vcard .where { color: var(--accent2); font-size: 13px; font-weight: 600; }
.vcard .hook { color: var(--muted); font-size: 13.5px; margin: 10px 0 14px; }
.vcard .meta { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--panel2); color: var(--muted); border: 1px solid var(--line);
}
.pill.type { background: rgba(192, 132, 252, .14); color: var(--accent2); border-color: transparent; }
.pill.closing { background: rgba(251, 191, 36, .15); color: var(--amber); border-color: transparent; }
.pill.general { background: var(--grad); color: #fff; border-color: transparent; }

/* --- empty state --------------------------------------------------------- */
.empty { text-align: center; padding: 60px 20px; animation: pop .35s ease both; }
.empty .puff { font-size: 46px; opacity: .5; }
.empty h2 { margin: 14px 0 6px; font-size: 20px; }
.empty p { color: var(--muted); margin: 0 auto; max-width: 46ch; }

.foot {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  max-width: 1040px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 40px) 40px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- vacancy page -------------------------------------------------------- */
.vac { max-width: 720px; animation: slideup .4s ease both; }
.back { display: inline-block; color: var(--muted); font-size: 13.5px; font-weight: 600; margin-bottom: 18px; }
.back:hover { color: var(--accent); }
.vhead h1 { font-size: clamp(28px, 5vw, 42px); line-height: 1.08; margin: 0 0 8px; letter-spacing: -.02em; }
.where.big { font-size: 16px; margin-bottom: 14px; }
.vac .lede { font-size: 17px; color: var(--text); margin: 22px 0 8px; }
.desc { color: #d9d3e8; font-size: 15.5px; line-height: 1.65; }
.desc p { margin: 14px 0; }
.desc h3, .prose h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 26px 0 6px; }
.desc ul, .prose ul { padding-left: 22px; margin: 10px 0; }
.desc li { margin: 5px 0; }
.prose p { color: #d9d3e8; line-height: 1.65; }
.applybar {
  margin-top: 32px; padding: 22px; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--bg2)); display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.btn { display: inline-block; padding: 11px 20px; border-radius: 12px; font-weight: 700; color: var(--text); background: var(--panel2); }
.btn.primary { background: var(--grad); color: #fff; }
.btn.primary:hover { box-shadow: 0 8px 26px rgba(147, 51, 234, .5); }
.btn.big { font-size: 17px; padding: 14px 28px; }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.soon { color: var(--muted); font-size: 14px; }
.small { font-size: 12.5px; }

/* --- the application flow ------------------------------------------------ */
.flow { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; min-height: 60vh; animation: viewin .32s ease both; }
@keyframes viewin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.flow-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.flow-role { font-weight: 700; color: var(--accent2); }
.flow-sec { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.flow-title { font-size: clamp(30px, 6vw, 44px); line-height: 1.05; margin: 0; letter-spacing: -.02em; }
.flow .lede { font-size: 17px; color: #d9d3e8; margin: 0; }
.flow .qz-label { font-size: clamp(22px, 4vw, 28px); }
.flow-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.flow-back { background: transparent; color: var(--muted); padding: 8px 4px; font-weight: 600; }
.flow-back:hover { color: var(--text); background: transparent; }
.flow-hint { color: var(--muted); font-size: 12.5px; margin-left: auto; }
button.big { font-size: 17px; padding: 14px 28px; border-radius: 13px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.shake { animation: shake .4s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* micro-reaction: a wisp of smoke curling off the answered card */
.qz { position: relative; }
.puffx { position: absolute; right: -6px; top: -10px; width: 18px; height: 18px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(224,179,255,.9), rgba(147,51,234,.35) 60%, transparent 70%); filter: blur(3px);
  animation: puff .85s ease-out forwards; }
@keyframes puff { 0% { opacity: .9; transform: translate(0,0) scale(.6); } 100% { opacity: 0; transform: translate(14px,-46px) scale(2.4) rotate(40deg); } }

/* review */
.review { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.rev { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: baseline; padding: 12px 16px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14.5px; }
.rev:last-child { border-bottom: 0; }
.rev:hover { background: var(--panel2); }
.rev-q { color: var(--muted); }
.rev-a { color: var(--text); font-weight: 600; word-break: break-word; }
.rev-edit { color: var(--accent); font-size: 12.5px; font-weight: 600; }

/* done */
.done { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.done-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 30px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(147,51,234,.45); animation: pop .4s cubic-bezier(.2,.9,.3,1.4) both; }
.refcard { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--bg2)); position: relative; overflow: hidden; }
.refcard::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--grad); }
.refcard.wide { width: 100%; }
.ref-l { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ref-n { font-family: var(--mono); font-size: 34px; font-weight: 800; letter-spacing: .04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ref-n.small { font-family: inherit; font-size: 24px; letter-spacing: 0; }
.ref-h { font-size: 13px; color: var(--muted); }
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; background: hsl(var(--h) 85% 62%); animation: fall linear forwards; opacity: .95; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: .6; } }

/* reference lookup */
.reflookup { display: flex; flex-direction: column; gap: 10px; max-width: 480px; margin-top: 18px; }
.reflookup input { font-size: 17px; padding: 13px 15px; border-radius: 12px; }
.refresult { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mono { font-family: var(--mono); }

/* --- store map ------------------------------------------------------------ */
.regions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 22px 0 -4px; max-width: 760px; }
.regionbox { background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px 6px; animation: pop .4s ease both; }
.regionname { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 2px; }
.region { width: 100%; height: auto; overflow: visible; display: block; }
.region .grid { stroke: var(--line); stroke-width: .6; stroke-dasharray: 2 4; }
.region .store { cursor: pointer; }
.region .halo { fill: transparent; transition: fill .2s ease; }
.region .dot { fill: var(--muted); transition: fill .2s ease; }
.region .store.has .dot { fill: var(--accent); }
.region .store.has .halo { fill: rgba(192, 132, 252, .12); animation: halo 2.4s ease-in-out infinite; }
.region .store.on .dot { fill: var(--g3); }
.region .store.on .halo { fill: rgba(244, 63, 127, .22); }
.region .store:hover .halo, .region .store:focus .halo { fill: rgba(192, 132, 252, .28); outline: none; }
.region .lbl { font-size: 10.5px; fill: var(--muted); font-weight: 700; pointer-events: none; }
.region .store.on .lbl, .region .store:hover .lbl, .region .store.has .lbl { fill: var(--text); }
.region .cnt { font-size: 9px; fill: var(--accent2); font-weight: 800; }
@keyframes halo { 0%, 100% { r: 11; } 50% { r: 14; } }

/* --- archetype result card ------------------------------------------------ */
.arch { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 18px; border-radius: 18px; width: min(420px, 100%);
  background: linear-gradient(135deg, #17102a, #0e0c14 60%); border: 1px solid transparent;
  background-clip: padding-box; box-shadow: 0 16px 48px rgba(0,0,0,.55); overflow: hidden; animation: pop .5s cubic-bezier(.2,.9,.3,1.2) .35s both; }
.arch::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.arch::after { content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(from 200deg, var(--g1), var(--g2), var(--g3), transparent 70%); filter: blur(50px); opacity: .35; pointer-events: none; }
.arch-l { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.arch-n { font-size: clamp(28px, 6vw, 36px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.arch-t { font-size: 15px; color: #d9d3e8; line-height: 1.45; }
.arch-b { margin-top: 10px; font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }

/* --- easter egg ----------------------------------------------------------- */
.bigpuff { position: fixed; inset: 0; pointer-events: none; z-index: 90; }
.bigpuff i { position: absolute; top: 60px; width: 60px; height: 60px; border-radius: 50%; filter: blur(14px);
  background: radial-gradient(circle, rgba(224,179,255,.85), rgba(147,51,234,.4) 55%, transparent 70%); animation: bigpuff 2.6s ease-out forwards; }
@keyframes bigpuff { 0% { opacity: .9; transform: translate(0, 0) scale(.4); } 100% { opacity: 0; transform: translate(var(--dx), -320px) scale(3.2); } }
.eggnote { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); padding: 12px 18px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); font-weight: 600; z-index: 91; animation: pop .3s ease both; }