.how-to-use-dynamic{background:#ffffff03;overflow:hidden;padding:100px 0;position:relative}.dynamic-showcase{grid-gap:80px;align-items:center;display:grid;gap:80px;grid-template-columns:1fr 1fr;margin-top:60px}.showcase-content{position:relative;z-index:2}.content-wrapper{min-height:500px;overflow:hidden;padding:50px;position:relative}.step-number-bg{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#ffffff26,#ffffff08);-webkit-background-clip:text;background-clip:text;font-size:180px;font-weight:900;left:30px;line-height:1;pointer-events:none;position:absolute;top:-20px;z-index:0}.step-badge{border-radius:50px;display:inline-block;font-size:14px;font-weight:700;margin-bottom:20px;padding:8px 20px;position:relative;z-index:1}.content-wrapper h3{font-size:42px;font-weight:900;line-height:1.2;margin-bottom:12px;position:relative;z-index:1}.subtitle{display:block;font-size:20px;font-weight:600;margin-bottom:24px}.description{color:#fffc;font-size:16px;line-height:1.8;margin-bottom:30px}.features-list{list-style:none;margin-bottom:30px;padding:0}.features-list li{align-items:center;border-bottom:1px solid #ffffff0d;color:#ffffffe6;display:flex;font-size:15px;gap:15px;padding:12px 0}.features-list li:last-child{border-bottom:none}.checkmark{align-items:center;background:linear-gradient(135deg,#4ade80,#22c55e);border-radius:50%;display:flex;flex-shrink:0;font-size:14px;font-weight:700;height:24px;justify-content:center;width:24px}.progress-bar-container{margin-top:30px}.progress-bar{background:#ffffff1a;border-radius:50px;height:8px;margin-bottom:10px;overflow:hidden;width:100%}.progress-fill{background:linear-gradient(90deg,#fff,#b0b0b0);border-radius:50px;height:100%;transition:width .5s ease}.progress-text{color:#ffffffb3;font-size:14px;font-weight:600}.controls{gap:20px;margin-top:40px}.control-btn,.controls{align-items:center;display:flex;justify-content:center}.control-btn{border:none;border-radius:50%;color:#fff;cursor:pointer;font-size:20px;height:50px;transition:all .3s ease;width:50px}.control-btn:hover{background:#ffffff26}.dots-container{align-items:center;display:flex;gap:12px}.dot{background:none;border:none;color:#ffffff4d;cursor:pointer;font-size:12px;padding:0;transition:all .3s ease}.dot.active{color:#fff;font-size:16px}.dot:hover{color:#ffffffb3}.showcase-image{align-items:center;display:flex;justify-content:center;position:relative}.phone-mockup-dynamic{height:auto;padding:15px;perspective:1000px;position:relative;transform-style:preserve-3d;width:380px}.phone-frame{align-items:flex-start;background:#000;border-radius:45px;box-shadow:0 20px 60px #00000080,inset 0 0 0 2px #ffffff1a;display:flex;height:auto;justify-content:center;overflow:hidden;padding:35px 0 0;position:relative;width:100%}.phone-notch{background:#000;border-radius:0 0 20px 20px;height:30px;left:50%;position:absolute;top:0;transform:translateX(-50%);width:150px;z-index:10}.phone-frame img{background:#0a0a0a;display:block;height:auto;object-fit:contain;width:100%}.floating-info{align-items:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:50px;box-shadow:0 8px 32px #0000004d;display:flex;font-size:14px;font-weight:700;gap:10px;padding:12px 20px;position:absolute;white-space:nowrap}.info-1{background:#4ade8033;border:1px solid #4ade804d;right:-50px;top:10%}.info-2{background:#ffc85733;border:1px solid #ffc8574d;bottom:15%;left:-50px}.info-icon{font-size:18px}.phone-mockup-dynamic:hover{transform:rotateY(5deg) rotateX(-5deg)}@media (max-width:1200px){.dynamic-showcase{gap:60px}.phone-mockup-dynamic{height:600px;width:300px}.content-wrapper h3{font-size:36px}.step-number-bg{font-size:150px}}@media (max-width:1024px){.dynamic-showcase{gap:50px;grid-template-columns:1fr}.showcase-image{order:-1}.floating-info{display:none}.phone-mockup-dynamic{height:640px;width:320px}}@media (max-width:768px){.how-to-use-dynamic{padding:60px 0}.section-title{font-size:32px}.section-description{font-size:16px}.content-wrapper{min-height:auto;padding:35px 25px}.content-wrapper h3{font-size:26px;margin-bottom:10px}.subtitle{font-size:17px;margin-bottom:20px}.description{font-size:15px;margin-bottom:25px}.step-number-bg{font-size:100px;left:15px;top:-5px}.step-badge{font-size:13px;padding:6px 16px}.features-list li{font-size:14px;padding:10px 0}.checkmark{font-size:12px;height:20px;width:20px}.phone-mockup-dynamic{width:300px}.controls{gap:15px;margin-top:25px}.control-btn{font-size:18px;height:45px;width:45px}.dots-container{gap:10px}}@media (max-width:480px){.how-to-use-dynamic{padding:50px 0}.section-title{font-size:26px}.section-description{font-size:14px}.content-wrapper{padding:30px 20px}.content-wrapper h3{font-size:22px;margin-bottom:8px}.subtitle{font-size:15px;margin-bottom:16px}.description{font-size:14px;margin-bottom:20px}.features-list li{font-size:13px;gap:12px;padding:8px 0}.checkmark{font-size:11px;height:18px;width:18px}.phone-mockup-dynamic{padding:12px;width:260px}.step-number-bg{font-size:80px;left:10px;top:0}.step-badge{font-size:12px;padding:5px 14px}.controls{gap:12px;margin-top:20px}.control-btn{font-size:16px;height:40px;width:40px}.dot{font-size:10px}.dot.active{font-size:14px}.progress-text{font-size:13px}}@keyframes slideInLeft{0%{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}@keyframes slideInRight{0%{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.content-wrapper *{transition:all .3s ease}.glass-morphism-card{backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);background:#ffffff0d;border:1px solid #ffffff1a;box-shadow:0 8px 32px #0006,inset 0 1px 0 #ffffff1a}.features-list li:hover{background:#ffffff05;padding-left:10px}.features-list li:hover .checkmark{transform:scale(1.1)}