/* PanelBill marketing site — design system
   Palette rationale: dark ink ground (technical, serious, differentiates from
   the sea of white-background SaaS sites); teal as primary brand color (trust +
   precision, but far less saturated-corporate than the blue every competitor in
   this category already uses — WHMCS, Blesta and HostBill all brand in blue);
   a single warm amber accent reserved ONLY for primary actions, so the one
   color that means "click this" is never used for anything else on the page.
   No external fonts, no external requests beyond the Turnstile widget itself —
   the site practices the "minimize access" principle it's selling. */

:root {
  --ink-950: #0a0e12;
  --ink-900: #0e1318;
  --ink-800: #141b21;
  --ink-700: #1b232b;
  --line: #24303a;
  --line-soft: #1a232b;

  --text-1: #eef4f7;
  --text-2: #a9bac5;
  --text-3: #71838f;

  --teal-300: #7fe6d4;
  --teal-400: #4dd6bd;
  --teal-500: #26bfa3;
  --teal-600: #1a9686;
  --teal-glow: rgba(38, 191, 163, 0.16);

  --amber-400: #f5b752;
  --amber-500: #ee9d2b;
  --amber-600: #d4831a;

  --danger: #e8735f;
  --ok: #4dd6bd;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  --container: 1120px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink-950);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 15% -10%, var(--teal-glow), transparent 60%),
    radial-gradient(700px 400px at 100% 10%, rgba(238, 157, 43, 0.06), transparent 55%);
}

img, svg { max-width: 100%; display: block; }
a { color: var(--teal-300); text-decoration: none; }
a:hover { color: var(--teal-400); }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

/* ---------- nav ---------- */
header.site {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 14, 18, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--text-1); }
.brand .mark { width: 22px; height: 22px; flex: none; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { color: var(--text-2); font-size: 14.5px; font-weight: 500; }
.nav-links a:hover { color: var(--text-1); }
.nav-cta {
  background: var(--teal-500); color: var(--ink-950) !important; font-weight: 700;
  padding: 9px 16px; border-radius: var(--radius-s); font-size: 14px;
}
.nav-cta:hover { background: var(--teal-400); }

/* ---------- hero ---------- */
.hero { padding: 96px 0 72px; position: relative; overflow: hidden; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.06em;
  color: var(--teal-300); background: rgba(38,191,163,0.08);
  border: 1px solid rgba(38,191,163,0.25); padding: 6px 12px; border-radius: 999px;
  margin-bottom: 24px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-400); box-shadow: 0 0 0 3px rgba(38,191,163,0.2); }

h1 {
  font-size: clamp(34px, 5vw, 56px); line-height: 1.08; letter-spacing: -0.02em;
  font-weight: 700; margin: 0 0 22px; max-width: 20ch; color: var(--text-1);
}
h1 .accent { color: var(--teal-300); }
.lede { font-size: 19px; color: var(--text-2); max-width: 56ch; margin: 0 0 36px; }

.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.hero-art { position: relative; }

.cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--radius-s); font-weight: 700; font-size: 15px;
  border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, background .15s ease;
}
.btn-primary { background: var(--amber-500); color: #1a1204; }
.btn-primary:hover { background: var(--amber-400); transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text-1); }
.btn-ghost:hover { border-color: var(--teal-500); color: var(--teal-300); }
.btn-block { width: 100%; justify-content: center; }
.microcopy { font-size: 13px; color: var(--text-3); margin-top: 12px; }

/* ---------- proof strip ---------- */
.strip { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 22px 0; }
.strip .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.strip-item { display: flex; align-items: baseline; gap: 8px; color: var(--text-3); font-size: 13.5px; }
.strip-item b { color: var(--text-1); font-size: 14px; }

/* ---------- sections ---------- */
section { padding: 88px 0; position: relative; }
.section-head { max-width: 640px; margin: 0 0 48px; }
.kicker { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em; color: var(--amber-500); text-transform: uppercase; margin-bottom: 12px; display: block; }
h2 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.015em; margin: 0 0 14px; color: var(--text-1); }
.section-head p { color: var(--text-2); font-size: 17px; margin: 0; }

/* problem grid */
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.problem-card {
  background: var(--ink-900); border: 1px solid var(--line-soft); border-radius: var(--radius-l);
  padding: 26px; position: relative;
}
.problem-card .tag {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--danger);
  border: 1px solid rgba(232,115,95,0.35); background: rgba(232,115,95,0.08);
  padding: 3px 9px; border-radius: 999px; display: inline-block; margin-bottom: 14px;
}
.problem-card h3 { font-size: 17px; margin: 0 0 8px; color: var(--text-1); }
.problem-card p { font-size: 14.5px; color: var(--text-2); margin: 0; }
.problem-card cite { display: block; margin-top: 14px; font-size: 12.5px; color: var(--text-3); font-style: normal; }

/* pillars */
.pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-l); overflow: hidden; }
.pillar { background: var(--ink-900); padding: 30px 22px; }
.pillar .icon { width: 30px; height: 30px; margin-bottom: 18px; color: var(--teal-400); }
.pillar h3 { font-size: 15.5px; margin: 0 0 10px; color: var(--text-1); }
.pillar p { font-size: 13.5px; color: var(--text-2); margin: 0; line-height: 1.55; }

/* ai section */
.ai-section { background: var(--ink-900); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ai-copy { color: var(--text-2); font-size: 16px; }
.stat-row { display: flex; gap: 28px; margin-top: 28px; flex-wrap: wrap; }
.stat b { display: block; font-size: 28px; color: var(--teal-300); letter-spacing: -0.02em; }
.stat span { font-size: 13px; color: var(--text-3); }

/* comparison */
.table-scroll { overflow-x: auto; }
table.compare { width: 100%; border-collapse: collapse; background: var(--ink-900); border: 1px solid var(--line-soft); border-radius: var(--radius-l); overflow: hidden; }
table.compare th, table.compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
table.compare th { color: var(--text-3); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--ink-800); }
table.compare td:first-child { color: var(--text-2); }
table.compare tr:last-child td { border-bottom: none; }
table.compare td.yes { color: var(--teal-300); font-weight: 600; }
table.compare td.no { color: var(--text-3); }
.compare-col-us { background: rgba(38,191,163,0.05); }

/* signup */
.signup {
  background: linear-gradient(160deg, var(--ink-900), var(--ink-950));
  border: 1px solid var(--line-soft); border-radius: var(--radius-l);
  padding: 56px; text-align: center;
}
.signup h2 { margin-bottom: 10px; }
.signup p.lede2 { color: var(--text-2); max-width: 52ch; margin: 0 auto 32px; font-size: 16px; }
.signup-form { max-width: 440px; margin: 0 auto; }
.field-row { display: flex; gap: 10px; margin-bottom: 6px; }
input[type=email] {
  flex: 1; background: var(--ink-800); border: 1px solid var(--line); color: var(--text-1);
  padding: 13px 16px; border-radius: var(--radius-s); font-size: 15px; font-family: var(--font-body);
}
input[type=email]:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px var(--teal-glow); }

.field { margin-bottom: 16px; text-align: left; }
.field label { display: block; font-size: 13px; color: var(--text-3); margin-bottom: 6px; font-weight: 600; }
.field input[type=text], .field input[type=email], .field select, .field textarea {
  width: 100%; background: var(--ink-800); border: 1px solid var(--line); color: var(--text-1);
  padding: 12px 14px; border-radius: var(--radius-s); font-size: 15px; font-family: var(--font-body);
}
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2371838f'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%2371838f' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px var(--teal-glow); }
.field-hint { font-size: 12.5px; color: var(--text-3); margin-top: 6px; }
.field-optional { color: var(--text-3); font-weight: 400; }
.contact-form { max-width: 520px; margin-top: 32px; }
.turnstile-wrap-left { justify-content: flex-start; }
.field-hint-below { margin-top: 20px; }
.turnstile-wrap { display: flex; justify-content: center; margin: 16px 0; min-height: 65px; }
.form-msg { font-size: 13.5px; margin-top: 12px; min-height: 18px; }
.form-msg.ok { color: var(--teal-300); }
.form-msg.err { color: var(--danger); }
.role-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.role-chip {
  font-size: 12.5px; color: var(--text-3); border: 1px solid var(--line); padding: 5px 12px; border-radius: 999px;
  cursor: pointer; background: transparent; font-family: var(--font-body);
}
.role-chip.active, .role-chip:hover { color: var(--teal-300); border-color: var(--teal-500); }

/* footer */
footer { border-top: 1px solid var(--line-soft); padding: 48px 0 32px; }
.footer-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer-brand p { color: var(--text-3); font-size: 13.5px; max-width: 34ch; margin: 12px 0 0; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); margin: 0 0 14px; }
.footer-col a { display: block; color: var(--text-2); font-size: 14px; margin-bottom: 10px; }
.footer-col a:hover { color: var(--teal-300); }
.footer-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; color: var(--text-3); font-size: 13px; flex-wrap: wrap; gap: 12px; }

/* ---------- legal pages ---------- */
.legal-hero { padding: 64px 0 8px; }
.legal-hero h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 8px; max-width: none; }
.legal-updated { font-family: var(--font-mono); font-size: 13px; color: var(--text-3); }
.legal-body { padding: 40px 0 96px; }
.legal-body .wrap { max-width: 760px; }
.legal-body h2 { font-size: 20px; margin: 40px 0 12px; color: var(--text-1); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { color: var(--text-2); font-size: 15.5px; margin: 0 0 14px; }
.legal-body ul { color: var(--text-2); font-size: 15.5px; margin: 0 0 14px; padding-left: 22px; }
.legal-body li { margin-bottom: 8px; }
.legal-body strong { color: var(--text-1); }
.legal-note {
  background: var(--ink-900); border: 1px solid var(--line-soft); border-left: 3px solid var(--teal-500);
  border-radius: var(--radius-s); padding: 16px 20px; margin: 24px 0; font-size: 14.5px; color: var(--text-2);
}
.consent-note { font-size: 12.5px; color: var(--text-3); margin-top: 14px; }
.consent-note a { color: var(--text-3); text-decoration: underline; }
.consent-note a:hover { color: var(--teal-300); }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 380px; margin: 0 auto 8px; }
  .problem-grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .ai-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .signup { padding: 36px 22px; }
  .field-row { flex-direction: column; }
  table.compare { font-size: 13px; }
}