/* Landing demos — little UFO app windows that play a scripted scene. */
.feat { padding: 120px 0 0; word-break: keep-all; }
.feat__head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.feat__no { font: italic 400 30px var(--serif); color: var(--k); }
.feat__head h2 { font: 400 clamp(28px, 3.4vw, 42px)/1.35 var(--kr); margin: 12px 0 14px; }
.feat__head p { color: var(--dim); font-size: 16.5px; }

.app { --a-bg: #111114; --a-bg2: #18181c; --a-line: rgba(236,230,218,.09); --a-txt: #e9e5dc; --a-dim: rgba(233,229,220,.55);
  max-width: 980px; margin: 0 auto; border-radius: 14px; overflow: hidden; background: var(--a-bg);
  border: 1px solid var(--a-line); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8);
  font: 400 13.5px/1.5 'Pretendard Variable', Pretendard, system-ui, sans-serif; color: var(--a-txt); text-align: left; position: relative; }
.app__bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--a-line); background: #0d0d10; }
.app__bar i { width: 11px; height: 11px; border-radius: 50%; background: #2a2a2f; }
.app__bar span { margin-left: 10px; font-size: 12px; color: var(--a-dim); }
.app__body { display: grid; grid-template-columns: 210px minmax(0, 1fr); height: 430px; }
.app__body.split { grid-template-columns: 200px minmax(0, 1fr) 300px; }
.app__body.agents-demo { grid-template-columns: 330px minmax(0, 1fr); }
.side { border-right: 1px solid var(--a-line); padding: 14px 10px; background: #0f0f12; overflow: hidden; }
.side__ws { font-weight: 700; padding: 0 8px 12px; display: flex; align-items: center; gap: 8px; }
.side__ws img { width: 20px; height: 20px; border-radius: 5px; }
.side__h { font-size: 11px; color: var(--a-dim); padding: 12px 8px 6px; letter-spacing: .04em; }
.side__ch { padding: 5px 8px; border-radius: 7px; color: var(--a-dim); display: flex; align-items: center; gap: 8px; transition: background .25s, color .25s; }
.side__ch.on { background: #222228; color: var(--a-txt); }
.side__ch .dot { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--k, #8be05a); opacity: 0; transition: opacity .3s; }
.side__ch.busy .dot { opacity: 1; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

.main { display: flex; flex-direction: column; min-width: 0; }
.main__head { height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--a-line); font-weight: 600; }
.chip { font-size: 11.5px; font-weight: 500; color: var(--a-dim); border: 1px solid var(--a-line); border-radius: 999px; padding: 2px 9px; display: inline-flex; gap: 6px; align-items: center; }
.msgs { flex: 1; overflow: hidden; padding: 14px 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.msg { display: flex; gap: 10px; animation: msgIn .35s ease both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }
.msg b { font-size: 13px; } .msg small { color: var(--a-dim); font-size: 11px; margin-left: 6px; }
.msg .body { margin-top: 2px; }
.msg .tag { font-size: 10.5px; color: var(--k); border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; margin-left: 6px; opacity: .8; }
.react { display: inline-flex; margin-top: 6px; font-size: 12px; border: 1px solid var(--a-line); border-radius: 999px; padding: 1px 8px; background: #1b1b20; animation: msgIn .3s both; }

/* avatars: people are plain circles, agents are little UFO planets */
.av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #0b0b0d; background: var(--k); position: relative; }
.av.ag { background: radial-gradient(circle at 35% 30%, #34343e, #060607 70%); color: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.av.ag::before, .av.ag::after { content: ''; position: absolute; top: 9px; width: 4px; height: 7px; border-radius: 50%; background: #f3efe7; }
.av.ag::before { left: 9px; } .av.ag::after { left: 15px; }
.av.ag i { position: absolute; left: -5px; right: -5px; top: 11px; height: 9px; border-radius: 50%; border: 2px solid var(--k); transform: rotate(-18deg); }
.av.sm { width: 18px; height: 18px; font-size: 9px; }
.av.sm.ag::before, .av.sm.ag::after { top: 5px; width: 2.5px; height: 4px; } .av.sm.ag::before { left: 5px; } .av.sm.ag::after { left: 9px; }
.av.sm.ag i { top: 6px; height: 6px; left: -3px; right: -3px; border-width: 1.5px; }

.wk { margin-top: 8px; border: 1px solid var(--a-line); border-radius: 10px; background: #141418; padding: 9px 12px; font-size: 12.5px; }
.wk__top { display: flex; gap: 8px; align-items: center; color: var(--a-dim); }
.wk__top em { font-style: normal; color: var(--k); }
.spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--k); border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.todo { list-style: none; margin-top: 6px; }
.todo li { padding: 1px 0; color: var(--a-dim); animation: msgIn .3s both; }
.todo li.ok::before { content: '✓ '; color: #8be05a; } .todo li.go::before { content: '◌ '; color: var(--k); }
.tool { font-size: 12px; color: var(--a-dim); animation: msgIn .3s both; }
.tool::before { content: '▸ '; color: var(--k); }
.card { margin-top: 8px; display: inline-flex; gap: 10px; align-items: center; border: 1px solid rgba(139,224,90,.35); background: rgba(139,224,90,.07); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; animation: msgIn .35s both; }
.card b { color: #8be05a; }

.composer { margin: 0 18px 14px; border: 1px solid var(--a-line); border-radius: 10px; padding: 10px 12px; min-height: 40px; background: #141418; color: var(--a-dim); }
.composer .typed { color: var(--a-txt); }
.composer .caret { display: inline-block; width: 1.5px; height: 15px; background: var(--a-txt); vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.mention { color: #2ee6f0; }

/* spotlight (⌘K) */
.spot { position: absolute; left: 50%; top: 70px; width: 420px; max-width: 80%; transform: translateX(-50%) scale(.96); opacity: 0; pointer-events: none;
  background: #1a1a1f; border: 1px solid var(--a-line); border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.7); transition: opacity .2s, transform .2s; z-index: 5; }
.spot.on { opacity: 1; transform: translateX(-50%) scale(1); }
.spot__in { padding: 12px 14px; border-bottom: 1px solid var(--a-line); }
.spot__row { padding: 8px 14px; color: var(--a-dim); }
.spot__row.hi { background: #26262d; color: var(--a-txt); }
kbd { font: 600 11px ui-monospace, monospace; border: 1px solid var(--a-line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; color: var(--a-txt); background: #1c1c21; }
.keys { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 4px; opacity: 0; transition: opacity .2s; z-index: 6; }
.keys.on { opacity: 1; }
.keys kbd { font-size: 14px; padding: 4px 9px; }

/* live browser panel */
.pane { border-left: 1px solid var(--a-line); display: flex; flex-direction: column; background: #0f0f12; }
.pane__head { height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--a-line); font-size: 12px; color: var(--a-dim); }
.pane__live { width: 7px; height: 7px; border-radius: 50%; background: #ff4f6a; animation: pulse 1.4s infinite; }
.pane__view { flex: 1; margin: 12px; border-radius: 8px; background: #f2efe8; color: #222; padding: 14px; font-size: 12px; position: relative; overflow: hidden; }
.pane__url { font-size: 11px; color: #777; margin-bottom: 12px; }
.pane__title { font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.bar { height: 7px; border-radius: 4px; background: #ddd8cc; overflow: hidden; margin: 6px 0 12px; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2ee6f0, #a46bff, #ff4fa3); transition: width 1.2s ease; }
.pane__line { height: 8px; border-radius: 4px; background: #e2ddd2; margin: 8px 0; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #dff5d3; color: #2c7a12; opacity: 0; transition: opacity .3s; }
.badge.on { opacity: 1; }

/* the ask card that finds you */
.ask { position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 20px); width: 360px; max-width: 86%; opacity: 0; transition: opacity .3s, transform .3s; z-index: 6;
  background: #1c1c22; border: 1px solid rgba(255,79,163,.4); border-radius: 12px; padding: 12px 14px; box-shadow: 0 20px 60px rgba(0,0,0,.7); }
.ask.on { opacity: 1; transform: translate(-50%, 0); }
.ask__q { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.ask__btns { display: flex; gap: 8px; }
.ask__btns span { border: 1px solid var(--a-line); border-radius: 8px; padding: 5px 11px; font-size: 12.5px; transition: background .15s; }
.ask__btns span:first-child { background: #f1ede4; color: #111; }
.ask__btns span.press { background: #ff4fa3; color: #fff; }
.cursor { position: absolute; width: 16px; height: 16px; z-index: 9; left: 70%; top: 70%; opacity: 0; transition: left .7s cubic-bezier(.3,.7,.2,1), top .7s cubic-bezier(.3,.7,.2,1), opacity .2s; pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 1l5 13 2-5 5-2z' fill='white' stroke='black' stroke-width='1'/%3E%3C/svg%3E"); }
.cursor.on { opacity: 1; }

/* agents & engines */
.agents { padding: 14px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.agent { display: flex; align-items: center; gap: 12px; border: 1px solid var(--a-line); border-radius: 12px; padding: 10px 12px; background: #141418; animation: msgIn .4s both; }
.agent b { display: block; font-size: 13.5px; }
.agent span { font-size: 11.5px; color: var(--a-dim); }
.agent .src { margin-left: auto; font-size: 11px; color: var(--k); border: 1px solid currentColor; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.meter { width: 70px; height: 5px; border-radius: 3px; background: #26262c; overflow: hidden; margin-top: 5px; }
.meter i { display: block; height: 100%; background: var(--k); width: 0; transition: width 1s ease; }
.addbtn { border: 1px dashed var(--a-line); border-radius: 12px; padding: 10px; text-align: center; color: var(--a-dim); transition: border-color .2s, color .2s; }
.addbtn.hi { border-color: var(--a-txt); color: var(--a-txt); }
.typing { display: inline-flex; gap: 3px; } .typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--a-dim); animation: pulse 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }

/* platforms */
.platforms { padding: 130px 0 120px; text-align: center; word-break: keep-all; }
.platforms h2 { font: 400 clamp(26px, 3vw, 36px)/1.4 var(--kr); margin: 12px 0 46px; }
.plats { display: flex; justify-content: center; gap: clamp(30px, 7vw, 100px); flex-wrap: wrap; }
.plat svg { width: 54px; height: 54px; stroke: var(--txt); fill: none; stroke-width: 1.4; opacity: .9; }
.plat b { display: block; margin-top: 14px; font: 400 21px var(--kr); }
.plat span { display: block; margin-top: 4px; color: var(--dim); font-size: 14px; }

@media (max-width: 820px) {
  .app__body, .app__body.split { grid-template-columns: minmax(0, 1fr); height: 400px; }
  .side, .pane { display: none; }
  .app__body.agents-demo { grid-template-columns: minmax(0, 1fr); }
  .agents-demo .side { display: block; border-right: 0; }
  .agents-demo .main { display: none; }
}
@media (prefers-reduced-motion: reduce) { .msg, .todo li, .tool, .card, .agent, .react { animation: none; } }