/* FunnelSketch Module Styles */
.funnel-3d { max-width: 400px; margin: 0 auto; perspective: 800px; padding: var(--space-8) 0; }
.funnel-stage { padding: var(--space-5) var(--space-6); margin: 0 auto; text-align: center; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-base); position: relative; border: 1px solid var(--border); }
.funnel-stage:hover { transform: scale(1.03); }
.funnel-stage.tofu { background: rgba(51,232,255,0.1); border-color: rgba(51,232,255,0.3); width: 100%; }
.funnel-stage.mofu { background: rgba(123,94,255,0.1); border-color: rgba(123,94,255,0.3); width: 80%; }
.funnel-stage.bofu { background: rgba(189,255,71,0.1); border-color: rgba(189,255,71,0.3); width: 55%; }
.funnel-stage .stage-label { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-bold); margin-bottom: var(--space-1); }
.funnel-stage .stage-desc { font-size: var(--text-xs); color: var(--text-muted); }
.funnel-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.funnel-particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-cyan); opacity: 0.6; animation: confettiFall 4s linear infinite; }
.funnel-content-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 767px) { .funnel-content-cards { grid-template-columns: repeat(2, 1fr); } }
.funnel-node-diagram { padding: var(--space-6) 0; }
.funnel-node-diagram svg { width: 100%; }
.funnel-node { cursor: pointer; transition: all var(--transition-fast); }
.funnel-node:hover { transform: scale(1.05); }
.funnel-node.expanded { }
.ad-workshop { display: grid; gap: var(--space-6); }
.ad-workshop .ad-preview { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); }