:root { --ink:#14213d; --muted:#5b6475; --bg:#f7f8fb; --card:#fff; --accent:#2563eb; --line:#e3e6ee; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--accent); }
.wrap { max-width:880px; margin:0 auto; padding:0 20px; }
header { background:var(--card); border-bottom:1px solid var(--line); }
header .wrap { display:flex; justify-content:space-between; align-items:center; height:64px; }
.brand { font-weight:700; font-size:1.15rem; color:var(--ink); text-decoration:none; }
nav a { margin-left:20px; color:var(--muted); text-decoration:none; font-size:.95rem; }
.hero { padding:64px 0 40px; }
.hero h1 { font-size:2.4rem; line-height:1.15; margin:0 0 16px; }
.hero p { font-size:1.15rem; color:var(--muted); max-width:640px; }
.btn { display:inline-block; margin-top:12px; padding:12px 22px; background:var(--accent); color:#fff; border-radius:8px; text-decoration:none; font-weight:600; }
section { padding:32px 0; }
h2 { font-size:1.5rem; margin:0 0 16px; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; }
.card h3 { margin:0 0 6px; font-size:1.05rem; }
.sms { background:#e8f0fe; border-radius:16px; padding:14px 18px; max-width:460px; color:#10233f; }
.muted { color:var(--muted); }
article { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:28px; margin:32px 0; }
article h1 { margin-top:0; }
footer { border-top:1px solid var(--line); padding:28px 0 40px; margin-top:40px; color:var(--muted); font-size:.92rem; }
footer a { margin-right:16px; }
.chat { max-width:460px; display:flex; flex-direction:column; gap:8px; margin:8px 0 12px; }
.bubble { padding:10px 14px; border-radius:16px; max-width:85%; }
.bubble.biz { background:#e8f0fe; color:#10233f; align-self:flex-start; border-bottom-left-radius:4px; }
.bubble.cust { background:var(--accent); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.alert { max-width:460px; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:8px; padding:12px 16px; font-size:.95rem; }