.faq-container{max-width:900px;margin:0 auto;padding:40px 20px}.faq-header{text-align:center;margin-bottom:30px}.faq-header h1{font-size:var(--text-4xl);font-weight:700;color:var(--text-primary);margin-bottom:10px}.faq-header p{font-size:var(--text-lg);color:var(--text-secondary)}.faq-search-wrapper{max-width:600px;margin:0 auto 30px}.faq-search{position:relative}.faq-search-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);font-size:var(--text-xl);color:var(--text-muted);pointer-events:none}.faq-search-input{width:100%;padding:16px 20px 16px 52px;font-size:var(--text-base);border:2px solid var(--border-color);border-radius:50px;background:var(--background-color);color:var(--text-primary);transition:all var(--dur-base) var(--ease);outline:none}.faq-search-input::-moz-placeholder{color:var(--text-muted)}.faq-search-input::placeholder{color:var(--text-muted)}.faq-search-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 4px #2563eb1a}.faq-search-clear{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:none;background:var(--surface-color);border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;color:var(--text-secondary);font-size:var(--text-base);transition:all var(--dur-base) var(--ease)}.faq-search-clear:hover{background:var(--border-color);color:var(--text-primary)}.faq-search-clear.visible{display:flex}.faq-search-results{text-align:center;padding:10px;color:var(--text-secondary);font-size:var(--text-sm)}.faq-no-results{text-align:center;padding:60px 20px;color:var(--text-secondary)}.faq-no-results-icon{font-size:3rem;margin-bottom:var(--space-4);opacity:.5}.faq-no-results h3{color:var(--text-primary);margin-bottom:var(--space-2)}.faq-no-results a{color:var(--primary-color)}.faq-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:40px;padding:20px;background:var(--surface-color);border-radius:var(--radius-xl);border:1px solid var(--border-color)}.faq-nav-item{padding:10px 20px;background:var(--background-color);border:1px solid var(--border-color);border-radius:25px;color:var(--text-primary);text-decoration:none;font-weight:500;transition:all var(--dur-base) var(--ease)}.faq-nav-item:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color);transform:translateY(-2px);box-shadow:0 4px 12px #2563eb4d}.faq-section{margin-bottom:30px;scroll-margin-top:100px}.faq-section.hidden{display:none}.faq-section h2{font-size:var(--text-3xl);font-weight:700;color:var(--text-primary);margin-bottom:20px;padding-bottom:10px;border-bottom:3px solid var(--primary-color);display:inline-block}.section-intro{color:var(--text-secondary);margin-bottom:30px;line-height:1.6}.faq-item{margin-bottom:var(--space-3);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;background:var(--background-color);transition:all var(--dur-base) var(--ease)}.faq-item.hidden{display:none}.faq-item:hover{box-shadow:0 4px 12px #0000000f;border-color:#2563eb4d}.faq-item.active{border-color:var(--primary-color);box-shadow:0 4px 16px #2563eb26}.faq-question{width:100%;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;background:transparent;border:none;cursor:pointer;font-size:var(--text-base);font-weight:600;color:var(--text-primary);text-align:left;transition:background var(--dur-base) var(--ease);gap:var(--space-4)}.faq-question:hover{background:var(--surface-color)}.faq-question span:first-child{flex:1}.faq-icon{font-size:var(--text-2xl);color:var(--primary-color);font-weight:300;transition:transform var(--dur-slow) var(--ease);flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(45deg)}.faq-answer{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease),padding var(--dur-slow) var(--ease)}.faq-item.active .faq-answer{max-height:600px;padding:0 20px 20px}.faq-answer p{color:var(--text-secondary);line-height:1.8;margin:0}.faq-item.search-match{border-color:var(--accent-color);background:linear-gradient(135deg,#10b9810d,#10b98105)}.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:40px}.loading-badges,.no-badges,.error-loading{grid-column:1 / -1;text-align:center;padding:40px;color:var(--text-secondary)}.badge-card{background:var(--background-color);border-radius:var(--radius-xl);padding:var(--space-5);border:2px solid var(--border-color);transition:all var(--dur-slow) var(--ease);position:relative;overflow:hidden}.badge-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--badge-color)}.badge-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px var(--badge-glow, rgba(0, 0, 0, .1));border-color:var(--badge-color)}.badge-header{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-3)}.badge-icon{width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-size:2rem;background:linear-gradient(135deg,var(--badge-color),var(--badge-color-secondary));border-radius:50%;box-shadow:0 4px 12px var(--badge-glow, rgba(0, 0, 0, .15))}.badge-info h3{font-size:var(--text-lg);font-weight:700;color:var(--text-primary);margin-bottom:var(--space-1)}.badge-tier{font-size:var(--text-xs);color:var(--text-muted);font-weight:500}.badge-description{color:var(--text-secondary);font-size:.95rem;line-height:1.5;margin-bottom:var(--space-4)}.badge-requirement{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--surface-color);border-radius:20px;font-size:var(--text-sm);font-weight:600;color:var(--text-primary)}.badge-requirement .hours-icon{font-size:var(--text-base)}.badge-card.tier-legendary{background:linear-gradient(135deg,#fef3c7,#fde68a,#fef3c7);border-color:#fbbf24}.badge-card.tier-legendary .badge-info h3,.badge-card.tier-legendary .badge-description,.badge-card.tier-legendary .badge-requirement,.badge-card.tier-legendary .badge-tier{color:#78350f}.badge-card.tier-legendary:before{background:linear-gradient(90deg,#fbbf24,#f472b6,#a78bfa,#fbbf24);background-size:300% 100%;animation:shimmer 3s linear infinite}@keyframes shimmer{0%{background-position:0% 0%}to{background-position:300% 0%}}.faq-contact{text-align:center;padding:50px 40px;background:linear-gradient(135deg,var(--primary-color),#1d4ed8);border-radius:24px;margin-top:40px}.faq-contact h3{font-size:var(--text-2xl);margin-bottom:10px;color:#fff}.faq-contact p{margin-bottom:24px;color:#ffffffe6}.faq-contact .btn-primary{background:#fff;color:var(--primary-color);padding:14px 32px;border-radius:25px;font-weight:600;text-decoration:none;display:inline-block;transition:all var(--dur-base) var(--ease);box-shadow:0 4px 12px #00000026}.faq-contact .btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0003}@media(max-width:768px){.faq-header h1{font-size:var(--text-3xl)}.faq-search-input{padding:14px 16px 14px 48px}.faq-nav{gap:var(--space-2);padding:var(--space-4)}.faq-nav-item{padding:8px 14px;font-size:var(--text-sm)}.badges-grid{grid-template-columns:1fr}.badge-card{padding:20px}.badge-icon{width:50px;height:50px;font-size:var(--text-2xl)}.faq-contact{padding:40px 24px}}
