/* ============================================================================
   AgentWeb — shared v2 design system. Single source of truth for the whole site
   (static pages + API-rendered pages). Link with:
     <link rel="stylesheet" href="/agentweb.css">
   Fira Code monospace · off-white · green. Light, clean, "internet for machines".
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&display=swap');

:root{
  --bg:#f7f8f5; --bg-hero:#fcfdfb; --card:#ffffff; --soft:#f0f3ef;
  --border:rgba(15,40,32,0.10); --border-soft:rgba(15,40,32,0.06);
  --green:#0e9f6e; --green-deep:#059669; --teal:#0d9488; --green-fill:#10b981;
  --gold:#c9a227;
  --ink:#0f211b; --body:#3f524b; --muted:#7a8a83; --faint:#9aa8a2;
  --danger:#e0564b;
  --shadow:0 1px 2px rgba(15,40,32,0.04),0 8px 24px -12px rgba(15,40,32,0.12);
  --shadow-hover:0 1px 2px rgba(15,40,32,0.04),0 14px 34px -14px rgba(16,185,129,0.4);
  --mono:"Fira Code",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--mono);background:var(--bg);color:var(--body);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;width:100%}
.narrow{max-width:820px}

/* ---- type ---- */
h1,h2,h3,h4{color:var(--ink);letter-spacing:-0.5px;line-height:1.18;font-weight:700}
h1{font-size:clamp(32px,5vw,56px);letter-spacing:-1.5px}
h2{font-size:clamp(26px,3.4vw,40px);letter-spacing:-1px}
h3{font-size:19px}
h4{font-size:16px}
p{margin:0}
.eyebrow{display:flex;align-items:center;gap:8px;color:var(--green);font-size:12px;
  letter-spacing:2px;text-transform:uppercase;font-weight:600;margin-bottom:14px}
.eyebrow.center{justify-content:center}
.muted{color:var(--muted)} .faint{color:var(--faint)} .ink{color:var(--ink)}
.grn{color:var(--green-deep)} .tl{color:var(--teal)}
code{font-family:var(--mono);background:rgba(16,185,129,0.10);color:var(--green-deep);
  padding:2px 7px;border-radius:6px;font-size:0.92em}

/* ---- nav ---- */
.av-nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(252,253,251,0.8);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-soft)}
.av-nav-in{max-width:1180px;margin:0 auto;padding:15px 28px;display:flex;align-items:center;justify-content:space-between}
.av-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--ink)}
.av-brand:hover{text-decoration:none}
.av-brand svg{width:26px;height:26px}
.av-brand .g{color:var(--green)}
.av-links{display:flex;align-items:center;gap:26px;font-size:14px}
.av-links a{color:var(--muted)}
.av-links a:hover{color:var(--green);text-decoration:none}
.av-cta{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px;
  padding:9px 16px;color:var(--ink);font-size:14px;font-weight:500;background:#fff}
.av-cta:hover{border-color:var(--green);color:var(--green);text-decoration:none}
.av-burger{display:none;background:none;border:0;cursor:pointer;color:var(--ink)}
@media(max-width:820px){.av-links{display:none}.av-links.open{display:flex;position:absolute;top:62px;left:0;right:0;
  flex-direction:column;gap:0;background:var(--bg-hero);border-bottom:1px solid var(--border)}
  .av-links.open a{padding:14px 28px;border-top:1px solid var(--border-soft)}
  .av-burger{display:block}}
body{padding-top:0}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:12px;padding:13px 24px;
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;border:1px solid transparent;
  transition:.18s;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--green-fill);color:#fff;box-shadow:0 8px 22px -10px rgba(16,185,129,.7)}
.btn-primary:hover{background:var(--green-deep);transform:translateY(-1px);color:#fff}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btn-sm{padding:9px 16px;font-size:14px;border-radius:10px}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---- sections ---- */
.section{padding:84px 0;position:relative}
.section.tight{padding:56px 0}
.dotted{background-image:radial-gradient(rgba(15,40,32,0.06) 1px,transparent 1px);background-size:24px 24px}
.sec-head{text-align:center;max-width:680px;margin:0 auto}
.sec-sub{color:var(--muted);max-width:640px;margin:16px auto 0;font-size:15px}

/* ---- cards / grids ---- */
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border-soft);border-radius:16px;padding:26px;
  box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s,transform .2s}
.card.link:hover{border-color:rgba(16,185,129,0.4);box-shadow:var(--shadow-hover);transform:translateY(-2px);text-decoration:none}
.card .ic{width:46px;height:46px;border-radius:12px;background:rgba(16,185,129,0.10);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.card .ic svg{width:24px;height:24px;stroke:var(--green)}
.card h3{margin-bottom:9px}
.card p{font-size:14px;color:var(--muted)}

/* ---- pills / badges ---- */
.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:#fff;
  border-radius:999px;padding:8px 16px;font-size:13.5px;color:var(--ink)}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 11px;font-size:12px;font-weight:600}
.badge-green{background:rgba(16,185,129,0.12);color:var(--green-deep)}
.badge-gold{background:rgba(201,162,39,0.16);color:#947400}
.badge-muted{background:rgba(15,40,32,0.06);color:var(--muted)}

/* ---- stats ---- */
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 54px}
.stat{text-align:center}
.stat .n{font-size:30px;font-weight:700;color:var(--green)}
.stat .l{font-size:12px;letter-spacing:1.5px;color:var(--faint);text-transform:uppercase}

/* ---- code blocks ---- */
.code{position:relative;background:var(--soft);border:1px solid var(--border);border-left:3px solid var(--green);
  border-radius:12px;padding:18px 22px;overflow-x:auto}
.code pre{margin:0;white-space:pre;font-family:var(--mono);font-size:13.5px;color:#1c2a24;line-height:1.8}
.code .cm{color:#8a9a92}.code .k{color:var(--ink);font-weight:500}.code .s{color:var(--green-deep)}
.copy{position:absolute;top:12px;right:12px;background:#fff;border:1px solid var(--border);color:var(--muted);
  border-radius:8px;padding:5px 12px;font-family:inherit;font-size:12px;cursor:pointer}
.copy:hover{color:var(--green);border-color:var(--green)}

/* ---- forms ---- */
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px}
.field .hint{font-size:12px;color:var(--faint);margin-top:6px}
input[type=text],input[type=email],input[type=url],input[type=tel],input[type=number],input[type=search],textarea,select{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--border);border-radius:10px;padding:12px 14px;outline:none;transition:.15s}
input:focus,textarea:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(16,185,129,0.12)}
textarea{min-height:110px;resize:vertical}

/* ---- tables ---- */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;color:var(--faint);font-size:12px;letter-spacing:1px;text-transform:uppercase;
  font-weight:600;padding:12px 14px;border-bottom:1px solid var(--border)}
.table td{padding:13px 14px;border-bottom:1px solid var(--border-soft);color:var(--body)}
.table tr:hover td{background:rgba(16,185,129,0.03)}

/* ---- business profile / field rows ---- */
.kv{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--border-soft)}
.kv .k{flex:0 0 130px;color:var(--faint);font-size:13px}
.kv .v{color:var(--ink);font-size:15px;word-break:break-word}

/* ---- footer ---- */
.av-footer{border-top:1px solid var(--border-soft);background:#fff;padding:34px 28px}
.av-footer-in{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  justify-content:space-between;color:var(--faint);font-size:13px}
.av-footer-in a{color:var(--green)}
.av-footer-in .sep{color:var(--border);padding:0 8px}
.av-status{display:inline-flex;align-items:center;gap:6px}
.av-status .dot{width:8px;height:8px;border-radius:50%;background:var(--faint)}

/* ---- utilities ---- */
.center{text-align:center}
.mt-s{margin-top:14px}.mt-m{margin-top:28px}.mt-l{margin-top:48px}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}