:root {
  --bg: #ffffff;       /* page background: white */
  --panel: #f9f9f9;    /* light gray panels */
  --card: #ffffff;     /* cards: white */
  --ink: #000000;      /* main text: black */
  --muted: #555555;    /* muted gray */
  --accent: #000000;   /* use black as the only accent */
  --accent-2: #222222; /* secondary dark gray */
  --line: rgba(0,0,0,0.1); /* light dividers */
  --shadow: 0 2px 6px rgba(0,0,0,0.08); /* neutral soft shadow */
  --radius: 8px;
}

/* Global */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

/* Layout helpers */
.container { width: min(1120px, 92vw); margin: 0 auto; }
.section { padding: 80px 0; }
.row { display:flex; gap:24px; }
.space-between { justify-content: space-between; }
.center { align-items: center; }
.wrap { flex-wrap: wrap; }
.grid-2 { display:grid; grid-template-columns: 1.2fr 1fr; gap:36px; }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }

@media (max-width: 980px){
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .menu { display:none; }
}

.stack { display:flex; flex-direction:column; }
.gap-12 { gap:12px; }
.gap-16 { gap:16px; }
.gap-20 { gap:20px; }
.gap-36 { gap:36px; }

/* Typography */
h1 { font-size: clamp(32px, 5vw, 48px); line-height:1.15; margin:0 0 10px; }
h2 { font-size: clamp(24px, 4vw, 32px); margin:0 0 16px; }
h3 { font-size: 20px; margin:0 0 8px; }
h4 { margin:0 0 6px; }
.lead { font-size: clamp(16px, 2.2vw, 18px); color: var(--muted); max-width: 48ch; }
.muted { color: var(--muted); }
.tiny { font-size:12px; }

/* Force all accent text to black */
.accent { color: #000 !important; }

/* Buttons & pills */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:999px; background: #000; /* hard black */
  color:#fff; font-weight:700; text-decoration:none; border:1px solid transparent;
  box-shadow: var(--shadow);
  transition: background .12s ease;
}
.btn:hover { background: #222; }
.btn--ghost {
  background: transparent; color: #000; border:1px solid var(--line);
  box-shadow: none;
}
.btn--sm { padding:8px 14px; font-size:14px; }

.badge {
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#f7f7f7; color: var(--ink); border:1px solid var(--line);
  font-size:12px;
}
.pill { display:inline-flex; align-items:center; gap:8px; padding:4px 10px; border-radius:999px; font-size:12px; border:1px solid var(--line); }
/* Neutralize previous green style */
.pill--green { background: #efefef; color: #555; }

/* Nav (remove any translucent/gradient look) */
.nav {
  position: sticky; top:0; z-index:100;
  background: #fff !important; /* ensure no gradient */
  border-bottom:1px solid var(--line);
  backdrop-filter: none;
}
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color: var(--ink); font-weight:800; letter-spacing:.2px; }
.brand-icon { font-size:20px; }
.menu a { color: var(--ink); text-decoration:none; margin:0 10px; opacity:.9; }
.menu .btn { margin-left: 10px; background:#000; color:#fff; }

/* Hero */
.hero { padding-top: 96px; }
.hero-card .card,
.contact .card { background: #fff !important; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card { padding:18px; border-radius:var(--radius); background: var(--card); border:1px solid var(--line); box-shadow: var(--shadow); }
.card-head { justify-content:space-between; margin-bottom:8px; }
/* Console shown on the right in the hero */
.console { background: #f7f7f7 !important; border:1px solid var(--line); border-radius:12px; padding:14px; min-height: 160px; }
.bubble { padding:10px 12px; border-radius:10px; margin:8px 0; font-size:14px; max-width: 620px; color: var(--ink); }
.bubble--in { background: #f2f2f2; }
.bubble--out { background: #e9e9e9; }
.bubble--sys { background: #efefef; }
.hero .badges { margin-top: 6px; }

/* Logos */
.logos .logo {
  padding:10px 14px; border:1px dashed var(--line); border-radius:10px; font-size:13px; color: var(--muted);
}

/* Split section */
.split .card--ghost { background:transparent; border:1px dashed var(--line); }

/* Feature grid */
.feature-grid .feature {
  background: var(--panel); border:1px solid var(--line); border-radius: var(--radius);
  padding:18px; min-height: 170px; box-shadow: var(--shadow);
}
.ficon { font-size:20px; margin-bottom:6px; }

/* How it works */
.how .steps { margin-top: 10px; }
.step { background: #fff; border:1px solid var(--line); border-radius: var(--radius); padding:18px; box-shadow: var(--shadow); }
.step-num {
  width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background: #000; color:#fff; font-weight:800; margin-bottom:8px;
}

/* Pricing */
.pricing .price-card {
  background: #fff; border:1px solid var(--line); border-radius: var(--radius);
  padding:22px; text-align:left; box-shadow: var(--shadow); position:relative;
}
.pricing .price-card--primary { border-color: #000; outline:2px solid rgba(0,0,0,.12); }
.price { font-size:28px; font-weight:800; margin:8px 0 12px; }
.price span { font-size:14px; font-weight:600; color: var(--muted); }

/* FAQ */
.faq details {
  background: #fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:12px;
}
.faq summary { cursor:pointer; font-weight:700; }
.faq p { margin:10px 0 0; color: var(--muted); }

/* Contact */
.hp { position:absolute; left:-9999px; }
.field { margin-bottom:12px; }
label { display:block; font-weight:700; margin-bottom:6px; }
input, textarea {
  width:100%; padding:12px 12px; border-radius:10px; border:1px solid var(--line);
  background:#fff; color: var(--ink);
}
input::placeholder, textarea::placeholder { color:#999; }

/* Footer */
.footer { border-top:1px solid var(--line); padding: 28px 0; background: #f9f9f9; }