:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
.body {}
body { margin: 0; min-height: 100vh; overflow-x:hidden; background: linear-gradient(145deg,#070e16 0%,#0d1b29 50%,#0a1516 100%); color: #edf4f8; }
.ambient { position:fixed; width:38rem; height:38rem; border-radius:50%; filter:blur(80px); opacity:.18; pointer-events:none; animation: drift 14s ease-in-out infinite alternate; }
.ambient-one { top:-19rem; left:-9rem; background:#37d6b1; }.ambient-two { right:-17rem; bottom:-17rem; background:#715bff; animation-delay:-4s; }
@keyframes drift { to { transform:translate(3rem,2rem) scale(1.08); } }
.shell { width: min(860px, 92vw); margin: 0 auto; padding: 7vh 0 5vh; position:relative; }
.hero { display: flex; align-items: center; gap: 1rem; position: relative; }
.brand-mark { display:grid; place-items:center; width: 52px; height:52px; border-radius: 16px; color:#092019; background: linear-gradient(135deg,#a7f4d8,#63c9bf); font-size: 1.8rem; font-weight: 900; box-shadow:0 10px 35px #59bfa04d; }
.eyebrow { margin: 0 0 .4rem; color: #8fe0c4; letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; font-weight: 800; }
.eyebrow span { color: #547283; margin: 0 .25rem; }
h1 { margin: 0; font-size: clamp(2.2rem, 6vw, 4rem); letter-spacing: -.055em; line-height: 1; }
.subhead { margin: .65rem 0 0; color: #a9bac6; font-size: 1.05rem; }
.secure-pill { margin-left: auto; align-self: flex-start; padding: .55rem .8rem; border: 1px solid #315247; border-radius: 999px; color:#8fe0c4; background:#102822; font-size:.75rem; white-space:nowrap; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-top:2.4rem; }
.metric { display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem; border:1px solid #243b4d; border-radius:16px; background:#101e2b99; backdrop-filter:blur(12px); }
.metric strong,.metric small { display:block; }.metric strong { font-size:.9rem; }.metric small { margin-top:.18rem; color:#708b99; font-size:.7rem; }
.metric-icon { display:grid; place-items:center; width:33px; height:33px; border-radius:11px; font-size:1.1rem; font-weight:800; }.teal{color:#8ff1d5;background:#103f39}.amber{color:#ffd193;background:#49341c}.violet{color:#c4b9ff;background:#332a5c}
.card { margin-top: 2.5rem; padding: 1.25rem; border: 1px solid #284152; border-radius: 26px; background: linear-gradient(145deg,rgba(20,37,51,.94),rgba(12,23,33,.96)); box-shadow: 0 24px 80px rgba(0,0,0,.32); }
.card-top { display:flex; justify-content:space-between; align-items:center; padding: .35rem .4rem 1rem; color:#d8e8ee; }
.role { color:#7893a0; margin-left:.55rem; font-size:.82rem; }
.online-dot { display:inline-block; width:8px; height:8px; margin-right:.45rem; border-radius:50%; background:#82e0b6; box-shadow:0 0 12px #82e0b6; }
.status { color: #8fe0c4; font-size:.78rem; font-weight: 700; }
.conversation { display:grid; gap:.8rem; padding: .25rem; }
.bubble { padding: 1rem 1.1rem; border-radius: 17px; white-space: pre-wrap; line-height: 1.55; }
.bubble.assistant { background:#0b1b27; border:1px solid #1e3b4d; }
.bubble.user { background:#173b3b; border:1px solid #28635a; color:#d1ede2; }
.bubble-label { display:block; margin-bottom:.35rem; color:#83d9bd; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.voice-stage { position:relative; display:grid; place-items:center; min-height:150px; margin-top: .4rem; }.orbit { position:absolute; border:1px solid #64d8c033; border-radius:50%; }.orbit-a { width:128px;height:128px; animation:spin 12s linear infinite; border-top-color:#79efd4; }.orbit-b { width:174px;height:174px; border-color:#8d78ff22; border-left-color:#8d78ff88; animation:spin 18s linear infinite reverse; }.voice-stage:before { content:""; position:absolute; width:92px;height:92px;border-radius:50%;background:#58cdb226;filter:blur(16px);animation:pulse 2.2s ease-in-out infinite; }.mic { position:relative; z-index:2; display:grid; grid-template-columns:28px auto; grid-template-rows:auto auto; align-items:center; justify-content:center; column-gap:.65rem; width: min(280px, 90%); margin: 1.4rem auto 0; padding: 1rem 1.2rem; border: 0; border-radius: 18px; color: #072019; background: linear-gradient(135deg,#a5f3d5,#66c8be); font-size: 1rem; font-weight: 850; cursor: pointer; box-shadow: 0 12px 30px #63c9bf33,0 0 0 8px #66c8be12; transition: transform .15s, filter .15s; }
.mic:hover { transform: translateY(-2px); filter:brightness(1.06); }
.mic.listening { color:#2c1706; background: linear-gradient(135deg,#ffd09b,#ffa765); }
.mic-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#0b332a2e; }.mic-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mic small { grid-column:2; display:block; color:#225648; font-size:.68rem; font-weight:600; text-align:left; }.wave { display:flex; position:absolute; bottom:2px; gap:4px; height:20px; align-items:center; opacity:.45; }.wave i { display:block; width:3px;height:7px;border-radius:4px;background:#8fe0c4; animation:wave 1s ease-in-out infinite; }.wave i:nth-child(2){animation-delay:.1s}.wave i:nth-child(3){animation-delay:.2s}.wave i:nth-child(4){animation-delay:.3s}.wave i:nth-child(5){animation-delay:.4s}.wave i:nth-child(6){animation-delay:.5s}.wave i:nth-child(7){animation-delay:.6s}
@keyframes spin { to { transform:rotate(360deg); } } @keyframes pulse { 50% { transform:scale(1.25); opacity:.55; } } @keyframes wave { 50% { height:19px; } }
.controls { display:flex; justify-content:center; gap:1.2rem; color:#8ea6b2; font-size:.8rem; }
.toggle { display:flex; align-items:center; gap:.45rem; }
.hint { color:#617985; }
.quick-actions { margin-top: 1.35rem; }
.quick-actions p { margin: 0 0 .6rem; color:#77939e; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.chips { display:flex; flex-wrap:wrap; gap:.55rem; }
.chips button { display:flex; align-items:center; gap:.6rem; padding:.72rem .85rem; border:1px solid #2d4b59; border-radius:13px; color:#b9d1d8; background:linear-gradient(135deg,#102331,#0d1923); cursor:pointer; transition:all .15s; }.chips button b { color:#68d9bf; font-size:.7rem; }.chips button span { margin-left:auto; color:#5e8b8b; }.chips button:hover { transform:translateY(-2px); border-color:#65c9b7; color:#e9fff7; box-shadow:0 8px 24px #52c9b41a; }
.privacy { margin-top:1.6rem; color:#718a96; text-align:center; font-size:.8rem; }
.error { color: #ff9b9b; min-height: 1.25rem; text-align: center; }
@media (max-width: 600px) { .secure-pill { display:none; } .hero { align-items:flex-start; } .metrics { grid-template-columns:1fr; }.controls { flex-direction:column; align-items:center; gap:.5rem; } }
button:focus-visible, input:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }