:root {
  --bg: #0b0d12;
  --panel: #11141b;
  --text: #f7f7f5;
  --muted: #a9adba;
  --line: rgba(255,255,255,.09);
  --accent: #b9f36b;
  --accent-2: #8be35c;
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:var(--bg); color:var(--text); }
button, input { font:inherit; }
.app { min-height:100vh; }
.hero { position:relative; overflow:hidden; min-height:100vh; padding:42px clamp(24px, 7vw, 100px); display:flex; flex-direction:column; }
.brand { font-size:22px; font-weight:800; letter-spacing:-.7px; }
.brand span { font-weight:400; color:var(--muted); }
.hero-copy { max-width:720px; margin:auto 0; position:relative; z-index:2; }
.eyebrow { color:var(--accent); font-size:12px; font-weight:800; letter-spacing:2px; margin:0 0 22px; }
h1 { font-size:clamp(58px, 9vw, 112px); line-height:.9; letter-spacing:-6px; margin:0; }
h1 em { color:var(--accent); font-style:normal; }
.intro { max-width:540px; color:var(--muted); font-size:18px; line-height:1.6; margin:32px 0; }
.primary { border:0; background:var(--accent); color:#111; padding:15px 22px; border-radius:999px; font-weight:800; cursor:pointer; transition:.2s; }
.primary:hover { transform:translateY(-2px); background:#c9ff89; }
.primary span { margin-left:12px; }
.orb { position:absolute; width:min(55vw, 620px); aspect-ratio:1; right:-12%; top:17%; border-radius:50%; background:radial-gradient(circle at 35% 30%, #d9ff9d, #6fbf4b 25%, #263b25 58%, transparent 70%); filter:blur(1px); opacity:.8; }
.orb span { position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(50px, 8vw, 110px); font-weight:900; color:rgba(255,255,255,.14); }
.hidden { display:none; }
.chat { min-height:100vh; max-width:980px; margin:auto; padding:28px 22px 18px; display:flex; flex-direction:column; }
.chat-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:22px; border-bottom:1px solid var(--line); }
.small { font-size:19px; }
.status { color:var(--muted); font-size:12px; margin-top:5px; }
.status i { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:6px; }
.ghost { background:transparent; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:9px 15px; cursor:pointer; }
.messages { flex:1; padding:34px 0; overflow:auto; }
.message { display:flex; margin:14px 0; }
.message.user { justify-content:flex-end; }
.bubble { max-width:min(720px, 85%); padding:14px 17px; border-radius:18px; background:#171b24; line-height:1.55; white-space:pre-wrap; }
.user .bubble { background:var(--accent); color:#111; border-bottom-right-radius:5px; }
.assistant .bubble { border-bottom-left-radius:5px; }
.composer { display:flex; gap:10px; padding:10px; background:#141821; border:1px solid var(--line); border-radius:22px; }
.composer input { flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--text); padding:12px 10px; }
.send { width:46px; height:46px; border:0; border-radius:50%; background:var(--accent); color:#111; font-size:22px; font-weight:900; cursor:pointer; }
.send:disabled { opacity:.45; cursor:wait; }
.disclaimer { color:#6f7480; text-align:center; font-size:11px; margin:10px 0 0; }
@media (max-width:700px) {
  .hero { padding:28px 22px; }
  .orb { right:-45%; top:12%; width:90vw; opacity:.5; }
  .hero-copy { margin-top:auto; margin-bottom:auto; }
  h1 { letter-spacing:-4px; }
}