.landing-section{padding:var(--space-3xl) 0}.landing-section.alt{background:var(--color-bg-surface);border-top:1px solid var(--color-border-light);border-bottom:1px solid var(--color-border-light)}.landing-inner{max-width:var(--content-width);padding:0 var(--space-lg);margin:0 auto}.landing-section h2{font-size:var(--font-size-2xl);color:var(--color-text);margin-bottom:var(--space-lg);font-weight:700}.landing-section h3{font-size:var(--font-size-lg);color:var(--color-text);margin:var(--space-xl) 0 var(--space-sm);font-weight:600}.landing-section p{color:var(--color-text-secondary);margin-bottom:var(--space-md);line-height:1.7}.landing-section ul{margin-bottom:var(--space-lg);padding:0;list-style:none}.landing-section li{padding-left:var(--space-xl);color:var(--color-text-secondary);margin-bottom:var(--space-sm);line-height:1.6;position:relative}.landing-section li:before{content:"›";color:var(--color-accent);font-weight:600;position:absolute;left:0}.game-grid{gap:var(--space-sm);margin:var(--space-lg) 0;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));display:grid}.game-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-md);text-align:center;font-size:var(--font-size-sm);color:var(--color-text-secondary);transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}.game-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-sm)}.tutorial-steps{gap:var(--space-md);margin:var(--space-lg) 0;flex-direction:column;display:flex}.tutorial-step{gap:var(--space-lg);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl);display:flex}.tutorial-step-num{background:var(--color-accent);color:#fff;width:44px;height:44px;font-size:var(--font-size-lg);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:flex}.tutorial-step-content h3{margin:0 0 var(--space-xs)}.tutorial-step-content p{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:0}.comparison-table{border-collapse:collapse;width:100%;margin:var(--space-lg) 0;font-size:var(--font-size-sm);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}.comparison-table th,.comparison-table td{padding:var(--space-sm) var(--space-md);text-align:left}.comparison-table th{background:var(--color-bg-surface);color:var(--color-text);border-bottom:1px solid var(--color-border);font-weight:600}.comparison-table td{color:var(--color-text-secondary);border-bottom:1px solid var(--color-border-light)}.comparison-table tr:last-child td{border-bottom:none}.comparison-table .col-bgmbox{color:var(--color-accent);font-weight:600}.faq-section{padding:var(--space-3xl) 0}.faq-inner{max-width:var(--content-width);padding:0 var(--space-lg);margin:0 auto}.faq-section h2{font-size:var(--font-size-2xl);color:var(--color-text);margin-bottom:var(--space-lg);font-weight:700}.faq-list{border:1px solid var(--color-border);border-radius:var(--radius);flex-direction:column;gap:1px;display:flex;overflow:hidden}.faq-item{background:var(--color-bg-card)}.faq-question{width:100%;padding:var(--space-md) var(--space-lg);font-size:var(--font-size-base);color:var(--color-text);cursor:pointer;text-align:left;background:0 0;border:none;justify-content:space-between;align-items:center;font-weight:500;display:flex}.faq-question:hover{color:var(--color-accent);background:var(--color-accent-light)}.faq-arrow{font-size:var(--font-size-sm);transition:transform var(--transition-fast);margin-left:var(--space-md);color:var(--color-text-dim);flex-shrink:0}.faq-item.open .faq-arrow{transform:rotate(180deg)}.faq-answer{padding:0 var(--space-lg) var(--space-lg);color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:1.7;display:none}.faq-item.open .faq-answer{display:block}.faq-item.open .faq-question{border-bottom:1px solid var(--color-border-light)}.hero{padding:var(--space-2xl) 0 var(--space-lg);text-align:center}.hero-inner{max-width:640px;padding:0 var(--space-lg);margin:0 auto}.hero h1{font-size:var(--font-size-5xl);color:var(--color-text);margin-bottom:var(--space-sm);letter-spacing:-.02em;font-weight:800}.hero-subtitle{font-size:var(--font-size-xl);color:var(--color-text-muted);margin-bottom:var(--space-sm)}.hero-description{font-size:var(--font-size-lg);color:var(--color-text-muted);margin-bottom:var(--space-2xl);line-height:1.6}.hero-cta{gap:var(--space-md);flex-wrap:wrap;justify-content:center;display:flex}.btn-primary{padding:var(--space-sm) var(--space-2xl);font-size:var(--font-size-base);color:#fff;background:var(--color-accent);border-radius:var(--radius);cursor:pointer;transition:background var(--transition-fast);border:none;font-weight:600;display:inline-block}.btn-primary:hover{background:var(--color-accent-hover);color:#fff}.btn-secondary{padding:var(--space-sm) var(--space-2xl);font-size:var(--font-size-base);color:var(--color-accent);border:1px solid var(--color-accent);border-radius:var(--radius);cursor:pointer;transition:background var(--transition-fast);background:0 0;font-weight:600;display:inline-block}.btn-secondary:hover{background:var(--color-accent-light)}.features{padding:var(--space-3xl) 0}.features-inner{max-width:var(--max-width);padding:0 var(--space-lg);margin:0 auto}.features h2{text-align:center;font-size:var(--font-size-3xl);color:var(--color-text);margin-bottom:var(--space-2xl);font-weight:700}.feature-grid{gap:var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}.feature-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-2xl);text-align:center;transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}.feature-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow)}.feature-icon{font-size:var(--font-size-3xl);margin-bottom:var(--space-md)}.feature-card h3{font-size:var(--font-size-xl);color:var(--color-text);margin-bottom:var(--space-sm);font-weight:600}.feature-card p{color:var(--color-text-muted);font-size:var(--font-size-sm);line-height:1.6}.popular-tools{padding:var(--space-3xl) 0}.popular-tools-inner{max-width:var(--max-width);padding:0 var(--space-lg);margin:0 auto}.popular-tools h2{text-align:center;font-size:var(--font-size-3xl);color:var(--color-text);margin-bottom:var(--space-2xl);font-weight:700}.tool-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(240px,1fr));display:grid}.tool-grid-8{gap:var(--space-sm);grid-template-columns:repeat(4,1fr);display:grid}.tool-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-md) var(--space-lg);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);text-align:center;display:block}.tool-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow);color:inherit}.tool-card h3{font-size:var(--font-size-sm);color:var(--color-accent);margin-bottom:2px;font-weight:600}.tool-card p{font-size:var(--font-size-xs);color:var(--color-text-muted)}@media (width<=768px){.tool-grid-8{grid-template-columns:repeat(2,1fr)}}.blog-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl);margin-bottom:var(--space-md);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);display:block}.blog-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow);color:inherit}.blog-card h3{font-size:var(--font-size-xl);color:var(--color-text);margin-bottom:var(--space-sm);font-weight:600}.blog-card p{color:var(--color-text-muted);font-size:var(--font-size-sm);margin-bottom:var(--space-sm)}.blog-meta{font-size:var(--font-size-xs);color:var(--color-text-dim)}.blog-tags{gap:var(--space-xs);margin-top:var(--space-sm);flex-wrap:wrap;display:flex}.blog-tag{padding:1px var(--space-sm);background:var(--color-accent-light);border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--color-accent);display:inline-block}.blog-article{max-width:var(--content-width);padding:var(--space-3xl) var(--space-lg);margin:0 auto}.blog-article h1{font-size:var(--font-size-4xl);color:var(--color-text);margin-bottom:var(--space-md);font-weight:800}.blog-article h2{font-size:var(--font-size-2xl);color:var(--color-text);margin:var(--space-2xl) 0 var(--space-md);font-weight:700}.blog-article h3{font-size:var(--font-size-lg);color:var(--color-text);margin:var(--space-xl) 0 var(--space-sm);font-weight:600}.blog-article p{color:var(--color-text-secondary);margin-bottom:var(--space-md);line-height:1.8}.blog-article ul,.blog-article ol{color:var(--color-text-secondary);padding-left:var(--space-xl);margin-bottom:var(--space-md)}.blog-article li{margin-bottom:var(--space-xs);line-height:1.6}.blog-article pre{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-md);margin-bottom:var(--space-md);font-size:var(--font-size-sm);overflow-x:auto}.blog-article code{font-family:var(--font-mono);font-size:.9em}.blog-back{margin-bottom:var(--space-lg);color:var(--color-text-muted);font-size:var(--font-size-sm);display:inline-block}.blog-back:hover{color:var(--color-accent)}@media (width<=600px){.hero h1{font-size:var(--font-size-3xl)}.hero{padding:var(--space-2xl) 0}.converter-shell{padding:0 var(--space-md)}.params-row{flex-direction:column;align-items:flex-start}.params-row label{min-width:auto}.tutorial-step{flex-direction:column}.game-grid{grid-template-columns:repeat(3,1fr)}.comparison-table{font-size:var(--font-size-xs)}.comparison-table th,.comparison-table td{padding:var(--space-xs) var(--space-sm)}.blog-article h1{font-size:var(--font-size-2xl)}}
