.projectscallout-modern{position:relative;background:linear-gradient(135deg,#0a0a0a,#101d29 50%,#0b151e);color:#ffffff;padding:80px 0;overflow:hidden;min-height:70vh;display:flex;align-items:center}.projectscallout-background{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0}.projectscallout-bg-gradient{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at top right,rgba(0,230,195,.12) 0,transparent 50%),radial-gradient(ellipse at bottom left,rgba(0,212,255,.08) 0,transparent 50%),radial-gradient(ellipse at center,rgba(0,230,195,.04) 0,transparent 70%);animation:projectscallout-gradientShift 10s ease-in-out infinite alternate}@keyframes projectscallout-gradientShift{0%{opacity:.7;transform:scale(1) rotate(-2deg)}to{opacity:1;transform:scale(1.08) rotate(2deg)}}.projectscallout-bg-pattern{position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 25% 75%,rgba(0,230,195,.02) 2px,transparent 0),radial-gradient(circle at 75% 25%,rgba(0,212,255,.02) 2px,transparent 0);background-size:50px 50px;animation:projectscallout-patternFlow 20s linear infinite}@keyframes projectscallout-patternFlow{0%{background-position:0 0,25px 25px}to{background-position:50px 50px,75px 75px}}.projectscallout-floating-elements{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:1}.projectscallout-float-element{position:absolute;width:6px;height:6px;background:linear-gradient(45deg,#00e6c3,#00d4ff);border-radius:50%;opacity:.3}.projectscallout-float-1{top:20%;left:15%;animation:projectscallout-floatAround 8s ease-in-out infinite}.projectscallout-float-2{top:60%;right:20%;animation:projectscallout-floatAround 12s ease-in-out infinite reverse}.projectscallout-float-3{bottom:30%;left:80%;animation:projectscallout-floatAround 10s ease-in-out infinite}@keyframes projectscallout-floatAround{0%,to{transform:translateY(0) translateX(0) rotate(0deg);opacity:.2}50%{transform:translateY(-30px) translateX(15px) rotate(180deg);opacity:.5}}.projectscallout-container{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:0 40px}.projectscallout-badge{display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,rgba(0,230,195,.12),rgba(0,212,255,.08));border:1px solid rgba(0,230,195,.25);border-radius:50px;padding:14px 28px;margin:0 auto 50px;width:-moz-fit-content;width:fit-content;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);animation:projectscallout-badgeShine 4s ease-in-out infinite alternate}@keyframes projectscallout-badgeShine{0%{box-shadow:0 0 25px rgba(0,230,195,.2)}to{box-shadow:0 0 40px rgba(0,230,195,.4)}}.projectscallout-badge-icon{color:#00e6c3;font-size:1rem}.projectscallout-badge span{color:#ffffff;font-weight:600;font-size:1rem}.projectscallout-content{display:grid;grid-template-columns:1fr 1fr;grid-gap:70px;gap:70px;align-items:center}.projectscallout-text{padding:20px 0}.projectscallout-text-content{max-width:100%}.projectscallout-title{font-size:clamp(2.5rem,4vw,3.5rem);font-weight:800;margin-bottom:25px;line-height:1.2;color:#ffffff;animation:projectscallout-textGlow 1.5s ease-out}.projectscallout-highlight{color:#00e6c3;position:relative;font-size:inherit;font-weight:inherit;line-height:inherit}.projectscallout-gradient-text{background:linear-gradient(135deg,#00e6c3,#00d4ff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 200%;animation:projectscallout-gradientFlow 3s ease-in-out infinite;font-size:inherit;font-weight:inherit;line-height:inherit}@keyframes projectscallout-gradientFlow{0%,to{background-position:0 50%}50%{background-position:100% 50%}}@keyframes projectscallout-textGlow{0%{opacity:.5;transform:scaleX(.7)}to{opacity:1;transform:scaleX(1)}}.projectscallout-description{font-size:1.18rem;line-height:1.6;color:rgba(255,255,255,.85);margin-bottom:35px}.projectscallout-success-metrics{display:flex;gap:30px;margin-bottom:40px}.projectscallout-metric-item{text-align:center;padding:20px 25px;background:rgba(0,230,195,.06);border:1px solid rgba(0,230,195,.12);border-radius:16px;transition:all .3s ease;flex:1 1}.projectscallout-metric-item:hover{background:rgba(0,230,195,.1);border-color:rgba(0,230,195,.2);transform:translateY(-3px)}.projectscallout-metric-number{font-size:2rem;font-weight:800;color:#00e6c3;line-height:1;margin-bottom:8px}.projectscallout-metric-label{font-size:.9rem;color:rgba(255,255,255,.8);font-weight:500}.projectscallout-examples{display:flex;flex-direction:column;gap:20px;margin-bottom:40px}.projectscallout-example-item{display:flex;align-items:center;gap:15px;padding:15px 20px;background:rgba(255,255,255,.02);border-radius:12px;border:1px solid rgba(255,255,255,.05);transition:all .3s ease}.projectscallout-example-item:hover{background:rgba(0,230,195,.05);border-color:rgba(0,230,195,.1);transform:translateX(5px)}.projectscallout-example-icon{font-size:1.5rem;min-width:30px}.projectscallout-example-content{display:flex;flex-direction:column;gap:2px}.projectscallout-example-content strong{color:#ffffff;font-weight:600}.projectscallout-example-content span{color:rgba(255,255,255,.7);font-size:.9rem}.projectscallout-actions{display:flex;flex-direction:column;gap:20px}.projectscallout-btn,.projectscallout-secondary-btn{display:inline-flex;align-items:center;gap:12px;padding:18px 32px;border-radius:50px;font-weight:700;font-size:1rem;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);border:none;cursor:pointer;position:relative;overflow:hidden}.projectscallout-btn.projectscallout-primary{background:linear-gradient(135deg,#00e6c3,#00d4ff);color:#000}.projectscallout-btn.projectscallout-primary:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(0,230,195,.4);color:#000}.projectscallout-secondary-btn{background:transparent;color:#ffffff;border:2px solid rgba(255,255,255,.2)}.projectscallout-secondary-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#ffffff;transform:translateY(-2px)}.projectscallout-btn-icon{font-size:1rem}.projectscallout-btn-arrow{transition:transform .3s ease}.projectscallout-btn:hover .projectscallout-btn-arrow{transform:translateX(4px)}.projectscallout-visual{position:relative}.projectscallout-image-wrapper{position:relative;padding:30px;background:linear-gradient(135deg,rgba(0,230,195,.1),rgba(0,212,255,.05));border-radius:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.projectscallout-image-container{position:relative;overflow:hidden;border-radius:20px;box-shadow:0 25px 50px rgba(0,0,0,.3)}.projectscallout-image{width:100%;height:auto;display:block;transition:transform .4s ease}.projectscallout-image-container:hover .projectscallout-image{transform:scale(1.02)}.projectscallout-image-overlay{position:absolute;top:20px;right:20px;z-index:2}.projectscallout-overlay-badge{background:linear-gradient(135deg,rgba(0,230,195,.9),rgba(0,212,255,.8));color:#000;padding:10px 18px;border-radius:25px;font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.projectscallout-image-stats{position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);display:flex;gap:15px;z-index:3}.projectscallout-stat-box{background:rgba(17,17,17,.9);border:1px solid rgba(0,230,195,.2);border-radius:15px;padding:15px 20px;text-align:center;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);transition:all .3s ease}.projectscallout-stat-box:hover{border-color:rgba(0,230,195,.4);transform:translateY(-2px)}.projectscallout-stat-icon{font-size:1.5rem;margin-bottom:5px;display:block}.projectscallout-stat-content{display:flex;flex-direction:column;gap:2px}.projectscallout-stat-number{font-size:1.3rem;font-weight:800;color:#00e6c3}.projectscallout-stat-label{font-size:.8rem;color:rgba(255,255,255,.7)}.projectscallout-content-separator{display:flex;align-items:center;gap:20px;margin:60px 0 40px;padding:20px 0}.projectscallout-separator-line{flex:1 1;height:1px;background:linear-gradient(90deg,transparent,rgba(0,230,195,.3),transparent)}.projectscallout-separator-text{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.8);font-weight:600;font-size:.9rem;white-space:nowrap}.projectscallout-separator-icon{color:#00e6c3;font-size:.8rem}.projectscallout-showcase-section{background:linear-gradient(135deg,rgba(0,230,195,.02),rgba(0,212,255,.01));border-top:1px solid rgba(0,230,195,.1);padding:60px 0 40px;margin-top:40px}.projectscallout-showcase-container{max-width:1400px;margin:0 auto;padding:0 40px}.projectscallout-showcase-header{text-align:center;margin-bottom:50px}.projectscallout-showcase-title{font-size:clamp(2rem,3.5vw,2.8rem);font-weight:700;margin-bottom:16px;color:#ffffff}.projectscallout-showcase-subtitle{font-size:1.1rem;color:rgba(255,255,255,.7);max-width:600px;margin:0 auto;line-height:1.5}.projectscallout-projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));grid-gap:30px;gap:30px;margin-bottom:50px}.projectscallout-project-item{width:100%}.projectscallout-project-card{background:linear-gradient(135deg,rgba(17,17,17,.9),rgba(30,30,30,.8));border-radius:20px;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);border:1px solid rgba(0,230,195,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;height:100%}.projectscallout-project-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.3),0 0 30px rgba(0,230,195,.2);border-color:rgba(0,230,195,.3)}.projectscallout-project-image-wrapper{position:relative;overflow:hidden;height:200px;cursor:pointer}.projectscallout-project-image{width:100%;height:100%;object-fit:cover;transition:all .4s ease}.projectscallout-project-card:hover .projectscallout-project-image{transform:scale(1.05)}.projectscallout-project-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(0,230,195,.9),rgba(0,212,255,.8));display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.projectscallout-project-card:hover .projectscallout-project-overlay{opacity:1}.projectscallout-overlay-content{display:flex;flex-direction:column;align-items:center;gap:8px;color:#000;font-weight:600}.projectscallout-overlay-icon{font-size:1.5rem;margin-bottom:4px}.projectscallout-project-badge{position:absolute;top:12px;right:12px;background:linear-gradient(135deg,rgba(0,230,195,.9),rgba(0,212,255,.8));color:#000;padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:600;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:2}.projectscallout-project-details{padding:20px;display:flex;gap:15px;align-items:flex-start}.projectscallout-project-number{font-size:1.5rem;font-weight:800;color:#00e6c3;min-width:35px;margin-top:2px}.projectscallout-project-info{flex:1 1}.projectscallout-project-title{font-size:1.2rem;font-weight:700;color:#ffffff;margin:0 0 8px;line-height:1.3}.projectscallout-project-tech{font-size:.9rem;color:rgba(255,255,255,.7);margin:0 0 12px;line-height:1.4}.projectscallout-project-link{display:inline-flex;align-items:center;gap:6px;color:#00e6c3;text-decoration:none;font-size:.9rem;font-weight:600;transition:all .3s ease}.projectscallout-project-link:hover{color:#00d4ff;transform:translateX(2px)}.projectscallout-link-icon{font-size:.8rem}.projectscallout-showcase-actions{text-align:center}.projectscallout-showcase-btn{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(135deg,#00e6c3,#00d4ff);color:#000;text-decoration:none;padding:16px 32px;border-radius:50px;font-weight:700;font-size:1rem;transition:all .3s cubic-bezier(.4,0,.2,1);border:none;cursor:pointer;position:relative;overflow:hidden}.projectscallout-showcase-btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(0,230,195,.3);color:#000}.projectscallout-showcase-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.projectscallout-showcase-btn:hover:before{left:100%}.projectscallout-showcase-btn:hover .projectscallout-btn-arrow{transform:translateX(4px)}.projectscallout-modern{opacity:0;transform:translateY(40px);transition:all .9s ease}.projectscallout-modern.projectscallout-visible{opacity:1;transform:translateY(0)}@media (max-width:1024px){.projectscallout-container{padding:0 30px}.projectscallout-content{gap:50px}.projectscallout-success-metrics{gap:20px}.projectscallout-metric-item{padding:15px 20px}.projectscallout-showcase-container{padding:0 30px}.projectscallout-projects-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px}.projectscallout-project-details{padding:18px}}@media (max-width:768px){.projectscallout-modern{padding:60px 0}.projectscallout-container{padding:0 20px}.projectscallout-content{grid-template-columns:1fr;gap:40px;text-align:center}.projectscallout-text{order:1}.projectscallout-visual{order:2}.projectscallout-success-metrics{flex-direction:column;gap:15px;align-items:center}.projectscallout-metric-item{width:100%;max-width:280px}.projectscallout-example-item{text-align:left}.projectscallout-actions{flex-direction:column;align-items:center;gap:15px}.projectscallout-btn,.projectscallout-secondary-btn{width:100%;max-width:320px;justify-content:center}.projectscallout-image-stats{flex-direction:column;gap:12px}.projectscallout-content-separator{margin:40px 0 30px;gap:15px}.projectscallout-separator-text{font-size:.8rem;gap:6px}.projectscallout-showcase-section{padding:40px 0 30px}.projectscallout-showcase-container{padding:0 20px}.projectscallout-showcase-header{margin-bottom:35px}.projectscallout-projects-grid{grid-template-columns:1fr;gap:20px;margin-bottom:35px}.projectscallout-project-details{padding:15px;gap:12px}.projectscallout-project-number{font-size:1.3rem}.projectscallout-project-title{font-size:1.1rem}}@media (max-width:480px){.projectscallout-modern{padding:50px 0}.projectscallout-container{padding:0 15px}.projectscallout-badge{margin-bottom:35px;padding:12px 24px}.projectscallout-badge span{font-size:.9rem}.projectscallout-title{font-size:2.2rem}.projectscallout-description{font-size:1.05rem}.projectscallout-image-wrapper{padding:20px}.projectscallout-overlay-badge{padding:8px 14px;font-size:.8rem}.projectscallout-stat-box{padding:12px 16px}.projectscallout-stat-icon{font-size:1.3rem}.projectscallout-float-1,.projectscallout-float-2,.projectscallout-float-3{display:none}.projectscallout-showcase-container{padding:0 15px}.projectscallout-showcase-section{padding:35px 0 25px}.projectscallout-projects-grid{gap:15px;margin-bottom:25px}.projectscallout-project-image-wrapper{height:180px}.projectscallout-project-details{padding:12px;gap:10px}.projectscallout-project-number{font-size:1.1rem;min-width:30px}.projectscallout-project-title{font-size:1rem}.projectscallout-project-tech{font-size:.8rem}.projectscallout-showcase-btn{padding:14px 24px;font-size:.9rem}}@media (prefers-reduced-motion:reduce){.projectscallout-badgeShine,.projectscallout-floatAround,.projectscallout-gradientFlow,.projectscallout-gradientShift,.projectscallout-patternFlow,.projectscallout-textGlow{animation:none}}.projectscallout-btn:focus,.projectscallout-project-link:focus,.projectscallout-secondary-btn:focus,.projectscallout-showcase-btn:focus{outline:2px solid #00e6c3;outline-offset:2px}