:root {
  --ink: #082235;
  --ink-deep: #04131f;
  --ink-soft: #123849;
  --paper: #fffaf1;
  --paper-soft: #fcf1df;
  --paper-bright: #fffdf8;
  --line: #e5c99f;
  --line-strong: #d7a65f;
  --muted: #63747d;
  --muted-dark: #44555f;
  --gold: #df9829;
  --gold-dark: #b96e16;
  --gold-light: #ffd987;
  --mint: #55cf9c;
  --danger: #ff706a;
  --white: #fffdf8;
  --shadow-sm: 0 14px 30px rgba(30, 47, 56, 0.09);
  --shadow-lg: 0 28px 75px rgba(28, 43, 52, 0.16);

  --font-sans: "Be Vietnam Pro", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-mono: "DM Mono", ui-monospace, monospace;

  --fs-label: clamp(0.75rem, 0.9vw, 0.875rem);
  --fs-body: clamp(1rem, 1.08vw, 1.125rem);
  --fs-body-lg: clamp(1.125rem, 1.35vw, 1.35rem);
  --fs-lead: clamp(1.35rem, 2.05vw, 1.9rem);
  --fs-card: clamp(1.25rem, 1.5vw, 1.6rem);
  --fs-h2: clamp(3.2rem, 5.7vw, 5.9rem);
  --fs-h3: clamp(2.1rem, 3.1vw, 3.45rem);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  z-index: 50;
  inset: 0;
  opacity: 0.018;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
.container { width: min(1220px, calc(100% - 48px)); margin: 0 auto; }
.section-space { padding: clamp(90px, 10vw, 142px) 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.skip-link {
  position: fixed; z-index: 999; top: 12px; left: 12px; padding: 12px 16px; border-radius: 10px;
  color: #fff; background: var(--ink); transform: translateY(-180%); transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid rgba(223, 152, 41, .75); outline-offset: 4px; }

.page-progress { position: fixed; z-index: 301; top: 0; left: 0; width: 0; height: 4px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); box-shadow: 0 0 18px rgba(223, 152, 41, .68); }
.cursor-glow { position: fixed; z-index: 1; top: 0; left: 0; width: 340px; height: 340px; opacity: 0; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(223, 152, 41, .09), transparent 68%); transform: translate(-50%, -50%); transition: opacity .25s; }
body.cursor-ready .cursor-glow { opacity: 1; }

/* HEADER */
.site-header { position: fixed; z-index: 200; inset: 0 0 auto; height: 78px; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(4, 18, 30, .88); backdrop-filter: blur(16px); transition: background .25s, box-shadow .25s; }
.site-header.scrolled { background: rgba(4,18,30,.97); box-shadow: 0 14px 40px rgba(0,0,0,.22); }
.nav-shell { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 78px; }
.brand { display: flex; align-items: center; gap: 11px; color: #fff8ea; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255,213,132,.7); border-radius: 12px; color: #1b2c33; background: var(--gold); font: 700 27px/1 var(--font-serif); }
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font-size: 11px; letter-spacing: .15em; }
.brand-copy small { color: rgba(255,255,255,.58); font: 9px var(--font-mono); letter-spacing: .08em; }
.site-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.site-nav a { position: relative; color: rgba(255,255,255,.76); font-size: 13px; font-weight: 700; transition: color .2s; }
.site-nav a:hover, .site-nav a.active { color: #fff; }
.site-nav a::after { content: ""; position: absolute; right: 0; bottom: -12px; left: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .22s; }
.site-nav a:hover::after, .site-nav a.active::after { transform: scaleX(1); }
.language-toggle, .menu-toggle { display: inline-grid; place-items: center; color: #fff4df; border: 1px solid rgba(255,255,255,.33); background: rgba(255,255,255,.04); }
.language-toggle { grid-auto-flow: column; gap: 8px; min-width: 70px; padding: 10px 12px; border-radius: 999px; font: 12px var(--font-mono); }
.language-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 9px var(--mint); }
.menu-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; }

/* COMMON TYPE */
.section-label, .section-kicker, .story-overline {
  margin: 0; color: var(--gold-dark); font-size: var(--fs-label); font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
}
.section-label span:first-child { margin-right: 7px; color: rgba(223,152,41,.78); font-family: var(--font-mono); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 20px; border: 1px solid transparent; border-radius: 11px; font-size: 14px; font-weight: 800; transition: transform .2s, background .2s, color .2s; }
.button:hover { transform: translateY(-3px); }
.button-primary { color: #1b2b33; border-color: var(--gold); background: var(--gold); box-shadow: 0 12px 26px rgba(223,152,41,.18); }
.button-primary:hover { background: #f1b448; }
.button-ghost { color: #fff9ed; border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.04); }
.button-ghost:hover { color: var(--ink); border-color: var(--gold); background: var(--gold); }

/* HERO - KEEP CLASSIC */
.hero-classic { position: relative; isolation: isolate; min-height: 780px; overflow: hidden; padding-top: 78px; color: #fff8ea; background: linear-gradient(135deg, #06111e 0%, #092635 58%, #0e3f47 100%); }
.hero-classic::before { content: ""; position: absolute; z-index: -3; inset: 0; opacity: .12; background: url("assets/hoi-an-night.jpg") center / cover; mix-blend-mode: luminosity; }
.hero-classic::after { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(3,14,24,.88), transparent 62%), linear-gradient(0deg, rgba(3,13,23,.62), transparent 60%); }
.hero-grid { position: absolute; z-index: -1; inset: 0; opacity: .2; background-image: linear-gradient(rgba(124,183,191,.19) 1px, transparent 1px), linear-gradient(90deg, rgba(124,183,191,.19) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(90deg, #000, transparent 78%); }
.hero-orbit { position: absolute; z-index: -1; border: 1px solid rgba(244,195,103,.2); border-radius: 50%; }
.hero-orbit-one { top: -390px; right: -230px; width: 760px; height: 760px; animation: slowRotate 28s linear infinite; }
.hero-orbit-two { bottom: -210px; left: 40%; width: 420px; height: 420px; border-style: dashed; animation: slowRotate 20s linear reverse infinite; }
.hero-classic-grid { display: grid; grid-template-columns: 1fr .78fr; align-items: center; gap: 70px; min-height: 702px; }
.hero-copy { padding: 70px 0; }
.hero-kicker { margin: 0 0 17px; color: #f5bd5e; font: 12px var(--font-mono); letter-spacing: .06em; }
.hero-copy h1 { margin: 0; color: #fff9eb; font: 700 clamp(4.5rem, 8.7vw, 8.5rem)/.78 var(--font-serif); letter-spacing: -.07em; }
.hero-role { margin: 29px 0 10px; color: #fff; font-size: clamp(1.05rem,1.4vw,1.25rem); font-weight: 800; }
.hero-description { max-width: 610px; margin: 0; color: rgba(255,255,255,.77); font-size: var(--fs-body); line-height: 1.82; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
.hero-social { display: flex; gap: 10px; margin-top: 28px; }
.hero-social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #ffe9bd; background: rgba(255,255,255,.04); transition: background .2s, color .2s, transform .2s; }
.hero-social a:hover { color: var(--ink); background: var(--gold); transform: translateY(-3px); }
.hero-image { position: relative; align-self: end; margin: 0; }
.hero-image-frame { position: relative; min-height: 575px; overflow: hidden; border: 1px solid rgba(247,203,119,.45); border-bottom: 0; border-radius: 290px 290px 0 0; background: radial-gradient(circle at 50% 18%, rgba(255,230,176,.3), rgba(220,158,61,.08) 57%, rgba(2,15,25,.15)); box-shadow: 0 30px 70px rgba(0,0,0,.28); }
.hero-image-frame::before { content: ""; position: absolute; z-index: 1; inset: 14px; border: 1px dashed rgba(252,210,126,.35); border-bottom: 0; border-radius: 270px 270px 0 0; pointer-events: none; }
.hero-image-frame img { position: absolute; right: -2%; bottom: 0; left: -2%; width: 104%; height: 100%; object-fit: contain; object-position: bottom center; filter: saturate(.96) contrast(1.05); }
.hero-image figcaption { display: flex; justify-content: space-between; gap: 15px; margin-top: 13px; color: rgba(255,255,255,.54); font: 10px var(--font-mono); letter-spacing: .08em; }

/* PROFILE */
.profile-section { position: relative; isolation: isolate; overflow: hidden; padding: clamp(96px, 11vw, 160px) 0 clamp(100px, 10vw, 148px); background: linear-gradient(135deg, #fffdf8, #fff8ed 52%, #fcf0df); }
.profile-grid-bg { position: absolute; z-index: -1; inset: 0; opacity: .28; background-image: linear-gradient(rgba(180,136,79,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(180,136,79,.13) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg, transparent, #000 20%, transparent 80%); }
.profile-orbit { position: absolute; z-index: -1; border: 1px solid rgba(193,126,31,.18); border-radius: 50%; }
.profile-orbit-left { bottom: -23rem; left: -20rem; width: 44rem; height: 44rem; border-style: dashed; }
.profile-orbit-right { top: 8rem; right: -25rem; width: 52rem; height: 52rem; }
.profile-heading { display: grid; grid-template-columns: minmax(180px,.27fr) minmax(0,1fr) auto; align-items: end; gap: clamp(28px,5vw,76px); margin-bottom: clamp(52px,6vw,80px); }
.section-index-block { display: grid; align-content: end; gap: 16px; }
.section-index-block > span { color: #d99328; font: 700 clamp(4.1rem,6vw,6.2rem)/.7 var(--font-serif); letter-spacing: -.075em; }
.section-index-block p { margin: 0; color: #a9681a; font-size: var(--fs-label); font-weight: 800; letter-spacing: .14em; }
.profile-heading h2 { max-width: 870px; margin: 10px 0 0; color: var(--ink); font-size: var(--fs-h2); font-weight: 800; line-height: .98; letter-spacing: -.065em; text-wrap: balance; }
.profile-heading h2 em { color: #c67a17; font-family: var(--font-serif); font-size: 1.18em; font-style: italic; font-weight: 700; letter-spacing: -.045em; }
.reading-note { display: grid; justify-items: center; gap: 9px; padding-bottom: 10px; color: #9b8468; }
.reading-note span { width: 1px; height: 52px; background: linear-gradient(#cb8020, rgba(203,128,32,0)); }
.reading-note small { font: 10px var(--font-mono); letter-spacing: .1em; writing-mode: vertical-rl; }
.profile-layout { display: grid; grid-template-columns: minmax(268px,330px) minmax(0,1fr); align-items: start; gap: clamp(54px,8vw,130px); }
.profile-rail { position: sticky; top: 108px; }
.portrait-stage { position: relative; padding: 10px 14px 14px 0; }
.portrait-offset { position: absolute; inset: 25px 0 0 18px; border: 1px solid rgba(196,126,29,.38); border-radius: 2rem; transform: translate(9px,10px); transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.portrait-stage:hover .portrait-offset { transform: translate(4px,5px); }
.portrait-card { position: relative; z-index: 1; padding: 11px; overflow: hidden; border: 1px solid rgba(220,182,117,.78); border-radius: 2rem; background: rgba(255,254,249,.84); box-shadow: 0 24px 48px rgba(74,48,13,.09); }
.portrait-label { position: absolute; z-index: 3; right: 18px; bottom: 18px; padding: 8px 10px; border: 1px solid rgba(199,126,23,.35); border-radius: 999px; color: #975d13; background: rgba(255,250,242,.96); font: 10px var(--font-mono); letter-spacing: .06em; }
.portrait-image { position: relative; height: 398px; overflow: hidden; border-radius: 1.45rem; background: radial-gradient(circle at 50% 22%, #ffecc8, #f5dfb6 55%, #edcf99); }
.portrait-image::before { content: ""; position: absolute; z-index: 1; inset: 13px; border: 1px dashed rgba(185,117,23,.27); border-radius: 1.15rem; pointer-events: none; }
.portrait-image::after { content: ""; position: absolute; z-index: 2; right: -26%; bottom: -52%; width: 76%; height: 76%; border: 1px solid rgba(204,134,31,.25); border-radius: 50%; }
.portrait-image img { position: absolute; right: -2%; bottom: 0; left: -2%; width: 104%; height: 100%; object-fit: contain; object-position: bottom center; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.portrait-stage:hover .portrait-image img { transform: scale(1.035) translateY(-2px); }
.status-card { display: flex; align-items: flex-start; gap: 11px; width: min(100%,308px); margin: -4px 0 0 auto; padding: 16px; border: 1px solid rgba(217,178,113,.62); border-radius: 15px; background: rgba(255,255,255,.86); box-shadow: var(--shadow-sm); }
.status-dot { width: 10px; height: 10px; flex: 0 0 auto; margin-top: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(85,207,156,.12); }
.status-card small { display: block; color: #a76517; font-size: var(--fs-label); font-weight: 800; letter-spacing: .11em; }
.status-card strong { display: block; margin-top: 6px; color: #24343d; font-size: 13px; line-height: 1.45; }
.rail-meta { display: flex; justify-content: space-between; gap: 15px; padding: 18px 5px 14px; color: #829096; font: 10px var(--font-mono); letter-spacing: .06em; }
.rail-note { display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 16px 5px 0; border-top: 1px solid rgba(210,176,119,.58); color: #63747d; font-size: 13px; line-height: 1.65; }
.rail-note i { margin-top: 3px; color: #bc7418; }
.profile-story { min-width: 0; }
.story-lead-block { display: grid; grid-template-columns: 50px minmax(0,1fr); align-items: start; gap: 18px; padding: 2px 0 31px; border-bottom: 1px solid rgba(215,180,124,.7); }
.story-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(191,122,28,.32); border-radius: 12px; color: #a76314; background: rgba(255,248,235,.85); font: 20px var(--font-serif); }
.story-lead { max-width: 820px; margin: 11px 0 0; color: var(--ink); font-size: var(--fs-lead); font-weight: 700; line-height: 1.46; letter-spacing: -.03em; }
.story-copy { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(28px,4vw,62px); padding: 34px 0 38px; }
.story-copy p { margin: 0; color: var(--muted-dark); font-size: var(--fs-body); line-height: 1.86; }
.work-principles { padding: clamp(24px,3vw,34px); border: 1px solid rgba(213,177,118,.58); border-radius: var(--radius-md); background: rgba(255,255,255,.58); box-shadow: 0 18px 46px rgba(84,55,14,.055); }
.work-principles-head { display: flex; align-items: end; justify-content: space-between; gap: 26px; margin-bottom: 22px; }
.work-principles-head p:last-child { max-width: 615px; margin: 9px 0 0; color: #6a7b83; font-size: var(--fs-body); line-height: 1.65; }
.work-principles-head > span { flex: 0 0 116px; height: 1px; margin-bottom: 7px; background: linear-gradient(90deg, rgba(192,121,23,0), rgba(192,121,23,.65)); }
.principles-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.principle-card { position: relative; min-height: 235px; padding: 20px; overflow: hidden; border: 1px solid rgba(210,176,119,.54); border-radius: 15px; background: rgba(255,253,248,.86); transition: transform .25s, border-color .25s, box-shadow .25s; }
.principle-card:hover { border-color: rgba(188,113,20,.66); box-shadow: var(--shadow-sm); transform: translateY(-5px); }
.principle-card-top { display: flex; align-items: center; justify-content: space-between; }
.principle-card-no { color: rgba(165,99,18,.58); font: 16px var(--font-mono); }
.principle-card-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(190,120,26,.34); border-radius: 11px; color: #b76b15; background: #fff8ea; font-size: 17px; }
.principle-card h3 { margin: 28px 0 11px; color: var(--ink); font-size: var(--fs-card); line-height: 1.2; letter-spacing: -.03em; }
.principle-card p { margin: 0; color: #667780; font-size: var(--fs-body); line-height: 1.65; }
.principle-card::after { content: ""; position: absolute; right: 20px; bottom: 18px; left: 20px; height: 2px; background: linear-gradient(90deg,var(--gold),rgba(223,152,41,.12)); }
.snapshot-section { display: grid; grid-template-columns: minmax(240px,.52fr) minmax(0,1.48fr); align-items: start; gap: clamp(30px,5vw,80px); margin-top: clamp(44px,6vw,78px); padding-top: 29px; border-top: 1px solid rgba(215,180,124,.72); }
.snapshot-intro > p:last-child { max-width: 320px; margin: 11px 0 0; color: #6e7e85; font-size: var(--fs-body); line-height: 1.65; }
.snapshot-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.snapshot-card { position: relative; min-height: 206px; padding: 21px; overflow: hidden; border: 1px solid rgba(216,181,123,.62); border-radius: 16px; background: rgba(255,253,248,.8); }
.snapshot-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg,#d98f25,rgba(217,143,37,.18)); }
.snapshot-card-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.snapshot-card-head p { margin: 0; color: #9b621b; font-size: var(--fs-label); font-weight: 800; letter-spacing: .1em; }
.snapshot-card-head span { color: rgba(159,97,21,.5); font: 14px var(--font-mono); }
.snapshot-card strong { display: block; margin-top: 19px; color: #0b293b; font-size: var(--fs-card); line-height: 1.25; letter-spacing: -.035em; }
.snapshot-card small { display: block; margin-top: 12px; color: #6b7a81; font-size: 13px; line-height: 1.6; }
.snapshot-card .card-meter { position: absolute; right: 21px; bottom: 18px; left: 21px; height: 3px; overflow: hidden; border-radius: 99px; background: #f0e1cc; }
.snapshot-card .card-meter::after { content: ""; display: block; width: 65%; height: 100%; background: var(--gold); }
.snapshot-card:nth-child(2) .card-meter::after { width: 79%; }.snapshot-card:nth-child(3) .card-meter::after { width: 56%; }

/* CAPABILITIES */
.capabilities-section { position: relative; isolation: isolate; overflow: hidden; padding: clamp(96px,11vw,154px) 0; color: #fff8eb; background: linear-gradient(135deg,#061623,#0a3340 55%,#0d4b4f); }
.capability-bg-grid { position: absolute; z-index: -1; inset: 0; opacity: .18; background-image: linear-gradient(rgba(129,196,195,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(129,196,195,.2) 1px,transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle at 68% 38%,#000,transparent 63%); }
.capability-heading { display: flex; align-items: end; justify-content: space-between; gap: 70px; margin-bottom: 48px; }
.capability-heading h2, .workflow-heading h2, .evidence-heading h2, .internship-copy h2, .contact-copy h2 { margin: 15px 0 0; color: inherit; font-size: var(--fs-h3); font-weight: 800; line-height: 1.04; letter-spacing: -.055em; }
.capability-heading h2 em, .workflow-heading h2 em, .evidence-heading h2 em, .internship-copy h2 em, .contact-copy h2 em { color: var(--gold-light); font-family: var(--font-serif); font-size: 1.16em; font-style: italic; letter-spacing: -.04em; }
.capability-heading > p { max-width: 430px; margin: 0; color: rgba(255,255,255,.75); font-size: var(--fs-body); line-height: 1.75; }
.capability-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.capability-card { position: relative; min-height: 420px; padding: 25px; overflow: hidden; border: 1px solid rgba(245,193,95,.42); border-radius: 20px; color: #fff8ea; background: rgba(2,20,30,.32); text-align: left; transition: transform .25s, border-color .25s, background .25s, box-shadow .25s; }
.capability-card:hover, .capability-card.active { border-color: rgba(255,211,118,.92); background: rgba(241,177,50,.10); box-shadow: 0 22px 40px rgba(0,0,0,.14); transform: translateY(-6px); }
.capability-card::before { content: ""; position: absolute; top: -70px; right: -62px; width: 190px; height: 190px; border: 1px solid rgba(242,188,87,.16); border-radius: 50%; }
.capability-card-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.capability-card-code { color: #f4bd5b; font: 15px var(--font-mono); }
.capability-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(246,196,104,.52); border-radius: 14px; color: #ffd67e; background: rgba(239,183,83,.1); font-size: 22px; }
.capability-card h3 { margin: 30px 0 8px; color: #fff8ea; font-size: clamp(1.65rem,2.1vw,2.25rem); line-height: 1.08; letter-spacing: -.04em; }
.capability-subtitle { margin: 0; color: #f8c76c; font-size: 15px; font-weight: 700; line-height: 1.55; }
.capability-summary { margin: 17px 0 0; color: rgba(255,255,255,.76); font-size: var(--fs-body); line-height: 1.72; }
.capability-tools { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 21px; }
.capability-tools span { padding: 7px 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 99px; color: #ddf2e8; font-size: 12px; font-weight: 700; }
.capability-card .explore { position: absolute; right: 24px; bottom: 22px; display: flex; align-items: center; gap: 8px; color: #f7c66c; font-size: 14px; font-weight: 800; }
.capability-card .explore i { transition: transform .2s; }.capability-card:hover .explore i { transform: translateX(3px); }
.capability-detail { display: grid; grid-template-columns: minmax(0,1.03fr) minmax(320px,.97fr); gap: 0; min-height: 360px; margin-top: 22px; overflow: hidden; border: 1px solid rgba(246,196,104,.39); border-radius: 20px; background: rgba(2,17,27,.42); }
.capability-detail-copy { padding: clamp(28px,4vw,44px); }
.detail-label { color: #f3bb58; font: 12px var(--font-mono); letter-spacing: .1em; }
.capability-detail h3 { max-width: 660px; margin: 15px 0; color: #fff8ea; font-size: clamp(2rem,3vw,3.5rem); line-height: 1.03; letter-spacing: -.05em; }
.capability-detail-copy > p { max-width: 690px; margin: 0; color: rgba(255,255,255,.78); font-size: var(--fs-body); line-height: 1.8; }
.detail-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-top: 28px; }
.detail-columns h4 { margin: 0 0 10px; color: #f6c56d; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.detail-columns ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.detail-columns li { display: flex; gap: 10px; color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.55; }.detail-columns li i { margin-top: 3px; color: var(--mint); }
.capability-detail-visual { position: relative; display: grid; place-items: center; overflow: hidden; border-left: 1px solid rgba(255,255,255,.12); background: linear-gradient(145deg,rgba(19,78,84,.65),rgba(2,22,34,.5)); }
.capability-detail-visual::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(229,181,89,.65) 1px,transparent 1px),linear-gradient(90deg,rgba(229,181,89,.65) 1px,transparent 1px); background-size: 27px 27px; }
.detail-orbit { position: relative; z-index: 1; width: 205px; height: 205px; border: 1px dashed rgba(85,207,156,.55); border-radius: 50%; animation: slowRotate 20s linear infinite; }.detail-orbit::before,.detail-orbit::after { content: ""; position: absolute; border-radius: 50%; }.detail-orbit::before { inset: 35px; border: 1px solid rgba(246,196,104,.48); }.detail-orbit::after { top: calc(50% - 48px); left: calc(50% - 48px); width: 96px; height: 96px; border: 1px solid rgba(246,196,104,.75); background: rgba(239,183,83,.08); }
.detail-orbit i { position: absolute; z-index: 2; top: calc(50% - 16px); left: calc(50% - 14px); color: #f9ca6f; font-size: 30px; }
.detail-outcome { position: absolute; z-index: 2; right: 22px; bottom: 22px; max-width: 235px; padding: 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; color: rgba(255,255,255,.82); background: rgba(2,16,27,.55); font-size: 13px; line-height: 1.5; }.detail-outcome strong { display: block; margin-bottom: 5px; color: #aef0d2; font-size: 12px; letter-spacing: .06em; }

/* WORKFLOW */
.workflow-section { background: var(--paper-soft); }
.workflow-heading { max-width: 900px; }.workflow-heading > p:last-child { max-width: 760px; margin: 21px 0 0; color: var(--muted-dark); font-size: var(--fs-body-lg); line-height: 1.75; }
.workflow-shell { display: grid; grid-template-columns: 390px minmax(0,1fr); gap: 28px; margin-top: 44px; }
.workflow-steps { display: grid; gap: 12px; }.workflow-step { display: grid; grid-template-columns: 46px 45px minmax(0,1fr) 18px; align-items: center; gap: 13px; min-height: 104px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; color: var(--muted-dark); background: rgba(255,255,255,.65); text-align: left; transition: .22s; }.workflow-step:hover,.workflow-step.active { color: var(--ink); border-color: var(--gold); background: var(--paper-bright); box-shadow: var(--shadow-sm); }.step-no { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--gold-dark); background: #fcf0dc; font: 20px var(--font-serif); }.workflow-step.active .step-no { color: #25353e; background: var(--gold); }.step-icon { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid var(--line); border-radius: 11px; color: var(--gold-dark); font-size: 17px; }.workflow-step strong { display: block; font-size: 21px; line-height: 1.1; }.workflow-step small { display: block; margin-top: 7px; font-size: 13px; line-height: 1.4; }
.workflow-console { min-height: 455px; overflow: hidden; border: 1px solid rgba(24,76,91,.56); border-radius: 20px; color: #fff8e8; background: radial-gradient(circle at 86% 14%,rgba(48,120,130,.34),transparent 22rem),#061d2c; box-shadow: var(--shadow-lg); }.console-bar { display:flex; align-items:center; gap:8px; height:51px; padding:0 18px; border-bottom:1px solid rgba(255,255,255,.11); background:rgba(0,0,0,.16); }.console-bar span{width:10px;height:10px;border-radius:50%;}.console-bar span:nth-child(1){background:#ff6c65}.console-bar span:nth-child(2){background:#f6c04c}.console-bar span:nth-child(3){background:#60c67f}.console-bar b{margin-left:7px;color:rgba(255,255,255,.58);font:12px var(--font-mono)}
.console-grid { display:grid; grid-template-columns:1.1fr .9fr; min-height:404px; }.console-copy { padding:38px 40px; }.console-status{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:99px;color:#d8f5e4;background:rgba(81,204,153,.13);font:11px var(--font-mono);letter-spacing:.04em}.console-status i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint)}.console-copy h3{margin:21px 0 14px;color:#fff7e5;font-size:clamp(2.3rem,3.4vw,3.8rem);line-height:1.02;letter-spacing:-.05em}.console-copy p{max-width:560px;margin:0;color:rgba(255,255,255,.78);font-size:var(--fs-body);line-height:1.8}.console-objectives{display:grid;gap:10px;margin:25px 0 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.14);list-style:none}.console-objectives li{color:rgba(255,255,255,.82);font-size:15px;line-height:1.55}.console-objectives i{margin-right:8px;color:var(--mint)}.console-command{display:flex;align-items:center;gap:10px;margin-top:25px;padding:14px 16px;border:1px solid rgba(120,191,205,.22);border-radius:12px;color:#f3be5c;background:rgba(3,21,33,.55);font:12px/1.55 var(--font-mono)}.console-command span:nth-child(2){color:#f4d3a0}.console-command button{margin-left:auto;border:0;color:#91cdd7;background:transparent;font:11px var(--font-mono)}
.console-visual{position:relative;display:grid;place-items:center;overflow:hidden;border-left:1px solid rgba(255,255,255,.11)}.console-visual::before{content:"";position:absolute;inset:0;opacity:.17;background-image:linear-gradient(rgba(111,186,196,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(111,186,196,.55) 1px,transparent 1px);background-size:29px 29px}.console-radar{position:relative;width:225px;height:225px;border:1px solid rgba(245,188,81,.65);border-radius:50%;box-shadow:inset 0 0 0 38px rgba(245,188,81,.03),inset 0 0 0 75px rgba(245,188,81,.03)}.console-radar::before,.console-radar::after{content:"";position:absolute;background:rgba(245,188,81,.35)}.console-radar::before{top:50%;left:50%;width:1px;height:100%;transform:translateY(-50%)}.console-radar::after{top:50%;left:0;width:100%;height:1px}.radar-scan{position:absolute;top:50%;left:50%;width:50%;height:1px;background:linear-gradient(90deg,rgba(255,213,119,.9),transparent);transform-origin:left;animation:scanRadar 3s linear infinite}.radar-center,.radar-point{position:absolute;z-index:2;border-radius:50%;background:var(--mint);box-shadow:0 0 13px var(--mint)}.radar-center{top:calc(50% - 6px);left:calc(50% - 6px);width:12px;height:12px}.radar-point{width:7px;height:7px}.point-one{top:24%;left:68%}.point-two{top:70%;left:26%}.point-three{top:64%;left:77%}
.principle-strip { display:grid; grid-template-columns:1.32fr repeat(4,1fr); margin-top:28px; overflow:hidden; border:1px solid rgba(226,180,105,.34); border-radius:18px; background:linear-gradient(90deg,#fff3dc,#fcf8ef); }.principle-quote{padding:25px 27px;border-right:1px solid var(--line);color:#554022;font:28px/1.22 var(--font-serif)}.strip-principle{padding:21px 17px;border-right:1px solid var(--line)}.strip-principle:last-child{border-right:0}.strip-principle i{color:var(--gold-dark);font-size:23px}.strip-principle strong{display:block;margin-top:11px;color:var(--gold-dark);font-size:14px}.strip-principle span{display:block;margin-top:6px;color:var(--muted-dark);font-size:13px;line-height:1.5}

/* EVIDENCE */
.evidence-heading { display:flex; align-items:end; justify-content:space-between; gap:70px; margin-bottom:38px; }.evidence-heading > p{max-width:450px;margin:0;color:var(--muted-dark);font-size:var(--fs-body);line-height:1.76}.evidence-guide{display:flex;align-items:flex-start;gap:13px;margin:0 0 25px;padding:15px 17px;border-left:3px solid var(--gold);color:var(--gold-dark);background:rgba(239,183,83,.09)}.evidence-guide i{margin-top:3px;font-size:20px}.evidence-guide p{margin:0;font-size:var(--fs-body);line-height:1.65}.lab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}.lab-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.67);transition:transform .22s,border-color .22s,box-shadow .22s}.lab-card:hover{border-color:rgba(194,121,26,.7);box-shadow:var(--shadow-lg);transform:translateY(-6px)}.lab-visual{position:relative;height:205px;overflow:hidden;color:#ffe9be;background:linear-gradient(135deg,#061c2a,#15505a)}.lab-visual::before{content:"";position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(241,183,78,.8) 1px,transparent 1px),linear-gradient(90deg,rgba(241,183,78,.8) 1px,transparent 1px);background-size:21px 21px}.lab-visual.network,.lab-visual.monitor{display:grid;place-items:center}.mini-network{position:relative;z-index:1;display:flex;align-items:center;gap:12px}.mini-node{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(248,196,88,.72);border-radius:50%;color:#ffca66;background:rgba(239,183,83,.12)}.mini-line{width:38px;height:1px;background:repeating-linear-gradient(90deg,#f0b44e 0 3px,transparent 3px 8px)}.lab-visual.linux{display:grid;grid-template-columns:.72fr 1.28fr;align-items:center;gap:15px;padding:28px}.mini-rack{position:relative;z-index:1;display:grid;gap:7px;padding:9px;border:1px solid rgba(248,196,88,.7);border-radius:7px}.mini-rack span{display:block;width:58px;height:14px;border-radius:2px;background:#204959}.mini-rack span::after{content:"";display:block;width:4px;height:4px;margin:5px 4px 0 auto;border-radius:50%;background:var(--mint)}.mini-terminal{position:relative;z-index:1;color:#dff9e9;font:10px/1.8 var(--font-mono)}.mini-terminal p{margin:0}.mini-terminal b{color:#f1bd5b;font-weight:400}.mini-monitor{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:12px;width:75%}.mini-monitor>div{padding:14px;border:1px solid rgba(255,255,255,.13);border-radius:10px;color:rgba(255,255,255,.65);background:rgba(0,0,0,.15);font:10px var(--font-mono)}.mini-monitor strong{display:block;margin-top:6px;color:var(--mint);font-size:17px}.lab-content{display:flex;flex:1;flex-direction:column;padding:26px}.lab-kicker{color:var(--gold-dark);font:11px var(--font-mono);letter-spacing:.08em}.lab-content h3{margin:14px 0 10px;color:var(--ink);font-size:clamp(1.65rem,2.1vw,2.15rem);line-height:1.08;letter-spacing:-.04em}.lab-content p{margin:0;color:var(--muted-dark);font-size:var(--fs-body);line-height:1.72}.lab-tags{display:flex;flex-wrap:wrap;gap:7px;margin:19px 0}.lab-tags span{padding:7px 9px;border:1px solid var(--line);border-radius:99px;color:var(--gold-dark);font-size:12px;font-weight:800}.lab-detail{align-self:flex-start;margin-top:auto;padding:0;border:0;color:var(--ink);background:transparent;font-size:14px;font-weight:800}.lab-detail:hover{color:var(--gold-dark)}.lab-detail i{margin-left:7px}

/* TOOLKIT & INTERNSHIP */
.toolkit-section{padding:78px 0;color:#fff8e9;background:#061b2a}.toolkit-section .section-label{color:#f5bd5c}.toolkit-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}.toolkit-track{display:flex;gap:11px;width:max-content;animation:drift 28s linear infinite}.toolkit-track span{padding:13px 17px;border:1px solid rgba(239,185,91,.36);border-radius:99px;color:#fce9c1;background:rgba(255,255,255,.035);font-size:14px;font-weight:700;white-space:nowrap}
.internship-section{background:linear-gradient(135deg,#fff9ee,#f7ead6)}.internship-layout{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:82px}.internship-copy>p:not(.section-label){max-width:740px;color:var(--muted-dark);font-size:var(--fs-body);line-height:1.82}.role-board{padding:30px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.56);box-shadow:var(--shadow-lg)}.role-board>span{display:block;color:var(--gold-dark);font:12px var(--font-mono);letter-spacing:.08em}.role-board h3{margin:14px 0 22px;color:var(--ink);font-size:clamp(2rem,2.7vw,2.9rem);line-height:1}.role-list{display:grid;gap:10px}.role-list div{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid var(--line);border-radius:11px;color:#35434b;background:#fffaf1;font-size:14px;font-weight:800}.role-list i{color:var(--mint)}

/* CONTACT */
.contact-section{color:#fff7e8;background:linear-gradient(135deg,#061725,#0e3942)}.contact-section .section-label{color:#f5bd5c}.contact-layout{display:grid;grid-template-columns:.9fr 1fr;gap:84px}.contact-copy>p:not(.section-label){max-width:560px;color:rgba(255,255,255,.74);font-size:var(--fs-body);line-height:1.85}.contact-list{display:grid;gap:13px;margin-top:29px}.contact-list a,.contact-list span{color:rgba(255,255,255,.82);font-size:var(--fs-body)}.contact-list i{width:25px;color:#f1b655}.copy-email{display:inline-flex;align-items:center;gap:9px;margin-top:25px;padding:0;border:0;color:#f6c66a;background:transparent;font-size:14px;font-weight:800}.contact-form{display:grid;gap:17px;padding:31px;border:1px solid rgba(239,185,91,.3);border-radius:18px;background:rgba(255,255,255,.06)}.form-row{display:grid;gap:8px}.form-row label{color:#f5dfb3;font-size:13px;font-weight:800;letter-spacing:.05em}.form-row input,.form-row textarea{width:100%;padding:14px 15px;border:1px solid rgba(255,255,255,.17);border-radius:10px;outline:0;color:#fff8eb;background:rgba(0,0,0,.16);font-size:16px}.form-row textarea{resize:vertical}.form-row input:focus,.form-row textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(239,183,83,.13)}.form-feedback{min-height:18px;margin:-5px 0 0;color:#f7d18b;font-size:13px}

/* FOOTER & DIALOG */
.site-footer{padding:23px 0;color:rgba(255,255,255,.58);background:#03101a;font-size:13px}.footer-shell{display:flex;justify-content:space-between;gap:20px}.footer-shell p{margin:0}.back-to-top{position:fixed;z-index:100;right:24px;bottom:24px;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(238,184,82,.72);border-radius:50%;opacity:0;pointer-events:none;color:#1b2c37;background:var(--gold);box-shadow:0 12px 24px rgba(0,0,0,.16);transform:translateY(14px);transition:.22s}.back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.lab-dialog{width:min(950px,calc(100% - 28px));border:1px solid rgba(231,178,80,.58);border-radius:20px;color:var(--ink);background:#fffaf0;box-shadow:0 34px 100px rgba(0,0,0,.36)}.lab-dialog::backdrop{background:rgba(3,15,25,.78);backdrop-filter:blur(4px)}.dialog-shell{position:relative;padding:42px}.dialog-close{position:absolute;top:17px;right:17px;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;color:var(--ink);background:#fffdf7}.dialog-shell>h2{max-width:730px;margin:13px 0;color:var(--ink);font-size:clamp(2.4rem,4.2vw,4rem);line-height:1.02;letter-spacing:-.05em}.dialog-shell>p:not(.section-label){max-width:790px;color:var(--muted-dark);font-size:var(--fs-body);line-height:1.8}.dialog-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:30px}.dialog-columns section{padding:19px;border:1px solid var(--line);border-radius:14px;background:#fffdf8}.dialog-columns h3{margin:0 0 13px;color:var(--gold-dark);font-size:14px}.dialog-columns ul{display:grid;gap:10px;margin:0;padding-left:18px;color:var(--muted-dark);font-size:15px;line-height:1.55}

/* MOTION */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}.reveal.show{opacity:1;transform:none}
@keyframes slowRotate { to { transform: rotate(360deg); } }
@keyframes scanRadar { to { transform: rotate(360deg); } }
@keyframes drift { to { transform: translateX(-50%); } }

/* RESPONSIVE */
@media (max-width: 1080px) {
  .hero-classic-grid{grid-template-columns:1fr .8fr;gap:40px}.profile-heading{grid-template-columns:160px minmax(0,1fr)}.reading-note{display:none}.profile-layout{gap:55px}.snapshot-section{grid-template-columns:1fr}.snapshot-intro>p:last-child{max-width:630px}.capability-heading,.evidence-heading{gap:45px}.capability-detail{grid-template-columns:1fr}.capability-detail-visual{min-height:270px;border-top:1px solid rgba(255,255,255,.12);border-left:0}.principle-strip{grid-template-columns:repeat(2,1fr)}.principle-quote{grid-column:span 2;border-bottom:1px solid var(--line)}.internship-layout,.contact-layout{gap:55px}
}
@media (max-width: 900px) {
  .menu-toggle{display:grid}.site-nav{position:fixed;top:78px;right:0;left:0;display:none;align-items:stretch;gap:0;padding:13px 24px 26px;border-bottom:1px solid rgba(255,255,255,.12);background:#061521}.site-nav.open{display:flex;flex-direction:column}.site-nav a{padding:14px 0}.site-nav a::after{display:none}.language-toggle{margin-left:auto}.hero-classic{min-height:0}.hero-classic-grid{grid-template-columns:1fr;padding:72px 0 0}.hero-copy{padding:0}.hero-image{width:min(100%,550px);justify-self:center}.hero-image-frame{min-height:510px}.profile-heading{grid-template-columns:1fr;margin-bottom:44px}.section-index-block{display:flex;align-items:end;gap:14px}.section-index-block>span{font-size:58px}.profile-layout{grid-template-columns:1fr}.profile-rail{position:static;display:grid;grid-template-columns:minmax(245px,310px) 1fr;align-items:end;gap:22px}.portrait-stage{grid-row:span 3}.status-card{margin:0;width:100%}.rail-meta{padding:0 4px}.rail-note{padding:14px 4px 0}.story-copy{grid-template-columns:1fr}.principles-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.capability-heading,.evidence-heading{display:block}.capability-heading>p,.evidence-heading>p{margin-top:20px}.capability-grid{grid-template-columns:1fr}.capability-card{min-height:350px}.workflow-shell{grid-template-columns:1fr}.workflow-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.console-grid{grid-template-columns:1fr}.console-visual{min-height:285px;border-top:1px solid rgba(255,255,255,.12);border-left:0}.lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lab-card:last-child{grid-column:span 2}.internship-layout,.contact-layout{grid-template-columns:1fr}.role-board{max-width:680px}
}
@media (max-width: 660px) {
  .container{width:min(100% - 32px,1220px)}.section-space{padding:82px 0}.brand-copy{display:none}.nav-shell{gap:13px}.hero-classic-grid{padding-top:42px}.hero-copy h1{font-size:clamp(4.3rem,21vw,6.8rem)}.hero-role{font-size:17px}.hero-description{font-size:16px}.hero-image-frame{min-height:415px}.hero-image figcaption{font-size:9px}.profile-section{padding:82px 0}.profile-heading h2{font-size:clamp(3rem,12vw,4.45rem)}.profile-heading h2 em{white-space:normal}.profile-rail{display:block}.portrait-stage{width:min(310px,94%);margin:0 auto}.portrait-image{height:355px}.status-card{width:min(100%,310px);margin:0 auto}.rail-meta{max-width:310px;margin:17px auto 0}.rail-note{max-width:310px;margin:0 auto}.story-lead-block{grid-template-columns:43px minmax(0,1fr);gap:13px;padding-bottom:25px}.story-mark{width:38px;height:38px}.story-lead{font-size:clamp(1.25rem,5.2vw,1.52rem)}.story-copy{padding:27px 0}.story-copy p{font-size:16px}.work-principles{padding:19px}.work-principles-head{display:block}.work-principles-head>span{display:none}.work-principles-head p:last-child{font-size:16px}.principles-grid{grid-template-columns:1fr}.principle-card{min-height:0}.snapshot-grid{grid-template-columns:1fr}.snapshot-card{min-height:182px}.capability-heading h2,.workflow-heading h2,.evidence-heading h2,.internship-copy h2,.contact-copy h2{font-size:clamp(2.55rem,11vw,3.7rem)}.capability-heading>p,.evidence-heading>p{font-size:16px}.capability-card{min-height:0;padding:22px 20px 65px}.capability-card h3{font-size:29px}.capability-summary{font-size:16px}.capability-detail-copy{padding:26px 21px}.capability-detail h3{font-size:34px}.detail-columns{grid-template-columns:1fr}.capability-detail-visual{min-height:240px}.detail-outcome{left:18px;right:18px;max-width:none}.workflow-steps{grid-template-columns:1fr}.workflow-step{min-height:93px}.console-copy{padding:27px 23px}.console-copy h3{font-size:38px}.console-copy p{font-size:16px}.console-command{font-size:10px}.console-command button{display:none}.principle-strip{grid-template-columns:1fr}.principle-quote{grid-column:auto;border-right:0}.strip-principle{border-right:0;border-bottom:1px solid var(--line)}.strip-principle:last-child{border-bottom:0}.lab-grid{grid-template-columns:1fr}.lab-card:last-child{grid-column:auto}.lab-content p{font-size:16px}.toolkit-section{padding:58px 0}.toolkit-track span{font-size:13px}.footer-shell{display:grid;gap:7px}.dialog-shell{padding:34px 22px}.dialog-columns{grid-template-columns:1fr}.back-to-top{right:16px;bottom:16px}
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}.toolkit-track{animation:none}.cursor-glow{display:none}
}


/* =============================================================
   PROFILE TITLE / EDITORIAL COMPOSITION REFINEMENT — V6
   Goal: two deliberate title lines, stronger reading hierarchy,
   less unused whitespace on wide screens and projectors.
============================================================= */
.profile-section {
  padding: clamp(72px, 7.5vw, 112px) 0 clamp(94px, 9vw, 138px);
}

.profile-heading {
  position: relative;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 3vw, 44px);
  margin-bottom: clamp(30px, 3.7vw, 52px);
  padding-bottom: clamp(24px, 2.2vw, 34px);
  border-bottom: 1px solid rgba(215, 180, 124, 0.56);
}

.section-index-block {
  align-content: start;
  gap: 12px;
  padding-top: 8px;
}

.section-index-block > span {
  font-size: clamp(4.25rem, 5.25vw, 5.8rem);
  line-height: 0.78;
}

.section-index-block p {
  font-size: clamp(0.68rem, 0.72vw, 0.78rem);
  line-height: 1.45;
}

.profile-heading .section-kicker {
  margin-bottom: 12px;
  font-size: clamp(0.72rem, 0.85vw, 0.9rem);
}

.profile-heading h2 {
  max-width: none;
  margin: 0;
  font-size: clamp(3.35rem, 4.5vw, 5.35rem);
  line-height: 0.91;
  letter-spacing: -0.065em;
  text-wrap: normal;
}

.profile-title-line {
  display: block;
  white-space: nowrap;
}

.profile-title-main {
  color: var(--ink);
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 800;
}

.profile-heading h2 .profile-title-accent {
  margin-top: 0.1em;
  color: #c67a17;
  font-family: var(--font-serif);
  font-size: 1.13em;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.05em;
}

.reading-note {
  position: absolute;
  right: 0;
  bottom: 24px;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0;
}

.reading-note span {
  height: 40px;
}

.profile-layout {
  gap: clamp(42px, 6vw, 88px);
}

.profile-rail {
  top: 96px;
}

@media (min-width: 1400px) {
  .profile-heading {
    grid-template-columns: 178px minmax(0, 1fr);
  }

  .profile-heading h2 {
    font-size: clamp(4.3rem, 4.6vw, 5.75rem);
  }
}

@media (max-width: 1080px) {
  .profile-heading {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .profile-title-line {
    white-space: normal;
  }

  .reading-note {
    display: none;
  }
}

@media (max-width: 900px) {
  .profile-section {
    padding-top: 78px;
  }

  .profile-heading {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 34px;
  }

  .section-index-block {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    padding-top: 0;
  }

  .profile-heading h2 {
    font-size: clamp(3.2rem, 8.5vw, 4.8rem);
  }
}

@media (max-width: 660px) {
  .profile-section {
    padding: 70px 0 84px;
  }

  .profile-heading {
    margin-bottom: 28px;
    padding-bottom: 22px;
  }

  .profile-heading h2 {
    font-size: clamp(2.9rem, 12.5vw, 4rem);
    line-height: 0.97;
    letter-spacing: -0.06em;
  }

  .profile-heading h2 .profile-title-accent {
    margin-top: 0.13em;
    font-size: 1.08em;
  }
}


/* =====================================================================
   PROFILE STORY CARDS — V7
   Replaces long editorial paragraphs with a presentation-ready card story.
===================================================================== */
.profile-story-panel {
  position: relative;
  margin: 32px 0 34px;
  padding: clamp(24px, 3vw, 38px);
  overflow: hidden;
  border: 1px solid rgba(213, 171, 104, 0.62);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(229, 157, 43, 0.11), transparent 21rem),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 46px rgba(84, 55, 14, 0.06);
}
.profile-story-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.19;
  background-image:
    linear-gradient(rgba(188, 132, 54, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(188, 132, 54, 0.16) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(140deg, #000, transparent 72%);
}
.story-panel-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(260px, 0.76fr);
  align-items: end;
  gap: clamp(22px, 3vw, 46px);
  margin-bottom: 28px;
}
.story-panel-head h3 {
  max-width: 700px;
  margin: 9px 0 0;
  color: var(--ink);
  font-size: clamp(2rem, 2.55vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.055em;
}
.story-panel-head > p {
  max-width: 490px;
  margin: 0;
  color: var(--muted-dark);
  font-size: var(--fs-body);
  line-height: 1.76;
}
.story-card-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
  gap: 18px;
}
.story-card {
  position: relative;
  min-width: 0;
  padding: clamp(22px, 2.4vw, 30px);
  overflow: hidden;
  border: 1px solid rgba(212, 166, 94, 0.62);
  border-radius: 20px;
  background: rgba(255, 253, 248, 0.91);
  box-shadow: 0 14px 28px rgba(75, 49, 11, 0.045);
  transform-style: preserve-3d;
  transition: box-shadow 0.28s ease, border-color 0.28s ease;
}
.story-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  width: 82px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.story-card::after {
  content: "";
  position: absolute;
  right: -53px;
  bottom: -59px;
  width: 145px;
  height: 145px;
  border: 1px solid rgba(197, 126, 26, 0.16);
  border-radius: 50%;
  pointer-events: none;
}
.story-card:hover {
  border-color: rgba(198, 126, 26, 0.78);
  box-shadow: 0 22px 45px rgba(65, 40, 9, 0.12);
}
.story-card--direction {
  grid-column: span 2;
  background:
    radial-gradient(circle at 85% 100%, rgba(240, 185, 80, 0.13), transparent 22rem),
    rgba(255, 253, 248, 0.94);
}
.story-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.story-card-no {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  border: 1px solid rgba(205, 132, 31, 0.36);
  border-radius: 50%;
  color: var(--gold-dark);
  background: #fff7e8;
  font: 700 15px var(--font-mono);
}
.story-card-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(205, 132, 31, 0.28);
  border-radius: 16px;
  color: var(--gold-dark);
  background: rgba(255, 248, 237, 0.95);
  font-size: 20px;
}
.story-card-label {
  margin: 0;
  color: var(--gold-dark);
  font-size: clamp(0.7rem, 0.78vw, 0.8rem);
  font-weight: 800;
  letter-spacing: 0.12em;
}
.story-card h3 {
  max-width: 780px;
  margin: 11px 0 18px;
  color: var(--ink);
  font-size: clamp(1.65rem, 2vw, 2.45rem);
  line-height: 1.07;
  letter-spacing: -0.045em;
}
.story-card-content { min-width: 0; }
.story-card--direction .story-card-content {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(250px, 0.82fr);
  align-items: stretch;
  gap: clamp(24px, 3vw, 42px);
}
.story-card-copy > p {
  margin: 0;
  color: var(--muted-dark);
  font-size: var(--fs-body);
  line-height: 1.82;
}
.story-card-copy > .story-card-secondary {
  margin-top: 15px;
  color: #536771;
}
.story-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}
.story-card-tags span {
  padding: 9px 11px;
  border: 1px solid rgba(211, 160, 87, 0.5);
  border-radius: 999px;
  color: #9b5e12;
  background: #fffaf0;
  font-size: 12px;
  font-weight: 800;
}
.story-card-points {
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.story-card-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted-dark);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.story-card-points i { margin-top: 5px; color: var(--mint); font-size: 14px; }
.story-card-metrics {
  display: grid;
  gap: 11px;
  margin-top: 22px;
}
.story-card-metrics > div {
  padding: 15px 16px;
  border: 1px solid rgba(212, 166, 94, 0.48);
  border-radius: 14px;
  background: linear-gradient(135deg, #fffdf8, #fff7e8);
}
.story-card-metrics span {
  display: block;
  color: var(--gold-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
}
.story-card-metrics strong {
  display: block;
  margin-top: 7px;
  color: var(--ink);
  font-size: clamp(1rem, 1.18vw, 1.16rem);
  line-height: 1.46;
}
.story-topology {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 280px;
  overflow: hidden;
  border: 1px solid rgba(13, 57, 70, 0.22);
  border-radius: 18px;
  color: #ffedc5;
  background:
    radial-gradient(circle at 50% 35%, rgba(242, 181, 77, 0.16), transparent 9rem),
    linear-gradient(140deg, #061a2a, #0d3c44);
}
.story-topology::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(240, 193, 99, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 193, 99, 0.5) 1px, transparent 1px);
  background-size: 26px 26px;
}
.topology-map-node,
.topology-map-clients { position: absolute; z-index: 2; }
.topology-map-node {
  display: grid;
  place-items: center;
  gap: 5px;
  width: 88px;
  font: 11px var(--font-mono);
  text-align: center;
}
.topology-map-node i {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border: 1px solid rgba(247, 192, 81, 0.82);
  border-radius: 50%;
  color: #ffd477;
  background: rgba(240, 184, 72, 0.11);
  box-shadow: 0 0 24px rgba(241, 183, 67, 0.13);
}
.map-internet { top: 18px; left: calc(50% - 44px); }
.map-router { top: 92px; left: calc(50% - 44px); }
.map-switch { top: 164px; left: calc(50% - 44px); }
.topology-map-line {
  position: absolute;
  z-index: 1;
  left: calc(50% - 1px);
  width: 2px;
  height: 32px;
  background: repeating-linear-gradient(180deg, #efb34e 0 3px, transparent 3px 8px);
}
.line-one { top: 63px; }
.line-two { top: 137px; }
.topology-map-branch {
  position: absolute;
  z-index: 1;
  top: 219px;
  left: 21%;
  width: 58%;
  height: 2px;
  background: repeating-linear-gradient(90deg, #efb34e 0 3px, transparent 3px 8px);
}
.topology-map-clients {
  right: 7%;
  bottom: 14px;
  left: 7%;
  display: flex;
  justify-content: space-between;
  gap: 7px;
}
.topology-map-clients span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 8px;
  border: 1px solid rgba(97, 216, 171, 0.38);
  border-radius: 999px;
  color: #d7fff0;
  background: rgba(85, 207, 156, 0.08);
  font-size: 10px;
  font-weight: 700;
}
.topology-pulse {
  position: absolute;
  z-index: 3;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff4b9;
  box-shadow: 0 0 12px #fff4b9;
}
.pulse-one { top: 72px; left: calc(50% - 3px); animation: storyPacketDown 3.1s linear infinite; }
.pulse-two { top: 215px; left: 21%; animation: storyPacketAcross 3.8s linear infinite 0.8s; }
@keyframes storyPacketDown { 0% { opacity: 0; transform: translateY(0); } 18%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(130px); } }
@keyframes storyPacketAcross { 0% { opacity: 0; transform: translateX(0); } 15%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(215px); } }

@media (max-width: 1080px) {
  .profile-story-panel { padding: 28px; }
  .story-panel-head { grid-template-columns: 1fr; align-items: start; gap: 16px; }
  .story-card--direction .story-card-content { grid-template-columns: 1fr; }
  .story-topology { min-height: 245px; }
}
@media (max-width: 660px) {
  .profile-story-panel { margin-top: 26px; padding: 22px 17px; border-radius: 18px; }
  .story-panel-head h3 { font-size: 1.95rem; }
  .story-panel-head > p, .story-card-copy > p, .story-card-points li { font-size: 16px; }
  .story-card-grid { grid-template-columns: 1fr; }
  .story-card--direction { grid-column: auto; }
  .story-card { padding: 22px 18px; }
  .story-card h3 { font-size: 1.65rem; }
  .story-card-tags span { font-size: 11px; }
  .story-topology { min-height: 230px; }
  .topology-map-clients { gap: 4px; }
  .topology-map-clients span { padding: 6px; font-size: 9px; }
}


/* =====================================================================
   PROFILE STORY CARDS — V8 CREATIVE LAYOUT
===================================================================== */
.profile-story-panel {
  margin: 34px 0 38px;
  padding: clamp(28px, 3vw, 42px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(229, 157, 43, 0.12), transparent 21rem),
    linear-gradient(135deg, rgba(255,255,255,0.88), rgba(255,251,245,0.94));
}
.story-panel-head { margin-bottom: 30px; }
.story-panel-head h3 {
  font-size: clamp(2.25rem, 2.7vw, 3.35rem);
  line-height: 1.02;
}
.story-panel-head > p {
  font-size: clamp(1.02rem, 1.08vw, 1.16rem);
  line-height: 1.8;
}
.story-card-grid {
  grid-template-columns: minmax(0,1.08fr) minmax(320px,.92fr);
  grid-template-areas:
    'direction method'
    'direction value';
  align-items: stretch;
}
.story-card--direction { grid-area: direction; }
.story-card--method { grid-area: method; }
.story-card--value { grid-area: value; }
.story-card {
  padding: clamp(24px, 2.4vw, 32px);
  border-radius: 24px;
  background: rgba(255, 253, 248, 0.95);
  box-shadow: 0 18px 38px rgba(75, 49, 11, 0.05);
}
.story-card::before { left: 24px; width: 96px; height: 4px; }
.story-card h3 {
  font-size: clamp(1.95rem, 2.15vw, 2.7rem);
  line-height: 1.03;
  max-width: 18ch;
}
.story-card-copy > p,
.story-card-points li {
  font-size: clamp(1.02rem, 1.06vw, 1.16rem);
  line-height: 1.82;
}
.story-card--direction .story-card-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}
@media (min-width: 1200px) {
  .story-card--direction .story-card-content {
    grid-template-columns: minmax(0,1.08fr) minmax(280px,.92fr);
    gap: 24px;
    align-items: stretch;
  }
}
.story-card-tags span {
  padding: 10px 13px;
  font-size: 12px;
}
.story-card--method,
.story-card--value {
  display: flex;
  flex-direction: column;
}
.story-card--method .story-card-content,
.story-card--value .story-card-content {
  display: grid;
  gap: 18px;
}
.story-card-metrics > div { padding: 16px 16px 15px; }
.story-card-metrics strong { font-size: clamp(1.02rem, 1.08vw, 1.17rem); }
.story-topology {
  min-height: 318px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 35%, rgba(242, 181, 77, 0.18), transparent 9rem),
    linear-gradient(140deg, #061a2a, #0d3c44);
}
.story-topology-head {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: rgba(255,240,203,.84);
}
.story-topology-head span { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.story-topology-head small { font: 10px var(--font-mono); opacity: .72; }
.story-process-visual,
.story-outcome-visual {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(13,57,70,.12);
  border-radius: 20px;
  background: linear-gradient(135deg, #fffdfa, #fff6e9);
}
.story-process-visual { padding: 18px; }
.process-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.process-flow span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(214,169,100,.54);
  border-radius: 999px;
  color: var(--gold-dark);
  background: #fffaf0;
  font-size: 12px;
  font-weight: 800;
}
.process-flow i {
  color: rgba(183,117,25,.68);
  font-size: 12px;
}
.process-terminal {
  position: relative;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(15,53,66,.18);
  border-radius: 18px;
  background: linear-gradient(140deg, #071b2a, #0d3340);
  color: #dff5e9;
}
.process-terminal::after {
  content: '';
  position: absolute;
  inset: -100% 0 auto;
  height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.08), rgba(255,255,255,0));
  animation: terminalSweep 4.8s linear infinite;
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.15);
}
.terminal-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.terminal-bar span:nth-child(1){ background:#ff6c65; }
.terminal-bar span:nth-child(2){ background:#f7c257; }
.terminal-bar span:nth-child(3){ background:#62cf85; }
.terminal-bar b {
  margin-left: 6px;
  color: rgba(255,255,255,.58);
  font: 11px var(--font-mono);
}
.terminal-lines {
  padding: 16px 16px 18px;
  display: grid;
  gap: 10px;
}
.terminal-lines p {
  margin: 0;
  color: #eafaf3;
  font: 13px/1.55 var(--font-mono);
}
.terminal-lines em {
  color: #f4c15d;
  font-style: normal;
}
.story-outcome-visual {
  padding: 20px;
  background:
    radial-gradient(circle at top right, rgba(223,152,41,.12), transparent 10rem),
    linear-gradient(135deg, #fffdfa, #fff7ec);
}
.outcome-rings {
  position: relative;
  min-height: 170px;
}
.ring {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  text-align: center;
  background: rgba(255,255,255,.72);
  color: var(--ink);
}
.ring strong {
  display:block;
  font-size: 18px;
  line-height: 1.1;
}
.ring span {
  display:block;
  margin-top: 5px;
  color: #6c7b82;
  font-size: 11px;
  line-height: 1.45;
}
.ring-large {
  top: 6px;
  left: 10px;
  width: 152px;
  height: 152px;
  border: 1px solid rgba(214,169,100,.48);
  box-shadow: inset 0 0 0 14px rgba(223,152,41,.06);
}
.ring-small {
  right: 8px;
  bottom: 10px;
  width: 112px;
  height: 112px;
  border: 1px dashed rgba(98,166,140,.62);
  box-shadow: inset 0 0 0 10px rgba(85,207,156,.08);
}
.outcome-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.outcome-badges span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(214,169,100,.42);
  border-radius: 999px;
  color: var(--gold-dark);
  background: rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 800;
}
@keyframes terminalSweep {
  to { inset: 100% 0 auto; }
}
@media (max-width: 1080px) {
  .story-card-grid {
    grid-template-columns: 1fr;
    grid-template-areas: 'direction' 'method' 'value';
  }
  .story-card--direction .story-card-content { grid-template-columns: 1fr; }
}
@media (max-width: 660px) {
  .story-panel-head h3 { font-size: 2rem; }
  .story-card h3 { font-size: 1.72rem; }
  .story-card-copy > p,
  .story-card-points li,
  .story-panel-head > p { font-size: 16px; }
  .story-topology { min-height: 255px; }
  .topology-map-clients { right: 5%; left: 5%; }
  .topology-map-clients span { font-size: 9px; }
}


/* =====================================================================
   V9 — STORY CARD LAYOUT FIX
   Fixes text/visual overlap when the English version is active.
===================================================================== */
.profile-story-panel {
  max-width: 100%;
}

.story-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "direction direction"
    "method value";
  gap: 20px;
}

.story-card--direction {
  grid-area: direction;
  min-width: 0;
}

.story-card--method {
  grid-area: method;
  min-width: 0;
}

.story-card--value {
  grid-area: value;
  min-width: 0;
}

/* The lead card must be wide enough before text and illustration share a row. */
.story-card--direction .story-card-content {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, 0.88fr);
  align-items: start;
  gap: clamp(24px, 3vw, 42px);
}

.story-card--direction .story-card-copy,
.story-card--direction .story-topology {
  min-width: 0;
}

.story-card--direction .story-card-copy {
  max-width: 100%;
}

.story-card--direction h3 {
  max-width: 22ch;
}

.story-topology {
  width: 100%;
  align-self: stretch;
  min-height: 340px;
}

.story-card--method .story-card-content,
.story-card--value .story-card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.story-card--method .story-process-visual,
.story-card--value .story-outcome-visual {
  margin-top: auto;
}

.story-card--method h3,
.story-card--value h3 {
  max-width: 17ch;
}

/* Stack the lead card internally before it can become too narrow. */
@media (max-width: 1220px) {
  .story-card--direction .story-card-content {
    grid-template-columns: 1fr;
  }

  .story-card--direction h3 {
    max-width: 26ch;
  }

  .story-topology {
    min-height: 280px;
  }
}

@media (max-width: 1080px) {
  .story-card-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "direction"
      "method"
      "value";
  }

  .story-card--direction .story-card-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 660px) {
  .story-card-grid {
    gap: 16px;
  }

  .story-card--direction h3,
  .story-card--method h3,
  .story-card--value h3 {
    max-width: none;
  }

  .story-topology {
    min-height: 250px;
  }
}


/* ========================= V10 STORY SECTION REFINEMENT ========================= */
.story-card-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    'direction direction'
    'method value';
  gap: clamp(18px, 2vw, 24px);
}
.story-card {
  overflow: hidden;
}
.story-card--direction {
  display: grid;
}
.story-card--direction .story-card-content {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
  gap: clamp(24px, 2.4vw, 32px);
  align-items: start;
}
.story-card--direction h3 {
  max-width: 15ch;
}
.story-card--direction .story-card-copy > p,
.story-card--method .story-card-copy > p,
.story-card--value .story-card-copy > p {
  max-width: 68ch;
}
.story-card--method .story-card-content,
.story-card--value .story-card-content {
  display: grid;
  gap: 18px;
}
.story-card-label {
  letter-spacing: .12em;
}
.story-card h3 {
  margin-bottom: 18px;
}
.story-topology {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  border-radius: 24px;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 75%, rgba(245, 191, 86, 0.12), transparent 9rem),
    linear-gradient(145deg, #061a28, #0b3740);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.story-topology::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: .16;
  background-image:
    linear-gradient(rgba(240, 184, 88, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 184, 88, 0.35) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.story-topology-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  color: #f7e6c2;
}
.story-topology-head span {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.story-topology-head small {
  color: rgba(255,255,255,.68);
  font: 11px var(--font-mono);
}
.topology-stage {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 8px 0 10px;
}
.topology-node-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 130px;
  padding: 10px 18px;
  border-radius: 18px;
  border: 1px solid rgba(242, 190, 91, 0.65);
  background: rgba(11, 29, 41, 0.68);
  box-shadow: 0 10px 20px rgba(0,0,0,.16);
}
.topology-node-card .node-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #f6cc74;
  border: 1px solid rgba(244, 193, 94, 0.72);
  background: rgba(244, 193, 94, 0.08);
}
.topology-node-card strong {
  color: #fff2d7;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
}
.topology-connector {
  width: 2px;
  height: 24px;
  background: repeating-linear-gradient(180deg, #f3c566 0 5px, transparent 5px 10px);
}
.topology-branch {
  width: min(82%, 210px);
  height: 2px;
  margin-top: 4px;
  background: repeating-linear-gradient(90deg, #f3c566 0 6px, transparent 6px 12px);
}
.topology-client-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 2px;
}
.topology-client-row span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(96, 214, 161, 0.42);
  color: #d8fff1;
  background: rgba(85, 207, 156, 0.08);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.topology-side-note {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.topology-side-note span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: rgba(255,241,213,.92);
  background: rgba(255,255,255,.06);
  font-size: 11px;
  font-weight: 700;
}
.topology-side-note i {
  color: #5dd29f;
}
@media (max-width: 1220px) {
  .story-card--direction .story-card-content {
    grid-template-columns: 1fr;
  }
  .story-topology {
    min-height: 420px;
  }
}
@media (max-width: 960px) {
  .story-card-grid {
    grid-template-columns: 1fr;
    grid-template-areas: 'direction' 'method' 'value';
  }
}
@media (max-width: 640px) {
  .story-topology {
    min-height: auto;
    padding: 16px;
  }
  .topology-client-row {
    grid-template-columns: 1fr;
  }
  .topology-branch {
    width: 56%;
  }
  .story-card--direction .story-card-content {
    gap: 18px;
  }
}

/* =====================================================================
   V11 · TECH / CYBER DASHBOARD PROFILE STORY
   Stable grid + CSS-drawn topology. No external icon required for router.
===================================================================== */
#profileStoryCards.story-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "direction direction"
    "method value";
  gap: clamp(18px, 2vw, 26px);
}
#profileStoryCards > .story-card-grid-fallback {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "direction direction"
    "method value";
  gap: clamp(18px, 2vw, 26px);
}
#profileStoryCards .story-card--direction { grid-area: direction; min-width: 0; }
#profileStoryCards .story-card--method { grid-area: method; min-width: 0; }
#profileStoryCards .story-card--value { grid-area: value; min-width: 0; }
#profileStoryCards .story-card {
  min-width: 0;
  overflow: hidden;
}
#profileStoryCards .story-card--direction .story-card-content {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr);
  align-items: stretch;
  gap: clamp(22px, 2.6vw, 38px);
}
#profileStoryCards .story-card--direction .story-card-copy { min-width: 0; }
#profileStoryCards .story-card--direction h3 { max-width: 18ch; }
#profileStoryCards .story-card-copy > p { overflow-wrap: anywhere; }
#profileStoryCards .story-card--method .story-card-content,
#profileStoryCards .story-card--value .story-card-content {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}
#profileStoryCards .story-card--method .story-card-copy,
#profileStoryCards .story-card--value .story-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
}
#profileStoryCards .story-card--method .story-card-points,
#profileStoryCards .story-card--value .story-card-metrics { margin-top: auto; }

.cyber-map {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 390px;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(242, 190, 91, .42);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 72%, rgba(245, 191, 86, .13), transparent 10rem),
    linear-gradient(145deg, #061825, #0a3540);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 16px 34px rgba(1,18,29,.12);
}
.cyber-map::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .17;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(240, 184, 88, .42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 184, 88, .42) 1px, transparent 1px);
  background-size: 23px 23px;
}
.cyber-map::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -76px;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(91, 212, 159, .24);
  border-radius: 50%;
  pointer-events: none;
}
.cyber-map-head,
.cyber-route,
.cyber-map-legend { position: relative; z-index: 1; }
.cyber-map-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: #f8e5bb;
}
.cyber-map-head span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cyber-map-head small {
  color: rgba(255,255,255,.63);
  font: 10px var(--font-mono);
}
.cyber-route {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 12px 0 14px;
}
.cyber-node {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 142px;
  padding: 8px 18px;
  border: 1px solid rgba(246, 195, 98, .66);
  border-radius: 18px;
  color: #fff0d3;
  background: rgba(4, 23, 34, .65);
  box-shadow: 0 9px 18px rgba(0,0,0,.14);
}
.cyber-node b { font-size: 13px; line-height: 1; }
.cyber-glyph {
  position: relative;
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border: 1px solid rgba(246, 195, 98, .75);
  border-radius: 50%;
  color: #ffd477;
  background: rgba(242, 190, 91, .08);
}
.cloud-glyph { font: 28px/1 var(--font-mono); }
.router-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 10px;
}
.router-glyph::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 4px;
}
.router-glyph i {
  z-index: 1;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}
.switch-glyph {
  display: grid;
  grid-template-columns: repeat(2, 5px);
  grid-template-rows: repeat(2, 5px);
  gap: 5px;
  border-radius: 8px;
}
.switch-glyph::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px solid currentColor;
  border-radius: 4px;
}
.switch-glyph i {
  z-index: 1;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.cyber-link {
  width: 2px;
  height: 22px;
  background: repeating-linear-gradient(180deg, #f3c566 0 5px, transparent 5px 10px);
  animation: routeFlow 1.8s linear infinite;
}
.cyber-branch {
  width: min(82%, 220px);
  height: 2px;
  margin: 1px 0;
  background: repeating-linear-gradient(90deg, #f3c566 0 6px, transparent 6px 12px);
  animation: branchFlow 2.2s linear infinite;
}
.cyber-endpoints {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.cyber-endpoints span {
  display: grid;
  place-items: center;
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid rgba(94, 217, 161, .4);
  border-radius: 999px;
  color: #d8fff1;
  background: rgba(85, 207, 156, .09);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.cyber-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.cyber-map-legend span {
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: rgba(255,242,216,.85);
  background: rgba(255,255,255,.05);
  font-size: 10px;
  font-weight: 700;
}
.story-process-visual,
.story-outcome-visual {
  margin-top: 20px;
  padding: 17px;
  border: 1px solid rgba(213, 171, 104, .45);
  border-radius: 18px;
  background: linear-gradient(135deg, #fffdf9, #fff6e9);
}
.process-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.process-flow span {
  padding: 8px 10px;
  border: 1px solid rgba(213, 171, 104, .45);
  border-radius: 999px;
  color: var(--gold-dark);
  font-size: 11px;
  font-weight: 800;
}
.process-flow i { color: var(--gold-dark); font-style: normal; }
.process-terminal {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(15,53,66,.2);
  border-radius: 14px;
  background: #071b2a;
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 11px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.terminal-bar span { width: 8px; height: 8px; border-radius: 50%; }
.terminal-bar span:nth-child(1) { background: #ff6c65; }.terminal-bar span:nth-child(2) { background: #f7c257; }.terminal-bar span:nth-child(3) { background: #62cf85; }
.terminal-bar b { margin-left: 5px; color: rgba(255,255,255,.55); font: 10px var(--font-mono); }
.terminal-lines { display: grid; gap: 7px; padding: 13px; }
.terminal-lines p { margin: 0; color: #eafaf3; font: 11px/1.5 var(--font-mono); }
.terminal-lines em { color: #f4c15d; font-style: normal; }
.outcome-rings { position: relative; min-height: 150px; }
.ring { position: absolute; display: grid; place-items: center; border-radius: 50%; text-align: center; background: rgba(255,255,255,.74); }
.ring strong { display: block; color: var(--ink); font-size: 16px; }.ring span { display: block; margin-top: 4px; color: #697a81; font-size: 10px; }
.ring-large { top: 4px; left: 6px; width: 132px; height: 132px; border: 1px solid rgba(213,171,104,.55); box-shadow: inset 0 0 0 12px rgba(223,152,41,.06); }
.ring-small { right: 6px; bottom: 0; width: 96px; height: 96px; border: 1px dashed rgba(85,207,156,.7); box-shadow: inset 0 0 0 9px rgba(85,207,156,.07); }
.outcome-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.outcome-badges span { padding: 7px 9px; border: 1px solid rgba(213,171,104,.42); border-radius: 999px; color: var(--gold-dark); font-size: 10px; font-weight: 800; }
@keyframes routeFlow { to { background-position: 0 24px; } }
@keyframes branchFlow { to { background-position: 48px 0; } }
@media (max-width: 1200px) {
  #profileStoryCards .story-card--direction .story-card-content { grid-template-columns: 1fr; }
  .cyber-map { min-height: 360px; }
}
@media (max-width: 900px) {
  #profileStoryCards.story-card-grid,
  #profileStoryCards > .story-card-grid-fallback {
    grid-template-columns: 1fr;
    grid-template-areas: "direction" "method" "value";
  }
}
@media (max-width: 620px) {
  .cyber-map { min-height: auto; padding: 15px; }
  .cyber-endpoints { grid-template-columns: 1fr; }
  .cyber-branch { width: 56%; }
  .cyber-map-legend span { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .cyber-link, .cyber-branch { animation: none; }
}


/* =====================================================================
   V12 — HỒ SƠ TIẾNG VIỆT: ĐOẠN 01 Ở CỘT TRÁI, ĐOẠN 02–03 SONG SONG
===================================================================== */
.language-toggle { display: none !important; }
.profile-layout-v12 {
  grid-template-columns: minmax(300px, 355px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(46px, 6vw, 100px);
}
.profile-layout-v12 .profile-rail {
  position: sticky;
  top: 104px;
}
.rail-foundation-card {
  position: relative;
  margin-top: 24px;
  padding: 24px 20px 20px;
  overflow: hidden;
  border: 1px solid rgba(213, 161, 76, .45);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(235, 172, 61, .14), transparent 9rem),
    linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,249,237,.96));
  box-shadow: 0 18px 38px rgba(72, 48, 10, .07);
}
.rail-foundation-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  width: 94px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.rail-foundation-label {
  margin: 5px 0 12px;
  color: var(--gold-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .11em;
}
.rail-foundation-card h3 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(1.55rem, 1.55vw, 2rem);
  line-height: 1.16;
  letter-spacing: -.035em;
}
.rail-foundation-card > p:not(.rail-foundation-label):not(.rail-foundation-secondary) {
  margin: 0;
  color: #405963;
  font-size: 15px;
  line-height: 1.8;
}
.rail-foundation-secondary {
  margin: 14px 0 0;
  color: #5d7077;
  font-size: 14px;
  line-height: 1.78;
}
.rail-foundation-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 16px 0;
}
.rail-foundation-tags span {
  padding: 7px 9px;
  border: 1px solid rgba(208, 150, 58, .38);
  border-radius: 999px;
  color: #9a5c11;
  background: rgba(255, 252, 245, .85);
  font-size: 10px;
  font-weight: 800;
}
.rail-foundation-map {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 280px;
  padding: 17px 14px 14px;
  overflow: hidden;
  border: 1px solid rgba(15, 66, 79, .34);
  border-radius: 15px;
  color: #fff0cc;
  background:
    radial-gradient(circle at 50% 90%, rgba(240, 181, 74, .15), transparent 8rem),
    linear-gradient(145deg, #061a28, #0c3440);
}
.rail-foundation-map::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(238, 187, 89, .48) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238, 187, 89, .48) 1px, transparent 1px);
  background-size: 20px 20px;
}
.rail-map-node, .rail-map-endpoints, .rail-map-link { position: relative; z-index: 1; }
.rail-map-node {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 112px;
  padding: 8px 12px;
  border: 1px solid rgba(246, 191, 84, .6);
  border-radius: 13px;
  background: rgba(5, 25, 35, .6);
  font-size: 11px;
  font-weight: 800;
}
.rail-map-node i {
  color: #f8cd72;
  font-size: 18px;
}
.rail-map-link {
  width: 2px;
  height: 16px;
  background: repeating-linear-gradient(180deg, #f2bd59 0 4px, transparent 4px 8px);
}
.rail-map-endpoints {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  width: 100%;
  padding-top: 8px;
}
.rail-map-endpoints span {
  padding: 7px 5px;
  border: 1px solid rgba(89, 210, 158, .38);
  border-radius: 999px;
  color: #d8fff0;
  background: rgba(85, 207, 156, .08);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}
.profile-layout-v12 .profile-story { min-width: 0; }
.profile-layout-v12 .profile-story-panel {
  margin-top: 28px;
  padding: clamp(25px, 2.8vw, 38px);
  border-radius: 24px;
}
.story-card-grid-v12 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.story-card-grid-v12 .story-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(23px, 2.1vw, 30px);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(255,249,239,.93));
}
.story-card-grid-v12 .story-card h3 {
  max-width: 18ch;
  margin: 10px 0 17px;
  font-size: clamp(1.75rem, 2vw, 2.35rem);
  line-height: 1.08;
}
.story-card-grid-v12 .story-card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px;
}
.story-card-grid-v12 .story-card-copy > p,
.story-card-grid-v12 .story-card-points li {
  font-size: clamp(1rem, 1.03vw, 1.12rem);
  line-height: 1.78;
}
.story-method-visual {
  margin-top: auto;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(208, 152, 59, .32);
  border-radius: 15px;
  background: linear-gradient(145deg, #fffdf8, #fff4df);
}
.method-timeline {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 5px;
}
.method-timeline span {
  color: var(--gold-dark);
  font: 10px/1.35 var(--font-mono);
  text-align: center;
}
.method-timeline b { display:block; margin-top: 3px; color: var(--ink); font: 700 11px var(--font-sans); }
.method-timeline i { width: 14px; height: 1px; background: var(--gold); }
.method-command {
  margin-top: 14px;
  padding: 10px 11px;
  border-radius: 10px;
  color: #d9f6e8;
  background: #082432;
  font: 10px/1.5 var(--font-mono);
}
.method-command em { color: #f6c66a; font-style: normal; }
.story-value-visual {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: auto;
  padding: 14px;
  border-radius: 15px;
  background: linear-gradient(145deg, #fffdf9, #fff3df);
}
.value-ring {
  display: grid;
  place-items: center;
  min-height: 94px;
  padding: 9px;
  border: 1px solid rgba(209, 152, 59, .38);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255,255,255,.7);
  text-align: center;
}
.value-ring strong { display:block; color: var(--gold-dark); font: 700 20px/1 var(--font-mono); }
.value-ring span { display:block; margin-top: 5px; color: #64767e; font-size: 10px; line-height: 1.35; }
@media (max-width: 980px) {
  .profile-layout-v12 { grid-template-columns: 1fr; }
  .profile-layout-v12 .profile-rail { position: static; display: grid; grid-template-columns: minmax(260px, 310px) minmax(0,1fr); gap: 22px; align-items: start; }
  .profile-layout-v12 .portrait-stage { grid-row: span 2; }
  .profile-layout-v12 .rail-foundation-card { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .profile-layout-v12 .profile-rail { display: block; }
  .profile-layout-v12 .portrait-stage { margin: 0 auto; }
  .rail-foundation-card { margin-top: 20px; }
  .story-card-grid-v12 { grid-template-columns: 1fr; }
  .story-card-grid-v12 .story-card h3 { max-width: none; }
  .rail-foundation-map { min-height: 250px; }
}


/* =====================================================================
   V13 — FULL-WIDTH FOUNDATION + TWO SUPPORTING STORIES
   Layout: card 01 spans the entire profile content area. Cards 02 and 03
   share the row beneath it. All copy remains Vietnamese.
===================================================================== */
.profile-layout-v13 {
  display: grid;
  grid-template-columns: minmax(250px, .36fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(34px, 5vw, 82px);
}
.profile-layout-v13 .profile-rail {
  position: sticky;
  top: 102px;
}
.profile-layout-v13 .profile-story {
  min-width: 0;
  padding-top: 14px;
}
.profile-layout-note {
  max-width: 60ch;
  margin: 22px 0 0 57px;
  color: #65777e;
  font-size: clamp(1rem, 1.05vw, 1.16rem);
  line-height: 1.75;
}

.profile-full-narrative {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(46px, 6vw, 76px);
  padding: clamp(30px, 4vw, 56px);
  overflow: hidden;
  border: 1px solid rgba(208, 151, 55, .55);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(228, 158, 45, .13), transparent 20rem),
    linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,248,235,.92));
  box-shadow: 0 24px 55px rgba(61, 39, 6, .08);
}
.profile-full-narrative::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(30px, 4vw, 56px);
  width: 130px;
  height: 4px;
  border-radius: 0 0 99px 99px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.profile-full-narrative::after {
  content: '';
  position: absolute;
  right: -100px;
  bottom: -110px;
  width: 310px;
  height: 310px;
  border: 1px solid rgba(213, 155, 55, .2);
  border-radius: 50%;
  pointer-events: none;
}
.full-story-copy,
.full-story-visual { position: relative; z-index: 1; min-width: 0; }
.full-story-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.profile-full-narrative .rail-foundation-label {
  margin: 5px 0 13px;
  color: var(--gold-dark);
  font-size: clamp(.76rem, .85vw, .9rem);
  font-weight: 800;
  letter-spacing: .12em;
}
.profile-full-narrative h3 {
  max-width: 17ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.3rem, 3.3vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.055em;
}
.full-story-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(208,150,58,.38);
  border-radius: 18px;
  color: var(--gold-dark);
  background: rgba(255,249,239,.9);
  font-size: 24px;
}
.full-story-body { margin-top: 26px; }
.full-story-text > p:not(.rail-foundation-secondary) {
  max-width: 64ch;
  margin: 0;
  color: #405963;
  font-size: clamp(1.08rem, 1.16vw, 1.28rem);
  line-height: 1.82;
}
.profile-full-narrative .rail-foundation-secondary {
  max-width: 64ch;
  margin: 17px 0 0;
  color: #61747c;
  font-size: clamp(1rem, 1.05vw, 1.16rem);
  line-height: 1.78;
}
.profile-full-narrative .rail-foundation-tags { margin: 23px 0 0; }
.profile-full-narrative .rail-foundation-tags span {
  padding: 9px 12px;
  font-size: 11px;
}
.full-story-visual {
  display: flex;
  align-items: stretch;
}
.full-map-shell {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 400px;
  padding: 21px;
  overflow: hidden;
  border: 1px solid rgba(10, 52, 65, .32);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 65%, rgba(242,181,77,.16), transparent 11rem),
    linear-gradient(145deg, #061a28, #0d3c44);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.full-map-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .17;
  background-image:
    linear-gradient(rgba(241,186,86,.36) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241,186,86,.36) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.full-map-head,
.full-map-flow,
.full-map-legend { position: relative; z-index: 1; }
.full-map-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: #f7e4bd;
}
.full-map-head span { font-size: 12px; font-weight: 800; letter-spacing: .11em; }
.full-map-head small { color: rgba(255,255,255,.62); font: 10px var(--font-mono); }
.full-map-flow {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: auto 0 15px;
}
.full-map-node {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 142px;
  padding: 11px 18px;
  border: 1px solid rgba(246,194,93,.66);
  border-radius: 18px;
  color: #fff0cf;
  background: rgba(7,27,39,.72);
}
.full-map-node i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(246,194,93,.74);
  border-radius: 50%;
  color: #f7cc73;
  background: rgba(246,194,93,.08);
  font-size: 18px;
}
.full-map-node strong { font-size: 14px; }
.full-map-link {
  width: 2px;
  height: 19px;
  background: repeating-linear-gradient(180deg, #f2bd59 0 4px, transparent 4px 9px);
}
.full-map-branch {
  width: min(78%, 260px);
  height: 2px;
  background: repeating-linear-gradient(90deg, #f2bd59 0 5px, transparent 5px 10px);
}
.full-map-endpoints {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  width: 100%;
}
.full-map-endpoints span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 7px;
  border: 1px solid rgba(89,210,158,.42);
  border-radius: 999px;
  color: #d7fff0;
  background: rgba(85,207,156,.08);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.full-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.full-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 999px;
  color: rgba(255,242,216,.88);
  background: rgba(255,255,255,.06);
  font-size: 10px;
  font-weight: 700;
}
.full-map-legend i { color: var(--mint); }

.profile-story-panel-v13 {
  margin-top: 24px;
  padding: clamp(28px, 3vw, 42px);
  border-radius: 28px;
}
.story-card-grid-v13 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 20px;
}
.story-card-grid-v13 .story-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(25px, 2.6vw, 36px);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,249,239,.92));
}
.story-card-grid-v13 .story-card h3 {
  max-width: 19ch;
  margin: 11px 0 19px;
  font-size: clamp(1.9rem, 2.2vw, 2.8rem);
  line-height: 1.05;
}
.story-card-grid-v13 .story-card-copy > p,
.story-card-grid-v13 .story-card-points li {
  font-size: clamp(1rem, 1.04vw, 1.16rem);
  line-height: 1.8;
}
.story-card-grid-v13 .story-method-visual,
.story-card-grid-v13 .story-value-visual { margin-top: auto; }

@media (max-width: 1060px) {
  .profile-layout-v13 { grid-template-columns: 1fr; }
  .profile-layout-v13 .profile-rail {
    position: static;
    display: grid;
    grid-template-columns: minmax(240px,300px) minmax(0,1fr);
    gap: 22px;
    align-items: start;
  }
  .profile-layout-v13 .portrait-stage { grid-row: span 2; }
  .profile-full-narrative { grid-template-columns: 1fr; }
  .full-map-shell { min-height: 350px; }
}
@media (max-width: 720px) {
  .profile-layout-v13 .profile-rail { display: block; }
  .profile-layout-v13 .portrait-stage { margin: 0 auto; }
  .profile-layout-note { margin-left: 0; }
  .profile-full-narrative { padding: 25px 19px; border-radius: 22px; }
  .profile-full-narrative h3 { max-width: none; font-size: clamp(2rem, 10vw, 3rem); }
  .full-story-icon { width: 52px; height: 52px; }
  .full-story-text > p:not(.rail-foundation-secondary),
  .profile-full-narrative .rail-foundation-secondary { font-size: 16px; }
  .full-map-shell { min-height: 340px; padding: 16px; }
  .full-map-endpoints { grid-template-columns: 1fr; }
  .full-map-branch { width: 60%; }
  .story-card-grid-v13 { grid-template-columns: 1fr; }
  .story-card-grid-v13 .story-card h3 { max-width: none; font-size: 1.8rem; }
}


/* =========================
   V14 STABILITY FAIL-SAFE
   Nội dung cốt lõi luôn hiển thị kể cả khi JavaScript không tải được.
========================= */
.reveal,
html.js-fallback .reveal {
  opacity: 1 !important;
  transform: none !important;
}
.noscript-note {
  width: min(1180px, calc(100% - 48px));
  margin: 96px auto 0;
  padding: 14px 18px;
  border-left: 3px solid var(--gold);
  color: #6f4a13;
  background: #fff5df;
  font-size: 14px;
  line-height: 1.6;
}


/* =====================================================================
   V15 — BALANCED PROFILE NARRATIVE
   Fixes unused vertical space and keeps supporting cards dense/readable.
===================================================================== */
@media (min-width: 1061px) {
  /* Compact identity row: prevents a tall portrait rail from creating an empty right column. */
  .profile-layout-v13 {
    grid-template-columns: minmax(300px, .34fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 4vw, 58px);
    margin-bottom: 34px;
  }

  .profile-layout-v13 .profile-rail {
    position: static;
    display: grid;
    grid-template-columns: 138px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 0;
    align-items: start;
  }

  .profile-layout-v13 .portrait-stage {
    grid-column: 1;
    grid-row: 1 / span 3;
    padding: 0;
  }

  .profile-layout-v13 .portrait-offset { display: none; }

  .profile-layout-v13 .portrait-card {
    padding: 7px;
    border-radius: 24px;
  }

  .profile-layout-v13 .portrait-label {
    right: 8px;
    bottom: 8px;
    padding: 5px 7px;
    font-size: 7px;
  }

  .profile-layout-v13 .portrait-image {
    height: 220px;
    border-radius: 18px;
  }

  .profile-layout-v13 .status-card {
    grid-column: 2;
    width: 100%;
    margin: 0;
    padding: 12px;
  }

  .profile-layout-v13 .status-card strong { font-size: 11px; }

  .profile-layout-v13 .rail-meta {
    grid-column: 2;
    padding: 14px 0 10px;
    font-size: 9px;
  }

  .profile-layout-v13 .rail-note {
    grid-column: 2;
    padding: 11px 0 0;
    font-size: 12px;
    line-height: 1.55;
  }

  .profile-layout-v13 .profile-story {
    display: flex;
    min-height: 228px;
    flex-direction: column;
    justify-content: center;
    padding: 12px 0 12px clamp(22px, 2.5vw, 38px);
    border-left: 1px solid rgba(214, 167, 91, .45);
  }

  .profile-layout-v13 .story-lead { max-width: 42ch; }
  .profile-layout-v13 .profile-layout-note { max-width: 62ch; margin: 16px 0 0 57px; }
}

/* Bring the full-width foundation card closer to the compact identity row. */
.profile-full-narrative { margin-top: clamp(28px, 3.5vw, 44px); }

/* The secondary cards must size to their own content instead of stretching to the tallest sibling. */
.story-card-grid-v13 {
  align-items: start;
}
.story-card-grid-v13 .story-card {
  min-height: 0;
  height: auto;
  overflow: visible;
}
.story-card-grid-v13 .story-card-content,
.story-card-grid-v13 .story-card-copy {
  min-height: 0;
}
.story-card-grid-v13 .story-card-copy {
  display: block;
}
.story-card-grid-v13 .story-card-secondary {
  margin: 15px 0 0;
  color: #65767d;
  font-size: clamp(.98rem, 1vw, 1.1rem);
  line-height: 1.74;
}
.story-card-grid-v13 .story-card-points,
.story-card-grid-v13 .story-card-metrics {
  margin-top: 22px !important;
}
.story-card-grid-v13 .story-process-visual,
.story-card-grid-v13 .story-outcome-visual {
  margin-top: 22px !important;
}

/* Card 02: process visual fills the lower part without creating a dead vertical area. */
.method-visual {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  padding: 16px;
  border: 1px solid rgba(204, 146, 48, .3);
  border-radius: 18px;
  background:
    radial-gradient(circle at 95% 5%, rgba(226,159,45,.14), transparent 10rem),
    linear-gradient(145deg, #fffdf8, #fff7ea);
}
.method-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .06;
  background-image:
    linear-gradient(rgba(185,117,23,.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185,117,23,.7) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.method-visual > * { position: relative; z-index: 1; }
.method-visual-head,
.value-visual-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--gold-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}
.method-visual-head small { color: #819098; font: 10px var(--font-mono); }
.method-step-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 9px;
  margin-top: 14px;
}
.method-step-grid > div {
  min-height: 86px;
  padding: 12px;
  border: 1px solid rgba(209, 158, 71, .28);
  border-radius: 13px;
  background: rgba(255,255,255,.72);
}
.method-step-grid b {
  display: block;
  color: var(--gold-dark);
  font: 700 15px var(--font-mono);
}
.method-step-grid span {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}
.method-step-grid small {
  display: block;
  margin-top: 4px;
  color: #687a82;
  font-size: 11px;
  line-height: 1.45;
}
.method-logline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  padding: 10px 12px;
  border-radius: 11px;
  color: #e8f8ef;
  background: #082230;
  font: 11px/1.5 var(--font-mono);
}
.method-logline i { color: #f3c668; }

/* Card 03: replace empty middle space with a small operating-mindset dashboard. */
.value-visual {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  padding: 16px;
  border: 1px solid rgba(89, 166, 139, .3);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(85,207,156,.13), transparent 10rem),
    linear-gradient(145deg, #f9fffb, #f4fbf5);
}
.value-visual-head i { font-size: 17px; }
.value-progress {
  display: grid;
  gap: 13px;
  margin-top: 16px;
}
.value-progress > div {
  display: grid;
  grid-template-columns: 94px 1fr;
  align-items: center;
  gap: 12px;
}
.value-progress span {
  color: #526a70;
  font-size: 12px;
  font-weight: 700;
}
.value-progress b {
  position: relative;
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(38, 109, 91, .12);
}
.value-progress b::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--level);
  border-radius: inherit;
  background: linear-gradient(90deg, #4bc895, #a6e5c7);
  animation: valueProgress 2.4s ease-out both;
}
.value-visual-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.value-visual-footer span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(82, 169, 137, .3);
  border-radius: 999px;
  color: #266e58;
  background: rgba(255,255,255,.7);
  font-size: 11px;
  font-weight: 800;
}
.value-visual-footer i { color: #38b883; }
@keyframes valueProgress {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@media (max-width: 720px) {
  .method-step-grid { grid-template-columns: 1fr; }
  .value-progress > div { grid-template-columns: 80px 1fr; }
}


/* =====================================================================
   V16 — BALANCED INTRO COMPOSITION
   Rebalances the identity rail and professional statement on desktop.
===================================================================== */
@media (min-width: 1061px) {
  /* 43% identity board / 57% professional statement instead of a narrow left rail. */
  .profile-layout-v13 {
    grid-template-columns: minmax(420px, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(38px, 4.2vw, 64px);
    align-items: stretch;
    margin-bottom: 38px;
  }

  /* The left column becomes a compact profile board rather than a thin side rail. */
  .profile-layout-v13 .profile-rail {
    grid-template-columns: 176px minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 0;
    align-items: center;
    padding-right: clamp(6px, 1vw, 14px);
  }

  .profile-layout-v13 .portrait-stage {
    align-self: center;
  }

  .profile-layout-v13 .portrait-card {
    padding: 8px;
    border-radius: 26px;
  }

  .profile-layout-v13 .portrait-image {
    height: 260px;
    border-radius: 19px;
  }

  .profile-layout-v13 .status-card {
    align-self: end;
    padding: 14px;
  }

  .profile-layout-v13 .status-card strong {
    font-size: 12px;
    line-height: 1.5;
  }

  .profile-layout-v13 .rail-meta {
    padding: 15px 0 11px;
    font-size: 9px;
  }

  .profile-layout-v13 .rail-note {
    padding-top: 13px;
    font-size: 13px;
    line-height: 1.62;
  }

  /* Reduce the visual weight of the right column and keep the copy readable. */
  .profile-layout-v13 .profile-story {
    min-height: 278px;
    justify-content: center;
    padding: 18px 0 18px clamp(24px, 2.4vw, 36px);
  }

  .profile-layout-v13 .story-lead-block {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 15px;
    padding-bottom: 24px;
  }

  .profile-layout-v13 .story-mark {
    width: 40px;
    height: 40px;
    font-size: 19px;
  }

  .profile-layout-v13 .story-lead {
    max-width: 34ch;
    margin-top: 8px;
    font-size: clamp(1.36rem, 1.55vw, 1.72rem);
    line-height: 1.43;
    letter-spacing: -0.028em;
  }

  .profile-layout-v13 .profile-layout-note {
    max-width: 47ch;
    margin: 17px 0 0 55px;
    font-size: clamp(1rem, 1vw, 1.1rem);
    line-height: 1.72;
  }
}

/* Prevent the transition layout from feeling compressed on smaller laptop screens. */
@media (min-width: 1061px) and (max-width: 1280px) {
  .profile-layout-v13 {
    grid-template-columns: minmax(380px, 0.88fr) minmax(0, 1.12fr);
    gap: 34px;
  }

  .profile-layout-v13 .profile-rail {
    grid-template-columns: 154px minmax(0, 1fr);
    column-gap: 16px;
  }

  .profile-layout-v13 .portrait-image {
    height: 235px;
  }

  .profile-layout-v13 .story-lead {
    max-width: 35ch;
    font-size: clamp(1.3rem, 1.65vw, 1.58rem);
  }
}


/* =====================================================================
   V17 — UNIFIED IDENTITY BOARD
   Rebuilds the left profile rail as one coherent profile card.
===================================================================== */
@media (min-width: 1061px) {
  .profile-layout-v13 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(36px, 4vw, 64px);
    align-items: start;
    padding-bottom: clamp(108px, 8vw, 138px);
  }


  .profile-layout-v13 .profile-story {
    align-self: start;
  }


  .profile-layout-v13 .profile-story {
    max-width: 100%;
  }

  .profile-layout-v13 .story-lead {
    max-width: 15ch;
  }

  .profile-layout-v13 .profile-layout-note {
    max-width: 33ch;
  }
  .profile-layout-v13 .profile-rail.profile-identity-board {
    align-self: start;
    margin-top: clamp(-162px, -10vw, -128px);
  }
  .profile-layout-v13 .profile-rail.profile-identity-board {
    position: relative;
    display: grid;
    grid-template-columns: 185px minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
    min-height: 292px;
    padding: 18px;
    border: 1px solid rgba(210, 163, 91, 0.56);
    border-radius: 26px;
    background:
      radial-gradient(circle at 100% 0%, rgba(228, 162, 56, 0.1), transparent 11rem),
      linear-gradient(145deg, rgba(255,255,255,0.9), rgba(255,249,238,0.88));
    box-shadow: 0 20px 46px rgba(72, 45, 7, 0.075);
  }

  .profile-identity-board::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 18px;
    width: 88px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #d88b21, #f4c66e);
  }

  .profile-identity-board .identity-visual {
    min-width: 0;
    align-self: stretch;
  }

  .profile-identity-board .portrait-stage {
    height: 100%;
    padding: 0;
  }

  .profile-identity-board .portrait-offset {
    display: none;
  }

  .profile-identity-board .portrait-card {
    height: 100%;
    padding: 7px;
    border-radius: 20px;
    box-shadow: none;
  }

  .profile-identity-board .portrait-label {
    right: 7px;
    bottom: 7px;
    padding: 5px 7px;
    font-size: 7px;
  }

  .profile-identity-board .portrait-image {
    height: 100%;
    min-height: 258px;
    border-radius: 14px;
  }

  .profile-identity-board .identity-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 3px 3px 1px 0;
  }

  .identity-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(210, 176, 119, 0.44);
  }

  .identity-code {
    color: #a66819;
    font: 10px var(--font-mono);
    letter-spacing: 0.08em;
  }

  .identity-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #5b8474;
    font: 9px var(--font-mono);
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .identity-live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 0 4px rgba(85,207,156,0.12);
  }

  .identity-direction {
    padding: 15px 0 14px;
  }

  .identity-direction p {
    margin: 0 0 6px;
    color: #ae6a18;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.11em;
  }

  .identity-direction strong {
    display: block;
    color: var(--ink);
    font: 700 clamp(1.35rem, 1.65vw, 1.7rem) / 1.06 var(--font-sans);
    letter-spacing: -0.04em;
  }

  .identity-status {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid rgba(215, 178, 116, 0.56);
    border-radius: 13px;
    background: rgba(255,255,255,0.72);
  }

  .identity-status small {
    display: block;
    color: #ad6918;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
  }

  .identity-status strong {
    display: block;
    margin-top: 4px;
    color: #253640;
    font-size: 12px;
    line-height: 1.45;
  }

  .identity-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 11px;
  }

  .identity-meta-grid > div {
    min-width: 0;
    padding: 8px 0 0;
  }

  .identity-meta-grid span {
    display: block;
    color: #939da1;
    font: 8px var(--font-mono);
    letter-spacing: 0.07em;
  }

  .identity-meta-grid strong {
    display: block;
    margin-top: 4px;
    color: #3e535d;
    font-size: 10px;
    line-height: 1.35;
  }

  .profile-identity-board .rail-note {
    display: flex;
    gap: 9px;
    margin: 11px 0 0;
    padding: 11px 0 0;
    border-top: 1px solid rgba(210, 176, 119, 0.44);
    color: #60737d;
    font-size: 11px;
    line-height: 1.55;
  }

  .profile-identity-board .rail-note i {
    flex: 0 0 auto;
    margin-top: 2px;
  }

  .identity-signal-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 11px;
  }

  .identity-signal-list span {
    padding: 5px 7px;
    border: 1px solid rgba(209, 164, 94, 0.38);
    border-radius: 999px;
    color: #9d6118;
    background: rgba(255,252,245,0.78);
    font: 8px var(--font-mono);
    letter-spacing: 0.05em;
  }

  .profile-layout-v13 .profile-story {
    min-height: 292px;
    padding-left: clamp(24px, 2.6vw, 40px);
  }

  .profile-layout-v13 .story-lead {
    max-width: 33ch;
    font-size: clamp(1.3rem, 1.48vw, 1.62rem);
    line-height: 1.43;
  }

  .profile-layout-v13 .profile-layout-note {
    max-width: 50ch;
    margin-left: 55px;
  }
}

@media (min-width: 1061px) and (max-width: 1280px) {
  .profile-layout-v13 {
    grid-template-columns: minmax(420px, 0.92fr) minmax(0, 1.08fr);
    gap: 34px;
  }

  .profile-layout-v13 .profile-rail.profile-identity-board {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 17px;
  }

  .profile-identity-board .portrait-image {
    min-height: 245px;
  }

  .identity-direction strong {
    font-size: 1.35rem;
  }

  .profile-identity-board .rail-note {
    font-size: 10.5px;
  }
}

@media (max-width: 1060px) {
  .profile-layout-v13 .profile-rail.profile-identity-board {
    position: static;
    display: grid;
    grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
    gap: 22px;
    padding: 18px;
    border: 1px solid rgba(210, 163, 91, 0.56);
    border-radius: 24px;
    background: rgba(255,255,255,0.74);
  }

  .profile-identity-board .portrait-stage { padding: 0; }
  .profile-identity-board .portrait-offset { display: none; }
  .profile-identity-board .portrait-card { padding: 8px; border-radius: 20px; }
  .profile-identity-board .portrait-image { height: 260px; border-radius: 14px; }

  .identity-content { display: flex; flex-direction: column; }
  .identity-topline { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(210,176,119,.45); }
  .identity-code { color: #a66819; font: 10px var(--font-mono); }
  .identity-live { color:#5b8474; font:9px var(--font-mono); }
  .identity-live i { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:var(--mint); }
  .identity-direction { padding:15px 0; }
  .identity-direction p { margin:0 0 6px; color:#ae6a18; font-size:10px; font-weight:800; letter-spacing:.1em; }
  .identity-direction strong { display:block; color:var(--ink); font-size:1.45rem; line-height:1.1; }
  .identity-status { display:flex; gap:10px; padding:12px; border:1px solid rgba(215,178,116,.56); border-radius:13px; background:rgba(255,255,255,.72); }
  .identity-status small { display:block; color:#ad6918; font-size:9px; font-weight:800; letter-spacing:.1em; }
  .identity-status strong { display:block; margin-top:4px; color:#253640; font-size:12px; line-height:1.45; }
  .identity-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:11px; }
  .identity-meta-grid span { display:block; color:#939da1; font:8px var(--font-mono); }
  .identity-meta-grid strong { display:block; margin-top:4px; color:#3e535d; font-size:10px; line-height:1.35; }
  .profile-identity-board .rail-note { display:flex; gap:9px; margin:11px 0 0; padding:11px 0 0; border-top:1px solid rgba(210,176,119,.44); color:#60737d; font-size:12px; line-height:1.58; }
  .identity-signal-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
  .identity-signal-list span { padding:5px 7px; border:1px solid rgba(209,164,94,.38); border-radius:999px; color:#9d6118; font:8px var(--font-mono); }
}

@media (max-width: 680px) {
  .profile-layout-v13 .profile-rail.profile-identity-board {
    display: block;
    padding: 16px;
  }

  .profile-identity-board .identity-visual {
    width: min(240px, 100%);
    margin: 0 auto 18px;
  }

  .profile-identity-board .portrait-image { height: 290px; }
  .identity-topline { margin-top: 4px; }
  .identity-direction strong { font-size: 1.52rem; }
  .identity-meta-grid { gap: 8px; }
  .identity-signal-list { margin-top: 13px; }
}


/* =====================================================================
   V18 — ALIGN PROFILE IDENTITY BOARD WITH INTRO CONTENT
   Fix: left identity board was vertically centered against a taller story
   column, causing it to appear lower and visually detached.
===================================================================== */
@media (min-width: 1061px) {
  .profile-layout-v13 {
    align-items: start;
  }

  .profile-layout-v13 .profile-rail.profile-identity-board {
    align-self: start;
    margin-top: 0;
  }

  .profile-layout-v13 .profile-story {
    align-self: start;
    margin-top: 0;
  }
}


/* ========================= V23 PROFILE HEADER ALIGNMENT FIX ========================= */
@media (min-width: 1061px) {
  .profile-layout-v13 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(38px, 4vw, 64px);
    padding-bottom: clamp(96px, 7vw, 128px);
  }

  .profile-layout-v13 .profile-rail {
    position: relative;
    top: auto;
    align-self: start;
  }

  .profile-layout-v13 .profile-rail.profile-identity-board {
    margin-top: 0 !important;
  }

  .profile-layout-v13 .profile-story {
    align-self: start;
    padding-top: 0;
  }

  .profile-layout-v13 .identity-content {
    padding-top: 12px;
  }

  .profile-layout-v13 .story-lead-block {
    padding-top: 6px;
  }

  .profile-layout-v13 .story-lead {
    max-width: 15ch;
  }

  .profile-layout-v13 .profile-layout-note {
    max-width: 35ch;
    margin-top: 18px;
  }
}


/* ========================= V24 BALANCE + PORTRAIT CROP FIX ========================= */
@media (min-width: 1061px) {
  .profile-layout-v13 {
    grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
    gap: clamp(44px, 4.5vw, 72px);
  }

  .profile-layout-v13 .story-lead {
    max-width: 22ch;
  }

  .profile-layout-v13 .profile-layout-note {
    max-width: 46ch;
  }

  .profile-identity-board .portrait-image img {
    left: -4%;
    right: -4%;
    width: 108%;
    height: 108%;
    object-fit: cover;
    object-position: center 12%;
    transform: scale(1.02);
  }

  .profile-identity-board .portrait-card {
    padding-top: 5px;
  }
}


/* =====================================================================
   V27 — BILINGUAL CONTROLS, LIGHT/DARK THEME & RESPONSIBLE MOTION
===================================================================== */
:root { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

.header-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 2px;
}
.utility-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 39px;
  padding: 0 11px;
  border: 1px solid rgba(255, 224, 167, .28);
  border-radius: 999px;
  color: #fff5df;
  background: rgba(255,255,255,.045);
  font: 11px var(--font-mono);
  letter-spacing: .04em;
  transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease;
}
.utility-toggle:hover {
  border-color: rgba(255, 210, 111, .78);
  color: #0e2635;
  background: var(--gold-light);
  transform: translateY(-2px);
}
.utility-toggle i { font-size: 12px; }

.hero-telemetry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin: 20px 0 0;
  color: #ffe1a4;
  font: 11px/1.5 var(--font-mono);
  letter-spacing: .035em;
}
.hero-telemetry > i { color: var(--mint); }
.type-caret {
  width: 7px;
  height: 1.1em;
  background: var(--gold-light);
  animation: v27CaretBlink 1s step-end infinite;
}

/* Motion system: transform + opacity only for smooth reveal, background sweep for ambient detail. */
.reveal:not(.show) { opacity: 0; transform: translateY(22px); }
.reveal.show { animation: v27RevealUp .74s cubic-bezier(.2,.7,.2,1) both; }
.capability-card,
.lab-card,
.story-card,
.role-board,
.profile-identity-board { will-change: transform; }
.capability-card::after,
.lab-card::after {
  content: '';
  position: absolute;
  inset: -120% 0 auto;
  height: 70%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.08), transparent);
  transform: skewY(-8deg);
  animation: v27ScanSweep 8s linear infinite;
}
.capability-card:nth-child(2)::after { animation-delay: 1.9s; }
.capability-card:nth-child(3)::after { animation-delay: 3.8s; }
.hero-orbit-one { animation: v27DriftOrbit 24s ease-in-out infinite alternate; }
.hero-orbit-two { animation: v27DriftOrbit 19s ease-in-out infinite alternate-reverse; }
.status-dot,
.identity-live i { animation: v27StatusPulse 2.4s ease-out infinite; }
.workflow-console .radar-scan { animation: v27RadarSweep 3.6s linear infinite; }
.toolkit-track { animation: v27Marquee 28s linear infinite; }

@keyframes v27RevealUp {
  0% { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes v27CaretBlink {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}
@keyframes v27StatusPulse {
  0% { box-shadow: 0 0 0 0 rgba(85,207,156,.42); }
  70% { box-shadow: 0 0 0 9px rgba(85,207,156,0); }
  100% { box-shadow: 0 0 0 0 rgba(85,207,156,0); }
}
@keyframes v27ScanSweep {
  0% { transform: translateY(0) skewY(-8deg); opacity: 0; }
  10% { opacity: 1; }
  42% { opacity: 0; }
  100% { transform: translateY(360%) skewY(-8deg); opacity: 0; }
}
@keyframes v27DriftOrbit {
  from { transform: translate3d(0,0,0) rotate(0deg); }
  to { transform: translate3d(16px,-12px,0) rotate(14deg); }
}
@keyframes v27RadarSweep { to { transform: rotate(360deg); } }
@keyframes v27Marquee { to { transform: translateX(-50%); } }

/* Dark theme: same editorial hierarchy, lower luminance and preserved gold/mint accents. */
html[data-theme="dark"] {
  --ink: #edf6f4;
  --ink-deep: #f7fbfa;
  --ink-soft: #c9e1dd;
  --paper: #07141f;
  --paper-soft: #0a1d29;
  --paper-bright: #0d2430;
  --line: #2c5260;
  --line-strong: #c8923a;
  --muted: #a8bdc2;
  --muted-dark: #c1d0d2;
  --white: #0d2430;
  --shadow-sm: 0 16px 34px rgba(0,0,0,.26);
  --shadow-lg: 0 30px 74px rgba(0,0,0,.40);
}
html[data-theme="dark"] body {
  color: var(--ink);
  background:
    radial-gradient(circle at 87% 11%, rgba(44,132,125,.13), transparent 26rem),
    radial-gradient(circle at 8% 64%, rgba(223,152,41,.08), transparent 24rem),
    var(--paper);
}
html[data-theme="dark"] body::before { opacity: .032; }
html[data-theme="dark"] .profile-section,
html[data-theme="dark"] .workflow-section,
html[data-theme="dark"] .evidence-section,
html[data-theme="dark"] .internship-section {
  background: linear-gradient(135deg, #07141f, #0a1b27 52%, #0c202c);
}
html[data-theme="dark"] .profile-heading h2,
html[data-theme="dark"] .story-lead,
html[data-theme="dark"] .profile-story-panel h3,
html[data-theme="dark"] .full-story-copy h3,
html[data-theme="dark"] .capability-detail h3,
html[data-theme="dark"] .workflow-heading h2,
html[data-theme="dark"] .evidence-heading h2,
html[data-theme="dark"] .internship-copy h2,
html[data-theme="dark"] .role-board h3,
html[data-theme="dark"] .lab-content h3,
html[data-theme="dark"] .story-card h3,
html[data-theme="dark"] .snapshot-card strong,
html[data-theme="dark"] .principle-card h3 { color: #eff8f6; }
html[data-theme="dark"] .profile-layout-note,
html[data-theme="dark"] .full-story-copy p,
html[data-theme="dark"] .story-card-copy > p,
html[data-theme="dark"] .story-card-points li,
html[data-theme="dark"] .evidence-heading > p,
html[data-theme="dark"] .internship-copy > p:not(.section-label),
html[data-theme="dark"] .snapshot-card small { color: #b7c9cd; }
html[data-theme="dark"] .profile-identity-board,
html[data-theme="dark"] .profile-full-narrative,
html[data-theme="dark"] .profile-story-panel,
html[data-theme="dark"] .story-card,
html[data-theme="dark"] .snapshot-card,
html[data-theme="dark"] .role-board,
html[data-theme="dark"] .identity-status,
html[data-theme="dark"] .lab-card,
html[data-theme="dark"] .lab-content,
html[data-theme="dark"] .capability-detail {
  border-color: rgba(97,150,159,.47);
  background: rgba(10,30,42,.82);
}
html[data-theme="dark"] .identity-topline,
html[data-theme="dark"] .profile-identity-board .rail-note,
html[data-theme="dark"] .story-lead-block,
html[data-theme="dark"] .profile-layout-note,
html[data-theme="dark"] .snapshot-section { border-color: rgba(102,148,156,.44); }
html[data-theme="dark"] .identity-direction strong,
html[data-theme="dark"] .identity-status strong,
html[data-theme="dark"] .identity-meta-grid strong,
html[data-theme="dark"] .role-list div { color: #edf6f4; }
html[data-theme="dark"] .identity-meta-grid span,
html[data-theme="dark"] .profile-identity-board .rail-note,
html[data-theme="dark"] .profile-identity-board .identity-live { color: #a8bdc2; }
html[data-theme="dark"] .role-list div,
html[data-theme="dark"] .story-card-metrics > div,
html[data-theme="dark"] .full-story-body,
html[data-theme="dark"] .profile-layout-v13 .profile-rail.profile-identity-board {
  background: rgba(6,23,34,.72);
  border-color: rgba(97,150,159,.47);
}
html[data-theme="dark"] .capability-detail-visual { background: linear-gradient(145deg, #0a2433, #071722); }
html[data-theme="dark"] .evidence-guide { color: #f2c467; background: rgba(223,152,41,.10); }
html[data-theme="dark"] .lab-content p,
html[data-theme="dark"] .snapshot-intro > p:last-child { color: #b7c9cd; }
html[data-theme="dark"] .site-footer { background: #030b12; }
html[data-theme="dark"] .utility-toggle { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .dialog-shell,
html[data-theme="dark"] .lab-dialog { color: #eef8f5; background: #0a1c28; }
html[data-theme="dark"] .dialog-columns section { border-color: rgba(97,150,159,.47); background: rgba(255,255,255,.03); }
html[data-theme="dark"] .dialog-close { color: #eff8f6; background: #102834; border-color: rgba(97,150,159,.47); }

@media (max-width: 900px) {
  .header-tools { margin-left: auto; }
  .utility-toggle { min-height: 36px; padding: 0 10px; }
}
@media (max-width: 620px) {
  .header-tools { gap: 6px; }
  .utility-toggle { width: 38px; padding: 0; }
  .utility-toggle span { display: none; }
  .hero-telemetry { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .type-caret { display: none; }
}


/* =====================================================================
   V28 — ACCESSIBLE THEME CONTRAST, VI/EN SWITCHER & CV ACCESS
===================================================================== */
/* The V12 fallback hid the language control. V28 explicitly restores it. */
.language-toggle { display: inline-flex !important; }
.cv-toggle { text-decoration: none; }
.cv-toggle {
  border-color: rgba(244, 196, 104, .48);
  color: #fff3d5;
  background: rgba(223,152,41,.14);
}
.cv-toggle:hover { color: #092130; background: #f4c66e; }
.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 34px;
  justify-content: center;
}
.language-code {
  color: rgba(255,245,225,.48);
  font-weight: 700;
  transition: color .2s ease, text-shadow .2s ease;
}
.language-code.is-active {
  color: #fff8e8;
  text-shadow: 0 0 12px rgba(255,205,106,.34);
}
.language-separator { color: rgba(255,235,195,.45); }

/* Theme changes use only composited color/background transitions. */
body,
.profile-section,
.workflow-section,
.evidence-section,
.internship-section,
.profile-identity-board,
.profile-full-narrative,
.profile-story-panel,
.story-card,
.snapshot-card,
.role-board,
.identity-status,
.lab-card,
.lab-content,
.capability-detail,
.workflow-step,
.principle-strip,
.principle-quote,
.strip-principle {
  transition: background-color .24s ease, background .24s ease, color .2s ease, border-color .24s ease, box-shadow .24s ease;
}

/* LIGHT: establish legible neutral text and card hierarchy. */
html[data-theme="light"] .workflow-step {
  color: #4c626b;
  border-color: rgba(205,167,104,.48);
  background: rgba(255,255,255,.74);
}
html[data-theme="light"] .workflow-step strong { color: #08283c; }
html[data-theme="light"] .workflow-step small { color: #687b84; }
html[data-theme="light"] .principle-strip { background: linear-gradient(90deg,#fff3dc,#fcf8ef); }
html[data-theme="light"] .principle-quote { color: #554022; }
html[data-theme="light"] .strip-principle span { color: #61717a; }

/* DARK: remove all pale panels that made light text unreadable. */
html[data-theme="dark"] .workflow-section {
  background:
    radial-gradient(circle at 82% 12%, rgba(37,122,118,.18), transparent 24rem),
    linear-gradient(145deg, #061722, #081f2c 55%, #0b2630);
}
html[data-theme="dark"] .workflow-heading > p,
html[data-theme="dark"] .workflow-heading .section-label,
html[data-theme="dark"] .workflow-heading .section-kicker {
  color: #b8d0d2;
}
html[data-theme="dark"] .workflow-step {
  color: #c5d8da;
  border-color: rgba(93,145,153,.62);
  background: linear-gradient(145deg, rgba(12,39,52,.96), rgba(9,31,43,.98));
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
html[data-theme="dark"] .workflow-step:hover,
html[data-theme="dark"] .workflow-step.active {
  color: #f5fbf8;
  border-color: rgba(243,192,89,.88);
  background: linear-gradient(145deg, #133746, #0e2b39);
  box-shadow: 0 20px 38px rgba(0,0,0,.30);
}
html[data-theme="dark"] .workflow-step strong { color: #f4fbf9; }
html[data-theme="dark"] .workflow-step small { color: #b6cbcf; }
html[data-theme="dark"] .workflow-step .step-no {
  color: #1c2c33;
  background: #f6d78d;
}
html[data-theme="dark"] .workflow-step .step-icon {
  color: #f2c469;
  border-color: rgba(110,165,173,.65);
  background: rgba(255,255,255,.04);
}
html[data-theme="dark"] .principle-strip {
  border-color: rgba(96,149,157,.64);
  background: linear-gradient(90deg, #0c2835, #0b2130);
  box-shadow: 0 18px 40px rgba(0,0,0,.24);
}
html[data-theme="dark"] .principle-quote {
  color: #f5e8cb;
  border-color: rgba(96,149,157,.64);
  background: linear-gradient(145deg, rgba(244,190,83,.10), rgba(255,255,255,.02));
}
html[data-theme="dark"] .strip-principle {
  border-color: rgba(96,149,157,.58);
  background: transparent;
}
html[data-theme="dark"] .strip-principle i,
html[data-theme="dark"] .strip-principle strong { color: #f3c66e; }
html[data-theme="dark"] .strip-principle span { color: #c2d6d9; }
html[data-theme="dark"] .workflow-console {
  border-color: rgba(83,156,170,.64);
  box-shadow: 0 24px 52px rgba(0,0,0,.36);
}
html[data-theme="dark"] .workflow-console .console-copy p,
html[data-theme="dark"] .workflow-console .console-objectives li { color: rgba(246,253,250,.82); }
html[data-theme="dark"] .workflow-console .console-command { border-color: rgba(104,187,203,.36); }
html[data-theme="dark"] .capability-card {
  border-color: rgba(94,154,165,.52);
  background: linear-gradient(145deg, rgba(7,31,44,.96), rgba(10,39,49,.96));
}
html[data-theme="dark"] .capability-card h3 { color: #f2faf8; }
html[data-theme="dark"] .capability-summary,
html[data-theme="dark"] .capability-card .capability-tools span { color: #c1d6d8; }
html[data-theme="dark"] .capability-card .capability-tools span { border-color: rgba(94,154,165,.46); }
html[data-theme="dark"] .utility-toggle {
  color: #fff4de;
  border-color: rgba(245,208,139,.38);
  background: rgba(255,255,255,.07);
}
html[data-theme="dark"] .cv-toggle { background: rgba(223,152,41,.18); }
html[data-theme="dark"] .language-code.is-active { color: #fff9ec; }

@media (max-width: 900px) {
  .cv-toggle span { display: none; }
  .cv-toggle { width: 39px; padding: 0; }
}
@media (max-width: 620px) {
  .header-tools { gap: 5px; }
  .cv-toggle { display: inline-flex; }
  .language-toggle { width: auto; min-width: 58px; }
  .language-toggle > i { display: none; }
  .language-switch { min-width: 42px; }
}


/* =====================================================================
   V29 — CONSISTENT LIGHT / DARK SYSTEM + MOTION REFINEMENT
   All major surfaces consume one palette per mode. No accidental pale
   cards in dark mode or retained dark panels in light mode.
===================================================================== */
html[data-theme="light"] {
  color-scheme: light;
  --surface-page: #fffaf1;
  --surface-section: #fff8ee;
  --surface-card: #fffdf8;
  --surface-card-alt: #fff4df;
  --surface-technical: #eef7f6;
  --surface-technical-strong: #dfeeed;
  --text-primary: #09263a;
  --text-secondary: #526a75;
  --text-subtle: #6b818a;
  --border-theme: #e4c792;
  --header-bg: rgba(255,250,241,.93);
  --header-text: #0b293b;
  --header-muted: #687e87;
  --accent-theme: #c67a17;
  --accent-soft: rgba(223,152,41,.13);
  --section-shadow: 0 18px 50px rgba(64, 46, 19, .08);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --surface-page: #07141f;
  --surface-section: #091d29;
  --surface-card: #0d2633;
  --surface-card-alt: #102d3b;
  --surface-technical: #0a202d;
  --surface-technical-strong: #113545;
  --text-primary: #f1fbf8;
  --text-secondary: #c5d8d9;
  --text-subtle: #a6bec3;
  --border-theme: #3a6872;
  --header-bg: rgba(5,18,29,.94);
  --header-text: #fff8ea;
  --header-muted: #c0d2d4;
  --accent-theme: #f2c36b;
  --accent-soft: rgba(242,195,107,.14);
  --section-shadow: 0 22px 56px rgba(0, 0, 0, .34);
}

html[data-theme] body {
  color: var(--text-primary);
  background: var(--surface-page);
  transition: background-color .25s ease, color .2s ease;
}
html[data-theme] body::selection { color: #082436; background: #f3c56d; }
html[data-theme] .site-header,
html[data-theme] .site-header.scrolled {
  border-color: color-mix(in srgb, var(--border-theme) 60%, transparent);
  background: var(--header-bg);
  box-shadow: 0 12px 34px rgba(16, 35, 44, .10);
}
html[data-theme] .brand { color: var(--header-text); }
html[data-theme] .brand-copy small { color: var(--header-muted); }
html[data-theme] .site-nav a { color: color-mix(in srgb, var(--header-text) 72%, transparent); }
html[data-theme] .site-nav a:hover,
html[data-theme] .site-nav a.active { color: var(--header-text); }
html[data-theme] .utility-toggle {
  color: var(--header-text);
  border-color: color-mix(in srgb, var(--border-theme) 76%, transparent);
  background: color-mix(in srgb, var(--surface-card) 74%, transparent);
}
html[data-theme] .cv-toggle {
  color: var(--header-text);
  background: var(--accent-soft);
}
html[data-theme="light"] .language-code { color: #7a8c92; }
html[data-theme="light"] .language-code.is-active { color: #0b293b; text-shadow: none; }
html[data-theme="light"] .language-separator { color: #a36922; }

/* Page sections receive a mode-specific surface. */
html[data-theme] .profile-section,
html[data-theme] .workflow-section,
html[data-theme] .evidence-section,
html[data-theme] .internship-section {
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--surface-section), color-mix(in srgb, var(--surface-section) 86%, var(--surface-card-alt)));
}
html[data-theme="dark"] .profile-section,
html[data-theme="dark"] .workflow-section,
html[data-theme="dark"] .evidence-section,
html[data-theme="dark"] .internship-section {
  background: linear-gradient(135deg, #071722, #0a222e 58%, #0c2935);
}

/* Hero mirrors the selected theme instead of retaining an old hard-coded panel. */
html[data-theme="light"] .hero-classic {
  color: var(--text-primary);
  background: linear-gradient(130deg, #fffaf0 0%, #fff4df 56%, #f3e2c2 100%);
}
html[data-theme="light"] .hero-classic::before {
  opacity: .12;
  mix-blend-mode: multiply;
  filter: saturate(.75) contrast(.82);
}
html[data-theme="light"] .hero-classic::after {
  background: linear-gradient(90deg, rgba(255,250,241,.97), rgba(255,250,241,.68) 55%, rgba(255,250,241,.32)), linear-gradient(0deg, rgba(255,250,241,.76), transparent 62%);
}
html[data-theme="light"] .hero-grid { opacity: .16; background-image: linear-gradient(rgba(166,113,36,.18) 1px,transparent 1px), linear-gradient(90deg,rgba(166,113,36,.18) 1px,transparent 1px); }
html[data-theme="light"] .hero-copy h1,
html[data-theme="light"] .hero-role { color: var(--text-primary); }
html[data-theme="light"] .hero-description,
html[data-theme="light"] .hero-telemetry,
html[data-theme="light"] .hero-image figcaption { color: var(--text-secondary); }
html[data-theme="light"] .hero-social a { color: var(--text-primary); border-color: var(--border-theme); background: rgba(255,255,255,.64); }
html[data-theme="light"] .button-ghost { color: var(--text-primary); border-color: var(--border-theme); background: rgba(255,255,255,.70); }
html[data-theme="light"] .button-ghost:hover { color: #102531; background: #f4c66e; }

/* Capabilities become a bright technical board in light mode. */
html[data-theme="light"] .capabilities-section {
  color: var(--text-primary);
  background: linear-gradient(135deg, #f4fbfa, #e8f4f0 55%, #e7f0e7);
}
html[data-theme="light"] .capability-bg-grid { opacity: .19; background-image: linear-gradient(rgba(42,119,121,.20) 1px,transparent 1px),linear-gradient(90deg,rgba(42,119,121,.20) 1px,transparent 1px); }
html[data-theme="light"] .capability-heading > p { color: var(--text-secondary); }
html[data-theme="light"] .capability-card {
  color: var(--text-primary);
  border-color: #a9c8c5;
  background: rgba(255,255,255,.84);
  box-shadow: 0 12px 30px rgba(28,75,73,.08);
}
html[data-theme="light"] .capability-card:hover,
html[data-theme="light"] .capability-card.active { border-color: #d99631; background: #fffaf0; box-shadow: 0 22px 44px rgba(28,75,73,.14); }
html[data-theme="light"] .capability-card h3 { color: var(--text-primary); }
html[data-theme="light"] .capability-summary { color: var(--text-secondary); }
html[data-theme="light"] .capability-tools span { color: #365d63; border-color: #b7d0cc; background: #f1faf8; }
html[data-theme="light"] .capability-detail { border-color: #a9c8c5; background: var(--surface-card); }
html[data-theme="light"] .capability-detail h3 { color: var(--text-primary); }
html[data-theme="light"] .capability-detail-copy > p,
html[data-theme="light"] .detail-columns li { color: var(--text-secondary); }
html[data-theme="light"] .capability-detail-visual {
  border-color: #b4ceca;
  background: linear-gradient(145deg, #dff0ed, #edf7f5);
}
html[data-theme="light"] .detail-outcome { color: #244650; border-color: #a7c7c3; background: rgba(255,255,255,.80); }
html[data-theme="light"] .detail-outcome strong { color: #287e6a; }

/* Reusable light / dark cards. */
html[data-theme] .profile-identity-board,
html[data-theme] .profile-full-narrative,
html[data-theme] .profile-story-panel,
html[data-theme] .story-card,
html[data-theme] .snapshot-card,
html[data-theme] .role-board,
html[data-theme] .identity-status,
html[data-theme] .lab-card,
html[data-theme] .lab-content,
html[data-theme] .capability-detail,
html[data-theme] .work-principles,
html[data-theme] .principle-card,
html[data-theme] .dialog-columns section {
  color: var(--text-primary);
  border-color: var(--border-theme);
  background: var(--surface-card);
  box-shadow: var(--section-shadow);
}
html[data-theme] .profile-layout-note,
html[data-theme] .full-story-copy p,
html[data-theme] .story-card-copy > p,
html[data-theme] .story-card-points li,
html[data-theme] .snapshot-card small,
html[data-theme] .principle-card p,
html[data-theme] .lab-content p,
html[data-theme] .evidence-heading > p,
html[data-theme] .internship-copy > p:not(.section-label),
html[data-theme] .workflow-heading > p:last-child { color: var(--text-secondary); }
html[data-theme] .identity-direction strong,
html[data-theme] .identity-status strong,
html[data-theme] .identity-meta-grid strong,
html[data-theme] .role-list div,
html[data-theme] .snapshot-card strong,
html[data-theme] .lab-content h3,
html[data-theme] .lab-detail,
html[data-theme] .principle-card h3 { color: var(--text-primary); }
html[data-theme] .identity-meta-grid span,
html[data-theme] .profile-identity-board .rail-note,
html[data-theme] .profile-identity-board .identity-live { color: var(--text-subtle); }
html[data-theme] .role-list div,
html[data-theme] .story-card-metrics > div,
html[data-theme] .full-story-body { background: var(--surface-card-alt); border-color: var(--border-theme); }

/* Workflow cards and quotation are deliberately one surface family. */
html[data-theme] .workflow-step {
  color: var(--text-secondary);
  border-color: var(--border-theme);
  background: var(--surface-card);
  box-shadow: 0 10px 26px rgba(20, 43, 51, .08);
}
html[data-theme] .workflow-step strong { color: var(--text-primary); }
html[data-theme] .workflow-step small { color: var(--text-secondary); }
html[data-theme] .workflow-step:hover,
html[data-theme] .workflow-step.active { color: var(--text-primary); border-color: var(--gold); background: var(--surface-card-alt); }
html[data-theme] .principle-strip { border-color: var(--border-theme); background: var(--surface-card-alt); box-shadow: var(--section-shadow); }
html[data-theme] .principle-quote { color: var(--text-primary); border-color: var(--border-theme); background: color-mix(in srgb, var(--surface-card-alt) 86%, var(--accent-soft)); }
html[data-theme] .strip-principle { border-color: var(--border-theme); }
html[data-theme] .strip-principle strong,
html[data-theme] .strip-principle i { color: var(--accent-theme); }
html[data-theme] .strip-principle span { color: var(--text-secondary); }

/* The console is a theme-aware technical visual rather than a leftover dark panel. */
html[data-theme="light"] .workflow-console {
  color: #0b2b3c;
  border-color: #9cc1c2;
  background: radial-gradient(circle at 86% 14%, rgba(49,151,142,.18), transparent 22rem), #edf7f5;
  box-shadow: 0 20px 45px rgba(25,72,75,.12);
}
html[data-theme="light"] .console-bar { border-color: #bbd5d2; background: rgba(255,255,255,.60); }
html[data-theme="light"] .console-bar b { color: #58737b; }
html[data-theme="light"] .console-copy h3 { color: #092a3b; }
html[data-theme="light"] .console-copy p,
html[data-theme="light"] .console-objectives li { color: #45656e; }
html[data-theme="light"] .console-command { border-color: #a8c9c7; color: #a56213; background: rgba(255,255,255,.78); }
html[data-theme="light"] .console-command span:nth-child(2) { color: #274854; }
html[data-theme="light"] .console-command button { color: #197c83; }
html[data-theme="light"] .console-visual { border-color: #bdd8d4; }
html[data-theme="light"] .console-visual::before { opacity: .19; background-image: linear-gradient(rgba(42,123,124,.34) 1px,transparent 1px), linear-gradient(90deg,rgba(42,123,124,.34) 1px,transparent 1px); }
html[data-theme="light"] .console-radar { border-color: #b57b25; }
html[data-theme="light"] .console-radar::before,
html[data-theme="light"] .console-radar::after { background: rgba(169,116,34,.28); }
html[data-theme="light"] .radar-scan { background: linear-gradient(90deg, rgba(196,130,32,.85), transparent); }

/* Toolkit, contact and footer are themed too. */
html[data-theme="light"] .toolkit-section { color: var(--text-primary); background: linear-gradient(135deg, #f0faf8, #e5f3ed); }
html[data-theme="light"] .toolkit-section .section-label { color: var(--accent-theme); }
html[data-theme="light"] .toolkit-track span { color: #315b62; border-color: #b1cfca; background: rgba(255,255,255,.72); }
html[data-theme="light"] .contact-section { color: var(--text-primary); background: linear-gradient(135deg, #fff8ed, #f6ead7); }
html[data-theme="light"] .contact-section .section-label { color: var(--accent-theme); }
html[data-theme="light"] .contact-copy>p:not(.section-label),
html[data-theme="light"] .contact-list a,
html[data-theme="light"] .contact-list span { color: var(--text-secondary); }
html[data-theme="light"] .contact-form { border-color: var(--border-theme); background: rgba(255,255,255,.72); }
html[data-theme="light"] .form-row label { color: #754711; }
html[data-theme="light"] .form-row input,
html[data-theme="light"] .form-row textarea { color: var(--text-primary); border-color: var(--border-theme); background: #fffdf8; }
html[data-theme="light"] .site-footer { color: #5e727b; background: #edf5f2; }

html[data-theme="dark"] .toolkit-section,
html[data-theme="dark"] .contact-section,
html[data-theme="dark"] .site-footer { color: var(--text-primary); background: #061722; }
html[data-theme="dark"] .toolkit-track span { color: #e3f4ec; border-color: #3b6871; background: rgba(255,255,255,.04); }
html[data-theme="dark"] .contact-copy>p:not(.section-label),
html[data-theme="dark"] .contact-list a,
html[data-theme="dark"] .contact-list span { color: var(--text-secondary); }
html[data-theme="dark"] .contact-form { border-color: #3b6871; background: #0a202d; }
html[data-theme="dark"] .form-row label { color: #f1ca78; }
html[data-theme="dark"] .form-row input,
html[data-theme="dark"] .form-row textarea { color: #f1fbf8; border-color: #3b6871; background: #071923; }
html[data-theme="dark"] .site-footer { color: #b6cbcf; background: #030c13; }

html[data-theme] .lab-dialog,
html[data-theme] .dialog-shell { color: var(--text-primary); background: var(--surface-card); }
html[data-theme] .dialog-shell>h2 { color: var(--text-primary); }
html[data-theme] .dialog-shell>p:not(.section-label),
html[data-theme] .dialog-columns ul { color: var(--text-secondary); }
html[data-theme] .dialog-close { color: var(--text-primary); border-color: var(--border-theme); background: var(--surface-card-alt); }

/* Motion: reveal uses opacity + transform only; cards receive a low-cost spotlight. */
html.motion-ready .reveal {
  opacity: 0 !important;
  filter: blur(5px);
  transform: translate3d(0, 28px, 0) scale(.985) !important;
  transition: opacity .65s cubic-bezier(.2,.75,.2,1) var(--reveal-delay, 0ms),
              transform .7s cubic-bezier(.2,.75,.2,1) var(--reveal-delay, 0ms),
              filter .55s ease var(--reveal-delay, 0ms) !important;
}
html.motion-ready .reveal.show {
  opacity: 1 !important;
  filter: none;
  transform: none !important;
}
[data-card-tilt] { position: relative; transform-style: preserve-3d; will-change: transform; }
[data-card-tilt]::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%), rgba(255,255,255,.18), transparent 56%);
  transition: opacity .22s ease;
}
[data-card-tilt]:hover::after { opacity: 1; }
html[data-theme="dark"] [data-card-tilt]::after { background: radial-gradient(220px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%), rgba(115,223,200,.11), transparent 56%); }

/* Theme changes receive a circular, progressive enhancement with a native fallback. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .36s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
::view-transition-old(root) { animation-name: v29ThemeOut; }
::view-transition-new(root) { animation-name: v29ThemeIn; }
@keyframes v29ThemeOut { to { opacity: 0; transform: scale(.985); } }
@keyframes v29ThemeIn { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: scale(1); } }
@keyframes v29SignalPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(85,207,156,.32); } 50% { box-shadow: 0 0 0 10px rgba(85,207,156,0); } }
html:not([data-theme="light"]) .status-dot,
html[data-theme="dark"] .status-dot { animation: v29SignalPulse 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html.motion-ready .reveal,
  html.motion-ready .reveal.show {
    opacity: 1 !important;
    filter: none;
    transform: none !important;
    transition: none !important;
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  [data-card-tilt]::after { display: none; }
}

/* V29.1 — Light mode also converts embedded technical mini-panels to a readable pale system. */
html[data-theme="light"] .hero-image-frame {
  border-color: #d4ad68;
  background: radial-gradient(circle at 50% 18%, #fff4d7, #f6e1b8 58%, #ead09a);
  box-shadow: 0 28px 58px rgba(86, 60, 18, .16);
}
html[data-theme="light"] .hero-image-frame::before { border-color: rgba(175,112,24,.34); }
html[data-theme="light"] .hero-orbit { border-color: rgba(174,113,27,.24); }
html[data-theme="light"] .hero-telemetry { color: #42646f; border-color: #b9d2cd; background: rgba(255,255,255,.64); }
html[data-theme="light"] .type-caret { background: #bd7620; }

html[data-theme="light"] .lab-visual {
  color: #1d4b57;
  background: linear-gradient(135deg, #dff1ef, #eef8f6);
}
html[data-theme="light"] .lab-visual::before {
  opacity: .24;
  background-image: linear-gradient(rgba(42,122,123,.42) 1px, transparent 1px), linear-gradient(90deg, rgba(42,122,123,.42) 1px, transparent 1px);
}
html[data-theme="light"] .mini-node { color: #b46d16; border-color: #c69a55; background: rgba(223,152,41,.10); }
html[data-theme="light"] .mini-line { background: repeating-linear-gradient(90deg,#b87921 0 3px,transparent 3px 8px); }
html[data-theme="light"] .mini-rack { border-color: #85aaa9; background: rgba(255,255,255,.50); }
html[data-theme="light"] .mini-rack span { background: #4d7e82; }
html[data-theme="light"] .mini-terminal { color: #315860; }
html[data-theme="light"] .mini-monitor > div { color: #5b737b; border-color: #a4c3c0; background: rgba(255,255,255,.54); }
html[data-theme="light"] .full-map-shell,
html[data-theme="light"] .cyber-map,
html[data-theme="light"] .story-topology {
  color: #1b4652;
  border-color: #9bbfbd;
  background: linear-gradient(145deg, #dff0ee, #eff8f5);
}
html[data-theme="light"] .full-map-shell::before,
html[data-theme="light"] .cyber-map::before,
html[data-theme="light"] .story-topology::before {
  opacity: .24;
  background-image: linear-gradient(rgba(43,124,124,.38) 1px, transparent 1px), linear-gradient(90deg, rgba(43,124,124,.38) 1px, transparent 1px);
}
html[data-theme="light"] .full-map-head,
html[data-theme="light"] .cyber-map-head,
html[data-theme="light"] .story-topology-head { color: #264f5a; }
html[data-theme="light"] .full-map-head small,
html[data-theme="light"] .cyber-map-head small,
html[data-theme="light"] .story-topology-head small { color: #6a8086; }
html[data-theme="light"] .full-map-node,
html[data-theme="light"] .topology-node-card,
html[data-theme="light"] .cyber-node { color: #244a54; border-color: #bf9958; background: rgba(255,255,255,.70); }
html[data-theme="light"] .full-map-node i,
html[data-theme="light"] .topology-node-card .node-icon { color: #b8731c; border-color: #c79950; background: rgba(223,152,41,.09); }
html[data-theme="light"] .full-map-link,
html[data-theme="light"] .topology-connector,
html[data-theme="light"] .cyber-link { background: repeating-linear-gradient(180deg,#bd7a22 0 5px,transparent 5px 10px); }
html[data-theme="light"] .full-map-branch,
html[data-theme="light"] .topology-branch,
html[data-theme="light"] .cyber-branch { background: repeating-linear-gradient(90deg,#bd7a22 0 6px,transparent 6px 12px); }
html[data-theme="light"] .full-map-endpoints span,
html[data-theme="light"] .topology-client-row span,
html[data-theme="light"] .cyber-endpoints span,
html[data-theme="light"] .full-map-legend span,
html[data-theme="light"] .cyber-map-legend span { color: #246150; border-color: #9fc6b8; background: rgba(255,255,255,.62); }

/* A single theme surface for native controls, dialog and form feedback. */
html[data-theme="light"] input, html[data-theme="light"] textarea { color-scheme: light; }
html[data-theme="dark"] input, html[data-theme="dark"] textarea { color-scheme: dark; }
html[data-theme="light"] .form-feedback { color: #9b5d17; }
html[data-theme="dark"] .form-feedback { color: #f2ca78; }


/* =====================================================================
   V30 — DISTINCT WORKFLOW VISUALS + AMBIENT TECH DECORATION
   Each operational step now has its own visual language instead of one
   reused radar: topology map, controlled diff, validation matrix, runbook.
===================================================================== */
.workflow-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.workflow-section > .container { position: relative; z-index: 1; }
.workflow-section::before,
.workflow-section::after {
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
}
.workflow-section::before {
  width: 30rem;
  height: 30rem;
  right: -11rem;
  top: 10rem;
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4.8rem color-mix(in srgb, var(--gold) 4%, transparent), inset 0 0 0 9.6rem color-mix(in srgb, var(--mint) 4%, transparent);
}
.workflow-section::after {
  width: 32rem;
  height: 14rem;
  left: -10rem;
  bottom: 3.5rem;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--mint) 13%, transparent), transparent 68%);
  filter: blur(1px);
}
.workflow-section.is-in-view::before { opacity: .78; animation: v30OrbitHalo 24s ease-in-out infinite alternate; }
.workflow-section.is-in-view::after { opacity: 1; animation: v30FieldDrift 18s ease-in-out infinite alternate; }

.workflow-console {
  --visual-bg: #071c27;
  --visual-panel: rgba(9, 38, 49, .88);
  --visual-panel-alt: rgba(5, 25, 35, .82);
  --visual-line: rgba(105, 184, 190, .34);
  --visual-accent: #f0bd57;
  --visual-accent-soft: rgba(240, 189, 87, .15);
  --visual-mint: #5cd7a7;
  --visual-text: #ebf7f0;
  --visual-muted: rgba(224, 246, 241, .62);
}

.workflow-console .console-visual {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 100%;
  padding: clamp(20px, 2.5vw, 34px);
  border-left: 1px solid var(--visual-line);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--visual-bg) 88%, transparent), color-mix(in srgb, var(--visual-bg) 58%, transparent)),
    radial-gradient(circle at 70% 22%, color-mix(in srgb, var(--visual-accent) 12%, transparent), transparent 12rem),
    var(--visual-bg);
}
.workflow-console .console-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .3;
  background-image:
    linear-gradient(var(--visual-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--visual-line) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.workflow-console .console-visual::after {
  content: '';
  position: absolute;
  inset: -45% -18% auto;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.09), transparent);
  transform: skewY(-12deg);
  opacity: 0;
}
.workflow-section.is-in-view .console-visual::after { animation: v30ConsoleSweep 8.5s linear infinite; }
.workflow-visual { position: relative; z-index: 1; width: min(100%, 360px); color: var(--visual-text); }
.visual-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--visual-accent);
  font: 800 10px var(--font-mono);
  letter-spacing: .1em;
}
.visual-topline small { color: var(--visual-muted); font: 10px var(--font-mono); letter-spacing: .04em; }

/* 01 — topology / discovery map */
.system-map { position: relative; width: 310px; height: 248px; margin: 0 auto; }
.system-node {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 82px;
  padding: 10px 7px 8px;
  border: 1px solid var(--visual-line);
  border-radius: 14px;
  color: var(--visual-text);
  background: color-mix(in srgb, var(--visual-panel) 90%, transparent);
  box-shadow: 0 12px 24px rgba(0,0,0,.14);
}
.system-node i { color: var(--visual-accent); font-size: 15px; }
.system-node b { font: 800 10px var(--font-mono); letter-spacing: .04em; }
.system-node--edge { top: 0; left: calc(50% - 41px); }
.system-node--router { top: 78px; left: 18px; }
.system-node--service { top: 78px; right: 18px; }
.system-node--client { bottom: 0; left: calc(50% - 41px); }
.map-link { position: absolute; height: 1px; transform-origin: left center; background: repeating-linear-gradient(90deg, var(--visual-accent) 0 4px, transparent 4px 9px); opacity: .82; }
.map-link--one { top: 50px; left: 50%; width: 91px; transform: rotate(136deg); }
.map-link--two { top: 50px; left: 50%; width: 91px; transform: rotate(44deg); }
.map-link--three { top: 128px; left: 90px; width: 130px; transform: rotate(32deg); }
.map-link--four { top: 153px; left: 50%; width: 72px; transform: rotate(90deg); }
.map-packet { position: absolute; z-index: 2; width: 7px; height: 7px; border-radius: 50%; background: var(--visual-mint); box-shadow: 0 0 14px var(--visual-mint); }
.map-packet--one { top: 57px; left: 143px; animation: v30PacketOne 3.3s ease-in-out infinite; }
.map-packet--two { top: 139px; left: 91px; animation: v30PacketTwo 4.2s ease-in-out infinite .7s; }
.visual-chip-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.visual-chip-row span { padding: 6px 9px; border: 1px solid var(--visual-line); border-radius: 999px; color: var(--visual-muted); background: color-mix(in srgb, var(--visual-panel-alt) 88%, transparent); font: 800 9px var(--font-mono); letter-spacing: .07em; }

/* 02 — controlled configuration diff */
.config-diff-grid { display: grid; grid-template-columns: 1fr 32px 1fr; align-items: center; gap: 8px; }
.config-pane { display: grid; gap: 8px; padding: 13px; border: 1px solid var(--visual-line); border-radius: 14px; background: color-mix(in srgb, var(--visual-panel) 92%, transparent); }
.config-pane-label { margin-bottom: 3px; color: var(--visual-muted); font: 800 9px var(--font-mono); letter-spacing: .1em; }
.config-pane > div { display: flex; align-items: center; gap: 7px; padding: 7px 7px; border-radius: 8px; background: rgba(255,255,255,.035); color: var(--visual-text); font: 10px var(--font-mono); white-space: nowrap; }
.config-pane i { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 5px; font: 800 11px/1 var(--font-sans); }
.config-pane--before i { color: #ffc0ad; background: rgba(255,111,97,.17); }
.config-pane--after i { color: #c7ffea; background: rgba(92,215,167,.18); }
.config-pane--after > div { animation: v30DiffAppear 3.8s ease-in-out infinite both; }
.config-pane--after > div:nth-child(3) { animation-delay: .25s; }
.config-pane--after > div:nth-child(4) { animation-delay: .5s; }
.diff-transfer { display: grid; justify-items: center; gap: 8px; color: var(--visual-accent); }
.diff-transfer span { width: 1px; height: 48px; background: linear-gradient(var(--visual-accent), transparent); }
.diff-transfer i { font-size: 13px; animation: v30TransferPulse 2.4s ease-in-out infinite; }
.change-gate { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 15px; padding: 10px 12px; border: 1px solid var(--visual-line); border-radius: 10px; background: color-mix(in srgb, var(--visual-panel-alt) 82%, transparent); }
.change-gate span { color: var(--visual-muted); font: 800 9px var(--font-mono); letter-spacing: .08em; }
.change-gate b { display: inline-flex; align-items: center; gap: 6px; color: var(--visual-mint); font: 800 10px var(--font-mono); }

/* 03 — verification matrix / signal graph */
.verify-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.verify-metrics > div { position: relative; display: grid; gap: 3px; min-height: 63px; padding: 11px; border: 1px solid var(--visual-line); border-radius: 12px; background: color-mix(in srgb, var(--visual-panel) 92%, transparent); }
.verify-metrics span { color: var(--visual-muted); font: 800 9px var(--font-mono); letter-spacing: .08em; }
.verify-metrics b { color: var(--visual-text); font-size: 16px; }
.verify-metrics i { position: absolute; right: 10px; bottom: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--visual-mint); box-shadow: 0 0 12px var(--visual-mint); animation: v30MetricPulse 2.2s ease-in-out infinite; }
.verify-metrics > div:nth-child(2) i { animation-delay: .25s; }
.verify-metrics > div:nth-child(3) i { animation-delay: .5s; }
.verify-metrics > div:nth-child(4) i { animation-delay: .75s; }
.verify-graph { position: relative; margin-top: 14px; padding: 11px; border: 1px solid var(--visual-line); border-radius: 13px; background: color-mix(in srgb, var(--visual-panel-alt) 88%, transparent); }
.verify-graph svg { display: block; width: 100%; height: 92px; overflow: visible; }
.verify-graph-grid { fill: none; stroke: color-mix(in srgb, var(--visual-line) 80%, transparent); stroke-width: 1; }
.verify-graph-line { fill: none; stroke: var(--visual-mint); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--visual-mint) 72%, transparent)); animation: v30GraphDraw 3.6s ease-in-out infinite; }
.verify-graph-dot { position: absolute; top: 30px; right: 15%; width: 8px; height: 8px; border-radius: 50%; background: var(--visual-accent); box-shadow: 0 0 12px var(--visual-accent); animation: v30DotTrack 3.6s ease-in-out infinite; }
.verification-proof { display: flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--visual-mint); font: 800 10px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }

/* 04 — runbook / documentation sheet */
.runbook-sheet { position: relative; width: min(100%, 300px); padding: 15px; border: 1px solid var(--visual-line); border-radius: 15px; background: linear-gradient(145deg, color-mix(in srgb, var(--visual-panel) 96%, transparent), color-mix(in srgb, var(--visual-panel-alt) 98%, transparent)); box-shadow: 0 18px 32px rgba(0,0,0,.16); }
.runbook-head, .runbook-meta, .runbook-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.runbook-head { padding-bottom: 10px; border-bottom: 1px solid var(--visual-line); color: var(--visual-accent); font: 800 10px var(--font-mono); letter-spacing: .07em; }
.runbook-head i { color: var(--visual-mint); font-size: 14px; }
.runbook-meta { padding: 10px 0; color: var(--visual-muted); font: 9px var(--font-mono); letter-spacing: .04em; }
.runbook-lines { display: grid; gap: 8px; padding: 4px 0 12px; }
.runbook-lines .line { display: block; height: 7px; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--visual-text) 52%, transparent), transparent); transform-origin: left; animation: v30DocumentLine 4.2s ease-in-out infinite both; }
.runbook-lines .line--title { width: 68%; height: 9px; background: linear-gradient(90deg, var(--visual-accent), transparent); }
.runbook-lines .line--full { width: 100%; }
.runbook-lines .line--short { width: 58%; }
.runbook-lines .line--medium { width: 78%; }
.runbook-lines .line:nth-child(2) { animation-delay: .15s; }
.runbook-lines .line:nth-child(3) { animation-delay: .3s; }
.runbook-lines .line:nth-child(4) { animation-delay: .45s; }
.runbook-lines .line:nth-child(5) { animation-delay: .6s; }
.runbook-evidence { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 10px; border-top: 1px solid var(--visual-line); }
.runbook-evidence span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--visual-line) 74%, transparent); border-radius: 999px; color: var(--visual-mint); font: 800 8px var(--font-mono); letter-spacing: .04em; }
.runbook-footer { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--visual-line); color: var(--visual-accent); font: 800 9px var(--font-mono); letter-spacing: .06em; }
.runbook-cursor { width: 6px; height: 13px; background: var(--visual-accent); animation: v30CursorBlink 1s step-end infinite; }
.document-stamp { position: absolute; right: -14px; bottom: 18px; padding: 7px 9px; border: 1px solid var(--visual-mint); border-radius: 7px; color: var(--visual-mint); background: color-mix(in srgb, var(--visual-panel-alt) 88%, transparent); font: 800 9px var(--font-mono); letter-spacing: .1em; transform: rotate(-8deg); animation: v30StampIn 4.2s ease-in-out infinite; }

/* Subtle decorative systems, inspired by high-end editorial / interaction portfolios. */
.capabilities-section,
.evidence-section { position: relative; isolation: isolate; overflow: clip; }
.capabilities-section > .container,
.evidence-section > .container { position: relative; z-index: 1; }
.capabilities-section::after,
.evidence-section::before {
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
}
.capabilities-section::after {
  width: 22rem;
  height: 22rem;
  right: -8rem;
  bottom: 7rem;
  border: 1px dashed color-mix(in srgb, var(--mint) 44%, transparent);
  border-radius: 50%;
}
.evidence-section::before {
  width: 26rem;
  height: 10rem;
  left: -9rem;
  top: 8rem;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--gold) 13%, transparent) 0 1px, transparent 1px 12px);
  transform: rotate(-10deg);
}
.capabilities-section.is-in-view::after { opacity: .78; animation: v30OrbitHalo 26s linear infinite; }
.evidence-section.is-in-view::before { opacity: 1; animation: v30TraceShift 18s linear infinite; }

@keyframes v30OrbitHalo { from { transform: translate3d(0,0,0) rotate(0deg); } to { transform: translate3d(-18px,12px,0) rotate(360deg); } }
@keyframes v30FieldDrift { from { transform: translate3d(0,0,0) scale(.92); } to { transform: translate3d(36px,-18px,0) scale(1.08); } }
@keyframes v30ConsoleSweep { 0%, 58% { transform: translateY(0) skewY(-12deg); opacity: 0; } 64% { opacity: .8; } 84%, 100% { transform: translateY(390%) skewY(-12deg); opacity: 0; } }
@keyframes v30PacketOne { 0%, 100% { transform: translate(0,0); opacity: 0; } 18% { opacity: 1; } 52% { transform: translate(-92px,72px); opacity: 1; } 82% { transform: translate(-2px,149px); opacity: 1; } }
@keyframes v30PacketTwo { 0%, 100% { transform: translate(0,0); opacity: 0; } 16% { opacity: 1; } 54% { transform: translate(128px,42px); opacity: 1; } 84% { transform: translate(66px,117px); opacity: 1; } }
@keyframes v30DiffAppear { 0%, 22% { transform: translateX(8px); opacity: .25; } 45%, 78% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0); opacity: .7; } }
@keyframes v30TransferPulse { 0%, 100% { transform: translateX(-2px); opacity: .45; } 50% { transform: translateX(4px); opacity: 1; } }
@keyframes v30MetricPulse { 0%, 100% { transform: scale(.8); opacity: .45; } 50% { transform: scale(1.25); opacity: 1; } }
@keyframes v30GraphDraw { 0%, 20% { stroke-dashoffset: 420; opacity: .25; } 58%, 75% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: .78; } }
@keyframes v30DotTrack { 0%, 20% { transform: translate(-145px,52px); opacity: 0; } 55% { transform: translate(-10px,4px); opacity: 1; } 100% { transform: translate(0,0); opacity: .8; } }
@keyframes v30DocumentLine { 0%, 18% { transform: scaleX(0); opacity: .15; } 46%, 78% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: .7; } }
@keyframes v30CursorBlink { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes v30StampIn { 0%, 23% { opacity: 0; transform: translateY(8px) rotate(-8deg) scale(.82); } 45%, 83% { opacity: 1; transform: translateY(0) rotate(-8deg) scale(1); } 100% { opacity: .8; transform: translateY(0) rotate(-8deg) scale(1); } }
@keyframes v30TraceShift { from { background-position: 0 0; } to { background-position: 160px 0; } }

/* Theme tokens for every workflow visual. */
html[data-theme="light"] .workflow-console {
  --visual-bg: #edf9f6;
  --visual-panel: rgba(255,255,255,.88);
  --visual-panel-alt: rgba(241,250,247,.92);
  --visual-line: rgba(37, 112, 118, .30);
  --visual-accent: #b56a12;
  --visual-accent-soft: rgba(181,106,18,.14);
  --visual-mint: #1b9a78;
  --visual-text: #10313d;
  --visual-muted: #537079;
}
html[data-theme="dark"] .workflow-console {
  --visual-bg: #061b27;
  --visual-panel: rgba(10,38,50,.92);
  --visual-panel-alt: rgba(5,25,35,.88);
  --visual-line: rgba(105,184,190,.32);
  --visual-accent: #f0bd57;
  --visual-accent-soft: rgba(240,189,87,.14);
  --visual-mint: #5cd7a7;
  --visual-text: #ebf7f0;
  --visual-muted: rgba(224,246,241,.62);
}
html[data-theme="light"] .workflow-console .console-visual { background: linear-gradient(90deg, rgba(237,249,246,.86), rgba(221,243,238,.70)), var(--visual-bg); }
html[data-theme="light"] .workflow-console .console-visual::after { background: linear-gradient(180deg, transparent, rgba(19,105,102,.08), transparent); }
html[data-theme="dark"] .workflow-console .console-visual { background: linear-gradient(90deg, rgba(6,27,39,.94), rgba(8,35,46,.72)), var(--visual-bg); }

@media (max-width: 900px) {
  .workflow-console .console-visual { min-height: 320px; border-top: 1px solid var(--visual-line); border-left: 0; }
}
@media (max-width: 520px) {
  .workflow-console .console-visual { padding: 18px; min-height: 295px; }
  .system-map { transform: scale(.9); transform-origin: center; }
  .config-diff-grid { grid-template-columns: 1fr 20px 1fr; gap: 5px; }
  .config-pane { padding: 9px; }
  .config-pane > div { padding: 6px 4px; font-size: 8px; }
  .visual-topline { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .workflow-section.is-in-view::before,
  .workflow-section.is-in-view::after,
  .workflow-section.is-in-view .console-visual::after,
  .capabilities-section.is-in-view::after,
  .evidence-section.is-in-view::before,
  .map-packet,
  .config-pane--after > div,
  .diff-transfer i,
  .verify-metrics i,
  .verify-graph-line,
  .verify-graph-dot,
  .runbook-lines .line,
  .runbook-cursor,
  .document-stamp { animation: none !important; }
}


/* ========================= V31 CONFIGURATION VISUAL FIX =========================
   Replaces the cropped before/proposed panes with a compact staged change board.
   Every row is self-contained so it remains legible in the narrower right panel.
=============================================================================== */
.workflow-visual--configure {
  width: min(100%, 420px);
}

.workflow-visual--configure .visual-topline {
  margin-bottom: 14px;
}

.config-plan {
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.config-plan-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--visual-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--visual-panel-alt) 84%, transparent);
  color: var(--visual-muted);
  font: 800 9px var(--font-mono);
  letter-spacing: .08em;
}

.config-plan-summary span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--visual-accent);
}

.config-plan-summary b {
  color: var(--visual-text);
  font: 800 9px var(--font-mono);
  letter-spacing: .05em;
}

.config-change-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-areas:
    'key flow'
    'key note';
  gap: 5px 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--visual-line) 90%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--visual-panel) 90%, transparent);
  animation: v31ConfigRowIn 4.8s ease-in-out infinite both;
}

.config-change-row:nth-child(3) { animation-delay: .24s; }
.config-change-row:nth-child(4) { animation-delay: .48s; }

.config-change-key {
  grid-area: key;
  display: grid;
  align-content: center;
  gap: 4px;
  padding-right: 8px;
  border-right: 1px solid color-mix(in srgb, var(--visual-line) 76%, transparent);
}

.config-change-key span {
  color: var(--visual-accent);
  font: 800 9px var(--font-mono);
  letter-spacing: .07em;
}

.config-change-key b {
  color: var(--visual-text);
  font: 800 10px var(--font-mono);
  letter-spacing: .04em;
}

.config-change-flow {
  grid-area: flow;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.config-change-flow > i {
  flex: 0 0 auto;
  color: var(--visual-accent);
  font-size: 10px;
  animation: v31ConfigArrow 2.4s ease-in-out infinite;
}

.config-value {
  display: block;
  min-width: 0;
  overflow: hidden;
  padding: 6px 8px;
  border-radius: 8px;
  font: 800 10px/1.1 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.config-value--old {
  max-width: 84px;
  color: #ffd5ca;
  background: rgba(255,111,97,.13);
}

.config-value--new {
  flex: 1;
  color: #c9ffeb;
  background: rgba(92,215,167,.14);
  box-shadow: inset 0 0 0 1px rgba(92,215,167,.08);
}

.config-change-row small {
  grid-area: note;
  min-width: 0;
  overflow: hidden;
  color: var(--visual-muted);
  font: 9px/1.35 var(--font-mono);
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-visual--configure .change-gate {
  margin-top: 12px;
}

@keyframes v31ConfigRowIn {
  0%, 14% { opacity: .44; transform: translateX(9px); }
  34%, 78% { opacity: 1; transform: translateX(0); }
  100% { opacity: .86; transform: translateX(0); }
}

@keyframes v31ConfigArrow {
  0%, 100% { transform: translateX(-2px); opacity: .52; }
  50% { transform: translateX(4px); opacity: 1; }
}

@media (max-width: 520px) {
  .workflow-visual--configure { width: 100%; }
  .config-change-row { grid-template-columns: 47px minmax(0, 1fr); gap: 4px 8px; padding: 9px; }
  .config-change-key { padding-right: 6px; }
  .config-value { padding: 6px; font-size: 9px; }
  .config-value--old { max-width: 66px; }
  .config-change-flow { gap: 5px; }
  .config-plan-summary { padding: 9px; }
  .config-plan-summary b { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .config-change-row,
  .config-change-flow > i { animation: none !important; }
}


/* =====================================================================
   V32 — CONFIGURATION BOARD: stable at every visual-panel width
   Compact one-column change board replaces wide before/proposed panes.
===================================================================== */
.workflow-visual--configure {
  width: min(100%, 338px);
}

.workflow-visual--configure .visual-topline {
  width: 100%;
  margin-bottom: 12px;
}

.config-board {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--visual-line);
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--visual-panel) 96%, transparent), color-mix(in srgb, var(--visual-panel-alt) 96%, transparent));
  box-shadow: 0 16px 30px rgba(0,0,0,.12);
}

.config-board-head {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--visual-line) 82%, transparent);
}

.config-board-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--visual-accent) 72%, transparent);
  border-radius: 10px;
  color: var(--visual-accent);
  background: var(--visual-accent-soft);
  font-size: 13px;
}

.config-board-head b,
.config-board-head small {
  display: block;
  min-width: 0;
  font-family: var(--font-mono);
}

.config-board-head b {
  overflow: hidden;
  color: var(--visual-text);
  font-size: 10px;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.config-board-head small {
  margin-top: 3px;
  color: var(--visual-muted);
  font-size: 8px;
  letter-spacing: .04em;
}

.config-board-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--visual-mint);
  font: 800 9px var(--font-mono);
  white-space: nowrap;
}

.config-board-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.config-board-row {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  grid-template-areas:
    'index main'
    'index values';
  gap: 5px 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--visual-line) 70%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--visual-panel-alt) 74%, transparent);
  animation: v32ConfigRowIn 5.2s ease-in-out infinite both;
}

.config-board-row:nth-child(2) { animation-delay: .25s; }
.config-board-row:nth-child(3) { animation-delay: .5s; }

.config-row-index {
  grid-area: index;
  align-self: center;
  color: var(--visual-accent);
  font: 800 9px var(--font-mono);
}

.config-row-main {
  grid-area: main;
  min-width: 0;
}

.config-row-main b,
.config-row-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.config-row-main b {
  color: var(--visual-text);
  font: 800 10px var(--font-mono);
  letter-spacing: .04em;
}

.config-row-main small {
  margin-top: 3px;
  color: var(--visual-muted);
  font: 8px var(--font-mono);
}

.config-row-values {
  grid-area: values;
  display: grid;
  grid-template-columns: minmax(0, .92fr) 15px minmax(0, 1.08fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.config-row-values code {
  display: block;
  min-width: 0;
  overflow: hidden;
  padding: 6px 7px;
  border-radius: 7px;
  color: #ffd5ca;
  background: rgba(255,111,97,.13);
  font: 800 9px/1.15 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.config-row-values i {
  color: var(--visual-accent);
  font-size: 9px;
  animation: v32ConfigArrow 2.2s ease-in-out infinite;
}

.config-row-values code.is-target {
  color: #c9ffeb;
  background: rgba(92,215,167,.14);
  box-shadow: inset 0 0 0 1px rgba(92,215,167,.10);
}

.config-board-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px dashed color-mix(in srgb, var(--visual-line) 84%, transparent);
  color: var(--visual-muted);
  font: 800 8px var(--font-mono);
  letter-spacing: .05em;
}

.config-board-footer b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--visual-mint);
  font: 800 8px var(--font-mono);
  white-space: nowrap;
}

@keyframes v32ConfigRowIn {
  0%, 14% { opacity: .5; transform: translate3d(7px,0,0); }
  32%, 76% { opacity: 1; transform: translate3d(0,0,0); }
  100% { opacity: .9; transform: translate3d(0,0,0); }
}

@keyframes v32ConfigArrow {
  0%, 100% { transform: translateX(-1px); opacity: .54; }
  50% { transform: translateX(3px); opacity: 1; }
}

@media (max-width: 520px) {
  .workflow-visual--configure { width: 100%; }
  .config-board-head { grid-template-columns: 30px minmax(0,1fr) auto; padding: 10px; }
  .config-board-mark { width: 28px; height: 28px; }
  .config-board-row { padding: 8px; }
  .config-row-values { gap: 4px; }
  .config-row-values code { padding: 6px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .config-board-row,
  .config-row-values i { animation: none !important; }
}


/* V33 — bilingual audit: prevent long English labels from clipping in controls. */
html[lang="en"] .workflow-step small,
html[lang="en"] .console-status,
html[lang="en"] .role-board h3 {
  letter-spacing: 0;
}