/* ============================================================
   Lunchbox HR — scroll-driven 3D product site
   Visual system mirrors the real product:
   light, airy, violet primary, soft shadows, friendly geometric type
   ============================================================ */

:root {
  /* surfaces */
  --bg:        #f4f4f8;          /* page / board canvas */
  --bg-soft:   #fafafc;
  --surface:   #ffffff;
  --surface-2: #f6f6fa;
  --line:      rgba(22, 22, 42, 0.08);
  --line-2:    rgba(22, 22, 42, 0.05);

  /* ink */
  --ink:       #16161d;
  --ink-2:     #4a4a58;
  --ink-3:     #8a8a99;
  --ink-4:     #b6b6c2;

  /* brand */
  --violet:    #5b3df5;
  --violet-d:  #4a2fe0;
  --violet-50: #f1edff;
  --violet-100:#e4ddff;

  /* status */
  --applied:   #585866;
  --qualified: #2f6df0;
  --interview: #8b5cf6;
  --hired:     #18a565;
  --rejected:  #ec4646;

  --green-bg:  #e7f6ee;
  --green-fg:  #18a565;
  --red-bg:    #fdeaea;
  --red-fg:    #d23b3b;

  /* shadows */
  --sh-card:   0 1px 2px rgba(22,22,42,.05), 0 4px 14px rgba(22,22,42,.05);
  --sh-pop:    0 10px 30px rgba(22,22,42,.10), 0 2px 6px rgba(22,22,42,.06);
  --sh-board:  0 40px 90px rgba(40,30,90,.16), 0 12px 30px rgba(40,30,90,.10);
  --sh-modal:  0 50px 120px rgba(30,20,70,.30), 0 12px 40px rgba(30,20,70,.18);

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 24px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; }

body {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   TOP NAV  (fixed, real-site chrome)
   ============================================================ */
.nav {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 28px); z-index: 200;
  display: flex; align-items: center; justify-content: space-between; gap: clamp(28px, 5vw, 72px);
  padding: 11px 16px 11px 18px;
  border-radius: 18px;
  isolation: isolate; overflow: hidden;
  background: transparent;
  /* Liquid Glass chain (Chromium-only url() refraction; blur is the fallback) */
  backdrop-filter: blur(2.5px) url(#glassNav);
  -webkit-backdrop-filter: blur(2.5px);
  box-shadow:
    0 14px 34px rgba(40,30,90,.14),
    0 3px 10px rgba(40,30,90,.07);
  transition: box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}
/* even glass-edge rim (symmetric — no corner notch) */
.nav::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.28),
    inset 0 0 7px 1px rgba(255,255,255,.26);
}
.nav > * { position: relative; z-index: 1; }
.nav.scrolled {
  backdrop-filter: blur(4px) url(#glassNav);
  -webkit-backdrop-filter: blur(4px);
  box-shadow:
    0 18px 44px rgba(40,30,90,.18),
    0 4px 12px rgba(40,30,90,.09);
}
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.brand-logo { height: 36px; width: auto; display: block; }
.brand-mark-img { height: 34px; width: auto; display: block; flex: none; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(150deg, #6f50ff, var(--violet));
  position: relative; box-shadow: 0 4px 12px rgba(91,61,245,.35);
  flex: none;
}
.brand-mark::before {
  content: ""; position: absolute; left: 7px; right: 7px; top: 6px; height: 5px;
  border-radius: 3px 3px 0 0; background: rgba(255,255,255,.92);
}
.brand-mark::after {
  content: ""; position: absolute; left: 11px; right: 11px; top: 13px; bottom: 7px;
  border-radius: 2px; background: rgba(255,255,255,.42);
}
.brand-name { font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.brand-name b { color: var(--violet); }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  font-size: 14.5px; font-weight: 600; color: var(--ink-2); text-decoration: none;
  transition: color .2s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--violet); }
.nav-cta { display: flex; align-items: center; gap: 8px; }
.btn {
  font-family: inherit; font-weight: 700; font-size: 14.5px; border: none;
  border-radius: 10px; cursor: pointer; padding: 10px 18px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .15s var(--ease), box-shadow .2s, background .2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--violet); color: #fff; box-shadow: 0 6px 16px rgba(91,61,245,.32); }
.btn-primary:hover { background: var(--violet-d); box-shadow: 0 8px 22px rgba(91,61,245,.4); }
.btn-ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-text { background: transparent; color: var(--ink-2); padding: 10px 6px; }
.btn-text:hover { color: var(--ink); }
.btn-lg { padding: 14px 26px; font-size: 16px; border-radius: 12px; }

@media (max-width: 880px) { .nav-links { display: none; } }

/* ============================================================
   SCROLL TRACK + STICKY STAGE
   ============================================================ */
.scroll-track { position: relative; height: 820vh; }
.stage {
  position: sticky; top: 0; height: 100vh; width: 100%;
  overflow: hidden;
  perspective: 1600px;
  perspective-origin: 58% 46%;
  background:
    radial-gradient(120% 90% at 72% 18%, #ffffff 0%, #f4f3fb 46%, #eef0f8 100%);
}
.bg-orb {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5;
  pointer-events: none;
}
.bg-orb.a { width: 620px; height: 620px; left: 50%; top: -10%;
  background: radial-gradient(circle, rgba(124,92,255,.30), transparent 68%); }
.bg-orb.b { width: 520px; height: 520px; right: -8%; bottom: -12%;
  background: radial-gradient(circle, rgba(47,109,240,.18), transparent 68%); }
/* extra orbs so the LEFT-side feature/beat panels have the same colorful
   backdrop to refract as the CTA (otherwise they sit over flat gradient and
   the glass looks washed-out) */
.bg-orb.c { width: 660px; height: 660px; left: -13%; top: 2%;
  background: radial-gradient(circle, rgba(124,92,255,.26), transparent 68%); }
.bg-orb.d { width: 540px; height: 540px; left: -9%; bottom: -14%;
  background: radial-gradient(circle, rgba(47,109,240,.18), transparent 68%); }
.bg-orb.e { width: 560px; height: 560px; right: -12%; top: 24%;
  background: radial-gradient(circle, rgba(124,92,255,.22), transparent 68%); }

/* backdrop mural: subtle HR / recruitment iconography under the glass */
.mural {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  color: #6f6f86; opacity: .15;
}
.mural svg { width: 100%; height: 100%; display: block; }

/* ============================================================
   PIPELINE COLUMNS (flat) + FEATURE SECTION
   ============================================================ */
.pipeline {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start; justify-content: center;
  gap: 20px; padding-top: 0;
  transform-origin: top center;
  will-change: transform, opacity;
  pointer-events: none;
}
.pcol {
  flex: none; width: 300px; height: 700px;
  background: transparent;
  /* liquid glass — magnifying lens + chromatic aberration on the backdrop.
     The candidate cards are children painted ON TOP, so they stay opaque. */
  backdrop-filter: blur(1.5px) url(#glassChroma);
  -webkit-backdrop-filter: blur(1.5px);
  border: 1px solid rgba(120,110,160,.16);
  border-radius: 14px 14px 0 0;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.30),
    inset 0 0 9px 1px rgba(255,255,255,.22);
  display: flex; flex-direction: column;
  overflow: hidden;
  will-change: transform, opacity;
}
.pcol-head { display: flex; align-items: center; gap: 9px; padding: 15px 16px 12px; }
.pcol-head .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pcol-head .nm { font-size: 14px; font-weight: 700; letter-spacing: normal; color: #1b1830; }
.pcol-head .ct {
  margin-left: 2px; font-size: 12px; font-weight: 700; color: #6d6886;
  background: #fff; border: none;
  min-width: auto; height: auto; border-radius: 20px; padding: 1px 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pcol-body { display: flex; flex-direction: column; gap: 10px; padding: 2px 12px 16px; }
.pcard {
  background: #fff; border: 1px solid #e4e1ee;
  border-radius: 12px; padding: 15px 15px 13px;
  box-shadow: 0 1px 2px rgba(27,24,48,.05);
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.pcard.clicking {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(91,61,245,.22), 0 14px 30px rgba(91,61,245,.22);
}
.pcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pcard-id { min-width: 0; }
.pcard-name { font-size: 15px; font-weight: 600; line-height: 1.25; color: #1b1830; }
.pcard-applied { font-size: 12.5px; color: #6d6886; font-weight: 500; margin-top: 3px; }
.pcard-ring { position: relative; width: 38px; height: 38px; flex: none; }
.pcard-ring svg { transform: rotate(-90deg); display: block; }
.pcard-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #1b1830; }
.pcard-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 13px; padding-top: 11px; border-top: 1px solid #e4e1ee;
}
.pcard-meta { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #6d6886; }
.pcard-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pcard-arrow { color: #6a32c9; font-size: 14px; font-weight: 700; }
.pcard-cm { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #6d6886; font-weight: 500; }

/* feature copy on the left for the pipeline section */
.feature-text {
  position: absolute; top: 50%; left: clamp(28px, 6vw, 112px);
  width: clamp(300px, 32vw, 460px);
  padding: 32px 34px;
  border-radius: 30px;
  transform: translateY(-50%);
  opacity: 0; will-change: opacity, transform;
  pointer-events: none;
}
.feature-text .eyebrow {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--violet); margin-bottom: 18px;
}
.feature-text .eyebrow::before { content:""; width: 26px; height: 2px; background: var(--violet); border-radius: 2px; }
.feature-text h2 {
  position: relative; z-index: 2;
  font-size: clamp(34px, 4vw, 56px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.02; color: var(--ink); text-wrap: balance;
}
.feature-text p {
  position: relative; z-index: 2;
  margin-top: 20px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55;
  color: var(--ink-2); font-weight: 500; max-width: 42ch; text-wrap: pretty;
}
.feature-text p + p { margin-top: 14px; }

/* small pill button (reused in profile rail) */
.mini-btn {
  font-size: 13px; font-weight: 700; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 13px; display: inline-flex; align-items: center; gap: 7px;
}
.mini-btn.violet { background: var(--violet); color: #fff; border-color: transparent; }

/* ============================================================
   PROFILE MODAL (recreated product layout)
   ============================================================ */
.profile-anchor {
  position: absolute; left: 50%; top: 50%;
  z-index: 60; will-change: transform, opacity;
}
.profile {
  position: relative;
  width: min(1080px, 88vw); height: min(680px, 80vh);
  margin-left: calc(min(1080px, 88vw) / -2);
  margin-top: calc(min(680px, 80vh) / -2);
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-modal);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.pf-head { padding: 22px 26px 0; position: relative; }
.pf-head-top { display: flex; align-items: flex-start; gap: 15px; }
.pf-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: linear-gradient(150deg, #7a5cff, var(--violet));
  color: #fff; font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.pf-name-row { display: flex; align-items: center; gap: 12px; }
.pf-name { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.stage-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
}
.stage-pill::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stage-pill.qualified { background: #e8f0fe; color: var(--qualified); }
.pf-sub { font-size: 14px; color: var(--ink-3); font-weight: 500; margin-top: 3px; }
.pf-contact { display: flex; gap: 22px; margin-top: 12px; }
.pf-contact span { font-size: 14px; color: var(--ink-2); font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.pf-close {
  position: absolute; top: 18px; right: 20px;
  width: 34px; height: 34px; border-radius: 9px; border: none; cursor: pointer;
  background: var(--surface-2); color: var(--ink-3); font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.pf-actions { display: flex; align-items: center; gap: 11px; padding: 18px 26px 0; }
.pf-actions .count { margin-left: auto; font-size: 13.5px; color: var(--ink-3); font-weight: 600; }

.pf-tabs { display: flex; gap: 28px; padding: 18px 26px 0; position: relative;
  border-bottom: 1px solid var(--line); }
.pf-tab-btn {
  font-family: inherit; background: none; border: none; cursor: pointer;
  font-size: 15px; font-weight: 700; color: var(--ink-3);
  padding: 0 2px 14px; display: inline-flex; align-items: center; gap: 8px;
  transition: color .2s;
}
.pf-tab-btn.active { color: var(--violet); }
.pf-underline {
  position: absolute; bottom: -1px; height: 2.5px; border-radius: 2px;
  background: var(--violet); transition: transform .4s var(--ease), width .4s var(--ease);
}

.pf-body { position: relative; flex: 1; overflow: hidden; }

/* ---- card→profile morph facsimile (fills the modal, scales with it) ---- */
.pf-morph {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  display: flex; flex-direction: column; padding: 46px 50px;
  background: transparent; border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(91,61,245,.4);
}
.pfm-top { display: flex; justify-content: flex-end; align-items: flex-start; gap: 24px; }
.pfm-name { font-size: 40px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.pfm-applied { font-size: 22px; color: var(--ink-3); font-weight: 500; margin-top: 12px; }
.pfm-ring { position: relative; width: 92px; height: 92px; flex: none; }
.pfm-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; color: var(--ink); }
.pfm-spacer { flex: 1; }
.pfm-div { height: 1px; background: var(--line); }
.pfm-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; }
.pfm-foot .left { display: flex; align-items: center; gap: 14px; }
.pfm-dot { width: 12px; height: 12px; border-radius: 50%; background: #2f6df0; flex: none; }
.pfm-cm { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; color: var(--ink-3); font-weight: 500; }
.pfm-arrow { font-size: 30px; color: var(--violet); font-weight: 700; }

.pf-pane {
  position: absolute; inset: 0; padding: 22px 26px;
  opacity: 0; pointer-events: none;
  will-change: opacity, transform;
}

/* --- Overview pane: 2-column grid --- */
.pf-grid { display: grid; grid-template-columns: 1.32fr 1fr; gap: 24px; height: 100%; }
.pf-col { min-height: 0; }
.section-label { font-size: 16px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 12px; }

/* AI screening card */
.ai-card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px; background: linear-gradient(180deg, #faf9ff, #fff);
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.ai-head { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.ai-chip {
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--violet); background: var(--violet-50); padding: 4px 9px; border-radius: 6px;
}
.ai-body { display: flex; gap: 20px; align-items: center; }
.gauge { position: relative; width: 112px; height: 112px; flex: none; }
.gauge svg { transform: rotate(-90deg); }
.gauge-num { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
.gauge-num b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.gauge-num small { font-size: 11px; color: var(--ink-3); font-weight: 700; margin-top: 2px; }
.bars { flex: 1; display: flex; flex-direction: column; gap: 13px; }
.bar-row { }
.bar-top { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.bar-top span:last-child { color: var(--ink-3); }
.bar-track { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #7a5cff, var(--violet)); width: 0; }
.ai-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.ai-tags .tag2 {
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line-2);
  padding: 5px 10px; border-radius: 8px;
}

/* resume preview */
.resume-card {
  margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px; background: var(--surface-2);
}
.resume-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.resume-head .fname { font-size: 13.5px; font-weight: 700; display: inline-flex; gap: 8px; align-items: center; }
.resume-lines { display: flex; flex-direction: column; gap: 8px; }
.rl { height: 9px; border-radius: 4px; background: #e7e7ef; }

/* right rail: comments / team notes */
.rail-card {
  height: 100%; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 18px; display: flex; flex-direction: column;
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.rail-head h4 { font-size: 15px; font-weight: 800; }
.rail-sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-bottom: 14px; }
.comments { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.comment { display: flex; gap: 11px; opacity: 0; transform: translateY(8px); }
.comment .av {
  width: 30px; height: 30px; border-radius: 50%; flex: none; color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.comment-b { flex: 1; }
.comment-top { display: flex; align-items: baseline; gap: 8px; }
.comment-top b { font-size: 13px; font-weight: 700; }
.comment-top time { font-size: 11.5px; color: var(--ink-4); font-weight: 600; }
.comment-text { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 3px; }
.comment-text .men { color: var(--violet); font-weight: 700; }
.react { display: inline-flex; gap: 5px; margin-top: 7px; }
.react span {
  font-size: 11.5px; font-weight: 700; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line-2);
  padding: 2px 8px; border-radius: 999px;
}
.note-box {
  margin-top: 14px; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; font-size: 13px; color: var(--ink-4);
}
.note-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.note-foot small { font-size: 12px; color: var(--ink-4); font-weight: 600; }

/* --- Messages pane --- */
.msg-wrap { display: flex; flex-direction: column; height: 100%; max-width: 720px; margin: 0 auto; }
.msg-subject { font-size: 14px; color: var(--ink-3); font-weight: 600; padding-bottom: 14px;
  border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.msg-subject b { color: var(--ink); }
.thread { flex: 1; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.bubble { max-width: 78%; opacity: 0; transform: translateY(10px); }
.bubble .meta { font-size: 11.5px; font-weight: 700; color: var(--ink-3); margin-bottom: 5px; padding: 0 4px; }
.bubble .body { font-size: 13.5px; line-height: 1.55; padding: 13px 16px; border-radius: 16px; }
.bubble.them { align-self: flex-start; }
.bubble.them .body { background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 5px; }
.bubble.me { align-self: flex-end; text-align: right; }
.bubble.me .body { background: var(--violet); color: #fff; border-bottom-right-radius: 5px; text-align: left; }
.compose {
  margin-top: 18px; display: flex; gap: 10px; align-items: center;
  border: 1px solid var(--line); border-radius: 14px; padding: 8px 8px 8px 16px;
}
.compose .ph { flex: 1; font-size: 13.5px; color: var(--ink-4); }

/* --- Schedule pane --- */
.sch-wrap { max-width: 780px; margin: 0 auto; }
.sch-head { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.sch-sub { font-size: 13px; color: var(--ink-3); margin-bottom: 20px; }
.week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.day { }
.day-name { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink-3); margin-bottom: 10px; }
.day-num { font-weight: 800; color: var(--ink); display: block; font-size: 15px; }
.slot {
  font-size: 12.5px; font-weight: 700; text-align: center; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 0; margin-bottom: 8px;
  transition: all .25s var(--ease);
}
.slot.dim { color: var(--ink-4); }
.slot.chosen {
  background: var(--violet); color: #fff; border-color: transparent;
  box-shadow: 0 8px 18px rgba(91,61,245,.32); transform: scale(1.04);
}
.sch-confirm {
  margin-top: 22px; border: 1px solid #d7ecdf; background: var(--green-bg);
  border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; gap: 14px;
  opacity: 0; transform: translateY(10px);
}
.sch-confirm .tick {
  width: 32px; height: 32px; border-radius: 50%; background: var(--green-fg); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; flex: none;
}
.sch-confirm b { font-size: 14px; color: #11603c; }
.sch-confirm p { font-size: 12.5px; color: #2f7d57; margin-top: 2px; }
.panelists { display: flex; margin-top: 18px; align-items: center; gap: 10px; }
.panelists .stack { display: flex; }
.panelists .stack .av {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px;
  color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.panelists .stack .av:first-child { margin-left: 0; }
.panelists span { font-size: 13px; color: var(--ink-3); font-weight: 600; }

/* ============================================================
   NARRATIVE SIDE-TEXT
   ============================================================ */
.narrative {
  position: absolute; left: clamp(24px, 5vw, 86px); top: 0; bottom: 0;
  width: clamp(300px, 33vw, 440px);
  display: flex; align-items: center; z-index: 80; pointer-events: none;
}
.beats { position: relative; width: 100%; }
.beat {
  position: absolute; left: 0; top: 50%; width: 100%;
  transform: translateY(-50%);
  padding: 30px 32px;
  border-radius: 30px;
  opacity: 0; will-change: opacity, transform;
}
.eyebrow {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--violet); margin-bottom: 16px;
}
.eyebrow::before { content:""; width: 26px; height: 2px; background: var(--violet); border-radius: 2px; }
.beat h2 {
  position: relative; z-index: 2;
  font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.04; color: var(--ink); text-wrap: balance;
}
.beat p {
  position: relative; z-index: 2;
  margin-top: 18px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55;
  color: var(--ink-2); font-weight: 500; max-width: 38ch; text-wrap: pretty;
}

/* ============================================================
   APPLE-STYLE LIQUID GLASS  (feature-text + beat panels)
   see-through, light blur, bright polished bevel rim
   ============================================================ */
.feature-text, .beat, .cta .inner {
  isolation: isolate;
  border-radius: 34px;
  background: transparent;
  /* Liquid Glass chain: blur + SVG displacement refraction.
     The #glassEdge map is neutral in the center and ramps at the edges, so the
     backdrop only bends near the rim (Chromium-only; blur is the fallback). */
  backdrop-filter: blur(2px) url(#glassEdge);
  -webkit-backdrop-filter: blur(2px);
  box-shadow:
    0 22px 55px rgba(40,30,90,.18),
    0 4px 14px rgba(40,30,90,.09);
  overflow: hidden;
}
/* even glass-edge rim (symmetric — no corner notch) */
.feature-text::before, .beat::before, .cta .inner::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.26),
    inset 0 0 8px 1px rgba(255,255,255,.26);
}
@media (prefers-reduced-motion: no-preference) {
  .feature-text, .beat { transition: box-shadow .5s var(--ease); }
}

/* ============================================================
   HERO + CTA OVERLAYS
   ============================================================ */
.overlay {
  position: absolute; inset: 0; z-index: 120;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px; will-change: opacity, transform;
}
.hero { pointer-events: none; justify-content: flex-start; padding-top: clamp(82px, 11vh, 144px); }
.hero .pill-top {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--surface); box-shadow: var(--sh-card);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 15px 7px 9px; font-size: 13.5px; font-weight: 700; color: var(--ink-2);
  margin-bottom: 40px;
}
.hero .pill-top .badge { background: var(--violet-50); color: var(--violet); font-weight: 800;
  padding: 3px 9px; border-radius: 999px; font-size: 12px; }
.hero h1 {
  font-size: clamp(40px, 6.4vw, 88px); font-weight: 800; letter-spacing: -.04em;
  line-height: 1.04; color: var(--ink); text-wrap: balance; max-width: 14ch;
}
.hero h1 em { font-style: normal; color: var(--violet); }
.hero .lede {
  margin-top: 34px; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.6;
  color: var(--ink-2); font-weight: 500; max-width: 56ch; text-wrap: pretty;
}
.hero .hero-cta { display: flex; gap: 12px; margin-top: 44px; pointer-events: auto; }

.scroll-hint {
  position: absolute; right: clamp(24px, 4vw, 54px); bottom: 34px;
  z-index: 130; display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); will-change: opacity;
}
.mouse {
  width: 24px; height: 38px; border: 2px solid var(--ink-4); border-radius: 14px; position: relative;
}
.mouse::before {
  content:""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px;
  border-radius: 2px; background: var(--ink-3); transform: translateX(-50%);
}
@media (prefers-reduced-motion: no-preference) {
  .mouse::before { animation: wheel 1.5s var(--ease) infinite; }
}
@keyframes wheel { 0%{ opacity:0; transform: translate(-50%,0);} 40%{opacity:1;} 100%{opacity:0; transform: translate(-50%,11px);} }

.cta { pointer-events: none; }
.cta .inner {
  pointer-events: auto; position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 52px clamp(40px, 6vw, 76px);
  max-width: 780px;
}
.cta .inner > * { position: relative; z-index: 2; }
.cta h2 {
  font-size: clamp(40px, 6vw, 82px); font-weight: 800; letter-spacing: -.04em;
  line-height: 1; max-width: 16ch; text-wrap: balance;
}
.cta h2 em { font-style: normal; color: var(--violet); }
.cta p { margin-top: 22px; font-size: clamp(16px,1.4vw,20px); color: var(--ink-2); font-weight: 500; }
.cta .cta-row { display: flex; gap: 13px; margin-top: 34px; }
.cta .fine { margin-top: 20px; font-size: 13.5px; color: var(--ink-3); font-weight: 600; }

/* ============================================================
   PROGRESS RAIL
   ============================================================ */
.rail {
  position: fixed; right: clamp(16px, 2.4vw, 34px); top: 50%; transform: translateY(-50%);
  z-index: 150; display: flex; flex-direction: column; gap: 14px; align-items: flex-end;
}
.rail button {
  display: flex; align-items: center; gap: 11px; background: none; border: none; cursor: pointer;
  font-family: inherit;
}
.rail .lbl {
  font-size: 12px; font-weight: 700; color: var(--ink-3); opacity: 0;
  transform: translateX(6px); transition: opacity .25s, transform .25s, color .25s;
  white-space: nowrap;
}
.rail .tick { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-4);
  transition: all .3s var(--ease); flex: none; }
.rail button:hover .lbl { opacity: 1; transform: translateX(0); }
.rail button.on .tick { background: var(--violet); transform: scale(1.5); box-shadow: 0 0 0 4px rgba(91,61,245,.15); }
.rail button.on .lbl { opacity: 1; transform: translateX(0); color: var(--violet); }

.progress-bar {
  position: fixed; left: 0; top: 0; height: 3px; z-index: 210;
  background: linear-gradient(90deg, #7a5cff, var(--violet)); width: 0;
}

/* spotlight focus states inside profile */
.profile[data-focus="ai"] .rail-card,
.profile[data-focus="ai"] .resume-card { opacity: .4; filter: saturate(.7); }
.profile[data-focus="ai"] .ai-card {
  border-color: rgba(91,61,245,.4); box-shadow: 0 0 0 4px rgba(91,61,245,.12), var(--sh-pop);
  transform: translateY(-2px);
}
.profile[data-focus="comments"] .ai-card,
.profile[data-focus="comments"] .resume-card { opacity: .4; filter: saturate(.7); }
.profile[data-focus="comments"] .rail-card {
  border-color: rgba(91,61,245,.4); box-shadow: 0 0 0 4px rgba(91,61,245,.12), var(--sh-pop);
  transform: translateY(-2px);
}

@media (max-width: 980px) {
  .board-anchor { left: 50%; }
  .narrative { left: 0; right: 0; width: auto; bottom: 9%; top: auto; align-items: flex-end;
    padding: 0 24px; }
  .narrative .beats { max-width: 560px; margin: 0 auto; }
  .beat { position: absolute; }
  .rail { display: none; }
}

/* ============================================================
   SITE FOOTER  (shared chrome)
   ============================================================ */
.site-footer {
  position: relative; z-index: 1;
  background: #14121f; color: #cfcbe0;
  padding: clamp(56px, 7vw, 84px) 24px 30px;
}
.foot-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 2fr; gap: clamp(40px, 6vw, 96px);
  padding-bottom: clamp(40px, 5vw, 60px);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.foot-brand { max-width: 340px; }
.foot-brand .foot-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.foot-brand .foot-logo img { height: 32px; width: auto; display: block; filter: brightness(0) invert(1); }
.foot-brand .foot-logo .wm { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.foot-brand p {
  margin-top: 18px; font-size: 14.5px; line-height: 1.6; font-weight: 500; color: #9d98b6;
}
.foot-social { display: flex; gap: 10px; margin-top: 22px; }
.foot-social a {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); color: #cfcbe0;
  transition: background .2s, color .2s, transform .15s var(--ease);
}
.foot-social a:hover { background: var(--violet); color: #fff; transform: translateY(-2px); }
.foot-social a svg { width: 18px; height: 18px; }

.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.foot-col h4 {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #7d7898; margin-bottom: 16px;
}
.foot-col a {
  display: block; font-size: 14.5px; font-weight: 600; color: #cfcbe0; text-decoration: none;
  padding: 6px 0; transition: color .2s;
}
.foot-col a:hover { color: #fff; }

.foot-bar {
  max-width: 1180px; margin: 26px auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.foot-bar .copy { font-size: 13.5px; font-weight: 600; color: #7d7898; }
.foot-legal { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot-legal a { font-size: 13.5px; font-weight: 600; color: #9d98b6; text-decoration: none; transition: color .2s; }
.foot-legal a:hover { color: #fff; }

@media (max-width: 760px) {
  .foot-inner { grid-template-columns: 1fr; gap: 40px; }
  .foot-cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .foot-cols { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   LEGAL / DOC PAGES  (Terms, Privacy, Cookies)
   ============================================================ */
.legal { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto;
  padding: clamp(118px, 16vh, 172px) 24px 64px; }
.legal-head { max-width: 840px; }
.legal-eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--violet);
}
.legal-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--violet); border-radius: 2px; }
.legal-head h1 {
  font-size: clamp(36px, 5vw, 60px); font-weight: 800; letter-spacing: -.035em; line-height: 1.03;
  margin-top: 16px; color: var(--ink); text-wrap: balance;
}
.legal-meta {
  margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  font-size: 13.5px; color: var(--ink-3); font-weight: 600;
}
.legal-meta .chip {
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-card);
  border-radius: 999px; padding: 6px 13px; color: var(--ink-2);
}
.legal-meta .chip b { color: var(--ink); font-weight: 700; }
.legal-intro {
  margin-top: 22px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; color: var(--ink-2);
  font-weight: 500; max-width: 72ch; text-wrap: pretty;
}

.legal-body {
  display: grid; grid-template-columns: 232px 1fr; gap: clamp(40px, 5vw, 76px);
  margin-top: clamp(46px, 6vh, 70px); align-items: start;
}
.legal-toc { position: sticky; top: 104px; }
.legal-toc h4 {
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 12px;
}
.legal-toc a {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-decoration: none;
  padding: 7px 0 7px 15px; border-left: 2px solid var(--line); line-height: 1.35;
  transition: color .2s, border-color .2s;
}
.legal-toc a:hover { color: var(--violet); border-color: var(--violet); }

.legal-content { max-width: 760px; min-width: 0; }
.legal-content section { scroll-margin-top: 100px; }
.legal-content section + section { margin-top: 44px; }
.legal-content h2 {
  font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; letter-spacing: -.02em; color: var(--ink);
  margin-bottom: 16px; display: flex; gap: 12px; align-items: baseline; text-wrap: balance;
}
.legal-content h2 .n { font-family: "JetBrains Mono", monospace; font-size: 15px; font-weight: 600; color: var(--violet); flex: none; }
.legal-content h3 { font-size: 17px; font-weight: 800; color: var(--ink); margin: 26px 0 10px; }
.legal-content p { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); font-weight: 500; margin-bottom: 14px; text-wrap: pretty; }
.legal-content ul { margin: 0 0 16px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.legal-content ul li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); font-weight: 500; text-wrap: pretty; }
.legal-content ul li::before { content: ""; position: absolute; left: 6px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
.legal-content ul li strong, .legal-content p strong { color: var(--ink); font-weight: 700; }
.legal-content a { color: var(--violet); font-weight: 700; text-decoration: none; }
.legal-content a:hover { text-decoration: underline; }
.legal-callout {
  margin: 18px 0; border: 1px solid var(--line); border-left: 3px solid var(--violet);
  border-radius: 14px; background: var(--surface); padding: 16px 18px;
  font-size: 14.5px; line-height: 1.6; color: var(--ink-2); box-shadow: var(--sh-card);
}
.legal-callout strong { color: var(--ink); }
.legal-table { width: 100%; border-collapse: collapse; margin: 16px 0 18px; font-size: 13.5px; }
.legal-table th, .legal-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-table th { font-weight: 800; color: var(--ink); background: var(--surface-2); font-size: 12px; letter-spacing: .02em; }
.legal-table tr:first-child th:first-child { border-top-left-radius: 10px; }
.legal-table tr:first-child th:last-child { border-top-right-radius: 10px; }
.legal-table td { color: var(--ink-2); font-weight: 500; line-height: 1.55; }
.legal-table td b { color: var(--ink); font-weight: 700; }

@media (max-width: 860px) {
  .legal-body { grid-template-columns: 1fr; }
  .legal-toc { display: none; }
}

/* ============================================================
   MOBILE STATIC HOME  (≤ 760px)
   A flat, stacked layout that replaces the desktop scroll
   choreography on phones — no sticky stage, no scroll engine.
   The .m-* blocks only ever render when .mobile-home is shown,
   so they never affect the desktop scene.
   ============================================================ */
.mobile-home { display: none; }

.mobile-home { width: 100%; overflow-x: hidden; }

/* hero */
.m-hero {
  padding: 122px 22px 52px;
  text-align: center;
  background: radial-gradient(125% 80% at 50% -6%, #ffffff 0%, #f4f3fb 52%, #eef0f8 100%);
}
.m-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); box-shadow: var(--sh-card);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px 6px 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  margin-bottom: 26px;
}
.m-pill .badge {
  background: var(--violet-50); color: var(--violet); font-weight: 800;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px;
}
.m-hero h1 {
  font-size: clamp(34px, 11vw, 46px); font-weight: 800; letter-spacing: -.04em;
  line-height: 1.05; color: var(--ink); text-wrap: balance;
}
.m-hero h1 em { font-style: normal; color: var(--violet); }
.m-hero .lede {
  margin: 20px auto 0; font-size: 16px; line-height: 1.6; color: var(--ink-2);
  font-weight: 500; max-width: 42ch;
}
.m-cta-row { display: flex; flex-direction: column; gap: 11px; margin-top: 30px; }
.m-cta-row .btn { width: 100%; justify-content: center; }

/* shared section scaffolding */
.m-section { padding: 50px 22px; }
.m-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--violet); margin-bottom: 14px;
}
.m-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--violet); border-radius: 2px; }
.m-section > h2 {
  font-size: clamp(24px, 7.5vw, 31px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.1; color: var(--ink); text-wrap: balance;
}
.m-section > p.sub {
  margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--ink-2); font-weight: 500;
}

/* pipeline board — horizontally scrollable columns */
.m-board {
  margin: 24px -22px 0; padding: 4px 22px 20px;
  display: flex; gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.m-board::-webkit-scrollbar { display: none; }
.m-col {
  flex: 0 0 236px; scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-card); padding: 14px;
}
.m-col-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.m-col-head .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.m-col-head .nm { font-size: 14px; font-weight: 800; color: var(--ink); }
.m-col-head .ct {
  margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-3);
  background: var(--surface-2); border-radius: 999px; padding: 2px 9px;
}
.m-pcard {
  border: 1px solid var(--line); border-radius: var(--r); padding: 11px 12px; background: var(--surface);
}
.m-pcard + .m-pcard { margin-top: 9px; }
.m-pcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.m-pcard .nm2 { font-size: 14px; font-weight: 700; color: var(--ink); }
.m-pcard .ap { font-size: 12px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }
.m-score {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; background: var(--surface-2); border: 2px solid;
}

/* feature cards */
.m-features { display: grid; gap: 14px; margin-top: 24px; }
.m-feat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-card); padding: 20px;
}
.m-feat .ic {
  width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--violet-50); color: var(--violet); margin-bottom: 14px;
}
.m-feat .ic svg { width: 22px; height: 22px; }
.m-feat .eb { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); }
.m-feat h3 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 8px 0; line-height: 1.18; }
.m-feat p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); font-weight: 500; }

/* final cta */
.m-final {
  margin: 8px 22px 56px; padding: 42px 24px; border-radius: var(--r-xl); text-align: center; color: #fff;
  background: radial-gradient(125% 100% at 50% 0%, #211d34 0%, #14121f 100%);
}
.m-final h2 { font-size: clamp(28px, 8.5vw, 36px); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; }
.m-final h2 em { font-style: normal; color: #b6a6ff; }
.m-final p { margin-top: 14px; font-size: 15px; line-height: 1.55; color: #b8b3cf; font-weight: 500; }
.m-final .m-cta-row { margin-top: 26px; }
.m-final .btn-ghost { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.m-final .btn-ghost:hover { background: rgba(255,255,255,.14); }
.m-final .fine { margin-top: 16px; font-size: 12.5px; color: #837e9e; font-weight: 600; }

@media (max-width: 760px) {
  /* take down the choreographed desktop scene + its chrome */
  .scroll-track, .scroll-hint, .progress-bar, .rail { display: none !important; }
  /* raise the static stacked layout */
  .mobile-home { display: block; }
}