/* ══════════════════════════════════════════════════════════════════════
   developers.css — Developer guide page styles
   Requires base.css loaded first.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Hero (split) ──────────────────────────────────────────────────── */
.hero{position:relative;z-index:1;width:100%;padding:120px 0 72px;background:var(--bg);
  animation:fadeUp .8s ease both;overflow:hidden}
.hero-split{max-width:1104px;margin:0 auto;padding:0 48px;
  display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.hero-text{display:flex;flex-direction:column}
.hero-badge{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:2px;
  color:var(--text-3);font-weight:500;text-transform:uppercase;margin-bottom:16px}
.hero-title{font-size:48px;font-weight:800;line-height:1.08;letter-spacing:-2.5px;margin-bottom:20px}
.hero-sub{font-size:16px;color:var(--text-2);line-height:1.7;margin-bottom:32px;max-width:440px}
.hero-ctas{display:flex;gap:12px}
.hero-code{min-width:0}

/* ── Steps ─────────────────────────────────────────────────────────── */
.steps{display:flex;flex-direction:column;gap:48px}
.step{display:grid;grid-template-columns:48px 1fr;gap:24px}
.step-num{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:700;
  color:var(--text-3);width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border)}
.step-content{min-width:0}
.step-title{font-size:18px;font-weight:700;letter-spacing:-0.5px;margin-bottom:8px}
.step-desc{font-size:14px;color:var(--text-2);line-height:1.6;margin-bottom:16px}

/* ── Operator reference ───────────────────────────────────────────── */
.op-ref{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border);border:1px solid var(--border)}
.op-ref-item{display:flex;justify-content:space-between;align-items:center;background:var(--bg);
  padding:10px 16px;font-size:13px}
.op-ref-item code{font-size:12px;font-weight:500}
.op-ref-item span{color:var(--text-3);font-size:12px}

/* ── Pillars ──────────────────────────────────────────────────────── */
.pillar-endpoints{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.pillar-endpoints code{font-size:11px;display:block;padding:4px 8px;width:fit-content}

/* ── Lang tabs ─────────────────────────────────────────────────────── */
.lang-tabs{display:flex;gap:0;border:1px solid var(--border);width:fit-content;margin-bottom:0}
.lang-tab{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.5px;
  padding:10px 20px;border:none;background:none;color:var(--text-3);cursor:pointer;transition:all .15s}
.lang-tab+.lang-tab{border-left:1px solid var(--border)}
.lang-tab.active{color:var(--text);background:var(--surface-alt)}
.lang-tab:hover{color:var(--text)}
.lang-panel{display:none}
.lang-panel.active{display:block}

/* ── MCP tools ─────────────────────────────────────────────────────── */
.mcp-tool-name{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;
  color:var(--text);margin-bottom:4px}
.mcp-tool-desc{font-size:13px;color:var(--text-2)}

/* ── Connect cards ─────────────────────────────────────────────────── */
.connect-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);margin-top:24px}
.connect-card{background:var(--bg);padding:24px;display:flex;gap:16px;align-items:flex-start;
  transition:background .15s}
.connect-card:hover{background:var(--surface-alt)}
.connect-icon{flex-shrink:0;color:var(--text-3);padding-top:2px}
.connect-name{font-size:14px;font-weight:600;margin-bottom:4px}
.connect-steps{font-size:13px;color:var(--text-2);line-height:1.6;margin:0}
.connect-steps code{font-size:11px}

/* ── Terminal color helpers ───────────────────────────────────────── */
.t3{color:var(--text-3)}
.tc-b{color:var(--blue,#60a5fa)}
.tc-a{color:var(--amber,#fbbf24)}
.tc-g{color:var(--green,#34d399)}
.tc-r{color:var(--red,#f87171)}

/* ── CTA ───────────────────────────────────────────────────────────── */
.cta-inner{text-align:center;display:flex;flex-direction:column;align-items:center;
  padding-top:48px;padding-bottom:48px}
.cta-h{font-size:36px;font-weight:800;letter-spacing:-1.5px;margin-bottom:12px}
.cta-sub{font-size:16px;color:var(--text-2);margin-bottom:36px;line-height:1.6}
.cta-actions{display:flex;gap:12px}

/* ── Responsive ────────────────────────────────────────────────────── */
@media(max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:32px}
  .hero-code{order:2}
  .connect-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .hero{padding:96px 0 48px}
  .hero-split{padding:0 24px}
  .hero-title{font-size:36px;letter-spacing:-1.5px}
  .step{grid-template-columns:36px 1fr;gap:16px}
  .step-num{width:36px;height:36px;font-size:18px}
  .lang-tabs{flex-wrap:wrap}
  .card-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .hero{padding:72px 0 40px}
  .hero-split{padding:0 20px}
  .hero-title{font-size:30px;letter-spacing:-1.2px}
  .hero-ctas{flex-direction:column;width:100%;max-width:320px}
  .card-grid{grid-template-columns:1fr}
  .cta-h{font-size:28px}
  .cta-actions{flex-direction:column;width:100%;max-width:320px}
}