.blog-article{position:relative}.article-hero{position:relative;padding:160px 32px 60px;overflow:hidden}.article-hero-bg{position:absolute;inset:0;pointer-events:none}.art-orb{position:absolute;width:600px;height:400px;top:-15%;left:35%;border-radius:50%;filter:blur(100px);background:radial-gradient(ellipse,rgba(167,139,250,.1) 0%,transparent 60%);animation:float 14s ease-in-out infinite}.article-inner{max-width:760px;margin:0 auto;position:relative;z-index:1}.article-meta-top{margin-bottom:32px}.back-link{display:inline-block;font-size:13px;color:var(--color-text-muted);margin-bottom:20px;transition:color var(--transition-fast)}.back-link:hover{color:var(--color-text)}.article-meta-pills{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.meta-cat{padding:5px 14px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);border-radius:100px}.meta-date,.meta-time{font-size:13px;color:var(--color-text-muted)}.article-hero h1{font-size:42px;font-weight:800;letter-spacing:-.035em;line-height:1.18;margin-bottom:20px;background:linear-gradient(180deg,#fff 30%,#9d9db5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.article-hero .hero-intro{font-size:18px;line-height:1.8;color:var(--color-text-muted);margin-bottom:28px}.article-hero .hero-intro strong{color:var(--color-text-secondary)}.article-author{display:flex;align-items:center;gap:12px}.article-author .author-name{font-size:14px;font-weight:600}.article-author .author-verified{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:#34d399;margin-left:8px}.article-body{padding:0 32px 120px}.article-content{max-width:760px;margin:0 auto}.article-content h2{font-size:28px;font-weight:800;letter-spacing:-.02em;margin-top:56px;margin-bottom:20px;padding-top:40px;border-top:1px solid var(--color-border)}.article-content h2:first-child{margin-top:40px;border-top:none;padding-top:0}.article-content h3{font-size:20px;font-weight:700;margin-top:36px;margin-bottom:14px}.article-content p{font-size:16px;line-height:1.85;color:var(--color-text-muted);margin-bottom:20px}.article-content strong{color:var(--color-text-secondary)}.article-content a{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#a78bfa4d}.article-content a:hover{text-decoration-color:var(--color-primary)}.article-content ul,.article-content ol{padding-left:20px;margin-bottom:20px}.article-content li{font-size:15px;line-height:1.8;color:var(--color-text-muted);margin-bottom:8px}.blog-tool-card{display:flex;align-items:center;gap:16px;padding:20px 24px;margin:24px 0;border:1px solid var(--color-border);border-radius:var(--radius-md);background:linear-gradient(160deg,#ffffff08,#ffffff01);transition:all var(--transition-smooth)}.blog-tool-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 20%,transparent);text-decoration:none}.blog-tool-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);font-size:16px;font-weight:800;color:var(--accent);flex-shrink:0}.blog-tool-info{flex:1;min-width:0}.blog-tool-info strong{display:block;font-size:15px;font-weight:700;color:var(--color-text);margin-bottom:2px}.blog-tool-info span{font-size:13px;color:var(--color-text-muted)}.blog-tool-badge{padding:4px 12px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fbbf24;background:#fbbf241a;border:1px solid rgba(251,191,36,.15);border-radius:100px;white-space:nowrap}.blog-tool-cta{padding:8px 18px;font-size:12px;font-weight:600;color:#fff;background:linear-gradient(135deg,#7c6cc4,#a78bfa);border-radius:8px;white-space:nowrap;flex-shrink:0;transition:all var(--transition-fast)}.blog-tool-cta:hover{transform:translateY(-1px);box-shadow:0 4px 12px #7c6cc44d}.blog-cta-block{margin:48px 0;padding:36px;background:linear-gradient(135deg,#a78bfa0f,#c084fc08);border:1px solid rgba(167,139,250,.12);border-radius:var(--radius-lg);text-align:center}.blog-cta-block h3{font-size:22px;font-weight:800;margin-bottom:12px}.blog-cta-block p{font-size:15px;color:var(--color-text-muted);margin-bottom:24px;line-height:1.7}.blog-cta-block .cta-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;font-size:15px;font-weight:600;color:#fff;background:linear-gradient(135deg,#7c6cc4,#a78bfa,#c4b5fd);border-radius:var(--radius-sm);transition:all var(--transition-base);box-shadow:0 0 0 1px #7c6cc440,0 4px 12px #7c6cc426;text-decoration:none}.blog-cta-block .cta-btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #7c6cc466,0 8px 24px #7c6cc440}.article-faq{padding:0 32px 120px}.article-faq-inner{max-width:760px;margin:0 auto}.article-faq h2{font-size:28px;font-weight:800;letter-spacing:-.02em;margin-bottom:32px;padding-top:40px;border-top:1px solid var(--color-border)}.faq-list{display:flex;flex-direction:column;gap:12px}.faq-item{background:linear-gradient(160deg,#ffffff06,#ffffff02);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--transition-fast);overflow:hidden}.faq-item:hover,.faq-item[open]{border-color:var(--color-border-hover)}.faq-item summary{padding:22px 28px;font-size:16px;font-weight:600;letter-spacing:-.01em;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;user-select:none}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";font-size:20px;font-weight:400;color:var(--color-text-muted);flex-shrink:0}.faq-item[open] summary:after{content:"−"}.faq-item p{padding:0 28px 24px;font-size:15px;line-height:1.8;color:var(--color-text-muted)}@media(max-width:768px){.article-hero{padding:130px 20px 40px}.article-hero h1{font-size:28px}.article-hero .hero-intro{font-size:16px}.article-body{padding:0 20px 80px}.article-content h2{font-size:22px;margin-top:40px;padding-top:28px}.article-faq{padding:0 20px 80px}.blog-tool-card{flex-direction:column;align-items:flex-start;gap:12px}.blog-tool-badge{display:none}}
