.workflow-container{min-height:100vh;background:linear-gradient(-45deg,#667eea,#764ba2,#f093fb,#f5576c,#4facfe,#00f2fe);position:relative;overflow:hidden;z-index:1}.workflow-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 80%,rgba(120,119,198,.3) 0,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,119,198,.3) 0,transparent 50%),radial-gradient(circle at 40% 40%,rgba(120,219,255,.25) 0,transparent 50%);pointer-events:none}.workflow-container>.container{position:relative;z-index:2}.reveal-card{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1);will-change:opacity,transform}.reveal-card.visible{opacity:1;transform:translateY(0)}.workflow-step{position:relative;margin-bottom:2rem;cursor:pointer;transition:all .6s cubic-bezier(.4,0,.2,1);color:white}.step-header{padding:2rem;border-radius:1rem;border:1px solid rgba(255,255,255,.05);background:rgba(0,0,0,.3);backdrop-filter:blur(10px);transition:all .4s ease;position:relative;overflow:hidden}.step-header:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);transition:left .6s ease}.step-header:hover:before{left:100%}.step-content{max-height:0;overflow:hidden;transition:max-height .8s cubic-bezier(.4,0,.2,1);background:rgba(0,0,0,.4);border-radius:0 0 1rem 1rem;border:1px solid rgba(255,255,255,.03);border-top:none;backdrop-filter:blur(5px);color:white}.step-content p{color:white!important}.step-content.open{max-height:500px;animation:curtainOpen .8s cubic-bezier(.4,0,.2,1)}.step-content.closing{animation:curtainClose .6s cubic-bezier(.4,0,.2,1)}@keyframes curtainOpen{0%{max-height:0;opacity:0;transform:translateY(-20px)}50%{opacity:.5}to{max-height:500px;opacity:1;transform:translateY(0)}}@keyframes curtainClose{0%{max-height:500px;opacity:1;transform:translateY(0)}50%{opacity:.5}to{max-height:0;opacity:0;transform:translateY(-20px)}}.step-inner-content{padding:2rem;transform:translateY(20px);opacity:0;transition:all .4s ease .2s}.step-content.open .step-inner-content{transform:translateY(0);opacity:1}.step-number{width:4rem;height:4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.5rem;margin-right:1.5rem;transition:all .3s ease;border:3px solid rgba(255,255,255,.1);box-shadow:0 4px 20px rgba(0,0,0,.6)}.step-number-text{color:white;font-weight:800}.step-number-text,.step-title{text-shadow:0 2px 8px rgba(0,0,0,.8)}.step-title{color:#ffffff!important;font-weight:700}.step-content *{color:white!important}.step-title-icon{margin-right:.75rem;font-size:1.25rem;filter:drop-shadow(0 2px 8px rgba(0,0,0,.8))}.workflow-step-container{position:relative;display:flex;align-items:flex-start;margin-bottom:2rem}.left-arrow-container{position:absolute;left:-80px;top:50%;transform:translateY(-50%);z-index:3}.step-content-wrapper{flex:1;position:relative;z-index:2}.workflow-arrow{position:relative;height:100px;width:8px;display:flex;flex-direction:column;align-items:center;justify-content:center}.arrow-line{width:8px;height:70px;background:linear-gradient(180deg,rgba(102,126,234,1),rgba(240,147,251,.95) 50%,rgba(79,172,254,1));border-radius:4px;position:relative;overflow:hidden;box-shadow:0 0 20px rgba(139,92,246,.5)}.arrow-line:before{content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.8) 50%,transparent);animation:arrowFlow 2s ease-in-out infinite}.arrow-head{width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:18px solid #f093fb;margin-top:-3px;animation:arrowBounce 2s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(244,114,182,.6))}.arrow-pulse{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border:3px solid rgba(139,92,246,.6);border-radius:50%;animation:arrowPulse 2s ease-in-out infinite}.arrow-label{margin-top:.75rem;font-size:.8rem;color:rgba(255,255,255,.9);font-weight:600;text-align:center;opacity:0;animation:labelFade 3s ease-in-out infinite;text-shadow:0 2px 4px rgba(0,0,0,.5);background:rgba(139,92,246,.2);padding:.25rem .5rem;border-radius:.5rem;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.workflow-title{background:linear-gradient(135deg,#ffffff,#f1f5f9 25%,#cbd5e1 50%,#ffffff 75%,#e2e8f0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;margin-bottom:3rem;filter:drop-shadow(0 4px 12px rgba(0,0,0,.8))}.workflow-subtitle{color:rgba(255,255,255,.9);text-align:center;margin-bottom:4rem;max-width:600px;margin-left:auto;margin-right:auto;text-shadow:0 2px 4px rgba(0,0,0,.5)}.interactive-dots-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.interactive-dots-canvas{width:100%;height:100%;pointer-events:auto;cursor:crosshair}.dots-controls{position:fixed;top:20px;right:20px;display:flex;gap:10px;align-items:center;z-index:10;pointer-events:auto}.dots-control-btn{background:rgba(30,27,75,.9);color:white;border:none;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.dots-control-btn:hover{background:rgba(49,46,129,.9);transform:translateY(-2px)}.dots-instructions{background:rgba(0,0,0,.8);color:white;padding:6px 12px;border-radius:15px;font-size:12px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.step-understand{background:linear-gradient(135deg,#667eea,#764ba2)}.step-poc{background:linear-gradient(135deg,#764ba2,#f093fb)}.step-refine{background:linear-gradient(135deg,#f093fb,#f5576c)}.step-draft{background:linear-gradient(135deg,#f5576c,#4facfe)}.step-final-refine{background:linear-gradient(135deg,#4facfe,#00f2fe)}.step-deliver{background:linear-gradient(135deg,#00f2fe,#667eea)}.step-icon{font-size:1.5rem;margin-bottom:.5rem}.free-badge{background:linear-gradient(135deg,#667eea,#764ba2);color:white;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:600;margin-left:1rem;animation:pulse 2s infinite;border:1px solid rgba(255,255,255,.2)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.chevron{transition:transform .3s ease;color:rgba(255,255,255,.8)}.chevron.open{transform:rotate(180deg)}@media (max-width:768px){.step-header,.step-inner-content{padding:1.5rem}.left-arrow-container{left:-60px}.workflow-arrow{height:80px;width:6px}.arrow-line{width:6px;height:50px}.arrow-head{border-left-width:8px;border-right-width:8px;border-top-width:12px}.step-number{width:3rem;height:3rem;font-size:1.2rem}}