/* BestAgent — minimal self-contained landing styles (no external assets, no web fonts,
   no trackers: the pages must render with the strictest CSP and offline). */
:root{
  --bg:#0b0c10; --panel:#121319; --ink:#e9eaf0; --muted:#9aa0ad;
  --line:#22242e; --accent:#39c2a3; --accent2:#4d8bff; --radius:14px;
  --wrap:820px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
header.nav{display:flex; align-items:center; justify-content:space-between; padding:22px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); font-size:18px}
.dot{width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2))}
.nav nav a{color:var(--muted); margin-left:18px; font-size:14px}

.hero{padding:64px 0 40px}
.hero h1{font-size:44px; line-height:1.1; margin:0 0 16px; letter-spacing:-.02em}
.hero h1 .grad{background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.lede{font-size:19px; color:var(--muted); max-width:640px; margin:0 0 28px}
.cta{display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; font-weight:600; padding:13px 22px; border-radius:var(--radius)}
.cta:hover{opacity:.92; text-decoration:none}
.cta.sub{background:transparent; color:var(--ink); border:1px solid var(--line); margin-left:10px}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:40px 0}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.card h3{margin:0 0 8px; font-size:16px}
.card p{margin:0; color:var(--muted); font-size:14px}

section.block{border-top:1px solid var(--line); padding:40px 0}
section.block h2{font-size:22px; margin:0 0 14px}
.skills{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.tag{background:var(--panel); border:1px solid var(--line); color:var(--muted); font-size:13px; padding:6px 12px; border-radius:999px}

/* legal pages */
.legal{padding:40px 0 20px}
.legal h1{font-size:30px; margin:0 0 6px}
.legal .eff{color:var(--muted); font-size:14px; margin:0 0 26px}
.legal h2{font-size:18px; margin:30px 0 8px}
.legal p,.legal li{color:#cfd3dd}
.legal ul{padding-left:20px}
.legal .back{display:inline-block; margin-bottom:20px; color:var(--muted); font-size:14px}

footer{border-top:1px solid var(--line); padding:26px 0; color:var(--muted); font-size:13px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}
footer a{color:var(--muted)}

@media (max-width:680px){
  .hero h1{font-size:34px}
  .grid{grid-template-columns:1fr}
  .nav nav a{margin-left:12px}
}

/* support page */
.faq{border-top:1px solid var(--line); padding:22px 0}
.faq:last-of-type{border-bottom:1px solid var(--line)}
.faq h3{margin:0 0 6px; font-size:16px}
.faq p{margin:0; color:var(--muted)}
.contact{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin:26px 0}
.contact p{margin:0 0 6px}
.contact p:last-child{margin:0}