.charts-hero{padding:var(--space-3xl) var(--space-xl);border-radius:var(--radius-lg);background:linear-gradient(135deg,#00ffff14,#7b61ff0f,#ff00ff0a);text-align:center;margin-top:var(--space-lg)}.charts-hero .upload-title{margin-bottom:var(--space-md)}.charts-showcase{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3xl);align-items:center;margin:var(--space-3xl) 0;padding:var(--space-xl) 0}.charts-showcase--reverse{direction:rtl}.charts-showcase--reverse>*{direction:ltr}.charts-showcase-visual{border-radius:var(--radius-lg);overflow:hidden}.charts-showcase-visual img{width:100%;height:auto;display:block;border-radius:var(--radius-lg);border:1px solid var(--color-border-muted);transition:transform .3s ease}.charts-showcase-visual img:hover{transform:scale(1.02)}.charts-showcase-title{font-size:1.5rem;font-weight:700;color:var(--color-text-muted);margin:0 0 var(--space-md)}.charts-showcase-desc{font-size:.95rem;color:var(--color-text-dim);line-height:1.7;margin:0 0 var(--space-lg)}.charts-feature-list{list-style:none;padding:0;margin:0}.charts-feature-list li{position:relative;padding-left:var(--space-lg);margin-bottom:var(--space-sm);font-size:.9rem;color:var(--color-text-soft);line-height:1.5}.charts-feature-list li:before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--color-accent-cyan),var(--color-accent-violet))}.charts-showcase-visual--live{border:1px solid var(--color-border-muted);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface-2)}.charts-live-container{aspect-ratio:3 / 2;width:100%}@media(max-width:900px){.charts-showcase{grid-template-columns:1fr;gap:var(--space-xl)}.charts-showcase--reverse{direction:ltr}.charts-showcase-title{font-size:1.3rem}}@media(max-width:768px){.charts-hero{padding:var(--space-xl) var(--space-lg)}}@media(max-width:480px){.charts-showcase{margin:var(--space-xl) 0;padding:var(--space-md) 0}.charts-showcase-title{font-size:1.15rem}.charts-feature-list li{font-size:.85rem}}body.light .charts-hero{background:linear-gradient(135deg,#00a0a00d,#5a37ff0a,#c020c008)}body.light .charts-showcase-visual img{border-color:var(--color-border-light)}body.light .charts-showcase-visual--live{border-color:var(--color-border-light);background:var(--color-surface-haze)}
