@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --bg:#080b14; --panel:#111827; --text:#f4f7ff; --muted:#929db2; --cyan:#71e5e3; --purple:#a99bff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; overflow-x:hidden; }
.ambient { position:fixed; width:420px; height:420px; border-radius:50%; filter:blur(110px); opacity:.18; pointer-events:none; }
.ambient-one { background:#5b65ff; top:-180px; left:-120px; }
.ambient-two { background:#00c6bd; right:-180px; top:300px; }
.app-shell { width:min(100% - 36px,1000px); margin:auto; position:relative; z-index:1; }
.topbar { height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #ffffff12; }
.brand { display:flex; align-items:center; gap:11px; color:white; text-decoration:none; font:700 17px 'Space Grotesk'; letter-spacing:3px; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:#081116; background:linear-gradient(135deg,var(--cyan),var(--purple)); font-size:19px; }
.status,.live-pill { color:#a8b5c8; font-size:10px; letter-spacing:1.5px; font-weight:700; }
.status i,.live-pill i { display:inline-block; width:7px; height:7px; border-radius:50%; background:#63e6a4; margin-right:8px; box-shadow:0 0 12px #63e6a4; }
.hero { padding:65px 0 34px; text-align:center; }
.eyebrow { color:var(--cyan); font-size:10px; font-weight:700; letter-spacing:2.5px; margin:0 0 13px; }
h1,h2,h3,p { margin-top:0; }
h1 { font:600 clamp(42px,7vw,68px)/1.05 'Space Grotesk'; letter-spacing:-3px; margin-bottom:18px; }
h1 span { background:linear-gradient(90deg,var(--cyan),var(--purple)); color:transparent; background-clip:text; }
.intro { max-width:560px; margin:0 auto; color:var(--muted); line-height:1.7; font-size:14px; }
.assistant-card { background:linear-gradient(145deg,#151e30ed,#0e1523f2); border:1px solid #ffffff16; border-radius:25px; padding:28px; box-shadow:0 25px 90px #0007; }
.assistant-head { display:flex; justify-content:space-between; align-items:center; }
.assistant-head h2 { font:600 23px 'Space Grotesk'; margin:0; }
.live-pill { border:1px solid #63e6a433; padding:8px 11px; border-radius:30px; color:#8be8b6; }
.orb-wrap { height:210px; display:grid; place-items:center; position:relative; margin:12px 0 0; }
.orb { width:104px; height:104px; border:1px solid #8ee9e866; border-radius:50%; background:radial-gradient(circle at 35% 25%,#c5ffff,#5a9cbb 38%,#4c4b9b 78%); box-shadow:0 0 45px #68e3e555,inset 0 0 20px #fff8; cursor:pointer; z-index:2; transition:.25s; }
.orb:hover { transform:scale(1.06); }
.orb.listening { animation:pulse 1.3s infinite; box-shadow:0 0 0 15px #71e5e322,0 0 65px #71e5e399; }
.mic-icon { font-size:34px; filter:grayscale(1) brightness(4); }
.orb-ring { position:absolute; border:1px solid #8be9e52a; border-radius:50%; width:150px; height:150px; }
.ring-b { width:190px; height:190px; border-color:#a99bff20; }
.mic-status { color:var(--muted); text-align:center; font-size:12px; margin:-1px 0 25px; }
.input-row { display:flex; gap:10px; }
.input-row input { flex:1; min-width:0; border:1px solid #ffffff1c; background:#080e1a; border-radius:12px; padding:15px 17px; color:white; outline:none; font:14px 'DM Sans'; }
.input-row input:focus { border-color:#71e5e388; }
.send-button { border:0; border-radius:12px; padding:0 20px; background:linear-gradient(100deg,#75e5df,#a99bff); color:#09111a; font-weight:700; cursor:pointer; }
.send-button span { margin-left:8px; font-size:18px; }
.quick-prompts { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:17px 0 25px; }
.quick-prompts span,.conversation-title span { font-size:9px; color:#76849b; font-weight:700; letter-spacing:1.6px; margin-right:4px; }
.quick-prompts button { border:1px solid #ffffff1b; background:#ffffff08; color:#b9c4d6; border-radius:20px; padding:7px 12px; font-size:11px; cursor:pointer; }
.quick-prompts button:hover { border-color:var(--cyan); color:var(--cyan); }
.conversation { border-top:1px solid #ffffff14; padding-top:19px; }
.conversation-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.conversation-title button { color:#8e9bb0; border:0; background:none; font-size:11px; cursor:pointer; }
.chat-log { display:flex; flex-direction:column; gap:13px; max-height:300px; overflow-y:auto; padding-right:5px; }
.message { display:flex; gap:10px; align-items:flex-start; }
.user-message { flex-direction:row-reverse; }
.avatar { width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; border-radius:9px; background:#71e5e522; color:var(--cyan); font:700 13px 'Space Grotesk'; }
.user-message .avatar { background:#a99bff22; color:var(--purple); }
.bubble { max-width:82%; border:1px solid #ffffff12; background:#ffffff08; padding:10px 13px; border-radius:4px 13px 13px 13px; }
.user-message .bubble { background:#8e82ff15; border-radius:13px 4px 13px 13px; }
.bubble small { color:#7e91a9; font-size:8px; letter-spacing:1px; font-weight:700; }
.bubble p { color:#dce5f3; font-size:12px; line-height:1.6; margin:5px 0 0; white-space:pre-wrap; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:24px 0 40px; }
.feature-grid article { padding:19px; border:1px solid #ffffff12; border-radius:15px; background:#ffffff06; }
.feature-grid article span { color:var(--cyan); font:600 11px 'Space Grotesk'; }
.feature-grid h3 { font:600 15px 'Space Grotesk'; margin:13px 0 7px; }
.feature-grid p { color:var(--muted); font-size:11px; line-height:1.6; margin:0; }
footer { text-align:center; color:#59667c; font-size:9px; letter-spacing:1.8px; padding:0 0 28px; }
@keyframes pulse { 50% { transform:scale(1.08); } }
@media(max-width:600px) { .app-shell{width:min(100% - 22px,1000px)} .topbar{height:65px}.status{font-size:8px;letter-spacing:.7px}.hero{padding:48px 0 27px}h1{letter-spacing:-2px}.assistant-card{padding:19px 14px}.assistant-head h2{font-size:19px}.input-row{flex-direction:column}.send-button{padding:13px}.feature-grid{grid-template-columns:1fr}.orb-wrap{height:190px} }