/* ==========================================================================
   NARSIL AI (納曦智能) — DESIGN SYSTEM · COMPONENT & UTILITY LAYER
   ==========================================================================
   System : Narsil CIS Design System v1.0.0 · Astrodragon co. © 2026
   Depends: narsil-tokens.css (canonical token contract v1.0.0)

   RULES
   - Built ONLY on semantic tokens (--narsil-bg-*, --narsil-text-*,
     --narsil-accent*, --narsil-border-*, --narsil-focus-ring,
     --narsil-status-*) plus scale tokens (space/type/radius/shadow/motion).
     Never raw hex.
   - Everything re-themes automatically: apply data-theme="dark" to <html>
     for a full dark page, or to ANY section for a scoped dark ("on-dark")
     context — e.g. <section class="n-cta-band" data-theme="dark">. All
     nested components (buttons, badges, inputs…) re-map to the dark
     semantics (gold accent, ink-on-gold) with no extra classes.
   - Prefix: `.n-` for classes, `--narsil-` for custom properties.
   ========================================================================== */

@import "narsil-tokens.css";

/* --------------------------------------------------------------------------
   0. SHARED SHAPES — the 4-pointed blade-star spark
   Three tension variants from the CIS:
     SHARP    稜角張力 — angular tension (wide shoulders)
     BALANCED 收斂平衡 — refined transition (default)
     TAPERED  延展鋒芒 — extended tension, long blade-like points
   Stored as full literal polygons so they survive var() inheritance.
   -------------------------------------------------------------------------- */
:root {
  --narsil-spark-sharp:    polygon(50% 0%, 66% 34%, 100% 50%, 66% 66%, 50% 100%, 34% 66%, 0% 50%, 34% 34%);
  --narsil-spark-balanced: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  --narsil-spark-tapered:  polygon(50% 0%, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0% 50%, 44% 44%);
}

/* --------------------------------------------------------------------------
   1. RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--narsil-font-sans);
  font-size: var(--narsil-text-base);
  font-weight: var(--narsil-weight-regular);
  line-height: var(--narsil-leading-normal);
  background-color: var(--narsil-bg-canvas);
  color: var(--narsil-text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video,
canvas {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6, p, blockquote {
  overflow-wrap: break-word;
}

/* Bare anchors inherit; opt into brand styling with .n-link */
a {
  color: inherit;
}

/* Scoped-theme surfaces paint their own canvas */
[data-theme] {
  background-color: var(--narsil-bg-canvas);
  color: var(--narsil-text-primary);
}

/* --------------------------------------------------------------------------
   2. FOCUS & SELECTION
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: var(--narsil-border-width-thick) solid var(--narsil-focus-ring);
  outline-offset: var(--narsil-space-0-5);
}

::selection {
  background-color: var(--narsil-accent-muted);
  color: var(--narsil-text-primary);
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */

/* Heritage-serif display — Trajan/Cinzel lineage, blade terminals.
   Caps with wide optical tracking per the CIS logotype rules. */
.n-display {
  font-family: var(--narsil-font-display);
  font-weight: var(--narsil-weight-regular);
  font-size: clamp(var(--narsil-text-4xl), 1.4rem + 4.2vw, var(--narsil-text-8xl));
  line-height: var(--narsil-leading-tight);
  letter-spacing: var(--narsil-tracking-wider);
  text-transform: uppercase;
}

.n-display--hero {
  font-size: clamp(var(--narsil-text-5xl), 1.5rem + 6vw, var(--narsil-text-9xl));
  letter-spacing: var(--narsil-tracking-widest);
}

/* Brand headings — Montserrat / Plus Jakarta Sans */
.n-h1 {
  font-family: var(--narsil-font-heading);
  font-weight: var(--narsil-weight-extrabold);
  font-size: clamp(var(--narsil-text-3xl), 1.2rem + 2.6vw, var(--narsil-text-5xl));
  line-height: var(--narsil-leading-tight);
  letter-spacing: var(--narsil-tracking-tight);
}

.n-h2 {
  font-family: var(--narsil-font-heading);
  font-weight: var(--narsil-weight-extrabold);
  font-size: clamp(var(--narsil-text-2xl), 1.1rem + 1.8vw, var(--narsil-text-4xl));
  line-height: var(--narsil-leading-snug);
  letter-spacing: var(--narsil-tracking-tight);
}

.n-h3 {
  font-family: var(--narsil-font-heading);
  font-weight: var(--narsil-weight-bold);
  font-size: clamp(var(--narsil-text-xl), 1rem + 1vw, var(--narsil-text-3xl));
  line-height: var(--narsil-leading-snug);
}

.n-h4 {
  font-family: var(--narsil-font-heading);
  font-weight: var(--narsil-weight-bold);
  font-size: var(--narsil-text-xl);
  line-height: var(--narsil-leading-snug);
}

/* Eyebrow / kicker — spark bullet built in */
.n-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--narsil-space-2);
  font-family: var(--narsil-font-heading);
  font-weight: var(--narsil-weight-bold);
  font-size: var(--narsil-text-sm);
  line-height: var(--narsil-leading-snug);
  letter-spacing: var(--narsil-tracking-widest);
  text-transform: uppercase;
  color: var(--narsil-accent);
}

.n-eyebrow::before {
  content: "";
  inline-size: 0.55em;
  block-size: 0.55em;
  flex-shrink: 0;
  background-color: var(--narsil-accent);
  clip-path: var(--narsil-spark-tapered);
}

/* Body voice */
.n-lead {
  font-size: var(--narsil-text-xl);
  line-height: var(--narsil-leading-relaxed);
  color: var(--narsil-text-secondary);
}

.n-body {
  font-size: var(--narsil-text-base);
  line-height: var(--narsil-leading-relaxed);
  color: var(--narsil-text-primary);
}

.n-muted {
  color: var(--narsil-text-muted);
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.n-container {
  inline-size: 100%;
  max-inline-size: 72rem;
  margin-inline: auto;
  padding-inline: clamp(var(--narsil-space-4), 4vw, var(--narsil-space-8));
}

.n-container--narrow {
  max-inline-size: 44rem;
}

.n-section {
  padding-block: clamp(var(--narsil-space-16), 4rem + 4vw, var(--narsil-space-24));
}

/* 12-column grid; children span via .n-col-* */
.n-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--narsil-space-6);
}

.n-col-3  { grid-column: span 3; }
.n-col-4  { grid-column: span 4; }
.n-col-5  { grid-column: span 5; }
.n-col-6  { grid-column: span 6; }
.n-col-8  { grid-column: span 8; }
.n-col-9  { grid-column: span 9; }
.n-col-12 { grid-column: span 12; }

@media (max-width: 44rem) {
  .n-grid > * {
    grid-column: 1 / -1;
  }
}

/* Vertical rhythm */
.n-stack {
  display: flex;
  flex-direction: column;
  gap: var(--narsil-space-4);
}

.n-stack--tight { gap: var(--narsil-space-2); }
.n-stack--loose { gap: var(--narsil-space-8); }

/* Horizontal grouping */
.n-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--narsil-space-3);
}

/* --------------------------------------------------------------------------
   5. SPARK — the blade-star as a reusable element
   <span class="n-spark" aria-hidden="true"></span>
   -------------------------------------------------------------------------- */
.n-spark {
  display: inline-block;
  inline-size: 1rem;
  block-size: 1rem;
  flex-shrink: 0;
  background-color: var(--narsil-accent);
  clip-path: var(--narsil-spark-balanced);
}

/* Tension variants */
.n-spark--sharp   { clip-path: var(--narsil-spark-sharp); }
.n-spark--tapered { clip-path: var(--narsil-spark-tapered); }

/* Sizes */
.n-spark--sm { inline-size: 0.625rem; block-size: 0.625rem; }
.n-spark--lg { inline-size: 1.5rem;   block-size: 1.5rem; }
.n-spark--xl { inline-size: 2.5rem;   block-size: 2.5rem; }

/* Take the surrounding text color instead of the accent */
.n-spark--current { background-color: currentColor; }

/* Loading / emphasis motif — forge-strike pulse */
.n-spark--pulse {
  animation: narsil-spark-pulse var(--narsil-duration-deliberate) var(--narsil-ease-forge) infinite alternate;
}

@keyframes narsil-spark-pulse {
  from { transform: scale(0.72); opacity: 0.55; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Spark as list bullet:
   <ul class="n-list"><li>…</li></ul> */
.n-list {
  list-style: none;
  padding-inline-start: 0;
}

.n-list > li {
  position: relative;
  padding-inline-start: var(--narsil-space-6);
}

.n-list > li + li {
  margin-block-start: var(--narsil-space-2);
}

.n-list > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.42em;
  inline-size: 0.6em;
  block-size: 0.6em;
  background-color: var(--narsil-accent);
  clip-path: var(--narsil-spark-balanced);
}

/* Spark divider:
   <div class="n-divider" role="separator">
     <span class="n-spark n-spark--sm" aria-hidden="true"></span>
   </div> */
.n-divider {
  display: flex;
  align-items: center;
  gap: var(--narsil-space-4);
  margin-block: var(--narsil-space-8);
}

.n-divider::before,
.n-divider::after {
  content: "";
  flex: 1;
  block-size: var(--narsil-border-width-hairline);
  background-color: var(--narsil-border-default);
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   Blade-crisp radius (sm), heading face, signature blade easing.
   Variants re-map automatically inside data-theme="dark" scopes
   (primary becomes gold with ink text — the on-dark treatment).
   -------------------------------------------------------------------------- */
.n-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--narsil-space-2);
  padding-block: var(--narsil-space-3);
  padding-inline: var(--narsil-space-6);
  border: var(--narsil-border-width-hairline) solid transparent;
  border-radius: var(--narsil-radius-sm);
  font-family: var(--narsil-font-heading);
  font-size: var(--narsil-text-sm);
  font-weight: var(--narsil-weight-semibold);
  line-height: var(--narsil-leading-snug);
  letter-spacing: var(--narsil-tracking-wide);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--narsil-duration-fast) var(--narsil-ease-blade),
    border-color     var(--narsil-duration-fast) var(--narsil-ease-blade),
    color            var(--narsil-duration-fast) var(--narsil-ease-blade),
    box-shadow       var(--narsil-duration-fast) var(--narsil-ease-blade),
    translate        var(--narsil-duration-instant) var(--narsil-ease-out);
}

.n-btn:focus-visible {
  outline: var(--narsil-border-width-thick) solid var(--narsil-focus-ring);
  outline-offset: var(--narsil-space-0-5);
}

.n-btn:active {
  translate: 0 1px;
}

.n-btn[disabled],
.n-btn:disabled,
.n-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — filled accent (bronze-deep on light, gold on dark) */
.n-btn--primary {
  background-color: var(--narsil-accent);
  border-color: var(--narsil-accent);
  color: var(--narsil-accent-contrast);
}

.n-btn--primary:hover {
  background-color: var(--narsil-accent-hover);
  border-color: var(--narsil-accent-hover);
}

.n-btn--primary:active {
  /* fallback, then oklch mix toward the inverse surface for a pressed shade */
  background-color: var(--narsil-accent-hover);
  background-color: color-mix(in oklch, var(--narsil-accent) 86%, var(--narsil-bg-inverse));
}

/* Secondary — hairline outline */
.n-btn--secondary {
  background-color: transparent;
  border-color: var(--narsil-accent);
  color: var(--narsil-accent);
}

.n-btn--secondary:hover {
  background-color: var(--narsil-accent-muted);
  border-color: var(--narsil-accent-hover);
  color: var(--narsil-accent-hover);
}

.n-btn--secondary:active {
  background-color: var(--narsil-accent-muted);
  background-color: color-mix(in oklch, var(--narsil-accent) 16%, transparent);
}

/* Ghost — quiet, text-first */
.n-btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--narsil-text-primary);
}

.n-btn--ghost:hover {
  background-color: var(--narsil-accent-muted);
  background-color: color-mix(in oklch, var(--narsil-text-primary) 8%, transparent);
  color: var(--narsil-accent);
}

/* Sizes */
.n-btn--sm {
  padding-block: var(--narsil-space-2);
  padding-inline: var(--narsil-space-4);
  font-size: var(--narsil-text-xs);
}

.n-btn--lg {
  padding-block: var(--narsil-space-4);
  padding-inline: var(--narsil-space-8);
  font-size: var(--narsil-text-base);
}

/* --------------------------------------------------------------------------
   7. LINKS
   -------------------------------------------------------------------------- */
.n-link {
  color: var(--narsil-accent);
  text-decoration: underline;
  text-decoration-thickness: var(--narsil-border-width-hairline);
  text-underline-offset: 0.2em;
  transition: color var(--narsil-duration-fast) var(--narsil-ease-out);
}

.n-link:hover {
  color: var(--narsil-accent-hover);
}

/* Informational (blue) link — AA-large; keep underlined per contract note */
.n-link--info {
  color: var(--narsil-status-info);
}

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.n-card {
  background-color: var(--narsil-bg-surface);
  border: var(--narsil-border-width-hairline) solid var(--narsil-border-subtle);
  border-radius: var(--narsil-radius-lg);
  padding: var(--narsil-space-6);
  box-shadow: var(--narsil-shadow-sm);
  transition:
    box-shadow var(--narsil-duration-normal) var(--narsil-ease-blade),
    border-color var(--narsil-duration-normal) var(--narsil-ease-blade);
}

.n-card--raised {
  background-color: var(--narsil-bg-raised);
  box-shadow: var(--narsil-shadow-lg);
}

.n-card--interactive:hover {
  border-color: var(--narsil-border-strong);
  box-shadow: var(--narsil-shadow-md);
}

/* --------------------------------------------------------------------------
   9. BADGES
   -------------------------------------------------------------------------- */
.n-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--narsil-space-1-5);
  padding-block: var(--narsil-space-0-5);
  padding-inline: var(--narsil-space-2-5);
  border: var(--narsil-border-width-hairline) solid transparent;
  border-radius: var(--narsil-radius-sm);
  background-color: var(--narsil-accent-muted);
  color: var(--narsil-accent);
  font-family: var(--narsil-font-heading);
  font-size: var(--narsil-text-xs);
  font-weight: var(--narsil-weight-bold);
  letter-spacing: var(--narsil-tracking-wider);
  text-transform: uppercase;
  line-height: var(--narsil-leading-snug);
}

.n-badge--outline {
  background-color: transparent;
  border-color: var(--narsil-border-strong);
  color: var(--narsil-text-secondary);
}

.n-badge--danger {
  background-color: transparent;
  border-color: var(--narsil-status-danger);
  color: var(--narsil-status-danger);
}

/* --------------------------------------------------------------------------
   10. FORMS
   <div class="n-field">
     <label class="n-label" for="x">…</label>
     <input class="n-input" id="x">
     <p class="n-field__hint">…</p>
   </div>
   -------------------------------------------------------------------------- */
.n-field {
  display: flex;
  flex-direction: column;
  gap: var(--narsil-space-1-5);
}

.n-label {
  font-size: var(--narsil-text-sm);
  font-weight: var(--narsil-weight-semibold);
  color: var(--narsil-text-primary);
}

.n-input {
  inline-size: 100%;
  padding-block: var(--narsil-space-2-5);
  padding-inline: var(--narsil-space-3-5);
  background-color: var(--narsil-bg-surface);
  color: var(--narsil-text-primary);
  border: var(--narsil-border-width-hairline) solid var(--narsil-border-default);
  border-radius: var(--narsil-radius-md);
  transition:
    border-color var(--narsil-duration-fast) var(--narsil-ease-out),
    box-shadow   var(--narsil-duration-fast) var(--narsil-ease-out);
}

.n-input::placeholder {
  color: var(--narsil-text-muted);
}

.n-input:hover {
  border-color: var(--narsil-border-strong);
}

.n-input:focus-visible {
  outline: none;
  border-color: var(--narsil-focus-ring);
  /* fallback ring, then translucent oklch mix of the focus token */
  box-shadow: 0 0 0 3px var(--narsil-accent-muted);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--narsil-focus-ring) 25%, transparent);
}

.n-input[disabled] {
  background-color: var(--narsil-bg-canvas);
  color: var(--narsil-text-muted);
  cursor: not-allowed;
}

.n-input[aria-invalid="true"] {
  border-color: var(--narsil-status-danger);
}

textarea.n-input {
  min-block-size: var(--narsil-space-24);
  resize: vertical;
}

.n-field__hint {
  font-size: var(--narsil-text-xs);
  color: var(--narsil-text-muted);
}

.n-field__error {
  font-size: var(--narsil-text-xs);
  font-weight: var(--narsil-weight-medium);
  color: var(--narsil-status-danger);
}

/* --------------------------------------------------------------------------
   11. NAVBAR
   <header class="n-navbar">
     <a class="n-navbar__brand" href="/" aria-label="Narsil AI 納曦智能">
       <img class="n-brand-logo n-brand-logo--default" src="_assets/logo/narsil-lockup-horizontal.png" alt="Narsil AI 納曦智能">
       <img class="n-brand-logo n-brand-logo--inverse" src="_assets/logo/narsil-lockup-horizontal-inverse.png" alt="" aria-hidden="true">
     </a>
     <nav class="n-navbar__links">…</nav>
   </header>
   Brand is the official mark from _assets/logo/ (never re-typed text); the
   .n-brand-logo swap rules ship in the page scaffold. The text styling on
   .n-navbar__brand below remains only as a fallback when no mark can load.
   -------------------------------------------------------------------------- */
.n-navbar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--narsil-z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--narsil-space-6);
  padding-block: var(--narsil-space-4);
  padding-inline: clamp(var(--narsil-space-4), 4vw, var(--narsil-space-8));
  background-color: var(--narsil-bg-canvas);
  border-block-end: var(--narsil-border-width-hairline) solid var(--narsil-border-subtle);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .n-navbar {
    background-color: color-mix(in oklch, var(--narsil-bg-canvas) 88%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

.n-navbar__brand {
  font-family: var(--narsil-font-display);
  font-size: var(--narsil-text-xl);
  font-weight: var(--narsil-weight-bold);
  letter-spacing: var(--narsil-tracking-widest);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--narsil-text-primary);
}

.n-navbar__links {
  display: flex;
  align-items: center;
  gap: var(--narsil-space-6);
}

.n-navbar__link {
  font-family: var(--narsil-font-heading);
  font-size: var(--narsil-text-sm);
  font-weight: var(--narsil-weight-semibold);
  letter-spacing: var(--narsil-tracking-wide);
  text-decoration: none;
  color: var(--narsil-text-secondary);
  transition: color var(--narsil-duration-fast) var(--narsil-ease-out);
}

.n-navbar__link:hover,
.n-navbar__link[aria-current="page"] {
  color: var(--narsil-accent);
}

/* --------------------------------------------------------------------------
   12. CTA BAND (預約訪談 / Demo / 下載簡介)
   Default: inverse surface — graphite band on light pages, ivory on dark.
   RECOMMENDED for the signature gold-on-graphite treatment:
     <section class="n-cta-band" data-theme="dark">…</section>
   (the attribute re-maps every nested semantic token — buttons go gold,
   eyebrows stay AA — and the override below repaints the band itself).
   -------------------------------------------------------------------------- */
.n-cta-band {
  background-color: var(--narsil-bg-inverse);
  color: var(--narsil-text-inverse);
  text-align: center;
  padding-block: clamp(var(--narsil-space-16), 4rem + 3vw, var(--narsil-space-24));
  padding-inline: clamp(var(--narsil-space-4), 4vw, var(--narsil-space-8));
}

.n-cta-band[data-theme="dark"] {
  /* inside its own dark scope, canvas IS graphite-950 */
  background-color: var(--narsil-bg-canvas);
  color: var(--narsil-text-primary);
}

.n-cta-band__title {
  font-family: var(--narsil-font-display);
  font-size: clamp(var(--narsil-text-3xl), 1.2rem + 2.8vw, var(--narsil-text-6xl));
  line-height: var(--narsil-leading-tight);
  letter-spacing: var(--narsil-tracking-wider);
  text-transform: uppercase;
  margin-block-end: var(--narsil-space-6);
}

.n-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--narsil-space-4);
  margin-block-start: var(--narsil-space-8);
}

/* --------------------------------------------------------------------------
   13. STAT (Benchmark & Authority / ROI social-proof)
   -------------------------------------------------------------------------- */
.n-stat {
  display: flex;
  flex-direction: column;
  gap: var(--narsil-space-2);
}

.n-stat__value {
  font-family: var(--narsil-font-heading);
  font-weight: var(--narsil-weight-extrabold);
  font-size: clamp(var(--narsil-text-4xl), 1.6rem + 2.6vw, var(--narsil-text-6xl));
  line-height: var(--narsil-leading-tight);
  letter-spacing: var(--narsil-tracking-tight);
  color: var(--narsil-accent);
}

.n-stat__label {
  font-size: var(--narsil-text-sm);
  font-weight: var(--narsil-weight-semibold);
  letter-spacing: var(--narsil-tracking-wider);
  text-transform: uppercase;
  color: var(--narsil-text-muted);
}

/* --------------------------------------------------------------------------
   14. TESTIMONIAL (Heavyweight Testimonial)
   <figure class="n-testimonial">
     <blockquote class="n-testimonial__quote">…</blockquote>
     <figcaption class="n-testimonial__cite">…</figcaption>
   </figure>
   -------------------------------------------------------------------------- */
.n-testimonial {
  border-inline-start: var(--narsil-border-width-heavy) solid var(--narsil-accent);
  padding-inline-start: var(--narsil-space-8);
  padding-block: var(--narsil-space-2);
}

.n-testimonial__quote {
  font-family: var(--narsil-font-heading);
  font-weight: var(--narsil-weight-semibold);
  font-size: clamp(var(--narsil-text-xl), 1rem + 1.4vw, var(--narsil-text-3xl));
  line-height: var(--narsil-leading-snug);
  color: var(--narsil-text-primary);
}

.n-testimonial__cite {
  margin-block-start: var(--narsil-space-5);
  display: flex;
  align-items: center;
  gap: var(--narsil-space-2);
  font-size: var(--narsil-text-sm);
  font-weight: var(--narsil-weight-semibold);
  letter-spacing: var(--narsil-tracking-wider);
  text-transform: uppercase;
  color: var(--narsil-text-muted);
}

.n-testimonial__cite::before {
  content: "";
  inline-size: 0.6em;
  block-size: 0.6em;
  background-color: var(--narsil-accent);
  clip-path: var(--narsil-spark-balanced);
}

/* --------------------------------------------------------------------------
   15. FOOTER
   Same inversion pattern as the CTA band; prefer
   <footer class="n-footer" data-theme="dark"> for full token re-mapping.
   -------------------------------------------------------------------------- */
.n-footer {
  background-color: var(--narsil-bg-inverse);
  color: var(--narsil-text-inverse);
  padding-block: var(--narsil-space-16) var(--narsil-space-10);
  padding-inline: clamp(var(--narsil-space-4), 4vw, var(--narsil-space-8));
}

.n-footer[data-theme="dark"] {
  background-color: var(--narsil-bg-canvas);
  color: var(--narsil-text-primary);
}

.n-footer__brand {
  font-family: var(--narsil-font-display);
  font-size: var(--narsil-text-2xl);
  letter-spacing: var(--narsil-tracking-widest);
  text-transform: uppercase;
}

.n-footer__legal {
  margin-block-start: var(--narsil-space-10);
  padding-block-start: var(--narsil-space-6);
  border-block-start: var(--narsil-border-width-hairline) solid var(--narsil-border-default);
  font-size: var(--narsil-text-xs);
  letter-spacing: var(--narsil-tracking-wide);
}

/* --------------------------------------------------------------------------
   16. UTILITIES
   -------------------------------------------------------------------------- */
.n-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.n-skip-link {
  position: absolute;
  inset-block-start: var(--narsil-space-2);
  inset-inline-start: var(--narsil-space-2);
  z-index: var(--narsil-z-skip-link);
  padding: var(--narsil-space-2) var(--narsil-space-4);
  background-color: var(--narsil-bg-surface);
  color: var(--narsil-text-primary);
  border-radius: var(--narsil-radius-sm);
  box-shadow: var(--narsil-shadow-md);
  transform: translateY(calc(-100% - var(--narsil-space-4)));
  transition: transform var(--narsil-duration-fast) var(--narsil-ease-out);
}

.n-skip-link:focus-visible {
  transform: translateY(0);
}

.n-text-accent { color: var(--narsil-accent); }
.n-text-center { text-align: center; }

/* --------------------------------------------------------------------------
   17. REDUCED MOTION
   Collapse all animation/transition to imperceptible durations.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}