/* ------------------------------------------------------------------
   Conselit brand system — light & professional
   Shared across index.html and agentic.html.
   Change a color or font here and it updates everywhere.
------------------------------------------------------------------ */
:root{
  color-scheme: light;

  /* Colors */
  --bg:        #ffffff;
  --bg-soft:   #f6f7f9;
  --ink:       #12161d;
  --ink-2:     #384150;
  --muted:     #5b6472;
  --line:      #e6e8ee;
  --accent:    #1657d0;   /* primary blue */
  --accent-2:  #123f97;   /* darker blue for hover */
  --accent-soft:#eaf0fc;  /* light blue tint */
  --amber:     #b9761a;   /* warm accent for the loop engine */
  --amber-soft:#fbf1e2;

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Shape */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(18,22,29,.04), 0 12px 30px rgba(18,22,29,.06);
  --shadow-lg: 0 24px 60px rgba(18,22,29,.10);

  /* Layout */
  --maxw: 1080px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a{color: var(--accent); text-decoration: none}
a:hover{color: var(--accent-2); text-decoration: underline}

.container{max-width: var(--maxw); margin: 0 auto; padding: 0 24px}
.container-narrow{max-width: 760px; margin: 0 auto; padding: 0 24px}

/* Site header / nav */
.site-header{
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .bar{
  max-width: var(--maxw); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; letter-spacing:-.01em; color:var(--ink)}
.brand:hover{text-decoration:none; color:var(--ink)}
.brand .dot{width:10px; height:10px; border-radius:3px; background:linear-gradient(135deg,var(--accent),var(--amber))}
.site-nav{display:flex; gap:22px; align-items:center}
.site-nav a{color:var(--ink-2); font-size:14.5px; font-weight:500}
.site-nav a:hover{color:var(--accent); text-decoration:none}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:inherit; font-size:14.5px; font-weight:600; line-height:1;
  padding:12px 18px; border-radius:var(--radius-sm); cursor:pointer;
  border:1px solid transparent; transition:background .15s, border-color .15s, transform .12s;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-2); color:#fff}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:#c9cfdb; color:var(--ink)}

/* Small helpers */
.eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700}
.muted{color:var(--muted)}

/* Footer */
.site-footer{
  border-top:1px solid var(--line); margin-top:80px;
  color:var(--muted); font-size:13.5px;
}
.site-footer .bar{max-width:var(--maxw); margin:0 auto; padding:26px 24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--accent)}