:root{--bg:#fdf3ec;--peach:#ffd8c2;--mint:#c9f0dd;--ink:#2b2230;--mut:#7a6c80;--accent:#ff6b4a;--me:#5b4bdb}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 Nunito,sans-serif;
  background-image:radial-gradient(circle at 10% 10%,var(--peach) 0,transparent 35%),radial-gradient(circle at 90% 90%,var(--mint) 0,transparent 35%);min-height:100vh}
a{color:var(--me)}
.page{max-width:1160px;margin:0 auto;padding:32px 16px;display:grid;grid-template-columns:1fr 440px;gap:56px;align-items:start}
.logo{font-weight:900;font-size:20px;text-decoration:none;color:var(--ink)}
h1{font-weight:900;font-size:clamp(32px,4.6vw,56px);line-height:1.05;letter-spacing:-.02em;margin:48px 0 20px}
h1 span{background:var(--accent);color:#fff;padding:0 .2em;border-radius:.3em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.left>p{font-size:19px;color:var(--mut);max-width:48ch}
.all{margin-top:32px;display:flex;flex-direction:column;gap:10px;max-width:420px}
.all b{font-weight:800}
.all a{background:#fff;border-radius:16px;padding:14px 18px;text-decoration:none;color:var(--ink);font-weight:700;box-shadow:0 2px 0 rgba(43,34,48,.08);transition:transform .15s}
.all a:hover{transform:translateX(6px)}
footer{margin-top:56px;font-size:13px;color:var(--mut)}
footer p{margin:4px 0}
.right{position:sticky;top:24px}
.phone{background:#fff;border-radius:34px;box-shadow:0 30px 60px -20px rgba(43,34,48,.3);border:8px solid var(--ink);height:min(720px,calc(100vh - 48px));display:flex;flex-direction:column;overflow:hidden}
.bar{display:flex;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid #f0e8e2}
.bar small{display:block;color:#27ae60;font-size:12px}
.ava{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:900}
.feed{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:#faf7f4}
.msg{display:flex;animation:pop .25s ease-out}
.msg.me{justify-content:flex-end}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}}
.bubble{max-width:82%;padding:10px 14px;border-radius:18px 18px 18px 4px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.me .bubble{background:var(--me);color:#fff;border-radius:18px 18px 4px 18px}
.typing{display:flex;gap:4px;padding:14px}.typing i{width:7px;height:7px;border-radius:50%;background:#bbb;animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-4px);background:var(--accent)}}
.card{background:#fff;border-radius:18px;padding:14px 16px;max-width:90%;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.card ul{margin:8px 0 0;padding:0;list-style:none}.card li{padding:3px 0;font-size:15px}
.job{border:2px solid var(--accent)}
.tag{font-size:12px;font-weight:800;color:var(--accent)}
.job b{display:block;font-size:18px;font-weight:900;margin:4px 0}
.job p{margin:6px 0;font-size:14px;color:var(--mut)}
.job .pay{color:var(--ink);font-weight:700}
.go{display:block;text-align:center;background:var(--accent);color:#fff;font-weight:900;text-decoration:none;padding:12px;border-radius:12px;margin-top:10px}
.replies{display:flex;flex-wrap:wrap;gap:8px;padding:12px;border-top:1px solid #f0e8e2;min-height:62px}
.replies button{font:inherit;font-weight:700;border:2px solid var(--me);color:var(--me);background:#fff;border-radius:99px;padding:7px 14px;cursor:pointer}
.replies button:hover{background:var(--me);color:#fff}
.replies .alt{border-color:#ddd;color:var(--mut)}
.wait{color:#ccc;padding:8px}
@media(max-width:900px){.page{grid-template-columns:1fr}.right{position:static}.phone{height:620px}h1{margin-top:28px}}