/* Jobolic gold & midnight theme (mobile first).
   Night: depth. Gold: Jobolic acts (must-have, actions, key figures).
   Azure: you and your personas. Coral: deal-breakers and risks.
   Display type: Instrument Serif. Labels and actions: Plus Jakarta Sans, bold. */
:root {
  --jb-ink: #070B18;          /* page */
  --jb-read: #0B1226;         /* reading plane */
  --jb-raised: #111B36;       /* raised plane */
  --jb-line: #1C2A50;         /* hairlines */
  --jb-idle: #2A3B6B;         /* inactive */
  --jb-gold: #E0B55B;         /* action, key figures */
  --jb-gold-soft: #F5DDA3;    /* small gold text */
  --jb-gold-deep: #8C6B2A;    /* strokes, ornaments */
  --jb-text: #F3EEE2;
  --jb-body: #C9C6C0;
  --jb-muted: #9DA9CC;
  --jb-azure: #8FB2FF;
  --jb-coral: #F0857A;
  --jb-ok: #86D7A8;
  --jb-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --jb-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

html:has(> .jb-body) { background: var(--jb-ink); }
.jb-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  /* Sizes in px so the glow keeps its shape on long pages; html carries the base colour
     so this background stays on the body box instead of tiling every viewport. */
  background:
    radial-gradient(min(60vw, 520px) 194px at 12% 35px, rgba(224,181,91,.16), rgba(224,181,91,0) 72%),
    radial-gradient(120% 352px at 50% 100%, rgba(28,42,80,.5), rgba(28,42,80,0) 70%),
    var(--jb-ink);
  background-repeat: no-repeat;
  color: var(--jb-text);
  font-family: var(--jb-sans);
  -webkit-font-smoothing: antialiased;
}
[dir="rtl"] .jb-body, [dir="rtl"].jb-body { font-family: 'Cairo', var(--jb-sans); }
.jb-body ::selection { background: var(--jb-gold); color: var(--jb-read); }
:where(.jb-body) a { color: inherit; }
.jb-body :focus-visible { outline: 2px solid var(--jb-gold); outline-offset: 3px; border-radius: 6px; }

/* ---------- Header lockup ---------- */
.jb-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: 14px 6px 0 14px;
  padding-inline: 14px 6px;
}
.jb-lockup { display: flex; align-items: center; gap: 10px; height: 72px; text-decoration: none; flex-shrink: 0; }
.jb-mark { width: 48px; height: 72px; flex-shrink: 0; display: block; }
.jb-lockup-text { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
.jb-wordmark { font-family: var(--jb-serif); font-size: 34px; line-height: 1; letter-spacing: .01em; color: var(--jb-text); }
.jb-tagline { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--jb-gold-soft); }
.jb-header-actions { display: flex; align-items: center; padding-top: 14px; flex-shrink: 0; }
/* 360px phones: keep "Job engineering agentique" on one line next to the actions */
@media (max-width: 380px) {
  .jb-header { padding-inline: 12px 4px; gap: 4px; }
  .jb-lockup { gap: 8px; }
  .jb-tagline { font-size: 11.5px; letter-spacing: .01em; }
  .jb-lang-toggle { min-width: 32px; padding: 0 5px; }
  .jb-pill-link { padding: 0 10px; }
}

.jb-lang { position: relative; }
.jb-lang-toggle {
  height: 44px; min-width: 40px; padding: 0 10px; border: 0; background: transparent;
  color: var(--jb-muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.jb-lang-toggle:hover { color: var(--jb-text); }
.jb-lang-menu {
  position: absolute; top: 44px; inset-inline-end: 0; z-index: 40;
  min-width: 156px; margin: 0; padding: 6px; list-style: none;
  background: var(--jb-raised); border: 1px solid var(--jb-line); border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.7);
}
.jb-lang-menu[hidden] { display: none; }
.jb-lang-menu button {
  width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: transparent; color: var(--jb-text); font: inherit; font-size: 15px; font-weight: 600;
  text-align: start; cursor: pointer;
}
.jb-lang-menu button:hover { background: var(--jb-read); }
.jb-lang-menu button[aria-current="true"] { color: var(--jb-gold); }
.jb-lang-menu button[aria-current="true"]::after { content: "✓"; font-weight: 800; }

.jb-pill-link {
  height: 40px; padding: 0 12px; border-radius: 20px; border: 1px solid var(--jb-gold-deep);
  display: inline-flex; align-items: center; font-size: 13px; font-weight: 700;
  color: var(--jb-text); text-decoration: none; white-space: nowrap;
}
.jb-pill-link:hover { border-color: var(--jb-gold); color: var(--jb-gold-soft); }

/* ---------- Type ---------- */
.jb-display {
  margin: 0; font-family: var(--jb-serif); font-weight: 400;
  font-size: 50px; line-height: .95; letter-spacing: -.01em; color: var(--jb-text);
}
.jb-display em { font-style: italic; color: var(--jb-gold); }
[dir="rtl"] .jb-display { font-family: 'Cairo', var(--jb-sans); font-weight: 700; font-size: 40px; line-height: 1.2; letter-spacing: 0; }
[dir="rtl"] .jb-display em { font-style: normal; }
.jb-title { margin: 0; font-family: var(--jb-serif); font-weight: 400; font-size: 34px; line-height: 1.05; color: var(--jb-text); }
.jb-title em { font-style: italic; color: var(--jb-gold); }
[dir="rtl"] .jb-title { font-family: 'Cairo', var(--jb-sans); font-weight: 700; font-size: 28px; line-height: 1.3; }
.jb-lede { margin: 0; font-size: 16px; line-height: 1.5; color: var(--jb-body); }
.jb-label { font-size: 13px; font-weight: 700; color: var(--jb-muted); }
.jb-quote { font-family: var(--jb-serif); font-style: italic; color: var(--jb-gold); }
[dir="rtl"] .jb-quote { font-family: 'Cairo', var(--jb-sans); font-style: normal; font-weight: 600; }

/* ---------- Actions ---------- */
.jb-cta {
  width: 100%; height: 58px; padding: 0 22px; border-radius: 29px; border: 0;
  display: flex; align-items: center; gap: 12px;
  background: var(--jb-gold); color: var(--jb-read);
  font: inherit; font-size: 17px; font-weight: 800; text-align: start; text-decoration: none;
  box-shadow: 0 12px 32px -14px rgba(224,181,91,.7); cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.jb-cta:hover { background: #E8C372; }
.jb-cta:active { transform: scale(.985); }
.jb-cta:disabled { opacity: .7; cursor: progress; }
.jb-cta > .jb-grow { flex: 1; min-width: 0; }
.jb-cta-aside { font-family: var(--jb-serif); font-style: italic; font-size: 19px; font-weight: 400; }
.jb-cta-ghost {
  width: 100%; height: 54px; padding: 0 22px; border-radius: 27px;
  border: 1px solid var(--jb-gold-deep); background: transparent; color: var(--jb-text);
  display: flex; align-items: center; gap: 12px;
  font: inherit; font-size: 16px; font-weight: 700; text-align: start; text-decoration: none; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.jb-cta-ghost:hover { border-color: var(--jb-gold); background: rgba(224,181,91,.06); }
.jb-cta-ghost > .jb-grow { flex: 1; min-width: 0; }
.jb-cta-ghost .jb-cta-note { font-size: 13px; font-weight: 500; color: var(--jb-muted); }
.jb-quiet-link {
  min-height: 44px; padding: 0; display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--jb-muted); text-decoration: none; background: none; border: 0; font-family: inherit; cursor: pointer;
}
.jb-quiet-link strong { color: var(--jb-gold-soft); font-weight: 700; margin-inline-start: .3em; }
.jb-back {
  min-height: 44px; padding: 0; border: 0; background: none; color: var(--jb-muted);
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.jb-back:hover { color: var(--jb-text); }
[dir="rtl"] .jb-flip { transform: scaleX(-1); }

/* ---------- Example timeline (input -> personas -> must-have -> deal-breaker -> result) ---------- */
.jb-timeline { position: relative; display: flex; flex-direction: column; gap: 12px; padding-inline-start: 34px; }
.jb-timeline::before {
  content: ""; position: absolute; inset-inline-start: 9px; top: 10px; bottom: 10px; width: 1px;
  background: linear-gradient(var(--jb-azure), var(--jb-gold-deep) 45%, var(--jb-gold-deep));
}
.jb-step { position: relative; display: flex; align-items: baseline; gap: 10px; }
.jb-step > svg { position: absolute; inset-inline-start: -34px; top: -1px; }
.jb-step-stack { flex-direction: column; align-items: stretch; gap: 3px; }
.jb-step-stack > svg { top: 0; }
.jb-step-key { width: 100px; flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--jb-muted); }
.jb-step-val { font-size: 16px; font-weight: 700; line-height: 1.3; }
.jb-input-quote { font-family: var(--jb-serif); font-style: italic; font-size: 20px; line-height: 1.22; color: var(--jb-azure); }
.jb-result { font-family: var(--jb-serif); font-style: italic; font-size: 23px; line-height: 1.1; color: var(--jb-gold); }
[dir="rtl"] .jb-input-quote, [dir="rtl"] .jb-result { font-family: 'Cairo', var(--jb-sans); font-style: normal; font-weight: 600; font-size: 18px; line-height: 1.4; }
.jb-azure { color: var(--jb-azure); }
.jb-gold-soft { color: var(--jb-gold-soft); }
.jb-coral { color: var(--jb-coral); }

/* ---------- Carousel ---------- */
.jb-carousel-head { display: flex; align-items: center; justify-content: space-between; }
.jb-dots { display: flex; }
.jb-dot-btn { width: 32px; height: 44px; border: 0; background: transparent; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.jb-dot-btn > span { display: block; height: 6px; width: 6px; border-radius: 3px; background: var(--jb-idle); transition: width .3s ease, background-color .3s ease; }
.jb-dot-btn[aria-current="true"] > span { width: 18px; background: var(--jb-gold); }
.jb-slides { position: relative; }
.jb-slide { position: absolute; inset: 0; opacity: 0; transform: translateY(6px); transition: opacity .7s ease, transform .7s ease; pointer-events: none; }
.jb-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.jb-figure { margin: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.jb-figure blockquote { margin: 0; font-family: var(--jb-serif); font-style: italic; font-size: 22px; line-height: 1.3; color: var(--jb-text); }
.jb-quote-mark { font-family: var(--jb-serif); font-size: 64px; line-height: .5; color: var(--jb-gold); }
[dir="rtl"] .jb-figure blockquote { font-family: 'Cairo', var(--jb-sans); font-style: normal; font-size: 18px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .jb-slide { transition: none; } }

/* ---------- Panels & fields ---------- */
.jb-panel { background: var(--jb-read); border: 1px solid var(--jb-line); border-radius: 22px; padding: 20px; }
.jb-field-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--jb-muted); }
.jb-input {
  width: 100%; box-sizing: border-box; min-height: 50px; padding: 12px 14px;
  background: var(--jb-ink); border: 1px solid var(--jb-line); border-radius: 14px;
  color: var(--jb-text); font: inherit; font-size: 16px; outline: none;
  transition: border-color .2s ease;
}
.jb-input::placeholder { color: #66708F; }
.jb-input:focus { border-color: var(--jb-gold); }
.jb-body .jb-input:focus-visible { outline: none; }
textarea.jb-input { line-height: 1.5; resize: vertical; }
.jb-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--jb-body); cursor: pointer; }
.jb-check input { width: 18px; height: 18px; accent-color: var(--jb-gold); }
.jb-status { margin: 0; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; border: 1px solid var(--jb-line); background: var(--jb-read); color: var(--jb-body); }
.jb-status[data-tone="error"] { border-color: rgba(240,133,122,.5); background: rgba(240,133,122,.08); color: #F7B2AA; }
.jb-status[data-tone="success"] { border-color: rgba(134,215,168,.45); background: rgba(134,215,168,.08); color: var(--jb-ok); }
.jb-status[data-tone="info"] { border-color: rgba(224,181,91,.4); background: rgba(224,181,91,.07); color: var(--jb-gold-soft); }

/* ---------- Footer ---------- */
.jb-footer { padding: 28px 24px 32px; border-top: 1px solid var(--jb-line); font-size: 13px; color: var(--jb-muted); }
.jb-footer nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.jb-footer nav a { min-height: 32px; display: inline-flex; align-items: center; text-decoration: none; }
.jb-footer nav a:hover { color: var(--jb-text); }
.jb-footer p { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: #6E7798; }