/* Agence Node it — flattened global stylesheet (export build) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ===== tokens/fonts.css ===== */
/* ============================================================
   Agence Node it — Webfonts
   Poppins ONLY (display + body + labels). No secondary face.
   NOTE: loaded from Google Fonts CDN. For production, self-host
   the woff2 files and replace this @import with @font-face rules.
   ============================================================ */

/* ===== tokens/colors.css ===== */
/* ============================================================
   Agence Node it — Color tokens (adaptive)
   LIGHT by default — clear, premium, studio-produit feel.
   Brand: Node it violet gradient (#8b6def -> #c078fe).
   Dark feature bands opt in via the `.on-dark` scope, which
   re-points the semantic aliases so every component flips.
   ============================================================ */

:root {
  /* ---- Brand violet ramp (from the Node it mark) ---- */
  --violet-300: #c9b0ff;
  --violet-400: #a585f6;
  --violet-500: #8b6def;   /* gradient ref */
  --violet-600: #7c5cf0;   /* brand primary (on light) */
  --violet-700: #6442d6;
  --violet-800: #4f33ad;
  --violet-050: #f3effe;   /* light violet wash */
  --violet-100: #e7defd;

  /* ---- Secondary tech blue ---- */
  --blue-400: #6f9bff;
  --blue-500: #3f6fff;
  --blue-600: #2d54e0;

  /* ---- Neutral light ramp ---- */
  --gray-0:   #ffffff;
  --gray-25:  #fbfbfd;
  --gray-50:  #f6f7f9;
  --gray-100: #eef0f4;
  --gray-200: #e3e6ec;
  --gray-300: #d4d9e2;

  /* ---- Ink ramp (dark surfaces for .on-dark bands) ---- */
  --ink-1000: #07090d;
  --ink-900:  #0b0e15;
  --ink-850:  #0e1219;
  --ink-800:  #12161f;
  --ink-750:  #171c27;
  --ink-700:  #1d2330;
  --ink-650:  #232b3b;
  --ink-600:  #2c3547;

  /* ---- Text inks ---- */
  --ink-text-900: #10131d;
  --ink-text-700: #38404f;
  --ink-text-500: #69727f;
  --ink-text-400: #98a1af;

  /* ---- Semantic ---- */
  --success: #1aa974;
  --warning: #d98a1f;
  --danger:  #e0524f;
  --info:    var(--blue-500);

  /* ============================================================
     Semantic aliases — LIGHT defaults (prefer these everywhere)
     ============================================================ */
  --bg-page:        var(--gray-50);
  --bg-deep:        var(--gray-100);
  --surface:        var(--gray-0);
  --surface-raised: var(--gray-0);
  --surface-overlay: var(--gray-50);
  --surface-violet: var(--violet-050);
  --field-bg:       var(--gray-0);
  --media-bg:       linear-gradient(160deg, #eef0f4, #e1e5ec);

  --border-soft:    rgba(16,20,35,.06);
  --border:         rgba(16,20,35,.10);
  --border-strong:  rgba(16,20,35,.16);
  --hover-wash:     rgba(16,20,35,.045);

  --text-strong:    var(--ink-text-900);
  --text:           var(--ink-text-700);
  --text-muted:     var(--ink-text-500);
  --text-faint:     var(--ink-text-400);
  --text-on-violet: #ffffff;

  --text-body:      var(--text);
  --text-heading:   var(--text-strong);
  --text-subtle:    var(--text-muted);

  --accent:         var(--violet-600);
  --accent-hover:   var(--violet-500);
  --accent-press:   var(--violet-700);
  --accent-contrast: var(--text-on-violet);
  --accent-2:       var(--blue-500);
  --focus-ring:     color-mix(in oklch, var(--violet-500) 65%, transparent);

  --edge-top: none; /* @kind shadow */

  /* ---- Gradients (managed, used sparingly) ---- */
  --grad-brand:      linear-gradient(135deg, #8b6def 0%, #c078fe 100%); /* @kind color */
  --grad-brand-soft: linear-gradient(135deg, rgba(139,109,239,.14), rgba(192,120,254,.08)); /* @kind color */
  --grad-duo:        linear-gradient(135deg, #3f6fff 0%, #8b6def 55%, #c078fe 100%); /* @kind color */
  --grad-ink:        linear-gradient(180deg, var(--ink-850), var(--ink-1000)); /* @kind color */

  /* ---- Section glow (radial accent for hero / CTA) ---- */
  --glow-violet: radial-gradient(60% 80% at 50% 0%, rgba(139,109,239,.16), transparent 70%); /* @kind color */
  --glow-blue:   radial-gradient(60% 80% at 50% 0%, rgba(63,111,255,.14), transparent 70%); /* @kind color */
}

/* ============================================================
   .on-dark — opt-in dark feature band. Re-points semantics so
   buttons, cards, inputs, text all flip automatically.
   ============================================================ */
.on-dark {
  --bg-page:        var(--ink-850);
  --bg-deep:        var(--ink-900);
  --surface:        var(--ink-800);
  --surface-raised: var(--ink-750);
  --surface-overlay: var(--ink-700);
  --surface-violet: #15101f;
  --field-bg:       var(--ink-900);
  --media-bg:       var(--grad-ink);

  --border-soft:    rgba(255,255,255,.06);
  --border:         rgba(255,255,255,.10);
  --border-strong:  rgba(255,255,255,.18);
  --hover-wash:     rgba(255,255,255,.06);

  --text-strong:    #f5f7fc;
  --text:           #c9d0de;
  --text-muted:     #8b94a8;
  --text-faint:     #5c6678;
  --text-body:      #c9d0de;
  --text-heading:   #f5f7fc;
  --text-subtle:    #8b94a8;

  --accent:         var(--violet-500);
  --accent-hover:   var(--violet-400);
  --accent-press:   var(--violet-600);

  --edge-top: inset 0 1px 0 rgba(255,255,255,.05); /* @kind shadow */

  --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  --shadow-md: 0 12px 32px -12px rgba(0,0,0,.5);
  --shadow-lg: 0 28px 64px -24px rgba(0,0,0,.6);
  --shadow-xl: 0 48px 96px -40px rgba(0,0,0,.7);

  --grad-brand-soft: linear-gradient(135deg, rgba(139,109,239,.18), rgba(192,120,254,.10)); /* @kind color */
  --glow-violet: radial-gradient(60% 80% at 50% 0%, rgba(139,109,239,.24), transparent 70%); /* @kind color */
  --glow-blue:   radial-gradient(60% 80% at 50% 0%, rgba(77,124,255,.20), transparent 70%); /* @kind color */

  color: var(--text);
  background: var(--bg-page);
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   Agence Node it — Typography tokens
   Poppins only, across display, body and labels. No secondary face.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Poppins', 'Segoe UI', system-ui, sans-serif;
  /* Label/eyebrow stack kept as a token (Poppins) so older refs keep working. */
  --font-label:   'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Poppins', 'Segoe UI', system-ui, sans-serif;

  /* ---- Weights ---- */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* ---- Fluid display scale (clamp: min .. max) ---- */
  --fs-display:  clamp(2.75rem, 1.6rem + 5.2vw, 5.25rem);  /* @kind other */
  --fs-h1:       clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem); /* @kind other */
  --fs-h2:       clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); /* @kind other */
  --fs-h3:       clamp(1.35rem, 1.05rem + 1.1vw, 1.75rem); /* @kind other */
  --fs-h4:       1.25rem; /* @kind other */

  /* ---- Body / UI scale ---- */
  --fs-lead:  1.25rem;   /* @kind other */
  --fs-body:  1rem; /* @kind other */
  --fs-sm:    0.9375rem; /* @kind other */
  --fs-xs:    0.8125rem; /* @kind other */
  --fs-kicker: 0.8rem;  /* @kind other */

  /* ---- Line heights ---- */
  --lh-tight:   1.04; /* @kind other */
  --lh-snug:    1.18; /* @kind other */
  --lh-normal:  1.5; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* ---- Tracking ---- */
  --tracking-display: -0.025em; /* @kind other */
  --tracking-tight:   -0.015em; /* @kind other */
  --tracking-normal:  0; /* @kind other */
  --tracking-kicker:  0.14em;  /* @kind other */
}

/* ===== tokens/spacing.css ===== */
/* ============================================================
   Agence Node it — Spacing & layout tokens
   8px base rhythm, generous section padding for a premium feel.
   ============================================================ */

:root {
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 */

  /* ---- Layout ---- */
  --container:      1200px;
  --container-wide: 1360px;
  --container-prose: 720px;
  --gutter:         clamp(1.25rem, 4vw, 3rem); /* @kind spacing */
  --section-y:      clamp(4.5rem, 8vw, 9rem); /* @kind spacing */
}

/* ===== tokens/radii.css ===== */
/* ============================================================
   Agence Node it — Radii & elevation
   Soft-but-architectural corners. Shadows are soft and quiet on light
   surfaces (dark variants come from the .on-dark scope), plus a focused
   violet glow reserved for primary accents.
   ============================================================ */

:root {
  /* ---- Corner radii ---- */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ---- Semantic control radius ----
     The single corner radius shared by ALL interactive controls — buttons /
     CTAs, inputs, segmented filters — matching the header bar and logo tile.
     Change this one value to retune every control on the system. */
  --radius-control: var(--radius-md);

  /* ---- Elevation (soft, tuned for light surfaces) ---- */
  --shadow-xs: 0 1px 2px rgba(16,20,35,.06);
  --shadow-sm: 0 1px 2px rgba(16,20,35,.05), 0 4px 12px -4px rgba(16,20,35,.08);
  --shadow-md: 0 8px 24px -8px rgba(16,20,35,.12);
  --shadow-lg: 0 20px 48px -18px rgba(16,20,35,.18);
  --shadow-xl: 0 36px 72px -28px rgba(16,20,35,.22);

  /* ---- Brand glows (sparingly, primary CTA / hero focal) ---- */
  --glow-sm: 0 8px 22px -10px rgba(124,92,240,.5); /* @kind shadow */
  --glow-md: 0 16px 40px -14px rgba(124,92,240,.5); /* @kind shadow */
  --ring-violet: 0 0 0 1px rgba(124,92,240,.4), 0 0 0 4px rgba(124,92,240,.16); /* @kind shadow */
}

/* ===== tokens/motion.css ===== */
/* ============================================================
   Agence Node it — Motion tokens
   Polara-inspired: smooth, confident, never bouncy. Generous
   reveal-on-scroll fades + slow ambient drift. Respect reduced motion.
   ============================================================ */

:root {
  /* ---- Durations ---- */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */
  --dur-reveal: 720ms; /* @kind other */
  --dur-drift:  16s;     /* @kind other */
  --dur-marquee: 38s; /* @kind other */

  /* ---- Easing ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-emph:   cubic-bezier(0.16, 1, 0.3, 1);      /* @kind other */
  --ease-linear: linear; /* @kind other */

  /* ---- Interaction deltas ---- */
  --press-scale: 0.97; /* @kind other */
  --hover-lift:  -2px; /* @kind other */
}

/* Reveal-on-scroll utility. Content is VISIBLE by default; the hidden
   start-state only applies once JS adds `.reveal-on` to <html>, so print,
   export, no-JS and reduced-motion always show content. Toggle .is-in via
   IntersectionObserver. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-reveal) var(--ease-emph),
                transform var(--dur-reveal) var(--ease-emph);
    will-change: opacity, transform;
  }
  .reveal-on .reveal.is-in { opacity: 1; transform: none; }
}

/* ===== tokens/base.css ===== */
/* ============================================================
   Agence Node it — Base elements & utilities
   Applied document defaults + a few shared helper classes.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  margin: 0;
  text-wrap: balance;
}
h2 { line-height: var(--lh-snug); }
h3, h4 { letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); }

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

::selection { background: rgba(124,92,240,.22); color: var(--text-strong); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring-violet);
  border-radius: var(--radius-sm);
}

/* ---- Layout helpers ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }

/* ---- Kicker (small Poppins eyebrow label with a brand diamond bullet) ---- */
.kicker {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  white-space: nowrap;
}
.kicker::before {
  content: "";
  width: 0.5em; height: 0.5em;
  background: var(--grad-brand);
  transform: rotate(45deg);
  border-radius: 1px;
  flex: none;
}

/* ---- Gradient text (use sparingly, on key words only) ---- */
.text-gradient {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Hairline divider ---- */
.hr { height: 1px; background: var(--border); border: 0; }

/* ===== components/nodeit-components.css ===== */
/* ============================================================
   Agence Node it — Component styles
   Classes consumed by the React primitives. Real interaction
   states live here (hover / active / focus). Variants are driven
   by data-* attributes set in JSX.
   ============================================================ */

/* ---------------- Button ---------------- */
.ni-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-sm); line-height: 1; letter-spacing: -0.01em;
  border: 1px solid transparent; border-radius: var(--radius-control);
  padding: 0 1.25rem; height: 44px; cursor: pointer; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out), color var(--dur-base);
  -webkit-tap-highlight-color: transparent;
}
.ni-btn:active { transform: scale(var(--press-scale)); }
.ni-btn:disabled, .ni-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.ni-btn[data-size="sm"] { height: 36px; font-size: var(--fs-xs); padding: 0 .95rem; }
.ni-btn[data-size="lg"] { height: 52px; font-size: var(--fs-body); padding: 0 1.6rem; }
.ni-btn[data-block="true"] { width: 100%; }

.ni-btn[data-variant="primary"] {
  background: var(--accent); color: var(--accent-contrast);
  box-shadow: var(--glow-sm);
}
.ni-btn[data-variant="primary"]:hover { background: var(--accent-press); box-shadow: var(--glow-md); }

.ni-btn[data-variant="secondary"] {
  background: var(--surface-raised); color: var(--text-strong);
  border-color: var(--border-strong); box-shadow: var(--edge-top);
}
.ni-btn[data-variant="secondary"]:hover { background: var(--surface-overlay); border-color: var(--accent); }

.ni-btn[data-variant="ghost"] { background: transparent; color: var(--text); }
.ni-btn[data-variant="ghost"]:hover { background: var(--hover-wash); color: var(--text-strong); }

.ni-btn[data-variant="link"] {
  background: transparent; color: var(--accent); height: auto; padding: 0;
  border-radius: 0; border: 0;
}
.ni-btn[data-variant="link"]:hover { color: var(--accent-press); }
.ni-btn[data-variant="link"]:active { transform: none; }

.ni-btn__icon { display: inline-flex; width: 1.1em; height: 1.1em; transition: transform var(--dur-base) var(--ease-out); }
.ni-btn[data-variant="link"]:hover .ni-btn__icon, .ni-btn:hover .ni-btn__icon[data-arrow="true"] { transform: translateX(3px); }

/* ---------------- Badge ---------------- */
.ni-badge {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium);
  letter-spacing: .02em; padding: .3em .7em; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface-raised); color: var(--text);
}
.ni-badge__dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.ni-badge[data-tone="brand"]   { color: var(--violet-700); border-color: rgba(124,92,240,.28); background: var(--violet-050); }
.ni-badge[data-tone="success"] { color: #137a54; border-color: rgba(26,169,116,.3); background: rgba(26,169,116,.10); }
.ni-badge[data-tone="warning"] { color: #946012; border-color: rgba(217,138,31,.3); background: rgba(217,138,31,.10); }
.ni-badge[data-tone="danger"]  { color: #b23b39; border-color: rgba(224,82,79,.3); background: rgba(224,82,79,.10); }

/* ---------------- Tag / pill chip ---------------- */
.ni-tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium);
  letter-spacing: .04em; text-transform: uppercase;
  padding: .42em .8em; border-radius: var(--radius-sm);
  border: 1px solid var(--border); color: var(--text-muted); background: transparent;
  transition: border-color var(--dur-base), color var(--dur-base);
}
.ni-tag[data-interactive="true"] { cursor: pointer; }
.ni-tag[data-interactive="true"]:hover { color: var(--text-strong); border-color: var(--accent); }
.ni-tag[data-active="true"] { color: var(--violet-700); border-color: rgba(124,92,240,.4); background: var(--violet-050); }

/* ---------------- Avatar ---------------- */
.ni-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; flex: none;
  background: var(--surface-overlay); color: var(--text-strong);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  border: 1px solid var(--border);
}
.ni-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ni-avatar[data-size="sm"] { width: 32px; height: 32px; font-size: 12px; }
.ni-avatar[data-size="md"] { width: 44px; height: 44px; font-size: 15px; }
.ni-avatar[data-size="lg"] { width: 60px; height: 60px; font-size: 20px; }

/* ---------------- Card ---------------- */
.ni-card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--edge-top); transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base), box-shadow var(--dur-base), background var(--dur-base);
}
.ni-card[data-interactive="true"] { cursor: pointer; }
.ni-card[data-interactive="true"]:hover {
  transform: translateY(var(--hover-lift)); border-color: var(--border-strong);
  box-shadow: var(--shadow-lg), var(--edge-top); background: var(--surface-raised);
}
.ni-card[data-glow="true"]::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: var(--grad-brand); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--dur-base);
  pointer-events: none;
}
.ni-card[data-glow="true"]:hover::before { opacity: .7; }

/* ---------------- Input ---------------- */
.ni-field { display: flex; flex-direction: column; gap: .5rem; }
.ni-field__label { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); }
.ni-field__hint { font-size: var(--fs-xs); color: var(--text-faint); }
.ni-input {
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-strong);
  background: var(--field-bg); border: 1px solid var(--border); border-radius: var(--radius-control);
  padding: .8rem 1rem; height: 48px; width: 100%; transition: border-color var(--dur-base), box-shadow var(--dur-base), background var(--dur-base);
}
.ni-input::placeholder { color: var(--text-faint); }
.ni-input:hover { border-color: var(--border-strong); }
.ni-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-violet); background: var(--surface); }
textarea.ni-input { height: auto; min-height: 120px; resize: vertical; }

/* ---------------- Accordion (numbered FAQ) ---------------- */
.ni-accordion { border-top: 1px solid var(--border); }
.ni-acc-item { border-bottom: 1px solid var(--border); }
.ni-acc-trigger {
  display: flex; align-items: center; gap: 1.25rem; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 1.5rem 0; color: var(--text-strong);
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h4);
  transition: color var(--dur-base);
}
.ni-acc-trigger:hover { color: var(--accent); }
.ni-acc-num { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--accent); flex: none; width: 2.2rem; }
.ni-acc-title { flex: 1; }
.ni-acc-sign { flex: none; width: 1.5rem; height: 1.5rem; position: relative; transition: transform var(--dur-base) var(--ease-out); }
.ni-acc-sign::before, .ni-acc-sign::after { content: ""; position: absolute; inset: 0; margin: auto; background: currentColor; }
.ni-acc-sign::before { width: 100%; height: 1.5px; }
.ni-acc-sign::after { width: 1.5px; height: 100%; transition: opacity var(--dur-base); }
.ni-acc-item[data-open="true"] .ni-acc-sign { transform: rotate(90deg); color: var(--accent); }
.ni-acc-item[data-open="true"] .ni-acc-sign::after { opacity: 0; }
.ni-acc-panel { overflow: hidden; max-height: 0; transition: max-height var(--dur-slow) var(--ease-out); }
.ni-acc-panel-inner { padding: 0 0 1.5rem calc(2.2rem + 1.25rem); color: var(--text-muted); line-height: var(--lh-relaxed); max-width: 64ch; }

/* ---------------- Stat ---------------- */
.ni-stat { display: flex; flex-direction: column; gap: .35rem; }
.ni-stat__value { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -0.03em; color: var(--text-strong); }
.ni-stat__value em { font-style: normal; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ni-stat__label { font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------------- Marquee ---------------- */
.ni-marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ni-marquee__track { display: flex; gap: var(--space-8); width: max-content; animation: ni-marquee var(--dur-marquee) linear infinite; }
.ni-marquee:hover .ni-marquee__track { animation-play-state: paused; }
.ni-marquee__item { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 1.35rem; color: var(--text-faint); letter-spacing: -0.01em; transition: color var(--dur-base); }
.ni-marquee__item:hover { color: var(--text); }
@keyframes ni-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ni-marquee__track { animation: none; } }

/* ---------------- Testimonial ---------------- */
.ni-quote { display: flex; flex-direction: column; gap: var(--space-5); height: 100%; }
.ni-quote__stars { color: var(--accent); letter-spacing: .15em; font-size: .9rem; }
.ni-quote__body { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-regular); line-height: var(--lh-snug); color: var(--text-strong); text-wrap: pretty; }
.ni-quote__foot { display: flex; align-items: center; gap: .85rem; margin-top: auto; }
.ni-quote__name { font-weight: var(--fw-semibold); color: var(--text-strong); font-size: var(--fs-sm); }
.ni-quote__role { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------------- Service / expertise card ---------------- */
.ni-service { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; }
.ni-service__icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--violet-050); border: 1px solid rgba(124,92,240,.22); color: var(--accent); }
.ni-service__title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h4); color: var(--text-strong); }
.ni-service__desc { color: var(--text-muted); line-height: var(--lh-relaxed); font-size: var(--fs-sm); }
.ni-service__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: var(--space-3); }

/* ---------------- Project card ---------------- */
.ni-project { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.ni-project:hover { transform: translateY(var(--hover-lift)); border-color: var(--border-strong); }
.ni-project__media { aspect-ratio: 16/10; position: relative; overflow: hidden; background: var(--media-bg); }
.ni-project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.ni-project:hover .ni-project__media img { transform: scale(1.04); }
.ni-project__body { padding: var(--space-5); display: flex; flex-direction: column; gap: .6rem; }
.ni-project__title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h4); color: var(--text-strong); }
.ni-project__tags { display: flex; gap: .5rem; flex-wrap: wrap; }