/* Design tokens */
:root{
  --paper:#FCFBF9;          /* background */
  --ink:#12161A;            /* text */
  --brand:#004A2E;          /* primary */
  --accent:#FF8800;         /* accent */
  --line:#E6E8EB;           /* dividers */
  --muted:#7A828A;          /* secondary text */
  --card:#FFFFFF;           /* surfaces */
  --radius:12px;
}
[data-theme="dark"]{
  --paper:#0E1216;
  --ink:#E6E8EB;
  --card:#12161A;
  --line:#20262C;
  --muted:#9AA3AC;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Layout */
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.pad{padding-top:24px;padding-bottom:48px}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}

/* Header */
.sitebar{
  position:sticky;top:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:12px 24px;border-bottom:1px solid var(--line);background:var(--paper)
}
.sitebar .brand{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:var(--line)}
.sitebar nav{display:flex;gap:16px;align-items:center}
.sitebar nav.open{display:flex}
.icon-btn{font-size:18px;border:1px solid var(--line);background:transparent;border-radius:10px;padding:6px 10px;cursor:pointer}

/* Typography */
.h1{font-size:44px;line-height:1.05;margin:0}
.lede{font-size:18px;color:var(--muted);max-width:720px}

/* Buttons and chips */
.btn{display:inline-block;background:var(--brand);color:#fff;padding:10px 16px;border:none;border-radius:10px;font-weight:600;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.chip{display:inline-block;border:1px solid var(--line);background:var(--card);padding:6px 10px;border-radius:999px;font-size:12px;color:var(--brand);cursor:pointer}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.chip.sticky{position:sticky;top:12px}

/* Demo surface (chat) */
.demo-surface{
  margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  display:grid;grid-template-rows:auto 1fr auto;min-height:460px
}
.demo-header{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid var(--line)}
.kpi{background:color-mix(in oklab,var(--brand) 6%, var(--card));border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:grid}
.kpi-label{font-size:11px;color:var(--muted)}
.kpi-value{font-size:20px;font-weight:700}

.stream{padding:12px;display:grid;gap:12px;overflow:auto}
.msg{display:grid;grid-template-columns:40px 1fr;gap:10px}
.avatar{width:40px;height:40px;display:grid;place-items:center;border-radius:8px;background:var(--line);font-weight:700}
.bubble{background:color-mix(in oklab,var(--brand) 6%, var(--card));border:1px solid var(--line);padding:10px 12px;border-radius:10px}
.msg.ai .bubble{border-color:color-mix(in oklab,var(--brand) 30%, var(--line))}

.composer{border-top:1px solid var(--line);padding:10px;background:var(--paper);display:grid;gap:8px}
.composer textarea{width:100%;resize:none;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card);color:var(--ink)}
.composer-actions{display:flex;gap:8px;justify-content:flex-end}

/* Sections */
.hero{padding:24px 0;display:grid;gap:12px}
.faq{margin-top:40px}
.faq details{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card);margin-bottom:10px}

/* Forms */
.lead-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lead-form input[type="email"]{flex:1 min(320px);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.form-ok{font-size:12px;color:var(--brand)}

/* Footer */
.footer{border-top:1px solid var(--line);color:var(--muted);padding:16px 0;margin-top:48px}

/* Responsive */
@media(max-width:900px){
  .grid.cols-3{grid-template-columns:1fr}
  .h1{font-size:36px}
  .sitebar nav{display:none}
  .sitebar nav.open{display:flex;position:absolute;top:56px;right:16px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;flex-direction:column;gap:10px}
}