.hero-small{padding:var(--space-16) 0;background:var(--gradient-hero);min-height:auto}.hero-small h1{font-size:var(--text-5xl);margin-bottom:var(--space-4)}.hero-small .hero-subtitle{font-size:var(--text-xl);margin-bottom:0}.blog-section{padding:var(--space-16) 0;background:var(--surface-alt)}.blog-grid .blog-card{content-visibility:auto;contain-intrinsic-size:auto 420px}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);margin-bottom:var(--space-12)}@media (max-width:1024px){.blog-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.blog-grid{grid-template-columns:1fr}}.blog-card{background:var(--surface-raised);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.06);transition:all var(--transition-normal);display:flex;flex-direction:column}.blog-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.1)}.blog-card-link-wrapper{display:flex;flex-direction:column;text-decoration:none;color:inherit;flex:1}.blog-card-link-wrapper:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px;border-radius:var(--radius-lg)}.blog-card:has(.blog-card-link-wrapper:focus-visible){transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.1)}html[data-theme="dark"] .blog-card{border:1px solid var(--border)}html[data-theme="dark"] .blog-card:hover,html[data-theme="dark"] .blog-card:has(.blog-card-link-wrapper:focus-visible){border-color:var(--border-strong)}.blog-card-image{aspect-ratio:16/9;overflow:hidden}.blog-card-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-normal)}.blog-card:hover .blog-card-image img{transform:scale(1.05)}.blog-card-mockup{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;border-radius:12px 12px 0 0;background-color:var(--mockup-canvas);color:var(--color-anthracite)}.blog-card-mockup::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 40px rgba(0,0,0,0.12);border-radius:12px 12px 0 0;pointer-events:none;z-index:1}.blog-card-mockup svg{width:100%;height:100%;display:block;transition:transform var(--transition-normal)}.blog-card:hover .blog-card-mockup svg{transform:scale(1.02)}html[data-theme="dark"] .blog-card-mockup{filter:brightness(0.92) saturate(0.95)}.blog-content-mockup{margin:var(--space-8) 0;display:flex;justify-content:center;color:var(--color-anthracite)}.blog-content-mockup svg{max-width:100%;height:auto;filter:drop-shadow(0 12px 40px rgba(0,0,0,0.12));border-radius:12px}html[data-theme="dark"] .blog-content-mockup svg{filter:brightness(0.92) saturate(0.95);box-shadow:0 0 0 1px var(--border),0 0 24px rgba(0,168,138,0.12),0 12px 40px rgba(0,0,0,0.5)}.blog-faq-section{margin:var(--space-8) 0}.blog-faq-section .faq-list{grid-template-columns:1fr}.blog-card-content{padding:var(--space-6);display:flex;flex-direction:column;flex:1}.blog-card-meta{font-size:var(--text-sm);color:var(--color-gray-600);margin-bottom:var(--space-3)}.blog-card-title{font-size:var(--text-lg);font-weight:700;line-height:1.3;margin-bottom:var(--space-3);color:var(--color-dark);transition:color var(--transition-fast)}.blog-card:hover .blog-card-title{color:var(--link)}.blog-card-excerpt{font-size:var(--text-sm);color:var(--color-gray-600);line-height:1.6;margin-bottom:var(--space-4);flex:1}.blog-card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-4);border-top:1px solid var(--color-gray-100)}.blog-card-date{font-size:var(--text-sm);color:var(--color-gray-500)}.blog-card-link{font-size:var(--text-sm);font-weight:600;color:var(--link);text-decoration:none}.blog-card-cta{font-size:var(--text-sm);font-weight:600;color:var(--link);text-decoration:none;transition:color var(--transition-fast)}.blog-card:hover .blog-card-cta{color:var(--color-primary-light)}.blog-pagination{display:flex;justify-content:center;align-items:center;gap:var(--space-4);padding-top:var(--space-8)}.blog-pagination a,.blog-pagination span{padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:500;color:var(--color-dark);text-decoration:none;transition:all var(--transition-fast)}.blog-pagination a:hover{color:var(--link)}.blog-pagination-current{background:var(--color-primary);color:var(--color-white)!important;border-radius:var(--radius-sm)}.blog-pagination .disabled{color:#6f6f6f;pointer-events:none;cursor:not-allowed}.blog-pagination-numbers{display:flex;gap:var(--space-1)}.blog-pagination-dots{color:var(--color-gray-400)}.blog-post-main{background:var(--surface-raised)}.blog-breadcrumb{background:var(--surface-sunken);padding:var(--space-4) 0}.blog-breadcrumb .container{display:flex;justify-content:space-between;align-items:center}.blog-breadcrumb a{font-size:var(--text-sm);color:var(--color-gray-600)}.blog-breadcrumb a:hover{color:var(--link)}.blog-lang-switch{display:flex;gap:var(--space-2)}.blog-lang-switch a{padding:var(--space-1) var(--space-3);font-size:var(--text-sm);font-weight:500;color:var(--color-gray-500);border:1px solid var(--color-gray-200);border-radius:var(--radius-sm)}.blog-lang-switch a.active{background:var(--color-primary);color:var(--color-white);border-color:var(--color-primary)}.blog-header{padding:var(--space-16) 0 var(--space-12);text-align:center}.blog-header .breadcrumb{padding-top:0;margin-bottom:var(--space-6)}.blog-header .breadcrumb ol{display:flex;align-items:center;gap:var(--space-2);list-style:none;padding:0;margin:0;font-size:var(--text-sm)}.blog-header .breadcrumb a{color:rgba(255,255,255,0.7);transition:color var(--transition-fast)}.blog-header .breadcrumb a:hover{color:var(--color-white)}.blog-header .breadcrumb span{color:rgba(255,255,255,0.5)}.blog-header .breadcrumb span[aria-current]{color:rgba(255,255,255,0.9)}.blog-header .page-header-content{max-width:900px;margin:0 auto}.blog-header h1{font-size:var(--text-4xl);font-weight:700;color:var(--color-white);margin-bottom:var(--space-4);animation:fadeInUp 0.6s var(--ease-smooth)}.blog-header .page-header-subtitle{font-size:var(--text-lg);color:rgba(255,255,255,0.8);margin:0;animation:fadeInUp 0.8s var(--ease-smooth)}.blog-header .blog-post-separator{margin:0 var(--space-2)}.blog-header-with-stats{position:relative;padding-bottom:0}.blog-header-with-stats .page-header-content{padding-bottom:var(--space-8)}.blog-header .hero-stats-bar{position:relative;padding:var(--space-5) 0;background:rgba(255,255,255,0.95);backdrop-filter:blur(8px);border-top:1px solid rgba(0,77,67,0.1)}html[data-theme="dark"] .blog-header .hero-stats-bar{background:rgba(21,21,21,0.92);border-top:1px solid var(--border-subtle)}html[data-theme="dark"] .blog-header .hero-stat-item .hero-stat-number,html[data-theme="dark"] .blog-header .hero-stat-item .hero-stat-suffix,html[data-theme="dark"] .blog-header .hero-stat-item .hero-stat-text{background:linear-gradient(135deg,var(--text-strong) 0%,var(--color-accent) 100%);-webkit-background-clip:text;background-clip:text}.blog-back-link{margin-bottom:var(--space-8);padding-top:var(--space-4);text-align:right}.blog-back-link .btn{display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none}.blog-back-link .btn:hover{text-decoration:none}.blog-post-header{padding:var(--space-12) 0 var(--space-8);text-align:center}.blog-post-meta{font-size:var(--text-sm);color:var(--color-gray-600);margin-bottom:var(--space-4)}.blog-post-meta span{margin:0 var(--space-2)}.blog-post-header h1{font-size:var(--text-5xl);max-width:900px;margin:0 auto}.blog-post-featured-image{margin-bottom:var(--space-12)}.blog-post-featured-image img{width:100%;max-height:500px;object-fit:cover;border-radius:var(--radius-lg)}.blog-post-content{padding:var(--space-8) 0}.blog-post-content h2{font-size:var(--text-3xl);margin-top:var(--space-12);margin-bottom:var(--space-6);padding-top:var(--space-4)}.blog-post-content h3{font-size:var(--text-xl);margin-top:var(--space-8);margin-bottom:var(--space-4)}.blog-demo-showcase .project-showcase-body h3{margin-top:0;margin-bottom:var(--space-2)}.blog-post-content p{margin-bottom:var(--space-6);line-height:1.8}.blog-post-content ul,.blog-post-content ol{margin-bottom:var(--space-6);padding-left:var(--space-6)}.blog-post-content li{margin-bottom:var(--space-2);line-height:1.7}.blog-post-content a:not(.btn){color:var(--link);text-decoration:underline}.blog-post-content code{background:var(--color-gray-100);padding:0.15em 0.4em;border-radius:4px;font-family:var(--font-mono);font-size:0.9em}.blog-intro{font-size:var(--text-xl);line-height:1.7;color:var(--color-gray-700);margin-bottom:var(--space-8);padding-bottom:var(--space-8);border-bottom:1px solid var(--color-gray-200)}.blog-quote{margin:var(--space-8) 0;padding:var(--space-6) var(--space-8);background:var(--surface-sunken);border-left:4px solid var(--color-primary);border-radius:0 var(--radius-lg) var(--radius-lg) 0}.blog-quote p{font-size:var(--text-lg);font-style:italic;margin-bottom:var(--space-2)}.blog-quote cite{font-size:var(--text-sm);color:var(--color-gray-600);font-style:normal}.blog-code-block{margin:var(--space-8) 0;background:var(--color-anthracite);border-radius:var(--radius-lg);overflow:hidden}.blog-code-block .code-header{padding:var(--space-3) var(--space-4);background:rgba(0,0,0,0.3);display:flex;align-items:center;gap:var(--space-2)}.blog-code-block .code-content{padding:var(--space-4);overflow-x:auto}.blog-code-block code{background:none;padding:0;font-size:14px;line-height:1.6;color:#e0e0e0}.blog-terminal{margin:var(--space-8) 0;background:var(--color-anthracite);border-radius:var(--radius-lg);overflow:hidden}.terminal-content{padding:var(--space-4);font-family:var(--font-mono);font-size:14px;line-height:1.6}.terminal-line{color:#e0e0e0}.terminal-prompt{color:var(--color-accent)}.terminal-output{color:var(--color-gray-400);padding-left:var(--space-4)}.blog-image{margin:var(--space-8) 0}.blog-image img{border-radius:var(--radius-lg)}.blog-image figcaption{text-align:center;font-size:var(--text-sm);color:var(--color-gray-600);margin-top:var(--space-3)}.blog-gallery{display:grid;gap:var(--space-4);margin:var(--space-8) 0}.blog-gallery--2{grid-template-columns:repeat(2,1fr)}.blog-gallery--3{grid-template-columns:repeat(3,1fr)}.blog-gallery--4{grid-template-columns:repeat(4,1fr)}@media (max-width:768px){.blog-gallery--3,.blog-gallery--4{grid-template-columns:repeat(2,1fr)}}.blog-gallery figure{margin:0}.blog-gallery img{border-radius:var(--radius-md);aspect-ratio:4/3;object-fit:cover}.blog-gallery figcaption{font-size:var(--text-sm);color:var(--color-gray-600);margin-top:var(--space-2)}.blog-video{margin:var(--space-8) 0;position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius-lg)}.blog-video iframe{position:absolute;top:0;left:0;width:100%;height:100%}.blog-mockup{margin:var(--space-8) 0;background:var(--color-anthracite);border-radius:var(--radius-lg);overflow:hidden}.blog-mockup-content{padding:var(--space-6)}.content-mockup-plugin-tree{font-family:monospace;font-size:14px;color:#e0e0e0;line-height:1.8}.content-mockup-plugin-tree .folder{color:#f0c36d}.content-mockup-plugin-tree .file{color:#98c379}.content-mockup-plugin-tree .comment{color:#666;font-size:12px}.content-mockup-plugin-tree .indent-1{padding-left:20px}.content-mockup-plugin-tree .indent-2{padding-left:40px}.content-mockup-plugin-tree .indent-3{padding-left:60px}.content-mockup-plugin-tree .indent-4{padding-left:80px}.content-mockup-lighthouse{display:flex;justify-content:center;gap:24px;padding:20px 0}.content-mockup-lighthouse .score-item{text-align:center}.content-mockup-lighthouse .score{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#0cce6b,#0cce6b);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:28px;color:#fff}.content-mockup-lighthouse .score-label{font-size:11px;color:#888;margin-top:8px}.blog-callout{margin:var(--space-8) 0;padding:var(--space-6);border-radius:var(--radius-lg);border-left:4px solid;color:var(--text)}.blog-callout--tip{background:rgba(0,168,138,0.1);border-color:var(--color-accent)}.blog-callout--info{background:rgba(0,77,67,0.1);border-color:var(--color-primary)}.blog-callout--warning{background:rgba(255,193,7,0.1);border-color:#ffc107}.blog-callout--danger{background:rgba(220,53,69,0.1);border-color:#dc3545}.blog-callout--success{background:rgba(40,167,69,0.1);border-color:#28a745}html[data-theme="dark"] .blog-callout--info{background:rgba(0,168,138,0.08);border-color:var(--color-accent)}.blog-callout-title{display:flex;align-items:center;gap:8px;margin-bottom:var(--space-2)}.blog-callout-icon{display:inline-flex;flex-shrink:0}.blog-callout-icon svg{display:block}.blog-callout p{margin:0}.blog-highlight{margin:var(--space-8) 0;padding:var(--space-6);background:var(--gradient-primary);border-radius:var(--radius-lg);color:var(--color-white);display:flex;gap:var(--space-4)}.blog-highlight-icon{flex-shrink:0}.blog-highlight-icon svg{width:32px;height:32px}.blog-highlight-content>strong{display:block;margin-bottom:var(--space-2)}.blog-highlight p{margin:0;opacity:0.9}.blog-highlight a:not(.btn){color:var(--color-white);text-decoration:underline;font-weight:600}.blog-highlight a:not(.btn):hover{color:var(--color-accent)}.blog-feature-grid{display:grid;gap:var(--space-6);margin:var(--space-8) 0}.blog-feature-grid--2{grid-template-columns:repeat(2,1fr)}.blog-feature-grid--3{grid-template-columns:repeat(3,1fr)}.blog-feature-grid--4{grid-template-columns:repeat(4,1fr)}@media (max-width:768px){.blog-feature-grid--2,.blog-feature-grid--3,.blog-feature-grid--4{grid-template-columns:1fr}}.blog-feature-item{background:var(--surface-alt);padding:var(--space-6);border-radius:var(--radius-lg);text-align:center}.blog-feature-icon{width:48px;height:48px;margin:0 auto var(--space-4);background:var(--gradient-primary);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--color-white)}.blog-feature-icon svg{width:24px;height:24px}.blog-feature-item h4,.blog-feature-title{font-size:var(--text-base);font-weight:700;margin-bottom:var(--space-2)}.blog-feature-item p{font-size:var(--text-sm);color:var(--color-gray-600);margin:0}.blog-promo{margin:var(--space-12) 0;padding:var(--space-10);background:var(--gradient-hero);border-radius:var(--radius-xl);text-align:center;color:var(--color-white)}.blog-promo h3{font-size:var(--text-2xl);margin:0 0 var(--space-3);color:var(--color-white)}.blog-promo p{font-size:var(--text-lg);opacity:0.9;margin-bottom:var(--space-6)}.blog-promo .btn-primary{background:var(--color-white);color:var(--color-primary);font-weight:700;padding:var(--space-3) var(--space-8);font-size:var(--text-base);box-shadow:0 4px 20px rgba(0,0,0,0.2);transition:all var(--transition-normal)}.blog-promo .btn-primary:hover{background:var(--color-accent);color:var(--color-white);transform:translateY(-2px);box-shadow:0 6px 25px rgba(0,0,0,0.25);text-decoration:none}.blog-promo .btn-primary{text-decoration:none}.blog-comparison{margin:var(--space-8) 0;overflow-x:auto}.blog-comparison table{width:100%;border-collapse:collapse}.blog-comparison thead{background:var(--color-primary);color:var(--color-white)}.blog-comparison th,.blog-comparison td{padding:var(--space-4);text-align:left;border-bottom:1px solid var(--color-gray-200)}.blog-comparison th{background:var(--color-primary);color:var(--color-white);font-weight:600;border-bottom:none}.blog-comparison .highlight{background:rgba(0,168,138,0.1);font-weight:600;color:var(--color-primary)}.blog-comparison th.highlight{background:#007d66;color:var(--color-white)}html[data-theme="dark"] .blog-comparison td.highlight{color:var(--accent-readable)}.blog-toc{margin:var(--space-8) 0;padding:var(--space-6);background:var(--surface-sunken);border-radius:var(--radius-lg)}.blog-toc strong{display:block;margin-bottom:var(--space-4);font-size:var(--text-lg)}.blog-toc ol{margin:0;padding-left:var(--space-6)}.blog-toc li{margin-bottom:var(--space-2)}.blog-toc a{color:var(--color-gray-700)}.blog-toc a:hover{color:var(--link)}.blog-post-tags{padding:var(--space-8) 0;border-top:1px solid var(--color-gray-200)}.blog-tags-label{font-weight:600;margin-right:var(--space-2)}.blog-tag{display:inline-block;padding:var(--space-1) var(--space-3);background:var(--surface-sunken);border-radius:var(--radius-full);font-size:var(--text-sm);color:var(--color-gray-600);margin-right:var(--space-2)}.blog-related-section{padding:var(--space-12) 0;background:var(--surface-alt)}.blog-related h2{text-align:left;margin-bottom:var(--space-8)}.blog-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}@media (max-width:768px){.blog-related-grid{grid-template-columns:1fr}.blog-header{padding:var(--space-12) 0 var(--space-8)}.blog-header-with-stats{padding-bottom:0}.blog-header-with-stats .page-header-content{padding-bottom:var(--space-6)}.blog-header h1{font-size:var(--text-3xl)}.blog-header .breadcrumb ol{flex-wrap:wrap}}.blog-checklist{list-style:none;padding-left:0}.blog-checklist li{position:relative;padding-left:var(--space-8)}.blog-checklist .checkmark::before{content:'';position:absolute;left:0;top:2px;width:20px;height:20px;background:var(--color-accent);border-radius:50%}.blog-checklist .checkmark::after{content:'';position:absolute;left:7px;top:6px;width:6px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.blog-no-posts{text-align:center;padding:var(--space-12);color:var(--color-gray-600)}.blog-button-wrapper{margin:var(--space-8) 0}.blog-button--center{text-align:center}.blog-button--right{text-align:right}.blog-buttons{display:flex;flex-wrap:wrap;gap:var(--space-4);margin:var(--space-8) 0}.blog-buttons--center{justify-content:center}.blog-buttons--right{justify-content:flex-end}.blog-divider{margin:var(--space-10) 0;border:none;border-top:1px solid var(--color-gray-200)}.blog-divider--thick{border-top-width:3px}.blog-divider--dashed{border-top-style:dashed}.blog-divider--dotted{border-top-style:dotted}html[data-theme="dark"] .blog-pagination .disabled{color:var(--text-subtle)}.blog-tag-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-10)}.blog-tag-pill{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:500;color:var(--text-muted);text-decoration:none;transition:all var(--transition-fast)}.blog-tag-pill:hover{border-color:var(--color-accent);color:var(--link)}.blog-tag-pill:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.blog-tag-pill--active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-white)}.blog-tag-pill--active:hover{border-color:var(--color-primary);color:var(--color-white)}.blog-tag-pill-count{font-size:0.75em;font-weight:400;opacity:0.7}.blog-card-reading-time{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-3);background:var(--surface-sunken);border:1px solid var(--border-subtle);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:500;color:var(--text-muted);line-height:1.6}.blog-card-reading-time svg{flex-shrink:0}.blog-header .blog-post-reading-time{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-3);background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);border-radius:var(--radius-full);color:rgba(255,255,255,0.85);vertical-align:middle}.blog-header .blog-post-reading-time::before{content:'';width:0.85em;height:0.85em;flex-shrink:0;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpolyline%20points='12%206%2012%2012%2016%2014'/%3E%3C/svg%3E") no-repeat center / contain;mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpolyline%20points='12%206%2012%2012%2016%2014'/%3E%3C/svg%3E") no-repeat center / contain}.blog-leadmagnet{margin:var(--space-10) 0;padding:var(--space-8);background:var(--surface-sunken);border:1px solid var(--border);border-left:4px solid var(--color-accent);border-radius:var(--radius-lg)}.blog-leadmagnet-badge{display:inline-block;padding:var(--space-1) var(--space-3);background:var(--primary-tint);color:var(--accent-readable);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--space-4)}.blog-leadmagnet-title{font-size:var(--text-xl);margin-bottom:var(--space-3);color:var(--text-strong)}.blog-leadmagnet-text{color:var(--text-muted);margin-bottom:var(--space-6)}.blog-leadmagnet .blog-leadmagnet-cta{text-decoration:none}