/* Cuper Website Experience Lock — living product demo */
.xp-stage{
  min-height:min(100dvh,920px);
  padding:clamp(12px,3vw,28px) 0 clamp(32px,6vw,56px);
  display:flex;flex-direction:column;gap:14px;
}
.xp-progress-wrap{
  max-width:1160px;margin:0 auto;width:100%;padding:0 24px;
}
.xp-progress-label{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:.68rem;font-weight:700;color:var(--muted);margin-bottom:6px;
}
.xp-progress-track{height:4px;border-radius:999px;background:var(--silver);overflow:hidden}
.xp-progress-fill{height:100%;width:0;background:var(--cuper-blue);transition:width .5s ease;border-radius:999px}
.xp-discover-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.xp-disc-chip{
  font-size:.62rem;font-weight:700;padding:4px 8px;border-radius:999px;
  border:1px solid var(--border);color:var(--muted);opacity:.55;transition:opacity .25s,border-color .25s,color .25s;
}
.xp-disc-chip.is-on{opacity:1;color:var(--cuper-blue);border-color:rgba(10,132,255,0.35)}

.xp-hero-copy{text-align:center;max-width:720px;margin:0 auto;padding:0 18px;min-height:5.5em}
.xp-hero-copy h1{
  font-size:clamp(1.5rem,4.2vw,2.35rem);font-weight:900;letter-spacing:-0.035em;line-height:1.1;
  color:var(--text);transition:opacity .35s ease;
}
.xp-hero-copy p{font-size:clamp(.88rem,2vw,1.05rem);color:var(--text-sec);margin-top:8px;line-height:1.45;transition:opacity .35s ease}
.xp-hero-copy.is-fading h1,.xp-hero-copy.is-fading p{opacity:.15}

.xp-app-shell{
  max-width:1160px;margin:0 auto;width:100%;padding:0 16px;flex:1;
  display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) minmax(0,220px);gap:12px;
  min-height:clamp(340px,52vh,480px);
}
@media(max-width:900px){
  .xp-app-shell{grid-template-columns:1fr;min-height:auto}
  .xp-panel-phone{order:3;max-width:320px;margin:0 auto;width:100%}
  .xp-panel-projects{order:1}
  .xp-panel-main{order:2}
}

.xp-panel{
  border-radius:16px;border:1px solid var(--border);background:var(--surface);
  backdrop-filter:blur(14px);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg);
}
.xp-panel-head{
  padding:10px 12px;border-bottom:1px solid var(--border);font-size:.62rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;align-items:center;
}
.xp-panel-body{padding:10px 12px 14px;flex:1;overflow:hidden}

.xp-proj-item{
  display:block;width:100%;text-align:left;padding:8px 10px;margin-bottom:4px;border-radius:10px;
  border:1px solid transparent;background:transparent;color:var(--text-sec);font-size:.76rem;font-weight:700;
  cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s,color .15s;
}
.xp-proj-item.is-active{background:var(--surface-2);border-color:var(--border-strong);color:var(--text)}
.xp-proj-item:hover:not(.is-active){background:var(--silver)}

.xp-status-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.xp-pill{
  font-size:.65rem;font-weight:700;padding:4px 9px;border-radius:999px;
  border:1px solid var(--border);background:var(--silver);color:var(--text-sec);
}
.xp-pill.is-target{border-color:rgba(34,197,94,0.35);color:#4ade80}
.xp-pill.is-provider{border-color:var(--border-strong);color:var(--text-sec)}
.xp-pill.is-provider.is-live{border-color:rgba(10,132,255,0.35);color:var(--cuper-blue)}
.xp-pill.is-switching{animation:xp-pulse .6s ease}

.xp-chat{min-height:140px;display:flex;flex-direction:column;gap:8px}
.xp-bubble{
  max-width:92%;padding:9px 11px;border-radius:12px;font-size:.76rem;line-height:1.45;
  animation:xp-in .35s ease-out;
}
.xp-bubble-user{align-self:flex-end;background:var(--surface-2);border:1px solid var(--border);color:var(--text)}
.xp-bubble-cuper{align-self:flex-start;background:var(--silver);border:1px solid var(--border);color:var(--text-sec)}
.xp-bubble-cuper strong{color:var(--text)}
.xp-stream-cursor{display:inline-block;width:2px;height:1em;background:var(--cuper-blue);margin-left:2px;animation:xp-blink 1s step-end infinite;vertical-align:text-bottom}

.xp-pipeline{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.xp-pipe-step{
  display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:600;color:var(--muted);
  padding:4px 0;opacity:.35;transition:opacity .3s,color .3s;
}
.xp-pipe-step.is-active{opacity:1;color:var(--cuper-blue)}
.xp-pipe-step.is-done{opacity:.65;color:var(--text-sec)}
.xp-pipe-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

.xp-phone-bezel{border-radius:22px;border:2px solid var(--border);background:var(--surface-2);padding:12px 10px;min-height:200px}
.xp-phone-notch{width:40%;height:5px;border-radius:999px;background:#1e293b;margin:0 auto 10px}
.xp-phone-msg{
  font-size:.68rem;padding:8px 10px;border-radius:10px;margin-bottom:8px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-sec);
  animation:xp-in .4s ease-out;
}
.xp-phone-msg.is-alert{border-color:rgba(245,158,11,0.4);background:rgba(245,158,11,0.1)}
.xp-phone-msg.is-ok{border-color:rgba(34,197,94,0.35);background:rgba(34,197,94,0.08)}

.xp-overlay{
  position:absolute;inset:0;background:rgba(7,11,18,0.72);display:flex;align-items:center;justify-content:center;
  padding:16px;opacity:0;pointer-events:none;transition:opacity .35s ease;
}
.xp-overlay.is-visible{opacity:1;pointer-events:auto}
.xp-modal{
  width:min(100%,340px);border-radius:14px;border:1px solid rgba(239,68,68,0.35);
  background:var(--surface);padding:18px;text-align:center;
}
.xp-modal h3{font-size:.92rem;font-weight:800;margin-bottom:8px;color:var(--text)}
.xp-modal p{font-size:.76rem;color:var(--text-sec);margin-bottom:12px}
.xp-modal-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.xp-modal-actions span{font-size:.7rem;font-weight:700;padding:8px 12px;border-radius:8px;border:1px solid var(--border)}

.xp-memory-flash{
  margin-top:8px;padding:10px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface-2);font-size:.72rem;color:var(--text-sec);
  opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;
}
.xp-memory-flash.is-visible{opacity:1;transform:translateY(0)}
.xp-memory-flash strong{color:var(--text)}

.xp-cta-row{text-align:center;padding:0 18px}
.xp-cta-row .btn-primary{margin-bottom:10px}
.xp-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;font-size:.72rem;font-weight:600;color:var(--muted)}

.xp-ai-wall{padding:clamp(40px,8vw,72px) 0}
.xp-wall-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;max-width:900px;margin:24px auto 0;
}
.xp-wall-node{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 18px;border-radius:14px;border:1px solid var(--border);background:var(--surface);
  font-size:.78rem;font-weight:800;color:var(--text-sec);animation:xp-float 4s ease-in-out infinite;
}
.xp-wall-node img,.xp-wall-node .xp-wall-logo{width:22px;height:22px;flex-shrink:0;border-radius:6px;object-fit:contain}
.xp-wall-node:nth-child(2){animation-delay:.5s}
.xp-wall-node:nth-child(3){animation-delay:1s}
.xp-wall-node:nth-child(4){animation-delay:1.5s}
.xp-wall-node:nth-child(5){animation-delay:2s}
.xp-wall-node:nth-child(6){animation-delay:2.5s}
.xp-wall-node.is-hub{border-color:var(--border-strong);color:var(--text);box-shadow:none}

.xp-compare-wrap{max-width:640px;margin:24px auto 0;padding:0 18px}
.xp-compare input[type=range]{width:100%;accent-color:var(--cuper-blue)}
.xp-compare-panels{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.xp-compare-panel{padding:16px;border-radius:14px;border:1px solid var(--border);background:var(--surface);font-size:.78rem;color:var(--text-sec);min-height:100px}
.xp-compare-panel h4{font-size:.82rem;font-weight:800;color:var(--text);margin-bottom:8px}
.xp-compare-panel.is-cuper{border-color:var(--border-strong)}

.xp-ticker{
  overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  margin-top:20px;
}
.xp-ticker-track{
  display:flex;gap:24px;width:max-content;animation:xp-scroll 45s linear infinite;
}
.xp-ticker-item{font-size:.8rem;font-weight:700;color:var(--text-sec);white-space:nowrap;padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--silver)}

.xp-cap-rotate{font-size:clamp(1rem,2.5vw,1.25rem);font-weight:800;color:var(--muted);text-align:center;min-height:1.5em;margin-top:12px}

.xp-panel-main{position:relative}

@keyframes xp-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes xp-blink{50%{opacity:0}}
@keyframes xp-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes xp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes xp-scroll{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  .xp-hero-copy h1,.xp-hero-copy p,.xp-bubble,.xp-phone-msg,.xp-ticker-track,.xp-wall-node{animation:none!important;transition:none!important}
  .xp-pill.is-switching{animation:none}
}

.xp-legacy-fold{display:none}
.xp-intent-compact{padding:clamp(32px,6vw,56px) 0;border-top:1px solid var(--border)}
.xp-intent-compact .intent-grid{margin-bottom:0}