@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap";
:root{--primary:#7c3aed;--primary-hover:#6d28d9;--primary-light:#7c3aed14;--primary-light-border:#7c3aed26;--bg-main:#fcfbfe;--bg-card:#fff;--bg-accent:#f5f3ff;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--border-light:#0f172a0f;--border-accent:#7c3aed1f;--shadow-sm:0 2px 8px #0f172a0a;--shadow-md:0 10px 30px #0f172a0f;--shadow-lg:0 20px 40px #7c3aed0f;--shadow-btn:0 4px 14px #7c3aed4d}.tools-layout{background-color:var(--bg-main);color:var(--text-secondary);min-height:100vh;font-family:Inter,sans-serif;position:relative;overflow-x:hidden}.tools-glow{z-index:1;pointer-events:none;background:radial-gradient(circle,#7c3aed0f 0%,#ec489905 50%,#0000 100%);width:600px;height:600px;position:absolute;top:-100px;right:-100px}.tools-hero{z-index:5;grid-template-columns:1.1fr 1fr;align-items:center;gap:40px;max-width:1200px;margin:0 auto;padding:60px 40px;display:grid;position:relative}@media (max-width:968px){.tools-hero{grid-template-columns:1fr;padding:40px 20px}}.tools-hero-content{flex-direction:column;gap:24px;display:flex}.tools-badge{background:var(--primary-light);border:1px solid var(--primary-light-border);color:var(--primary);border-radius:9999px;align-items:center;gap:6px;width:fit-content;padding:6px 14px;font-size:.78rem;font-weight:600;display:flex}.tools-hero-title{color:var(--text-primary);letter-spacing:-.03em;font-family:Outfit,sans-serif;font-size:3.4rem;font-weight:800;line-height:1.15}.tools-hero-title span{color:var(--primary)}.tools-hero-subtitle{color:var(--text-secondary);font-size:1.1rem;line-height:1.6}.tools-hero-checklist{flex-direction:column;gap:12px;margin-top:8px;display:flex}.tools-hero-checkitem{align-items:center;gap:12px;font-size:.95rem;font-weight:500;display:flex}.tools-hero-checkicon{background:var(--primary-light);width:20px;height:20px;color:var(--primary);border-radius:50%;justify-content:center;align-items:center;font-size:.7rem;display:flex}.tools-hero-actions-container{flex-direction:column;gap:12px;margin-top:8px;display:flex}.tools-hero-actions{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.tools-hero-subtext{color:var(--text-muted);font-size:.82rem}.tools-hero-showcase{aspect-ratio:1;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.showcase-main-card{aspect-ratio:.9;width:75%;box-shadow:var(--shadow-lg);border:1px solid var(--border-light);z-index:2;background:#fff;border-radius:24px;transition:transform .3s;position:relative;overflow:hidden}.showcase-main-card img{object-fit:cover;width:100%;height:100%}.showcase-floating-card{aspect-ratio:1;width:22%;box-shadow:var(--shadow-md);z-index:3;background:#fff;border:2px solid #fff;border-radius:16px;transition:all .3s;position:absolute;overflow:hidden}.showcase-floating-card:hover{transform:scale(1.08)}.showcase-floating-card img{object-fit:cover;width:100%;height:100%}.card-top{top:5%;left:2%}.card-bottom{bottom:5%;left:8%}.card-right{top:40%;right:0%}.connection-curve{pointer-events:none;z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.tools-brands-section{text-align:center;max-width:1200px;margin:0 auto;padding:30px 40px}.brands-title{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:24px;font-size:.85rem;font-weight:600}.brand-logo-wrapper{color:var(--text-secondary);opacity:.6;transition:opacity .2s,transform .2s}.brand-logo-wrapper:hover{opacity:1;transform:translateY(-2px)}.tools-how-works{text-align:center;max-width:1200px;margin:0 auto;padding:80px 40px}.section-label{background:var(--primary-light);color:var(--primary);text-transform:uppercase;letter-spacing:.05em;border-radius:9999px;width:fit-content;margin:0 auto 16px;padding:6px 12px;font-size:.72rem;font-weight:700}.section-title{color:var(--text-primary);margin-bottom:48px;font-family:Outfit,sans-serif;font-size:2.2rem;font-weight:700}.section-title span{color:var(--primary)}.steps-grid{grid-template-columns:repeat(3,1fr);gap:30px;display:grid}@media (max-width:968px){.steps-grid{grid-template-columns:1fr}}.step-card{background:var(--bg-card);border:1px solid var(--border-light);text-align:left;box-shadow:var(--shadow-sm);border-radius:20px;flex-direction:column;padding:24px;transition:transform .3s,box-shadow .3s;display:flex}.step-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}.step-header{align-items:center;gap:12px;margin-bottom:12px;display:flex}.step-number{background:var(--primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:.8rem;font-weight:700;display:flex}.step-title{color:var(--text-primary);font-size:1.05rem;font-weight:700}.step-desc{color:var(--text-secondary);margin-bottom:20px;font-size:.88rem;line-height:1.5}.step-demo-upload{border:1px dashed var(--border-light);background:var(--bg-main);aspect-ratio:1.4;border-radius:12px;justify-content:center;align-items:center;gap:12px;padding:16px;display:flex;position:relative;overflow:hidden}.handbag-preview-small{width:48%;height:100%;box-shadow:var(--shadow-sm);background:#fff;border-radius:8px;justify-content:center;align-items:center;display:flex;overflow:hidden}.handbag-preview-small img{object-fit:contain;max-width:90%;max-height:90%}.upload-dashed-box{border:1px dashed var(--primary-light-border);background:var(--bg-card);width:48%;height:100%;color:var(--primary);cursor:pointer;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:8px;font-size:.72rem;font-weight:600;transition:background .2s;display:flex}.upload-dashed-box:hover{background:var(--primary-light)}.upload-dashed-box i{font-size:1.1rem}.step-demo-prompt{border:1px solid var(--border-light);background:var(--bg-main);aspect-ratio:1.4;border-radius:12px;flex-direction:column;justify-content:space-between;padding:16px;display:flex}.prompt-textarea{border:1px solid var(--border-light);width:100%;height:60px;color:var(--text-primary);resize:none;background:#fff;border-radius:8px;outline:none;padding:8px 12px;font-family:inherit;font-size:.78rem;line-height:1.4}.prompt-generate-btn{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:6px;width:100%;padding:8px;font-size:.8rem;font-weight:600;transition:background .2s;display:flex}.prompt-generate-btn:hover{background:var(--primary-hover)}.step-demo-result{aspect-ratio:1.4;box-shadow:var(--shadow-sm);background:#fff;border-radius:12px;position:relative;overflow:hidden}.step-demo-result img{object-fit:cover;width:100%;height:100%}.tools-styles-section{text-align:center;max-width:1200px;margin:0 auto;padding:60px 40px}.styles-grid{grid-template-columns:repeat(6,1fr);gap:16px;margin-top:32px;display:grid}@media (max-width:968px){.styles-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:576px){.styles-grid{grid-template-columns:repeat(2,1fr)}}.style-card{background:var(--bg-card);border:1px solid var(--border-light);cursor:pointer;box-shadow:var(--shadow-sm);border-radius:16px;transition:all .3s;overflow:hidden}.style-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary-light-border);transform:translateY(-4px)}.style-card.active{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-light)}.style-image-wrapper{aspect-ratio:1;background:var(--bg-main);overflow:hidden}.style-image-wrapper img{object-fit:cover;width:100%;height:100%;transition:transform .3s}.style-card:hover .style-image-wrapper img{transform:scale(1.05)}.style-name{color:var(--text-primary);padding:10px;font-size:.78rem;font-weight:600}@media (max-width:968px){.pricing-grid{grid-template-columns:repeat(2,1fr)!important}.pricing-card{margin:0!important;transform:none!important}}@media (max-width:576px){.pricing-grid{grid-template-columns:1fr!important}}.pricing-card{transition:transform .3s,border-color .3s,box-shadow .3s}.pricing-card:hover{box-shadow:var(--shadow-lg)!important;transform:translateY(-6px)!important}.tools-bottom-cta{max-width:1120px;margin:60px auto 100px;padding:0 40px}.cta-banner-container{background:linear-gradient(135deg,#f5f3ff 0%,#edd8ff 100%);border:1px solid #7c3aed26;border-radius:32px;grid-template-columns:1.2fr 1fr;align-items:center;gap:40px;padding:50px 60px;display:grid;position:relative;overflow:hidden}@media (max-width:968px){.cta-banner-container{grid-template-columns:1fr;padding:40px 30px}}.cta-banner-left,.cta-banner-middle{z-index:2;flex-direction:column;gap:20px;display:flex;position:relative}.cta-banner-right{z-index:2;justify-content:center;display:flex;position:relative}.cta-banner-title{color:var(--text-primary);font-family:Outfit,sans-serif;font-size:2.2rem;font-weight:800;line-height:1.2}.cta-banner-desc{color:var(--text-secondary);font-size:.95rem;line-height:1.5}.cta-checkitem{align-items:flex-start;gap:14px;display:flex}.cta-checkicon{background:var(--primary);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:.9rem;display:flex;box-shadow:0 4px 10px #7c3aed33}.cta-checkitem-text strong{color:var(--text-primary);margin-bottom:2px;font-size:.95rem;font-weight:600;display:block}.cta-checkitem-text span{color:var(--text-secondary);font-size:.82rem;line-height:1.4}.cta-actions-wrapper{flex-direction:column;gap:10px;display:flex}.cta-footer-text{color:var(--text-muted);font-size:.78rem}.cta-banner-visual{aspect-ratio:1.1;z-index:2;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.cta-pedestal{aspect-ratio:1;width:70%;box-shadow:var(--shadow-lg);background:linear-gradient(#fff 0%,#fff0 100%);border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative}.cta-pedestal img{z-index:2;filter:drop-shadow(0 20px 30px #0f172a26);width:65%;height:auto;transform:translateY(-10%)}.cta-pedestal-shadow{z-index:1;background:radial-gradient(#0f172a1a 0%,#0000 70%);width:75%;height:15px;position:absolute;bottom:5%}.cta-floating-badge{width:38px;height:38px;box-shadow:var(--shadow-md);border:1px solid var(--border-light);z-index:3;background:#fff;border-radius:50%;justify-content:center;align-items:center;font-size:.95rem;transition:transform .3s;display:flex;position:absolute}.cta-floating-badge:hover{transform:scale(1.1)}.badge-top-left{top:15%;left:5%}.badge-bottom-right{bottom:25%;right:5%}.badge-top-right{top:25%;right:-2%}.tools-btn-cta{background:var(--primary);cursor:pointer;box-shadow:var(--shadow-btn);border:none;border-radius:9999px;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:.92rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex;color:#fff!important}.tools-btn-cta:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 6px 20px #7c3aed66}.tools-btn-secondary{border:1px solid var(--border-light);color:var(--text-primary);cursor:pointer;box-shadow:var(--shadow-sm);background:#fff;border-radius:9999px;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:.92rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.tools-btn-secondary:hover{background:var(--bg-main);border-color:var(--text-muted)}@media (max-width:768px){.tools-brands-logos{scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;flex-wrap:nowrap!important;justify-content:flex-start!important;gap:28px!important;width:100%!important;padding:12px 4px!important;display:flex!important;overflow-x:auto!important}.tools-brands-logos::-webkit-scrollbar{display:none!important}.tools-brands-logos img{flex-shrink:0!important;height:25px!important}.showroom-card{box-shadow:none!important;background:0 0!important;border:none!important;padding:12px 4px!important}.styles-grid{scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;flex-wrap:nowrap!important;gap:12px!important;width:100%!important;padding:10px 4px!important;display:flex!important;overflow-x:auto!important}.styles-grid::-webkit-scrollbar{display:none!important}.style-card{border:1.5px solid var(--border-light)!important;flex-shrink:0!important;width:105px!important}.style-card.active{border:2.5px solid var(--primary)!important;box-shadow:0 0 0 3px #7c3aed33!important}.style-name{white-space:normal!important;padding:6px 4px!important;font-size:.72rem!important;line-height:1.1!important}}