/* ═══════════════════════════════════════════════════════════
   Workfied · Intelligence page
   A dark, immersive "engine room" theme — obsidian canvas, a blue
   horizon glow, glass surfaces. Same brand tokens as v4 (iris blue,
   Source Serif 4, Inter) inverted for depth. Scoped to body.intel so
   nothing else on the site is affected.
   ═══════════════════════════════════════════════════════════ */

body.intel {
  --il-void: #06060B;      /* deepest background */
  --il-bg: #08080F;        /* page background */
  --il-raise: #0E0E18;     /* raised band */
  --il-line: rgba(255, 255, 255, 0.09);
  --il-line-soft: rgba(255, 255, 255, 0.055);
  --il-tx: #ECECF4;        /* primary text */
  --il-mut: rgba(236, 236, 244, 0.58); /* muted text */
  --il-dim: rgba(236, 236, 244, 0.4);
  --il-blue: #6E74F0;      /* lifted iris for glow on dark */
  --il-blue-soft: rgba(110, 116, 240, 0.14);
  --il-glass: rgba(255, 255, 255, 0.028);
  --il-glass-2: rgba(255, 255, 255, 0.05);

  background: var(--il-bg);
  color: var(--il-tx);
}
body.intel ::selection { background: rgba(110, 116, 240, 0.32); color: #fff; }

/* ── Chrome re-skin: nav / announcement / footer for dark ──────── */
body.intel .nav {
  background: rgba(8, 8, 15, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--il-line-soft);
}
body.intel .nav.scrolled { border-bottom-color: var(--il-line); }
body.intel .nav-links a { color: var(--il-tx); }
body.intel .nav-links a:hover { color: #fff; }
body.intel .nav-links a.active { color: var(--il-blue); }
body.intel .btn-ghost { border-color: rgba(255, 255, 255, 0.28); color: #fff; }
body.intel .btn-ghost:hover { background: var(--iris); border-color: var(--iris); color: #fff; }
body.intel .nav-burger span { background: #fff; }

/* mobile menu (appended to body) → dark */
body.intel .mobile-menu { background: var(--il-raise); border-bottom-color: var(--il-line); }
body.intel .mm-top { background: var(--il-raise); border-bottom-color: var(--il-line-soft); }
body.intel .mm-close { color: #fff; }
body.intel .mm-inner a { color: var(--il-tx); border-bottom-color: var(--il-line-soft); }
body.intel .mm-inner a.active { color: var(--il-blue); }
body.intel .mm-inner a.btn { color: #fff; }

/* footer → dark */
body.intel .footer {
  background: var(--il-void);
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 15px 15px;
  border-top: 1px solid var(--il-line-soft);
}
body.intel .footer::after { background: linear-gradient(to bottom, transparent, var(--il-void) 45%); }
body.intel .footer h5 { color: var(--il-tx); }
body.intel .footer .small, body.intel .footer ul a { color: var(--il-mut); }
body.intel .footer ul a:hover { color: var(--il-blue); }
body.intel .footer-bottom { border-top-color: var(--il-line-soft); }

/* generic dark helpers */
body.intel .section.hairline-top { border-top-color: var(--il-line-soft); }
body.intel .eyebrow { color: var(--il-blue); }
body.intel .lead { color: var(--il-mut); }
body.intel .small { color: var(--il-mut); }

/* ═══════════════ HERO ═══════════════ */
.il-hero {
  position: relative;
  overflow: hidden;
  padding: 108px 0 96px;
  text-align: center;
  isolation: isolate;
}
/* the blue horizon arc — a huge soft ellipse glowing up from below */
.il-hero::before {
  content: '';
  position: absolute;
  left: 50%; bottom: -62%;
  width: 150%; height: 120%;
  transform: translateX(-50%);
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(110, 116, 240, 0.55), rgba(70, 77, 225, 0.12) 46%, transparent 68%);
  z-index: -2;
  pointer-events: none;
}
/* crisp horizon line */
.il-hero::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 8%;
  width: 132%; height: 132%;
  transform: translateX(-50%);
  border-radius: 50%;
  box-shadow: 0 0 90px 2px rgba(150, 156, 255, 0.55);
  border-top: 1px solid rgba(170, 175, 255, 0.5);
  background: transparent;
  z-index: -1;
  pointer-events: none;
}
/* faint starfield / grain via dots */
.il-hero .il-stars {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 30%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 55% at 50% 30%, #000 0%, transparent 75%);
  opacity: 0.5;
}
.il-hero .wrap { position: relative; z-index: 1; }
.il-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--il-line);
  background: var(--il-glass);
  border-radius: var(--r-btn);
  font-size: 12.5px; letter-spacing: -0.01em; color: var(--il-tx);
}
.il-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--il-blue);
  box-shadow: 0 0 0 4px rgba(110, 116, 240, 0.22);
}
.il-hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 6.4vw, 82px); line-height: 1.02; letter-spacing: -0.035em;
  margin-top: 26px; text-wrap: balance;
  color: #fff;
}
.il-hero h1 em { font-style: italic; color: var(--il-blue); }
.il-hero .lead { margin: 22px auto 0; max-width: 600px; font-size: 19px; color: var(--il-mut); }
.il-hero .lead b { color: var(--il-tx); font-weight: 500; }

/* the voice-capture glass card — the signature header artifact */
.il-capture {
  position: relative;
  margin: 56px auto 0;
  width: min(440px, 100%);
  padding: 26px 26px 22px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(24, 25, 42, 0.72), rgba(10, 10, 18, 0.72));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 40px 90px -40px rgba(70, 77, 225, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: left;
}
.il-capture .cap-x {
  position: absolute; top: 16px; right: 16px;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06); color: var(--il-mut); font-size: 15px;
}
.il-capture .cap-tx {
  font-size: 18.5px; line-height: 1.5; letter-spacing: -0.02em;
  color: rgba(236, 236, 244, 0.82); max-width: 340px;
}
.il-capture .cap-tx b { color: #fff; font-weight: 600; }
.il-wave {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 46px; margin: 22px 0 18px;
}
.il-wave i {
  width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, #cdd0ff, var(--il-blue));
  animation: il-eq 1.3s ease-in-out infinite;
}
@keyframes il-eq { 0%, 100% { height: 12%; opacity: .55; } 50% { height: 100%; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .il-wave i { animation: none; height: 50%; } }
.il-mic {
  margin: 0 auto;
  width: 52px; height: 52px; border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.06), 0 12px 30px -10px rgba(110, 116, 240, 0.8);
}

/* small "what it becomes" chips under the hero card */
.il-becomes {
  margin: 30px auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  max-width: 620px;
}
.il-becomes .chip {
  font-size: 12.5px; letter-spacing: -0.01em; color: var(--il-mut);
  border: 1px solid var(--il-line); background: var(--il-glass);
  border-radius: var(--r-btn); padding: 7px 14px;
}
.il-becomes .chip b { color: var(--il-tx); font-weight: 500; }

/* ═══════════════ SHARED SECTION TYPE (dark) ═══════════════ */
.il-sec { padding: 96px 0; }
.il-sec.tight { padding: 72px 0; }
.il-line-top { border-top: 1px solid var(--il-line-soft); }
.il-head { max-width: 660px; }
.il-head.center { margin: 0 auto; text-align: center; }
.il-head h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.03em;
  color: #fff; text-wrap: balance; margin-top: 14px;
}
.il-head p { margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--il-mut); text-wrap: pretty; }
.il-head p b { color: var(--il-tx); font-weight: 500; }

/* pull-quote line used to punctuate sections */
.il-punch {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.025em; line-height: 1.3;
  color: #fff; text-wrap: balance;
}
.il-punch .b { color: var(--il-blue); }

/* ═══════════════ AMNESIA (two contrasting cards) ═══════════════ */
.il-split { margin-top: 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.il-vs {
  position: relative;
  border: 1px solid var(--il-line); border-radius: 16px;
  padding: 30px 28px; background: var(--il-glass);
  overflow: hidden;
}
.il-vs .vk { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--il-dim); }
.il-vs h3 { font-family: var(--serif); font-size: 25px; font-weight: 400; letter-spacing: -0.02em; margin-top: 12px; color: #fff; }
.il-vs p { margin-top: 12px; font-size: 15px; line-height: 1.65; color: var(--il-mut); }
.il-vs.good { border-color: rgba(110, 116, 240, 0.5); background: linear-gradient(165deg, rgba(70, 77, 225, 0.22), rgba(70, 77, 225, 0.04)); }
.il-vs.good .vk { color: var(--il-blue); }
.il-vs .zero { margin-top: 20px; font-family: var(--serif); font-size: 46px; letter-spacing: -0.03em; color: rgba(255,255,255,.22); line-height: 1; }
.il-vs.good .zero { color: #fff; }
.il-vs.good .zero span { color: var(--il-blue); }

/* ═══════════════ PIPELINE (the seconds after capture) ═══════════════ */
.il-rail { margin-top: 60px; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.il-rail::before {
  content: ''; position: absolute; top: 26px; left: 6%; right: 6%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110,116,240,.55) 15%, rgba(110,116,240,.55) 85%, transparent);
  z-index: 0;
}
.il-stage { position: relative; z-index: 1; }
.il-stage .num {
  width: 52px; height: 52px; border-radius: 50%; margin-bottom: 22px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 20px; color: #fff;
  background: var(--il-raise); border: 1px solid rgba(110, 116, 240, 0.5);
  box-shadow: 0 0 0 6px rgba(8, 8, 15, 1), 0 0 24px -4px rgba(110, 116, 240, 0.7);
}
.il-stage h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.il-stage p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--il-mut); }
.il-stage .tag { display: inline-block; margin-top: 12px; font-size: 11.5px; color: var(--il-blue); background: var(--il-blue-soft); border-radius: var(--r-btn); padding: 4px 11px; }

/* ═══════════════ GRAPH (connected career memory) ═══════════════ */
.il-graph-wrap { margin-top: 8px; display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 64px; align-items: center; }
.il-list { margin-top: 26px; display: flex; flex-direction: column; }
.il-list li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 0; border-top: 1px solid var(--il-line-soft); font-size: 15.5px; line-height: 1.55; color: var(--il-mut);
}
.il-list li b { color: var(--il-tx); font-weight: 500; }
.il-list .mk { flex: none; margin-top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--il-blue); box-shadow: 0 0 10px rgba(110,116,240,.9); }
.il-graph {
  position: relative;
  aspect-ratio: 1 / 0.86;
  border: 1px solid var(--il-line); border-radius: 18px;
  background: radial-gradient(80% 80% at 50% 40%, rgba(70,77,225,.14), transparent 70%), var(--il-glass);
  overflow: hidden;
}
.il-graph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.il-node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: var(--r-btn);
  background: rgba(16, 16, 26, 0.9); border: 1px solid var(--il-line);
  font-size: 12.5px; letter-spacing: -0.01em; color: var(--il-tx); white-space: nowrap;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.8);
}
.il-node .g {
  width: 20px; height: 20px; border-radius: 6px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--il-blue); background: var(--il-blue-soft);
}
.il-node.hub {
  background: linear-gradient(160deg, #4A51E8, var(--iris-deep)); border-color: transparent; color: #fff;
  font-weight: 600; padding: 10px 16px;
  box-shadow: 0 0 40px -6px rgba(110, 116, 240, 0.8);
}
.il-node.hub .g { background: rgba(255,255,255,.2); color: #fff; }

/* ═══════════════ NOTICING (surfaced patterns) ═══════════════ */
.il-notice { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.il-insight {
  border: 1px solid var(--il-line); border-radius: 16px; padding: 26px 24px;
  background: var(--il-glass); position: relative; overflow: hidden;
}
.il-insight::before {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--il-blue), transparent);
}
.il-insight .ik { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--il-blue); }
.il-insight p { margin-top: 14px; font-size: 16.5px; line-height: 1.5; letter-spacing: -0.02em; color: #fff; }
.il-insight .meta { margin-top: 14px; font-size: 12.5px; color: var(--il-dim); }

/* ═══════════════ SYSTEM / MOAT (layered stack) ═══════════════ */
.il-moat { margin-top: 8px; display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: center; }
.il-stack { display: flex; flex-direction: column; gap: 14px; }
.il-layer {
  border: 1px solid var(--il-line); border-radius: 14px; padding: 22px 24px;
  background: var(--il-glass); position: relative;
  transition: transform 200ms ease, border-color 200ms ease;
}
.il-layer:hover { border-color: rgba(110, 116, 240, 0.5); transform: translateX(4px); }
.il-layer .ln { font-family: var(--serif); font-size: 13px; color: var(--il-blue); }
.il-layer h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: #fff; margin-top: 4px; }
.il-layer p { margin-top: 7px; font-size: 14px; line-height: 1.6; color: var(--il-mut); }
.il-layer.base {
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border-style: dashed;
}
.il-layer.base h3 { color: var(--il-mut); }

/* ═══════════════ PRIVACY ═══════════════ */
.il-guards { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.il-guard { border: 1px solid var(--il-line); border-radius: 16px; padding: 28px 26px; background: var(--il-glass); }
.il-guard .gi { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--il-blue-soft); color: var(--il-blue); }
.il-guard h3 { margin-top: 18px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.il-guard p { margin-top: 9px; font-size: 14.5px; line-height: 1.6; color: var(--il-mut); }
.il-guard-strip { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.il-guard-strip .ti { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--il-dim); }
.il-guard-strip .ti::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--il-blue); }

/* ═══════════════ FAQ (dark) ═══════════════ */
.il-faq { margin: 44px auto 0; max-width: 760px; border-top: 1px solid var(--il-line); }
.il-faq details { border-bottom: 1px solid var(--il-line-soft); }
.il-faq summary {
  cursor: pointer; list-style: none; position: relative;
  font-family: var(--serif); font-size: 20px; letter-spacing: -0.02em; color: #fff;
  padding: 24px 40px 24px 0;
}
.il-faq summary::-webkit-details-marker { display: none; }
.il-faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-size: 22px; color: var(--il-mut); }
.il-faq details[open] summary::after { content: '−'; }
.il-faq .a { padding: 0 40px 26px 0; font-size: 15.5px; line-height: 1.7; color: var(--il-mut); }
.il-faq .a b { color: var(--il-tx); font-weight: 500; }

/* ═══════════════ FINAL CTA (glow band) ═══════════════ */
.il-final {
  position: relative; overflow: hidden; text-align: center;
  padding: 120px 0; isolation: isolate;
}
.il-final::before {
  content: ''; position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  width: 900px; height: 500px; max-width: 130%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(110, 116, 240, 0.34), transparent 70%);
  z-index: -1; pointer-events: none;
}
.il-final h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5vw, 62px); line-height: 1.04; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.il-final p { margin: 20px auto 0; max-width: 500px; font-size: 18px; line-height: 1.6; color: var(--il-mut); }
.il-final .phero-cta { margin-top: 34px; }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 960px) {
  .il-hero { padding: 84px 0 72px; }
  .il-split { grid-template-columns: 1fr; }
  .il-rail { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .il-rail::before { display: none; }
  .il-graph-wrap, .il-moat { grid-template-columns: 1fr; gap: 40px; }
  .il-notice, .il-guards { grid-template-columns: 1fr; }
  .il-sec { padding: 72px 0; }
}
@media (max-width: 640px) {
  /* left-align + shrink display type per site convention so long serif
     lines never overflow the narrow viewport */
  .il-hero { padding: 52px 0 48px; text-align: left; }
  .il-hero h1 { font-size: clamp(33px, 8.8vw, 44px); line-height: 1.06; }
  .il-hero .lead { margin-left: 0; margin-right: 0; font-size: 17px; }
  .il-hero .il-stars { background-size: 34px 34px; }
  .il-capture { margin-left: 0; padding: 22px 20px 20px; }
  .il-capture .cap-tx { font-size: 17px; }
  .il-head h2 { font-size: clamp(27px, 7.4vw, 34px); }
  .il-head.center { text-align: left; margin-left: 0; }
  .il-head.center p, .il-head.center h2 { margin-left: 0; margin-right: 0; }
  .il-punch { font-size: clamp(21px, 6vw, 26px); }
  .il-rail { grid-template-columns: 1fr; }
  .il-sec { padding: 56px 0; }
  .il-final { padding: 80px 0; text-align: left; }
  .il-final h2 { font-size: clamp(31px, 8vw, 44px); }
  .il-final p { margin-left: 0; margin-right: 0; }
  .il-final .phero-cta { justify-content: flex-start; }
  .il-becomes { justify-content: flex-start; }
}