.how-it-works-section{padding:6rem 4rem;background-color:#f9f9f9;text-align:center}.how-it-works-header{margin-bottom:5rem}.section-label{font-family:var(--font-body);font-weight:600;font-size:.9rem;color:#f5a623;text-transform:uppercase;letter-spacing:2px;margin-bottom:1rem}.how-it-works-header h2,.showcase-header h2,.video-section h2{font-family:var(--font-heading);font-weight:800;font-size:2.8rem;color:var(--color-text-dark)}.steps-container{display:flex;align-items:flex-start;justify-content:center;gap:0;max-width:1200px;margin:0 auto}.step{flex:1;max-width:340px;padding:0 2rem;text-align:center}.step-number{font-family:var(--font-heading);font-weight:800;font-size:3rem;color:#f5a62326;margin-bottom:1rem;line-height:1}.step-icon{width:72px;height:72px;background-color:#fef4e2;border:1px solid #fde4b0;border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem}.step-icon svg,.step-icon img{width:48px;height:48px;color:#f5a623;object-fit:contain}.step h3{font-family:var(--font-heading);font-weight:700;font-size:1.35rem;color:var(--color-text-dark);margin-bottom:1rem}.step p{font-family:var(--font-body);font-size:1.05rem;color:#777;line-height:1.7}.step-connector{display:flex;align-items:center;padding-top:5rem;flex-shrink:0}.step-connector svg{width:48px;height:24px;color:#ddd}.ui-showcase-section{padding:6rem 4rem;text-align:center;background:#fff;transition:background .5s ease;overflow:hidden}.ui-showcase-section.dark-preview{background:#0f1225}.ui-showcase-section.dark-preview .showcase-header h2{color:#fff}.ui-showcase-section.dark-preview .section-label{color:#f5a623}.showcase-header{margin-bottom:3rem}.showcase-controls{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:3rem}.showcase-tabs{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;max-width:100%}.theme-toggle{width:48px;height:48px;border-radius:50%;border:2px solid #e0e0e0;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .4s ease;flex-shrink:0;position:relative}.theme-toggle:hover{border-color:#f5a623;box-shadow:0 4px 15px #f5a62333}.theme-toggle svg{width:22px;height:22px;position:absolute;transition:all .4s ease}.toggle-sun{color:#f5a623;opacity:1;transform:rotate(0) scale(1)}.toggle-moon{color:#7c8db5;opacity:0;transform:rotate(-90deg) scale(.5)}.theme-toggle.dark{background:#1a1a2e;border-color:#333}.theme-toggle.dark .toggle-sun{opacity:0;transform:rotate(90deg) scale(.5)}.theme-toggle.dark .toggle-moon{opacity:1;transform:rotate(0) scale(1);color:#f5a623}.ui-showcase-section.dark-preview .showcase-tab{background:#1a1a2e;border-color:#333;color:#888}.ui-showcase-section.dark-preview .showcase-tab:hover{border-color:#f5a623;color:#f5a623}.ui-showcase-section.dark-preview .showcase-tab.active{background:#f5a623;border-color:#f5a623;color:#fff}.ui-showcase-section.dark-preview .showcase-device,.ui-showcase-section.dark-preview .showcase-screen{background:#1a1a2e}.showcase-tab{padding:.75rem 1.5rem;border:1px solid #e0e0e0;border-radius:50px;background:#fff;font-family:var(--font-body);font-weight:600;font-size:.95rem;color:#888;cursor:pointer;transition:all .3s ease}.showcase-tab:hover{border-color:#f5a623;color:#f5a623}.showcase-tab.active{background:#f5a623;border-color:#f5a623;color:#fff}.showcase-frame{max-width:1000px;margin:0 auto}.showcase-device{position:relative;background:#fff;border-radius:16px;padding:12px;box-shadow:0 8px 40px #00000014;overflow:hidden}.showcase-screen{width:100%;height:auto;display:none;border-radius:8px;background:#fff;-webkit-transform:translateZ(0);transform:translateZ(0)}.showcase-screen.active{display:block}.video-section{padding:6rem 4rem;background:#f9f9f9;text-align:center}.video-section-inner{max-width:900px;margin:0 auto;text-align:center}.video-section h2{margin-bottom:3rem}.video-player-frame{position:relative;display:inline-block;background:#1a1a2e;padding:10px 6px;border-radius:36px;box-shadow:0 24px 80px #00000026,inset 0 0 0 1px #ffffff0d;overflow:hidden}.video-player-frame video{display:block;height:70vh;width:auto;max-width:100%;border-radius:24px}@media(max-width:768px){.video-section{padding-left:0!important;padding-right:0!important}.video-section-inner{padding-left:0;padding-right:0}.video-section h2,.video-section .section-label{padding-left:1.5rem;padding-right:1.5rem}.video-player-frame{display:block!important;background:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important;width:100%!important}.video-player-frame video{width:100%!important;height:auto!important;max-width:100%!important;border-radius:0!important}}.video-big-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;background:#f5a623e6;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 8px 30px #f5a62366}.video-big-play svg{width:32px;height:32px;color:#fff;margin-left:4px}.video-big-play:hover{background:#f5a623;transform:translate(-50%,-50%) scale(1.08)}.video-big-play.hidden{opacity:0;pointer-events:none}@media(max-width:1100px){.steps-container{flex-direction:column;align-items:center;gap:2rem}.step{max-width:500px}.step-connector{padding-top:0;transform:rotate(90deg)}}@media(max-width:768px){.how-it-works-section{padding:4rem 2rem}.how-it-works-header h2,.showcase-header h2,.video-section h2{font-size:2rem}.ui-showcase-section{padding:4rem 1.5rem}.showcase-controls{flex-direction:column;gap:1rem}.showcase-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;padding:0;width:100%}.showcase-tab{padding:.6rem .5rem;font-size:.8rem;text-align:center;white-space:nowrap}.theme-toggle{width:42px;height:42px}.theme-toggle svg{width:18px;height:18px}.showcase-device{border-radius:12px;padding:8px}.showcase-screen{border-radius:6px}.video-section{padding:4rem 1.5rem}.video-big-play{width:60px;height:60px}.video-big-play svg{width:24px;height:24px}}@media(max-width:480px){.how-it-works-section{padding:3rem 1rem}.how-it-works-header h2,.showcase-header h2,.video-section h2{font-size:1.6rem}.step-number{font-size:2.2rem}.step-icon{width:56px;height:56px}.step-icon svg,.step-icon img{width:36px;height:36px}.step h3{font-size:1.15rem}.step p{font-size:.95rem}.step-connector{display:none}.ui-showcase-section{padding:3rem 1rem}.showcase-tab{padding:.5rem .3rem;font-size:.75rem}.video-section{padding:3rem 1rem}}.alternating-features{background-color:#e6e6e6;padding:6rem 4rem;display:flex;flex-direction:column;gap:8rem;align-items:center}.feature-row{max-width:1440px;width:100%;display:grid;grid-template-columns:1fr 1.2fr;gap:6rem;align-items:center}.feature-row.reverse{grid-template-columns:1.2fr 1fr}.feature-text-content{display:flex;flex-direction:column;justify-content:center}.feature-text-content h2{font-family:var(--font-heading);font-weight:800;font-size:3.5rem;line-height:1.2;color:var(--color-text-dark);margin-bottom:1.5rem}.feature-text-content p{font-family:var(--font-body);font-size:1.25rem;color:#555;margin-bottom:2rem;line-height:1.6}.feature-list-check{list-style:none;display:flex;flex-direction:column;gap:1rem}.feature-list-check li{display:flex;align-items:center;gap:1rem;font-family:var(--font-body);font-size:1.2rem;color:#666}.check-circle{min-width:28px;height:28px;background-color:var(--color-primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700}.feature-image-container{width:100%;display:flex;justify-content:center;align-items:center}.feature-showcase-img{width:100%;height:auto;border-radius:20px}@media(max-width:1100px){.feature-row,.feature-row.reverse{grid-template-columns:1fr;text-align:center;gap:3rem}.feature-list-check li{justify-content:center;text-align:left}.feature-row.reverse{display:flex;flex-direction:column-reverse}}@media(max-width:480px){.alternating-features{padding:2rem .75rem;gap:2.5rem;max-width:100%;width:100%;overflow-x:hidden}.feature-row{gap:1.5rem;max-width:100%;width:100%}.feature-text-content{max-width:100%}.feature-image-container{max-width:100%;width:100%}.feature-showcase-img{max-width:100%;width:100%;border-radius:12px}.feature-text-content h2{font-size:1.6rem;margin-bottom:.75rem}.feature-text-content p{font-size:.9rem;margin-bottom:1.25rem}.feature-list-check li{font-size:.85rem;gap:.6rem}.check-circle{min-width:20px;height:20px;font-size:.7rem}}.faq-section{background-color:#efefef;padding:6rem 4rem;display:flex;flex-direction:column;align-items:center}.faq-header{max-width:1440px;width:100%;margin-bottom:4rem}.faq-header h2{font-family:Nunito Sans,sans-serif;font-weight:500;font-size:3.5rem;color:var(--color-text-dark);margin-bottom:1rem}.faq-header p{font-family:Nunito,sans-serif;font-weight:600;font-size:1.25rem;color:#666;max-width:600px;line-height:1.6}.faq-container{max-width:1440px;width:100%;display:grid;grid-template-columns:300px 1fr;gap:4rem;align-items:flex-start}.faq-sidebar{display:flex;flex-direction:column;gap:1.5rem}.faq-category{display:flex;align-items:center;gap:1rem;cursor:pointer;padding:.5rem 0;transition:all .3s ease}.category-indicator{width:8px;height:30px;background-color:#ccc;border-radius:4px;transition:background-color .3s ease}.category-name{font-family:Nunito,sans-serif;font-weight:600;font-size:1.1rem;color:#666;transition:color .3s ease}.faq-category.active .category-indicator{background-color:var(--color-primary)}.faq-category.active .category-name{color:var(--color-text-dark);font-weight:700}.faq-category:hover .category-name{color:var(--color-text-dark)}.faq-content-card{background:#fff;border-radius:20px;padding:4rem;box-shadow:0 10px 40px #0000000d;min-height:400px}.faq-content-group{display:none;animation:fadeIn .4s ease}.faq-content-group.active{display:block}.group-title{font-family:var(--font-heading);font-weight:700;font-size:2rem;color:var(--color-text-dark);margin-bottom:3rem;border-bottom:1px solid #eee;padding-bottom:1.5rem}.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem}.qa-item h4{font-family:var(--font-heading);font-weight:700;font-size:1.25rem;color:var(--color-text-dark);margin-bottom:1rem}.qa-item p{font-family:var(--font-body);font-size:1.1rem;color:#666;line-height:1.7}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:900px){.faq-container{grid-template-columns:1fr;gap:2rem}.qa-grid{grid-template-columns:1fr}}@media(max-width:750px){.faq-sidebar{flex-direction:column;gap:.5rem;overflow-x:visible;padding-bottom:0}.faq-category{padding:.4rem 0}.category-name{font-size:.9rem}}@media(max-width:480px){.faq-section{padding:2rem .75rem;max-width:100%;overflow-x:hidden}.faq-header{margin-bottom:1.5rem}.faq-header h2{font-size:1.8rem}.faq-header p{font-size:.9rem}.faq-sidebar{flex-direction:column;gap:.5rem;overflow-x:visible;padding-bottom:0}.faq-category{padding:.4rem 0}.category-indicator{width:5px;height:18px}.category-name{font-size:.8rem}.faq-content-card{padding:1.25rem;border-radius:12px;min-height:auto;max-width:100%;word-wrap:break-word}.faq-container{max-width:100%;gap:1.5rem}.group-title{font-size:1.2rem;margin-bottom:1.25rem;padding-bottom:.75rem}.qa-grid{gap:1.25rem}.qa-item h4{font-size:.95rem;margin-bottom:.4rem}.qa-item p{font-size:.85rem;line-height:1.5}}
