.wrap { max-width: 800px; margin: 0 auto; padding: 48px 24px 80px; }
        .hero { text-align: center; margin-bottom: 40px; }
        .hero .tag { display: inline-block; padding: 4px 12px; border-radius: 20px; background: var(--accent-light); color: var(--accent); font-size: 12px; font-weight: 700; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
        .hero h1 { font-size: 36px; font-weight: 800; line-height: 1.15; margin-bottom: 12px; }
        .hero p { font-size: 16px; color: var(--text-secondary); line-height: 1.6; max-width: 520px; margin: 0 auto; }

        .demo-container { display: flex; justify-content: center; margin: 40px 0; }
        .step-indicators { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; }
        .step-dot { width: 10px; height: 10px; border-radius: 50%; background: #e5e7eb; transition: all 0.3s; }
        .step-dot.active { background: var(--accent); width: 28px; border-radius: 5px; }

        .demo-caption { text-align: center; margin-top: 16px; }
        .demo-caption h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
        .demo-caption p { font-size: 14px; color: var(--text-secondary); max-width: 400px; margin: 0 auto; }

        .cta-bottom { text-align: center; padding: 48px 0; }
        .cta-bottom h2 { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
        .cta-bottom p { color: var(--text-secondary); margin-bottom: 20px; }
        .cta-bottom a { display: inline-block; padding: 14px 28px; background: var(--accent); color: white; border-radius: 10px; font-weight: 700; text-decoration: none; }
        .branding { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 24px; }