/* RIDKK live demo pages — extends landing.css */
.demo-hero { padding: 120px 0 36px; background: radial-gradient(1200px 400px at 50% -10%, rgba(79,70,229,.14), transparent 70%); }
.demo-hero h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.03em; margin: 10px 0 12px; }
.demo-hero .hero-sub { max-width: 64ch; margin: 0; }
.demo-hero-compact { padding-top: 104px; }
.demo-back { display: inline-block; font-size: .9rem; font-weight: 600; color: #4f46e5; margin-bottom: 14px; text-decoration: none; }
.demo-back:hover { text-decoration: underline; }

.demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.demo-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px; border: 1px solid #e5e7eb; border-radius: 16px; background: #fff;
  text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.demo-card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(16,24,40,.10); border-color: #c7d2fe; }
.demo-emoji { font-size: 1.8rem; line-height: 1; }
.demo-card h3 { margin: 6px 0 0; font-size: 1.1rem; }
.demo-company { font-weight: 600; color: #4f46e5; font-size: .9rem; margin: 0; }
.demo-card p { color: #4b5563; font-size: .93rem; margin: 0; }
.demo-card .product-card-more { margin-top: auto; padding-top: 10px; }

.demo-cta-band { padding-top: 0; }
.demo-cta-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 32px; border-radius: 20px; background: linear-gradient(135deg, #4f46e5, #6d28d9); color: #fff;
}
.demo-cta-inner h2 { margin: 0 0 6px; font-size: 1.5rem; }
.demo-cta-inner p { margin: 0; opacity: .9; max-width: 60ch; }
.demo-cta-inner .btn-primary { background: #fff; color: #4338ca; }

.demo-body { padding-top: 24px; }
.demo-columns { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.demo-info { display: grid; gap: 16px; }
.demo-panel { padding: 22px 24px; border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; }
.demo-panel-head { margin: 0 0 12px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
.demo-member { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.demo-member strong { display: block; }
.demo-avatar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: #eef2ff; color: #4338ca; font-weight: 800; flex: none;
}
.demo-role { font-size: .85rem; color: #6b7280; }
.demo-prompts { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.demo-prompt {
  width: 100%; text-align: start; padding: 12px 14px; border-radius: 12px; border: 1px solid #e5e7eb;
  background: #f9fafb; font: inherit; font-size: .95rem; color: #111827; cursor: pointer;
}
.demo-prompt:hover { border-color: #a5b4fc; background: #eef2ff; }
.demo-hint { margin: 12px 0 0; font-size: .82rem; color: #6b7280; }
.demo-features { margin: 0; padding-inline-start: 18px; color: #374151; font-size: .95rem; display: grid; gap: 6px; }
.demo-panel-cta { background: #f5f3ff; border-color: #ddd6fe; }
.demo-panel-cta p { margin: 6px 0 14px; color: #4b5563; }

.demo-chat { position: sticky; top: 96px; min-height: 120px; }
.demo-chat-note {
  padding: 16px 18px; border-radius: 14px; background: #eef2ff; color: #3730a3; font-size: .92rem; line-height: 1.5;
}
.demo-chat-offline { background: #fef3c7; color: #92400e; }

.demo-others { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.demo-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px;
  border: 1px solid #e5e7eb; background: #fff; text-decoration: none; color: #111827; font-weight: 600; font-size: .9rem;
}
.demo-chip:hover { border-color: #a5b4fc; background: #eef2ff; }

@media (max-width: 900px) {
  .demo-columns { grid-template-columns: 1fr; }
  .demo-chat { position: static; }
}