:root { --ink:#102a33; --teal:#087f78; --mint:#dff4ee; --cream:#f4f1e9; --white:#fff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:Inter,Segoe UI,sans-serif; background:radial-gradient(circle at 10% 10%,#fff 0,transparent 28%),linear-gradient(135deg,#eef6f1,#e7eee9); }
body::before { content:""; position:fixed; inset:0; opacity:.35; pointer-events:none; background-image:linear-gradient(rgba(8,127,120,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(8,127,120,.07) 1px,transparent 1px); background-size:38px 38px; }
.shell { position:relative; width:min(1120px,92vw); min-height:100vh; margin:auto; display:grid; grid-template-columns:1fr 440px; gap:8vw; align-items:center; padding:48px 0; }
.mark { width:56px; height:56px; display:grid; place-items:center; border-radius:16px; color:white; background:var(--teal); font:300 42px/1 Georgia; box-shadow:0 12px 25px #087f7838; }
.eyebrow { margin:28px 0 12px; color:var(--teal); font-size:12px; font-weight:800; letter-spacing:.18em; }
h1 { margin:0; font:600 clamp(42px,5vw,70px)/1.03 Georgia,serif; letter-spacing:-.04em; }
h1 em { color:var(--teal); font-weight:400; }
.lead { max-width:540px; margin:26px 0; color:#50656c; font-size:18px; line-height:1.65; }
.features { display:flex; flex-wrap:wrap; gap:10px; }
.features span { padding:9px 13px; border:1px solid #b9d5cd; border-radius:999px; color:#33545a; font-size:13px; background:#ffffff8a; }
.chat-card { overflow:hidden; min-height:620px; display:flex; flex-direction:column; background:#fff; border:1px solid #d9e4df; border-radius:28px; box-shadow:0 28px 80px #173d3922; }
.chat-card header { display:flex; align-items:center; gap:12px; padding:20px 22px; color:white; background:var(--ink); }
.avatar { width:43px; height:43px; display:grid; place-items:center; border-radius:14px; font-weight:800; background:var(--teal); }
header strong, header small { display:block; } header small { margin-top:4px; color:#bdd3d0; font-size:12px; } header i { display:inline-block; width:7px; height:7px; border-radius:50%; background:#69e4ad; }
.messages { flex:1; overflow:auto; padding:24px 20px; display:flex; flex-direction:column; gap:12px; background:#fbfcfa; }
.message { max-width:84%; padding:13px 15px; border-radius:16px; line-height:1.45; white-space:pre-wrap; animation:rise .22s ease-out; }
.message.bot { align-self:flex-start; border:1px solid #e1ebe6; border-bottom-left-radius:5px; background:white; }
.message.user { align-self:flex-end; color:white; border-bottom-right-radius:5px; background:var(--teal); }
.message-link { display:inline-block; margin-top:8px; padding:9px 12px; color:white; font-weight:700; text-decoration:none; border-radius:10px; background:var(--teal); }
.message-link:hover { filter:brightness(.92); }
.message.loading { color:#738580; }
.suggestions { display:flex; gap:7px; padding:0 18px 12px; overflow-x:auto; background:#fbfcfa; }
.suggestions button { flex:none; padding:8px 11px; color:var(--teal); border:1px solid #bedbd4; border-radius:999px; background:white; cursor:pointer; }
form { display:flex; gap:8px; padding:15px 18px; border-top:1px solid #e5ece8; }
input { flex:1; min-width:0; padding:13px 14px; border:1px solid #d6e0dc; border-radius:13px; font:inherit; outline:none; }
input:focus { border-color:var(--teal); box-shadow:0 0 0 3px #087f7817; }
.send { width:46px; border:0; border-radius:13px; color:white; font-size:21px; background:var(--teal); cursor:pointer; }
.send:disabled { opacity:.55; }
.notice { margin:0; padding:0 18px 15px; color:#82908c; text-align:center; font-size:11px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@keyframes rise { from { opacity:0; transform:translateY(5px); } }
@media (max-width:850px) { .shell { grid-template-columns:1fr; gap:36px; padding:35px 0; } .intro { text-align:center; } .mark { margin:auto; } .lead { margin:22px auto; } .features { justify-content:center; } .chat-card { min-height:580px; } }