/* ──────────────────────────────────────────────────────────────────────
 * zeq-narrative-sections.css — bespoke sections added 2026-04-28
 *
 *  Sections covered:
 *    .zd-howit  — three-step "how it works" with embed snippet
 *    .zd-build  — eight-card "what you can build" grid
 *    .zd-final  — closing CTA
 *
 *  All colors source from the project token system (style.css :root).
 *  Mobile breakpoint = 720px.
 * ────────────────────────────────────────────────────────────────────── */

/* ── shared accent helpers ─────────────────────────────────────────── */
.zd-howit .acc, .zd-build .acc, .zd-final .acc { color: var(--accent, #00ff88); }
.zd-howit .acc-c, .zd-build .acc-c { color: #00d4ff; }
.zd-howit .zd-howit-pulse,
.zd-build .zd-build-pulse,
.zd-final .zd-final-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent, #00ff88);
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.7);
  animation: zd-narr-pulse 777ms ease-in-out infinite;
}
@keyframes zd-narr-pulse {
  0%,100% { opacity: 0.5; transform: scale(0.95); }
  50%     { opacity: 1;   transform: scale(1.1); }
}

/* ── HOW IT WORKS ──────────────────────────────────────────────────── */
.zd-howit {
  position: relative;
  background: linear-gradient(180deg, #02030a 0%, #060810 100%);
  border-top: 1px solid rgba(0, 255, 136, 0.10);
  border-bottom: 1px solid rgba(0, 255, 136, 0.10);
}
.zd-howit-inner {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(64px, 8vw, 110px) clamp(20px, 4vw, 56px);
}
.zd-howit-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent, #00ff88);
  margin-bottom: 16px;
}
.zd-howit-h2 {
  font-family: 'Geist', 'Inter', sans-serif; font-weight: 800;
  font-size: clamp(30px, 3.6vw, 50px); letter-spacing: -0.02em;
  line-height: 1.05; color: #fff; margin: 0 0 36px;
  max-width: 22ch;
}
.zd-howit-steps {
  list-style: none; padding: 0; margin: 0 0 56px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.zd-howit-step {
  position: relative;
  padding: 26px 26px 24px;
  background: linear-gradient(180deg, rgba(0,255,136,0.04), rgba(13,17,23,0.6));
  border: 1px solid rgba(0, 255, 136, 0.18);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 240px;
}
.zd-howit-step .num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.16em;
  color: var(--accent, #00ff88);
  opacity: 0.85;
}
.zd-howit-step h3 {
  font-family: 'Geist', 'Inter', sans-serif; font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px); color: #fff;
  letter-spacing: -0.01em; line-height: 1.2; margin: 0;
}
.zd-howit-step p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 14.5px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin: 0; flex: 1;
}
.zd-howit-step p code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.92em; color: #00d4ff;
  background: rgba(0, 212, 255, 0.06);
  border: 1px solid rgba(0, 212, 255, 0.18);
  border-radius: 4px; padding: 1px 6px;
}
.zd-howit-step .step-cta {
  align-self: flex-start;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.05em;
  color: var(--accent, #00ff88);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 255, 136, 0.4);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.zd-howit-step .step-cta:hover {
  color: #fff; border-bottom-color: #fff;
}

@media (max-width: 860px) {
  .zd-howit-steps { grid-template-columns: 1fr; }
}

/* embed snippet block */
.zd-embed {
  background: rgba(2, 3, 10, 0.6);
  border: 1px solid rgba(0, 255, 136, 0.18);
  border-radius: 14px;
  overflow: hidden;
}
.zd-embed-h {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  background: rgba(0, 255, 136, 0.04);
  border-bottom: 1px solid rgba(0, 255, 136, 0.12);
}
.zd-embed-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; color: rgba(255, 255, 255, 0.55);
}
.zd-embed-copy {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.08em;
  background: transparent;
  border: 1px solid rgba(0, 255, 136, 0.4);
  color: var(--accent, #00ff88);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.zd-embed-copy:hover {
  background: var(--accent, #00ff88); color: #0a0a0f;
}
.zd-embed-copy.copied { background: var(--accent, #00ff88); color: #0a0a0f; }
.zd-embed-pre {
  margin: 0; padding: 22px 24px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px; line-height: 1.6;
  color: #fff;
  overflow-x: auto;
  white-space: pre;
}
.zd-embed-note {
  margin: 0; padding: 14px 22px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.55;
}
.zd-embed-note code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.92em; color: #00d4ff;
  background: rgba(0, 212, 255, 0.06);
  border: 1px solid rgba(0, 212, 255, 0.18);
  border-radius: 4px; padding: 1px 6px;
}

/* ── WHAT YOU CAN BUILD ────────────────────────────────────────────── */
.zd-build {
  position: relative;
  background: #02030a;
  border-top: 1px solid rgba(0, 255, 136, 0.10);
}
.zd-build-inner {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(64px, 8vw, 110px) clamp(20px, 4vw, 56px);
}
.zd-build-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent, #00ff88);
  margin-bottom: 16px;
}
.zd-build-h2 {
  font-family: 'Geist', 'Inter', sans-serif; font-weight: 800;
  font-size: clamp(30px, 3.6vw, 50px); letter-spacing: -0.02em;
  line-height: 1.05; color: #fff; margin: 0 0 14px;
  max-width: 22ch;
}
.zd-build-lede {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 64ch; margin: 0 0 38px;
}
.zd-build-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.zd-build-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 22px 20px;
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.6), rgba(2, 3, 10, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  text-decoration: none; color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  min-height: 220px;
}
.zd-build-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 255, 136, 0.42);
  background: linear-gradient(180deg, rgba(0, 255, 136, 0.04), rgba(2, 3, 10, 0.7));
}
.zd-build-card .zd-build-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(0, 212, 255, 0.85);
}
.zd-build-card h3 {
  font-family: 'Geist', 'Inter', sans-serif; font-weight: 700;
  font-size: 18px; line-height: 1.25; color: #fff;
  letter-spacing: -0.01em; margin: 0;
}
.zd-build-card p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 13.5px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: 0; flex: 1;
}
.zd-build-card p code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.92em; color: #00d4ff;
  background: rgba(0, 212, 255, 0.06);
  border-radius: 3px; padding: 0 4px;
}
.zd-build-card .zd-build-arr {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.05em;
  color: var(--accent, #00ff88);
  margin-top: 4px;
  transition: transform 0.18s ease;
}
.zd-build-card:hover .zd-build-arr {
  transform: translateX(4px);
}

/* ── FINAL CTA ─────────────────────────────────────────────────────── */
.zd-final {
  position: relative;
  background:
    radial-gradient(ellipse 60% 70% at 50% 30%, rgba(0, 255, 136, 0.10), transparent 70%),
    #02030a;
  border-top: 1px solid rgba(0, 255, 136, 0.18);
}
.zd-final-inner {
  max-width: 880px; margin: 0 auto;
  padding: clamp(80px, 10vw, 140px) clamp(20px, 4vw, 56px);
  text-align: center;
}
.zd-final-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent, #00ff88);
  margin-bottom: 22px;
}
.zd-final-h2 {
  font-family: 'Geist', 'Inter', sans-serif; font-weight: 900;
  font-size: clamp(40px, 5.5vw, 76px); letter-spacing: -0.03em;
  line-height: 1.02; color: #fff; margin: 0 0 22px;
}
.zd-final-lede {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 56ch; margin: 0 auto 36px;
}
.zd-final-ctas {
  display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 32px;
}
.zd-final-cta {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  padding: 15px 28px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.zd-final-cta.primary {
  background: var(--accent, #00ff88);
  color: #02030a;
  box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.6), 0 0 28px rgba(0, 255, 136, 0.45);
  animation: zd-final-glow 1554ms ease-in-out infinite;
}
.zd-final-cta.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.9), 0 0 36px rgba(0, 255, 136, 0.6);
}
@keyframes zd-final-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.6), 0 0 22px rgba(0, 255, 136, 0.35); }
  50%      { box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.9), 0 0 36px rgba(0, 255, 136, 0.6); }
}
.zd-final-cta.ghost {
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.zd-final-cta.ghost:hover {
  border-color: var(--accent, #00ff88);
  color: var(--accent, #00ff88);
}
.zd-final-foot {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

/* ── mobile tweaks ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .zd-howit-h2, .zd-build-h2 { font-size: 32px; }
  .zd-final-h2 { font-size: 42px; }
  .zd-howit-step { min-height: 0; }
  .zd-build-card { min-height: 0; }
  .zd-embed-pre { font-size: 12.5px; padding: 16px; }
}