/* 猫虾 — Demo v7 · Responsive mobile + manual mode */

.demo-section {
  padding: 5rem 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
.demo-section .section-header { text-align: center; margin-bottom: 2rem; }

.demo-container {
  border-radius: 20px;
  border: 1px solid #e5e5e7;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  min-height: 480px;
  overflow: hidden;
}
.demo-container:after { content: ''; display: table; clear: both; }

/* Left: Steps */
.demo-steps {
  float: left;
  width: 210px;
  background: #f8f9fa;
  padding: 1.25rem 1rem;
  min-height: 480px;
  border-right: 1px solid #e5e5e7;
  border-radius: 20px 0 0 20px;
}

.demo-step {
  padding: 0.6rem 0.5rem;
  border-radius: 10px;
  margin-bottom: 0.15rem;
  position: relative;
  cursor: default;
}
.demo-step:after { content: ''; display: block; clear: both; }
.demo-step__num {
  float: left;
  width: 24px; height: 24px; line-height: 24px;
  border-radius: 50%;
  background: #f2f2f4; color: #aeaeb2;
  font-size: 0.7rem; font-weight: 700;
  text-align: center; margin-right: 0.4rem;
}
.demo-step.active .demo-step__num { background: #7ecf5e; color: #fff; box-shadow: 0 0 0 3px rgba(126,207,94,0.2); }
.demo-step.completed .demo-step__num { background: #5cb83a; color: #fff; }
.demo-step__info { overflow: hidden; }
.demo-step__info h5 { font-size: 0.75rem; font-weight: 600; color: #aeaeb2; margin: 0 0 0.05rem; }
.demo-step__info p { font-size: 0.65rem; color: #aeaeb2; margin: 0; line-height: 1.2; }
.demo-step.active .demo-step__info h5 { color: #1c1c1e; }
.demo-step.active .demo-step__info p { color: #6e6e73; }
.demo-step.completed .demo-step__info h5 { color: #5cb83a; }

.demo-step:not(:last-child):before {
  content: ''; position: absolute; left: 18px; top: 38px; bottom: 0;
  width: 2px; background: #e5e5e7;
}
.demo-step.active:not(:last-child):before,
.demo-step.completed:not(:last-child):before { background: #7ecf5e; }

/* Right: Preview — wider */
.demo-preview {
  margin-left: 210px;
  padding: 2rem 1.5rem;
  min-height: 480px;
}
.demo-preview__content { text-align: center; }

/* Map */
.demo-map { text-align: center; }
.demo-map__region {
  display: inline-block; padding: 0.85rem 1.6rem; margin: 0.4rem;
  background: #f8f9fa; border: 2px solid #e5e5e7;
  border-radius: 18px; cursor: pointer;
  font-weight: 600; font-size: 0.82rem;
  transition: all 0.2s;
}
.demo-map__region:hover { border-color: #7ecf5e; background: #e8f7e2; }
.demo-map__region.selected { border-color: #7ecf5e; background: #7ecf5e; color: #fff; }
.demo-map__region .emoji { display: block; font-size: 1.6rem; margin-bottom: 0.15rem; }

/* Search */
.demo-search { max-width: 720px; margin: 0 auto; }
.demo-search__bar { height: 8px; background: #eee; border-radius: 100px; overflow: hidden; margin-bottom: 1rem; }
.demo-search__bar-fill {
  height: 100%; background: linear-gradient(90deg, #7ecf5e, #5cb83a);
  border-radius: 100px; width: 0%;
  animation: searchFill 3.5s ease-out forwards;
}
@keyframes searchFill {
  0% { width: 0%; } 30% { width: 35%; } 60% { width: 72%; } 85% { width: 94%; } 100% { width: 100%; }
}
.demo-search__terminal {
  background: #1a1d26; border-radius: 12px; padding: 0.75rem 1rem;
  text-align: left; font-family: 'SF Mono','Cascadia Code','Consolas','Menlo',monospace;
  font-size: 0.75rem; color: #a8d8a0; line-height: 1.7; min-height: 100px;
}
.demo-search__terminal .line { opacity: 0; animation: terminalIn 0.5s ease-out forwards; }
.demo-search__terminal .line:nth-child(1) { animation-delay: 0.3s; }
.demo-search__terminal .line:nth-child(2) { animation-delay: 0.9s; }
.demo-search__terminal .line:nth-child(3) { animation-delay: 1.5s; }
.demo-search__terminal .line:nth-child(4) { animation-delay: 2.1s; }
.demo-search__terminal .line:nth-child(5) { animation-delay: 2.7s; }
@keyframes terminalIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
.demo-search__terminal .cursor { display: inline-block; width: 8px; height: 14px; background: #7ecf5e; animation: blink 0.7s step-end infinite; vertical-align: middle; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }

/* Cards */
.demo-cards { text-align: center; }
.demo-card {
  display: inline-block; vertical-align: top;
  background: #fff; border: 1px solid #e5e5e7;
  border-radius: 12px; padding: 1rem; margin: 0.35rem;
  width: 260px; text-align: left;
  opacity: 0; transform: translateY(12px);
  animation: cardIn 0.5s ease-out forwards;
}
.demo-card:nth-child(1) { animation-delay: 0.15s; }
.demo-card:nth-child(2) { animation-delay: 0.45s; }
.demo-card:nth-child(3) { animation-delay: 0.75s; }
@keyframes cardIn { to { opacity:1; transform:translateY(0); } }
.demo-card__name { font-weight:700; font-size:0.88rem; margin-bottom:0.25rem; }
.demo-card__country { font-size:0.72rem; color:#6e6e73; margin-bottom:0.35rem; }
.demo-card__industry { display:inline-block; font-size:0.65rem; background:#e8f7e2; color:#5cb83a; padding:0.12rem 0.5rem; border-radius:100px; margin-bottom:0.35rem; }
.demo-card__budget { font-size:0.75rem; font-weight:600; color:#5cb83a; }

/* Email */
.demo-email {
  background: #fafafa; border: 1px solid #e5e5e7;
  border-radius: 12px; padding: 1rem 1.25rem;
  text-align: left; font-size: 0.76rem; line-height: 1.8;
  max-width: 720px; margin: 0 auto;
}
.demo-email .email-line { margin-bottom: 0.08rem; min-height: 1.2em; }
.demo-email .typing-cursor { display: inline-block; width: 2px; height: 1em; background: #7ecf5e; animation: blink 0.7s step-end infinite; vertical-align: text-bottom; }

/* CTA */
.demo-cta { text-align: center; padding: 1rem 0; }
.demo-cta p { font-size: 1rem; color: #6e6e73; margin-bottom: 0.75rem; }

/* Controls */
.demo-controls { text-align: center; margin-top: 1.5rem; }
.demo-btn-next {
  display: inline-block; padding: 0.6rem 1.8rem;
  font-size: 0.9rem; font-weight: 600; background: #7ecf5e; color: #fff;
  border: none; border-radius: 100px; cursor: pointer;
  font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
}
.demo-btn-next:hover { background: #5cb83a; }
.demo-btn-next:disabled { opacity: 0.4; cursor: not-allowed; }
.demo-auto-indicator {
  display: inline-block; font-size: 0.75rem; color: #aeaeb2;
  margin-right: 1rem; vertical-align: middle;
}
.demo-auto-indicator .dot {
  display: inline-block; width: 6px; height: 6px;
  background: #7ecf5e; border-radius: 50%;
  margin-right: 0.3rem; vertical-align: middle;
  animation: liveDotBlink 0.8s ease-in-out infinite;
}
@keyframes liveDotBlink { 0%,100%{opacity:1} 50%{opacity:.3} }

@media (max-width: 768px) {
  /* Section */
  .demo-section { padding: 2.5rem 1rem; }

  /* Container */
  .demo-container { min-height: auto; overflow: visible; border-radius: 16px; }

  /* Steps: horizontal scrollable strip */
  .demo-steps {
    float: none; width: 100%; min-height: auto;
    padding: 0.45rem 0.5rem; border-right: none;
    border-bottom: 1px solid #e5e5e7;
    border-radius: 16px 16px 0 0;
    white-space: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .demo-step {
    display: inline-block; vertical-align: top;
    margin-right: 0.35rem; margin-bottom: 0;
    padding: 0.25rem 0.4rem; white-space: normal;
  }
  .demo-step:before { display: none; }
  .demo-step__num {
    float: none; display: inline-block;
    width: 18px; height: 18px; line-height: 18px;
    font-size: 0.6rem; margin-right: 0.12rem;
  }
  .demo-step__info { display: inline; }
  .demo-step__info h5 { font-size: 0.6rem; }
  .demo-step__info p { display: none; }

  /* Preview area */
  .demo-preview {
    margin-left: 0; min-height: 240px;
    padding: 1rem 0.6rem;
  }

  /* Map regions */
  .demo-map__region {
    padding: 0.5rem 0.7rem; margin: 0.15rem;
    font-size: 0.65rem; border-radius: 12px;
  }
  .demo-map__region .emoji { font-size: 1rem; margin-bottom: 0.05rem; }

  /* Search */
  .demo-search { max-width: 100% !important; }
  .demo-search__bar { height: 6px; margin-bottom: 0.6rem; }
  .demo-search__terminal {
    font-size: 0.55rem; padding: 0.5rem 0.55rem;
    min-height: 70px; border-radius: 8px;
  }
  .demo-search__terminal .cursor { width: 5px; height: 9px; }

  /* Cards: compact, fit 2 per row on most phones */
  .demo-card {
    width: 44%; margin: 0.2rem 2.5%;
    padding: 0.55rem 0.5rem; border-radius: 8px;
  }
  .demo-card__name { font-size: 0.7rem; }
  .demo-card__country { font-size: 0.6rem; margin-bottom: 0.2rem; }
  .demo-card__industry { font-size: 0.55rem; padding: 0.1rem 0.4rem; margin-bottom: 0.2rem; }
  .demo-card__budget { font-size: 0.65rem; }

  /* Email */
  .demo-email {
    max-width: 100% !important;
    padding: 0.5rem 0.55rem;
    font-size: 0.55rem; line-height: 1.5;
    border-radius: 8px;
  }
  .demo-email .typing-cursor { width: 1px; }

  /* Controls */
  .demo-controls { margin-top: 0.75rem; }
  .demo-btn-next { padding: 0.45rem 1.2rem; font-size: 0.75rem; }
  .demo-auto-indicator { display: block; margin: 0 0 0.4rem; font-size: 0.65rem; }

  /* CTA */
  .demo-cta { padding: 0.5rem 0; }
  .demo-cta p { font-size: 0.8rem; }
}

/* Extra small phones */
@media (max-width: 400px) {
  .demo-steps { padding: 0.35rem 0.4rem; }
  .demo-step { margin-right: 0.2rem; padding: 0.2rem 0.3rem; }
  .demo-step__num { width: 16px; height: 16px; line-height: 16px; font-size: 0.55rem; }
  .demo-step__info h5 { font-size: 0.55rem; }
  .demo-preview { padding: 0.75rem 0.4rem; }
  .demo-map__region { padding: 0.4rem 0.5rem; margin: 0.1rem; font-size: 0.6rem; }
  .demo-map__region .emoji { font-size: 0.9rem; }
  .demo-card { width: 90%; margin: 0.2rem auto; display: block; }
  .demo-cta p { font-size: 0.7rem; }
  .demo-cta .btn-lg { font-size: 0.75rem; padding: 0.45rem 1.2rem; }
}