feat: complete Changan digital manuals web application with mobile layout fix

.dockerignore

@@ -0,0 +1,14 @@
+node_modules
+dist
+.git
+.gitignore
+*.png
+*.log
+.wrangler
+__pycache__
+*.py
+raw_chinese
+raw_chinese_x5plus
+translation_work
+translation_work_x5plus
+test_*

.gitignore

@@ -0,0 +1,17 @@
+node_modules/
+dist/
+.DS_Store
+*.log
+.wrangler/
+__pycache__/
+*.pyc
+*.png
+*.py
+verify_no_chinese.cjs
+index_static.html
+manual.html
+manual_static.html
+raw_chinese/
+raw_chinese_x5plus/
+translation_work/
+translation_work_x5plus/

Dockerfile

@@ -0,0 +1,24 @@
+# ============================================================
+# Stage 1: Build
+# ============================================================
+FROM node:20-alpine AS build
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN npm ci
+
+COPY . .
+RUN npm run build
+
+# ============================================================
+# Stage 2: Production Nginx Server
+# ============================================================
+FROM nginx:1.27-alpine
+
+RUN rm -f /etc/nginx/conf.d/default.conf
+COPY nginx.conf /etc/nginx/conf.d/
+COPY --from=build /app/dist /usr/share/nginx/html
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -0,0 +1,107 @@
+# Changan Digital Owner Manuals Platform
+### پلتفرم راهنمای دیجیتال و تعاملی خودروهای چانگان
+### 长安汽车数字化车主手册与驾驶指南平台
+
+A complete, high-fidelity offline web platform supporting official Changan digital vehicle manuals in **English**, **Persian (فارسی)** with **Fluent RTL**, and the **Original Chinese (中文)**. Features an interactive Multi-Vehicle Portal, First-Time Visitor Language Onboarding Modal, Vehicle Scoped Search Engine, and comprehensive technical guides with all local diagrams and switch panels.
+
+---
+
+## 🌟 Key Features
+
+### 1. 🚗 Multi-Vehicle Home Portal (`index.html`)
+- **Vehicle Catalog Grid**:
+  - Showcases Changan models with high-resolution vehicle photography.
+  - **Car names placed directly under their photos** with edition and trim details.
+  - **Large Action Buttons** (`.btn-car-select` with 16px font and 16px 24px padding) for easy selection on desktop and mobile.
+  - Active Model: **Changan CS55 PLUS (4th Generation / CAOM725311)** with 286 technical topics, interactive switchboards, and 34 dashboard warning lamps (featuring authentic exterior photography).
+  - Upcoming Model: **Changan X5 PLUS 2026** (Next-Gen Intelligent Cockpit & Sport Styling).
+- **Direct Redirection to Vehicle Guidebook**:
+  - Selecting any vehicle redirects directly to its dedicated manual (`manual.html?car=cs55plus`).
+  - The manual includes a prominent **"← All Models" / "← مدل‌های خودرو"** back button to return to the car selection portal anytime.
+
+### 2. 🌐 First-Time Visitor Language Selection Modal
+- Automatically detects first-time visitors (`!localStorage.getItem('changan_user_lang_selected')`).
+- Displays a central modal with a blurred backdrop:
+  - **Question strictly in English**: `"Please select your language"`
+  - 3 large, accessible interactive options:
+    - 🇬🇧 **English** (UK/US)
+    - 🇮🇷 **Persian** (فارسی)
+    - 🇨🇳 **Chinese** (中文 简体)
+  - Instantly saves preference, applies text translations, switches layout direction (`dir="rtl"` for Persian), and closes smoothly.
+  - Language can still be changed anytime from the header dropdown menu.
+
+### 3. 🔍 Scoped Search Engine
+- The search engine is strictly scoped to the active vehicle model:
+  - Header search input placeholder dynamically identifies the vehicle:
+    - *EN*: `Search CS55 PLUS manual (e.g., adaptive cruise, start engine, fuses, TPMS)...`
+    - *FA*: `جستجو در راهنمای CS55 پلاس (مانند: کروز کنترل، استارت، فیوزها، باد تایر)...`
+    - *ZH*: `搜索 CS55 PLUS 手册（如：自适应巡航、启动发动机、保险丝、胎压）...`
+  - Real-time search modal displays a vehicle scope indicator badge:
+    `🚗 Searching inside CS55 PLUS Manual (286 topics)`
+  - Results are filtered exclusively to the selected car's documentation.
+
+### 4. 🖼️ Fixed Image Background & Contrast
+- Fixed the welcome hero banner image (`assets/images/ui/63d14fc3-1cb8-407a-95ff-4d9392e8894d.png`):
+  - Previously, the white "CS55" lettering was on a transparent background and became invisible on white cards.
+  - Now composited on a dark automotive gradient banner (`#0e1620` to `#172d3a`) with a subtle teal accent border.
+  - The white `"CS55"`, red `"S"`, and red `"PLUS"` badge are crisp, vivid, and 100% visible across any light, dark, or transparent backdrop.
+  - `.welcome-car-img` in CSS is also styled with a dark gradient container, rounded corners, and elevation shadow.
+
+### 5. 🇮🇷 Native Persian Localization with Fluent RTL (`dir="rtl"`)
+- Full automotive Persian engineering translation for all 13 sections/plates, 286 topics, and 92 interactive switch buttons/warning lamps.
+- Embedded Google Font **Vazirmatn** (`wght@300;400;500;600;700;800`).
+- Mirrored navigation sidebar, breadcrumbs, accordion arrows, callouts (`border-right`), and pagination.
+- Zero external translation APIs used; translated natively using Gemini.
+
+---
+
+## 🚀 How to Run
+
+Run the platform using a local HTTP server:
+
+```bash
+# In the project directory:
+python3 -m http.server 8080
+```
+
+Open your browser to:
+👉 **[http://localhost:8080/](http://localhost:8080/)**
+
+- **Home Portal**: `http://localhost:8080/index.html`
+- **CS55 PLUS Guidebook**: `http://localhost:8080/manual.html?car=cs55plus`
+- **Direct Persian Link**: `http://localhost:8080/index.html?lang=fa`
+
+---
+
+## 📁 Project Architecture
+
+```
+CS55Plus Manual/
+├── index.html                   # Multi-Vehicle Home Portal & First-Visit Language Modal
+├── manual.html                  # Interactive Vehicle Guidebook (scoped search & back button)
+├── assets/
+│   ├── css/
+│   │   ├── home.css             # Dedicated Home Portal stylesheet (catalog grid, modal, RTL)
+│   │   ├── style.css            # Guidebook stylesheet (sidebar, breadcrumbs, alert callouts)
+│   │   ├── htmlCustom.css       # Cleaned original manual typography styles
+│   │   └── app.css              # Reset & layout foundations
+│   ├── js/
+│   │   ├── home.js              # Home portal router, vehicle catalog, first-visit language modal
+│   │   └── app.js               # Guidebook engine, scoped search, trilingual toggle, lightbox
+│   └── images/
+│       ├── ui/                  # Vehicle card photos, icons, plates, warning lamp indicators
+│       └── topics/              # 394 technical diagrams, wiring, mechanical illustrations
+├── data/
+│   ├── manual_fa.json           # Persian manual (286 topics + welcome + 13 plates)
+│   ├── manual_en.json           # English manual (286 topics + welcome + 13 plates)
+│   ├── manual_zh.json           # Chinese manual (286 topics + welcome + 13 plates)
+│   ├── plates_fa.json           # Persian category hierarchy & navigation structure
+│   ├── plates_en.json           # English category hierarchy & navigation structure
+│   ├── quickentry_fa.json       # Persian interactive switch cards (92 buttons & indicators)
+│   ├── quickentry_en.json       # English interactive switch cards (92 buttons & indicators)
+│   ├── welcome_fa.json          # Persian welcome hero section & safety disclaimer
+│   ├── welcome_en.json          # English welcome hero section & safety disclaimer
+│   ├── search_index_fa.json     # Persian full-text search index
+│   └── search_index.json        # English full-text search index
+└── README.md                    # Project documentation
+```

assets/css/home.css

@@ -0,0 +1,726 @@
+/* ==========================================================================
+   CHANGAN DIGITAL MANUALS — HOME PORTAL STYLESHEET
+   Clean, modern automotive design system with dark/light harmony & RTL support
+   ========================================================================== */
+
+:root {
+  --primary: #2787A6;
+  --primary-hover: #1f6d87;
+  --primary-light: rgba(39, 135, 166, 0.12);
+  --primary-border: rgba(39, 135, 166, 0.35);
+  --accent: #E0533C;
+  --accent-gold: #f59e0b;
+  --bg-page: #f8fafc;
+  --bg-card: #ffffff;
+  --bg-card-alt: #f1f5f9;
+  --text-main: #0f172a;
+  --text-muted: #64748b;
+  --border-color: #e2e8f0;
+  --header-bg: rgba(255, 255, 255, 0.94);
+  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 6px 16px -2px rgba(15, 23, 42, 0.08);
+  --shadow-lg: 0 16px 32px -4px rgba(15, 23, 42, 0.12);
+  --radius-sm: 8px;
+  --radius-md: 14px;
+  --radius-lg: 20px;
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+[dir="rtl"] {
+  --font-family: "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-family);
+  background-color: var(--bg-page);
+  color: var(--text-main);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* --------------------------------------------------------------------------
+   HEADER
+   -------------------------------------------------------------------------- */
+.home-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: var(--header-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border-color);
+  padding: 0 24px;
+  height: 72px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: var(--shadow-sm);
+}
+
+.brand-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  text-decoration: none;
+  color: inherit;
+}
+
+.brand-logo-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  font-size: 22px;
+  box-shadow: var(--shadow-sm);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.brand-text-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.brand-title-main {
+  font-size: 19px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--text-main);
+  line-height: 1.2;
+}
+
+.brand-title-sub {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+/* Language Dropdown in Header */
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.lang-dropdown-wrapper {
+  position: relative;
+}
+
+.lang-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 16px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-main);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: inherit;
+}
+
+.lang-btn:hover {
+  background: var(--bg-card-alt);
+  border-color: var(--primary);
+}
+
+.lang-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  min-width: 170px;
+  display: none;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: 1000;
+}
+
+[dir="rtl"] .lang-menu {
+  right: auto;
+  left: 0;
+}
+
+.lang-menu.open {
+  display: flex;
+  animation: dropdownFadeIn 0.18s ease;
+}
+
+@keyframes dropdownFadeIn {
+  from { opacity: 0; transform: translateY(-6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.lang-option-btn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 18px;
+  background: none;
+  border: none;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-main);
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s ease;
+  width: 100%;
+  font-family: inherit;
+}
+
+[dir="rtl"] .lang-option-btn {
+  text-align: right;
+}
+
+.lang-option-btn:hover {
+  background: var(--bg-card-alt);
+  color: var(--primary);
+}
+
+.lang-option-btn.active {
+  font-weight: 700;
+  color: var(--primary);
+  background: var(--primary-light);
+}
+
+/* --------------------------------------------------------------------------
+   HERO SECTION
+   -------------------------------------------------------------------------- */
+.home-hero-section {
+  padding: 56px 24px 36px;
+  text-align: center;
+  background: radial-gradient(circle at 50% 20%, rgba(39, 135, 166, 0.08) 0%, transparent 70%);
+}
+
+.hero-content-wrap {
+  max-width: 820px;
+  margin: 0 auto;
+}
+
+.hero-pill-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 16px;
+  border-radius: 999px;
+  background: var(--primary-light);
+  border: 1px solid var(--primary-border);
+  color: var(--primary);
+  font-size: 13px;
+  font-weight: 700;
+  margin-bottom: 20px;
+  letter-spacing: 0.02em;
+}
+
+.hero-heading {
+  font-size: 38px;
+  font-weight: 800;
+  line-height: 1.25;
+  color: var(--text-main);
+  letter-spacing: -0.025em;
+  margin-bottom: 16px;
+}
+
+.hero-description {
+  font-size: 18px;
+  color: var(--text-muted);
+  line-height: 1.6;
+  font-weight: 400;
+  max-width: 700px;
+  margin: 0 auto 30px;
+}
+
+/* --------------------------------------------------------------------------
+   VEHICLES CATALOG GRID
+   -------------------------------------------------------------------------- */
+.vehicles-section {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 20px 24px 60px;
+  width: 100%;
+  flex: 1;
+}
+
+.section-header-row {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-bottom: 32px;
+  border-bottom: 2px solid var(--border-color);
+  padding-bottom: 16px;
+}
+
+.section-title {
+  font-size: 24px;
+  font-weight: 800;
+  color: var(--text-main);
+}
+
+.section-counter {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--primary);
+  background: var(--primary-light);
+  padding: 4px 12px;
+  border-radius: 999px;
+}
+
+.vehicles-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+  gap: 32px;
+}
+
+/* --------------------------------------------------------------------------
+   CAR CARD
+   -------------------------------------------------------------------------- */
+.car-card {
+  background: var(--bg-card);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-color);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+  position: relative;
+}
+
+.car-card:hover {
+  transform: translateY(-6px);
+  box-shadow: var(--shadow-lg);
+  border-color: var(--primary-border);
+}
+
+.car-card.active-model {
+  border-color: var(--primary);
+  box-shadow: 0 8px 24px -4px rgba(39, 135, 166, 0.2);
+}
+
+/* Photo Container */
+.car-photo-container {
+  position: relative;
+  width: 100%;
+  height: 230px;
+  background: #0f172a;
+  overflow: hidden;
+}
+
+.car-photo-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.4s ease;
+}
+
+.car-card:hover .car-photo-img {
+  transform: scale(1.04);
+}
+
+.car-status-badge {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  backdrop-filter: blur(8px);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+  z-index: 2;
+}
+
+[dir="rtl"] .car-status-badge {
+  right: auto;
+  left: 14px;
+}
+
+.badge-active {
+  background: rgba(34, 197, 94, 0.92);
+  color: #ffffff;
+}
+
+.badge-upcoming {
+  background: rgba(100, 116, 139, 0.92);
+  color: #ffffff;
+}
+
+/* Car Details under Photo */
+.car-card-body {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.car-name-title {
+  font-size: 22px;
+  font-weight: 800;
+  color: var(--text-main);
+  margin-bottom: 6px;
+  line-height: 1.3;
+}
+
+.car-sub-label {
+  font-size: 14px;
+  color: var(--primary);
+  font-weight: 600;
+  margin-bottom: 14px;
+}
+
+.car-specs-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 22px;
+}
+
+.spec-chip {
+  background: var(--bg-card-alt);
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 600;
+  padding: 4px 10px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+}
+
+.car-card-actions {
+  margin-top: auto;
+}
+
+/* BIG SELECTION BUTTON */
+.btn-car-select {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 24px; /* Big button */
+  font-size: 16px;
+  font-weight: 700;
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.22s ease;
+  font-family: inherit;
+  border: none;
+  box-shadow: var(--shadow-sm);
+}
+
+.btn-car-select.btn-primary {
+  background: linear-gradient(135deg, var(--primary) 0%, #1d728e 100%);
+  color: #ffffff;
+}
+
+.btn-car-select.btn-primary:hover {
+  background: linear-gradient(135deg, #1f6d87 0%, #17576d 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 18px -2px rgba(39, 135, 166, 0.4);
+}
+
+.btn-car-select.btn-disabled {
+  background: var(--bg-card-alt);
+  color: var(--text-muted);
+  border: 1px dashed var(--border-color);
+  cursor: not-allowed;
+  opacity: 0.85;
+}
+
+/* --------------------------------------------------------------------------
+   FEATURES ROW
+   -------------------------------------------------------------------------- */
+.features-section {
+  background: var(--bg-card);
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+  padding: 48px 24px;
+}
+
+.features-wrap {
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+.features-title {
+  text-align: center;
+  font-size: 24px;
+  font-weight: 800;
+  margin-bottom: 36px;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 24px;
+}
+
+.feature-box {
+  padding: 24px;
+  border-radius: var(--radius-md);
+  background: var(--bg-page);
+  border: 1px solid var(--border-color);
+  text-align: center;
+  transition: transform 0.2s ease;
+}
+
+.feature-box:hover {
+  transform: translateY(-4px);
+  border-color: var(--primary-border);
+}
+
+.feature-icon {
+  font-size: 32px;
+  margin-bottom: 14px;
+}
+
+.feature-heading {
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--text-main);
+  margin-bottom: 8px;
+}
+
+.feature-desc {
+  font-size: 14px;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+/* --------------------------------------------------------------------------
+   FOOTER
+   -------------------------------------------------------------------------- */
+.home-footer {
+  background: #0f172a;
+  color: #94a3b8;
+  padding: 36px 24px;
+  font-size: 14px;
+  text-align: center;
+}
+
+.footer-inner {
+  max-width: 1000px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.footer-hotline {
+  color: #38bdf8;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+/* --------------------------------------------------------------------------
+   FIRST-TIME VISITOR LANGUAGE MODAL
+   Requirement:
+   - Question must be in English
+   - 3 options: Chinese, English, Persian
+   - Modal pops up for first time visitors
+   -------------------------------------------------------------------------- */
+.lang-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.72);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+
+.lang-modal-backdrop.open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.lang-modal-dialog {
+  background: var(--bg-card);
+  border-radius: var(--radius-lg);
+  width: 100%;
+  max-width: 520px;
+  padding: 36px 32px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  border: 1px solid var(--border-color);
+  text-align: center;
+  transform: translateY(20px) scale(0.96);
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.lang-modal-backdrop.open .lang-modal-dialog {
+  transform: translateY(0) scale(1);
+}
+
+.lang-modal-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--primary-light);
+  color: var(--primary);
+  padding: 6px 14px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  margin-bottom: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* English question as strictly required by prompt */
+.lang-modal-question {
+  font-size: 26px;
+  font-weight: 800;
+  color: var(--text-main);
+  margin-bottom: 8px;
+  line-height: 1.3;
+}
+
+.lang-modal-subtext {
+  font-size: 15px;
+  color: var(--text-muted);
+  margin-bottom: 28px;
+}
+
+.lang-modal-options-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-bottom: 24px;
+}
+
+.lang-choice-btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  background: var(--bg-card-alt);
+  border: 2px solid var(--border-color);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: inherit;
+}
+
+.lang-choice-btn:hover {
+  border-color: var(--primary);
+  background: #ffffff;
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.lang-choice-btn.selected {
+  border-color: var(--primary);
+  background: var(--primary-light);
+}
+
+.lang-choice-left {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.lang-flag {
+  font-size: 28px;
+  line-height: 1;
+}
+
+.lang-names-col {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.lang-name-en {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-main);
+}
+
+.lang-name-native {
+  font-size: 13px;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.lang-choice-check {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 2px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: transparent;
+  transition: all 0.2s ease;
+}
+
+.lang-choice-btn:hover .lang-choice-check,
+.lang-choice-btn.selected .lang-choice-check {
+  border-color: var(--primary);
+  background: var(--primary);
+  color: #ffffff;
+}
+
+.lang-modal-footer-note {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+/* --------------------------------------------------------------------------
+   RESPONSIVE DESIGN
+   -------------------------------------------------------------------------- */
+@media (max-width: 768px) {
+  .home-header {
+    padding: 0 16px;
+    height: 64px;
+  }
+  
+  .brand-title-main {
+    font-size: 16px;
+  }
+  
+  .hero-heading {
+    font-size: 28px;
+  }
+  
+  .hero-description {
+    font-size: 16px;
+  }
+  
+  .vehicles-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .lang-modal-dialog {
+    padding: 28px 20px;
+  }
+  
+  .lang-modal-question {
+    font-size: 22px;
+  }
+}