/* valAI Platform — Tesla-clean design system.
   Monochrome: white / light-gray / near-black. No gradients, no colored pills,
   no emoji. Huge whitespace, thin type, hairline borders. Light + dark. */

:root{
  --bg:#ffffff; --bg-2:#f5f5f7; --surface:#ffffff;
  --ink:#1a1a1a; --ink-2:#86868b; --ink-3:#aeaeb2;
  --line:#e5e5e7; --line-2:#efeff1;
  --btn:#1a1a1a; --btn-fg:#ffffff;
  --radius:14px; --radius-sm:8px;
}
:root[data-theme="dark"]{
  --bg:#000000; --bg-2:#0e0e10; --surface:#101012;
  --ink:#f5f5f7; --ink-2:#a1a1a6; --ink-3:#6e6e73;
  --line:#252528; --line-2:#1a1a1d;
  --btn:#ffffff; --btn-fg:#111111;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.55; letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-weight:500; letter-spacing:-0.025em; color:var(--ink); margin:0}
a{color:var(--ink); text-decoration:none}
.container{max-width:1080px; margin:0 auto; padding:0 28px}
.muted{color:var(--ink-2)}

/* top bar */
.topbar{border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:5}
.topbar .row{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{font-weight:600; font-size:16px; letter-spacing:-0.02em}
.brand .dot{color:var(--ink-2); font-weight:400}
.nav a{color:var(--ink-2); font-size:14px; margin-left:26px}
.nav a:hover{color:var(--ink)}
.iconbtn{width:34px;height:34px;border:1px solid var(--line);border-radius:100px;background:transparent;
  color:var(--ink-2);cursor:pointer;font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center;margin-left:20px}
.iconbtn:hover{color:var(--ink);border-color:var(--ink-3)}

/* hero */
.hero{padding:96px 0 84px; text-align:center}
.hero h1{font-size:52px; font-weight:500; line-height:1.05; margin:0 0 18px}
.hero p{color:var(--ink-2); font-size:19px; max-width:540px; margin:0 auto 30px}

/* buttons */
.btn{display:inline-block; background:var(--btn); color:var(--btn-fg); border:1px solid var(--btn);
  padding:11px 26px; border-radius:100px; font-size:14px; font-weight:500; cursor:pointer; transition:opacity .15s}
.btn:hover{opacity:.85}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink-3); opacity:1}
.btn.sm{padding:8px 18px; font-size:13px}

/* cards + grid */
.section{padding:40px 0}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px}
.grid{display:grid; gap:16px}
.g3{grid-template-columns:repeat(3,1fr)} .g6{grid-template-columns:repeat(6,1fr)} .g2{grid-template-columns:1fr 1fr}
@media(max-width:860px){.g6{grid-template-columns:repeat(3,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:1fr}}
@media(max-width:560px){.g6,.g3{grid-template-columns:repeat(2,1fr)}}

/* stats */
.stat .n{font-size:34px; font-weight:500; letter-spacing:-0.03em; line-height:1}
.stat .l{font-size:11px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.08em; margin-top:10px}

/* labels */
.eyebrow{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-2)}
.h-sub{color:var(--ink-2); font-size:13px}

/* tables */
table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; color:var(--ink-2); font-weight:500; font-size:11px; text-transform:uppercase;
  letter-spacing:.07em; padding:14px 14px; border-bottom:1px solid var(--line)}
td{padding:16px 14px; border-bottom:1px solid var(--line-2); color:var(--ink)}
th.n,td.n{text-align:right; font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}
.tag{color:var(--ink-2); font-size:13px}

/* chat */
.chat .log{display:flex; flex-direction:column; gap:10px; margin:8px 0 16px}
.msg{padding:11px 15px; border-radius:16px; max-width:78%; font-size:14.5px; line-height:1.5}
.msg.ai{background:var(--bg-2); color:var(--ink); border-bottom-left-radius:5px}
.msg.me{background:var(--btn); color:var(--btn-fg); align-self:flex-end; border-bottom-right-radius:5px}
.field{width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:10px; font-size:15px;
  background:var(--surface); color:var(--ink); margin:7px 0; font-family:inherit}
.field:focus{outline:none; border-color:var(--ink-3)}
.inrow{display:flex; gap:10px} .inrow .field{flex:1; margin:0}

/* funnel bars — monochrome */
.frow{display:flex; align-items:center; gap:14px; margin:9px 0}
.flabel{width:120px; font-size:13px; color:var(--ink-2)}
.fbar{height:30px; border-radius:6px; background:var(--ink); min-width:30px; display:flex; align-items:center;
  padding:0 10px; color:var(--bg); font-size:12.5px; font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .fbar{background:var(--ink); color:#000}

.empty{color:var(--ink-3); text-align:center; padding:40px 0; font-size:14px}
.foot{color:var(--ink-3); font-size:12px; padding:40px 0; text-align:center}