/* ============================================================================
   ĐỘI NGŨ GIẢNG VIÊN & CHUYÊN GIA AI — Enterprise AI Faculty System
   Page-scoped stylesheet for doi-ngu-giang-vien.html

   CONCEPT
     Enterprise AI Faculty × Capability Architecture × Deployment Evidence

   VISUAL RHYTHM
     01 hero ......... near-black / command system
     02 capability ... pale (#f2f6f5) / capability architecture
     03 pillar 01 .... white
     04 pillar 02 .... pale
     05 pillar 03 .... white
     06 faculty ...... near-black / node system
     07 final cta .... near-black, deeper
        footer ....... dark (shared)

   Every selector is namespaced `.fc-*`. Nothing here can reach the homepage,
   `lucas.html`, `ung-dung-thuc-te.html`, `tin-tuc-chia-se.html` or the
   shared header / footer / consultation modal.

   MOTION CONTRACT
     Content is VISIBLE BY DEFAULT. Nothing in this file hides content on its
     own. Only `html.fc-motion` — added by an inline head script that first
     confirms `prefers-reduced-motion` is not `reduce` — may set an initial
     hidden state, and `assets/js/faculty-system.js` (plus an inline watchdog)
     is responsible for clearing it. If that script never runs, the inline
     watchdog removes `fc-motion` and the page renders as a complete static
     document.
   ========================================================================= */

/* ----------------------------------------------------------- 0. PAGE TOKENS */
:root {
  --fc-ink:        #06110e;
  --fc-ink-2:      #0a1a15;
  --fc-ink-3:      #15171a;
  --fc-paper:      #f2f6f5;
  --fc-white:      #ffffff;

  --fc-em:         #08906c;
  --fc-em-hi:      #34d399;
  --fc-em-deep:    #06694f;
  --fc-coral:      #c93b2b;
  --fc-coral-hi:   #e0523f;

  --fc-line:       rgba(52, 211, 153, 0.16);
  --fc-line-soft:  rgba(52, 211, 153, 0.10);
  --fc-hair:       rgba(234, 245, 241, 0.10);
  --fc-hair-2:     rgba(234, 245, 241, 0.18);

  --fc-text-dark:  #eaf5f1;
  --fc-text-mute:  #9fb4ae;
  --fc-text-body:  #3f4a47;
  --fc-text-body2: #5c6764;

  --fc-mono: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fc-sans: 'Archivo', Arial, sans-serif;

  --fc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.faculty-page {
  background-color: var(--fc-ink);
  overflow-x: clip;
}

/* Sections --------------------------------------------------------------- */
/* Sections clip on the x axis only. The decorative `.fc-glow` blobs are
   positioned partly outside their section, and without this a right-hand glow
   adds its full offset to the document scroll width. `clip` (not `hidden`)
   keeps the y axis visible so shadows are not cut off, and it does not create
   a scroll container. */
.fc-sec { position: relative; width: 100%; overflow-x: clip; }

/* Every in-page anchor on this page targets a `.fc-sec` (#nang-luc-dao-tao,
   #nang-luc-tu-van, #nang-luc-nen-tang, #doi-ngu, #lien-he-ai) and the lane CTAs
   "Chặng 01/02/03 →" are the primary navigation. Without a scroll margin the
   browser puts the section's top edge at viewport y=0, i.e. underneath the
   sticky header — measured top=0 against headerBottom=81, so the eyebrow and
   title of the destination were hidden on arrival. Same defect the application
   page's #chang-0X links had; `scroll-margin-top` does not change layout. */
.fc-sec { scroll-margin-top: 96px; }
@media (max-width: 767px) {
  .fc-sec { scroll-margin-top: 80px; }
}
.fc-sec--dark  { background-color: var(--fc-ink);  color: var(--fc-text-dark); }
.fc-sec--deep  { background-color: #04100c;        color: var(--fc-text-dark); }
.fc-sec--paper { background-color: var(--fc-paper); color: var(--fc-ink-3); }
.fc-sec--white { background-color: var(--fc-white); color: var(--fc-ink-3); }

.fc-pad { padding-top: clamp(3.5rem, 6vw, 6.25rem); padding-bottom: clamp(3.5rem, 6vw, 6.25rem); }

/* Technical grid backdrop ------------------------------------------------ */
.fc-grid-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(52, 211, 153, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 211, 153, 0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
}
.fc-sec--paper .fc-grid-bg,
.fc-sec--white .fc-grid-bg {
  background-image:
    linear-gradient(rgba(8, 144, 108, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 144, 108, 0.07) 1px, transparent 1px);
}
.fc-glow {
  position: absolute; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(8,144,108,.20) 0%, rgba(8,144,108,0) 70%);
}
.fc-glow--a { width: 46rem; height: 46rem; top: -18rem; right: -14rem; }
.fc-glow--b { width: 34rem; height: 34rem; bottom: -16rem; left: -12rem; opacity: .7; }

/* -------------------------------------------------------- 1. TYPE PRIMITIVES */
.fc-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--fc-mono);
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--fc-em);
  margin: 0;
}
.fc-sec--dark .fc-eyebrow, .fc-sec--deep .fc-eyebrow { color: var(--fc-em-hi); }
.fc-eyebrow::before {
  content: ''; width: 1.5rem; height: 1px; flex: none;
  background: currentColor; opacity: .55;
}
.fc-eyebrow--bare::before { display: none; }

.fc-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--fc-em-hi);
  box-shadow: 0 0 0 3px rgba(52,211,153,.14);
}
html.fc-motion .fc-dot { animation: fcPulse 2.4s ease-in-out infinite; }
@keyframes fcPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(52,211,153,.14); opacity: 1; }
  50%      { box-shadow: 0 0 0 7px rgba(52,211,153,.05); opacity: .72; }
}

.fc-h1 {
  font-family: var(--fc-sans);
  font-size: clamp(2.75rem, 6.2vw, 5rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.045em;
  margin: 0;
  color: var(--fc-white);
}
.fc-h2 {
  font-family: var(--fc-sans);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.038em;
  margin: 0;
}
.fc-intro {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.62;
  color: var(--fc-text-body);
  margin: 0;
}
.fc-sec--dark .fc-intro, .fc-sec--deep .fc-intro { color: var(--fc-text-mute); }
.fc-sec--dark .fc-body, .fc-sec--deep .fc-body { color: var(--fc-text-mute); }
.fc-mono {
  font-family: var(--fc-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; margin: 0;
}
.fc-em { color: var(--fc-em); }
.fc-sec--dark .fc-em, .fc-sec--deep .fc-em { color: var(--fc-em-hi); }

/* Section head block ----------------------------------------------------- */
.fc-head { max-width: 62rem; }
.fc-head__title { margin-top: 1rem; }
.fc-head__sub { margin-top: 1.125rem; max-width: 54rem; }
.fc-sec--dark .fc-head__title, .fc-sec--deep .fc-head__title { color: var(--fc-white); }

/* -------------------------------------------------------------- 2. BUTTONS */
.fc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: 1rem 1.875rem;
  border-radius: 5rem;
  font-family: var(--fc-sans);
  font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none; text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .25s var(--fc-ease), border-color .25s var(--fc-ease),
              color .25s var(--fc-ease), transform .25s var(--fc-ease),
              box-shadow .25s var(--fc-ease);
}
.fc-btn--coral {
  background: var(--fc-coral); color: #fff;
  border-color: rgba(255, 107, 74, .38);
  box-shadow: 0 8px 22px rgba(201, 59, 43, .26);
}
.fc-btn--coral:hover {
  background: var(--fc-coral-hi); transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(201, 59, 43, .34);
}
.fc-btn--ghost-dark {
  background: rgba(234, 245, 241, .04); color: var(--fc-text-dark);
  border-color: var(--fc-hair-2);
}
.fc-btn--ghost-dark:hover {
  background: rgba(52, 211, 153, .10);
  border-color: rgba(52, 211, 153, .45);
  color: #fff;
}
.fc-btn-row { display: flex; flex-wrap: wrap; gap: .875rem; }

/* Action link / button ---------------------------------------------------
   `.fc-link` used to be a bare underlined text link in every context, so the
   program CTAs and the "Xem chi tiết" links carried the same weight as body
   copy. It is now a real button surface with one shared geometry, split into
   two roles so the hierarchy is readable at rest:

     .fc-link--program  → consultation / program   (coral, filled)
     a.fc-link       → navigation / detail      (emerald, outlined high-contrast)

   The split started out purely tag-based (`button.fc-link` vs `a.fc-link`),
   which needed no markup change. It is no longer: the three
   "Chương trình: Chặng 0X" CTAs became `<a href="/ung-dung-thuc-te#chang-0X">`
   when the brief supplied explicit URLs for them, so the coral role now keys
   off the `.fc-link--program` class and the emerald rules exclude it via
   `:not()`. */
.fc-link {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.875rem;
  padding: .6875rem 1.375rem;
  border: 1.5px solid transparent;
  border-radius: 5rem;
  font-family: var(--fc-sans);
  font-size: .875rem; font-weight: 700; letter-spacing: -0.01em;
  line-height: 1.25;
  text-decoration: none; text-align: center;
  /* The arrow is part of the label text, not a separate flex item, so at the
     768-991px three-column lane width the label wraps and the "→" is left
     ALONE on the second line. Balancing the wrap keeps it attached to the last
     words. Progressive enhancement: unsupported engines fall back to the
     current greedy wrap, which is what the fallback already looked like. */
  text-wrap: balance;
  color: var(--fc-em-deep);
  cursor: pointer;
  transition: background-color .25s var(--fc-ease), border-color .25s var(--fc-ease),
              color .25s var(--fc-ease), box-shadow .25s var(--fc-ease),
              transform .25s var(--fc-ease);
}

/* Navigation / detail / profile — emerald outlined action.
   `:not(.fc-link--program)` keeps the three "Chương trình: Chặng 0X" links out
   of this role. They are `<a>` now (the brief gives explicit URLs) but must stay
   CORAL, and `.fc-sec--dark a.fc-link` (0,2,1) would otherwise out-specify a
   plain `.fc-link--program` (0,1,0) and repaint them emerald. Excluding them here
   removes the specificity contest instead of trying to win it. */
a.fc-link:not(.fc-link--program) {
  background: rgba(8, 144, 108, .08);
  border-color: rgba(8, 144, 108, .42);
}
a.fc-link:not(.fc-link--program):hover {
  background: rgba(8, 144, 108, .15);
  border-color: var(--fc-em);
  color: var(--fc-em-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(8, 144, 108, .16);
}
.fc-sec--dark a.fc-link:not(.fc-link--program),
.fc-sec--deep a.fc-link:not(.fc-link--program) {
  background: rgba(52, 211, 153, .12);
  border-color: rgba(52, 211, 153, .48);
  color: var(--fc-em-hi);
}
.fc-sec--dark a.fc-link:not(.fc-link--program):hover,
.fc-sec--deep a.fc-link:not(.fc-link--program):hover {
  background: rgba(52, 211, 153, .2);
  border-color: var(--fc-em-hi);
  color: #a7f3d0;
  box-shadow: 0 6px 18px rgba(8, 144, 108, .28);
}

/* Consultation / program — coral filled, the top of the CTA hierarchy.
   `--program` exists because the three "Chương trình: Chặng 0X" CTAs became
   `<a href="/ung-dung-thuc-te#chang-0X">` (the brief gives explicit URLs), and
   the coral role used to be keyed off the `<button>` tag. Without this they
   would silently fall back to the emerald navigation role. */
button.fc-link,
.fc-link--program {
  background: var(--fc-coral);
  border-color: rgba(255, 107, 74, .38);
  color: #fff;
  box-shadow: 0 8px 22px rgba(201, 59, 43, .26);
}
button.fc-link:hover,
.fc-link--program:hover {
  background: var(--fc-coral-hi);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(201, 59, 43, .34);
}
.fc-link:focus-visible { outline: 2px solid var(--fc-em-hi); outline-offset: 3px; }

/* ================================================================ 3. HERO */
.fc-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(3rem, 5.5vw, 5rem);
  padding-bottom: clamp(3rem, 5.5vw, 5rem);
}
.fc-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: stretch;
}
/* The command panel is the taller of the two columns; centre the copy against
   it so the hero reads as one composition instead of a top-aligned block over
   a pool of dead space. */
.fc-hero__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.fc-hero__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
  margin-bottom: 1.5rem;
}
.fc-hero__meta-sep { width: 1px; height: 12px; background: var(--fc-hair-2); }
.fc-hero__meta-dim { color: var(--fc-text-mute); }
.fc-hero__title { margin-top: .25rem; }
.fc-hero__headline {
  margin: .75rem 0 0;
  font-family: var(--fc-sans);
  font-size: clamp(1.125rem, 2.1vw, 1.75rem);
  line-height: 1.3; font-weight: 500; letter-spacing: -0.03em;
  color: var(--fc-em-hi);
  max-width: 34ch;
}
.fc-hero__role {
  margin: 1.5rem 0 0;
  padding: .75rem 1rem;
  border: 1px solid var(--fc-line);
  border-left: 2px solid var(--fc-em-hi);
  border-radius: .5rem;
  background: rgba(8, 144, 108, .07);
  font-size: .875rem; font-weight: 500; line-height: 1.55;
  color: var(--fc-text-dark);
  letter-spacing: -0.01em;
  max-width: 44rem;
}
/* Separators stay inline so the role line reads as ONE sentence to assistive
   tech and to search engines — no flex fragmentation. */
.fc-hero__role span { color: var(--fc-text-mute); }
.fc-hero__desc {
  margin: 1.5rem 0 0;
  max-width: 60ch;
  font-size: clamp(1rem, 1.1vw, 1.0625rem);
  line-height: 1.68;
  color: var(--fc-text-mute);
}
.fc-hero__desc strong { color: var(--fc-text-dark); font-weight: 600; }
.fc-hero__cta { margin-top: 2rem; }

/* Command panel (right visual) ------------------------------------------- */
.fc-panel {
  position: relative;
  border: 1px solid var(--fc-line);
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgba(10, 26, 21, .92) 0%, rgba(6, 17, 14, .96) 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(234, 245, 241, .05);
  overflow: hidden;
}
.fc-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(52, 211, 153, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 211, 153, .07) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}
.fc-panel__head {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .875rem 1.125rem;
  border-bottom: 1px solid var(--fc-hair);
}
.fc-panel__head-left { display: inline-flex; align-items: center; gap: .55rem; }
.fc-panel__head-right { color: var(--fc-text-mute); }
.fc-panel__media {
  position: relative; z-index: 2;
  aspect-ratio: 4 / 3.6;
  overflow: hidden;
  background: #04100c;
}
.fc-panel__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  display: block;
  filter: saturate(.92) contrast(1.04);
}
.fc-panel__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 17, 14, .35) 0%, rgba(6, 17, 14, 0) 32%, rgba(6, 17, 14, .82) 100%);
}
.fc-scan {
  position: absolute; left: 0; right: 0; height: 30%;
  background: linear-gradient(180deg, rgba(52, 211, 153, 0) 0%, rgba(52, 211, 153, .13) 50%, rgba(52, 211, 153, 0) 100%);
  top: -30%; z-index: 3; pointer-events: none;
}
html.fc-motion .fc-scan { animation: fcScan 5.5s linear infinite; }
@keyframes fcScan { 0% { top: -30%; } 100% { top: 100%; } }

.fc-corner {
  position: absolute; width: 16px; height: 16px; z-index: 4;
  border: 1.5px solid var(--fc-em-hi); opacity: .7; pointer-events: none;
}
.fc-corner--tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.fc-corner--tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.fc-corner--bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.fc-corner--br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

.fc-panel__badge {
  position: absolute; z-index: 5; left: 1.125rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem .75rem;
  border-radius: 5rem;
  background: rgba(6, 17, 14, .78);
  border: 1px solid rgba(52, 211, 153, .3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--fc-mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fc-text-dark);
  white-space: nowrap;
}
.fc-panel__labels {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--fc-hair);
  border-top: 1px solid var(--fc-hair);
}
.fc-panel__label {
  background: #07140f;
  padding: .75rem .875rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.fc-panel__label span:first-child {
  font-family: var(--fc-mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fc-em-hi);
}
.fc-panel__label span:last-child {
  font-size: .75rem; line-height: 1.4; color: var(--fc-text-mute);
}
.fc-panel__levels {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: .5rem;
  padding: .875rem 1.125rem 1.125rem;
  border-top: 1px solid var(--fc-hair);
}
.fc-panel__level {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--fc-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .04em; color: var(--fc-text-mute);
}
.fc-panel__level b { color: var(--fc-text-dark); font-weight: 600; }
.fc-panel__bar {
  position: relative; flex: 1 1 auto; height: 2px; min-width: 1.5rem;
  background: rgba(234, 245, 241, .12); border-radius: 2px; overflow: hidden;
}
.fc-panel__bar i {
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--fc-w, 100%);
  background: linear-gradient(90deg, var(--fc-em), var(--fc-em-hi));
  border-radius: 2px;
}
html.fc-motion .fc-panel__bar i { width: 0; transition: width .9s var(--fc-ease); }
html.fc-motion .fc-panel__level.is--on .fc-panel__bar i { width: var(--fc-w, 100%); }
.fc-panel__level.is--on { color: var(--fc-em-hi); }

/* ==================================================================== 4. SHARED SYSTEM PRIMITIVES
   The four redesigned sections share one visual grammar: a system bar, an
   SVG wire that carries a data packet, open "system fields" instead of a
   bordered table, and node frames instead of rectangular cards.
   ===================================================================== */

/* --- System bar: names the subsystem, sits at the top of each block ------ */
.fc-sysbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(21, 23, 26, .14);
}
.fc-sec--dark .fc-sysbar, .fc-sec--deep .fc-sysbar { border-bottom-color: var(--fc-line); }
.fc-sysbar__name {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--fc-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fc-em-deep);
}
.fc-sec--dark .fc-sysbar__name, .fc-sec--deep .fc-sysbar__name { color: var(--fc-em-hi); }
.fc-sysbar__name::before {
  content: ''; width: 7px; height: 7px; border-radius: 2px; flex: none;
  background: currentColor;
}
.fc-sysbar__meta {
  font-family: var(--fc-mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fc-text-body2);
}
.fc-sec--dark .fc-sysbar__meta, .fc-sec--deep .fc-sysbar__meta { color: var(--fc-text-mute); }

/* --- Wire: an SVG connector that carries a travelling emerald packet -----
   viewBox is 0 0 100 1 with preserveAspectRatio="none", so one element
   stretches to any width while `vector-effect: non-scaling-stroke` keeps the
   stroke exactly 1px. Animation is stroke-dashoffset only. */
.fc-wire { display: block; width: 100%; height: 1px; overflow: visible; }
.fc-wire__base { stroke: rgba(21, 23, 26, .16); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.fc-sec--dark .fc-wire__base, .fc-sec--deep .fc-wire__base { stroke: rgba(52, 211, 153, .26); }
.fc-wire__flow {
  stroke: var(--fc-em-hi); stroke-width: 1.6; vector-effect: non-scaling-stroke; fill: none;
  stroke-dasharray: 7 93; stroke-dashoffset: 0;
}
html.fc-motion .fc-wire__flow { animation: fcWireFlow 5s linear infinite; }
@keyframes fcWireFlow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* --- Open system fields (replaces the bordered fact table) --------------- */
.fc-fields { display: flex; flex-direction: column; margin: 0; }
.fc-field {
  display: grid; grid-template-columns: 8.75rem minmax(0, 1fr); gap: .5rem 1.25rem;
  padding: .8125rem 0;
  border-top: 1px solid rgba(21, 23, 26, .1);
}
.fc-sec--dark .fc-field, .fc-sec--deep .fc-field { border-top-color: var(--fc-hair); }
.fc-field:last-child { border-bottom: 1px solid rgba(21, 23, 26, .1); }
.fc-sec--dark .fc-field:last-child, .fc-sec--deep .fc-field:last-child { border-bottom-color: var(--fc-hair); }
.fc-field dt {
  font-family: var(--fc-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .06em; color: var(--fc-text-body2);
}
.fc-sec--dark .fc-field dt, .fc-sec--deep .fc-field dt { color: var(--fc-text-mute); }
.fc-field dd { margin: 0; font-size: .9375rem; line-height: 1.55; font-weight: 500; color: var(--fc-ink-3); }
.fc-sec--dark .fc-field dd, .fc-sec--deep .fc-field dd { color: var(--fc-text-dark); }

/* --- Node frame: open frame, hairline, no heavy card chrome -------------- */
.fc-frame {
  position: relative;
  border: 1px solid rgba(21, 23, 26, .12);
  border-radius: .625rem;
  background: rgba(255, 255, 255, .5);
  transition: border-color .45s var(--fc-ease), background-color .45s var(--fc-ease);
}
.fc-sec--dark .fc-frame, .fc-sec--deep .fc-frame {
  border-color: var(--fc-line-soft);
  background: rgba(10, 26, 21, .55);
}
.fc-frame.is--active { border-color: rgba(8, 144, 108, .45); background: #fff; }
.fc-sec--dark .fc-frame.is--active, .fc-sec--deep .fc-frame.is--active {
  border-color: rgba(52, 211, 153, .42);
  background: rgba(8, 144, 108, .09);
}

/* ==================================================== 5. AI CAPABILITY SYSTEM MAP
   One frame containing the 6-level rail AND the 3 subsystem lanes, divided by
   internal hairlines. Deliberately not "6 boxes above 3 cards". */
.fc-map {
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
  border: 1px solid rgba(21, 23, 26, .14);
  border-radius: .75rem;
  background: rgba(255, 255, 255, .55);
  overflow: hidden;
}

/* Rail ------------------------------------------------------------------- */
.fc-map__bar { padding: .75rem clamp(1rem, 2vw, 1.75rem); border-bottom: 1px solid rgba(21, 23, 26, .12); }
.fc-map__rail { position: relative; padding: 1.25rem clamp(1rem, 2vw, 1.75rem) 2.25rem; }
.fc-map__wire { position: absolute; left: clamp(1rem, 2vw, 1.75rem); right: clamp(1rem, 2vw, 1.75rem); top: 2.375rem; }
/* The map's wire carries the 01→06 scan, so its own ambient dash loop is
   switched off and the line becomes a full faint rail. `stroke-dasharray: none`
   matters for the no-JS / reduced-motion case too: the inherited `7 93` pattern
   would otherwise render as one stray dash with no animation to explain it. */
.fc-map__wire .fc-wire__flow { stroke-dasharray: none; stroke-opacity: .3; }
html.fc-motion .fc-map__wire .fc-wire__flow { animation: none; }
/* Scan progress. A dedicated bar rather than the SVG dash: `non-scaling-stroke`
   makes dasharray units ambiguous, while a scaleX transform is exact and is one
   of the properties the motion contract already allows. */
.fc-map__progress {
  position: absolute;
  left: clamp(1rem, 2vw, 1.75rem); right: clamp(1rem, 2vw, 1.75rem);
  top: 2.375rem; height: 2px;
  pointer-events: none;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(52, 211, 153, .25) 0%, var(--fc-em-hi) 100%);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .55s var(--fc-ease);
}
.fc-map__nodes {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
}
.fc-map__node { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.fc-map__idx {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid rgba(21, 23, 26, .18);
  font-family: var(--fc-mono); font-size: .6875rem; font-weight: 600;
  color: var(--fc-text-body2);
  transition: background-color .45s var(--fc-ease), border-color .45s var(--fc-ease), color .45s var(--fc-ease);
}
.fc-map__name {
  font-size: .75rem; line-height: 1.3; color: var(--fc-text-body2);
  transition: color .45s var(--fc-ease);
}
.fc-map__node.is--active .fc-map__idx {
  background: var(--fc-em); border-color: var(--fc-em); color: #fff;
  box-shadow: 0 0 0 5px rgba(8, 144, 108, .14);
}
.fc-map__node.is--active .fc-map__name { color: var(--fc-ink-3); font-weight: 600; }
/* Levels the scan has already passed stay marked — dimmer than the live one,
   brighter than the untouched ones — so the run leaves a trail. */
.fc-map__node.is--done .fc-map__idx {
  background: rgba(8, 144, 108, .14); border-color: rgba(8, 144, 108, .38);
  color: var(--fc-em-deep);
}
.fc-map__node.is--done .fc-map__name { color: var(--fc-text-body); }
/* Level 06 is the end of the run, so its active state reads as completion. */
.fc-map.is--complete .fc-map__node:last-child .fc-map__idx {
  box-shadow: 0 0 0 6px rgba(8, 144, 108, .16), 0 0 16px rgba(52, 211, 153, .34);
}

/* Subsystem lanes -------------------------------------------------------- */
.fc-map__lanes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(21, 23, 26, .12);
}
.fc-lane {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 1.5rem clamp(1rem, 2vw, 1.75rem) 1.625rem;
  border-left: 1px solid rgba(21, 23, 26, .12);
  transition: background-color .45s var(--fc-ease);
}
.fc-lane:first-child { border-left: 0; }
/* stub rising from the lane back up to the rail it belongs to */
.fc-lane::before {
  content: ''; position: absolute; left: 50%; top: -2.25rem;
  width: 1px; height: 2.25rem; background: rgba(21, 23, 26, .14);
}
.fc-lane.is--active::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--fc-em), var(--fc-em-hi));
}
.fc-lane.is--active { background: rgba(8, 144, 108, .06); }
.fc-lane.is--active::before { background: var(--fc-em); }
.fc-lane__sys {
  font-family: var(--fc-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fc-text-body2);
  transition: color .45s var(--fc-ease);
}
.fc-lane.is--active .fc-lane__sys { color: var(--fc-em-deep); }
.fc-lane__lv {
  margin-top: .375rem;
  font-family: var(--fc-mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .1em; color: var(--fc-text-body2);
}
.fc-lane__title {
  margin: .75rem 0 0; font-family: var(--fc-sans);
  font-size: 1.125rem; font-weight: 700; letter-spacing: .01em;
  text-transform: uppercase; line-height: 1.25; color: var(--fc-ink-3);
}
.fc-lane__desc { margin: .625rem 0 0; font-size: .9375rem; line-height: 1.6; color: var(--fc-text-body); }
.fc-lane__maturity {
  margin: .875rem 0 0; padding-left: .75rem;
  border-left: 2px solid rgba(8, 144, 108, .35);
  font-family: var(--fc-mono); font-size: .6875rem; font-weight: 500;
  line-height: 1.55; color: var(--fc-em-deep);
}
.fc-lane__link { margin-top: auto; padding-top: 1.25rem; }

/* ================================================== 6. AI ENABLEMENT ENGINE
   Dark. Head + open fields, then the six-step chain that ends in the three
   deliverables, then the deployment evidence panel. */
.fc-eng__top {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  align-items: start;
}
/* The right column used to start flush with the system bar (measured gap to the
   sysbar: 0px at every desktop width) while the left column began with an
   eyebrow + title + claim, so the block read top-heavy: the fields sat ~87px
   ABOVE the title's baseline. Dropping them puts the first field row level with
   the title and brings the two column bottoms together — measured
   |left.bottom - fields.bottom|: 31px @1536, 28px @1440, 4px @1280, 3px @1024,
   3px @992 (it was 87px in the other direction before).
   `align-items: start` on the grid means this is a plain offset, no structure
   change. Below 992px the grid collapses to one column and the fields flow
   after the left column naturally, so the offset must not apply there. */
@media (min-width: 992px) {
  .fc-eng__top > .fc-fields { margin-top: clamp(1.75rem, 3.4vw, 3rem); }
}
.fc-eng__flowhead { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

/* Six-step chain --------------------------------------------------------- */
.fc-flow { position: relative; margin-top: 1.5rem; }
.fc-flow__list {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
}
.fc-flow__wire { position: absolute; left: 0; right: 0; top: .8125rem; }
.fc-flow__step {
  position: relative; display: flex; flex-direction: column;
  padding-right: 1.25rem;
}
.fc-flow__dot {
  position: relative; z-index: 1;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center;
  background: #0a1a15; border: 1px solid var(--fc-line);
  font-family: var(--fc-mono); font-size: .625rem; font-weight: 600;
  color: var(--fc-em-hi);
  transition: background-color .45s var(--fc-ease), border-color .45s var(--fc-ease), color .45s var(--fc-ease);
}
.fc-flow__step.is--active .fc-flow__dot {
  background: var(--fc-em); border-color: var(--fc-em-hi); color: #fff;
  box-shadow: 0 0 0 5px rgba(52, 211, 153, .14);
}
.fc-flow__step.is--done .fc-flow__dot { border-color: rgba(52, 211, 153, .55); }
.fc-flow__name {
  margin-top: .875rem;
  font-family: var(--fc-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fc-text-mute);
  transition: color .45s var(--fc-ease);
}
.fc-flow__step.is--active .fc-flow__name { color: var(--fc-em-hi); }
.fc-flow__step.is--done .fc-flow__name { color: var(--fc-text-dark); }
.fc-flow__body { display: flex; flex-direction: column; }
.fc-flow__desc { margin: .5rem 0 0; font-size: .8125rem; line-height: 1.55; color: var(--fc-text-mute); }
.fc-flow__step.is--active .fc-flow__desc { color: var(--fc-text-dark); }

/* Deployment evidence ---------------------------------------------------- */
.fc-evidence {
  margin-top: clamp(2rem, 3.5vw, 3rem);
  padding: clamp(1.25rem, 2.4vw, 2rem);
  border: 1px solid var(--fc-line-soft);
  border-radius: .75rem;
  background: linear-gradient(155deg, rgba(8, 144, 108, .1) 0%, rgba(6, 17, 14, 0) 46%);
}
.fc-evidence__grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem); align-items: start;
}
.fc-evidence__status {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3125rem .6875rem; border-radius: 5rem;
  border: 1px solid rgba(52, 211, 153, .35);
  background: rgba(8, 144, 108, .14);
  font-family: var(--fc-mono); font-size: .625rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fc-em-hi);
}
.fc-evidence__title {
  margin: 1rem 0 0; font-family: var(--fc-sans);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.28; color: var(--fc-white);
}
.fc-evidence__desc { margin: .75rem 0 0; font-size: .9375rem; line-height: 1.65; color: var(--fc-text-mute); }
.fc-evidence__link { margin-top: 1.25rem; }
.fc-evidence__facts { display: flex; flex-direction: column; margin: 0; }
.fc-evidence__fact {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .6875rem 0; border-top: 1px solid var(--fc-hair);
}
.fc-evidence__fact:last-child { border-bottom: 1px solid var(--fc-hair); }
.fc-evidence__fact dt {
  font-family: var(--fc-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .06em; color: var(--fc-text-mute);
}
.fc-evidence__fact dd { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--fc-em-hi); text-align: right; }

/* ==================================================== 7. PROVE WORKFLOW SYSTEM
   Light. PROVE is the focal point: five nodes on a wire with the QC Gate
   called out at V, and the two deployments hanging off the workflow. */
.fc-wfs__top {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.75rem, 3.5vw, 3.5rem); align-items: start;
}
/* The right column starts level with the left column's field area instead of
   the eyebrow, so the two halves read as balanced. The offset tracks the left
   column's intro height across the desktop range (measured within ~2px of the
   "Cấp độ AI" field at 992–1536px). Below 992px the grid stacks, so it resets
   to 0 and adds no dead space. */
@media (min-width: 992px) {
  .fc-wfs__aside { padding-top: calc(6.5rem + 3.7vw); }
}
.fc-wfs__deliv { display: flex; flex-direction: column; margin: 0; list-style: none; padding: 0; }
.fc-wfs__deliv li {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .875rem;
  padding: .75rem 0; border-top: 1px solid rgba(21, 23, 26, .1);
  font-size: .9375rem; line-height: 1.55; color: var(--fc-text-body);
}
.fc-wfs__deliv li:last-child { border-bottom: 1px solid rgba(21, 23, 26, .1); }
.fc-wfs__deliv b {
  font-family: var(--fc-mono); font-size: .6875rem; font-weight: 600;
  color: var(--fc-em-deep); padding-top: .15rem;
}

/* PROVE chain ------------------------------------------------------------ */
.fc-wf {
  position: relative; margin-top: clamp(2rem, 3.5vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem) clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid rgba(21, 23, 26, .14);
  border-radius: .75rem;
  background: rgba(255, 255, 255, .6);
}
.fc-wf__flow { position: relative; margin-top: 1.25rem; }
.fc-wf__list { position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fc-wf__wire { position: absolute; left: 0; right: 0; top: 1.375rem; }
.fc-wf__node { position: relative; display: flex; flex-direction: column; padding-right: 1.25rem; }
.fc-wf__letter {
  position: relative; z-index: 1;
  width: 2.75rem; height: 2.75rem; border-radius: .625rem;
  display: grid; place-items: center;
  background: #fff; border: 1px solid rgba(21, 23, 26, .18);
  font-family: var(--fc-mono); font-size: 1rem; font-weight: 700;
  color: var(--fc-text-body2);
  transition: background-color .45s var(--fc-ease), border-color .45s var(--fc-ease),
              color .45s var(--fc-ease), transform .45s var(--fc-ease);
}
.fc-wf__node.is--active .fc-wf__letter {
  background: var(--fc-em); border-color: var(--fc-em); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(8, 144, 108, .28);
}
.fc-wf__node.is--done .fc-wf__letter { border-color: rgba(8, 144, 108, .5); color: var(--fc-em-deep); }
.fc-wf__name {
  margin: .875rem 0 0; font-family: var(--fc-sans);
  font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--fc-ink-3);
}
.fc-wf__body { display: flex; flex-direction: column; align-items: flex-start; }
.fc-wf__desc { margin: .375rem 0 0; font-size: .8125rem; line-height: 1.55; color: var(--fc-text-body); }
.fc-wf__gate {
  display: inline-flex; align-items: center; gap: .375rem;
  margin-top: .625rem; align-self: flex-start;
  padding: .25rem .5rem; border-radius: .3125rem;
  border: 1px solid rgba(201, 59, 43, .38);
  background: rgba(201, 59, 43, .07);
  font-family: var(--fc-mono); font-size: .5625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #b8351f;
}

/* Deployment nodes hanging off the workflow ------------------------------ */
.fc-dep { margin-top: clamp(2rem, 3.5vw, 3rem); }
.fc-dep__rail { position: relative; height: 2.25rem; }
.fc-dep__rail svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fc-dep__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.fc-dep__node {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 1.375rem 1.5rem 1.5rem;
  border: 1px solid rgba(21, 23, 26, .13);
  border-radius: .625rem;
  background: #fff;
  transition: border-color .35s var(--fc-ease), box-shadow .35s var(--fc-ease), transform .35s var(--fc-ease);
}
.fc-dep__node:hover {
  border-color: rgba(8, 144, 108, .45);
  box-shadow: 0 16px 34px rgba(6, 17, 14, .1);
  transform: translateY(-2px);
}
.fc-dep__head { display: flex; align-items: center; gap: .625rem; }
.fc-dep__kind {
  font-family: var(--fc-mono); font-size: .625rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fc-text-body2);
}
.fc-dep__kind.is--done { color: var(--fc-em-deep); }
.fc-dep__link { margin-top: auto; padding-top: 1.125rem; }

/* ============================================ 8. GO4AI ENTERPRISE AI ARCHITECTURE
   Dark. Core node with a fan-out to the four systems. */
.fc-arch__core {
  position: relative; margin: clamp(2rem, 3.5vw, 3rem) auto 0;
  max-width: 30rem; text-align: center;
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(52, 211, 153, .38);
  border-radius: .75rem;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(8, 144, 108, .28) 0%, rgba(6, 17, 14, 0) 70%),
    rgba(10, 26, 21, .9);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.fc-arch__core-label {
  font-family: var(--fc-mono); font-size: .625rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fc-text-mute);
}
.fc-arch__core-name {
  margin: .625rem 0 0; font-family: var(--fc-sans);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; color: #fff;
}
.fc-arch__fan { position: relative; height: clamp(2.5rem, 4vw, 3.5rem); }
.fc-arch__fan svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fc-arch__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem; align-items: stretch;
}
.fc-mod {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 1.25rem 1.25rem 1.375rem;
  border: 1px solid var(--fc-line-soft);
  border-radius: .625rem;
  background: rgba(10, 26, 21, .55);
  transition: border-color .4s var(--fc-ease), background-color .4s var(--fc-ease), transform .4s var(--fc-ease);
}
/* Hover and the auto-active state share one look, so hovering a card that is
   not currently lit reads exactly like the lit one. Lift is capped at 1px to
   keep the row from shifting. */
.fc-mod:hover {
  border-color: rgba(52, 211, 153, .55);
  background: rgba(10, 26, 21, .95);
  transform: translateY(-1px);
}
/* --- SYSTEM LAYER auto-active --------------------------------------------
   The four cards cycle while the section is in view. Only the card chrome
   dims when idle — the copy keeps its own colours so every card stays
   readable at every moment. */
.fc-arch__grid.is--scanning .fc-mod {
  border-color: rgba(52, 211, 153, .08);
  background: rgba(10, 26, 21, .42);
}
.fc-arch__grid.is--scanning .fc-mod.is--active,
.fc-arch__grid.is--scanning .fc-mod:hover {
  border-color: rgba(52, 211, 153, .55);
  background: rgba(10, 26, 21, .95);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .10),
              inset 0 0 26px rgba(8, 144, 108, .16);
}
.fc-arch__grid.is--scanning .fc-mod.is--active .fc-mod__title,
.fc-arch__grid.is--scanning .fc-mod:hover .fc-mod__title { color: #fff; }
.fc-arch__grid.is--scanning .fc-mod.is--active .fc-mod__kind,
.fc-arch__grid.is--scanning .fc-mod:hover .fc-mod__kind { color: var(--fc-em-hi); }
/* The lit card's CTA brightens with it. `border-bottom-color` was the old
   text-link affordance; the action is a bordered button now, so the whole
   surface lifts instead. */
.fc-arch__grid.is--scanning .fc-mod.is--active .fc-mod__link .fc-link,
.fc-arch__grid.is--scanning .fc-mod:hover .fc-mod__link .fc-link {
  background: rgba(52, 211, 153, .2);
  border-color: var(--fc-em-hi);
  color: #a7f3d0;
}
/* The fan drop that feeds the lit card pulses with it. */
.fc-arch__drop { transition: stroke .4s var(--fc-ease), stroke-width .4s var(--fc-ease); }
.fc-arch__drop.is--active { stroke: var(--fc-em-hi); stroke-width: 1.6; }
.fc-mod__kind {
  font-family: var(--fc-mono); font-size: .5625rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fc-text-mute);
}
.fc-mod__kind.is--done { color: var(--fc-em-hi); }
.fc-mod__name {
  margin: .75rem 0 0; font-family: var(--fc-mono); font-size: .75rem;
  font-weight: 600; letter-spacing: .02em; color: var(--fc-em-hi);
}
.fc-mod__title {
  margin: .5rem 0 0; font-family: var(--fc-sans);
  font-size: .9375rem; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.32; color: var(--fc-text-dark);
}
.fc-mod__desc { margin: .625rem 0 0; font-size: .8125rem; line-height: 1.6; color: var(--fc-text-mute); }
.fc-mod__link { margin-top: auto; padding-top: 1.125rem; }
.fc-arch__fields { margin-top: clamp(2rem, 3.5vw, 3rem); }

/* ================================================================ 6. FACULTY */
.fc-faculty__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 2.6vw, 2.5rem);
  align-items: stretch;
  margin-top: clamp(2rem, 3.5vw, 3rem);
}

/* Lead node -------------------------------------------------------------- */
.fc-lead {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  border: 1px solid var(--fc-line);
  border-radius: 1rem;
  background:
    linear-gradient(155deg, rgba(8, 144, 108, .12) 0%, rgba(6, 17, 14, 0) 42%),
    linear-gradient(180deg, rgba(10, 26, 21, .92) 0%, rgba(6, 17, 14, .96) 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(234, 245, 241, .06);
  overflow: hidden;
}
.fc-lead::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(52, 211, 153, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 211, 153, .06) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(100% 80% at 100% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(100% 80% at 100% 0%, #000 0%, transparent 78%);
}
.fc-lead__top {
  position: relative; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem;
}
.fc-lead__id { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.fc-lead__name {
  margin: 0; font-family: var(--fc-sans);
  font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.08;
  font-weight: 600; letter-spacing: -0.04em; color: #fff;
}
.fc-lead__role {
  margin: 0; font-size: .9375rem; font-weight: 500; line-height: 1.5;
  color: var(--fc-em-hi); letter-spacing: -0.01em;
}
.fc-lead__desc {
  position: relative; z-index: 2;
  margin: 1.5rem 0 0; max-width: 56ch;
  font-size: .9375rem; line-height: 1.68; color: var(--fc-text-mute);
}
.fc-lead__portrait {
  flex: none; width: 7rem; height: 8.75rem;
  border-radius: .625rem; overflow: hidden;
  border: 1px solid rgba(52, 211, 153, .28);
  background: #04100c;
  position: relative;
}
.fc-lead__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.fc-lead__portrait::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,17,14,0) 45%, rgba(6,17,14,.55) 100%);
}

.fc-caps {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 1.75rem 0 0; padding: 0; list-style: none;
}
.fc-caps li {
  padding: .5rem .875rem;
  border-radius: 5rem;
  border: 1px solid var(--fc-hair-2);
  background: rgba(234, 245, 241, .045);
  font-family: var(--fc-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .06em; color: var(--fc-text-dark);
  transition: border-color .3s var(--fc-ease), background-color .3s var(--fc-ease);
}
.fc-caps li:hover { border-color: rgba(52, 211, 153, .5); background: rgba(8, 144, 108, .16); }

.fc-lead__rail {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; margin: 1.75rem 0 0;
  background: var(--fc-hair);
  border: 1px solid var(--fc-hair);
  border-radius: .625rem; overflow: hidden;
}
.fc-lead__step { background: #07140f; padding: .875rem 1rem; position: relative; }
.fc-lead__step::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--fc-em), var(--fc-em-hi));
  opacity: .5;
}
.fc-lead__step b {
  display: block; font-family: var(--fc-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fc-em-hi);
}
.fc-lead__step span {
  display: block; margin-top: .35rem; font-size: .8125rem; line-height: 1.45; color: var(--fc-text-mute);
}

/* Expert nodes ----------------------------------------------------------- */
.fc-experts {
  position: relative;
  display: grid; grid-auto-rows: auto; gap: 1rem;
  padding-left: 2.25rem;
}
.fc-experts::before {
  content: ''; position: absolute; left: .8125rem; top: 2.75rem; bottom: 2.75rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(52,211,153,.45) 0%, rgba(52,211,153,.12) 100%);
}
html.fc-motion .fc-experts::before { animation: fcFlow 3.2s ease-in-out infinite; }
@keyframes fcFlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.fc-expert {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(4.75rem, 28%);
  align-items: start;
  gap: 1rem 1.125rem;
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--fc-line-soft);
  border-radius: .75rem;
  background: rgba(10, 26, 21, .72);
  transition: border-color .35s var(--fc-ease), background-color .35s var(--fc-ease), transform .35s var(--fc-ease);
}
.fc-expert:hover {
  border-color: rgba(52, 211, 153, .38);
  background: rgba(10, 26, 21, .95);
  transform: translateX(3px);
}
.fc-expert::before {
  content: ''; position: absolute; left: -1.4375rem; top: 1.75rem;
  width: .8125rem; height: 1px; background: rgba(52, 211, 153, .4);
}
.fc-expert::after {
  content: ''; position: absolute; left: -1.75rem; top: 1.5625rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(6, 17, 14, 1);
  border: 1.5px solid rgba(52, 211, 153, .6);
}
html.fc-motion .fc-expert::after { animation: fcNodePulse 3.6s ease-in-out infinite; }
.fc-expert:nth-child(2)::after { animation-delay: .6s; }
.fc-expert:nth-child(3)::after { animation-delay: 1.2s; }
@keyframes fcNodePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .34); }
  50%      { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
}
.fc-expert__tag {
  font-family: var(--fc-mono); font-size: .625rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fc-em-hi);
}
.fc-expert__name {
  margin: .625rem 0 0;
  font-family: var(--fc-sans); font-size: 1.125rem; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.3; color: var(--fc-text-dark);
}
.fc-expert__role {
  margin: .375rem 0 0; font-size: .8125rem; font-weight: 500; line-height: 1.5;
  color: var(--fc-em-hi); letter-spacing: -0.01em;
}

/* Text left, portrait right. On desktop the portrait stretches to the card's
   full height (a fixed ratio would leave dead space under it); on phones it
   falls back to a 4:5 frame, where stretching would collapse it to a sliver.
   Either way it carries a light hairline and no glow, so the lead card stays
   the loudest element in the section. */
.fc-expert__main { min-width: 0; }
.fc-expert__desc {
  margin: .625rem 0 0;
  font-size: .8125rem; line-height: 1.6;
  color: var(--fc-text-mute);
}
.fc-expert__caps { margin-top: .875rem; gap: .375rem; }
.fc-expert__caps li {
  padding: .3125rem .5rem;
  font-size: .625rem;
  letter-spacing: .04em;
}
.fc-expert__portrait {
  position: relative;
  align-self: stretch;
  min-height: 7.5rem;
  border-radius: .5rem;
  overflow: hidden;
  border: 1px solid var(--fc-line);
  background: rgba(6, 17, 14, .55);
}
.fc-expert__portrait img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 25%;
}

/* ============================================================== 7. FINAL CTA */
.fc-cta {
  position: relative; overflow: hidden;
  border: 1px solid var(--fc-line);
  border-radius: 1rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  background:
    linear-gradient(140deg, rgba(8, 144, 108, .16) 0%, rgba(6, 17, 14, 0) 46%),
    linear-gradient(180deg, rgba(10, 26, 21, .95) 0%, rgba(4, 16, 12, .98) 100%);
}
.fc-cta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(52, 211, 153, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 211, 153, .06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(90% 100% at 0% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(90% 100% at 0% 0%, #000 0%, transparent 72%);
}
.fc-cta__inner { position: relative; z-index: 2; max-width: 56rem; }
.fc-cta__title { margin: 1rem 0 0; color: #fff; }
.fc-cta__title span { display: block; }
.fc-cta__desc { margin: 1.25rem 0 0; max-width: 52rem; }
.fc-cta__row { margin-top: 2rem; }

/* =============================================================== 9. MOTION */
html.fc-motion .fc-reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s var(--fc-ease), transform .7s var(--fc-ease);
}
html.fc-motion .fc-reveal.is--in { opacity: 1; transform: none; }

html.fc-motion .fc-boot {
  animation: fcBoot .82s var(--fc-ease) var(--fc-d, 0ms) both;
}
@keyframes fcBoot {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* Hard stop: any motion, everywhere, the moment the visitor asks for less.
   The wires stay drawn as a solid line so the topology still reads. */
@media (prefers-reduced-motion: reduce) {
  html.fc-motion .fc-reveal,
  html.fc-motion .fc-boot { opacity: 1 !important; transform: none !important; animation: none !important; }
  html.fc-motion .fc-dot,
  html.fc-motion .fc-scan,
  html.fc-motion .fc-experts::before,
  html.fc-motion .fc-expert::after,
  html.fc-motion .fc-panel__bar i,
  html.fc-motion .fc-wire__flow { animation: none !important; transition: none !important; }
  html.fc-motion .fc-wire__flow { stroke-dasharray: none !important; stroke-opacity: .55 !important; }
  /* No scan runs here, so the map rail should read as a complete line. */
  .fc-map__progress { display: none; }
  .fc-map__wire .fc-wire__flow { stroke-dasharray: none; stroke-opacity: .55; }
  .fc-map__node, .fc-map__idx, .fc-map__name, .fc-lane, .fc-flow__step, .fc-flow__dot,
  .fc-flow__name, .fc-flow__desc, .fc-wf__node, .fc-wf__letter, .fc-frame, .fc-mod,
  .fc-dep__node { transition: none !important; }
}

/* ============================================================ 10. RESPONSIVE */

/* Sticky lead -------------------------------------------------------------
   On desktop Lucas pins while the three expert cards scroll past him. Two
   things make that work:
     · `align-self: start` un-stretches him, so the card ends right after its
       CTA instead of matching the experts column — that gap IS the travel.
     · the grid area still spans the whole row, so sticky releases exactly at
       the end of the faculty content and never bleeds into the next section.
   `top` clears the 81px sticky header plus a little breathing room. Mobile
   stacks the grid, so this is desktop-only and the flow stays
   Lucas → Hiệp → Triều → Tùng.
   NOTE: this lives in the responsive section on purpose. A media query adds no
   specificity, so keeping it beside `.fc-faculty__grid` lost to the base
   `.fc-lead { position: relative }` declared further down and silently stayed
   `relative`. Keep it after the lead rules. */
@media (min-width: 992px) {
  .fc-lead {
    align-self: start;
    position: sticky;
    top: calc(81px + 1.25rem);
  }
}

/* --- 1200px ------------------------------------------------------------- */
@media (max-width: 1199px) {
  .fc-h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
  .fc-map__name { font-size: .6875rem; }
  .fc-lane { padding-left: 1.125rem; padding-right: 1.125rem; }
  .fc-flow__step { padding-right: .875rem; }
  .fc-wf__node { padding-right: .875rem; }
  .fc-mod { padding: 1.125rem 1.0625rem 1.25rem; }
}

/* --- 992px: drop the two-column tops ------------------------------------ */
@media (max-width: 991px) {
  .fc-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .fc-panel { max-width: 30rem; }
  .fc-eng__top,
  .fc-wfs__top,
  .fc-evidence__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .fc-faculty__grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .fc-experts { grid-auto-rows: auto; padding-left: 2rem; }
  .fc-lead__desc { max-width: none; }
  .fc-arch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 767px: every topology turns vertical ------------------------------- */
@media (max-width: 767px) {
  /* capability map: rail becomes a vertical stack, lanes stack under it */
  .fc-map__rail { padding-bottom: 1.5rem; }
  .fc-map__wire { display: none; }
  .fc-map__progress { display: none; }
  .fc-map__nodes { grid-template-columns: minmax(0, 1fr); }
  .fc-map__nodes::before {
    content: ''; position: absolute; left: 1.125rem; top: 1.125rem; bottom: 1.125rem;
    width: 1px; background: rgba(21, 23, 26, .14);
  }
  .fc-map__node {
    flex-direction: row; align-items: center; gap: .875rem;
    text-align: left; padding: .5rem 0;
  }
  .fc-map__idx { flex: none; }
  .fc-map__lanes { grid-template-columns: minmax(0, 1fr); }
  .fc-lane {
    border-left: 0; border-top: 1px solid rgba(21, 23, 26, .12);
    padding: 1.375rem 1.125rem 1.5rem;
  }
  .fc-lane::before { display: none; }
  .fc-lane.is--active::after { inset: 0 auto 0 0; width: 2px; height: auto; }

  /* six-step chain becomes a vertical lane */
  .fc-flow__list { grid-template-columns: minmax(0, 1fr); }
  .fc-flow__wire { display: none; }
  .fc-flow__step { flex-direction: row; gap: .875rem; padding: 0 0 1.375rem; }
  .fc-flow__dot { flex: none; }
  .fc-flow__name { margin-top: .25rem; }
  .fc-flow__step:not(:last-child)::after {
    content: ''; position: absolute; left: .875rem; top: 1.75rem; bottom: 0;
    width: 1px; background: var(--fc-line);
  }

  /* PROVE chain becomes a vertical lane */
  .fc-wf__list { grid-template-columns: minmax(0, 1fr); }
  .fc-wf__wire { display: none; }
  .fc-wf__node { flex-direction: row; gap: .875rem; padding: 0 0 1.5rem; }
  .fc-wf__letter { flex: none; }
  .fc-wf__name { margin-top: .25rem; }
  .fc-wf__node:not(:last-child)::after {
    content: ''; position: absolute; left: 1.375rem; top: 2.75rem; bottom: 0;
    width: 1px; background: rgba(21, 23, 26, .14);
  }
  .fc-wf__node.is--active .fc-wf__letter { transform: none; }

  .fc-dep__rail { display: none; }
  .fc-dep__grid { grid-template-columns: minmax(0, 1fr); }
  /* the fan-out draws a horizontal rail with four drops — meaningless once the
     modules stack, so swap it for a single vertical connector */
  .fc-arch__fan { height: 2rem; }
  .fc-arch__fan svg { display: none; }
  .fc-arch__fan::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
    width: 1px; background: rgba(52, 211, 153, .26);
  }
  .fc-arch__grid { grid-template-columns: minmax(0, 1fr); }
  .fc-arch__core { margin-top: 1.75rem; }
  .fc-field { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .fc-lead__rail { grid-template-columns: minmax(0, 1fr); }
  .fc-lead__top { flex-direction: column-reverse; align-items: flex-start; }
  .fc-lead__portrait { width: 6rem; height: 7.5rem; }
  /* the expert card keeps text-left / portrait-right on phones — the column
     split just narrows so the copy still has a readable measure */
  .fc-expert { grid-template-columns: minmax(0, 1fr) minmax(3.75rem, 24%); gap: .875rem; }
  /* a stretched portrait would collapse into a sliver at this width */
  .fc-expert__portrait { aspect-ratio: 4 / 5; align-self: start; min-height: 0; }
  .fc-panel__labels { grid-template-columns: minmax(0, 1fr); }
}

/* --- 560px: smallest supported phones ----------------------------------- */
@media (max-width: 560px) {
  .fc-hero__role { font-size: .8125rem; padding: .625rem .75rem; }
  .fc-btn { width: 100%; padding: .9375rem 1.25rem; }
  .fc-btn-row { gap: .625rem; }
  .fc-hero__cta .fc-btn-row,
  .fc-cta__row .fc-btn-row { width: 100%; }
  .fc-lead__portrait { width: 5.25rem; height: 6.5rem; }
  .fc-caps li { font-size: .5625rem; padding: .4375rem .6875rem; }
  .fc-panel__head { padding: .75rem .875rem; }
  .fc-lane { padding-left: .875rem; padding-right: .875rem; }
  .fc-wf { padding-left: .875rem; padding-right: .875rem; }
  .fc-evidence { padding: 1.125rem; }
  .fc-map__rail { padding-left: .875rem; padding-right: .875rem; }
  .fc-map__nodes::before { left: 1.125rem; }
  .fc-expert { grid-template-columns: minmax(0, 1fr) minmax(3.5rem, 22%); gap: .75rem; padding: 1rem; }
  /* more specific than `.fc-caps li` above, which would otherwise inflate the
     expert chips on the narrowest screens */
  .fc-expert .fc-expert__caps li { font-size: .5625rem; padding: .25rem .4375rem; }
}

/* --------------------------------------------------------- 11. SMALL UTILITIES */
.fc-blocktitle { margin: 1rem 0 0; }
.fc-blockclaim { margin: 1rem 0 0; max-width: 46ch; }
.fc-linkrow { margin-top: 1.5rem; }
.fc-arch__head { margin-top: 1.25rem; }
.fc-arch__layer {
  margin: clamp(1.5rem, 2.5vw, 2rem) 0 .875rem;
  font-family: var(--fc-mono); font-size: .625rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fc-text-mute);
}
.fc-dep__title {
  margin: .75rem 0 0; font-family: var(--fc-sans); font-size: 1.0625rem;
  font-weight: 600; letter-spacing: -0.022em; line-height: 1.32; color: var(--fc-ink-3);
}
.fc-dep__desc { margin: .625rem 0 0; font-size: .875rem; line-height: 1.6; color: var(--fc-text-body); }
.fc-dep__link { margin-top: auto; padding-top: 1.125rem; }
.fc-lead__cta { position: relative; z-index: 2; margin-top: 1.5rem; }
/* Two experts link to a real profile (one internal page, one PDF). The third
   has no route yet, so its CTA is an inert <span> with the same resting look —
   no invented URL, no dead `href="#"`, and attaching a real link later is just
   swapping the tag. */
.fc-expert__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  align-self: flex-start;
  margin-top: 1rem;
  /* Same geometry as `.fc-link` (46px / .875rem / 22px side padding). The brief
     asks for the CTAs to share border-radius, height and typography, and these
     two emerald roles sit in the same section — Lucas's card uses `a.fc-link`
     while the other two use `.fc-expert__cta`, so a 42-vs-46px height and a
     13-vs-14px size were visible side by side. */
  min-height: 2.875rem;
  padding: .6875rem 1.375rem;
  border: 1.5px solid rgba(52, 211, 153, .48);
  border-radius: 5rem;
  background: rgba(52, 211, 153, .12);
  font-family: var(--fc-sans); font-size: .875rem; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.25;
  text-wrap: balance;
  color: var(--fc-em-hi);
  text-decoration: none;
  transition: background-color .25s var(--fc-ease), border-color .25s var(--fc-ease),
              color .25s var(--fc-ease), box-shadow .25s var(--fc-ease),
              transform .25s var(--fc-ease);
}
/* The hover affordance belongs to the experts that actually link somewhere;
   the inert span keeps the resting look and no pointer cursor. */
a.fc-expert__cta:hover {
  background: rgba(52, 211, 153, .2);
  border-color: var(--fc-em-hi);
  color: #a7f3d0;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(8, 144, 108, .28);
}
span.fc-expert__cta { cursor: default; }