@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root { --ink:#17201d; --muted:#71807a; --line:#dce6e0; --mint:#dff4e8; --green:#0c8a5a; --dark:#12352d; --paper:#f7faf8; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 14% 10%, #e5f6ec 0, transparent 29%), var(--paper); font-family:'DM Sans',sans-serif; }
.shell { max-width:1160px; min-height:100vh; margin:auto; padding:48px 34px; display:grid; grid-template-columns:1fr 1.05fr; gap:88px; align-items:center; }
.brand-mark { display:flex; gap:10px; align-items:center; font-weight:700; letter-spacing:.06em; font-size:18px; }.brand-dot { width:27px; height:27px; border-radius:50%; background:var(--green); box-shadow:9px 0 0 #b4e8ca; }.accent { color:var(--green); }
.eyebrow { margin:92px 0 18px; color:var(--green); text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:.18em; }.intro h1 { max-width:500px; margin:0; font:600 clamp(39px,5vw,64px)/1.03 'Space Grotesk',sans-serif; letter-spacing:-.055em; }.intro-copy { max-width:430px; margin:27px 0 32px; color:var(--muted); font-size:17px; line-height:1.6; }.trust-list { display:flex; flex-wrap:wrap; gap:12px 20px; color:#547066; font-size:12px; font-weight:600; }
.chat-card { overflow:hidden; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:0 22px 60px #25544014; }.chat-header { height:83px; padding:18px 22px; display:flex; align-items:center; gap:12px; border-bottom:1px solid #edf2ef; }.avatar { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:#fff; background:var(--dark); font-weight:700; }.chat-header strong,.chat-header span { display:block; }.chat-header strong { font-size:14px; }.chat-header span { margin-top:4px; color:var(--muted); font-size:11px; }.chat-header i { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:#2bc47f; }.reset { margin-left:auto; border:0; background:transparent; color:#81928b; font-size:24px; cursor:pointer; }
.messages { min-height:342px; max-height:430px; padding:24px 22px 8px; overflow-y:auto; }.message { max-width:82%; margin-bottom:16px; padding:13px 16px; border-radius:16px 16px 16px 4px; background:#f1f6f3; color:#31463e; font-size:14px; line-height:1.48; animation:rise .25s ease; }.message.user { margin-left:auto; border-radius:16px 16px 4px 16px; color:#fff; background:var(--dark); }.message small { display:block; margin-top:7px; color:#91a39a; font-size:10px; }.message.user small { color:#a6c6b8; }
.choices { display:flex; flex-wrap:wrap; gap:8px; padding:0 22px 12px; }.choice { padding:10px 14px; border:1px solid #c9ded3; border-radius:10px; color:var(--green); background:#fff; font:600 12px 'DM Sans'; cursor:pointer; transition:.2s; }.choice:hover { background:var(--mint); border-color:var(--green); }.free-form { display:flex; gap:9px; padding:14px 22px; border-top:1px solid #edf2ef; }.free-form input { width:100%; border:0; outline:0; color:var(--ink); font:14px 'DM Sans'; }.free-form button { width:35px; height:35px; border:0; border-radius:10px; color:#fff; background:var(--green); font-size:20px; cursor:pointer; }.chat-footer { padding:12px 22px 17px; color:#9aa8a1; font-size:10px; line-height:1.45; background:#fbfdfb; }
@keyframes rise { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@media (max-width:800px) { .shell { grid-template-columns:1fr; gap:38px; padding:28px 17px; align-items:start; }.eyebrow { margin-top:58px; }.intro h1 { font-size:42px; }.intro-copy { font-size:15px; }.chat-card { border-radius:19px; }.messages { min-height:300px; } }