/* ==========================================================================
   Node.js + Express Live Class (node-express.php)
   Dark charcoal + Node emerald. Everything is scoped under .nx so the shared
   navbar/footer keep their own look. style.css sets html{font-size:62.5%}
   and a global font/letter-spacing on p, li and a, so sizes here are px and
   those properties are reset inside .nx.
   ========================================================================== */

.nx {
  --nx-bg: #0d100f;
  --nx-bg-2: #111513;
  --nx-surface: #161b19;
  --nx-surface-2: #1c2220;
  --nx-line: rgba(232, 237, 233, 0.08);
  --nx-line-2: rgba(232, 237, 233, 0.15);
  --nx-text: #eef1ec;
  --nx-muted: #a3ada7;
  --nx-dim: #7b8680;
  --nx-accent: #3ddc97;
  --nx-accent-2: #22c27f;
  --nx-accent-ink: #04210f;
  --nx-accent-soft: rgba(61, 220, 151, 0.1);
  --nx-accent-line: rgba(61, 220, 151, 0.32);
  --nx-display: "Montserrat", "Inter", system-ui, sans-serif;
  --nx-sub: "Syne", "Inter", system-ui, sans-serif;
  --nx-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nx-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --nx-radius: 16px;
  --nx-wrap: 1180px;

  background: var(--nx-bg);
  color: var(--nx-text);
  font: 400 16px/1.65 var(--nx-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.nx, .nx * { font-family: var(--nx-body); }
.nx :where(p, li, a, span, dd, dt, summary, button, td, th) {
  font-size: inherit;
  letter-spacing: normal;
  line-height: inherit;
  color: inherit;
}
.nx :where(h1, h2, h3, h4) { color: var(--nx-text); font-family: var(--nx-display); margin: 0; }
.nx :where(p) { margin: 0; }
.nx :where(ul, ol) { margin: 0; padding: 0; }
.nx a { text-decoration: none; }
/* (0,2,0): beats style.css a:hover, loses to the component :hover rules below. */
.nx :where(a):hover { color: inherit; }
.nx dl { margin: 0; }
.nx code, .nx pre, .nx pre *, .nx .nx-mono, .nx .nx-mono * { font-family: var(--nx-mono); }
.nx code { color: inherit; font-size: inherit; word-wrap: normal; }
.nx :focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 3px; border-radius: 6px; }

.nx-wrap { max-width: var(--nx-wrap); margin: 0 auto; padding: 0 24px; }
.nx-sec { padding: clamp(64px, 9vw, 112px) 0; border-top: 1px solid var(--nx-line); }
.nx-sec--alt { background: var(--nx-bg-2); }

/* ---------- Type ---------- */
.nx-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 12.5px/1.4 var(--nx-sub); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--nx-accent);
}
.nx-eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.nx-h2 {
  font: 800 clamp(30px, 4.4vw, 48px)/1.08 var(--nx-display);
  letter-spacing: -0.025em; margin-top: 14px; max-width: 22ch;
}
.nx-lead { margin-top: 16px; color: var(--nx-muted); font-size: 17.5px; line-height: 1.65; max-width: 62ch; }
.nx-head { margin-bottom: clamp(36px, 5vw, 56px); }
.nx-head--center { text-align: center; }
.nx-head--center .nx-h2, .nx-head--center .nx-lead { margin-left: auto; margin-right: auto; }
.nx em.nx-hl { font-style: normal; color: var(--nx-accent); font-family: inherit; }

/* ---------- Buttons ---------- */
.nx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 24px; border-radius: 12px;
  font: 700 16px/1.2 var(--nx-body); letter-spacing: 0;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* Primary (Enroll) button: a light runs around the border (conic gradient
   rotated through the registered --nx-a angle) and a soft shine sweeps across
   every few seconds. Browsers without @property get a static bright border.
   Both stop under prefers-reduced-motion (bottom of this file). */
@property --nx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.nx-btn--primary {
  --nx-fill: var(--nx-accent);
  position: relative; isolation: isolate; overflow: hidden;
  border: 2px solid transparent; color: var(--nx-accent-ink);
  background:
    linear-gradient(var(--nx-fill), var(--nx-fill)) padding-box,
    conic-gradient(from var(--nx-a), #157a4c 0deg 190deg, #3ddc97 240deg, #b9ffe0 290deg, #ffffff 320deg, #e6fff4 335deg, #157a4c 360deg) border-box;
  box-shadow: 0 12px 32px -14px rgba(61, 220, 151, 0.8), 0 0 0 1px rgba(61, 220, 151, 0.2);
  animation: nxSpin 3.2s linear infinite, nxGlow 2.8s ease-in-out infinite alternate;
}
.nx-btn--primary::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg); animation: nxShine 4.6s ease-in-out 1.2s infinite; pointer-events: none;
}
.nx-btn--primary:hover, .nx-btn--primary:focus-visible { --nx-fill: #5fe6ab; color: var(--nx-accent-ink); transform: translateY(-2px); }
.nx-btn--primary i { transition: transform .2s ease; }
.nx-btn--primary:hover i { transform: translateX(3px); }
@keyframes nxSpin { to { --nx-a: 360deg; } }
@keyframes nxShine { 0% { left: -60%; } 55%, 100% { left: 135%; } }
@keyframes nxGlow {
  from { box-shadow: 0 12px 32px -14px rgba(61, 220, 151, 0.7), 0 0 0 1px rgba(61, 220, 151, 0.18); }
  to   { box-shadow: 0 14px 40px -12px rgba(61, 220, 151, 0.95), 0 0 0 4px rgba(61, 220, 151, 0.12); }
}
.nx-btn--ghost { background: transparent; color: var(--nx-text); border-color: var(--nx-line-2); }
.nx-btn--ghost:hover, .nx-btn--ghost:focus-visible { border-color: var(--nx-accent-line); color: var(--nx-text); background: var(--nx-accent-soft); }
.nx-btn--wa { background: transparent; color: var(--nx-muted); padding-left: 6px; padding-right: 6px; min-height: 44px; }
.nx-btn--wa i { color: #25d366; font-size: 1.2em; }
.nx-btn--wa:hover, .nx-btn--wa:focus-visible { color: var(--nx-text); }
.nx-btn--block { width: 100%; }

/* ---------- Hero ---------- */
.nx-hero {
  position: relative; padding: clamp(28px, 4vw, 44px) 0 clamp(64px, 8vw, 104px);
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(61, 220, 151, 0.08), transparent 60%),
    var(--nx-bg);
}
.nx-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--nx-line) 1px, transparent 1px), linear-gradient(90deg, var(--nx-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 10%, transparent 75%);
  opacity: 0.55;
}
.nx-crumbs { position: relative; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--nx-dim); margin-bottom: clamp(28px, 4vw, 48px); }
.nx-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.nx-crumbs li + li::before { content: "/"; color: var(--nx-line-2); }
.nx-crumbs a { color: var(--nx-muted); }
.nx-crumbs a:hover { color: var(--nx-text); }
.nx-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.nx-h1 {
  font: 800 clamp(36px, 5.4vw, 64px)/1.03 var(--nx-display);
  letter-spacing: -0.035em; margin-top: 18px;
}
.nx-h1 em { font-style: normal; color: var(--nx-accent); font-family: inherit; }
.nx-hero__sub { margin-top: 20px; font: 600 clamp(18px, 2vw, 21px)/1.45 var(--nx-sub); color: var(--nx-text); max-width: 34ch; }
.nx-hero__desc { margin-top: 16px; color: var(--nx-muted); font-size: 16.5px; max-width: 56ch; }
.nx-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 30px; }
.nx-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.nx-meta li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--nx-line-2);
  background: rgba(255, 255, 255, 0.02); font-size: 13.5px; font-weight: 500; color: var(--nx-muted); line-height: 1.3;
}
.nx-meta li i { color: var(--nx-accent); font-size: 12.5px; }
.nx-meta li strong { color: var(--nx-text); font-weight: 600; }
.nx-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.18); }

/* ---------- API playground (hero visual) ---------- */
.nx-api {
  position: relative; border-radius: 18px; border: 1px solid var(--nx-line-2);
  background: linear-gradient(180deg, #161c1a, #121614);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.4);
  overflow: hidden; font-size: 13px;
}
.nx-api__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--nx-line); }
.nx-api__dots { display: inline-flex; gap: 6px; }
.nx-api__dots i { width: 10px; height: 10px; border-radius: 50%; background: #2a312e; }
.nx-api__title { white-space: nowrap; font: 600 12px/1 var(--nx-sub); letter-spacing: 0.1em; text-transform: uppercase; color: var(--nx-dim); }
.nx-api__tag { white-space: nowrap; margin-left: auto; font-size: 11.5px; color: var(--nx-dim); border: 1px solid var(--nx-line); padding: 3px 8px; border-radius: 999px; }
.nx-api__url { display: flex; align-items: center; gap: 10px; margin: 14px 16px 0; padding: 10px 12px; border-radius: 10px; background: #0f1311; border: 1px solid var(--nx-line); }
.nx-api__url code { color: var(--nx-text); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-method { flex: none; font: 700 11.5px/1 var(--nx-mono); letter-spacing: 0.04em; padding: 5px 7px; border-radius: 6px; }
.nx-method--get { color: #7cc4ff; background: rgba(124, 196, 255, 0.12); }
.nx-method--post { color: var(--nx-accent); background: var(--nx-accent-soft); }
.nx-method--patch { color: #f5c96a; background: rgba(245, 201, 106, 0.12); }
.nx-method--delete { color: #ff8a80; background: rgba(255, 138, 128, 0.12); }
.nx-api__label { display: flex; justify-content: space-between; align-items: center; margin: 14px 16px 6px; font: 600 11px/1 var(--nx-sub); letter-spacing: 0.12em; text-transform: uppercase; color: var(--nx-dim); }
.nx-code {
  margin: 0 16px; padding: 12px 14px; border-radius: 10px; background: #0f1311; border: 1px solid var(--nx-line);
  font: 400 12.5px/1.65 var(--nx-mono); color: #d7ddd9; white-space: pre; overflow-x: auto; tab-size: 2;
}
.nx-code .k { color: #b9c4be; }
.nx-code .s { color: #8ee6bb; }
.nx-code .n { color: #f5c96a; }
.nx-code .p { color: var(--nx-dim); }

.nx-pipe { display: flex; align-items: center; margin: 16px 16px 0; padding: 12px; border-radius: 12px; border: 1px dashed var(--nx-line-2); }
.nx-pipe__node {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  font: 600 10.5px/1.2 var(--nx-sub); letter-spacing: 0.02em; color: var(--nx-dim); width: 56px;
}
.nx-pipe__node i {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 14px;
  border: 1px solid var(--nx-line-2); background: #121715; color: var(--nx-muted);
}
.nx-pipe__link { flex: 1; height: 2px; min-width: 8px; margin: 0 2px 16px; background: var(--nx-line-2); position: relative; overflow: hidden; border-radius: 2px; }
.nx-pipe__link::after { content: ""; position: absolute; inset: 0; background: var(--nx-accent); transform: scaleX(1); transform-origin: left; }
.nx-pipe__node.is-on i { color: var(--nx-accent); border-color: var(--nx-accent-line); background: var(--nx-accent-soft); }
.nx-pipe__node.is-on { color: var(--nx-text); }
.nx-status { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1 var(--nx-mono); letter-spacing: 0; text-transform: none; color: var(--nx-accent); }
.nx-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nx-api__foot { padding: 12px 16px 14px; margin-top: 14px; border-top: 1px solid var(--nx-line); font-size: 11.5px; color: var(--nx-dim); }

/* One-time request animation. The final state is the default, so without JS
   or with reduced motion everything is simply shown. With JS the card waits
   in its start state until it scrolls into view (js/node-express.js). */
@media (prefers-reduced-motion: no-preference) {
  .nx-js .nx-api:not(.is-ready) .nx-pipe__node i { color: var(--nx-muted); border-color: var(--nx-line-2); background: #121715; }
  .nx-js .nx-api:not(.is-ready) .nx-pipe__node { color: var(--nx-dim); }
  .nx-js .nx-api:not(.is-ready) .nx-pipe__link::after { transform: scaleX(0); }
  .nx-js .nx-api:not(.is-ready) .nx-api__res { opacity: 0; }
  .nx-api.is-ready .nx-pipe__node i { animation: nxNode .4s ease both; animation-delay: calc(var(--d) * 1s); }
  .nx-api.is-ready .nx-pipe__node { animation: nxNodeTxt .4s ease both; animation-delay: calc(var(--d) * 1s); }
  .nx-api.is-ready .nx-pipe__link::after { animation: nxLink .32s ease-out both; animation-delay: calc(var(--d) * 1s); }
  .nx-api.is-ready .nx-api__res { animation: nxFade .5s ease both; animation-delay: 1.9s; }
}
@keyframes nxNode { from { color: var(--nx-muted); border-color: var(--nx-line-2); background: #121715; } }
@keyframes nxNodeTxt { from { color: var(--nx-dim); } }
@keyframes nxLink { from { transform: scaleX(0); } }
@keyframes nxFade { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Cards (why backend, audience, benefits) ---------- */
.nx-grid { display: grid; gap: 16px; }
.nx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx-card {
  position: relative; padding: 26px 24px; border-radius: var(--nx-radius);
  background: var(--nx-surface); border: 1px solid var(--nx-line);
  transition: border-color .2s ease, transform .2s ease;
}
.nx-card:hover { border-color: var(--nx-line-2); }
.nx-card__ico {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--nx-accent-soft); border: 1px solid var(--nx-accent-line); color: var(--nx-accent); font-size: 18px;
}
.nx-card__no { position: absolute; top: 24px; right: 24px; font: 500 12px/1 var(--nx-mono); color: var(--nx-dim); }
.nx-card h3 { margin-top: 20px; font: 700 19px/1.3 var(--nx-display); letter-spacing: -0.01em; }
.nx-card p { margin-top: 10px; color: var(--nx-muted); font-size: 15px; line-height: 1.6; }

.nx-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.nx-quote {
  margin-top: 28px; padding: 18px 20px; border-left: 2px solid var(--nx-accent);
  background: var(--nx-accent-soft); border-radius: 0 12px 12px 0;
  font: 600 17px/1.5 var(--nx-sub); color: var(--nx-text);
}

/* ---------- Technology grid ---------- */
.nx-stack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.nx-stack__group { padding: 20px; border-radius: var(--nx-radius); background: var(--nx-surface); border: 1px solid var(--nx-line); }
.nx-stack__group ul { display: grid; gap: 8px; }
.nx-tech {
  display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.02); border: 1px solid var(--nx-line);
}
.nx-tech__logo {
  flex: none; width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  background: #eef1ec; color: #0d100f;
}
.nx-tech__logo img { width: 26px; height: 26px; object-fit: contain; }
.nx-tech__logo--icon { background: var(--nx-accent-soft); border: 1px solid var(--nx-accent-line); color: var(--nx-accent); font-size: 17px; }
.nx-tech__name { display: block; font: 700 15px/1.25 var(--nx-display); color: var(--nx-text); }
.nx-tech__role { display: block; margin-top: 2px; font-size: 12.5px; color: var(--nx-dim); line-height: 1.3; }
.nx-note { margin-top: 20px; font-size: 13.5px; color: var(--nx-dim); }
.nx-tech__role--star { color: #f5c96a; font-weight: 600; }
.nx-note--star { margin-top: 18px; padding: 12px 16px; border-radius: 12px; border: 1px dashed rgba(245, 201, 106, 0.4); background: rgba(245, 201, 106, 0.06); color: var(--nx-muted); font-size: 14px; line-height: 1.55; }
.nx-note--star strong { color: #f5c96a; font-weight: 700; }
.nx-note--star + .nx-note { margin-top: 12px; }

/* ---------- Roadmap ---------- */
.nx-road { position: relative; display: grid; gap: 14px; counter-reset: nxmod; }
.nx-road::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 1px; background: linear-gradient(var(--nx-accent-line), var(--nx-line)); }
.nx-mod { position: relative; border-radius: var(--nx-radius); background: var(--nx-surface); border: 1px solid var(--nx-line); transition: border-color .2s ease; }
.nx-mod[open] { border-color: var(--nx-accent-line); background: linear-gradient(180deg, #17201c, var(--nx-surface)); }
.nx-mod summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas: "no kick chev" "no title chev" "no sum chev"; column-gap: 16px;
  padding: 18px 20px 18px 0; min-height: 72px;
}
.nx-mod summary::-webkit-details-marker { display: none; }
.nx-mod__kicker { grid-area: kick; }
.nx-mod__title { grid-area: title; }
.nx-mod__sum { grid-area: sum; }
.nx-mod__chev { grid-area: chev; align-self: center; }
.nx-mod__no {
  grid-area: no; align-self: center; justify-self: center; position: relative; z-index: 1; width: 34px; height: 34px; margin-left: 10px; border-radius: 10px; display: grid; place-items: center;
  font: 600 12.5px/1 var(--nx-mono); background: var(--nx-bg); border: 1px solid var(--nx-line-2); color: var(--nx-muted);
}
.nx-mod[open] .nx-mod__no { background: var(--nx-accent); border-color: var(--nx-accent); color: var(--nx-accent-ink); }
.nx-mod__kicker { display: block; font: 600 11.5px/1.2 var(--nx-sub); letter-spacing: 0.12em; text-transform: uppercase; color: var(--nx-dim); }
.nx-mod__title { display: block; margin-top: 4px; font: 700 clamp(17px, 2vw, 20px)/1.3 var(--nx-display); color: var(--nx-text); letter-spacing: -0.01em; }
.nx-mod__sum { display: block; margin-top: 4px; font-size: 14.5px; color: var(--nx-muted); line-height: 1.5; }
.nx-mod__chev { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--nx-line-2); color: var(--nx-muted); transition: transform .2s ease; }
.nx-mod[open] .nx-mod__chev { transform: rotate(180deg); color: var(--nx-accent); border-color: var(--nx-accent-line); }
.nx-mod__body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; padding: 4px 24px 24px 72px; }
.nx-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-topics li { padding: 6px 11px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--nx-line); font-size: 13.5px; color: var(--nx-muted); line-height: 1.35; }
.nx-sub-h { font: 700 11.5px/1.2 var(--nx-sub); letter-spacing: 0.12em; text-transform: uppercase; color: var(--nx-dim); margin-bottom: 12px; }
.nx-outcomes li { position: relative; padding-left: 24px; font-size: 14.5px; color: var(--nx-text); line-height: 1.5; }
.nx-outcomes li + li { margin-top: 10px; }
.nx-outcomes li::before { content: "\f00c"; font: 900 11px/1 "Font Awesome 6 Free"; position: absolute; left: 0; top: 5px; color: var(--nx-accent); }
.nx-milestone {
  margin-top: 18px; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--nx-accent-line); background: var(--nx-accent-soft);
}
.nx-milestone i { color: var(--nx-accent); margin-top: 3px; }
.nx-milestone b { display: block; font: 700 11px/1.2 var(--nx-sub); letter-spacing: 0.12em; text-transform: uppercase; color: var(--nx-accent); }
.nx-milestone span { display: block; margin-top: 4px; font-weight: 600; font-size: 14.5px; color: var(--nx-text); line-height: 1.45; }

/* ---------- Request lifecycle ---------- */
.nx-flow { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: repeat(7, auto); column-gap: clamp(24px, 4vw, 48px); row-gap: 0; }
.nx-flow__item { display: contents; }
.nx-flow__btn {
  grid-column: 1; grid-row: var(--r); position: relative;
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 12px 14px; margin: 0 0 22px; border-radius: 12px; cursor: pointer;
  background: var(--nx-surface); border: 1px solid var(--nx-line); color: var(--nx-text);
  transition: border-color .18s ease, background-color .18s ease;
}
.nx-flow__btn:not(.is-last)::after {
  content: "\f063"; font: 900 10px/1 "Font Awesome 6 Free"; color: var(--nx-dim);
  position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%);
}
.nx-flow__btn:hover { border-color: var(--nx-line-2); }
.nx-flow__btn[aria-expanded="true"] { border-color: var(--nx-accent-line); background: linear-gradient(90deg, rgba(61, 220, 151, 0.1), var(--nx-surface)); }
.nx-flow__no { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font: 600 12px/1 var(--nx-mono); border: 1px solid var(--nx-line-2); color: var(--nx-muted); }
.nx-flow__btn[aria-expanded="true"] .nx-flow__no { background: var(--nx-accent); border-color: var(--nx-accent); color: var(--nx-accent-ink); }
.nx-flow__name { display: block; font: 700 15.5px/1.3 var(--nx-display); }
.nx-flow__label { display: block; font-size: 13px; color: var(--nx-dim); line-height: 1.35; margin-top: 2px; }
.nx-flow__panel {
  grid-column: 2; grid-row: 1 / span 7; align-self: start; position: sticky; top: 96px;
  padding: 26px; border-radius: 18px; background: var(--nx-surface); border: 1px solid var(--nx-line-2);
}
.nx-flow__panel[hidden] { display: none; }
.nx-flow__panel h3 { font: 700 22px/1.25 var(--nx-display); letter-spacing: -0.01em; }
.nx-flow__panel p { margin-top: 10px; color: var(--nx-muted); font-size: 15.5px; }
.nx-flow__panel .nx-code { margin: 18px 0 0; white-space: pre-wrap; word-break: break-word; }
.nx-flow__step { font: 600 11.5px/1 var(--nx-sub); letter-spacing: 0.12em; text-transform: uppercase; color: var(--nx-accent); }

/* ---------- Projects ---------- */
.nx-proj { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.nx-proj__top { padding: 24px 24px 0; }
.nx-proj__lvl { display: inline-block; font: 700 11.5px/1 var(--nx-sub); letter-spacing: 0.12em; text-transform: uppercase; color: var(--nx-accent); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--nx-accent-line); }
.nx-proj h3 { margin-top: 16px; }
.nx-proj__eps { margin: 20px 24px 0; padding: 12px; border-radius: 12px; background: #0f1311; border: 1px solid var(--nx-line); }
.nx-proj__eps li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font: 400 12.5px/1.4 var(--nx-mono); color: #cfd6d2; min-width: 0; }
.nx-proj__eps li code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-proj__eps .nx-method { min-width: 56px; text-align: center; font-size: 10.5px; }
.nx-proj__feat { display: flex; flex-wrap: wrap; gap: 6px; padding: 18px 24px 24px; margin-top: auto; }
.nx-proj__feat li { font-size: 12.5px; color: var(--nx-muted); padding: 4px 9px; border-radius: 6px; border: 1px solid var(--nx-line); line-height: 1.4; }

/* ---------- Audience ---------- */
.nx-aud { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 14px; background: var(--nx-surface); border: 1px solid var(--nx-line); }
.nx-aud i { color: var(--nx-accent); margin-top: 4px; }
.nx-aud p { font-size: 15.5px; color: var(--nx-text); line-height: 1.5; }
.nx-prereq { margin-top: 24px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 22px 24px; border-radius: var(--nx-radius); border: 1px solid var(--nx-line-2); background: var(--nx-bg); }
.nx-prereq__ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #f7df1e; color: #1c1c1c; font: 800 15px/1 var(--nx-display); }
.nx-prereq h3 { font: 700 18px/1.3 var(--nx-display); }
.nx-prereq p { margin-top: 6px; color: var(--nx-muted); font-size: 15px; }
.nx-prereq a { color: var(--nx-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Instructor ---------- */
.nx-inst { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.nx-inst__photo { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 1 / 1; background: #1a201d; border: 1px solid var(--nx-line-2); }
.nx-inst__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.nx-inst__badge { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 12px; background: rgba(13, 16, 15, 0.86); border: 1px solid var(--nx-line-2); font-weight: 700; font-size: 14px; backdrop-filter: blur(6px); }
.nx-inst__badge i { color: #ff3b30; font-size: 18px; }
.nx-inst__name { font: 800 clamp(28px, 3.6vw, 40px)/1.1 var(--nx-display); letter-spacing: -0.02em; margin-top: 14px; }
.nx-inst__brand { margin-top: 6px; font: 600 16px/1.4 var(--nx-sub); color: var(--nx-accent); }
.nx-inst p.nx-lead { margin-top: 18px; }
.nx-checks { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.nx-checks li { position: relative; padding-left: 26px; font-size: 15px; color: var(--nx-text); line-height: 1.5; }
.nx-checks li::before { content: "\f00c"; font: 900 11px/1 "Font Awesome 6 Free"; position: absolute; left: 0; top: 4px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: var(--nx-accent-soft); color: var(--nx-accent); }
.nx-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.nx-social a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--nx-line-2); font-size: 14px; font-weight: 600; color: var(--nx-muted); }
.nx-social a:hover, .nx-social a:focus-visible { color: var(--nx-text); border-color: var(--nx-accent-line); }

/* ---------- Benefits ---------- */
.nx-ben { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: 14px; background: var(--nx-surface); border: 1px solid var(--nx-line); }
.nx-ben .nx-card__ico { flex: none; width: 40px; height: 40px; font-size: 16px; }
.nx-ben h3 { font: 700 16.5px/1.35 var(--nx-display); }
.nx-ben p { margin-top: 6px; font-size: 14.5px; color: var(--nx-muted); line-height: 1.55; }
.nx-livevs { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--nx-radius); border: 1px solid var(--nx-line-2); overflow: hidden; }
.nx-livevs > div { padding: 22px 24px; }
.nx-livevs > div + div { border-left: 1px solid var(--nx-line-2); background: var(--nx-bg); }
.nx-livevs h3 { font: 700 16px/1.3 var(--nx-display); display: flex; align-items: center; gap: 10px; }
.nx-livevs p { margin-top: 8px; font-size: 14.5px; color: var(--nx-muted); }

/* ---------- Pricing ---------- */
.nx-price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(32px, 5vw, 64px); align-items: center; }
.nx-pcard {
  position: relative; padding: clamp(24px, 3vw, 32px); border-radius: 22px;
  background: linear-gradient(180deg, #19221e, var(--nx-surface)); border: 1px solid var(--nx-accent-line);
  box-shadow: 0 40px 80px -48px rgba(61, 220, 151, 0.35);
}
.nx-pcard__name { font: 700 14px/1.3 var(--nx-sub); letter-spacing: 0.04em; color: var(--nx-muted); }
.nx-pcard__status { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 11px; border-radius: 999px; background: var(--nx-accent-soft); border: 1px solid var(--nx-accent-line); color: var(--nx-accent); font-size: 13px; font-weight: 600; line-height: 1.3; }
.nx-pcard__status .nx-live-dot { background: currentColor; box-shadow: none; }
.nx-pcard__status--muted { background: rgba(255, 255, 255, 0.04); border-color: var(--nx-line-2); color: var(--nx-muted); }
.nx-pcard__amt { margin-top: 18px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.nx-pcard__amt strong { font: 800 clamp(44px, 6vw, 56px)/1 var(--nx-display); letter-spacing: -0.03em; color: var(--nx-text); }
.nx-pcard__amt span { font-size: 14px; color: var(--nx-dim); }
.nx-pcard__rows { margin-top: 20px; border-top: 1px solid var(--nx-line); }
.nx-pcard__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--nx-line); font-size: 14.5px; }
.nx-pcard__rows dt { color: var(--nx-dim); font-weight: 400; }
.nx-pcard__rows dd { margin: 0; color: var(--nx-text); font-weight: 600; text-align: right; }
.nx-pcard__inc { margin-top: 18px; display: grid; gap: 10px; }
.nx-pcard__inc li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.45; color: var(--nx-text); }
.nx-pcard__inc li::before { content: "\f00c"; font: 900 11px/1 "Font Awesome 6 Free"; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: var(--nx-accent-soft); color: var(--nx-accent); }
.nx-pcard .nx-btn--primary { margin-top: 24px; }
.nx-pcard__fine { margin-top: 14px; font-size: 13px; color: var(--nx-dim); line-height: 1.55; text-align: center; }
.nx-pcard__fine a { color: var(--nx-muted); text-decoration: underline; text-underline-offset: 3px; }
.nx-pcard .nx-btn--wa { margin: 6px auto 0; display: flex; width: fit-content; }

/* ---------- FAQ ---------- */
.nx-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.nx-faq details { border-radius: 14px; background: var(--nx-surface); border: 1px solid var(--nx-line); }
.nx-faq details[open] { border-color: var(--nx-line-2); }
.nx-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; min-height: 60px; font: 600 16px/1.45 var(--nx-display); color: var(--nx-text); }
.nx-faq summary::-webkit-details-marker { display: none; }
.nx-faq summary::after { content: "\2b"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--nx-line-2); color: var(--nx-muted); font: 900 11px/1 "Font Awesome 6 Free"; transition: transform .2s ease; }
.nx-faq details[open] summary::after { transform: rotate(45deg); color: var(--nx-accent); border-color: var(--nx-accent-line); }
.nx-faq details p { padding: 0 22px 20px; color: var(--nx-muted); font-size: 15.5px; line-height: 1.7; max-width: 72ch; }

/* ---------- Final CTA + related ---------- */
.nx-final { text-align: center; padding: clamp(40px, 6vw, 64px) clamp(20px, 4vw, 48px); border-radius: 24px; border: 1px solid var(--nx-accent-line); background: radial-gradient(600px 240px at 50% 0%, rgba(61, 220, 151, 0.12), transparent 70%), var(--nx-surface); }
.nx-final .nx-h2 { margin-left: auto; margin-right: auto; max-width: 20ch; }
.nx-final .nx-lead { margin-left: auto; margin-right: auto; }
.nx-final .nx-hero__cta { justify-content: center; }
.nx-related { margin-top: clamp(40px, 5vw, 56px); }
.nx-related h3 { font: 700 13px/1.3 var(--nx-sub); letter-spacing: 0.12em; text-transform: uppercase; color: var(--nx-dim); text-align: center; }
.nx-related ul { margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.nx-related a { display: block; height: 100%; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--nx-line); background: var(--nx-bg-2); transition: border-color .18s ease; }
.nx-related a:hover, .nx-related a:focus-visible { border-color: var(--nx-accent-line); }
.nx-related b { display: block; font: 700 15px/1.3 var(--nx-display); color: var(--nx-text); }
.nx-related span { display: block; margin-top: 4px; font-size: 13px; color: var(--nx-dim); line-height: 1.45; }

/* ---------- Sticky enroll bar (all screen sizes) ---------- */
.nx-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  padding: 11px 20px calc(11px + env(safe-area-inset-bottom));
  background: linear-gradient(90deg, rgba(10, 13, 12, 0.97), rgba(13, 17, 15, 0.97) 45%, rgba(9, 38, 27, 0.97));
  border-top: 1px solid var(--nx-accent-line); box-shadow: 0 -12px 40px -18px rgba(61, 220, 151, 0.5); backdrop-filter: blur(10px);
  transform: translateY(115%); transition: transform .35s cubic-bezier(.16, .84, .44, 1);
}
.nx-sticky.is-shown { transform: none; }
.nx-sticky__in { display: flex; align-items: center; gap: 22px; max-width: var(--nx-wrap); margin: 0 auto; }
.nx-sticky__course { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nx-sticky__ico { flex: none; font-size: 28px; color: var(--nx-accent); }
.nx-sticky__name { line-height: 1.2; min-width: 0; }
.nx-sticky__name b { display: block; font: 700 15px/1.25 var(--nx-display); color: var(--nx-text); }
.nx-sticky__name span { display: block; margin-top: 3px; font: 400 12px/1.3 var(--nx-mono); color: var(--nx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-sticky__price { display: flex; align-items: baseline; gap: 10px; padding-left: 22px; border-left: 1px solid var(--nx-line-2); white-space: nowrap; }
.nx-sticky__price strong { font: 800 24px/1 var(--nx-display); color: var(--nx-text); letter-spacing: -0.02em; }
.nx-sticky__price span { font: 700 11.5px/1 var(--nx-mono); color: #f5c96a; }
.nx-sticky__cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nx-sticky__wa {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: 12px;
  border: 1px solid var(--nx-line-2); color: var(--nx-text); font-weight: 600; font-size: 14.5px;
}
.nx-sticky__wa i { color: #25d366; font-size: 1.2em; }
.nx-sticky__wa:hover, .nx-sticky__wa:focus-visible { border-color: #25d366; color: #25d366; }
.nx-sticky .nx-btn { min-height: 46px; padding: 11px 22px; font-size: 15px; flex: none; }
body.nx-has-sticky { padding-bottom: 72px; }
.nx-sticky__when { display: none; }
@media (max-width: 991.98px) {
  .nx-sticky { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .nx-sticky__in { gap: 12px; }
  .nx-sticky__course { display: none; }
  .nx-sticky__price { flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 5px; padding-left: 0; border-left: 0; min-width: 0; }
  .nx-sticky__cta { flex: none; }
  .nx-sticky__price strong { font-size: 21px; }
  .nx-sticky__price span { display: none; }
  .nx-sticky__when { display: block; font: 400 11.5px/1.2 var(--nx-mono); font-style: normal; color: var(--nx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}
@media (max-width: 599.98px) {
  .nx-sticky__wa { width: 46px; padding: 0; justify-content: center; }
  .nx-sticky__wa span { display: none; }
  .nx-sticky .nx-btn { padding: 11px 16px; }
}

/* ---------- In-section enroll rows (every other section) ---------- */
.nx-cta-row {
  margin-top: clamp(32px, 4vw, 44px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  padding: 18px 18px 18px 24px; border-radius: 16px; border: 1px solid var(--nx-accent-line);
  background: linear-gradient(90deg, rgba(61, 220, 151, 0.09), rgba(61, 220, 151, 0.015));
}
.nx-cta-row__txt { min-width: 0; }
.nx-cta-row__txt b { display: block; font: 700 17.5px/1.35 var(--nx-display); color: var(--nx-text); letter-spacing: -0.01em; }
.nx-cta-row__txt span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--nx-muted); }
.nx-cta-row__txt span i { color: var(--nx-accent); font-size: 12.5px; margin-right: 7px; }
.nx-cta-row .nx-btn { flex: none; }

/* ---------- Images ---------- */
.nx-shot { margin: 0 0 clamp(28px, 4vw, 44px); position: relative; }
.nx-shot img { display: block; width: 100%; height: auto; border-radius: 18px; }
/* The render sits on #070908, so the panel uses that exact colour and the
   image edge disappears into it. */
.nx-shot--wide { padding: 0 0 14px; border-radius: 20px; background: #070908; border: 1px solid var(--nx-line); overflow: hidden; box-shadow: 0 40px 80px -50px rgba(61, 220, 151, 0.35); }
.nx-shot--wide img { border-radius: 0; }
.nx-shot figcaption { margin-top: 10px; text-align: center; font: 600 12px/1.4 var(--nx-sub); letter-spacing: 0.1em; text-transform: uppercase; color: var(--nx-dim); }
.nx-shot--card { margin: 28px 0 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--nx-line-2); }
.nx-shot--card img { border-radius: 0; }
/* Live-class photo (same image as the Full Stack + AI hero) with a live badge. */
.nx-shot--live { position: relative; background: #0b0f1a; box-shadow: 0 30px 70px -40px rgba(61, 220, 151, 0.45); }
.nx-shot--live figcaption.nx-shot__badge {
  position: absolute; right: 14px; top: 14px; margin: 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px; background: rgba(10, 13, 12, 0.82); border: 1px solid var(--nx-line-2); backdrop-filter: blur(6px);
  font: 700 12px/1 var(--nx-sub); letter-spacing: 0.08em; text-transform: uppercase; color: var(--nx-text); text-align: left;
}

/* ---------- Play-a-request control ---------- */
.nx-play {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; min-height: 44px; padding: 10px 16px; border-radius: 999px;
  background: var(--nx-accent-soft); border: 1px solid var(--nx-accent-line); color: var(--nx-accent); font-weight: 700; font-size: 14.5px; cursor: pointer;
}
.nx-play:hover { background: rgba(61, 220, 151, 0.16); }
.nx-play i { width: 14px; text-align: center; }

/* ---------- Motion (only with JS, only without reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Scroll reveal: js/node-express.js adds .nx-rv only to elements that
     start below the fold, so nothing visible on load ever flashes. */
  .nx-rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--rv, 0) * 70ms); }
  .nx-rv.is-in { opacity: 1; transform: none; }

  .nx-card, .nx-tech, .nx-related a { transition: border-color .2s ease, transform .2s ease; }
  .nx-card:hover, .nx-tech:hover { transform: translateY(-3px); }
  .nx-flow__panel:not([hidden]) { animation: nxFade .35s ease both; }

  /* Hero card: after the first run, a data pulse keeps travelling the pipeline. */
  .nx-pipe__link::before {
    content: ""; position: absolute; z-index: 1; top: -1px; bottom: -1px; left: -30%; width: 30%; border-radius: 2px;
    background: linear-gradient(90deg, transparent, #eafff5, transparent); opacity: 0;
    animation: nxPacket 2.6s linear infinite; animation-delay: calc(2.4s + var(--d) * 0.65s);
  }
  .nx-caret { display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--nx-accent); animation: nxBlink 1.1s steps(1) infinite; }

  /* Roadmap: the timeline line fills as the modules scroll past. */
  @supports (animation-timeline: view()) {
    .nx-road::after {
      content: ""; position: absolute; left: 26px; top: 28px; bottom: 28px; width: 3px; border-radius: 3px;
      background: var(--nx-accent); box-shadow: 0 0 12px rgba(61, 220, 151, 0.55); transform-origin: top;
      animation: nxFill linear both; animation-timeline: view(); animation-range: entry 30% cover 75%;
    }
    .nx-mod { z-index: 1; }
  }
}
@keyframes nxPacket { 0% { left: -30%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes nxBlink { 50% { opacity: 0; } }
@keyframes nxFill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* ---------- Diwali one-day offer (only printed while it runs) ---------- */
.nx-dw-offer {
  margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  max-width: 580px; padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.28), rgba(124, 45, 18, 0.32));
  border: 1px solid rgba(251, 191, 36, 0.45); box-shadow: 0 20px 44px -28px rgba(245, 158, 11, 0.8);
}
.nx-dw-offer__tag { display: inline-flex; align-items: center; gap: 8px; font: 800 12px/1.2 var(--nx-sub); letter-spacing: .12em; text-transform: uppercase; color: #fde68a; }
.nx-dw-offer__amt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; }
.nx-dw-offer__amt b { font: 800 36px/1 var(--nx-display); letter-spacing: -.02em; color: #fff; }
.nx-dw-offer__amt s { font-size: 17px; color: var(--nx-dim); }
.nx-dw-offer__amt em { font-style: normal; font-size: 13px; font-weight: 700; color: #fff; background: #dc2626; padding: 3px 8px; border-radius: 6px; }
.nx-dw-offer__label { display: block; font: 700 11.5px/1.3 var(--nx-mono); letter-spacing: .04em; color: #fdba74; text-transform: uppercase; }
.nx-dw-offer .kdf-dw-clock, .nx-dw-note .kdf-dw-clock { margin-top: 7px; }
/* Bright marigold timer blocks: the shared dark-maroon ones disappear on this dark page. */
.nx-dw-offer .kdf-dw-clock > span, .nx-dw-note .kdf-dw-clock > span { background: linear-gradient(180deg, #fbbf24, #f59e0b); color: #7c2d12; box-shadow: 0 6px 16px -8px rgba(245, 158, 11, .9); }
.nx-dw-offer .kdf-dw-clock b, .nx-dw-note .kdf-dw-clock b { color: #431407; }
.nx-pcard__amt s.nx-pcard__was { font-size: 18px; color: var(--nx-dim); }
.nx-dw-note {
  margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  padding: 12px 14px; border-radius: 12px; background: rgba(245, 158, 11, 0.1); border: 1px dashed rgba(251, 191, 36, 0.5);
  font-size: 13.5px; line-height: 1.5; color: #fde68a;
}
.nx-dw-note .kdf-dw-clock { margin-top: 0; }
.nx-sticky__price strong s { font: 500 13px/1 var(--nx-body); color: var(--nx-dim); margin-left: 4px; }
@media (max-width: 599.98px) {
  .nx-dw-offer { padding: 14px; }
  .nx-dw-offer__amt b { font-size: 32px; }
}
/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-related ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .nx-hero__grid, .nx-split, .nx-inst, .nx-price { grid-template-columns: minmax(0, 1fr); }
  .nx-hero__visual { max-width: 560px; }
  .nx-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .nx-mod__body { grid-template-columns: minmax(0, 1fr); }
  .nx-inst__photo { max-width: 380px; }
  .nx-price .nx-pcard { max-width: 520px; }
  /* Request lifecycle becomes a stacked flow: the open stage's panel sits
     right under its button. */
  .nx-flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .nx-flow__item { display: block; }
  .nx-flow__btn, .nx-flow__panel { grid-column: auto; grid-row: auto; }
  .nx-flow__panel { position: static; margin: -10px 0 22px; border-radius: 0 0 14px 14px; border-top: 0; padding: 20px; }
  .nx-flow__btn[aria-expanded="true"] { border-radius: 12px 12px 0 0; margin-bottom: 10px; }
  .nx-flow__btn[aria-expanded="true"]::after { display: none; }
}
@media (max-width: 767.98px) {
  .nx-livevs { grid-template-columns: minmax(0, 1fr); }
  .nx-livevs > div + div { border-left: 0; border-top: 1px solid var(--nx-line-2); }
  .nx-checks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599.98px) {
  .nx-wrap { padding: 0 16px; }
  .nx-grid--4, .nx-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .nx-related ul { grid-template-columns: minmax(0, 1fr); }
  .nx-stack { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .nx-stack__group { padding: 16px; }
  .nx-stack__group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-tech { padding: 9px; gap: 10px; }
  .nx-tech__logo { width: 38px; height: 38px; }
  .nx-tech__logo img { width: 22px; height: 22px; }
  .nx-hero__cta .nx-btn--primary, .nx-hero__cta .nx-btn--ghost { width: 100%; }
  .nx-hero__cta .nx-btn--wa { margin: 0 auto; }
  .nx-road::before { left: 21px; }
  .nx-road::after { left: 20px; }
  .nx-cta-row { padding: 18px; }
  .nx-cta-row .nx-btn { width: 100%; }
  .nx-mod summary { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; padding-right: 14px; }
  .nx-mod__no { margin-left: 4px; width: 30px; height: 30px; font-size: 11.5px; }
  .nx-mod__sum { display: none; }
  .nx-mod__body { padding: 0 16px 20px 16px; }
  .nx-api { font-size: 12px; }
  .nx-api__dots { display: none; }
  .nx-pcard .nx-btn--primary { font-size: 15px; padding: 14px 14px; }
  .nx-h1 { font-size: clamp(32px, 9vw, 40px); }
  .nx-code { font-size: 11.5px; padding: 10px 12px; }
  .nx-pipe { padding: 10px 6px; }
  .nx-pipe__node { width: 46px; font-size: 9.5px; }
  .nx-pipe__node i { width: 30px; height: 30px; font-size: 12.5px; }
  .nx-prereq { grid-template-columns: minmax(0, 1fr); }
  .nx-faq summary { padding: 16px 18px; font-size: 15.5px; }
  .nx-faq details p { padding: 0 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .nx *, .nx-sticky { transition: none !important; animation: none !important; }
}
@media (max-width: 599.98px) {
  .nx-shot--live figcaption.nx-shot__badge { right: 8px; top: 8px; padding: 5px 9px; font-size: 10.5px; }
  .nx-sticky__when { font-size: 11px; }
}