/* Guia de Estudos, Mauricio · IA no escritorio de arquitetura
   Design system standalone, herdado do padrao da casa (consultorias/tutoriais).
   Tokens oklch, dark default. Bricolage Grotesque + serif italica de acento + JetBrains Mono.
   Zero gradiente decorativo. Zero emoji. Cor sempre via token. */

:root {
  --bg:          oklch(0.16 0.012 265);
  --surface:     oklch(0.20 0.013 265);
  --surface-2:   oklch(0.24 0.014 265);
  --line:        oklch(0.30 0.012 265);
  --line-soft:   oklch(0.26 0.012 265);
  --ink:         oklch(0.96 0.006 265);
  --ink-soft:    oklch(0.74 0.010 265);
  --ink-faint:   oklch(0.56 0.010 265);
  --coral:       oklch(0.70 0.16 32);
  --coral-press: oklch(0.63 0.16 32);
  --coral-ink:   oklch(0.18 0.03 32);
  --esmeralda:   oklch(0.78 0.17 158);
  --dourado:     oklch(0.82 0.12 85);
  --terminal:    oklch(0.115 0.011 265);
  --terminal-2:  oklch(0.135 0.012 265);

  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 100px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: color-mix(in oklch, var(--coral) 40%, transparent); color: var(--ink); }

/* subtle grain / dot texture ambient, funcional (nao gradiente) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(oklch(0.30 0.012 265 / 0.5) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}

.wrap { max-width: 1000px; margin-inline: auto; padding-inline: clamp(18px, 5vw, 40px); position: relative; z-index: 1; }

/* ============================= TOPBAR ============================= */
.topbar {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  background: color-mix(in oklch, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--line-soft);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; }
.brandmark { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-mono); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); }
.brandmark .glyph {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  border: 1px solid var(--line); background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--coral);
}
.brandmark .glyph svg { width: 15px; height: 15px; }
.brandmark .soft { color: var(--ink-faint); }
.topbar .toplinks { display: inline-flex; align-items: center; gap: 8px; }
.toppill { font-family: var(--font-mono); font-weight: 700; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; }
@media(max-width: 620px){ .topbar .toplinks{ display: none; } }

/* ============================= HERO ============================= */
.hero { padding: clamp(56px, 9vw, 104px) 0 clamp(30px, 5vw, 48px); position: relative; }
.eyebrow { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-mono); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--coral); }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--coral); }
.hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 6vw, 3.7rem); line-height: 1.02; letter-spacing: -0.035em;
  color: var(--ink); margin: 22px 0 0; max-width: 18ch;
}
.hero h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--coral); letter-spacing: -0.01em; }
.hero .lead { max-width: 60ch; margin-top: 22px; font-size: clamp(1.02rem, 2.1vw, 1.18rem); line-height: 1.62; color: var(--ink-soft); }
.hero .lead b { color: var(--ink); font-weight: 600; }
.hero .quote {
  margin-top: 30px; border-left: 3px solid var(--coral); padding: 4px 0 4px 22px; max-width: 56ch;
}
.hero .quote p { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.15rem, 2.5vw, 1.5rem); line-height: 1.36; color: var(--ink); }
.hero .quote small { display: block; margin-top: 12px; font-family: var(--font-mono); font-style: normal; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }

.herometa { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.herometa .chip { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; color: var(--ink-soft); border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 9px 15px; }
.herometa .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: 0 0 auto; }
.herometa .chip.ok .dot { background: var(--esmeralda); }
.herometa .chip.warn .dot { background: var(--dourado); }

/* jump nav (indice) */
.indexrail { margin-top: 40px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: clamp(18px, 3vw, 26px); }
.indexrail .ih { font-family: var(--font-mono); font-weight: 700; font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.indexrail .ih::before { content: ""; width: 18px; height: 1px; background: var(--coral); }
.indexgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media(max-width: 680px){ .indexgrid{ grid-template-columns: 1fr; } }
.indexgrid a { display: flex; align-items: baseline; gap: 12px; padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid transparent; transition: background 0.16s var(--ease), border-color 0.16s var(--ease); }
.indexgrid a:hover { background: var(--surface-2); border-color: var(--line); }
.indexgrid a .n { font-family: var(--font-mono); font-weight: 700; font-size: 0.7rem; color: var(--coral); letter-spacing: 0.06em; flex: 0 0 auto; min-width: 24px; }
.indexgrid a .t { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--ink); letter-spacing: -0.01em; line-height: 1.25; }

/* ============================= SECTIONS ============================= */
.steps { padding: clamp(20px, 4vw, 40px) 0 clamp(60px, 9vw, 100px); }
.sec-rule { border-top: 1px solid var(--line); padding-top: 14px; margin: 40px 0 22px; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; font-family: var(--font-mono); font-weight: 700; font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.sec-rule .rom { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 0.98rem; color: var(--coral); letter-spacing: 0; text-transform: none; }
@media(max-width: 680px){ .sec-rule .mid{ display: none; } }

/* accordion */
.acc { margin: 0 0 14px; scroll-margin-top: 82px; }
.acc > summary {
  list-style: none; cursor: pointer; display: block; position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(18px, 2.4vw, 26px) clamp(56px, 8vw, 66px) clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 28px);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::marker { content: ""; }
.acc > summary:hover { border-color: var(--coral); background: var(--surface-2); }
.acc > summary:focus-visible { outline: 2px solid var(--esmeralda); outline-offset: 3px; }
.acc[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
.acc[open] > summary:hover { background: var(--surface); }

.achead { display: flex; align-items: flex-start; gap: 14px; }
.step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 11px; flex: 0 0 auto;
  background: var(--coral); color: var(--coral-ink);
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; line-height: 1;
}
.achead .stag { font-family: var(--font-mono); font-weight: 700; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.achead h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.28rem, 2.6vw, 1.72rem); letter-spacing: -0.025em; line-height: 1.1; color: var(--ink); }
.acteaser { margin-top: 11px; color: var(--ink-faint); font-size: 0.92rem; line-height: 1.55; max-width: 74ch; }
.acc[open] .acteaser { display: none; }

.acchev {
  position: absolute; top: clamp(20px, 2.6vw, 27px); right: clamp(18px, 2.4vw, 24px);
  width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  color: var(--coral); background: var(--surface-2);
  transition: transform 0.28s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.acc > summary:hover .acchev { border-color: var(--coral); }
.acc[open] > summary .acchev { transform: rotate(180deg); background: var(--coral); border-color: var(--coral); color: var(--coral-ink); }
.acchev svg { width: 15px; height: 15px; display: block; }

.acbody {
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 16px 16px;
  background: var(--surface); padding: clamp(8px, 1.2vw, 14px) clamp(18px, 2.8vw, 32px) clamp(24px, 3vw, 34px);
  animation: accslide 0.26s var(--ease);
}
@keyframes accslide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* prose */
.acbody p.what { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.66; margin-top: 6px; max-width: 74ch; }
.acbody p.what b { color: var(--ink); font-weight: 700; }
.lblock { margin-top: 22px; }
.lh { font-family: var(--font-mono); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.lh::before { content: ""; width: 18px; height: 2px; background: var(--coral); border-radius: 2px; flex: 0 0 auto; }
.acbody p { color: var(--ink-soft); font-size: 0.97rem; line-height: 1.66; margin-bottom: 12px; max-width: 74ch; }
.acbody p:last-child { margin-bottom: 0; }
.acbody p b { color: var(--ink); font-weight: 700; }
.acbody code { font-family: var(--font-mono); font-size: 0.85em; color: var(--ink); background: color-mix(in oklch, var(--coral) 12%, transparent); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
.acbody a.ext { color: var(--coral); border-bottom: 1px solid color-mix(in oklch, var(--coral) 45%, transparent); overflow-wrap: anywhere; transition: color 0.15s; }
.acbody a.ext:hover { color: var(--ink); border-bottom-color: var(--ink); }

ul.dense { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 10px; }
ul.dense li { position: relative; padding-left: 20px; font-size: 0.95rem; line-height: 1.58; color: var(--ink-soft); max-width: 74ch; overflow-wrap: anywhere; }
ul.dense li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
ul.dense li b { color: var(--ink); font-weight: 700; }

/* tools list (skills/plugins com instalacao) */
ul.tools { list-style: none; padding: 0; margin: 10px 0 14px; display: grid; gap: 12px; }
ul.tools > li { border: 1px solid var(--line); border-radius: 13px; background: color-mix(in oklch, var(--ink) 3%, transparent); padding: 15px 17px; }
ul.tools .tn { font-family: var(--font-display); font-weight: 800; font-size: 1rem; letter-spacing: -0.015em; color: var(--ink); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
ul.tools .tk { font-family: var(--font-mono); font-weight: 700; font-size: 0.54rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral); border: 1px solid color-mix(in oklch, var(--coral) 40%, transparent); border-radius: 999px; padding: 3px 8px; }
ul.tools .td { margin-top: 7px; font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft); max-width: 72ch; }
ul.tools .tc { margin-top: 10px; }
ul.tools .tc code { display: inline-block; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink); background: var(--terminal); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; overflow-wrap: anywhere; }
ul.tools .tsrc { margin-top: 9px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.02em; color: var(--ink-faint); }
ul.tools .tsrc a { color: var(--coral); border-bottom: 1px solid color-mix(in oklch, var(--coral) 40%, transparent); overflow-wrap: anywhere; }
ul.tools .tsrc a:hover { color: var(--ink); }

/* prompt box (o comando pro Claude) */
.promptbox { margin: 22px 0 8px; border: 1px solid var(--line); border-radius: 15px; background: var(--terminal); overflow: hidden; }
.pbhead { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 13px 17px; border-bottom: 1px solid var(--line); background: color-mix(in oklch, var(--ink) 4%, transparent); }
.pbtitle { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral); }
.pbtitle svg { width: 14px; height: 14px; }
.pbcopy { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-weight: 700; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; padding: 8px 12px; min-height: 34px; cursor: pointer; border: 1px solid var(--line); background: color-mix(in oklch, var(--ink) 6%, transparent); color: var(--ink); transition: background 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease); }
.pbcopy:hover { background: var(--coral); border-color: var(--coral); color: var(--coral-ink); }
.pbcopy.copied { background: var(--esmeralda); border-color: var(--esmeralda); color: var(--bg); }
.pbcopy svg { width: 12px; height: 12px; }
.promptbox pre { margin: 0; padding: 16px 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.promptbox pre code { font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.62; color: var(--ink); background: none; border: 0; padding: 0; white-space: pre-wrap; overflow-wrap: anywhere; display: block; }
.promptbox pre code .pmpt { color: var(--coral); font-weight: 700; user-select: none; }
.promptbox pre code .cmt { color: var(--ink-faint); }
.pbnote { padding: 11px 18px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.64rem; line-height: 1.5; color: var(--ink-faint); }

/* ============================= DOWNLOAD BLOCK (o .md da entrevista) ============================= */
.dlblock {
  margin-top: 24px; border: 1px solid var(--line); border-radius: 15px;
  background: color-mix(in oklch, var(--esmeralda) 6%, var(--surface-2));
  padding: 18px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.dlblock::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--esmeralda); }
.dlblock .dlicon {
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in oklch, var(--esmeralda) 40%, transparent);
  background: color-mix(in oklch, var(--esmeralda) 14%, transparent); color: var(--esmeralda);
}
.dlblock .dlicon svg { width: 20px; height: 20px; }
.dlblock .dltext { flex: 1 1 240px; min-width: 220px; }
.dlblock .dlk { font-family: var(--font-mono); font-weight: 700; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--esmeralda); margin-bottom: 5px; }
.dlblock .dlt { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.015em; color: var(--ink); line-height: 1.25; }
.dlblock .dld { margin-top: 4px; font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); max-width: 56ch; }
.dlblock .dlfile { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-faint); }
.dlblock .dlactions { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.dlbtn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 999px; padding: 11px 16px; min-height: 40px; border: 1px solid var(--line);
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease), transform 0.1s var(--ease);
}
.dlbtn svg { width: 14px; height: 14px; }
.dlbtn.primary { background: var(--esmeralda); border-color: var(--esmeralda); color: var(--bg); }
.dlbtn.primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.dlbtn.ghost { background: color-mix(in oklch, var(--ink) 6%, transparent); color: var(--ink); }
.dlbtn.ghost:hover { background: var(--surface-2); border-color: var(--esmeralda); color: var(--esmeralda); }
.dlbtn.done { background: var(--esmeralda); border-color: var(--esmeralda); color: var(--bg); }
@media(max-width: 560px){ .dlblock .dlactions{ width: 100%; } .dlbtn{ flex: 1 1 auto; justify-content: center; } }

/* callout: principio / atencao / honestidade */
.callout { margin-top: 22px; border: 1px solid var(--coral); border-radius: 15px; background: color-mix(in oklch, var(--coral) 8%, transparent); padding: 20px 22px 20px 24px; position: relative; overflow: hidden; }
.callout::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--coral); }
.callout .ck { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-weight: 700; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral); margin-bottom: 10px; }
.callout .ck svg { width: 15px; height: 15px; }
.callout p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.62; margin: 0; max-width: 74ch; }
.callout p b, .callout p strong { color: var(--ink); font-weight: 800; }
/* variante aviso (dourado) para as travas de seguranca */
.callout.warn { border-color: var(--dourado); background: color-mix(in oklch, var(--dourado) 9%, transparent); }
.callout.warn::before { background: var(--dourado); }
.callout.warn .ck { color: var(--dourado); }
/* variante honestidade (esmeralda) */
.callout.honest { border-color: var(--esmeralda); background: color-mix(in oklch, var(--esmeralda) 8%, transparent); }
.callout.honest::before { background: var(--esmeralda); }
.callout.honest .ck { color: var(--esmeralda); }

/* fontes / links list */
.sources { margin-top: 22px; border-top: 1px dashed var(--line); padding-top: 16px; }
.sources .srch { font-family: var(--font-mono); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; display: flex; align-items: center; gap: 9px; }
.sources .srch svg { width: 13px; height: 13px; color: var(--coral); }
.sources ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sources li { display: flex; gap: 10px; align-items: baseline; font-size: 0.86rem; line-height: 1.5; }
.sources li .lbl { font-family: var(--font-body); font-weight: 700; color: var(--ink); flex: 0 0 auto; }
.sources li a { color: var(--coral); overflow-wrap: anywhere; border-bottom: 1px solid color-mix(in oklch, var(--coral) 40%, transparent); }
.sources li a:hover { color: var(--ink); }

/* two-col compare (via MCP vs por fora) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
@media(max-width: 640px){ .split{ grid-template-columns: 1fr; } }
.splitcard { border: 1px solid var(--line); border-radius: 14px; background: color-mix(in oklch, var(--ink) 3%, transparent); padding: 18px 20px; }
.splitcard .sh { font-family: var(--font-mono); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 8px; }
.splitcard.mcp .sh { color: var(--esmeralda); }
.splitcard.fora .sh { color: var(--dourado); }
.splitcard .sh svg { width: 15px; height: 15px; }
.splitcard ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.splitcard li { position: relative; padding-left: 18px; font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); }
.splitcard li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; }
.splitcard.mcp li::before { background: var(--esmeralda); }
.splitcard.fora li::before { background: var(--dourado); }
.splitcard li b { color: var(--ink); font-weight: 700; }

/* ============================= INFOGRAPHIC ============================= */
.infographic {
  --ac: var(--coral);
  position: relative; display: flex; align-items: center; justify-content: center;
  margin: 6px 0 24px; padding: clamp(30px, 4.5vw, 42px) clamp(18px, 3vw, 30px) clamp(20px, 3vw, 28px);
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); overflow: hidden;
}
.infographic::before {
  content: attr(data-fig); position: absolute; top: 12px; left: 16px;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint);
}
.infographic .ico { width: 100%; max-width: 300px; height: auto; display: block; color: var(--ac); }
.infographic .fill-1 { fill: color-mix(in oklch, var(--ac) 12%, transparent); }
.infographic .fill-2 { fill: color-mix(in oklch, var(--ac) 20%, transparent); }
.infographic .fill-3 { fill: color-mix(in oklch, var(--ac) 30%, transparent); }
.infographic .stk { stroke: var(--ac); }
.infographic .stk-soft { stroke: var(--ac); opacity: 0.45; }
.infographic .fl { fill: var(--ac); }
.infographic .fl-soft { fill: var(--ac); opacity: 0.5; }
.infographic .ink-txt { fill: var(--ink-faint); font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; }

@keyframes ig-pulse { 0%,100%{ opacity: 0.9; } 50%{ opacity: 0.35; } }
@keyframes ig-spin { to { transform: rotate(360deg); } }
@keyframes ig-float { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-4px); } }
@keyframes ig-draw { to { stroke-dashoffset: 0; } }
@keyframes ig-blink { 0%,45%,100%{ opacity: 1; } 50%,95%{ opacity: 0.12; } }
@keyframes ig-up { 0%{ transform: translateY(5px); opacity: 0.25; } 50%{ opacity: 1; } 100%{ transform: translateY(-7px); opacity: 0.25; } }
@keyframes ig-dash { to { stroke-dashoffset: -24; } }
@keyframes ig-ring { 0%,100%{ transform: rotate(0deg); } 12%{ transform: rotate(-8deg); } 24%{ transform: rotate(8deg); } 36%{ transform: rotate(-5deg); } 48%{ transform: rotate(5deg); } 60%{ transform: rotate(0deg); } }

.infographic .anim-pulse { animation: ig-pulse 3.2s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
.infographic .anim-pulse-2 { animation: ig-pulse 3.2s var(--ease) 0.8s infinite; transform-box: fill-box; transform-origin: center; }
.infographic .anim-pulse-3 { animation: ig-pulse 3.2s var(--ease) 1.6s infinite; transform-box: fill-box; transform-origin: center; }
.infographic .anim-spin { animation: ig-spin 26s linear infinite; transform-origin: center; transform-box: fill-box; }
.infographic .anim-float { animation: ig-float 4s var(--ease) infinite; transform-box: fill-box; }
.infographic .anim-draw { stroke-dasharray: 320; stroke-dashoffset: 320; animation: ig-draw 3s var(--ease) 0.2s forwards; }
.infographic .anim-blink { animation: ig-blink 2.4s steps(1) infinite; }
.infographic .anim-up-1 { animation: ig-up 2.8s var(--ease) infinite; transform-box: fill-box; }
.infographic .anim-up-2 { animation: ig-up 2.8s var(--ease) 0.6s infinite; transform-box: fill-box; }
.infographic .anim-up-3 { animation: ig-up 2.8s var(--ease) 1.2s infinite; transform-box: fill-box; }
.infographic .anim-dash { stroke-dasharray: 6 6; animation: ig-dash 1.4s linear infinite; }
.infographic .anim-ring { animation: ig-ring 3.8s var(--ease) infinite; }

@media(prefers-reduced-motion: reduce){
  .infographic * { animation: none !important; }
  .infographic .anim-draw { stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}

/* ============================= FOOTER ============================= */
.footer { border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 64px) 0 clamp(50px, 7vw, 72px); }
.footer .fbig { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.3rem, 3vw, 1.9rem); line-height: 1.35; color: var(--ink); max-width: 40ch; }
.footer .fbig b { font-style: normal; color: var(--coral); font-weight: 700; }
.footer .fmeta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.footer .fmeta span { display: inline-flex; align-items: center; gap: 8px; }
.footer .fmeta span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media(prefers-reduced-motion: reduce){ .reveal { opacity: 1 !important; transform: none !important; } }