:root{
  --bg:#0b0b10;
  --surface:#11121a;
  --muted:#151826;
  --text:#e9e9f0;
  --text-dim:#b8b9c6;
  --primary:#5b2bc4;
  --primary-600:#6b3bdb;
  --primary-700:#4a20a8;
  --wa:#25D366;
  --ok:#10b981;
  --warn:#f59e0b;
  --err:#ef4444;
  --card:#161827;
  --ring: rgba(91,43,196,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#0e0f16 0%, #0b0b10 100%);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{
  width:min(1120px, 92%);
  margin-inline:auto;
}

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,16,.7);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:700;
}
.main-nav{ display:flex; align-items:center; gap:20px; }
.main-nav a{
  color:var(--text-dim); text-decoration:none; font-weight:600; font-size:14px; padding:8px 10px; border-radius:8px;
}
.main-nav a:hover{ color:var(--text); background:rgba(255,255,255,.05); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 16px; border-radius:12px; font-weight:700; text-decoration:none;
  border:1px solid transparent; transition:.2s ease;
}
.btn-primary{ background:linear-gradient(180deg,var(--primary),var(--primary-700)); color:white; box-shadow:0 10px 25px rgba(91,43,196,.35); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(91,43,196,.45); }
.btn-light{ background:rgba(255,255,255,.08); color:#fff; }
.btn-light:hover{ background:rgba(255,255,255,.12); }
.btn-outline{ border-color:rgba(255,255,255,.18); color:var(--text); }
.btn-outline:hover{ background:rgba(255,255,255,.06); }
.btn-wa{ background:var(--wa); color:#073b18; }
.btn-wa:hover{ filter:brightness(1.05); }

.hero{
  padding:64px 0 30px;
  background:
    radial-gradient(1200px 400px at 50% -10%, rgba(91,43,196,.25), transparent 60%),
    radial-gradient(600px 600px at 90% 10%, rgba(91,43,196,.15), transparent 60%),
    radial-gradient(600px 600px at 10% 10%, rgba(91,43,196,.15), transparent 60%);
}
.badges{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px; font-size:12px;
  color:#dcd8ff; background:rgba(91,43,196,.18); border:1px solid rgba(91,43,196,.35);
}
.badge.alt{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.12); }

h1{
  font-size: clamp(32px, 5vw, 56px);
  line-height:1.05; margin:10px 0 10px;
  letter-spacing:-.02em;
}
.gradient{
  background:linear-gradient(90deg,#c084fc, #60a5fa, #a78bfa);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.subtitle{ color:var(--text-dim); font-size:18px; max-width:820px; }
.ctas{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }

.integrations{ display:flex; gap:12px; margin:28px 0 10px; flex-wrap:wrap; }
.chip{
  display:inline-flex; gap:8px; align-items:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  padding:8px 12px; border-radius:999px; color:var(--text-dim); font-weight:600;
}

.section{ padding:64px 0; }
.section.muted{ background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.0)); }
.section-head{ text-align:center; margin-bottom:28px; }
.section-head h2{ margin:8px 0 6px; font-size: clamp(26px, 3.2vw, 36px); }
.section-head p{ color:var(--text-dim); max-width:780px; margin:0 auto; }

.cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
@media (max-width: 900px){
  .cards{ grid-template-columns:1fr; }
}
.card{
  background:var(--card); border:1px solid rgba(255,255,255,.07); border-radius:16px;
  padding:18px; box-shadow: var(--shadow);
}
.icon{ font-size:28px; }
.list{ margin:0; padding:0 0 0 16px; color:var(--text-dim); }

.demo.card{ margin-top:24px; padding:0; overflow:hidden; }
.demo-header{
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.06);
}
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot.red{ background:#ef4444 } .dot.yellow{ background:#f59e0b } .dot.green{ background:#10b981 }

.demo-body{ display:grid; grid-template-columns: 1.1fr 1.4fr; gap:0; }
@media (max-width: 980px){ .demo-body{ grid-template-columns:1fr; } }
.demo-left, .demo-right{ padding:16px; }
.demo-left ul{ list-style:none; margin:0; padding:0; }
.demo-left li{ padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); margin-bottom:8px; }
.status{ font-size:12px; font-weight:800; padding:2px 8px; border-radius:999px; margin-right:8px; color:#0b0b10 }
.status.ai{ background:#a78bfa; }
.status.human{ background:#60a5fa; }

.kanban{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
@media (max-width: 1100px){ .kanban{ grid-template-columns:repeat(3,1fr);} }
@media (max-width: 700px){ .kanban{ grid-template-columns:repeat(2,1fr);} }
.col{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:10px; }
.col h5{ margin:0 0 8px; font-size:13px; color:var(--text-dim) }
.ticket{
  background:var(--surface); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:10px; margin-bottom:8px;
}
.ticket.hot{ border-color:#f59e0b77; box-shadow:0 0 0 2px rgba(245,158,11,.2) inset; }
.ticket.won{ border-color:#10b98177; box-shadow:0 0 0 2px rgba(16,185,129,.2) inset; }

.funnel{
  display:flex; align-items:stretch; justify-content:center; gap:12px; flex-wrap:wrap;
}
.step{
  width:220px; text-align:center; background:var(--card); border:1px solid rgba(255,255,255,.07);
  border-radius:14px; padding:14px; box-shadow:var(--shadow);
}
.step-icon{ font-size:22px; }
.arrow{ align-self:center; opacity:.6 }

.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width: 900px){ .pricing{ grid-template-columns:1fr; } }
.price-card{
  background:var(--card); border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:18px; box-shadow:var(--shadow); position:relative;
}
.price-card .price{ font-size:28px; margin:0 0 8px; }
.price-card.featured{ border-color:var(--ring); box-shadow:0 10px 40px var(--ring); transform:translateY(-2px); }
.price-card .tag{
  position:absolute; top:10px; right:10px; font-size:11px; background:rgba(91,43,196,.25); color:#e7e1ff;
  border:1px solid rgba(91,43,196,.45); padding:3px 8px; border-radius:999px;
}

.form{
  background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; box-shadow:var(--shadow);
}
.grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width: 780px){ .grid{ grid-template-columns:1fr; } }
.field label{ display:block; margin:0 0 6px; font-weight:600; color:#d7d7ea; font-size:14px; }
.field input, .field select{
  width:100%; padding:12px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:#0f111b; color:var(--text);
  outline:none; transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus{ border-color:var(--primary-600); box-shadow:0 0 0 4px var(--ring); }
.field.checkbox{ grid-column:1 / -1; }
.actions{ display:flex; align-items:center; gap:14px; margin-top:12px; }
#form-status{ color:var(--text-dim); font-size:14px; min-height:20px; }

.site-footer{
  border-top:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02);
}
.footer{ display:flex; align-items:center; justify-content:space-between; padding:20px 0; }
.footer .links{ display:flex; gap:14px; }
.footer a{ color:var(--text-dim); text-decoration:none; }
.footer a:hover{ color:var(--text); }

.floating-wa{
  position:fixed; right:18px; bottom:18px; width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; background:#111; border:1px solid rgba(255,255,255,.1); box-shadow:var(--shadow);
}
.floating-wa:hover{ transform:translateY(-1px); }