/* Homepage Nika showcase. The browser mock stays light in both themes, like a
   real website would; the chat and controls follow the site's tokens. */
.nika-home{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.nika-home-copy h2{font-size:clamp(38px,4.3vw,62px);line-height:.96;letter-spacing:-.055em;margin:20px 0 20px}
.nika-home-copy p{color:var(--muted);font-size:18px;max-width:520px}
.nika-home-points{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0}
.nika-home-points li{padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:13px}
.nika-home-points li:last-child{color:var(--paper);border-color:rgba(99,102,241,.6)}

.nika-demo{position:relative;min-width:0}
.nd-browser{position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#f7f6f2;box-shadow:0 30px 80px rgba(0,0,0,.35);aspect-ratio:16/11}
.nd-bar{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;background:#ecebe6;border-bottom:1px solid #dddcd6}
.nd-bar i{width:9px;height:9px;border-radius:50%;background:#cfcec8}
.nd-url{margin-left:12px;flex:1;padding:5px 12px;border-radius:8px;background:#fff;color:#6b6b66;font:12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-url b{font-weight:500;color:#26262a}
.nd-view{position:absolute;inset:38px 0 0;overflow:hidden;color:#18181b}
.nd-page{position:absolute;inset:0;padding:22px 26px;transition:opacity .45s var(--ease),transform .6s var(--ease)}
.nd-nav{display:flex;gap:16px;align-items:center;font-size:12px;color:#77776f;margin-bottom:20px}
.nd-nav strong{color:#18181b;margin-right:auto;font-size:14px}
.nd-nav .on{color:#4f46e5;font-weight:600}
.nd-page small{display:block;color:#8a8a82;font-size:11px}
.nd-page h4{font-size:clamp(18px,2.2vw,26px);letter-spacing:-.03em;margin:6px 0 14px;line-height:1.1}
.nd-line{display:block;height:8px;border-radius:6px;background:#e1e0da;margin:9px 0;width:88%}
.nd-line.short{width:56%}
.nd-block{height:26%;border-radius:12px;background:#e8e7e1;margin:16px 0}
.nd-pricing{opacity:0;transform:translateY(24px)}
.is-pricing .nd-blog{opacity:0;transform:translateY(-24px)}
.is-pricing .nd-pricing{opacity:1;transform:none}
.nd-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.nd-plan{position:relative;padding:16px 14px;border:1px solid #deddd7;border-radius:14px;background:#fff;transition:box-shadow .5s var(--ease),border-color .5s,transform .5s var(--ease)}
.nd-plan b{display:block;font-size:13px}
.nd-plan em{display:block;font-style:normal;font-size:clamp(20px,2.4vw,28px);font-weight:700;letter-spacing:-.04em;margin:6px 0 2px}
.nd-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%) scale(.6);opacity:0;padding:3px 8px;border-radius:999px;background:#4f46e5;color:#fff;font-size:10px;white-space:nowrap;transition:opacity .4s,transform .5s var(--ease)}
.is-highlight .nd-team{border-color:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,.22),0 14px 30px rgba(79,70,229,.22);transform:translateY(-4px)}
.is-highlight .nd-badge{opacity:1;transform:translateX(-50%) scale(1)}

.nd-mark{display:inline-block;width:14px;height:14px;background:currentColor;-webkit-mask:url(/assets/nika/nika-mark.svg) center/contain no-repeat;mask:url(/assets/nika/nika-mark.svg) center/contain no-repeat}
.nd-launcher{position:absolute;right:16px;bottom:16px;width:46px;height:46px;border:0;border-radius:50%;background:#6366f1;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(79,70,229,.4);pointer-events:none;transition:transform .35s var(--ease)}
.nd-launcher .nd-mark{width:22px;height:22px}
.is-open .nd-launcher{transform:scale(.86)}
.nd-chat{position:absolute;right:16px;bottom:72px;width:min(62%,300px);padding:12px;border-radius:16px;background:#111114;color:#f5f5f3;font-size:12.5px;line-height:1.45;box-shadow:0 20px 50px rgba(0,0,0,.35);opacity:0;transform:translateY(14px) scale(.96);transform-origin:bottom right;transition:opacity .35s,transform .45s var(--ease)}
.is-open .nd-chat{opacity:1;transform:none}
.nd-chat-head{display:flex;align-items:center;gap:7px;font-weight:600;margin-bottom:8px}
.nd-context{display:inline-block;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.08);color:#a8a8a2;font-size:10.5px;margin-bottom:9px}
.nd-context::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#34d399;margin-right:6px;vertical-align:1px}
.nd-msg{padding:8px 10px;border-radius:12px;margin-top:6px}
.nd-user{margin-left:auto;width:max-content;max-width:100%;background:#26262b;min-height:33px}
.nd-caret{display:none;width:1.5px;height:13px;background:#f5f5f3;vertical-align:-2px;margin-left:1px;animation:nd-blink 1s steps(1) infinite}
.is-typing .nd-caret{display:inline-block}
.nd-bot{background:rgba(99,102,241,.16);border:1px solid rgba(99,102,241,.35);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .45s var(--ease)}
.is-answered .nd-bot{opacity:1;transform:none}
.nd-toast{position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;background:#111114;color:#f5f5f3;font-size:12px;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .45s var(--ease)}
.is-highlight .nd-toast{opacity:1;transform:none}
.is-highlight .nd-launcher{opacity:0}
@keyframes nd-blink{50%{opacity:0}}

.nd-controls{display:flex;align-items:center;gap:12px;margin-top:14px}
.nd-play{flex:none;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--paper);cursor:pointer;display:grid;place-items:center}
.nd-play:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.nd-icon{width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.is-paused .nd-icon{width:0;height:0;border:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.nd-progress{flex:1;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.nd-progress i{display:block;height:100%;background:var(--signal);transform-origin:left;transform:scaleX(0)}
.nd-caption{flex:0 1 auto;min-width:0;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.nd-steps{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0 0;padding:0;color:var(--muted);font-size:12px}
.nd-steps li{display:flex;align-items:center;gap:6px;opacity:.45;transition:opacity .3s,color .3s}
.nd-steps li::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.nd-steps li.on{opacity:1;color:var(--paper)}
.nd-steps li.on::before{background:var(--signal);box-shadow:0 0 10px rgba(99,102,241,.8)}

@media (max-width:900px){
  .nika-home{grid-template-columns:1fr;gap:32px}
  .nd-browser{aspect-ratio:4/5}
  .nd-plans{grid-template-columns:1fr;gap:8px}
  .nd-plan{padding:10px 12px;display:grid;grid-template-columns:1fr auto;align-items:center}
  .nd-plan small{grid-column:1/-1}
  .nd-chat{width:min(82%,300px)}
  .nd-caption{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .nd-page,.nd-chat,.nd-bot,.nd-toast,.nd-plan,.nd-badge,.nd-launcher{transition:none}
  .nd-caret{animation:none}
}