/* ===== ArcumAI · technical page (loads after styles.css) ===== */

/* compact doc hero */
.doc-hero{padding:clamp(40px,6vw,72px) 0 26px}
.doc-hero .h2{margin-bottom:18px}
.doc-hero__lead{font-size:clamp(16px,1.6vw,18px);color:#C6D6D8;max-width:62ch}
.doc-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.tag{font:600 12px var(--font-mono);letter-spacing:.04em;color:var(--green-br);
  border:1px solid var(--line-green);background:rgba(127,215,162,.06);
  padding:6px 12px;border-radius:999px}

/* section intro */
.doc-h{margin:0 0 10px}
.doc-sub{color:var(--muted);max-width:64ch;margin:0 0 32px}

/* feature list (two columns, compact) */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;list-style:none;margin:0;padding:0}
.feat li{padding-left:26px;position:relative;color:#C6D6D8;font-size:15px}
.feat li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:11px;border-radius:3px;
  background:linear-gradient(135deg,var(--green-br),var(--green));box-shadow:0 0 10px rgba(127,215,162,.5)}
.feat b{color:var(--white);font-weight:600}

/* ===== architecture diagram (pure CSS) ===== */
.arch{border:1px solid var(--line-green);border-radius:20px;padding:26px 22px;
  background:linear-gradient(180deg,rgba(20,56,64,.7),rgba(11,33,39,.7)),
    repeating-linear-gradient(0deg,transparent 0 23px,rgba(127,215,162,.04) 23px 24px),
    repeating-linear-gradient(90deg,transparent 0 23px,rgba(127,215,162,.04) 23px 24px);
  box-shadow:inset 0 0 60px rgba(86,190,132,.05)}
.layer{}
.layer__label{font:600 11px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--green-br);margin:0 0 12px}
.layer__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.box{flex:1 1 200px;max-width:340px;border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.box h4{margin:0 0 3px;font:700 15px var(--font-sans);color:var(--white)}
.box span{font:500 12.5px var(--font-mono);color:var(--muted)}
.box--brand{border-color:var(--line-green);background:rgba(127,215,162,.07)}
.box--brand h4{color:var(--green-br)}

/* engine chips inside the backend layer */
.engines{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.engine{font:600 13px var(--font-sans);color:var(--silver);border:1px solid var(--line-green);
  background:rgba(127,215,162,.06);border-radius:10px;padding:9px 13px;display:flex;flex-direction:column;gap:2px;align-items:center}
.engine small{font:500 10.5px var(--font-mono);color:var(--muted);letter-spacing:.03em}
.backend{border:1px dashed var(--line-green);border-radius:14px;padding:16px;margin-top:4px;
  background:rgba(86,190,132,.04)}
.backend__cap{font:600 12px var(--font-mono);color:var(--green-br);letter-spacing:.06em;text-align:center;margin-bottom:6px}

/* vertical connector with protocol label */
.conn{display:flex;flex-direction:column;align-items:center;gap:6px;margin:14px 0}
.conn__line{width:2px;height:26px;border-radius:2px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(127,215,162,.2),rgba(127,215,162,.55),rgba(127,215,162,.2))}
.conn__line::after{content:"";position:absolute;left:-1px;width:4px;height:8px;border-radius:2px;
  background:var(--green-br);box-shadow:0 0 8px 1px rgba(127,215,162,.8);animation:down 2.4s linear infinite}
@keyframes down{0%{top:-8px;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:26px;opacity:0}}
.conn__tag{font:600 11px var(--font-mono);color:var(--muted);letter-spacing:.04em}

/* data-flow (numbered vertical steps) */
.dflow{list-style:none;counter-reset:d;margin:0;padding:0;display:grid;gap:12px}
.dflow li{counter-increment:d;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:rgba(11,33,39,.5)}
.dflow li::before{content:counter(d,decimal-leading-zero);font:800 14px var(--font-mono);color:#06231a;
  background:linear-gradient(180deg,var(--green-br),var(--green));width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center}
.dflow p{margin:0;color:#C6D6D8;font-size:15px}
.dflow b{color:var(--white)}

/* code blocks */
.code{margin:0 0 16px;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:#0b2127}
.code__bar{display:flex;align-items:center;gap:7px;padding:9px 14px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02)}
.code__bar span{width:11px;height:11px;border-radius:50%;background:#2c4f57}
.code__bar em{margin-left:8px;font:600 12px var(--font-mono);color:var(--muted);font-style:normal;letter-spacing:.04em}
.code pre{margin:0;padding:16px 18px;overflow-x:auto}
.code code{font:500 13.5px/1.7 var(--font-mono);color:#D7E6E4;white-space:pre}
.code .c{color:var(--muted)}        /* comment */
.code .g{color:var(--green-br)}     /* command / emphasis */

/* tree */
.tree{border:1px solid var(--line);border-radius:12px;background:#0b2127;padding:16px 18px;overflow-x:auto}
.tree pre{margin:0}
.tree code{font:500 13px/1.65 var(--font-mono);color:#C6D6D8;white-space:pre}
.tree .d{color:var(--green-br)}     /* dir name */
.tree .c{color:var(--muted)}        /* comment */

/* config table */
.tbl{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tbl th,.tbl td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14.5px}
.tbl thead th{font:600 12px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--green-br);
  background:rgba(127,215,162,.05)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl code{font:600 13px var(--font-mono);color:var(--white);background:rgba(127,215,162,.1);
  padding:2px 7px;border-radius:6px}
.tbl td:last-child{color:var(--muted)}

/* profiles */
.profiles{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}

/* security list */
.sec{display:grid;grid-template-columns:1fr 1fr;gap:14px;list-style:none;margin:0;padding:0}
.sec li{padding:16px 18px 16px 46px;position:relative;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.02);color:var(--muted);font-size:14.5px}
.sec li::before{content:"";position:absolute;left:16px;top:17px;width:18px;height:20px;
  background:var(--green);-webkit-mask:var(--shield) center/contain no-repeat;mask:var(--shield) center/contain no-repeat}
.sec b{color:var(--white);font-weight:600}
:root{--shield:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 L20 5 V11 C20 16 16.5 19.5 12 21 C7.5 19.5 4 16 4 11 V5 Z" fill="black"/></svg>')}

/* back-to-site bar */
.docnav .nav__menu a:not(.btn){color:var(--muted)}
.home-link{font:600 14px var(--font-sans);color:var(--green-br)!important}

@media (max-width:760px){
  .feat,.profiles,.sec{grid-template-columns:1fr}
}