/* ============================================================
   CatalystAgile — Brand Overlay
   --------------------------------------------------------------
   Loaded AFTER css/styles.css. Purpose:
     1. Unify 28 gold variants into a single 5-step ladder so
        every gold across CSS + inline SVG reads as one brand.
     2. Provide a single .ca-shimmer headline animation that
        every page can opt into, replacing scattered .h-gold,
        .hr-gold, .rs-gold variants with consistent timing.
     3. Polish light mode (warmer paper, deeper ink, richer
        gold contrast) without touching dark mode.
     4. Add one elevated glass surface token usable on cards.
     5. Preserve existing classes — this file only ADDS new
        scoped rules and overrides a small set of variables.
   --------------------------------------------------------------
   2026-05-28 — Audit wave 1 — agile-claude
   ============================================================ */

/* ------------------------------------------------------------
   1. Brand Gold Ladder (replaces 28 ad-hoc gold hex values)
   ----------------------------------------------------------- */
:root {
  /* Metallic gold — 5 steps from deep to bright */
  --ca-gold-900: #6E551A;   /* deepest — borders, shadows */
  --ca-gold-700: #8B6F22;   /* deep — pressed states */
  --ca-gold-500: #C9A14A;   /* signature — primary accent */
  --ca-gold-300: #E8C778;   /* light — hover, highlights */
  --ca-gold-100: #F5E5B5;   /* champagne — text shimmer peak */

  /* Supporting tones for badges + status (kept minimal) */
  --ca-platinum:  #D8DCE5;  /* cool counter-tone */
  --ca-emerald:   #1F6F4A;  /* "available" status — sparingly */
  --ca-emerald-light: #2D8B6F;

  /* Brand navy ladder — formalises existing bg/text tokens */
  --ca-navy-1000: #060D1A;
  --ca-navy-900:  #0B1426;
  --ca-navy-800:  #0F1B33;
  --ca-navy-700:  #132040;
  --ca-navy-600:  #1B2A4A;
  --ca-navy-500:  #243456;

  /* Glass surface tokens (used by ::backdrop layered cards) */
  --ca-glass-bg-dark:  rgba(19, 32, 64, 0.55);
  --ca-glass-bg-light: rgba(255, 255, 255, 0.72);
  --ca-glass-border-dark:  rgba(232, 199, 120, 0.14);
  --ca-glass-border-light: rgba(11, 20, 38, 0.08);
  --ca-glass-blur: blur(18px) saturate(140%);

  /* Shimmer timing — single source of truth */
  --ca-shimmer-duration: 6.5s;
  --ca-shimmer-delay: 0.2s;
  --ca-shimmer-ease: cubic-bezier(.45, .05, .55, .95);
}

/* ------------------------------------------------------------
   2. Variable remap — point existing accent tokens at the
      new ladder so cards/buttons/links auto-update without
      touching markup.
   ----------------------------------------------------------- */
:root {
  --accent-primary:        var(--ca-gold-500);
  --accent-primary-hover:  var(--ca-gold-300);
  --accent-primary-active: var(--ca-gold-700);
  --accent-secondary:      var(--ca-gold-500);
  --accent-light:          var(--ca-gold-300);
  --border-focus:          var(--ca-gold-500);
  --accent-shadow:         rgba(201, 161, 74, 0.22);
  --accent-bg-subtle:      rgba(201, 161, 74, 0.10);
  --accent-glow-xs:        rgba(201, 161, 74, 0.04);
  --accent-glow-sm:        rgba(201, 161, 74, 0.07);
  --accent-glow-md:        rgba(201, 161, 74, 0.12);
  --accent-glow-lg:        rgba(201, 161, 74, 0.18);
}

/* Light mode: deeper, warmer gold for AA contrast on near-white bg */
[data-theme="light"] {
  --bg-primary:       #FBF9F2;   /* warmer paper */
  --bg-secondary:     #F4EFE0;   /* parchment alt */
  --bg-card:          #FFFFFF;
  --bg-card-hover:    #FBF8EE;
  --text-heading:     #0B1426;
  --text-body:        #2A3553;
  --text-muted:       #5C6781;
  --text-on-accent:   #FFFFFF;
  --border-color:     rgba(11, 20, 38, 0.10);
  --border-card:      rgba(11, 20, 38, 0.14);

  --accent-primary:        #9A7610;   /* deeper for AA on cream */
  --accent-primary-hover:  #B48A1A;
  --accent-primary-active: #7C5E0A;
  --accent-secondary:      #9A7610;
  --accent-light:          #C9A14A;
  --border-focus:          #9A7610;
  --accent-shadow:         rgba(154, 118, 16, 0.22);
  --accent-bg-subtle:      rgba(154, 118, 16, 0.10);
}

/* ------------------------------------------------------------
   3. .ca-shimmer — single brand headline animation
      Applied to a <span> inside every H1 on every page.
   ----------------------------------------------------------- */
@keyframes caShimmer {
  0%   { background-position: 200% 50%; }
  100% { background-position: -200% 50%; }
}

.ca-shimmer {
  font-style: italic;
  background: linear-gradient(
    92deg,
    var(--ca-gold-700)  0%,
    var(--ca-gold-500)  20%,
    var(--ca-gold-300)  40%,
    var(--ca-gold-100)  50%,
    var(--ca-gold-300)  60%,
    var(--ca-gold-500)  80%,
    var(--ca-gold-700)  100%
  );
  background-size: 220% 100%;
  background-position: 50% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: caShimmer var(--ca-shimmer-duration) var(--ca-shimmer-ease) var(--ca-shimmer-delay) infinite;
  /* Subtle glow under the metal so it reads premium, not flat */
  filter: drop-shadow(0 0 12px rgba(232, 199, 120, 0.12));
  will-change: background-position;
}

/* Light mode: deeper bronze gradient — keeps shimmer visible against cream */
[data-theme="light"] .ca-shimmer {
  background: linear-gradient(
    92deg,
    #6E4F0F  0%,
    #9A7610  25%,
    #C9A14A  50%,
    #9A7610  75%,
    #6E4F0F  100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px rgba(154, 118, 16, 0.18));
}

/* Unify the existing scoped variants so they all share timing/colour */
.h-gold,
.hr-gold,
.rs-gold {
  background: linear-gradient(
    92deg,
    var(--ca-gold-700)  0%,
    var(--ca-gold-500)  20%,
    var(--ca-gold-300)  40%,
    var(--ca-gold-100)  50%,
    var(--ca-gold-300)  60%,
    var(--ca-gold-500)  80%,
    var(--ca-gold-700)  100%
  ) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: caShimmer var(--ca-shimmer-duration) var(--ca-shimmer-ease) var(--ca-shimmer-delay) infinite !important;
  filter: drop-shadow(0 0 12px rgba(232, 199, 120, 0.12));
}

[data-theme="light"] .h-gold,
[data-theme="light"] .hr-gold,
[data-theme="light"] .rs-gold {
  background: linear-gradient(
    92deg,
    #6E4F0F 0%,
    #9A7610 25%,
    #C9A14A 50%,
    #9A7610 75%,
    #6E4F0F 100%
  ) !important;
  background-size: 220% 100% !important;
  filter: drop-shadow(0 0 6px rgba(154, 118, 16, 0.18));
}

/* Whole-headline shimmer — used as the brand pass on every page H1
   that doesn't have a single emphasis word. Slow gold beam crosses
   roughly every 6.5s. The inner .h-gold/.hr-gold/.rs-gold spans keep
   their own strong gold via !important. */
.ca-shimmer--headline {
  background: linear-gradient(
    100deg,
    var(--text-heading)  0%,
    var(--text-heading) 28%,
    var(--ca-gold-500)  40%,
    var(--ca-gold-300)  46%,
    var(--ca-gold-100)  50%,
    var(--ca-gold-300)  54%,
    var(--ca-gold-500)  60%,
    var(--text-heading) 72%,
    var(--text-heading) 100%
  );
  background-size: 230% 100%;
  background-position: 50% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: caShimmer 6.5s ease-in-out 0.3s infinite;
  font-style: normal;
  /* faint glow underneath so the metal reads premium, not flat */
  filter: drop-shadow(0 0 16px rgba(232, 199, 120, 0.10));
}

[data-theme="light"] .ca-shimmer--headline {
  background: linear-gradient(
    100deg,
    var(--text-heading)  0%,
    var(--text-heading) 28%,
    #6E4F0F  40%,
    #9A7610  46%,
    #C9A14A  50%,
    #9A7610  54%,
    #6E4F0F  60%,
    var(--text-heading) 72%,
    var(--text-heading) 100%
  );
  background-size: 230% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(154, 118, 16, 0.12));
}

/* Higher-specificity selectors so .ca-shimmer--headline wins against
   page-level rules like .h-hero h1 that also set animation. We layer
   the entrance animation (h-fade-up) and the shimmer pass together
   so the H1 still fades up on load and then continuously shimmers. */
h1.ca-shimmer--headline,
h2.ca-shimmer--headline,
h3.ca-shimmer--headline {
  animation: caShimmer 6.5s ease-in-out 0.3s infinite;
}

.h-hero h1.ca-shimmer--headline {
  animation: h-fade-up .8s cubic-bezier(.22, 1, .36, 1) forwards,
             caShimmer 6.5s ease-in-out 1.1s infinite;
}

/* Static fallback for accessibility */
@media (prefers-reduced-motion: reduce) {
  .ca-shimmer,
  .ca-shimmer--headline,
  .h-gold,
  .hr-gold,
  .rs-gold {
    animation: none !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
            background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--accent-primary) !important;
    filter: none !important;
  }
}

/* ------------------------------------------------------------
   4. Glass surface refresh on cards (subtle — keeps shadow,
      adds blur so depth registers as luxury, not flat).
   ----------------------------------------------------------- */
.tool-card,
.h-toolproof-card,
.h-tile,
.brief-card,
.connect-path,
.article-card {
  backdrop-filter: var(--ca-glass-blur);
  -webkit-backdrop-filter: var(--ca-glass-blur);
}

[data-theme="dark"] .tool-card:hover,
:root:not([data-theme="light"]) .tool-card:hover,
[data-theme="dark"] .h-toolproof-card:hover,
:root:not([data-theme="light"]) .h-toolproof-card:hover {
  border-color: var(--ca-gold-500);
  box-shadow:
    0 8px 32px rgba(201, 161, 74, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

[data-theme="light"] .tool-card,
[data-theme="light"] .h-toolproof-card,
[data-theme="light"] .article-card,
[data-theme="light"] .connect-path {
  background: var(--ca-glass-bg-light);
  border-color: var(--ca-glass-border-light);
}

/* ------------------------------------------------------------
   5. Button gradient — collapse to brand ladder.
   ----------------------------------------------------------- */
.btn--primary {
  background: linear-gradient(
    135deg,
    var(--ca-gold-500) 0%,
    var(--ca-gold-300) 50%,
    var(--ca-gold-500) 100%
  );
  background-size: 200% 200%;
  border-color: var(--ca-gold-500);
}

.btn--primary:hover {
  background-position: 100% 0;
  border-color: var(--ca-gold-300);
  box-shadow: 0 8px 24px rgba(201, 161, 74, 0.32);
  transform: translateY(-1px);
}

[data-theme="light"] .btn--primary {
  background: linear-gradient(
    135deg,
    #9A7610 0%,
    #C9A14A 50%,
    #9A7610 100%
  );
  border-color: #9A7610;
  color: #FFFFFF;
}

[data-theme="light"] .btn--primary:hover {
  background-position: 100% 0;
  border-color: #B48A1A;
  box-shadow: 0 8px 24px rgba(154, 118, 16, 0.32);
}

/* ------------------------------------------------------------
   6. Section heading underline — brand gradient, single source.
   ----------------------------------------------------------- */
.section h2::after,
.two-panel h2::after,
.tool-page__name::after {
  background: linear-gradient(
    90deg,
    var(--ca-gold-500),
    var(--ca-gold-300)
  ) !important;
}

/* ------------------------------------------------------------
   7. Light-mode availability banner — proper contrast, no
      gold gradient on white (the original burned out at AA).
   ----------------------------------------------------------- */
[data-theme="light"] .avail-banner {
  background: #FFFFFF;
  border-bottom: 1px solid rgba(11, 20, 38, 0.08);
  box-shadow: 0 1px 0 rgba(11, 20, 38, 0.04);
}

[data-theme="light"] .avail-banner__message {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: #0B1426;
  color: #0B1426;
  animation: none;
  font-weight: 600;
}

/* ------------------------------------------------------------
   8. Hero-headline emphasis on pages that previously lacked it.
      Pages add class ca-h1-emphasis to their main H1 to opt in.
   ----------------------------------------------------------- */
.ca-h1-emphasis {
  font-family: var(--font-display, var(--font-heading));
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.06;
}

/* Optional decorative rule above H1 — used by simple title pages */
.ca-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--ca-gold-500);
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.ca-eyebrow::before,
.ca-eyebrow::after {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--ca-gold-500);
  opacity: 0.55;
}

[data-theme="light"] .ca-eyebrow {
  color: #9A7610;
}

[data-theme="light"] .ca-eyebrow::before,
[data-theme="light"] .ca-eyebrow::after {
  background: #9A7610;
}

/* ------------------------------------------------------------
   9. Mobile overflow hardening — extra defence for iOS Safari
      where rogue fixed/absolute elements can blow out width.
   ----------------------------------------------------------- */
html, body {
  overflow-x: clip;
  max-width: 100vw;
}

@media (max-width: 768px) {
  /* Avoid stacking sticky nav + sticky avail-banner + sticky-cta
     all at once on small screens — collapse to nav only. */
  .avail-banner { position: static; }
}

/* ------------------------------------------------------------
   10. End — print mode unchanged, motion-reduced respected
   ----------------------------------------------------------- */


/* ============================================================
   ENGAGEMENT LAYER — supporting CSS for js/ca-engagement.js
   ============================================================ */

/* Reading progress bar — appears only on long pages */
.ca-reading-bar {
  position: fixed;
  top: var(--nav-height, 64px);
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ca-gold-500), var(--ca-gold-300), var(--ca-gold-500));
  background-size: 200% auto;
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 998;
  pointer-events: none;
  animation: caShimmer 8s linear infinite;
  box-shadow: 0 0 8px rgba(201, 161, 74, 0.35);
}

[data-theme="light"] .ca-reading-bar {
  background: linear-gradient(90deg, #9A7610, #C9A14A, #9A7610);
  background-size: 200% auto;
  box-shadow: 0 0 6px rgba(154, 118, 16, 0.30);
}

/* Section reveal — gentle fade + rise from below */
.ca-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.ca-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Magnetic cards — disable hover lift conflict so JS transform wins */
@media (hover: hover) and (pointer: fine) {
  .tool-card,
  .h-toolproof-card,
  .h-carousel-card,
  .article-card {
    transform-style: preserve-3d;
  }
}

/* ============================================================
   KONAMI BUILD LOG — luxury overlay
   ============================================================ */
#ca-build-log {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(6, 13, 26, 0.78);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: ca-buildlog-fade 0.42s cubic-bezier(.22,1,.36,1);
}

@keyframes ca-buildlog-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#ca-build-log .ca-build-log__panel {
  position: relative;
  max-width: 640px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--ca-navy-700, #132040) 0%, var(--ca-navy-900, #0B1426) 100%);
  border: 1px solid rgba(201, 161, 74, 0.28);
  border-radius: 16px;
  padding: 2rem;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(232, 199, 120, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
  color: var(--text-body);
  font-family: var(--font-sans);
  animation: ca-buildlog-rise 0.5s cubic-bezier(.22,1,.36,1);
}

[data-theme="light"] #ca-build-log .ca-build-log__panel {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF8EE 100%);
  border-color: rgba(154, 118, 16, 0.30);
  color: #0B1426;
}

@keyframes ca-buildlog-rise {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

#ca-build-log .ca-build-log__close {
  position: absolute;
  top: 0.6rem;
  right: 0.9rem;
  background: transparent;
  border: 1px solid rgba(201, 161, 74, 0.3);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ca-gold-300);
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, transform 200ms ease;
}
#ca-build-log .ca-build-log__close:hover {
  border-color: var(--ca-gold-300);
  color: var(--ca-gold-100);
  transform: rotate(90deg);
}
[data-theme="light"] #ca-build-log .ca-build-log__close {
  color: #9A7610;
  border-color: rgba(154, 118, 16, 0.4);
}
[data-theme="light"] #ca-build-log .ca-build-log__close:hover {
  color: #6E4F0F;
  border-color: #9A7610;
}

#ca-build-log header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(201, 161, 74, 0.18);
}
#ca-build-log header span:first-child {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ca-gold-500);
}
#ca-build-log header strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.01em;
}
#ca-build-log header span:last-child {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}
[data-theme="light"] #ca-build-log header strong { color: #0B1426; }
[data-theme="light"] #ca-build-log header span:last-child { color: #5C6781; }

#ca-build-log .ca-build-log__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

#ca-build-log .ca-build-log__list li {
  display: grid;
  grid-template-columns: 110px 90px 1fr;
  gap: 0.8rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed rgba(201, 161, 74, 0.12);
  align-items: start;
  font-size: 0.88rem;
  line-height: 1.5;
}
#ca-build-log .ca-build-log__list li:last-child { border-bottom: 0; }

#ca-build-log time {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ca-gold-300);
  letter-spacing: 0.04em;
}
[data-theme="light"] #ca-build-log time { color: #9A7610; }

#ca-build-log b {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-heading);
  background: rgba(201, 161, 74, 0.12);
  border: 1px solid rgba(201, 161, 74, 0.28);
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  text-align: center;
  align-self: start;
  white-space: nowrap;
}
[data-theme="light"] #ca-build-log b {
  color: #0B1426;
  background: rgba(154, 118, 16, 0.10);
  border-color: rgba(154, 118, 16, 0.30);
}

#ca-build-log p {
  margin: 0;
  color: var(--text-body);
  font-size: 0.88rem;
}
[data-theme="light"] #ca-build-log p { color: #2A3553; }

#ca-build-log footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(201, 161, 74, 0.18);
  font-size: 0.8rem;
  color: var(--text-muted);
}
#ca-build-log footer a {
  color: var(--ca-gold-300);
  font-weight: 700;
  text-decoration: none;
  transition: color 150ms ease;
}
#ca-build-log footer a:hover { color: var(--ca-gold-100); }
[data-theme="light"] #ca-build-log footer a { color: #9A7610; }
[data-theme="light"] #ca-build-log footer a:hover { color: #6E4F0F; }

@media (max-width: 600px) {
  #ca-build-log .ca-build-log__list li {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    padding: 0.6rem 0;
  }
  #ca-build-log b { width: max-content; }
}

/* View Transitions — premium cross-fade between same-origin pages */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-old(root) { animation-name: ca-vt-fade-out; }
::view-transition-new(root) { animation-name: ca-vt-fade-in; }

@keyframes ca-vt-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}
@keyframes ca-vt-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
  .ca-reveal { opacity: 1 !important; transform: none !important; }
  .ca-reading-bar { animation: none !important; }
}


/* ============================================================
   WAVE 3 / 4 — additional engagement layer
   ============================================================ */

/* ---- 9. CUSTOM CURSOR (desktop only, no touch, no reduced motion) ---- */
@media (hover: hover) and (pointer: fine) {
  body.ca-cursor-active { cursor: none !important; }
  body.ca-cursor-active * { cursor: none !important; }
  body.ca-cursor-active a,
  body.ca-cursor-active button,
  body.ca-cursor-active label,
  body.ca-cursor-active select,
  body.ca-cursor-active input,
  body.ca-cursor-active textarea,
  body.ca-cursor-active [role="button"],
  body.ca-cursor-active [role="link"] { cursor: none !important; }

  .ca-cursor-dot,
  .ca-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform, width, height, opacity, background;
    mix-blend-mode: normal;
  }

  .ca-cursor-dot {
    width: 6px;
    height: 6px;
    background: var(--ca-gold-500, #C9A14A);
    box-shadow: 0 0 10px rgba(232, 199, 120, 0.55);
    transition: width 180ms ease, height 180ms ease, background 180ms ease, opacity 180ms ease;
  }

  .ca-cursor-ring {
    width: 32px;
    height: 32px;
    border: 1.4px solid rgba(232, 199, 120, 0.55);
    background: transparent;
    transition:
      width 240ms cubic-bezier(.22,1,.36,1),
      height 240ms cubic-bezier(.22,1,.36,1),
      border-color 220ms ease,
      background 220ms ease,
      opacity 220ms ease,
      transform 80ms linear;
  }

  body.ca-cursor-hover .ca-cursor-dot {
    width: 4px; height: 4px;
    background: var(--ca-gold-100, #F5E5B5);
  }
  body.ca-cursor-hover .ca-cursor-ring {
    width: 52px; height: 52px;
    border-color: rgba(232, 199, 120, 0.85);
    background: rgba(232, 199, 120, 0.06);
  }
  body.ca-cursor-down .ca-cursor-ring {
    width: 22px; height: 22px;
    border-color: var(--ca-gold-300, #E8C778);
    background: rgba(232, 199, 120, 0.15);
  }

  [data-theme="light"] .ca-cursor-dot { background: #9A7610; box-shadow: 0 0 8px rgba(154, 118, 16, 0.40); }
  [data-theme="light"] .ca-cursor-ring { border-color: rgba(154, 118, 16, 0.45); }
  [data-theme="light"] body.ca-cursor-hover .ca-cursor-ring { border-color: rgba(154, 118, 16, 0.75); background: rgba(154, 118, 16, 0.07); }
}

/* ---- 10. SCROLL-PINNED TIMELINE (9 weeks build story) ---- */
.ca-timeline {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(201, 161, 74, 0.06), transparent 70%),
    var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
}
[data-theme="light"] .ca-timeline {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(154, 118, 16, 0.05), transparent 70%),
    var(--bg-secondary);
}
.ca-timeline__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.ca-timeline__left {
  position: sticky;
  top: clamp(80px, 12vh, 140px);
}
.ca-timeline__rule {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ca-gold-500);
}
.ca-timeline__rule::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--ca-gold-500);
  opacity: 0.6;
}
.ca-timeline__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.12;
  margin: 1.2rem 0 0.8rem;
  letter-spacing: -0.01em;
  max-width: 480px;
}
.ca-timeline__lead {
  color: var(--text-body);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 460px;
  margin-bottom: 1.4rem;
}
.ca-timeline__counter {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(201, 161, 74, 0.20);
}
.ca-timeline__counter b {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 700;
  color: var(--ca-gold-300);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
[data-theme="light"] .ca-timeline__counter b { color: #9A7610; }
.ca-timeline__counter span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  font-weight: 700;
}
.ca-timeline__right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ca-timeline__item {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 1.2rem;
  padding: 1.6rem;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  position: relative;
  opacity: 0.40;
  transform: translateY(16px);
  transition:
    opacity 600ms cubic-bezier(.22,1,.36,1),
    transform 600ms cubic-bezier(.22,1,.36,1),
    border-color 320ms ease,
    box-shadow 320ms ease;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.ca-timeline__item.is-active {
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(201, 161, 74, 0.42);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(232, 199, 120, 0.06) inset;
}
[data-theme="light"] .ca-timeline__item {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(11, 20, 38, 0.10);
}
[data-theme="light"] .ca-timeline__item.is-active {
  border-color: rgba(154, 118, 16, 0.40);
  box-shadow: 0 14px 40px rgba(154, 118, 16, 0.10);
}
.ca-timeline__week {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ca-gold-500);
  white-space: nowrap;
  align-self: start;
  padding-top: 0.18rem;
}
.ca-timeline__num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--ca-gold-300);
  line-height: 1;
  margin-top: 0.4rem;
  font-variant-numeric: tabular-nums;
}
[data-theme="light"] .ca-timeline__num { color: #9A7610; }
.ca-timeline__head {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.005em;
  margin-bottom: 0.35rem;
}
.ca-timeline__body {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-body);
  margin: 0;
}
.ca-timeline__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.7rem;
}
.ca-timeline__tag {
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ca-gold-300);
  background: rgba(201, 161, 74, 0.10);
  border: 1px solid rgba(201, 161, 74, 0.22);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
[data-theme="light"] .ca-timeline__tag {
  color: #9A7610;
  background: rgba(154, 118, 16, 0.08);
  border-color: rgba(154, 118, 16, 0.25);
}
@media (max-width: 880px) {
  .ca-timeline__inner { grid-template-columns: 1fr; }
  .ca-timeline__left { position: relative; top: auto; margin-bottom: 1.5rem; }
  .ca-timeline__item { grid-template-columns: 64px 1fr; padding: 1.2rem; }
  .ca-timeline__num { font-size: 1.8rem; }
}

/* ---- 11. TOOLS PAGE — magnetic + filter polish ---- */
.tools-route .tool-card,
#tools-grid .tool-card {
  isolation: isolate;
}
#category-filters .filter-pill {
  transition: all 220ms cubic-bezier(.22,1,.36,1);
  position: relative;
  overflow: hidden;
}
#category-filters .filter-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(232, 199, 120, 0.12), transparent);
  transform: translateX(-120%);
  transition: transform 600ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
#category-filters .filter-pill:hover::before {
  transform: translateX(120%);
}
#category-filters .filter-pill--active {
  border-color: var(--ca-gold-500);
  color: var(--ca-gold-300);
  background: rgba(201, 161, 74, 0.10);
  box-shadow: 0 0 0 1px rgba(201, 161, 74, 0.20), 0 6px 18px rgba(201, 161, 74, 0.12);
}
[data-theme="light"] #category-filters .filter-pill--active {
  border-color: #9A7610;
  color: #6E4F0F;
  background: rgba(154, 118, 16, 0.10);
}

/* ---- 12. HIRE PAGE — micro-polish for premium feel ---- */
.hr-fact {
  transition: background 220ms ease;
}
.hr-fact:hover {
  background: linear-gradient(90deg, rgba(201, 161, 74, 0.04), transparent 80%);
}
.hr-persona {
  transition: border-color 240ms ease, transform 240ms cubic-bezier(.22,1,.36,1), box-shadow 240ms ease;
  cursor: pointer;
}
.hr-persona:hover {
  border-color: rgba(201, 161, 74, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(232, 199, 120, 0.06) inset;
}
.hr-case {
  transition: border-color 240ms ease, transform 240ms cubic-bezier(.22,1,.36,1), box-shadow 240ms ease;
}
.hr-case:hover {
  border-color: rgba(201, 161, 74, 0.42);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(232, 199, 120, 0.06) inset;
}

/* ---- 13. PROOF MARQUEE — subtle social-proof bar on hire ---- */
.ca-proof-marquee {
  position: relative;
  overflow: hidden;
  padding: 1.1rem 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(90deg, transparent, rgba(201, 161, 74, 0.05) 40%, rgba(201, 161, 74, 0.05) 60%, transparent);
}
.ca-proof-marquee__track {
  display: flex;
  gap: 3.2rem;
  white-space: nowrap;
  animation: ca-marquee 38s linear infinite;
  will-change: transform;
}
.ca-proof-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}
.ca-proof-marquee__item b {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ca-gold-300);
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  text-transform: none;
}
[data-theme="light"] .ca-proof-marquee__item b { color: #9A7610; }
@keyframes ca-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ca-proof-marquee:hover .ca-proof-marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ca-proof-marquee__track { animation: none !important; }
}

/* ---- 14. NAV — premium glass treatment ---- */
.nav {
  background-color: rgba(11, 20, 38, 0.78) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(201, 161, 74, 0.10);
}
[data-theme="light"] .nav {
  background-color: rgba(251, 249, 242, 0.78) !important;
  border-bottom-color: rgba(154, 118, 16, 0.12);
}

/* ---- 15. ARTICLE / CASE — typographic upgrade ---- */
article p,
.wc-hero ~ section p {
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1, "calt" 1;
  text-rendering: optimizeLegibility;
}

/* ---- 16. FOOTER polish — gold separator ---- */
.footer {
  position: relative;
  border-top: 0;
}
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(86%, 900px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ca-gold-500), transparent);
  opacity: 0.32;
}
[data-theme="light"] .footer::before {
  background: linear-gradient(90deg, transparent, #9A7610, transparent);
  opacity: 0.28;
}

/* ============================================================ */