/* ==========================================================================
   FLEXII CAR HIRE - MASTER AUTHENTIC DESIGNS (MATCHING MOCKUPS EXACTLY)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Global Reset & Base Typography
   -------------------------------------------------------------------------- */
:root {
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Outfit', 'Inter', sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-main);
  background-color: #f8fafc;
  color: #1e293b;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-top: 54px;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

button, input, select {
  font-family: inherit;
}

.flx-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}

.design-root {
  display: none;
  width: 100%;
  box-sizing: border-box;
}

.design-root.active-concept {
  display: block;
}

/* --------------------------------------------------------------------------
   1. Shared Layout Structure for All Concepts
   -------------------------------------------------------------------------- */

/* Top Utility Bar */
.flx-top-bar {
  background: #091522;
  color: #94a3b8;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.flx-top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.flx-top-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.flx-top-left a {
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.flx-top-left a:hover {
  color: #ffffff;
}
.flx-top-right {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
}

/* Main Navigation */
.flx-main-header {
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 900;
}
.flx-nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72px;
}
.flx-nav-logo img {
  height: 42px;
  max-width: 100%;
  width: auto;
  display: block;
}
.flx-nav-menu {
  display: flex;
  list-style: none;
  gap: 28px;
  align-items: center;
}
.flx-nav-menu li a {
  font-size: 15px;
  font-weight: 600;
  color: #334155;
  padding: 8px 0;
  position: relative;
}
.flx-nav-menu li a:hover,
.flx-nav-menu li a.active {
  color: var(--theme-color);
}
.flx-nav-menu li a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--theme-color);
  border-radius: 2px;
}

.flx-nav-cta {
  background: var(--theme-btn-bg);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.flx-nav-cta:hover {
  background: var(--theme-btn-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--theme-glow);
}

/* --------------------------------------------------------------------------
   2. Hero Section & Quick Quote Card
   -------------------------------------------------------------------------- */
.flx-hero-section {
  position: relative;
  background: var(--theme-hero-bg);
  background-size: cover;
  background-position: center;
  color: #ffffff;
  padding: 50px 0 70px;
  overflow: hidden;
  box-sizing: border-box;
}

.flx-hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--theme-hero-overlay);
  z-index: 1;
}

.flx-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 36px;
  align-items: center;
}

.flx-hero-content {
  padding-right: 10px;
}
.flx-hero-pill-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--theme-accent);
  margin-bottom: 12px;
}
.flx-hero-headline {
  font-family: var(--font-heading);
  font-size: 46px;
  font-weight: 900;
  line-height: 1.12;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}
.flx-hero-headline .highlight {
  color: var(--theme-headline-accent);
  display: block;
}
.flx-hero-subtext {
  font-size: 16.5px;
  color: #cbd5e1;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 500px;
}

/* Hero Key Features */
.flx-hero-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.flx-hero-feat-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.flx-hero-feat-icon {
  width: 24px;
  height: 24px;
  background: var(--theme-feat-icon-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-accent);
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.flx-hero-feat-text strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 2px;
}
.flx-hero-feat-text span {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.35;
  display: block;
}

/* Hero Foreground Car */
.flx-hero-car-preview {
  margin-top: 10px;
  max-width: 480px;
  width: 100%;
}
.flx-hero-car-preview img {
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 15px 25px rgba(0,0,0,0.5));
  display: block;
}

/* Quick Quote Card */
.flx-quote-card {
  background: var(--theme-card-bg);
  border: 1px solid var(--theme-card-border);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  color: var(--theme-card-text);
  backdrop-filter: blur(12px);
  width: 100%;
  box-sizing: border-box;
}
.flx-quote-header {
  margin-bottom: 18px;
}
.flx-quote-header h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: var(--theme-quote-title);
  margin-bottom: 4px;
}
.flx-quote-header h3 .highlight {
  color: var(--theme-accent);
}
.flx-quote-header p {
  font-size: 12.5px;
  color: var(--theme-quote-sub);
}

.flx-form-group {
  margin-bottom: 14px;
  width: 100%;
  box-sizing: border-box;
}
.flx-form-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--theme-label-color);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.flx-input-wrap {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.flx-input-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: #94a3b8;
  pointer-events: none;
}
.flx-input, .flx-select {
  width: 100%;
  box-sizing: border-box;
  background: var(--theme-input-bg);
  color: var(--theme-input-text);
  border: 1.5px solid var(--theme-input-border);
  padding: 11px 34px 11px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.2s ease;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.flx-input:focus, .flx-select:focus {
  border-color: var(--theme-color);
}
.flx-dates-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.flx-btn-quote-submit {
  width: 100%;
  box-sizing: border-box;
  background: var(--theme-btn-bg);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  padding: 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  transition: all 0.2s ease;
}
.flx-btn-quote-submit:hover {
  background: var(--theme-btn-hover);
  box-shadow: 0 6px 18px var(--theme-glow);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   3. Trust Pillars Bar (4 Pillars)
   -------------------------------------------------------------------------- */
.flx-trust-bar-section {
  position: relative;
  z-index: 10;
  margin-top: -30px;
  margin-bottom: 40px;
  width: 100%;
  box-sizing: border-box;
}
.flx-trust-bar-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  border: 1px solid #e2e8f0;
  width: 100%;
  box-sizing: border-box;
}
.flx-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.flx-trust-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--theme-feat-icon-bg);
  color: var(--theme-color);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.flx-trust-item-text h4 {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 2px;
}
.flx-trust-item-text p {
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   4. Fleet Section (Cars / Vans / MPVs Filter & Cards)
   -------------------------------------------------------------------------- */
.flx-fleet-section {
  padding: 20px 0 60px;
  width: 100%;
  box-sizing: border-box;
}
.flx-fleet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 16px;
}
.flx-fleet-title-wrap .sub-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--theme-color);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: block;
}
.flx-fleet-title-wrap h2 {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 4px;
}
.flx-fleet-title-wrap p {
  font-size: 14.5px;
  color: #64748b;
}

/* Filter Pill Tabs */
.flx-filter-tabs {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 10px;
  gap: 4px;
  flex-wrap: wrap;
}
.flx-tab-btn {
  background: transparent;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.flx-tab-btn:hover {
  color: #0f172a;
}
.flx-tab-btn.active {
  background: var(--theme-btn-bg);
  color: #ffffff;
  box-shadow: 0 4px 10px var(--theme-glow);
}

/* 4-Across Vehicle Cards Grid */
.flx-fleet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 36px;
  width: 100%;
  box-sizing: border-box;
}

.flx-car-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition: all 0.25s ease;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.flx-car-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

.flx-car-photo-box {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: #f8fafc;
  border-radius: 8px;
  padding: 8px;
  overflow: hidden;
}
.flx-car-photo-box img {
  max-height: 100px;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.flx-car-card:hover .flx-car-photo-box img {
  transform: scale(1.04);
}

.flx-car-category {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 2px;
}
.flx-car-model-name {
  font-size: 12.5px;
  color: #64748b;
  margin-bottom: 8px;
}
.flx-car-price-row {
  margin-bottom: 12px;
}
.flx-car-price-row .price {
  font-size: 19px;
  font-weight: 900;
  color: var(--theme-color);
}
.flx-car-price-row .period {
  font-size: 12px;
  color: #64748b;
}

.flx-car-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  padding: 10px 0;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 14px;
  font-size: 12px;
  color: #475569;
}
.flx-spec-item {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.flx-btn-view-details {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  color: var(--theme-color);
  border: 1.5px solid var(--theme-color);
  padding: 9px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  margin-top: auto;
}
.flx-btn-view-details:hover {
  background: var(--theme-color);
  color: #ffffff;
}

.flx-view-all-wrap {
  text-align: center;
}
.flx-btn-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 26px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.flx-btn-view-all:hover {
  background: #1e293b;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   5. Promotional "Need a Van? / About Us" Slanted Banner
   -------------------------------------------------------------------------- */
.flx-promo-banner-section {
  padding: 10px 0 50px;
  width: 100%;
  box-sizing: border-box;
}
.flx-promo-banner {
  background: #091726;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.15);
  width: 100%;
  box-sizing: border-box;
}
.flx-promo-content {
  padding: 40px;
  color: #ffffff;
  box-sizing: border-box;
}
.flx-promo-tag {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--theme-accent);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: block;
}
.flx-promo-content h3 {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 12px;
}
.flx-promo-content h3 .highlight {
  color: var(--theme-accent);
}
.flx-promo-content p {
  color: #cbd5e1;
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.flx-btn-promo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--theme-btn-bg);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.flx-btn-promo:hover {
  background: var(--theme-btn-hover);
  box-shadow: 0 4px 14px var(--theme-glow);
}
.flx-promo-image-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d2138;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.flx-promo-image-wrap img {
  max-width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
  display: block;
}

/* --------------------------------------------------------------------------
   6. "Why Choose Flexii Car Hire?" Section (6 Circles)
   -------------------------------------------------------------------------- */
.flx-why-section {
  padding: 40px 0 60px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  width: 100%;
  box-sizing: border-box;
}
.flx-section-heading-center {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 36px;
  padding: 0 10px;
}
.flx-section-heading-center .sub {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--theme-color);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: block;
}
.flx-section-heading-center h2 {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 6px;
}
.flx-section-heading-center p {
  font-size: 14.5px;
  color: #64748b;
}

.flx-why-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}
.flx-why-card {
  text-align: center;
  padding: 6px;
}
.flx-why-icon-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--theme-feat-icon-bg);
  color: var(--theme-color);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}
.flx-why-card:hover .flx-why-icon-circle {
  transform: translateY(-3px);
}
.flx-why-card h4 {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}
.flx-why-card p {
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   7. "What Our Customers Say" Testimonials
   -------------------------------------------------------------------------- */
.flx-reviews-section {
  padding: 60px 0;
  background: #f8fafc;
  width: 100%;
  box-sizing: border-box;
}
.flx-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
  width: 100%;
  box-sizing: border-box;
}
.flx-review-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  position: relative;
  box-sizing: border-box;
}
.flx-quote-mark {
  font-size: 34px;
  line-height: 1;
  color: var(--theme-color);
  font-family: Georgia, serif;
  margin-bottom: 6px;
}
.flx-review-card p {
  font-size: 13.5px;
  color: #334155;
  line-height: 1.6;
  margin-bottom: 14px;
  font-style: italic;
}
.flx-stars-row {
  color: #f59e0b;
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.flx-reviewer-name {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
}

/* --------------------------------------------------------------------------
   8. Call Support Action Bar (High-Contrast Banner)
   -------------------------------------------------------------------------- */
.flx-call-banner-section {
  background: var(--theme-call-bg);
  color: #ffffff;
  padding: 20px 0;
  width: 100%;
  box-sizing: border-box;
}
.flx-call-banner-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.flx-call-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.flx-call-icon-round {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.flx-call-left h4 {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 2px;
}
.flx-call-left p {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
}
.flx-call-number {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
}
.flx-btn-call-contact {
  background: #ffffff;
  color: var(--theme-call-btn-color);
  font-weight: 800;
  font-size: 13.5px;
  padding: 9px 22px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.flx-btn-call-contact:hover {
  background: #f1f5f9;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   9. Full 4-Column Dark Footer
   -------------------------------------------------------------------------- */
.flx-main-footer {
  background: #06111e;
  color: #94a3b8;
  padding: 50px 0 24px;
  font-size: 13.5px;
  width: 100%;
  box-sizing: border-box;
}
.flx-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 32px;
  margin-bottom: 32px;
  width: 100%;
  box-sizing: border-box;
}
.flx-footer-col h4 {
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 800;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.flx-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flx-footer-links a:hover {
  color: #ffffff;
  padding-left: 4px;
}
.flx-footer-socials {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.flx-social-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #112236;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s ease;
}
.flx-social-btn:hover {
  background: var(--theme-color);
  color: #ffffff;
}

.flx-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: #64748b;
  flex-wrap: wrap;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   10. Theme Palettes for 6 Curated Editions
   -------------------------------------------------------------------------- */

/* Concept 1: Crimson Racing Red (Screenshot 1 Exact) */
#design-1-root {
  --theme-color: #dc2626;
  --theme-accent: #ef4444;
  --theme-headline-accent: #ef4444;
  --theme-btn-bg: #dc2626;
  --theme-btn-hover: #b91c1c;
  --theme-glow: rgba(220, 38, 38, 0.35);
  --theme-hero-bg: linear-gradient(135deg, #091726 0%, #112236 100%);
  --theme-hero-overlay: radial-gradient(circle at 70% 30%, rgba(220,38,38,0.12) 0%, transparent 60%);
  --theme-card-bg: #091726;
  --theme-card-border: #1e334a;
  --theme-card-text: #ffffff;
  --theme-quote-title: #ffffff;
  --theme-quote-sub: #94a3b8;
  --theme-label-color: #cbd5e1;
  --theme-input-bg: #102438;
  --theme-input-text: #ffffff;
  --theme-input-border: #1e3a58;
  --theme-feat-icon-bg: #fef2f2;
  --theme-call-bg: #dc2626;
  --theme-call-btn-color: #dc2626;
}

/* Concept 2: Emerald Apex Green (Screenshot 2 Exact) */
#design-2-root {
  --theme-color: #16a34a;
  --theme-accent: #22c55e;
  --theme-headline-accent: #22c55e;
  --theme-btn-bg: #16a34a;
  --theme-btn-hover: #15803d;
  --theme-glow: rgba(22, 163, 74, 0.35);
  --theme-hero-bg: linear-gradient(135deg, #05141f 0%, #0c263b 100%);
  --theme-hero-overlay: radial-gradient(circle at 70% 30%, rgba(34,197,94,0.12) 0%, transparent 60%);
  --theme-card-bg: #091a29;
  --theme-card-border: #15324d;
  --theme-card-text: #ffffff;
  --theme-quote-title: #ffffff;
  --theme-quote-sub: #94a3b8;
  --theme-label-color: #cbd5e1;
  --theme-input-bg: #0e273d;
  --theme-input-text: #ffffff;
  --theme-input-border: #1c4266;
  --theme-feat-icon-bg: #f0fdf4;
  --theme-call-bg: #16a34a;
  --theme-call-btn-color: #16a34a;
}

/* Concept 3: Clean Eco Forest (Screenshot 4 Exact) */
#design-3-root {
  --theme-color: #15803d;
  --theme-accent: #16a34a;
  --theme-headline-accent: #15803d;
  --theme-btn-bg: #16a34a;
  --theme-btn-hover: #15803d;
  --theme-glow: rgba(22, 163, 74, 0.3);
  --theme-hero-bg: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  --theme-hero-overlay: radial-gradient(circle at 70% 30%, rgba(22,163,74,0.08) 0%, transparent 60%);
  --theme-card-bg: #ffffff;
  --theme-card-border: #dcfce7;
  --theme-card-text: #0f172a;
  --theme-quote-title: #0f172a;
  --theme-quote-sub: #64748b;
  --theme-label-color: #475569;
  --theme-input-bg: #f8fafc;
  --theme-input-text: #0f172a;
  --theme-input-border: #cbd5e1;
  --theme-feat-icon-bg: #f0fdf4;
  --theme-call-bg: #15803d;
  --theme-call-btn-color: #15803d;
}
#design-3-root .flx-hero-headline { color: #0f172a; }
#design-3-root .flx-hero-subtext { color: #475569; }
#design-3-root .flx-hero-feat-text strong { color: #0f172a; }
#design-3-root .flx-hero-feat-text span { color: #64748b; }

/* Concept 4: Sapphire Royal Blue */
#design-4-root {
  --theme-color: #0f52ba;
  --theme-accent: #3b82f6;
  --theme-headline-accent: #38bdf8;
  --theme-btn-bg: #0f52ba;
  --theme-btn-hover: #0c3e8e;
  --theme-glow: rgba(15, 82, 186, 0.35);
  --theme-hero-bg: linear-gradient(135deg, #071526 0%, #0d223c 100%);
  --theme-hero-overlay: radial-gradient(circle at 70% 30%, rgba(15,82,186,0.18) 0%, transparent 60%);
  --theme-card-bg: #0a1c30;
  --theme-card-border: #18375c;
  --theme-card-text: #ffffff;
  --theme-quote-title: #ffffff;
  --theme-quote-sub: #94a3b8;
  --theme-label-color: #cbd5e1;
  --theme-input-bg: #0f2742;
  --theme-input-text: #ffffff;
  --theme-input-border: #1e4570;
  --theme-feat-icon-bg: #eff6ff;
  --theme-call-bg: #0f52ba;
  --theme-call-btn-color: #0f52ba;
}

/* Concept 5: Warm Sunset Amber */
#design-5-root {
  --theme-color: #ea580c;
  --theme-accent: #f59e0b;
  --theme-headline-accent: #f59e0b;
  --theme-btn-bg: #ea580c;
  --theme-btn-hover: #c2410c;
  --theme-glow: rgba(234, 88, 12, 0.35);
  --theme-hero-bg: linear-gradient(135deg, #181216 0%, #26171f 100%);
  --theme-hero-overlay: radial-gradient(circle at 70% 30%, rgba(245,158,11,0.15) 0%, transparent 60%);
  --theme-card-bg: #22151c;
  --theme-card-border: #3d2432;
  --theme-card-text: #ffffff;
  --theme-quote-title: #ffffff;
  --theme-quote-sub: #94a3b8;
  --theme-label-color: #cbd5e1;
  --theme-input-bg: #2d1c26;
  --theme-input-text: #ffffff;
  --theme-input-border: #4a2c3d;
  --theme-feat-icon-bg: #fff7ed;
  --theme-call-bg: #ea580c;
  --theme-call-btn-color: #ea580c;
}

/* Concept 6: Obsidian Gold Executive */
#design-6-root {
  --theme-color: #d97706;
  --theme-accent: #f59e0b;
  --theme-headline-accent: #fbbf24;
  --theme-btn-bg: #d97706;
  --theme-btn-hover: #b45309;
  --theme-glow: rgba(217, 119, 6, 0.35);
  --theme-hero-bg: linear-gradient(135deg, #090c10 0%, #151b22 100%);
  --theme-hero-overlay: radial-gradient(circle at 70% 30%, rgba(245,158,11,0.12) 0%, transparent 60%);
  --theme-card-bg: #10161f;
  --theme-card-border: #24303f;
  --theme-card-text: #ffffff;
  --theme-quote-title: #ffffff;
  --theme-quote-sub: #94a3b8;
  --theme-label-color: #cbd5e1;
  --theme-input-bg: #17202c;
  --theme-input-text: #ffffff;
  --theme-input-border: #2d3d4f;
  --theme-feat-icon-bg: #fefce8;
  --theme-call-bg: #0f172a;
  --theme-call-btn-color: #0f172a;
}

/* --------------------------------------------------------------------------
   11. Interactive Modal Simulator
   -------------------------------------------------------------------------- */
.flx-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.flx-modal-backdrop.active {
  display: flex;
}
.flx-modal-box {
  background: #0f1c2d;
  border: 1px solid #1e334a;
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  padding: 24px;
  color: #ffffff;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  max-height: 90vh;
  overflow-y: auto;
}
.flx-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #1a2c42;
  color: #94a3b8;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flx-modal-close:hover {
  color: #ffffff;
  background: #253d5a;
}

/* --------------------------------------------------------------------------
   12. Complete Mobile & Tablet Responsive Engine
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .flx-hero-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .flx-fleet-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .flx-why-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .flx-trust-bar-card {
    grid-template-columns: repeat(2, 1fr);
  }
  .flx-promo-banner {
    grid-template-columns: 1fr;
  }
  .flx-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .flx-container {
    padding: 0 14px;
  }

  /* Top Bar */
  .flx-top-bar {
    padding: 6px 0;
  }
  .flx-top-bar-inner {
    flex-direction: column;
    text-align: center;
    gap: 4px;
  }
  .flx-top-left {
    flex-direction: column;
    gap: 4px;
  }

  /* Main Header */
  .flx-main-header {
    position: relative;
    top: 0;
  }
  .flx-nav-inner {
    height: 60px;
  }
  .flx-nav-logo img {
    height: 36px;
  }
  .flx-nav-menu {
    display: none;
  }
  .flx-nav-cta {
    padding: 8px 14px;
    font-size: 12.5px;
  }

  /* Hero Section */
  .flx-hero-section {
    padding: 24px 0 36px;
  }
  .flx-hero-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .flx-hero-content {
    padding-right: 0;
    text-align: center;
  }
  .flx-hero-headline {
    font-size: 30px;
    margin-bottom: 10px;
  }
  .flx-hero-subtext {
    font-size: 14px;
    margin: 0 auto 16px;
  }
  .flx-hero-features {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: left;
    max-width: 320px;
    margin: 0 auto 16px;
  }

  /* Hero Vehicle Graphic */
  .flx-hero-car-preview {
    max-width: 100%;
    margin: 8px auto 14px;
    text-align: center;
    overflow: hidden;
  }
  .flx-hero-car-preview img {
    width: 100%;
    max-height: 140px;
    object-fit: contain;
    margin: 0 auto;
  }

  /* Quick Quote Box on Mobile */
  .flx-quote-card {
    padding: 20px 14px;
    border-radius: 12px;
    margin-top: 4px;
  }
  .flx-quote-header h3 {
    font-size: 20px;
  }
  .flx-quote-header p {
    font-size: 12px;
  }
  .flx-form-group {
    margin-bottom: 12px;
  }
  .flx-input, .flx-select {
    font-size: 13px;
    padding: 10px 30px 10px 10px;
  }
  .flx-dates-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .flx-dates-row input {
    font-size: 12px;
    padding: 9px 6px;
  }
  .flx-btn-quote-submit {
    padding: 13px;
    font-size: 14.5px;
  }

  /* Trust Pillars Bar */
  .flx-trust-bar-section {
    margin-top: 20px;
    margin-bottom: 30px;
  }
  .flx-trust-bar-card {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 12px;
  }

  /* Fleet Grid */
  .flx-fleet-section {
    padding: 10px 0 40px;
  }
  .flx-fleet-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .flx-fleet-title-wrap h2 {
    font-size: 24px;
  }
  .flx-filter-tabs {
    width: 100%;
    justify-content: space-between;
  }
  .flx-tab-btn {
    flex: 1;
    justify-content: center;
    padding: 8px 10px;
    font-size: 12.5px;
  }
  .flx-fleet-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Van Promotional Banner on Mobile */
  .flx-promo-banner-section {
    padding: 0 0 40px;
  }
  .flx-promo-banner {
    grid-template-columns: 1fr;
    border-radius: 14px;
  }
  .flx-promo-content {
    padding: 24px 16px;
    text-align: center;
  }
  .flx-promo-content h3 {
    font-size: 22px;
  }
  .flx-promo-content p {
    font-size: 13.5px;
    margin-bottom: 16px;
  }
  .flx-promo-image-wrap {
    padding: 10px 16px 20px;
    background: transparent;
    height: auto;
  }
  .flx-promo-image-wrap img {
    width: 100%;
    max-width: 280px;
    max-height: 140px;
    object-fit: contain;
    margin: 0 auto;
  }

  /* Why Choose Flexii Grid */
  .flx-why-section {
    padding: 30px 0 40px;
  }
  .flx-section-heading-center h2 {
    font-size: 24px;
  }
  .flx-why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Reviews */
  .flx-reviews-section {
    padding: 40px 0;
  }
  .flx-reviews-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Call Banner */
  .flx-call-banner-inner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  .flx-call-left {
    flex-direction: column;
  }
  .flx-call-number {
    font-size: 22px;
  }

  /* Footer */
  .flx-main-footer {
    padding: 40px 0 20px;
  }
  .flx-footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .flx-footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}

/* ==========================================================================
   13. Specialized Styles for Designs 7, 8, and 9 (Uploaded Mockups)
   ========================================================================== */

/* Red accent bar */
.flx-red-bar {
  width: 48px;
  height: 4px;
  background: #dc2626;
  border-radius: 2px;
  margin: 10px 0 16px;
}

/* Daylight Hero Background (Design 7) */
.flx-hero-daylight {
  background: linear-gradient(135deg, #091726 0%, #172a3e 100%) !important;
}
.flx-headline-bold-red {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 900;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}
.flx-headline-bold-red .highlight {
  color: #ef4444;
  display: block;
}

/* Dusk Hero Background (Design 8) */
.flx-hero-dusk {
  background: linear-gradient(135deg, #071320 0%, #112236 100%) !important;
}
.flx-headline-bold-coral {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 900;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 12px;
}
.flx-headline-bold-coral .highlight {
  color: #ef4444;
  display: block;
}

/* Journey Hero Background (Design 9) */
.flx-hero-journey {
  background: linear-gradient(135deg, #061528 0%, #0d2847 100%) !important;
}
.flx-headline-italic {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 900;
  line-height: 1.1;
  color: #ffffff;
  font-style: italic;
  margin-bottom: 12px;
}
.flx-headline-italic .highlight {
  color: #ef4444;
  display: block;
}

/* Hero Feature Badges Row */
.flx-hero-badges-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.flx-badge-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.flx-badge-icon {
  font-size: 16px;
}
.flx-badge-info strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
}
.flx-badge-info span {
  font-size: 11px;
  color: #94a3b8;
}

/* White Quick Quote Box (Design 9) */
.flx-quote-card-white {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}
.flx-quote-card-white .flx-quote-header h3 {
  color: #0f172a !important;
}
.flx-quote-card-white .flx-quote-header p {
  color: #64748b !important;
}
.flx-quote-card-white .flx-form-label {
  color: #475569 !important;
}
.flx-quote-card-white .flx-input,
.flx-quote-card-white .flx-select {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

/* Full Width Dark Why Choose Band */
.flx-why-band-dark {
  background: #09131e;
  padding: 50px 0;
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.flx-why-band-title {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 36px;
  letter-spacing: 0.5px;
}
.flx-why-band-title .highlight {
  color: #dc2626;
}
.flx-why-band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.flx-why-band-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.flx-why-band-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #dc2626;
  color: #dc2626;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(220, 38, 38, 0.08);
}
.flx-why-band-text h4 {
  font-size: 14.5px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 2px;
}
.flx-why-band-text p {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.35;
}

/* Slanted Partner Section */
.flx-slanted-partner-section {
  padding: 50px 0;
}
.flx-slanted-partner-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
}
.flx-slanted-partner-left {
  padding: 40px;
}
.flx-slanted-partner-left .sub {
  font-size: 12px;
  font-weight: 800;
  color: #dc2626;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.flx-slanted-partner-left h2 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
  color: #0f172a;
  margin-top: 4px;
}
.flx-slanted-partner-left p {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 24px;
}
.flx-slanted-partner-right {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #091726;
  padding: 20px;
}
.flx-slanted-partner-right img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 15px 25px rgba(0,0,0,0.5));
}

/* Doorstep Section (Design 8) */
.flx-doorstep-section {
  padding: 50px 0;
}
.flx-doorstep-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.flx-doorstep-content {
  padding: 40px;
}
.flx-doorstep-content .sub {
  font-size: 12px;
  font-weight: 800;
  color: #dc2626;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.flx-doorstep-content h2 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
  color: #0f172a;
  margin-top: 4px;
}
.flx-doorstep-content p {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 20px;
}
.flx-btn-doorstep {
  background: #ffffff;
  color: #dc2626;
  border: 2px solid #dc2626;
  font-weight: 800;
  font-size: 13.5px;
  padding: 10px 22px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.flx-btn-doorstep:hover {
  background: #dc2626;
  color: #ffffff;
}
.flx-doorstep-image-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #091726;
  padding: 20px;
}
.flx-doorstep-image-wrap img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
}

/* Visual Fleet Category Range Cards (Design 9) */
.flx-range-section {
  padding: 50px 0;
}
.flx-range-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 30px;
}
.flx-range-card {
  background: #091726;
  border-radius: 14px;
  overflow: hidden;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
}
.flx-range-card:hover {
  transform: translateY(-4px);
}
.flx-range-photo {
  height: 140px;
  background: #0f243a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.flx-range-photo img {
  max-width: 100%;
  max-height: 110px;
  object-fit: contain;
}
.flx-range-body {
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.flx-range-title {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
}
.flx-range-body p {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.45;
  margin-bottom: 18px;
  flex: 1;
}
.flx-btn-range {
  background: #dc2626;
  color: #ffffff;
  border: none;
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.flx-btn-range:hover {
  background: #b91c1c;
}

/* Numbers Stats Bar (Design 9) */
.flx-stats-bar-section {
  padding: 30px 0;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}
.flx-stats-bar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.flx-stat-box {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
}
.flx-stat-icon {
  font-size: 28px;
}
.flx-stat-info h3 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 2px;
}
.flx-stat-info p {
  font-size: 12.5px;
  color: #64748b;
  font-weight: 600;
}

/* Dual Buttons */
.flx-dual-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.flx-btn-promo-outline {
  background: #ffffff;
  color: #dc2626;
  border: 2px solid #dc2626;
  font-weight: 700;
  font-size: 14px;
  padding: 9px 22px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.flx-btn-promo-outline:hover {
  background: #dc2626;
  color: #ffffff;
}

/* Call Pill Dark */
.flx-call-pill-dark {
  background: #091726;
  color: #ffffff;
  font-weight: 800;
  font-size: 18px;
  padding: 8px 18px;
  border-radius: 8px;
}

/* Design 7 Root Variables */
#design-7-root {
  --theme-color: #dc2626;
  --theme-accent: #ef4444;
  --theme-btn-bg: #dc2626;
  --theme-btn-hover: #b91c1c;
  --theme-glow: rgba(220, 38, 38, 0.35);
  --theme-card-bg: #091726;
  --theme-card-border: #1e334a;
  --theme-card-text: #ffffff;
  --theme-quote-title: #ffffff;
  --theme-quote-sub: #94a3b8;
  --theme-label-color: #cbd5e1;
  --theme-input-bg: #102438;
  --theme-input-text: #ffffff;
  --theme-input-border: #1e3a58;
  --theme-feat-icon-bg: #fef2f2;
  --theme-call-bg: #dc2626;
  --theme-call-btn-color: #dc2626;
}

/* Design 8 Root Variables */
#design-8-root {
  --theme-color: #dc2626;
  --theme-accent: #ef4444;
  --theme-btn-bg: #dc2626;
  --theme-btn-hover: #b91c1c;
  --theme-glow: rgba(220, 38, 38, 0.35);
  --theme-card-bg: #091726;
  --theme-card-border: #1e334a;
  --theme-card-text: #ffffff;
  --theme-quote-title: #ffffff;
  --theme-quote-sub: #94a3b8;
  --theme-label-color: #cbd5e1;
  --theme-input-bg: #102438;
  --theme-input-text: #ffffff;
  --theme-input-border: #1e3a58;
  --theme-feat-icon-bg: #fef2f2;
  --theme-call-bg: #dc2626;
  --theme-call-btn-color: #dc2626;
}

/* Design 9 Root Variables */
#design-9-root {
  --theme-color: #dc2626;
  --theme-accent: #ef4444;
  --theme-btn-bg: #dc2626;
  --theme-btn-hover: #b91c1c;
  --theme-glow: rgba(220, 38, 38, 0.35);
  --theme-card-bg: #ffffff;
  --theme-card-border: #e2e8f0;
  --theme-card-text: #0f172a;
  --theme-quote-title: #0f172a;
  --theme-quote-sub: #64748b;
  --theme-label-color: #475569;
  --theme-input-bg: #f8fafc;
  --theme-input-text: #0f172a;
  --theme-input-border: #cbd5e1;
  --theme-feat-icon-bg: #fef2f2;
  --theme-call-bg: #dc2626;
  --theme-call-btn-color: #dc2626;
}

/* Mobile Adjustments for Designs 7, 8, 9 */
@media (max-width: 768px) {
  .flx-headline-bold-red,
  .flx-headline-bold-coral,
  .flx-headline-italic {
    font-size: 28px !important;
  }
  .flx-why-band-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .flx-slanted-partner-box,
  .flx-doorstep-card {
    grid-template-columns: 1fr !important;
  }
  .flx-slanted-partner-left,
  .flx-doorstep-content {
    padding: 22px 16px !important;
    text-align: center;
  }
  .flx-range-cards-grid {
    grid-template-columns: 1fr !important;
  }
  .flx-stats-bar-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px;
  }
  .flx-call-pill-dark {
    font-size: 15px;
  }
}