.how-to-use-page{background:#fff;min-height:100vh}.how-to-hero.blog-hero{text-align:center;background:#020617;border-bottom:1px solid #ffffff0d;align-items:center;min-height:50vh;padding:120px 0 80px;display:flex;position:relative;overflow:hidden}.hero-bg-outer{pointer-events:none;z-index:0;position:absolute;inset:0}.light-beam{filter:blur(120px);background:radial-gradient(circle,#6366f126 0%,#8b5cf61a 30%,#fff0 70%);position:absolute;inset:-20%}.mesh-blob{filter:blur(120px);opacity:.15;pointer-events:none;z-index:1;border-radius:50%;width:60vw;height:60vw;position:absolute}.blob-1{background:radial-gradient(circle,#6366f1 0%,#0000 70%);animation:20s ease-in-out infinite alternate blobMove;top:-20%;left:-10%}.blob-2{background:radial-gradient(circle,#8b5cf6 0%,#0000 70%);animation:25s ease-in-out infinite alternate-reverse blobMove;bottom:-20%;right:-10%}@keyframes blobMove{0%{transform:translate(0)scale(1)}to{transform:translate(10%,10%)scale(1.1)}}.hero-noise{z-index:3;opacity:.025;pointer-events:none;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");position:absolute;inset:0}.grid-overlay{opacity:.6;z-index:2;background-image:radial-gradient(#ffffff0d 1px,#0000 1px);background-size:32px 32px;position:absolute;inset:0}.how-to-hero .container{z-index:10;position:relative}.how-to-hero .badge{color:#a5b4fc;text-transform:uppercase;letter-spacing:.06em;background:#6366f11a;border:1px solid #6366f133;border-radius:100px;align-items:center;margin-bottom:1.25rem;padding:6px 14px;font-size:.75rem;font-weight:700;display:inline-flex}.how-to-hero h1{color:#fff;letter-spacing:-.03em;margin:0 0 24px;font-size:clamp(2.5rem,5.5vw,3.3rem);font-weight:800;line-height:1.2}.hero-accent{color:#6366f1;background:linear-gradient(135deg,#6366f1 0%,#a78bfa 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;display:inline-block;position:relative}.hero-subtext{color:#94a3b8;max-width:500px;margin:0 auto 32px;font-size:1.125rem;line-height:1.5}.workflow-nav{flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1rem;padding:0 1rem;display:flex}.nav-step{color:#94a3b8;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:99px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-weight:600;transition:all .3s;display:flex}.nav-step:hover{color:#fff;background:#ffffff1a}.nav-step.active{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-color:#0000;box-shadow:0 4px 15px #6366f14d}.step-content-section{padding:100px 0}.step-card{background:#fff;border:1px solid #0000000d;border-radius:2rem;grid-template-columns:1fr 1.2fr;min-height:500px;display:grid;overflow:hidden;box-shadow:0 10px 30px #00000005}.step-info{background-color:#020617;background-image:radial-gradient(at 0 0,#6366f11f 0,#0000 50%),radial-gradient(at 100% 100%,#8b5cf61a 0,#0000 50%);background-position:0 0;background-repeat:repeat;background-size:auto;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;flex-direction:column;justify-content:center;padding:4rem;display:flex}.step-badge{color:#a5b4fc;background:#6366f126;border:1px solid #6366f133;border-radius:99px;align-items:center;gap:.5rem;width:fit-content;margin-bottom:1.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:700;display:inline-flex}.step-info h2{color:#fff;margin-bottom:1.5rem;font-size:2.25rem;font-weight:800;line-height:1.2}.step-info p{color:#94a3b8;margin-bottom:2rem;font-size:1.125rem;line-height:1.6}.step-substeps{counter-reset:substep-counter;margin:0;padding:0;list-style:none}.step-substeps li{counter-increment:substep-counter;color:#e2e8f0;align-items:flex-start;gap:1rem;margin-bottom:1.25rem;font-weight:500;line-height:1.5;display:flex}.step-substeps li:before{content:counter(substep-counter);color:#fff;background:#6366f1;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;margin-top:2px;font-size:.75rem;font-weight:700;display:flex}.step-visual{background:#fff;justify-content:center;align-items:center;min-height:500px;padding:3rem;display:flex;position:relative;overflow:hidden}.step-visual .mesh-blob{opacity:.25;width:100%;height:100%}.screenshot-frame{background:#fff;border:1px solid #ffffff1a;border-radius:16px;justify-content:center;align-items:center;width:100%;padding:5px;display:flex;overflow:hidden;box-shadow:0 20px 40px #0003}.how-to-screenshot{border-radius:0;width:100%;height:auto;display:block}.screenshot-frame:hover{transition:all .3s;transform:translateY(-4px);box-shadow:0 30px 60px #00000040}.screenshot-placeholder{color:#94a3b8;background:#fff;border:1px solid #e2e8f0;border-radius:1rem;flex-direction:column;flex:1;justify-content:center;align-items:center;width:100%;min-height:220px;display:flex;position:relative;box-shadow:0 20px 40px #0000001a}.placeholder-header{background:#f8fafc;border-bottom:1px solid #e2e8f0;border-radius:1rem 1rem 0 0;align-items:center;gap:5px;width:100%;height:30px;padding:0 10px;display:flex;position:absolute;top:0}.dot{background:#e2e8f0;border-radius:50%;width:8px;height:8px}.quick-tips{margin-top:5rem}.tips-grid{grid-template-columns:repeat(3,1fr);gap:2rem;display:grid}.tip-card{background:#fff;border:1px solid #0000000d;border-radius:1.5rem;padding:2rem;transition:transform .3s}.tip-card:hover{transform:translateY(-5px)}.tip-icon{color:#8b5cf6;background:#f5f3ff;border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;margin-bottom:1rem;display:flex}.tip-card h4{color:#1e293b;margin-bottom:.5rem;font-size:1.125rem;font-weight:700}.tip-card p{color:#64748b;font-size:.9375rem;line-height:1.5}.how-to-cta{background:linear-gradient(135deg,var(--bg-tertiary)0%,#e0e7ff 100%);text-align:center;margin-top:5rem;padding:100px 0;position:relative;overflow:hidden}.cta-content{z-index:1;position:relative}.cta-content h2{color:var(--text-primary);margin-bottom:1.25rem;font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:700}.cta-content p{color:var(--text-secondary);max-width:500px;margin-bottom:3rem;margin-left:auto;margin-right:auto;font-size:1.125rem}.cta-actions{flex-wrap:wrap;justify-content:center;gap:1.25rem;display:flex}.step-navigation-actions{gap:1rem;margin-top:2.5rem;display:flex}.step-navigation-actions .btn{box-sizing:border-box!important;justify-content:center!important;align-items:center!important;gap:8px!important;height:44px!important;padding:4px 24px 0!important;line-height:1!important;display:inline-flex!important}.step-navigation-actions .btn svg{margin:0!important}@media (max-width:1024px){.step-card{grid-template-columns:1fr}.step-info{padding:3rem}.step-visual{min-height:400px}}@media (max-width:768px){.tips-grid{grid-template-columns:1fr}}