/* =========================================================
 GLOBAL
 ========================================================= */

html {
 scroll-behavior: smooth;
}

body {
 font-family: 'Fjalla One', sans-serif;
 margin: 0;
 padding: 0;
 background:
 radial-gradient(circle at top, rgba(130, 0, 0, 0.22), transparent 30%),
 linear-gradient(180deg, #050505 0%, #000 50%, #050505 100%);
 color: #fff;
 text-transform: uppercase;
 font-weight: bold;
 letter-spacing: 0.08em;
 line-height: 1.5;
 overflow-x: hidden;
}

/* =========================================================
 PAGE LAYOUT
 ========================================================= */

.feature-brands-page {
 width: 100%;
 min-height: 100vh;
 background: transparent;
}

.section-heading {
 width: min(1400px, calc(100% - 40px));
 margin: 0 auto 28px;
 text-align: center;
}

.section-heading h2 {
 margin: 0 0 12px;
 font-size: clamp(28px, 4vw, 52px);
 line-height: 1.1;
 text-shadow: 0 0 12px rgba(255, 0, 0, 0.18);
}

.section-heading p {
 max-width: 900px;
 margin: 0 auto;
 color: rgba(255, 255, 255, 0.78);
 font-size: 14px;
 letter-spacing: 0.06em;
}

.eyebrow {
 display: inline-block;
 margin-bottom: 10px;
 color: #ff3c3c;
 font-size: 12px;
 letter-spacing: 0.28em;
 text-shadow: 0 0 10px rgba(255, 0, 0, 0.35);
}

/* =========================================================
 HERO
 ========================================================= */

.brands-hero {
 position: relative;
 padding: 80px 20px 70px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 background:
 linear-gradient(180deg, rgba(18, 18, 18, 0.9), rgba(0, 0, 0, 0.96)),
 radial-gradient(circle at center, rgba(255, 0, 0, 0.16), transparent 40%);
}

.brands-hero-inner {
 width: min(1400px, calc(100% - 40px));
 margin: 0 auto;
 text-align: center;
}

.brands-hero h1 {
 margin: 0 0 18px;
 font-size: clamp(38px, 6vw, 74px);
 line-height: 0.95;
 text-shadow: 0 0 18px rgba(255, 0, 0, 0.26);
}

.hero-copy {
 max-width: 950px;
 margin: 0 auto 30px;
 color: rgba(255, 255, 255, 0.82);
 font-size: 15px;
}

.hero-actions {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 14px;
 margin-bottom: 34px;
}

.cta-primary,
.cta-secondary,
.brand-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 48px;
 padding: 12px 22px;
 border-radius: 999px;
 text-decoration: none;
 font-size: 13px;
 letter-spacing: 0.12em;
 transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
 cursor: pointer;
 box-sizing: border-box;
}

.cta-primary,
.brand-btn {
 background: linear-gradient(135deg, #7a0000, #e10000);
 color: #fff;
 border: 1px solid rgba(255, 255, 255, 0.15);
 box-shadow: 0 0 18px rgba(255, 0, 0, 0.24);
}

.cta-primary:hover,
.brand-btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 0 24px rgba(255, 0, 0, 0.42);
}

.cta-secondary,
.brand-btn.secondary {
 background: rgba(255, 255, 255, 0.04);
 color: #fff;
 border: 1px solid rgba(255, 255, 255, 0.14);
 box-shadow: 0 0 14px rgba(255, 255, 255, 0.08);
}

.cta-secondary:hover,
.brand-btn.secondary:hover {
 transform: translateY(-2px);
 border-color: rgba(255, 0, 0, 0.4);
 box-shadow: 0 0 18px rgba(255, 0, 0, 0.18);
}

.hero-stats {
 display: grid;
 grid-template-columns: repeat(3, minmax(160px, 1fr));
 gap: 16px;
 width: min(900px, 100%);
 margin: 0 auto;
}

.hero-stat {
 padding: 18px 16px;
 border-radius: 18px;
 background: rgba(255, 255, 255, 0.03);
 border: 1px solid rgba(255, 255, 255, 0.08);
 box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.02);
}

.hero-stat strong {
 display: block;
 font-size: clamp(22px, 3vw, 34px);
 margin-bottom: 8px;
}

.hero-stat span {
 color: rgba(255, 255, 255, 0.72);
 font-size: 12px;
}

/* =========================================================
 FEATURED MANUFACTURER
 ========================================================= */

.featured-manufacturer {
 width: min(1400px, calc(100% - 40px));
 margin: 50px auto 30px;
 display: grid;
 grid-template-columns: 1.05fr 1fr;
 gap: 26px;
 align-items: stretch;
}

.featured-manufacturer-media,
.featured-manufacturer-content {
 border-radius: 26px;
 overflow: hidden;
 background: rgba(12, 12, 12, 0.94);
 border: 1px solid rgba(255, 255, 255, 0.08);
 box-shadow: 0 0 26px rgba(0, 0, 0, 0.42);
}

.featured-manufacturer-media {
 min-height: 420px;
}

.featured-manufacturer-media img {
 width: 100%;
 height: 100%;
 display: block;
 object-fit: cover;
}

.featured-manufacturer-content {
 padding: 28px;
 display: flex;
 flex-direction: column;
 justify-content: center;
}

.featured-manufacturer-content h2 {
 margin: 0 0 14px;
 font-size: clamp(28px, 4vw, 48px);
 line-height: 1;
}

.featured-meta-row {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-bottom: 14px;
}

.featured-description {
 margin: 0 0 18px;
 color: rgba(255, 255, 255, 0.8);
 font-size: 14px;
}

.featured-highlights {
 display: grid;
 grid-template-columns: repeat(3, minmax(110px, 1fr));
 gap: 12px;
 margin-bottom: 16px;
}

.highlight-box {
 padding: 14px;
 border-radius: 16px;
 background: rgba(255, 255, 255, 0.035);
 border: 1px solid rgba(255, 255, 255, 0.07);
 text-align: center;
}

.highlight-box strong {
 display: block;
 font-size: 22px;
 margin-bottom: 6px;
}

.highlight-box span {
 font-size: 11px;
 color: rgba(255, 255, 255, 0.7);
}

.featured-facts {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-bottom: 20px;
}

.featured-facts span {
 padding: 8px 12px;
 border-radius: 999px;
 font-size: 11px;
 color: #fff;
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid rgba(255, 255, 255, 0.08);
}

.featured-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
}

/* =========================================================
 BENEFITS / ANALYTICS
 ========================================================= */

.dealer-benefits,
.brand-analytics,
.brand-search-section {
 padding: 38px 0 14px;
}

.benefits-grid,
.analytics-grid {
 width: min(1400px, calc(100% - 40px));
 margin: 0 auto;
 display: grid;
 gap: 16px;
}

.benefits-grid {
 grid-template-columns: repeat(4, minmax(200px, 1fr));
}

.analytics-grid {
 grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.benefit-card,
.analytics-card {
 padding: 22px 18px;
 border-radius: 22px;
 background: rgba(10, 10, 10, 0.94);
 border: 1px solid rgba(255, 255, 255, 0.08);
 box-shadow: 0 0 18px rgba(0, 0, 0, 0.34);
 text-align: center;
}

.benefit-card h3 {
 margin: 0 0 10px;
 font-size: 18px;
}

.benefit-card p {
 margin: 0;
 color: rgba(255, 255, 255, 0.74);
 font-size: 13px;
 text-transform: none;
 letter-spacing: 0.03em;
 font-weight: 600;
}

.analytics-card strong {
 display: block;
 font-size: clamp(24px, 4vw, 40px);
 margin-bottom: 8px;
 color: #fff;
 text-shadow: 0 0 12px rgba(255, 0, 0, 0.22);
}

.analytics-card span {
 font-size: 12px;
 color: rgba(255, 255, 255, 0.72);
}

/* =========================================================
 SEARCH / FILTER
 ========================================================= */

.brand-search-bar {
 width: min(1400px, calc(100% - 40px));
 margin: 0 auto;
 display: grid;
 grid-template-columns: 1.5fr 1fr 1fr;
 gap: 14px;
}

.brand-search-bar input,
.brand-search-bar select {
 height: 54px;
 border-radius: 16px;
 border: 1px solid rgba(255, 255, 255, 0.12);
 outline: none;
 background: rgba(12, 12, 12, 0.94);
 color: #fff;
 padding: 0 18px;
 font-family: 'Fjalla One', sans-serif;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 box-shadow: 0 0 14px rgba(0, 0, 0, 0.28);
}

.brand-search-bar input::placeholder {
 color: rgba(255, 255, 255, 0.46);
}

/* =========================================================
 FEATURE BRANDS STRIP
 ========================================================= */

.feature-brands-strip-wrap {
 position: relative;
 overflow: visible;
 padding: 30px 24px 40px;
}

.feature-brands-strip-wrap::before,
.feature-brands-strip-wrap::after {
 display: none;
}

.feature-brands-strip {
 width: 100%;
 overflow-x: auto;
 overflow-y: visible;
 padding: 4px 2px 14px;
 scroll-snap-type: x proximity;
 scrollbar-width: thin;
}

.feature-brand-list {
 display: flex;
 align-items: stretch;
 gap: 22px;
 width: max-content;
 min-width: 100%;
 animation: none;
 will-change: auto;
 padding: 6px 0;
}

.reduced-motion-strip {
 animation: none !important;
}

.feature-brand {
 flex: 0 0 340px;
 min-height: 100%;
 padding: 18px;
 border-radius: 22px;
 background:
 linear-gradient(180deg, rgba(17, 17, 17, 0.96), rgba(5, 5, 5, 0.98));
 border: 1px solid rgba(255, 255, 255, 0.08);
 box-shadow: 0 0 22px rgba(0, 0, 0, 0.36);
 color: #fff;
 position: relative;
 overflow: hidden;
 transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
 box-sizing: border-box;
 scroll-snap-align: start;
}

.feature-brand:hover {
 transform: translateY(-6px);
 box-shadow: 0 0 22px rgba(255, 0, 0, 0.22), 0 0 40px rgba(255, 0, 0, 0.14);
 border-color: rgba(255, 0, 0, 0.28);
}

.feature-brand.placeholder {
 border-style: dashed;
 border-color: rgba(255, 255, 255, 0.22);
}

.feature-brand.placeholder::after {
 content: "Recruit Brand";
 position: absolute;
 top: 14px;
 right: 14px;
 padding: 6px 10px;
 border-radius: 999px;
 font-size: 10px;
 color: #fff;
 background: linear-gradient(180deg, rgba(236, 34, 34, 0.96), rgba(126, 0, 0, 0.98));
 border: 1px solid rgba(255, 120, 120, 0.30);
 box-shadow: 0 8px 20px rgba(120, 0, 0, 0.28);
 text-shadow: none;
}

.brand-card-top {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 gap: 8px;
 margin-bottom: 14px;
}

.brand-category-pill,
.partner-badge {
 display: inline-flex;
 align-items: center;
 min-height: 30px;
 padding: 6px 12px;
 border-radius: 999px;
 font-size: 11px;
 line-height: 1;
 box-sizing: border-box;
}

.partner-badge {
 background: rgba(255, 255, 255, 0.06);
 border: 1px solid rgba(255, 255, 255, 0.1);
 color: #fff;
}

/* Partner level badges */
.badge-official {
 background: rgba(200, 20, 20, 0.18);
 border: 1px solid rgba(255, 60, 60, 0.28);
}

.badge-authorized {
 background: rgba(255, 255, 255, 0.07);
 border: 1px solid rgba(255, 255, 255, 0.14);
}

.badge-premium {
 background: rgba(255, 204, 0, 0.12);
 border: 1px solid rgba(255, 204, 0, 0.24);
 color: #ffd34a;
}

.badge-standard {
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Category colors */
.cat-turbo {
 background: rgba(0, 102, 255, 0.16);
 border: 1px solid rgba(0, 102, 255, 0.32);
}

.cat-nitrous {
 background: rgba(117, 54, 255, 0.16);
 border: 1px solid rgba(117, 54, 255, 0.32);
}

.cat-exhaust {
 background: rgba(255, 0, 0, 0.14);
 border: 1px solid rgba(255, 0, 0, 0.28);
}

.cat-suspension {
 background: rgba(255, 187, 0, 0.14);
 border: 1px solid rgba(255, 187, 0, 0.28);
 color: #ffd657;
}

.cat-fuel {
 background: rgba(0, 190, 140, 0.16);
 border: 1px solid rgba(0, 190, 140, 0.32);
}

.cat-ecu {
 background: rgba(255, 85, 0, 0.16);
 border: 1px solid rgba(255, 85, 0, 0.32);
}

.cat-brakes {
 background: rgba(230, 230, 230, 0.12);
 border: 1px solid rgba(230, 230, 230, 0.24);
}

.cat-cooling {
 background: rgba(0, 200, 255, 0.14);
 border: 1px solid rgba(0, 200, 255, 0.26);
}

.cat-generic {
 background: rgba(255, 255, 255, 0.06);
 border: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-image-wrap {
 position: relative;
 border-radius: 18px;
 overflow: hidden;
 background:
 radial-gradient(circle at center, rgba(255, 0, 0, 0.08), transparent 40%),
 #050505;
 border: 1px solid rgba(255, 255, 255, 0.06);
 margin-bottom: 14px;
}

.brand-image-wrap img {
 width: 100%;
 height: 210px;
 object-fit: contain;
 display: block;
 background: transparent;
 padding: 18px;
 box-sizing: border-box;
}

.brand-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.92));
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 padding: 18px;
 opacity: 0;
 transition: opacity 0.25s ease;
}

.feature-brand:hover .brand-overlay {
 opacity: 1;
}

.feature-brand.placeholder .brand-image-wrap {
 background:
 radial-gradient(circle at center, rgba(255, 0, 0, 0.16), transparent 48%),
 linear-gradient(180deg, rgba(8, 8, 8, 0.98), rgba(0, 0, 0, 1));
}

.feature-brand.placeholder .brand-image-wrap img {
 object-fit: contain;
 padding: 12px;
 background: transparent;
}

.brand-overlay h4 {
 margin: 0 0 8px;
 font-size: 20px;
}

.brand-overlay p {
 margin: 0 0 12px;
 font-size: 12px;
 color: rgba(255, 255, 255, 0.84);
 text-transform: none;
 letter-spacing: 0.03em;
}

.brand-overlay-meta {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
}

.brand-overlay-meta span {
 padding: 6px 10px;
 border-radius: 999px;
 font-size: 10px;
 background: rgba(255, 255, 255, 0.07);
 border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-brand h3 {
 margin: 0 0 10px;
 font-size: 22px;
 line-height: 1.1;
}

.brand-description {
 margin: 0 0 14px;
 min-height: 44px;
 color: rgba(255, 255, 255, 0.76);
 font-size: 12px;
}

.brand-stats {
 list-style: none;
 margin: 0 0 14px;
 padding: 0;
 display: grid;
 gap: 8px;
}

.brand-stats li {
 padding: 8px 12px;
 border-radius: 12px;
 background: rgba(255, 255, 255, 0.035);
 border: 1px solid rgba(255, 255, 255, 0.07);
 font-size: 11px;
}

.brand-mini-analytics {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 10px;
 margin-bottom: 16px;
}

.brand-mini-analytics > div {
 padding: 12px;
 border-radius: 14px;
 text-align: center;
 background: rgba(255, 255, 255, 0.035);
 border: 1px solid rgba(255, 255, 255, 0.07);
}

.brand-mini-analytics strong {
 display: block;
 font-size: 18px;
 margin-bottom: 6px;
}

.brand-mini-analytics span {
 font-size: 10px;
 color: rgba(255, 255, 255, 0.7);
}

.buttons {
 display: flex;
 gap: 10px;
 margin-top: auto;
}

.buttons .brand-btn {
 flex: 1 1 0;
 font-size: 11px;
 text-align: center;
}

/* =========================================================
 DB MESSAGE
 ========================================================= */

.db-debug-message {
 width: min(1400px, calc(100% - 40px));
 margin: 0 auto 60px;
}

.db-debug-box {
 border-radius: 18px;
 padding: 16px 18px;
 background: rgba(80, 20, 20, 0.16);
 border: 1px solid rgba(255, 90, 90, 0.22);
 color: rgba(255, 255, 255, 0.84);
}

.db-debug-box strong {
 display: block;
 margin-bottom: 6px;
}

/* =========================================================
 ANIMATIONS
 ========================================================= */

@keyframes scroll-seamless {
 0% {
 transform: translateX(0);
 }
 100% {
 transform: translateX(-50%);
 }
}

/* =========================================================
 RESPONSIVE
 ========================================================= */

@media (max-width: 1200px) {
 .featured-manufacturer {
 grid-template-columns: 1fr;
 }

 .benefits-grid,
 .analytics-grid {
 grid-template-columns: repeat(2, minmax(220px, 1fr));
 }

 .brand-search-bar {
 grid-template-columns: 1fr;
 }
}

@media (max-width: 768px) {
 .brands-hero {
 padding: 60px 16px 56px;
 }

 .hero-stats {
 grid-template-columns: 1fr;
 }

 .featured-highlights {
 grid-template-columns: 1fr;
 }

 .benefits-grid,
 .analytics-grid {
 grid-template-columns: 1fr;
 }

 .feature-brand-list {
 display: flex;
 animation: none;
 overflow-x: auto;
 width: auto;
 grid-template-columns: none;
 padding: 6px 4px 10px;
 scroll-snap-type: x mandatory;
 }

 .feature-brand {
 flex: 0 0 86vw;
 scroll-snap-align: start;
 }

 .feature-brands-strip-wrap::before,
 .feature-brands-strip-wrap::after {
 display: none;
 }

 .buttons {
 flex-direction: column;
 }
}