/* Enciu Consulting — site styles
   Direction: Dark Signal. Near-black base, electric cyan-blue accent,
   Space Grotesk display/body + JetBrains Mono for labels and data. */

/* ===== Tokens ===== */
:root{
  --bg: #0A0B0E;
  --bg-alt: #0D0F13;
  --surface: #12151B;
  --surface-2: #171B22;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.18);
  --text: #EDEEF2;
  --text-dim: #8D93A0;
  --text-faint: #5B6270;
  --accent: #1FB6FF;
  --accent-2: #6FE0FF;
  --accent-soft: rgba(31,182,255,.12);
  --accent-line: rgba(31,182,255,.35);
  --success: #4FE0A8;
  --danger: #FF6B6B;
  --font-display: "Space Grotesk", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --radius: 6px;
  --radius-sm: 4px;
  --container: 1200px;
  --shadow: 0 24px 60px -24px rgba(0,0,0,.7);
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ===== Base ===== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* faint fixed grid texture instead of a gradient glow blob */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 100% 96px,
    var(--bg);
  opacity:.35;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 70%);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-weight:700; line-height:1.12; letter-spacing:-0.01em; margin:0 0 .5em; }
p{ margin:0 0 1em; color:var(--text-dim); }
ul,ol{ color:var(--text-dim); padding-left:1.25em; margin:0 0 1em; }
li{ margin-bottom:.5em; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

/* ===== Typography helpers ===== */
.mono{ font-family:var(--font-mono); }
.kicker{
  font-family:var(--font-mono); font-size:.72rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-2); margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.kicker::before{ content:""; width:14px; height:1px; background:var(--accent); display:inline-block; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:14px 26px; border-radius:var(--radius-sm); font-weight:600; font-size:.92rem;
  font-family:var(--font-display);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn-primary{ background:var(--accent); color:#05131C; }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 14px 30px -10px rgba(31,182,255,.5); background:var(--accent-2); }
.btn-secondary{ background:transparent; color:var(--text); border-color:var(--border-strong); }
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent-2); }
.btn-ghost{ background:transparent; color:var(--text-dim); border-color:var(--border); }
.btn-ghost:hover{ color:var(--text); border-color:var(--border-strong); }
.btn-block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

/* ===== Header / Nav ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,11,14,.85);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.scroll-progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:0%;
  background:var(--accent); box-shadow:0 0 8px var(--accent-line);
  transition:width .1s linear; z-index:2;
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand img{ height:38px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:2px; flex:1; justify-content:center; font-family:var(--font-mono); }
.nav-links a{
  padding:9px 14px; border-radius:var(--radius-sm); font-size:.82rem; font-weight:500; color:var(--text-dim);
  letter-spacing:.02em; display:inline-block;
  transition:background .15s ease, color .15s ease, transform .15s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ background:var(--surface-2); color:var(--accent-2); }
.nav-links a:hover{ transform:translateY(-2px) scale(1.05); }
.nav-cta{ flex-shrink:0; display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; background:none; border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:8px 10px; color:var(--text); }
@media (max-width: 880px){
  .nav-links{ display:none; }
  .nav-cta .btn-secondary{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .mobile-menu.open{ display:flex; }
}
.mobile-menu{
  display:none; flex-direction:column; gap:2px; padding:10px 24px 20px;
  border-top:1px solid var(--border); background:var(--bg-alt); font-family:var(--font-mono);
}
.mobile-menu a{ padding:12px 6px; border-bottom:1px solid var(--border); color:var(--text-dim); font-size:.88rem; }
.mobile-menu a:last-child{ border-bottom:none; }

/* ===== Hero ===== */
.hero{ padding:88px 0 72px; border-bottom:1px solid var(--border); position:relative; overflow:hidden; }
.hero.center{ text-align:center; }
.hero-mark{
  position:absolute; top:-18%; left:-9%; width:560px; max-width:60vw; opacity:.07;
  pointer-events:none; z-index:0; user-select:none;
}
.hero-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:56px; align-items:center; position:relative; z-index:1; }
@media (max-width: 980px){ .hero-grid{ grid-template-columns:1fr; gap:48px; } }
.hero h1{ font-size:clamp(2.4rem, 5vw, 4.2rem); max-width:760px; }
.hero.center h1{ margin-left:auto; margin-right:auto; }
.hero .lead{ font-size:1.15rem; max-width:600px; color:var(--text-dim); }
.hero.center .lead{ margin-left:auto; margin-right:auto; }
.badge-row{ display:flex; flex-wrap:wrap; gap:0; margin-top:32px; color:var(--text-faint); font-size:.78rem; font-family:var(--font-mono); border-top:1px solid var(--border); padding-top:18px; }
.badge-row.center{ justify-content:center; }
.badge-row span{ padding:6px 18px 6px 0; margin-right:18px; border-right:1px solid var(--border); }
.badge-row span:last-child{ border-right:none; }

/* ===== Signature detail: pipeline status panel ===== */
.pulse-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 24px 20px;
}
.pulse-head{
  display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin-bottom:20px;
}
.pulse-head .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); flex-shrink:0; }
.pulse-head .pulse-live{ margin-left:auto; color:var(--accent-2); }
.pulse-track{ display:flex; flex-direction:column; }
.pulse-node{ display:flex; align-items:center; gap:14px; padding:10px 0; position:relative; }
.pulse-node .n{
  font-family:var(--font-mono); font-size:.72rem; color:var(--text-faint); width:26px; height:26px; flex-shrink:0;
  border:1px solid var(--border-strong); border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--bg); z-index:1; transition:border-color .3s ease, background .3s ease, color .3s ease;
}
.pulse-node .l{
  font-size:.92rem; color:var(--text-dim); display:inline-block; transform-origin:left center;
  transition:color .3s ease, font-weight .3s ease, font-size .35s var(--ease);
}
.pulse-node.done .n{ border-color:var(--accent); color:var(--accent-2); }
.pulse-node.done .l{ color:var(--text); }
.pulse-node.active .n{
  border-color:var(--accent); background:var(--accent); color:#05131C;
  transform:scale(1.08); transition:border-color .3s ease, background .3s ease, color .3s ease, transform .35s var(--ease);
}
.pulse-node.active .l{ color:var(--accent-2); font-weight:650; font-size:1.02rem; }
.pulse-node.active .n{ animation:pulseGlow 2.2s ease-in-out infinite, popIn .5s var(--ease); }
.pulse-node.active .l{ animation:popIn .5s var(--ease); }
/* Ends back at scale(1) so there's no snap once the entry bounce finishes;
   the lasting emphasis comes from the color/weight/font-size change above,
   this keyframe is just a light entrance nudge on top of it. */
@keyframes popIn{ 0%{ transform:scale(1); } 45%{ transform:scale(1.1); } 100%{ transform:scale(1); } }
.pulse-line{ width:1px; height:20px; background:var(--border-strong); margin-left:13px; transition:background .3s ease; }
.pulse-line.done{
  background:repeating-linear-gradient(180deg, var(--accent) 0 3px, transparent 3px 9px);
  background-size:100% 18px; animation:flowDown .6s linear infinite;
}
@keyframes flowDown{ from{ background-position:0 0; } to{ background-position:0 18px; } }
@media (prefers-reduced-motion: reduce){
  html:not([data-motion="on"]) .pulse-line.done{ animation:none; background:var(--accent-line); }
}
.pulse-foot{ margin-top:16px; padding-top:16px; border-top:1px solid var(--border); font-size:.82rem; color:var(--text-faint); }
@keyframes pulseGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(31,182,255,.5); }
  50%{ box-shadow:0 0 0 6px rgba(31,182,255,0); }
}
@media (prefers-reduced-motion: reduce){
  html:not([data-motion="on"]) .pulse-node.active .n,
  html:not([data-motion="on"]) .pulse-node.active .l{ animation:none; }
}

/* ===== Marquee ===== */
.marquee-wrap{
  border-bottom:1px solid var(--border); overflow:hidden; background:var(--bg-alt);
  padding:20px 0;
}
.marquee{ display:flex; width:max-content; animation:marquee 34s linear infinite; }
.marquee span{
  font-family:var(--font-mono); font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); padding:0 28px; white-space:nowrap; border-right:1px solid var(--border);
  display:inline-block; transition:transform .2s var(--ease), color .2s ease;
}
.marquee span:hover{ transform:scale(1.15); color:var(--accent); }
.marquee span em{ color:var(--accent-2); font-style:normal; }
/* Track is exactly two identical copies of the word list back to back, so a
   -50% shift lines the second copy up perfectly where the first started,
   with no visible seam or jump when the loop repeats. */
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ html:not([data-motion="on"]) .marquee{ animation:none; } }
.marquee-wrap:hover .marquee{ animation-play-state:paused; }

/* ===== Sections ===== */
section{ padding:96px 0; border-bottom:1px solid var(--border); }
section:last-of-type{ border-bottom:none; }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.7rem, 3vw, 2.4rem); }
.divider{ height:1px; background:var(--border); border:none; margin:0; }

/* ===== Numbered editorial list (replaces 3-card rows) ===== */
.edit-list{ list-style:none; padding:0; margin:0; border-top:1px solid var(--border); }
.edit-list li{
  display:grid; grid-template-columns:80px 1fr; gap:24px; padding:32px 0;
  border-bottom:1px solid var(--border); margin:0; transition:background .25s ease;
}
.edit-list li:hover{ background:var(--surface); }
.edit-list .el-num{
  font-family:var(--font-mono); font-size:.85rem; color:var(--accent-2); padding-top:.2em;
  display:inline-block; transition:transform .25s var(--ease), color .25s ease;
}
.edit-list li:hover .el-num{ transform:scale(1.3); color:var(--accent); }
.edit-list h3{
  font-size:1.2rem; margin-bottom:8px; transform-origin:left top;
  transition:transform .25s var(--ease), color .2s ease;
}
.edit-list li:hover h3{ transform:scale(1.06); color:var(--accent-2); }
.edit-list p{ margin:0; max-width:560px; }
@media (max-width: 640px){ .edit-list li{ grid-template-columns:40px 1fr; } }

/* ===== Stage track: horizontal on desktop, connected vertical stack below 860px =====
   Connectors are real flex items (like .pulse-line elsewhere on the page), not
   pseudo-elements overlapping into the next card, so they can never get clipped
   by an adjacent card's opaque background. */
.stage-flow{ display:flex; align-items:stretch; gap:0; margin-top:8px; }
.stage-flow-node{
  flex:1 1 0; min-width:180px; border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 20px; position:relative; background:var(--surface);
}
.stage-flow-node .tag{
  font-family:var(--font-mono); font-size:.72rem; color:var(--accent-2); letter-spacing:.08em;
  display:inline-block; transform-origin:left center; transition:transform .25s var(--ease);
}
.stage-flow-node h3{
  font-size:1rem; margin:10px 0 6px; transform-origin:left top;
  transition:transform .25s var(--ease), color .2s ease;
}
.stage-flow-node p{ font-size:.88rem; margin:0; }
.stage-flow-node:hover .tag{ transform:scale(1.2); }
.stage-flow-node:hover h3{ transform:scale(1.07); color:var(--accent-2); }
.stage-connector{
  flex:0 0 32px; display:flex; align-items:center; justify-content:center;
  color:var(--accent-2); font-family:var(--font-mono); font-size:1rem;
}
.stage-connector::before{ content:"→"; display:inline-block; animation:arrowNudge 1.8s ease-in-out infinite; }
@keyframes arrowNudge{ 0%,100%{ transform:translateX(0); opacity:.55; } 50%{ transform:translateX(4px); opacity:1; } }
@media (prefers-reduced-motion: reduce){
  html:not([data-motion="on"]) .stage-connector::before{ animation:none; opacity:.8; }
}
/* Below this width, four 180px+ cards no longer fit without scrolling sideways
   (which reads badly on touch), so stack them as a connected vertical track
   instead, matching the .step-list / .edit-list pattern used elsewhere. */
@media (max-width: 860px){
  .stage-flow{ flex-direction:column; }
  .stage-flow-node{ min-width:0; }
  .stage-connector{ flex-basis:32px; }
  .stage-connector::before{ content:"↓"; animation:arrowNudgeDown 1.8s ease-in-out infinite; }
}
@keyframes arrowNudgeDown{ 0%,100%{ transform:translateY(0); opacity:.55; } 50%{ transform:translateY(4px); opacity:1; } }
@media (max-width: 860px) and (prefers-reduced-motion: reduce){
  html:not([data-motion="on"]) .stage-connector::before{ animation:none; opacity:.8; }
}

/* ===== Cards (used sparingly now: spec panels, not grids of identical icons) ===== */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; transition:border-color .18s ease, background .18s ease;
}
.card:hover{ border-color:var(--border-strong); background:var(--surface-2); }
.card h3{ font-size:1.05rem; margin-bottom:8px; }
.card p{ margin-bottom:0; font-size:.95rem; }

/* Generic reusable label + arrow-link, not scoped to .card so they work in
   edit-list rows, spec panels, or anywhere else a page needs them. */
.tag{
  font-family:var(--font-mono); display:inline-block; font-size:.68rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); margin-bottom:10px;
  transition:transform .2s var(--ease);
}
.card:hover .tag, .spec-panel:hover .tag, li:hover .tag{ transform:scale(1.1); }
.card-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:.9rem;
  color:var(--accent-2); font-weight:600; transition:color .15s ease, transform .15s var(--ease);
}
.card-link:hover{ color:var(--accent); transform:translateX(4px); }

.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width: 900px){ .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px){ .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; } }

.pill-list{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{ font-family:var(--font-mono); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 14px; font-size:.8rem; color:var(--text-dim); }

/* ===== Vertical numbered steps (spec list, not cards) ===== */
.step-list{ border-top:1px solid var(--border); }
.step{
  display:grid; grid-template-columns:64px 1fr; gap:20px; align-items:start; padding:26px 0;
  border-bottom:1px solid var(--border); transition:background .25s ease;
}
.step:hover{ background:var(--surface); }
.step .num{
  font-family:var(--font-mono); font-size:.85rem; color:var(--text-faint); padding-top:.15em;
  display:inline-block; transition:transform .25s var(--ease), color .25s ease;
}
.step:hover .num{ transform:scale(1.35); color:var(--accent-2); }
.step h4{
  font-size:1.02rem; margin-bottom:4px; display:inline-block; transform-origin:left center;
  transition:transform .2s var(--ease);
}
.step:hover h4{ transform:scale(1.06); }
.step p{ font-size:.92rem; margin-bottom:0; }

.checklist{ list-style:none; padding-left:0; }
.checklist li{ display:flex; gap:10px; align-items:flex-start; color:var(--text-dim); font-size:.92rem; }
.checklist li::before{ content:"→"; font-family:var(--font-mono); color:var(--accent-2); font-weight:600; flex-shrink:0; }

/* Pipeline stage chips (used in copy contexts, e.g. case study) */
.stage-track{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.stage-chip{ font-family:var(--font-mono); background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:7px 12px; font-size:.78rem; color:var(--text-dim); }
.stage-arrow{ color:var(--text-faint); align-self:center; }

/* ===== Spec panel (pricing, case study aside) ===== */
.spec-panel{
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius); padding:36px;
}
.spec-panel .amount{
  font-family:var(--font-mono); font-size:2.8rem; font-weight:500; letter-spacing:-0.02em; color:var(--text);
  display:inline-block; transition:transform .25s var(--ease), color .25s ease;
}
.spec-panel:hover .amount{ transform:scale(1.05); color:var(--accent-2); }
.spec-panel .amount small{ font-size:1rem; color:var(--text-faint); font-weight:400; font-family:var(--font-display); }
.spec-panel .sub{ color:var(--text-faint); font-size:.85rem; margin-top:-6px; margin-bottom:20px; font-family:var(--font-mono); }

/* ===== CTA band ===== */
.cta-band{
  background:
    repeating-linear-gradient(90deg, transparent 0 79px, var(--border) 79px 80px),
    var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--radius); padding:64px 48px; text-align:center;
}
.cta-band h2{
  font-size:clamp(1.6rem,3vw,2.2rem); max-width:640px; margin:0 auto .5em;
  display:inline-block; transition:transform .3s var(--ease);
}
.cta-band:hover h2{ transform:scale(1.03); }
.cta-band p{ max-width:560px; margin:0 auto 28px; }
.cta-band .btn-row{ justify-content:center; }

/* ===== Table ===== */
.data-table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.data-table th,.data-table td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--border); color:var(--text-dim); }
.data-table th{ color:var(--text); font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-sm); }
.table-wrap .data-table{ min-width:520px; }

/* ===== Article ===== */
.article-meta{ font-family:var(--font-mono); color:var(--text-faint); font-size:.8rem; margin-bottom:28px; }
.article-body h2{ font-size:1.4rem; margin-top:2em; }
.article-body h3{ font-size:1.15rem; margin-top:1.6em; }
.article-body p, .article-body li{ font-size:1rem; }
.quick-answer{
  background:var(--surface); border:1px solid var(--border-strong); border-left:2px solid var(--accent);
  border-radius:var(--radius-sm); padding:20px 22px; margin:24px 0;
}
.quick-answer .kicker{ margin-bottom:6px; }
.byline{ display:flex; align-items:center; gap:10px; color:var(--text-faint); font-size:.85rem; font-family:var(--font-mono); }
.toc{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:18px 20px; margin:24px 0; }
.toc .kicker{ margin-bottom:10px; }
.toc ul{ margin:0; padding-left:1.1em; }
.toc a{ color:var(--text-dim); }
.toc a:hover{ color:var(--accent-2); }

/* ===== FAQ ===== */
.faq-item{ border-bottom:1px solid var(--border); padding:20px 0; }
.faq-item summary{
  cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between;
  align-items:center; gap:12px; transition:color .2s ease;
}
.faq-item summary:hover{ color:var(--accent-2); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-family:var(--font-mono); color:var(--accent-2); font-size:1.2rem; flex-shrink:0;
  display:inline-block; transition:transform .25s var(--ease);
}
.faq-item summary:hover::after{ transform:scale(1.3) rotate(90deg); }
.faq-item[open] summary::after{ content:"–"; }
.faq-item[open] summary:hover::after{ transform:scale(1.3) rotate(0deg); }
.faq-item .faq-a{ margin-top:10px; }

/* ===== Footer ===== */
.site-footer{ border-top:1px solid var(--border); padding:64px 0 28px; margin-top:0; }
.footer-top{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; margin-bottom:48px; }
@media (max-width: 880px){ .footer-top{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .footer-top{ grid-template-columns:1fr; } }
.footer-brand p{ font-size:.9rem; max-width:280px; }
.footer-col h4{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-faint); margin-bottom:16px; font-weight:500; }
.footer-col a{
  display:block; color:var(--text-dim); font-size:.9rem; padding:5px 0;
  transition:color .15s ease, transform .15s var(--ease);
}
.footer-col a:hover{ color:var(--accent-2); transform:translateX(5px) scale(1.03); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:24px; border-top:1px solid var(--border); color:var(--text-faint); font-size:.8rem; font-family:var(--font-mono); }

/* ===== Misc ===== */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.disclosure{ font-size:.85rem; color:var(--text-faint); background:var(--surface); border:1px dashed var(--border-strong); border-radius:var(--radius-sm); padding:16px 18px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
@media (max-width: 820px){ .two-col{ grid-template-columns:1fr; } }
.icon-circle{ width:40px;height:40px;border:1px solid var(--border-strong);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;margin-bottom:14px;font-family:var(--font-mono);color:var(--accent-2); }
.related-grid a.card{ display:block; }
.error-page{ min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:80px 24px; }
.error-page .code{ font-family:var(--font-mono); font-size:5rem; font-weight:500; color:var(--accent); letter-spacing:-.02em; }

/* ===== Motion / reveal ===== */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html:not([data-motion="on"]) .reveal{ opacity:1; transform:none; transition:none; }
}

/* Stagger sibling reveals inside a shared group so items arrive in sequence */
.edit-list li:nth-child(1),.stage-flow-node:nth-child(1),.step:nth-child(1){ transition-delay:0s; }
.edit-list li:nth-child(2),.stage-flow-node:nth-child(2),.step:nth-child(2){ transition-delay:.1s; }
.edit-list li:nth-child(3),.stage-flow-node:nth-child(3),.step:nth-child(3){ transition-delay:.2s; }
.edit-list li:nth-child(4),.stage-flow-node:nth-child(4),.step:nth-child(4){ transition-delay:.3s; }

/* Cursor-reactive glow on panels: a soft accent light that follows the pointer */
.glow-hover{ position:relative; isolation:isolate; }
.glow-hover::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), var(--accent-soft), transparent 70%);
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.glow-hover:hover::before{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  html:not([data-motion="on"]) .glow-hover::before{ transition:none; }
}

/* Scroll-linked drift on the hero watermark, applied via JS transform */
.hero-mark{ transition:transform .2s linear; will-change:transform; }
@media (prefers-reduced-motion: reduce){
  html:not([data-motion="on"]) .hero-mark{ transition:none; }
}

/* Count-up number readout */
.amount .count{ font-variant-numeric:tabular-nums; }

/* ===== Explicit motion toggle =====
   The inline bootstrap script in <head> always sets data-motion to "on" by
   default for every visitor, regardless of the system's prefers-reduced-motion
   setting, and only switches to "reduced" once someone explicitly clicks the
   footer toggle (saved in localStorage). This block is what forces every
   motion effect off in that explicit case, overriding the plain CSS rules
   below even though the browser may not be reporting a system preference for
   less motion. The @media blocks above cover the flip side: a visitor who
   both prefers reduced motion at the OS level AND explicitly re-enables
   animations here still gets full motion, since data-motion="on" suppresses
   those @media rules via their :not([data-motion="on"]) qualifier. */
html[data-motion="reduced"] .pulse-line.done{ animation:none; background:var(--accent-line); }
html[data-motion="reduced"] .pulse-node.active .n,
html[data-motion="reduced"] .pulse-node.active .l{ animation:none; }
html[data-motion="reduced"] .marquee{ animation:none; }
html[data-motion="reduced"] .stage-connector::before{ animation:none; opacity:.8; }
html[data-motion="reduced"] .reveal{ opacity:1; transform:none; transition:none; }
html[data-motion="reduced"] .glow-hover::before{ transition:none; }
html[data-motion="reduced"] .hero-mark{ transition:none; }

.motion-toggle{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.02em;
  color:var(--text-faint); background:transparent; border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:7px 14px; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.motion-toggle:hover{ color:var(--accent-2); border-color:var(--border-strong); }