/* ============================================================
   SERVO | How it works
   ============================================================ */
:root {
  --bg: #07100b; --bg-raise: #0b1610; --ink: #e8f2ea; --ink-dim: #93a89a;
  --ink-faint: #5c6f63; --accent: #8cff66; --accent-dim: #8cff6626; --rwa: #2fffa3;
  --amber: #ffd166; --danger: #ff6d5a;
  --line: rgba(255,255,255,0.08); --line-soft: rgba(255,255,255,0.045); --glass: rgba(255,255,255,0.025);
  --font-head: "Space Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --maxw: 860px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-head); font-size: 16px; line-height: 1.65; }
.accent { color: var(--accent); } .rwa { color: var(--rwa); font-weight: 600; }
a { color: var(--accent); }

.grid-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(140,255,102,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(140,255,102,0.022) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, black 40%, transparent 100%); }

.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 16px; padding: 14px 30px;
  background: rgba(7,16,11,0.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); }
.nav .brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.nav .brand img { width: 20px; height: 20px; }
.nav .brand b { font-weight: 700; letter-spacing: 0.05em; font-size: 16px; }
.nav .brand span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; color: var(--ink-dim); }
.nav-right { margin-left: auto; display: flex; gap: 18px; }
.nav-right a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-dim); text-decoration: none; text-transform: uppercase; }
.nav-right a:hover { color: var(--accent); }

.wrap { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 50px 30px 40px; }
.head .tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--accent); }
.head h1 { font-size: clamp(32px, 6vw, 54px); font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.02; margin-top: 8px; }
.lede { font-size: 19px; color: var(--ink-dim); margin-top: 22px; }
.lede b { color: var(--ink); font-weight: 600; }

.sec { margin-top: 64px; }
.sec-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--accent); }
.sec h2 { font-size: clamp(24px, 4vw, 34px); font-weight: 700; margin-top: 10px; letter-spacing: -0.01em; }
.sec > p { color: var(--ink-dim); margin-top: 14px; font-size: 16.5px; }
.sec > p b { color: var(--ink); }

/* numbered steps / blocks */
.steps { margin-top: 26px; display: flex; flex-direction: column; gap: 2px; }
.step { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 22px; border: 1px solid var(--line); background: var(--glass); transition: border-color 0.2s; }
.step + .step { border-top: none; }
.step:hover { border-color: rgba(140,255,102,0.3); }
.step-n { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--accent); }
.step h3 { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.step p { color: var(--ink-dim); font-size: 15px; }
.step p b { color: var(--ink); }

/* flow (loop / rwa) */
.flow { margin-top: 24px; border-left: 2px solid var(--accent); padding-left: 22px; display: flex; flex-direction: column; gap: 20px; }
.flow-item { position: relative; }
.flow-item::before { content: ""; position: absolute; left: -28px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.flow-item .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-faint); }
.flow-item p { font-size: 16px; margin-top: 3px; }
.flow-item p b { color: var(--ink); }

.callout { margin-top: 22px; border: 1px solid var(--line); border-left: 2px solid var(--rwa); background: rgba(47,255,163,0.05); padding: 18px 20px; font-size: 15.5px; color: var(--ink-dim); }
.callout b { color: var(--ink); } .callout .k { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; color: var(--rwa); margin-bottom: 6px; }

.tldr { margin-top: 64px; border: 1px solid var(--line); background: linear-gradient(160deg, var(--bg-raise), var(--bg)); padding: 30px; }
.tldr .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); }
.tldr p { font-size: 17px; margin-top: 12px; }
.tldr p b { color: var(--ink); font-weight: 600; }

.ctas { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-block; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 12px 20px; border: 1px solid transparent; transition: all 0.18s; }
.btn-accent { background: var(--accent); color: #06110a; } .btn-accent:hover { box-shadow: 0 0 20px var(--accent-dim); }
.btn-ghost { border-color: var(--line); color: var(--ink); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.foot { position: relative; z-index: 1; border-top: 1px solid var(--line-soft); padding: 26px 30px; margin-top: 50px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-faint); text-align: center; }

@media (max-width: 560px) { .step { grid-template-columns: 1fr; gap: 8px; } .wrap { padding: 36px 18px 30px; } }