.demo-hero { background: var(--ink); color: var(--paper); padding: 48px 20px 40px; text-align: center; }
        .demo-hero h1 { color: var(--accent-gold); font-size: 2.6rem; margin-bottom: 10px; }
        .demo-hero .subtitle { font-family: var(--font-hand); font-size: 1.25rem; color: #bbb; max-width: 680px; margin: 0 auto; }
        .demo-wrap { max-width: 760px; margin: 0 auto; padding: 32px 20px 80px; }
        .demo-section { margin-bottom: 52px; }
        .demo-section h2 { font-size: 1.6rem; margin-bottom: 8px; }
        .demo-section .section-sub { font-family: var(--font-hand); font-size: 1.1rem; color: var(--ink-light); margin-bottom: 20px; }
        .scene-window { background: var(--paper-warm); border: var(--border-sketch); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-paper); }
        .scene-setup { font-family: var(--font-hand); font-size: 1rem; color: var(--ink-faint); text-align: center; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px dashed #ddd; }
        .scene-setup strong { color: var(--ink); }
        .msg { display: flex; margin-bottom: 14px; }
        .msg.you { justify-content: flex-end; }
        .msg-bubble { max-width: 78%; padding: 10px 16px; border-radius: 14px; font-family: var(--font-body); font-size: 1rem; line-height: 1.45; }
        .msg.you .msg-bubble { background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; }
        .msg.ai .msg-bubble { background: var(--paper); color: var(--ink); border: 1px solid #e6e3d7; border-bottom-left-radius: 4px; }
        .msg-label { font-family: var(--font-hand); font-size: 0.85rem; color: var(--ink-faint); margin-bottom: 4px; }
        .msg.you .msg-label { text-align: right; }
        .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; }
        .feat-card { background: var(--paper); border: var(--border-sketch); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-paper); }
        .feat-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
        .feat-card p { font-family: var(--font-hand); font-size: 1rem; color: var(--ink-light); margin: 0; }
        .cta-strip { margin-top: 40px; text-align: center; }
        .cta-strip h3 { margin-bottom: 10px; }
        .cta-strip p { font-family: var(--font-hand); font-size: 1.15rem; color: var(--ink-light); margin-bottom: 18px; }
        .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
        .voice-callout { background: var(--paper-warm); border: 2px solid var(--accent-gold); border-radius: var(--radius); padding: 20px 24px; margin-top: 20px; }
        .voice-callout h3 { color: var(--accent-gold); margin-bottom: 6px; }
        .voice-callout p { font-family: var(--font-hand); font-size: 1.05rem; color: var(--ink); margin: 0; }