:root{
  --bg:#fbfaf7;--ink:#14161a;--mut:#5f6570;--line:#e7e4dc;--card:#ffffff;
  --acc:#ff5a5f;--acc-ink:#fff;--acc-soft:#fff0ef;--ok:#16a34a;--wa:#25d366;
  --bubble-in:#f1efe9;--bubble-out:#14161a;--bubble-out-ink:#fff;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#0f1012;--ink:#f3f2ee;--mut:#a3a7ae;--line:#26282d;--card:#17191c;
  --acc-soft:#2a1516;--bubble-in:#22252a;--bubble-out:#f3f2ee;--bubble-out-ink:#111;}
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.01em}
.logo{width:22px;height:22px;border-radius:7px;background:var(--acc);box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--acc) 60%,#fff)}
.btn{display:inline-block;background:var(--acc);color:var(--acc-ink);text-decoration:none;font-weight:600;border-radius:12px;padding:14px 20px;border:2px solid var(--acc);text-align:center}
.btn.small{padding:8px 14px;font-size:14px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.wa{background:var(--wa);border-color:var(--wa);color:#06220f}
.hero{padding:72px 0 48px}
.kicker{color:var(--acc);font-weight:600;font-size:14px;margin-bottom:14px}
h1{font-size:clamp(32px,6vw,56px);line-height:1.05;letter-spacing:-.03em;font-weight:800;max-width:15ch}
.lead{font-size:clamp(17px,2.2vw,20px);color:var(--mut);max-width:60ch;margin-top:18px}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
h2{font-size:clamp(26px,4vw,36px);letter-spacing:-.02em;line-height:1.15;font-weight:800}
.muted{color:var(--mut);margin-top:6px}
section{padding:56px 0}
.demo .wrap{display:grid;grid-template-columns:1fr;gap:18px}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{font:600 14px Inter,system-ui,sans-serif;background:var(--card);color:var(--ink);border:2px solid var(--line);border-radius:999px;padding:9px 14px;cursor:pointer}
.tab.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.phone{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;max-width:520px;box-shadow:0 20px 50px -30px rgba(0,0,0,.35)}
.phone-top{padding:14px 18px;border-bottom:1px solid var(--line);font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px}
.dotg{width:9px;height:9px;border-radius:50%;background:var(--ok)}
.chat{padding:18px;display:flex;flex-direction:column;gap:10px;min-height:340px}
.b{max-width:82%;padding:10px 14px;border-radius:16px;font-size:15px;animation:pop .3s ease both}
.b small{display:block;font-size:11px;opacity:.6;margin-bottom:3px;font-weight:600}
.b.in{background:var(--bubble-in);align-self:flex-start;border-bottom-left-radius:5px}
.b.out{background:var(--bubble-out);color:var(--bubble-out-ink);align-self:flex-end;border-bottom-right-radius:5px}
.b.sys{align-self:center;background:var(--acc-soft);color:var(--acc);font-size:13px;font-weight:600;border-radius:999px;padding:6px 12px;max-width:100%}
.typing{align-self:flex-end;display:flex;gap:4px;padding:12px 14px;background:var(--bubble-out);border-radius:16px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--bubble-out-ink);opacity:.5;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:1}}
.side{max-width:520px;font-size:14px;color:var(--mut)}
.side b{color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:24px}
.f{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px}
.f h3{font-size:17px;margin:12px 0 6px}
.f p{color:var(--mut);font-size:15px}
.ic{width:38px;height:38px;border-radius:12px}
.c1{background:#ff5a5f}.c2{background:#f59e0b}.c3{background:#10b981}.c4{background:#6366f1}.c5{background:#0ea5e9}.c6{background:#14161a}
@media (prefers-color-scheme: dark){.c6{background:#f3f2ee}}
.steps{list-style:none;display:grid;gap:14px;margin-top:24px}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px}
.steps b{width:44px;height:44px;border-radius:12px;background:var(--acc-soft);color:var(--acc);display:grid;place-items:center;font-size:18px}
.steps h3{font-size:17px;margin-bottom:4px}
.steps p{color:var(--mut)}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px;display:grid;grid-template-columns:64px 1fr;gap:18px}
.avatar{width:64px;height:64px;border-radius:18px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-weight:800;font-size:20px}
.card p{color:var(--mut);margin-top:10px}
.proof{display:flex;flex-wrap:wrap;gap:8px}
.proof span{font-size:13px;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:5px 10px}
.link{display:inline-block;margin-top:14px;font-weight:600;color:var(--acc)}
.contact{background:var(--ink);color:var(--bg)}
.contact .lead{color:color-mix(in srgb,var(--bg) 70%,var(--ink))}
.contact .btn.ghost{color:var(--bg);border-color:color-mix(in srgb,var(--bg) 30%,var(--ink))}
.contact .muted{color:color-mix(in srgb,var(--bg) 60%,var(--ink))}
.small-t{font-size:14px;margin-top:18px}
.foot{padding:28px 0;font-size:13px;color:var(--mut);border-top:1px solid var(--line)}
.foot p+p{margin-top:4px}
@media (min-width:860px){.demo .wrap{grid-template-columns:1fr 1fr;align-items:start}.demo .wrap>h2,.demo .wrap>.muted,.demo .tabs{grid-column:1/-1}.side{padding-top:10px}}
@media (max-width:520px){.card{grid-template-columns:1fr}.hero{padding-top:44px}.btn{width:100%}.top .btn{width:auto}}