/* KGFRP public components — pairs with Tailwind CDN */
*, *::before, *::after { border-radius: 0 !important; }

html { scroll-behavior: smooth; }

.section-wrap { margin-left: auto; margin-right: auto; max-width: 80rem; padding: 4rem 1rem; }
@media (min-width: 640px) { .section-wrap { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .section-wrap { padding-left: 2rem; padding-right: 2rem; } }

.section-head { margin-bottom: 3rem; text-align: center; }
.section-label { display: inline-block; margin-bottom: 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #c5a028; }
.section-title { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; color: #fff; }
@media (min-width: 640px) { .section-title { font-size: 2.25rem; } }
.section-desc { margin: 0.75rem auto 0; max-width: 42rem; font-size: 1rem; color: #9ca3af; }

.btn-gold { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: #c5a028; padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #12100e; transition: background 0.2s; text-decoration: none; border: none; cursor: pointer; }
.btn-gold:hover { background: #d4af37; color: #12100e; }

.btn-gold-outline { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 1px solid #b8941f; background: transparent; padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #d4af37; transition: all 0.2s; text-decoration: none; cursor: pointer; }
.btn-gold-outline:hover { border-color: #c5a028; background: rgba(197,160,40,0.1); color: #e8d494; }

.btn-gold-sm { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: #c5a028; padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #12100e; transition: background 0.2s; text-decoration: none; border: none; cursor: pointer; }
.btn-gold-sm:hover { background: #d4af37; }

.card-dark { border: 1px solid #3d3428; background: #1a1714; transition: all 0.2s; }
.card-dark:hover { border-color: #7a6208; box-shadow: 0 0 24px rgba(197,160,40,0.15); }

.card-dark-header { border-bottom: 1px solid #3d3428; background: #1c1810; padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #d4af37; }

.badge-gold { display: inline-flex; align-items: center; gap: 0.25rem; background: rgba(154,123,10,0.6); padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 600; color: #d4af37; box-shadow: inset 0 0 0 1px #7a6208; }
.badge-online { display: inline-flex; align-items: center; gap: 0.25rem; background: #022c22; padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 600; color: #34d399; box-shadow: inset 0 0 0 1px #065f46; }
.badge-offline { display: inline-flex; align-items: center; gap: 0.25rem; background: #450a0a; padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 600; color: #f87171; box-shadow: inset 0 0 0 1px #991b1b; }
.badge-credits { display: inline-flex; align-items: center; background: #2c2620; padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 600; color: #e8d494; box-shadow: inset 0 0 0 1px #3d3428; }

.input-dark { width: 100%; border: 1px solid #3d3428; background: #1a1714; padding: 0.75rem 1rem 0.75rem 2.75rem; font-size: 0.875rem; color: #fff; transition: border-color 0.2s; }
.input-dark:focus { outline: none; border-color: #c5a028; box-shadow: 0 0 0 1px #c5a028; }
.input-dark::placeholder { color: #6b7280; }

.tool-slider .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s; }
.tool-slider .slide.active { position: relative; z-index: 10; opacity: 1; }

.slider-indicator { height: 0.5rem; width: 0.5rem; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.2); transition: all 0.2s; cursor: pointer; padding: 0; }
.slider-indicator.active { width: 1.5rem; border-color: #c5a028; background: #c5a028; }

.models-container { max-height: 0; overflow: hidden; opacity: 0; transition: all 0.5s; }
.models-container.active { max-height: 8000px; opacity: 1; }

.brand-button.active { border-color: #c5a028 !important; background: #c5a028 !important; color: #12100e !important; }

.no-results { display: none; }
.no-results.show { display: block; }

.clear-btn { opacity: 0; transition: opacity 0.2s; background: none; border: none; cursor: pointer; }
.clear-btn.show { opacity: 1; }

.shadow-gold { box-shadow: 0 0 24px rgba(197,160,40,0.15); }
.shadow-gold-lg { box-shadow: 0 4px 32px rgba(197,160,40,0.2); }

.bg-void { background-color: #0a0908; }
.bg-void-50 { background-color: #12100e; }
.bg-void-100 { background-color: #1a1714; }
.bg-void-200 { background-color: #221e1a; }
.bg-void-300 { background-color: #2c2620; }
.border-void-400 { border-color: #3d3428; }
.text-gold-300 { color: #d4af37; }
.text-gold-400 { color: #c5a028; }
.text-gold-500 { color: #b8941f; }
.text-void-50 { color: #12100e; }
.border-gold-400 { border-color: #c5a028; }
.border-gold-500 { border-color: #b8941f; }
.border-gold-600 { border-color: #9a7b0a; }
.border-gold-700 { border-color: #7a6208; }
.border-gold-800 { border-color: #5c4a1f; }
.border-gold-900 { border-color: #3d3115; }
.border-gold-950 { border-color: #1c1810; }
.bg-gold-400 { background-color: #c5a028; }
.bg-gold-950 { background-color: #1c1810; }
.bg-gold-900 { background-color: #3d3115; }
.hover\:bg-gold-300:hover { background-color: #d4af37; }
.hover\:text-gold-300:hover { color: #d4af37; }
.hover\:border-gold-600:hover { border-color: #9a7b0a; }
.hover\:border-gold-700:hover { border-color: #7a6208; }
.hover\:border-l-gold-500:hover { border-left-color: #b8941f; }
.group:hover .group-hover\:text-gold-300 { color: #d4af37; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }