.process{align-items:flex-start;display:flex;gap:1.5rem}.step-badge{align-items:center;background:transparent;border-radius:9999px;color:#fff;display:flex;flex-shrink:0;font-size:1.25rem;font-weight:700;height:3rem;justify-content:center;width:3rem}.step-badge svg{fill:var(--color-primary)!important}.timeline-line{background:linear-gradient(180deg,#60a5fa,#a78bfa,#f472b6);border-radius:2px;height:100%;left:50%;opacity:.2;position:absolute;top:0;transform:translateX(-50%);width:4px;z-index:0}.process-step{background:#fff;border:1.5px solid transparent;border-radius:1.25rem;box-shadow:0 12px 28px rgba(0,0,0,.08);margin-bottom:2rem;padding:2.5rem 2rem;position:relative;transition:box-shadow .3s,border .3s,transform .3s;z-index:1}.process-step:hover{border:1.5px solid #60a5fa;box-shadow:0 18px 36px rgba(0,0,0,.13);transform:translateY(-8px) scale(1.02)}.icon-circle{align-items:center;border-radius:9999px;box-shadow:0 4px 16px rgba(var(--color-primary-rgb),.1);color:#fff;display:flex;font-size:2rem;font-weight:700;height:4.5rem;justify-content:center;margin:0 auto 1.5rem;transition:background .3s;width:4.5rem}.group:hover .icon-circle,.icon-circle{background:linear-gradient(135deg,var(--color-primary) 0,var(--color-primary) 100%)}.group:hover .icon-circle{opacity:.9}.bg-grid-pattern{background-image:linear-gradient(90deg,#80808012 1px,transparent 0),linear-gradient(180deg,#80808012 1px,transparent 0);background-size:24px 24px}@keyframes blob{0%{transform:translate(0) scale(1)}33%{transform:translate(30px,-50px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.9)}to{transform:translate(0) scale(1)}}.animate-blob{animation:blob 7s infinite}.animation-delay-2000{animation-delay:2s}.animation-delay-4000{animation-delay:4s}.perspective-1000{perspective:1000px}.transform-style-3d{transform-style:preserve-3d}.backface-hidden{backface-visibility:hidden}.rotate-y-180{transform:rotateY(180deg)}.process-step-card{margin-bottom:2rem;min-height:300px}.process-step-card:hover .card-inner{transform:rotateY(180deg)}.process-container{overflow:hidden;padding:4rem 0;position:relative}.animated-bg{background:linear-gradient(45deg,#f3f4f6,#fff);inset:0;position:absolute;z-index:0}.animated-bg:before{animation:pulse 8s ease-in-out infinite alternate;background:radial-gradient(circle at 20% 20%,rgba(59,130,246,.05) 0,transparent 50%),radial-gradient(circle at 80% 80%,rgba(139,92,246,.05) 0,transparent 50%);content:"";inset:0;position:absolute}.floating-element{animation:float 6s ease-in-out infinite;backdrop-filter:blur(8px);background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(139,92,246,.1));border-radius:50%;position:absolute}.floating-element:first-child{animation-delay:0s;height:100px;left:5%;top:10%;width:100px}.floating-element:nth-child(2){animation-delay:2s;height:150px;right:5%;top:60%;width:150px}.floating-element:nth-child(3){animation-delay:4s;bottom:10%;height:80px;left:20%;width:80px}@keyframes float{0%,to{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(5deg)}}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}@media (max-width:768px){.process-step-card{min-height:250px}.floating-element{display:none}}.glass-effect{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.7);border:1px solid hsla(0,0%,100%,.2);box-shadow:0 8px 32px rgba(0,0,0,.1)}.card-back,.card-front{transition:all .6s cubic-bezier(.4,0,.2,1)}.card-front{background:none;border-color:hsla(0,0%,52%,.553)}.card-front p{color:#8e8e8e}.icon-wrapper:hover{transform:translateY(-5px)}.gradient-text{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;background-clip:text}.process-step-card svg{fill:currentColor;stroke:currentColor;color:var(--color-primary);transition:color .3s ease}.process-step-card:hover svg{color:var(--color-primary);opacity:.8}.card-front svg{fill:currentColor;stroke:currentColor;color:var(--color-primary)}.card-back svg{fill:currentColor!important;stroke:currentColor!important;color:#fff!important;opacity:1}.icon-wrapper svg{fill:currentColor;stroke:currentColor;transform:scale(1);transition:transform .3s ease,color .3s ease}.dark-mode .icon-wrapper>div{background:none}.icon-wrapper:hover svg{color:var(--color-primary);transform:scale(1.1)}.card-back .icon-wrapper svg,.card-back:hover .icon-wrapper svg{fill:currentColor!important;stroke:currentColor!important;color:#fff!important;opacity:1}.gradient-svg{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,var(--color-primary),var(--color-primary));-webkit-background-clip:text;background-clip:text}@keyframes svgPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.process-step-card:hover .icon-wrapper svg{animation:svgPulse 2s infinite}.dark-mode .process-container{background:var(--dark-bg)}.dark-mode .process-container p{color:#94a3b8}.dark-mode .process-step{background:rgba(30,41,59,.8);border:1.5px solid rgba(148,163,184,.1);box-shadow:0 12px 28px rgba(0,0,0,.2)}.dark-mode .process-step:hover{background:rgba(30,41,59,.9);border-color:var(--color-primary);box-shadow:0 18px 36px rgba(0,0,0,.3)}.dark-mode .icon-circle{background:linear-gradient(135deg,var(--color-primary) 0,var(--color-primary) 100%);box-shadow:0 4px 16px rgba(var(--color-primary-rgb),.2)}.dark-mode .animated-bg{background:var(--dark-bg)}.dark-mode .animated-bg:before{background:radial-gradient(circle at 20% 20%,rgba(59,130,246,.1) 0,transparent 50%),radial-gradient(circle at 80% 80%,rgba(139,92,246,.1) 0,transparent 50%)}.dark-mode .floating-element{backdrop-filter:blur(12px);background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(139,92,246,.15))}.dark-mode .card-front{background:rgba(30,41,59,.8);border-color:rgba(148,163,184,.2)}.dark-mode .card-front h4{color:#e2e8f0}.dark-mode .card-front p{color:#94a3b8}.dark-mode .icon-wrapper>div{background:rgba(30,41,59,.8)}.dark-mode .process-step-card svg{color:var(--color-primary);opacity:.9}.dark-mode .card-back{background:linear-gradient(135deg,var(--color-primary) 0,var(--color-primary) 100%)}.dark-mode .card-back h4,.dark-mode .card-back p{color:#fff}.dark-mode .gradient-text{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#60a5fa,#a78bfa);-webkit-background-clip:text;background-clip:text}@media (max-width:500px){.process-container h2{font-size:27px}.process-container .heading-text-container p{font-size:12px}}
