diff --git a/Services/Main/MainHub.Api/Services/ServiceHistoryService.cs b/Services/Main/MainHub.Api/Services/ServiceHistoryService.cs
index 4efc7c816..5b3d317a2 100644
--- a/Services/Main/MainHub.Api/Services/ServiceHistoryService.cs
+++ b/Services/Main/MainHub.Api/Services/ServiceHistoryService.cs
@@ -255,4 +255,4 @@ Guid serviceHistoryId
       Price = r.Price
     }).ToList();
   }
-}
+}
\ No newline at end of file
diff --git a/Services/Main/MainHub.Api/Validators/CreateVehicleDtoValidator.cs b/Services/Main/MainHub.Api/Validators/CreateVehicleDtoValidator.cs
index 55217e6fc..679e161b6 100644
--- a/Services/Main/MainHub.Api/Validators/CreateVehicleDtoValidator.cs
+++ b/Services/Main/MainHub.Api/Validators/CreateVehicleDtoValidator.cs
@@ -1,4 +1,3 @@
-using System.Data;
 using System.Text.RegularExpressions;
 using FluentValidation;
 using MainHub.Api.DTOs;
@@ -61,12 +60,12 @@ public CreateVehicleDtoValidator()
       .When(x => x.BoughtAt.HasValue);
 
     RuleFor(x => x.EngineCapacity)
-      .NotEmpty()
-      .WithMessage("Engine capacity is required.")
-      .GreaterThan(0)
-      .WithMessage("Engine capacity must be greater than 0.")
-      .LessThanOrEqualTo(10000)
-      .WithMessage("Engine capacity must be less than or equal to 10000.");
+    .NotEmpty().WithMessage("Engine capacity is required.")
+    .LessThanOrEqualTo(10000).WithMessage("Engine capacity must be less than or equal to 10000.")
+    .GreaterThan(0).WithMessage("Engine capacity must be greater than 0.")
+        .When(x => x.FuelType is not FuelType.Electric and not FuelType.Hydrogen)
+    .Equal(0).WithMessage("Engine capacity must be 0 for Electric/Hydrogen vehicles.")
+        .When(x => x.FuelType is FuelType.Electric or FuelType.Hydrogen);
 
     RuleFor(x => x.Mileage)
       .NotEmpty()
diff --git a/apps/.DS_Store b/apps/.DS_Store
index 5008ddfcf..69c45d310 100644
Binary files a/apps/.DS_Store and b/apps/.DS_Store differ
diff --git a/apps/AdminWebUi/src/App.tsx b/apps/AdminWebUi/src/App.tsx
index 9630cc9cf..57d38541c 100644
--- a/apps/AdminWebUi/src/App.tsx
+++ b/apps/AdminWebUi/src/App.tsx
@@ -6,6 +6,7 @@ import { BrowserRouter } from "react-router-dom";
 import { AuthProvider } from "./auth/AuthContext";
 import { StoProvider } from "./context/StoContext";
 import { StoVehicleProvider } from "./context/StoVehicleContext";
+import { BookingRequestProvider } from "./context/BookingRequestContext";
 import { queryClient } from "./lib/queryClient";
 import { AppRouter } from "./routes/AppRouter";
 import { persistor, store } from "./store";
@@ -19,7 +20,9 @@ function App() {
             <AuthProvider>
               <StoProvider>
                 <StoVehicleProvider>
-                  <AppRouter />
+                  <BookingRequestProvider>
+                    <AppRouter />
+                  </BookingRequestProvider>
                 </StoVehicleProvider>
               </StoProvider>
             </AuthProvider>
diff --git a/apps/AdminWebUi/src/components/ActivityLog/ActivityLog.module.css b/apps/AdminWebUi/src/components/ActivityLog/ActivityLog.module.css
new file mode 100644
index 000000000..4cd79dee1
--- /dev/null
+++ b/apps/AdminWebUi/src/components/ActivityLog/ActivityLog.module.css
@@ -0,0 +1,233 @@
+.section {
+  margin: 20px 24px 24px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: var(--radius-lg);
+  background-color: #1a1c1e;
+  overflow: hidden;
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 20px;
+  border: none;
+  background: linear-gradient(
+    180deg,
+    rgba(74, 222, 158, 0.04) 0%,
+    transparent 100%
+  );
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.toggle:hover {
+  background-color: rgba(255, 255, 255, 0.02);
+}
+
+.toggleMain {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.toggleTitle {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-secondary);
+}
+
+.countBadge {
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent-primary);
+  background-color: rgba(74, 222, 158, 0.12);
+  border: 1px solid rgba(74, 222, 158, 0.24);
+}
+
+.toggleHint {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--text-tertiary);
+  line-height: 1.4;
+}
+
+.chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  border-radius: var(--radius-sm);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: var(--text-secondary);
+  transition:
+    transform 0.3s ease,
+    color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.chevronExpanded {
+  transform: rotate(180deg);
+  color: var(--accent-primary);
+  border-color: rgba(74, 222, 158, 0.24);
+}
+
+.bodyWrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.32s ease;
+}
+
+.bodyWrapperExpanded {
+  grid-template-rows: 1fr;
+}
+
+.bodyInner {
+  overflow: hidden;
+  min-height: 0;
+  opacity: 0;
+  transition: opacity 0.24s ease;
+}
+
+.bodyWrapperExpanded .bodyInner {
+  opacity: 1;
+}
+
+.body {
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.scrollArea {
+  max-height: 360px;
+  overflow-y: auto;
+  padding: 12px 16px 16px;
+}
+
+.scrollArea::-webkit-scrollbar {
+  width: 6px;
+}
+
+.scrollArea::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.12);
+  border-radius: 3px;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.entry {
+  display: grid;
+  grid-template-columns: 20px 1fr;
+  gap: 12px;
+  padding: 12px 4px;
+  position: relative;
+}
+
+.entry:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  left: 9px;
+  top: 32px;
+  bottom: -4px;
+  width: 2px;
+  background-color: rgba(255, 255, 255, 0.08);
+  border-radius: 1px;
+}
+
+.marker {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 4px;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
+}
+
+.entryMain {
+  min-width: 0;
+}
+
+.entryHeader {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.entryTitle {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.35;
+}
+
+.entryTime {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+
+.entryMeta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
+.actorName {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.actorRole {
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  color: var(--text-tertiary);
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.entryDescription {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.45;
+}
+
+.empty {
+  padding: 20px 16px;
+  font-size: 13px;
+  color: var(--text-tertiary);
+  text-align: center;
+}
diff --git a/apps/AdminWebUi/src/components/ActivityLog/ActivityLog.tsx b/apps/AdminWebUi/src/components/ActivityLog/ActivityLog.tsx
new file mode 100644
index 000000000..baf778282
--- /dev/null
+++ b/apps/AdminWebUi/src/components/ActivityLog/ActivityLog.tsx
@@ -0,0 +1,120 @@
+import { useState } from "react";
+import type { StoVehicleActivityEntry, StoVehicleActivityType } from "../../types/stoVehicle";
+import { ACTIVITY_ACTOR_ROLE_LABELS } from "../../utils/stoVehicleActivityLog";
+import { formatEventDateTime } from "../../utils/stoVehicleLabels";
+import styles from "./ActivityLog.module.css";
+
+const ACTIVITY_DOT_COLORS: Record<StoVehicleActivityType, string> = {
+  vehicle_created: "#6e7681",
+  appointment_scheduled: "#58a6ff",
+  vehicle_arrived: "#4ade9e",
+  status_changed: "#a371f7",
+  mechanic_assigned: "#d29922",
+  approval_requested: "#ffa657",
+  approval_sent_to_client: "#58a6ff",
+  approval_approved: "#4ade9e",
+  approval_rejected: "#f85149",
+};
+
+interface ActivityLogProps {
+  entries: StoVehicleActivityEntry[];
+  hint?: string;
+}
+
+function ChevronIcon({ expanded }: { expanded: boolean }) {
+  return (
+    <span
+      className={[styles.chevron, expanded ? styles.chevronExpanded : ""]
+        .filter(Boolean)
+        .join(" ")}
+      aria-hidden="true"
+    >
+      <svg viewBox="0 0 16 16" width="14" height="14">
+        <path
+          d="M4 6l4 4 4-4"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </span>
+  );
+}
+
+export function ActivityLog({
+  entries,
+  hint = "Повний життєвий цикл: статуси, погодження, призначення механіка",
+}: ActivityLogProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <section className={styles.section}>
+      <button
+        type="button"
+        className={styles.toggle}
+        onClick={() => setIsExpanded((current) => !current)}
+        aria-expanded={isExpanded}
+      >
+        <div>
+          <div className={styles.toggleMain}>
+            <h3 className={styles.toggleTitle}>Журнал дій</h3>
+            <span className={styles.countBadge}>{entries.length}</span>
+          </div>
+          <p className={styles.toggleHint}>{hint}</p>
+        </div>
+        <ChevronIcon expanded={isExpanded} />
+      </button>
+
+      <div
+        className={[
+          styles.bodyWrapper,
+          isExpanded ? styles.bodyWrapperExpanded : "",
+        ]
+          .filter(Boolean)
+          .join(" ")}
+      >
+        <div className={styles.bodyInner}>
+          <div className={styles.body}>
+            {entries.length === 0 ? (
+              <p className={styles.empty}>Записів у журналі поки немає.</p>
+            ) : (
+              <div className={styles.scrollArea}>
+                <ul className={styles.list}>
+                  {entries.map((entry) => (
+                    <li key={entry.id} className={styles.entry}>
+                      <div className={styles.marker}>
+                        <span
+                          className={styles.dot}
+                          style={{ backgroundColor: ACTIVITY_DOT_COLORS[entry.type] }}
+                        />
+                      </div>
+                      <div className={styles.entryMain}>
+                        <div className={styles.entryHeader}>
+                          <p className={styles.entryTitle}>{entry.title}</p>
+                          <time className={styles.entryTime} dateTime={entry.occurredAt}>
+                            {formatEventDateTime(entry.occurredAt)}
+                          </time>
+                        </div>
+                        <div className={styles.entryMeta}>
+                          <span className={styles.actorName}>{entry.actorName}</span>
+                          <span className={styles.actorRole}>
+                            {ACTIVITY_ACTOR_ROLE_LABELS[entry.actorRole]}
+                          </span>
+                        </div>
+                        {entry.description ? (
+                          <p className={styles.entryDescription}>{entry.description}</p>
+                        ) : null}
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/AdminWebUi/src/components/ActivityLog/index.ts b/apps/AdminWebUi/src/components/ActivityLog/index.ts
new file mode 100644
index 000000000..bf5f12d23
--- /dev/null
+++ b/apps/AdminWebUi/src/components/ActivityLog/index.ts
@@ -0,0 +1 @@
+export { ActivityLog } from "./ActivityLog";
diff --git a/apps/AdminWebUi/src/components/BookingRequestCard/BookingRequestCard.module.css b/apps/AdminWebUi/src/components/BookingRequestCard/BookingRequestCard.module.css
new file mode 100644
index 000000000..535fe375e
--- /dev/null
+++ b/apps/AdminWebUi/src/components/BookingRequestCard/BookingRequestCard.module.css
@@ -0,0 +1,152 @@
+.card {
+  background-color: #1a1c1e;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: var(--radius-lg);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    transform 0.15s ease;
+}
+
+.card:hover {
+  border-color: rgba(74, 222, 158, 0.28);
+  transform: translateY(-1px);
+}
+
+.cardPending {
+  border-color: rgba(255, 166, 87, 0.2);
+}
+
+.cardHeader {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+  background-color: rgba(74, 222, 158, 0.1);
+  border-radius: var(--radius-md);
+  color: var(--accent-primary);
+}
+
+.icon svg {
+  width: 22px;
+  height: 22px;
+}
+
+.headerContent {
+  flex: 1;
+  min-width: 0;
+}
+
+.titleRow {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.vehicleTitle {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.3;
+}
+
+.plateBadge {
+  flex-shrink: 0;
+  padding: 3px 8px;
+  background-color: #1a4038;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent-primary);
+}
+
+.clientName {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.reason {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-primary);
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.metaGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.metaItem {
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  background-color: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.metaLabel {
+  display: block;
+  margin-bottom: 2px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+}
+
+.metaValue {
+  font-size: 12px;
+  color: var(--text-primary);
+  line-height: 1.35;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-top: 4px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.createdAt {
+  font-size: 11px;
+  color: var(--text-tertiary);
+}
+
+.footerMeta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.attachments {
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+@media (max-width: 700px) {
+  .metaGrid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/apps/AdminWebUi/src/components/BookingRequestCard/BookingRequestCard.tsx b/apps/AdminWebUi/src/components/BookingRequestCard/BookingRequestCard.tsx
new file mode 100644
index 000000000..05490f94f
--- /dev/null
+++ b/apps/AdminWebUi/src/components/BookingRequestCard/BookingRequestCard.tsx
@@ -0,0 +1,74 @@
+import type { BookingRequest } from "../../types/bookingRequest";
+import {
+  formatPreferredSlot,
+  PARTS_OPTION_LABELS,
+  VISIT_REASON_LABELS,
+} from "../../utils/bookingLabels";
+import { formatEventDateTime, formatStoVehicleTitle } from "../../utils/stoVehicleLabels";
+import { BookingStatusBadge } from "../BookingStatusBadge";
+import styles from "./BookingRequestCard.module.css";
+
+interface BookingRequestCardProps {
+  request: BookingRequest;
+  onOpen: (request: BookingRequest) => void;
+}
+
+export function BookingRequestCard({ request, onOpen }: BookingRequestCardProps) {
+  const title = formatStoVehicleTitle(request.brand, request.model, request.year);
+  const preferredSlot = formatPreferredSlot(request.preferredDate, request.preferredTimeSlot);
+
+  return (
+    <article
+      className={[
+        styles.card,
+        request.status === "pending" ? styles.cardPending : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      onClick={() => onOpen(request)}
+    >
+      <div className={styles.cardHeader}>
+        <div className={styles.icon} aria-hidden="true">
+          <svg viewBox="0 0 24 24">
+            <path
+              d="M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14v11zM7 11h2v2H7v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div className={styles.headerContent}>
+          <div className={styles.titleRow}>
+            <h3 className={styles.vehicleTitle}>{title}</h3>
+            <span className={styles.plateBadge}>{request.licensePlate}</span>
+          </div>
+          <p className={styles.clientName}>{request.clientName}</p>
+        </div>
+      </div>
+
+      <p className={styles.reason}>
+        {VISIT_REASON_LABELS[request.visitReason]} — {request.problemDescription}
+      </p>
+
+      <div className={styles.metaGrid}>
+        <div className={styles.metaItem}>
+          <span className={styles.metaLabel}>Зручно водію</span>
+          <span className={styles.metaValue}>{preferredSlot}</span>
+        </div>
+        <div className={styles.metaItem}>
+          <span className={styles.metaLabel}>Запчастини</span>
+          <span className={styles.metaValue}>{PARTS_OPTION_LABELS[request.partsOption]}</span>
+        </div>
+      </div>
+
+      <div className={styles.footer}>
+        <BookingStatusBadge status={request.status} />
+        <div className={styles.footerMeta}>
+          {request.attachmentsCount ? (
+            <span className={styles.attachments}>📎 {request.attachmentsCount}</span>
+          ) : null}
+          <span className={styles.createdAt}>{formatEventDateTime(request.createdAt)}</span>
+        </div>
+      </div>
+    </article>
+  );
+}
diff --git a/apps/AdminWebUi/src/components/BookingRequestCard/index.ts b/apps/AdminWebUi/src/components/BookingRequestCard/index.ts
new file mode 100644
index 000000000..ced5ac6ff
--- /dev/null
+++ b/apps/AdminWebUi/src/components/BookingRequestCard/index.ts
@@ -0,0 +1 @@
+export { BookingRequestCard } from "./BookingRequestCard";
diff --git a/apps/AdminWebUi/src/components/BookingRequestDetailModal/BookingRequestDetailModal.module.css b/apps/AdminWebUi/src/components/BookingRequestDetailModal/BookingRequestDetailModal.module.css
new file mode 100644
index 000000000..6f54eabec
--- /dev/null
+++ b/apps/AdminWebUi/src/components/BookingRequestDetailModal/BookingRequestDetailModal.module.css
@@ -0,0 +1,358 @@
+.modalContent {
+  display: flex;
+  flex-direction: column;
+  min-height: 480px;
+}
+
+.topBar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 24px 24px 20px;
+  border-bottom: 1px solid var(--border-secondary);
+  background: linear-gradient(
+    180deg,
+    rgba(74, 222, 158, 0.06) 0%,
+    transparent 100%
+  );
+}
+
+.topBarMain {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.topBarIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  flex-shrink: 0;
+  border-radius: var(--radius-md);
+  background-color: rgba(74, 222, 158, 0.12);
+  color: var(--accent-primary);
+}
+
+.topBarIcon svg {
+  width: 26px;
+  height: 26px;
+}
+
+.topBarTitle {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.topBarMeta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.plateBadge {
+  padding: 4px 10px;
+  background-color: #1a4038;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--accent-primary);
+}
+
+.sourcePill {
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #58a6ff;
+  background-color: rgba(88, 166, 255, 0.14);
+  border: 1px solid rgba(88, 166, 255, 0.28);
+}
+
+.closeButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm);
+  background-color: var(--bg-tertiary);
+  color: var(--text-secondary);
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.closeButton:hover {
+  color: var(--text-primary);
+  background-color: var(--bg-quaternary);
+}
+
+.summaryGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-secondary);
+}
+
+.summaryCard {
+  padding: 16px;
+  border-radius: var(--radius-md);
+  background-color: #1a1c1e;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.summaryLabel {
+  margin: 0 0 12px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  color: var(--accent-primary);
+}
+
+.summaryList {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 0;
+}
+
+.summaryRow {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  gap: 12px;
+}
+
+.summaryRow dt {
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.summaryRow dd {
+  margin: 0;
+  font-size: 14px;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+.problemSection {
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-secondary);
+}
+
+.sectionTitle {
+  margin: 0 0 12px;
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-secondary);
+}
+
+.problemCard {
+  padding: 14px 16px;
+  border-radius: var(--radius-md);
+  background-color: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.reasonBadge {
+  display: inline-block;
+  margin-bottom: 8px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent-primary);
+  background-color: rgba(74, 222, 158, 0.12);
+  border: 1px solid rgba(74, 222, 158, 0.24);
+}
+
+.problemText {
+  margin: 0;
+  font-size: 14px;
+  color: var(--text-primary);
+  line-height: 1.5;
+}
+
+.schedulingSection {
+  padding: 20px 24px 24px;
+}
+
+.schedulingGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.preferenceCard,
+.confirmCard {
+  padding: 16px;
+  border-radius: var(--radius-md);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.preferenceCard {
+  background-color: rgba(88, 166, 255, 0.06);
+  border-color: rgba(88, 166, 255, 0.18);
+}
+
+.confirmCard {
+  background-color: rgba(74, 222, 158, 0.05);
+  border-color: rgba(74, 222, 158, 0.18);
+}
+
+.cardTitle {
+  margin: 0 0 10px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
+.preferenceCard .cardTitle {
+  color: #58a6ff;
+}
+
+.confirmCard .cardTitle {
+  color: var(--accent-primary);
+}
+
+.preferenceValue {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+.preferenceHint {
+  margin: 6px 0 0;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.datetimeInput {
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-primary);
+  background-color: var(--bg-tertiary);
+  color: var(--text-primary);
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.datetimeInput:focus {
+  outline: none;
+  border-color: var(--border-focus);
+}
+
+.fieldError {
+  margin: 6px 0 0;
+  font-size: 12px;
+  color: var(--accent-error);
+}
+
+.noteTextarea {
+  width: 100%;
+  margin-top: 12px;
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-primary);
+  background-color: var(--bg-tertiary);
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: inherit;
+  resize: vertical;
+}
+
+.noteTextarea:focus {
+  outline: none;
+  border-color: var(--border-focus);
+}
+
+.attachmentsNote {
+  margin: 0 0 16px;
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  color: var(--text-secondary);
+  background-color: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding-top: 4px;
+}
+
+.rejectForm {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex-basis: 100%;
+  padding: 12px;
+  border-radius: var(--radius-sm);
+  background-color: rgba(248, 81, 73, 0.06);
+  border: 1px solid rgba(248, 81, 73, 0.18);
+}
+
+.rejectHint {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.resolvedBanner {
+  padding: 14px 16px;
+  border-radius: var(--radius-md);
+  background-color: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.resolvedTitle {
+  margin: 0 0 6px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.resolvedText {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.45;
+}
+
+.successMessage {
+  margin: 0;
+  flex-basis: 100%;
+  font-size: 13px;
+  color: var(--accent-primary);
+}
+
+@media (max-width: 700px) {
+  .summaryGrid,
+  .schedulingGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .summaryRow {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+}
diff --git a/apps/AdminWebUi/src/components/BookingRequestDetailModal/BookingRequestDetailModal.tsx b/apps/AdminWebUi/src/components/BookingRequestDetailModal/BookingRequestDetailModal.tsx
new file mode 100644
index 000000000..e8ad5ab46
--- /dev/null
+++ b/apps/AdminWebUi/src/components/BookingRequestDetailModal/BookingRequestDetailModal.tsx
@@ -0,0 +1,293 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { Button } from "../Button";
+import { Modal } from "../Modal";
+import { BookingStatusBadge } from "../BookingStatusBadge";
+import type { BookingRequest } from "../../types/bookingRequest";
+import {
+  formatBookingDateTime,
+  formatPreferredSlot,
+  fromDatetimeLocalValue,
+  PARTS_OPTION_LABELS,
+  suggestedAppointmentIso,
+  toDatetimeLocalValue,
+  VISIT_REASON_LABELS,
+} from "../../utils/bookingLabels";
+import { formatEventDateTime, formatStoVehicleTitle } from "../../utils/stoVehicleLabels";
+import styles from "./BookingRequestDetailModal.module.css";
+
+interface BookingRequestDetailModalProps {
+  request: BookingRequest | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: (requestId: string, appointmentAt: string, managerNote?: string) => void;
+  onReject: (requestId: string, reason: string) => void;
+}
+
+export function BookingRequestDetailModal({
+  request,
+  isOpen,
+  onClose,
+  onConfirm,
+  onReject,
+}: BookingRequestDetailModalProps) {
+  const [appointmentLocal, setAppointmentLocal] = useState("");
+  const [managerNote, setManagerNote] = useState("");
+  const [appointmentError, setAppointmentError] = useState<string | null>(null);
+  const [showRejectForm, setShowRejectForm] = useState(false);
+  const [rejectReason, setRejectReason] = useState("");
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!request) return;
+    const suggested = suggestedAppointmentIso(request.preferredDate, request.preferredTimeSlot);
+    setAppointmentLocal(toDatetimeLocalValue(suggested));
+    setManagerNote("");
+    setAppointmentError(null);
+    setShowRejectForm(false);
+    setRejectReason("");
+    setSuccessMessage(null);
+  }, [request?.id]);
+
+  if (!request) return null;
+
+  const vehicleTitle = formatStoVehicleTitle(request.brand, request.model, request.year);
+  const preferredSlot = formatPreferredSlot(request.preferredDate, request.preferredTimeSlot);
+  const isPending = request.status === "pending";
+
+  const handleConfirm = () => {
+    if (!appointmentLocal) {
+      setAppointmentError("Вкажіть дату та час запису на СТО");
+      return;
+    }
+
+    setAppointmentError(null);
+    onConfirm(request.id, fromDatetimeLocalValue(appointmentLocal), managerNote);
+    setSuccessMessage("Запис підтверджено. Авто додано до черги зі статусом «Записано».");
+    setShowRejectForm(false);
+  };
+
+  const handleReject = () => {
+    if (!rejectReason.trim()) return;
+    onReject(request.id, rejectReason.trim());
+    setShowRejectForm(false);
+  };
+
+  return (
+    <Modal isOpen={isOpen} title="" onClose={onClose} size="large" hideHeader>
+      <div className={styles.modalContent}>
+        <header className={styles.topBar}>
+          <div className={styles.topBarMain}>
+            <div className={styles.topBarIcon} aria-hidden="true">
+              <svg viewBox="0 0 24 24">
+                <path
+                  d="M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14v11z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            <div>
+              <h2 className={styles.topBarTitle}>Онлайн-запис</h2>
+              <div className={styles.topBarMeta}>
+                <span className={styles.plateBadge}>{request.licensePlate}</span>
+                <BookingStatusBadge status={request.status} />
+                <span className={styles.sourcePill}>Додаток водія</span>
+              </div>
+            </div>
+          </div>
+          <button
+            type="button"
+            className={styles.closeButton}
+            onClick={onClose}
+            aria-label="Закрити"
+          >
+            ×
+          </button>
+        </header>
+
+        <div className={styles.summaryGrid}>
+          <section className={styles.summaryCard}>
+            <h3 className={styles.summaryLabel}>Автомобіль</h3>
+            <dl className={styles.summaryList}>
+              <div className={styles.summaryRow}>
+                <dt>Марка / модель</dt>
+                <dd>{vehicleTitle}</dd>
+              </div>
+              <div className={styles.summaryRow}>
+                <dt>Номер</dt>
+                <dd>{request.licensePlate}</dd>
+              </div>
+              {request.vin ? (
+                <div className={styles.summaryRow}>
+                  <dt>VIN</dt>
+                  <dd>{request.vin}</dd>
+                </div>
+              ) : null}
+              <div className={styles.summaryRow}>
+                <dt>Запчастини</dt>
+                <dd>{PARTS_OPTION_LABELS[request.partsOption]}</dd>
+              </div>
+            </dl>
+          </section>
+
+          <section className={styles.summaryCard}>
+            <h3 className={styles.summaryLabel}>Водій</h3>
+            <dl className={styles.summaryList}>
+              <div className={styles.summaryRow}>
+                <dt>Ім'я</dt>
+                <dd>{request.clientName}</dd>
+              </div>
+              <div className={styles.summaryRow}>
+                <dt>Телефон</dt>
+                <dd>{request.clientPhone ?? "—"}</dd>
+              </div>
+              <div className={styles.summaryRow}>
+                <dt>Надіслано</dt>
+                <dd>{formatEventDateTime(request.createdAt)}</dd>
+              </div>
+              {request.attachmentsCount ? (
+                <div className={styles.summaryRow}>
+                  <dt>Медіа</dt>
+                  <dd>{request.attachmentsCount} фото/відео від водія</dd>
+                </div>
+              ) : null}
+            </dl>
+          </section>
+        </div>
+
+        <section className={styles.problemSection}>
+          <h3 className={styles.sectionTitle}>Опис проблеми</h3>
+          <div className={styles.problemCard}>
+            <span className={styles.reasonBadge}>
+              {VISIT_REASON_LABELS[request.visitReason]}
+            </span>
+            <p className={styles.problemText}>{request.problemDescription}</p>
+          </div>
+        </section>
+
+        <section className={styles.schedulingSection}>
+          <h3 className={styles.sectionTitle}>Планування візиту</h3>
+
+          {request.attachmentsCount ? (
+            <p className={styles.attachmentsNote}>
+              Водій додав {request.attachmentsCount} медіафайл(ів) до запиту. Перегляд вкладень
+              буде доступний після підключення API.
+            </p>
+          ) : null}
+
+          <div className={styles.schedulingGrid}>
+            <div className={styles.preferenceCard}>
+              <h4 className={styles.cardTitle}>Зручний час для водія</h4>
+              <p className={styles.preferenceValue}>{preferredSlot}</p>
+              <p className={styles.preferenceHint}>
+                Врахуйте побажання клієнта при підтвердженні запису
+              </p>
+            </div>
+
+            <div className={styles.confirmCard}>
+              <h4 className={styles.cardTitle}>Реальний час на СТО</h4>
+              {isPending ? (
+                <>
+                  <input
+                    type="datetime-local"
+                    className={styles.datetimeInput}
+                    value={appointmentLocal}
+                    onChange={(event) => {
+                      setAppointmentLocal(event.target.value);
+                      setAppointmentError(null);
+                    }}
+                  />
+                  {appointmentError ? (
+                    <p className={styles.fieldError}>{appointmentError}</p>
+                  ) : null}
+                  <textarea
+                    className={styles.noteTextarea}
+                    placeholder="Коментар менеджера (необов'язково), напр.: підтвердив по телефону"
+                    value={managerNote}
+                    onChange={(event) => setManagerNote(event.target.value)}
+                    rows={2}
+                  />
+                </>
+              ) : request.managerAppointmentAt ? (
+                <p className={styles.preferenceValue}>
+                  {formatBookingDateTime(request.managerAppointmentAt)}
+                </p>
+              ) : (
+                <p className={styles.preferenceHint}>Час запису не вказано</p>
+              )}
+            </div>
+          </div>
+
+          {isPending ? (
+            <div className={styles.actions}>
+              <Button onClick={handleConfirm}>Підтвердити та додати в чергу</Button>
+              {!showRejectForm ? (
+                <Button variant="secondary" onClick={() => setShowRejectForm(true)}>
+                  Відхилити запит
+                </Button>
+              ) : (
+                <div className={styles.rejectForm}>
+                  <p className={styles.rejectHint}>
+                    Вкажіть причину відхилення — водій побачить її в додатку
+                  </p>
+                  <textarea
+                    className={styles.noteTextarea}
+                    placeholder="Причина відхилення"
+                    value={rejectReason}
+                    onChange={(event) => setRejectReason(event.target.value)}
+                    rows={2}
+                  />
+                  <div className={styles.actions}>
+                    <Button
+                      variant="secondary"
+                      onClick={handleReject}
+                      disabled={!rejectReason.trim()}
+                    >
+                      Підтвердити відхилення
+                    </Button>
+                    <Button variant="ghost" onClick={() => setShowRejectForm(false)}>
+                      Скасувати
+                    </Button>
+                  </div>
+                </div>
+              )}
+              {successMessage ? (
+                <p className={styles.successMessage}>
+                  {successMessage}{" "}
+                  <Link to="/sto/queue">Перейти до черги СТО →</Link>
+                </p>
+              ) : null}
+            </div>
+          ) : (
+            <div className={styles.resolvedBanner}>
+              {request.status === "confirmed" ? (
+                <>
+                  <p className={styles.resolvedTitle}>Запис підтверджено</p>
+                  <p className={styles.resolvedText}>
+                    {request.managerAppointmentAt
+                      ? `Прийом заплановано на ${formatBookingDateTime(request.managerAppointmentAt)}.`
+                      : "Авто додано до черги СТО."}
+                    {request.managerNote ? ` ${request.managerNote}` : ""}
+                    {request.queueVehicleId ? (
+                      <>
+                        {" "}
+                        <Link to="/sto/queue">Відкрити чергу СТО →</Link>
+                      </>
+                    ) : null}
+                  </p>
+                </>
+              ) : (
+                <>
+                  <p className={styles.resolvedTitle}>Запит відхилено</p>
+                  <p className={styles.resolvedText}>
+                    {request.rejectionReason ?? "Причину не вказано."}
+                  </p>
+                </>
+              )}
+            </div>
+          )}
+        </section>
+      </div>
+    </Modal>
+  );
+}
diff --git a/apps/AdminWebUi/src/components/BookingRequestDetailModal/index.ts b/apps/AdminWebUi/src/components/BookingRequestDetailModal/index.ts
new file mode 100644
index 000000000..135849a2a
--- /dev/null
+++ b/apps/AdminWebUi/src/components/BookingRequestDetailModal/index.ts
@@ -0,0 +1 @@
+export { BookingRequestDetailModal } from "./BookingRequestDetailModal";
diff --git a/apps/AdminWebUi/src/components/BookingStatusBadge/BookingStatusBadge.module.css b/apps/AdminWebUi/src/components/BookingStatusBadge/BookingStatusBadge.module.css
new file mode 100644
index 000000000..b1f4230e0
--- /dev/null
+++ b/apps/AdminWebUi/src/components/BookingStatusBadge/BookingStatusBadge.module.css
@@ -0,0 +1,18 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
diff --git a/apps/AdminWebUi/src/components/BookingStatusBadge/BookingStatusBadge.tsx b/apps/AdminWebUi/src/components/BookingStatusBadge/BookingStatusBadge.tsx
new file mode 100644
index 000000000..1d6511a1d
--- /dev/null
+++ b/apps/AdminWebUi/src/components/BookingStatusBadge/BookingStatusBadge.tsx
@@ -0,0 +1,49 @@
+import type { BookingRequestStatus } from "../../types/bookingRequest";
+import { BOOKING_STATUS_LABELS } from "../../utils/bookingLabels";
+import styles from "./BookingStatusBadge.module.css";
+
+const BADGE_STYLES: Record<
+  BookingRequestStatus,
+  { backgroundColor: string; borderColor: string; textColor: string; dotColor: string }
+> = {
+  pending: {
+    backgroundColor: "rgba(255, 166, 87, 0.14)",
+    borderColor: "rgba(255, 166, 87, 0.28)",
+    textColor: "#ffa657",
+    dotColor: "#ffa657",
+  },
+  confirmed: {
+    backgroundColor: "rgba(74, 222, 158, 0.15)",
+    borderColor: "rgba(74, 222, 158, 0.3)",
+    textColor: "#4ade9e",
+    dotColor: "#4ade9e",
+  },
+  rejected: {
+    backgroundColor: "rgba(248, 81, 73, 0.12)",
+    borderColor: "rgba(248, 81, 73, 0.28)",
+    textColor: "#f85149",
+    dotColor: "#f85149",
+  },
+};
+
+interface BookingStatusBadgeProps {
+  status: BookingRequestStatus;
+}
+
+export function BookingStatusBadge({ status }: BookingStatusBadgeProps) {
+  const style = BADGE_STYLES[status];
+
+  return (
+    <span
+      className={styles.badge}
+      style={{
+        backgroundColor: style.backgroundColor,
+        borderColor: style.borderColor,
+        color: style.textColor,
+      }}
+    >
+      <span className={styles.dot} style={{ backgroundColor: style.dotColor }} />
+      {BOOKING_STATUS_LABELS[status]}
+    </span>
+  );
+}
diff --git a/apps/AdminWebUi/src/components/BookingStatusBadge/index.ts b/apps/AdminWebUi/src/components/BookingStatusBadge/index.ts
new file mode 100644
index 000000000..bcbe1a02a
--- /dev/null
+++ b/apps/AdminWebUi/src/components/BookingStatusBadge/index.ts
@@ -0,0 +1 @@
+export { BookingStatusBadge } from "./BookingStatusBadge";
diff --git a/apps/AdminWebUi/src/components/DataTable/DataTable.module.css b/apps/AdminWebUi/src/components/DataTable/DataTable.module.css
index e92cca42e..c2efe6a59 100644
--- a/apps/AdminWebUi/src/components/DataTable/DataTable.module.css
+++ b/apps/AdminWebUi/src/components/DataTable/DataTable.module.css
@@ -26,6 +26,15 @@
   padding: 20px;
 }
 
+.clickableRow {
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.clickableRow:hover {
+  background-color: rgba(74, 222, 158, 0.05);
+}
+
 .actionsCell {
   display: flex;
   gap: 6px;
diff --git a/apps/AdminWebUi/src/components/DataTable/DataTable.tsx b/apps/AdminWebUi/src/components/DataTable/DataTable.tsx
index 422c17ab9..61533cdcf 100644
--- a/apps/AdminWebUi/src/components/DataTable/DataTable.tsx
+++ b/apps/AdminWebUi/src/components/DataTable/DataTable.tsx
@@ -14,6 +14,7 @@ interface DataTableProps<T> {
   getRowKey: (row: T) => string;
   emptyMessage: string;
   minWidth?: number | string;
+  onRowClick?: (row: T) => void;
 }
 
 export function DataTable<T>({
@@ -22,6 +23,7 @@ export function DataTable<T>({
   getRowKey,
   emptyMessage,
   minWidth,
+  onRowClick,
 }: DataTableProps<T>) {
   const tableStyle = minWidth ? { minWidth } : undefined;
 
@@ -40,7 +42,11 @@ export function DataTable<T>({
         <tbody>
           {data.length > 0 ? (
             data.map((row) => (
-              <tr key={getRowKey(row)}>
+              <tr
+                key={getRowKey(row)}
+                className={onRowClick ? styles.clickableRow : undefined}
+                onClick={onRowClick ? () => onRowClick(row) : undefined}
+              >
                 {columns.map((column) => (
                   <td key={column.key} className={column.className}>
                     {column.render(row)}
diff --git a/apps/AdminWebUi/src/components/StoVehicleActivityLog/StoVehicleActivityLog.tsx b/apps/AdminWebUi/src/components/StoVehicleActivityLog/StoVehicleActivityLog.tsx
new file mode 100644
index 000000000..4966c1c72
--- /dev/null
+++ b/apps/AdminWebUi/src/components/StoVehicleActivityLog/StoVehicleActivityLog.tsx
@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+import { ActivityLog } from "../ActivityLog";
+import type { StoQueueVehicle } from "../../types/stoVehicle";
+import { buildVehicleActivityLog } from "../../utils/stoVehicleActivityLog";
+
+interface StoVehicleActivityLogProps {
+  vehicle: StoQueueVehicle;
+}
+
+export function StoVehicleActivityLog({ vehicle }: StoVehicleActivityLogProps) {
+  const entries = useMemo(() => buildVehicleActivityLog(vehicle), [vehicle]);
+
+  return (
+    <ActivityLog
+      entries={entries}
+      hint="Повний життєвий цикл: статуси, погодження, призначення механіка"
+    />
+  );
+}
diff --git a/apps/AdminWebUi/src/components/StoVehicleActivityLog/index.ts b/apps/AdminWebUi/src/components/StoVehicleActivityLog/index.ts
new file mode 100644
index 000000000..74ffad021
--- /dev/null
+++ b/apps/AdminWebUi/src/components/StoVehicleActivityLog/index.ts
@@ -0,0 +1 @@
+export { StoVehicleActivityLog } from "./StoVehicleActivityLog";
diff --git a/apps/AdminWebUi/src/components/StoVehicleDetailModal/StoVehicleDetailModal.module.css b/apps/AdminWebUi/src/components/StoVehicleDetailModal/StoVehicleDetailModal.module.css
index 25b3e8f17..9da852ae6 100644
--- a/apps/AdminWebUi/src/components/StoVehicleDetailModal/StoVehicleDetailModal.module.css
+++ b/apps/AdminWebUi/src/components/StoVehicleDetailModal/StoVehicleDetailModal.module.css
@@ -272,7 +272,7 @@
 
 .stepPanel {
   display: flex;
-  margin: 20px 24px 24px;
+  margin: 20px 24px 0;
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: var(--radius-lg);
   overflow: hidden;
diff --git a/apps/AdminWebUi/src/components/StoVehicleDetailModal/StoVehicleDetailModal.tsx b/apps/AdminWebUi/src/components/StoVehicleDetailModal/StoVehicleDetailModal.tsx
index c1e6bb046..9cf2d52d4 100644
--- a/apps/AdminWebUi/src/components/StoVehicleDetailModal/StoVehicleDetailModal.tsx
+++ b/apps/AdminWebUi/src/components/StoVehicleDetailModal/StoVehicleDetailModal.tsx
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ApprovalRequestCard } from "../ApprovalRequestCard";
 import { Button } from "../Button";
 import { Modal } from "../Modal";
+import { StoVehicleActivityLog } from "../StoVehicleActivityLog";
 import { StoVehicleStatusBadge } from "../StoVehicleStatusBadge";
 import type {
   StoQueueVehicle,
@@ -539,6 +540,8 @@ export function StoVehicleDetailModal({
             ) : null}
           </div>
         </section>
+
+        <StoVehicleActivityLog vehicle={vehicle} />
       </div>
     </Modal>
   );
diff --git a/apps/AdminWebUi/src/components/VisitDetailModal/VisitDetailModal.module.css b/apps/AdminWebUi/src/components/VisitDetailModal/VisitDetailModal.module.css
new file mode 100644
index 000000000..170304772
--- /dev/null
+++ b/apps/AdminWebUi/src/components/VisitDetailModal/VisitDetailModal.module.css
@@ -0,0 +1,248 @@
+.modalContent {
+  display: flex;
+  flex-direction: column;
+  min-height: 420px;
+}
+
+.topBar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 24px 24px 20px;
+  border-bottom: 1px solid var(--border-secondary);
+  background: linear-gradient(
+    180deg,
+    rgba(74, 222, 158, 0.06) 0%,
+    transparent 100%
+  );
+}
+
+.topBarMain {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.topBarIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  flex-shrink: 0;
+  border-radius: var(--radius-md);
+  background-color: rgba(74, 222, 158, 0.12);
+  color: var(--accent-primary);
+}
+
+.topBarIcon svg {
+  width: 26px;
+  height: 26px;
+}
+
+.topBarTitle {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.topBarMeta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.plateBadge {
+  padding: 4px 10px;
+  background-color: #1a4038;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--accent-primary);
+}
+
+.closeButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm);
+  background-color: var(--bg-tertiary);
+  color: var(--text-secondary);
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.closeButton:hover {
+  color: var(--text-primary);
+  background-color: var(--bg-quaternary);
+}
+
+.summaryGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-secondary);
+}
+
+.summaryCard {
+  padding: 16px;
+  border-radius: var(--radius-md);
+  background-color: #1a1c1e;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.summaryLabel {
+  margin: 0 0 12px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  color: var(--accent-primary);
+}
+
+.summaryList {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 0;
+}
+
+.summaryRow {
+  display: grid;
+  grid-template-columns: 110px 1fr;
+  gap: 12px;
+}
+
+.summaryRow dt {
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.summaryRow dd {
+  margin: 0;
+  font-size: 14px;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+.recordsSection {
+  padding: 20px 24px 0;
+}
+
+.sectionTitle {
+  margin: 0 0 14px;
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-secondary);
+}
+
+.recordsPanel {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background-color: color-mix(in srgb, var(--accent-primary) 4%, #1a1c1e);
+}
+
+.recordsPanelAccent {
+  height: 4px;
+  background-color: var(--accent-primary);
+}
+
+.recordsList {
+  display: flex;
+  flex-direction: column;
+}
+
+.recordRow {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 18px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.recordRow:last-child {
+  border-bottom: none;
+}
+
+.recordTitle {
+  margin: 0 0 4px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.recordDescription {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.45;
+}
+
+.recordPrice {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--accent-primary);
+  white-space: nowrap;
+}
+
+.totalRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 18px;
+  background-color: rgba(74, 222, 158, 0.06);
+  border-top: 1px solid rgba(74, 222, 158, 0.16);
+}
+
+.totalLabel {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.totalValue {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--accent-primary);
+}
+
+.emptyRecords {
+  padding: 24px 18px;
+  font-size: 13px;
+  color: var(--text-tertiary);
+  text-align: center;
+}
+
+@media (max-width: 700px) {
+  .summaryGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .summaryRow {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+
+  .recordRow {
+    flex-direction: column;
+    gap: 8px;
+  }
+}
diff --git a/apps/AdminWebUi/src/components/VisitDetailModal/VisitDetailModal.tsx b/apps/AdminWebUi/src/components/VisitDetailModal/VisitDetailModal.tsx
new file mode 100644
index 000000000..34d582da9
--- /dev/null
+++ b/apps/AdminWebUi/src/components/VisitDetailModal/VisitDetailModal.tsx
@@ -0,0 +1,161 @@
+import { useMemo } from "react";
+import { Modal } from "../Modal";
+import { ActivityLog } from "../ActivityLog";
+import { VisitStatusBadge } from "../VisitStatusBadge";
+import type { VisitListItem } from "../../types/visit";
+import { buildVisitActivityLog } from "../../utils/visitActivityLog";
+import {
+  calcVisitTotal,
+  formatVisitDateTime,
+  formatVisitPrice,
+  formatVisitTitle,
+} from "../../utils/visitLabels";
+import styles from "./VisitDetailModal.module.css";
+
+interface VisitDetailModalProps {
+  visit: VisitListItem | null;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function VisitDetailModal({ visit, isOpen, onClose }: VisitDetailModalProps) {
+  const activityEntries = useMemo(
+    () => (visit ? buildVisitActivityLog(visit) : []),
+    [visit],
+  );
+
+  if (!visit) return null;
+
+  const vehicleTitle = formatVisitTitle(visit.brand, visit.model, visit.year);
+  const total = calcVisitTotal(visit.records);
+
+  return (
+    <Modal isOpen={isOpen} title="" onClose={onClose} size="large" hideHeader>
+      <div className={styles.modalContent}>
+        <header className={styles.topBar}>
+          <div className={styles.topBarMain}>
+            <div className={styles.topBarIcon} aria-hidden="true">
+              <svg viewBox="0 0 24 24">
+                <path
+                  d="M14 6h4v4h-4V6zm-8 4h4v8H6v-8zm8 0h4v8h-4v-8zM4 4h6v2H4V4zm10 0h6v2h-6V4z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            <div>
+              <h2 className={styles.topBarTitle}>{visit.title}</h2>
+              <div className={styles.topBarMeta}>
+                <span className={styles.plateBadge}>{visit.licensePlate}</span>
+                <VisitStatusBadge status={visit.status} />
+              </div>
+            </div>
+          </div>
+          <button
+            type="button"
+            className={styles.closeButton}
+            onClick={onClose}
+            aria-label="Закрити"
+          >
+            ×
+          </button>
+        </header>
+
+        <div className={styles.summaryGrid}>
+          <section className={styles.summaryCard}>
+            <h3 className={styles.summaryLabel}>Візит</h3>
+            <dl className={styles.summaryList}>
+              <div className={styles.summaryRow}>
+                <dt>СТО</dt>
+                <dd>{visit.stoName}</dd>
+              </div>
+              <div className={styles.summaryRow}>
+                <dt>Механік</dt>
+                <dd>{visit.mechanicName ?? "Не призначено"}</dd>
+              </div>
+              <div className={styles.summaryRow}>
+                <dt>Початок</dt>
+                <dd>{formatVisitDateTime(visit.createdAt)}</dd>
+              </div>
+              {visit.completedAt ? (
+                <div className={styles.summaryRow}>
+                  <dt>Завершено</dt>
+                  <dd>{formatVisitDateTime(visit.completedAt)}</dd>
+                </div>
+              ) : visit.updatedAt ? (
+                <div className={styles.summaryRow}>
+                  <dt>Оновлено</dt>
+                  <dd>{formatVisitDateTime(visit.updatedAt)}</dd>
+                </div>
+              ) : null}
+              {visit.description ? (
+                <div className={styles.summaryRow}>
+                  <dt>Опис</dt>
+                  <dd>{visit.description}</dd>
+                </div>
+              ) : null}
+            </dl>
+          </section>
+
+          <section className={styles.summaryCard}>
+            <h3 className={styles.summaryLabel}>Авто та клієнт</h3>
+            <dl className={styles.summaryList}>
+              <div className={styles.summaryRow}>
+                <dt>Автомобіль</dt>
+                <dd>{vehicleTitle}</dd>
+              </div>
+              <div className={styles.summaryRow}>
+                <dt>Номер</dt>
+                <dd>{visit.licensePlate}</dd>
+              </div>
+              <div className={styles.summaryRow}>
+                <dt>Клієнт</dt>
+                <dd>{visit.clientName}</dd>
+              </div>
+              <div className={styles.summaryRow}>
+                <dt>Телефон</dt>
+                <dd>{visit.clientPhone ?? "—"}</dd>
+              </div>
+            </dl>
+          </section>
+        </div>
+
+        <section className={styles.recordsSection}>
+          <h3 className={styles.sectionTitle}>
+            Роботи та деталі ({visit.records.length})
+          </h3>
+          <div className={styles.recordsPanel}>
+            <div className={styles.recordsPanelAccent} />
+            {visit.records.length > 0 ? (
+              <>
+                <div className={styles.recordsList}>
+                  {visit.records.map((record) => (
+                    <div key={record.id} className={styles.recordRow}>
+                      <div>
+                        <p className={styles.recordTitle}>{record.title}</p>
+                        {record.description ? (
+                          <p className={styles.recordDescription}>{record.description}</p>
+                        ) : null}
+                      </div>
+                      <p className={styles.recordPrice}>{formatVisitPrice(record.price)}</p>
+                    </div>
+                  ))}
+                </div>
+                <div className={styles.totalRow}>
+                  <p className={styles.totalLabel}>Загальна сума</p>
+                  <p className={styles.totalValue}>{formatVisitPrice(total)}</p>
+                </div>
+              </>
+            ) : (
+              <p className={styles.emptyRecords}>Список робіт порожній.</p>
+            )}
+          </div>
+        </section>
+
+        <ActivityLog
+          entries={activityEntries}
+          hint="Повний життєвий цикл візиту: статуси, кошторис, оплата та завершення"
+        />
+      </div>
+    </Modal>
+  );
+}
diff --git a/apps/AdminWebUi/src/components/VisitDetailModal/index.ts b/apps/AdminWebUi/src/components/VisitDetailModal/index.ts
new file mode 100644
index 000000000..08418336d
--- /dev/null
+++ b/apps/AdminWebUi/src/components/VisitDetailModal/index.ts
@@ -0,0 +1 @@
+export { VisitDetailModal } from "./VisitDetailModal";
diff --git a/apps/AdminWebUi/src/components/VisitStatusBadge/VisitStatusBadge.module.css b/apps/AdminWebUi/src/components/VisitStatusBadge/VisitStatusBadge.module.css
new file mode 100644
index 000000000..b1f4230e0
--- /dev/null
+++ b/apps/AdminWebUi/src/components/VisitStatusBadge/VisitStatusBadge.module.css
@@ -0,0 +1,18 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
diff --git a/apps/AdminWebUi/src/components/VisitStatusBadge/VisitStatusBadge.tsx b/apps/AdminWebUi/src/components/VisitStatusBadge/VisitStatusBadge.tsx
new file mode 100644
index 000000000..1d6b8093f
--- /dev/null
+++ b/apps/AdminWebUi/src/components/VisitStatusBadge/VisitStatusBadge.tsx
@@ -0,0 +1,28 @@
+import type { VisitStatus } from "../../types/visit";
+import { getVisitStatusBadgeStyle, VISIT_STATUS_LABELS } from "../../utils/visitLabels";
+import styles from "./VisitStatusBadge.module.css";
+
+interface VisitStatusBadgeProps {
+  status: VisitStatus;
+  showDot?: boolean;
+}
+
+export function VisitStatusBadge({ status, showDot = true }: VisitStatusBadgeProps) {
+  const badgeStyle = getVisitStatusBadgeStyle(status);
+
+  return (
+    <span
+      className={styles.badge}
+      style={{
+        backgroundColor: badgeStyle.backgroundColor,
+        borderColor: badgeStyle.borderColor,
+        color: badgeStyle.textColor,
+      }}
+    >
+      {showDot ? (
+        <span className={styles.dot} style={{ backgroundColor: badgeStyle.dotColor }} />
+      ) : null}
+      {VISIT_STATUS_LABELS[status]}
+    </span>
+  );
+}
diff --git a/apps/AdminWebUi/src/components/VisitStatusBadge/index.ts b/apps/AdminWebUi/src/components/VisitStatusBadge/index.ts
new file mode 100644
index 000000000..15a25ace4
--- /dev/null
+++ b/apps/AdminWebUi/src/components/VisitStatusBadge/index.ts
@@ -0,0 +1 @@
+export { VisitStatusBadge } from "./VisitStatusBadge";
diff --git a/apps/AdminWebUi/src/config/navigation.ts b/apps/AdminWebUi/src/config/navigation.ts
index 1dc1b9f00..eda650a69 100644
--- a/apps/AdminWebUi/src/config/navigation.ts
+++ b/apps/AdminWebUi/src/config/navigation.ts
@@ -27,6 +27,20 @@ export const NAV_ITEMS: NavItemConfig[] = [
     icon: "M4 6h16v2h2v10H6V8H4V6zm4 2h8v2H8V8zm0 4h8v2H8v-2zm0 4h5v2H8v-2z",
     requiredPermissions: [Permission.StoView],
   },
+  {
+    id: "booking-requests",
+    label: "Онлайн-записи",
+    path: "/sto/bookings",
+    icon: "M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14v11zM7 11h5v2H7v-2zm7 0h5v2h-5v-2z",
+    requiredPermissions: [Permission.StoView],
+  },
+  {
+    id: "visits",
+    label: "Візити",
+    path: "/visits",
+    icon: "M4 4h16v2H4V4zm0 4h10v2H4V8zm0 4h14v2H4v-2zm0 4h8v2H4v-2z",
+    requiredPermissions: [Permission.StoView],
+  },
   {
     id: "users",
     label: "Клієнти",
diff --git a/apps/AdminWebUi/src/context/BookingRequestContext.tsx b/apps/AdminWebUi/src/context/BookingRequestContext.tsx
new file mode 100644
index 000000000..f97775c2f
--- /dev/null
+++ b/apps/AdminWebUi/src/context/BookingRequestContext.tsx
@@ -0,0 +1,119 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import { MOCK_BOOKING_REQUESTS } from "../data/mockBookingRequests";
+import { useStoVehicles } from "./StoVehicleContext";
+import type { BookingRequest, BookingRequestStatus } from "../types/bookingRequest";
+import { buildProblemSummary } from "../utils/bookingLabels";
+
+interface BookingRequestContextValue {
+  requests: BookingRequest[];
+  getRequestsBySto: (stoId: string, status?: BookingRequestStatus) => BookingRequest[];
+  confirmRequest: (
+    requestId: string,
+    appointmentAt: string,
+    managerNote?: string,
+  ) => BookingRequest | null;
+  rejectRequest: (requestId: string, reason: string) => void;
+}
+
+const BookingRequestContext = createContext<BookingRequestContextValue | null>(null);
+
+export function BookingRequestProvider({ children }: { children: ReactNode }) {
+  const { addVehicle } = useStoVehicles();
+  const [requests, setRequests] = useState<BookingRequest[]>(
+    () => [...MOCK_BOOKING_REQUESTS],
+  );
+
+  const getRequestsBySto = useCallback(
+    (stoId: string, status?: BookingRequestStatus) => {
+      const filtered = requests.filter((request) => request.stoId === stoId);
+      if (!status) return filtered;
+      return filtered.filter((request) => request.status === status);
+    },
+    [requests],
+  );
+
+  const confirmRequest = useCallback(
+    (requestId: string, appointmentAt: string, managerNote?: string) => {
+      const request = requests.find((item) => item.id === requestId);
+      if (!request || request.status !== "pending") return null;
+
+      const vehicle = addVehicle({
+        stoId: request.stoId,
+        brand: request.brand,
+        model: request.model,
+        year: request.year,
+        licensePlate: request.licensePlate,
+        clientName: request.clientName,
+        clientPhone: request.clientPhone,
+        problemSummary: buildProblemSummary(request.visitReason, request.problemDescription),
+        status: "scheduled",
+        appointmentAt,
+        isManualEntry: false,
+      });
+
+      const now = new Date().toISOString();
+      const updated: BookingRequest = {
+        ...request,
+        status: "confirmed",
+        managerAppointmentAt: appointmentAt,
+        managerNote: managerNote?.trim() || undefined,
+        queueVehicleId: vehicle.id,
+        updatedAt: now,
+      };
+
+      setRequests((current) =>
+        current.map((item) => (item.id === requestId ? updated : item)),
+      );
+
+      return updated;
+    },
+    [requests, addVehicle],
+  );
+
+  const rejectRequest = useCallback((requestId: string, reason: string) => {
+    const now = new Date().toISOString();
+    setRequests((current) =>
+      current.map((request) =>
+        request.id === requestId && request.status === "pending"
+          ? {
+              ...request,
+              status: "rejected",
+              rejectionReason: reason.trim(),
+              updatedAt: now,
+            }
+          : request,
+      ),
+    );
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      requests,
+      getRequestsBySto,
+      confirmRequest,
+      rejectRequest,
+    }),
+    [requests, getRequestsBySto, confirmRequest, rejectRequest],
+  );
+
+  return (
+    <BookingRequestContext.Provider value={value}>
+      {children}
+    </BookingRequestContext.Provider>
+  );
+}
+
+export function useBookingRequests(): BookingRequestContextValue {
+  const context = useContext(BookingRequestContext);
+  if (!context) {
+    throw new Error("useBookingRequests must be used within BookingRequestProvider");
+  }
+  return context;
+}
diff --git a/apps/AdminWebUi/src/context/StoVehicleContext.tsx b/apps/AdminWebUi/src/context/StoVehicleContext.tsx
index 21e24efa2..0e2f75bc2 100644
--- a/apps/AdminWebUi/src/context/StoVehicleContext.tsx
+++ b/apps/AdminWebUi/src/context/StoVehicleContext.tsx
@@ -86,7 +86,7 @@ export function StoVehicleProvider({ children }: { children: ReactNode }) {
               ? 100
               : undefined,
       approvalRequests: [],
-      isManualEntry: true,
+      isManualEntry: payload.isManualEntry ?? true,
       createdAt: now,
       updatedAt: now,
     };
diff --git a/apps/AdminWebUi/src/data/mockBookingRequests.ts b/apps/AdminWebUi/src/data/mockBookingRequests.ts
new file mode 100644
index 000000000..b241c9b98
--- /dev/null
+++ b/apps/AdminWebUi/src/data/mockBookingRequests.ts
@@ -0,0 +1,124 @@
+import type { BookingRequest } from "../types/bookingRequest";
+
+export const MOCK_BOOKING_REQUESTS: BookingRequest[] = [
+  {
+    id: "br-001",
+    stoId: "sto-001",
+    vehicleId: "veh-m-001",
+    driverId: "drv-001",
+    brand: "Toyota",
+    model: "Camry",
+    year: 2019,
+    licensePlate: "AA 1234 BC",
+    vin: "JTDBR32E720123456",
+    clientName: "Олександр Коваленко",
+    clientPhone: "+380 67 111 2233",
+    visitReason: "suspension",
+    problemDescription: "Стукає справа попереду на нерівностях, веде вліво на швидкості.",
+    preferredDate: "2026-07-05",
+    preferredTimeSlot: "morning",
+    partsOption: "shop",
+    attachmentsCount: 2,
+    status: "pending",
+    createdAt: "2026-07-01T08:20:00.000Z",
+    updatedAt: "2026-07-01T08:20:00.000Z",
+  },
+  {
+    id: "br-002",
+    stoId: "sto-001",
+    vehicleId: "veh-m-002",
+    driverId: "drv-002",
+    brand: "Volkswagen",
+    model: "Passat",
+    year: 2017,
+    licensePlate: "KA 5678 AB",
+    vin: "WVWZZZ3CZHE123789",
+    clientName: "Марія Петренко",
+    clientPhone: "+380 50 444 5566",
+    visitReason: "maintenance",
+    problemDescription: "Планове ТО, пробіг 95 000 км. Потрібна заміна масла та фільтрів.",
+    preferredDate: "2026-07-04",
+    preferredTimeSlot: "day",
+    partsOption: "shop",
+    attachmentsCount: 0,
+    status: "pending",
+    createdAt: "2026-07-01T10:45:00.000Z",
+    updatedAt: "2026-07-01T10:45:00.000Z",
+  },
+  {
+    id: "br-003",
+    stoId: "sto-001",
+    brand: "BMW",
+    model: "X5",
+    year: 2021,
+    licensePlate: "BC 9012 DE",
+    clientName: "Ігор Сидоренко",
+    clientPhone: "+380 63 777 8899",
+    visitReason: "diagnostics",
+    problemDescription: "Горить Check Engine, інколи троїть на холостих. Потрібна комп'ютерна діагностика.",
+    preferredDate: "2026-07-06",
+    preferredTimeSlot: "evening",
+    partsOption: "own",
+    attachmentsCount: 1,
+    status: "pending",
+    createdAt: "2026-07-01T14:10:00.000Z",
+    updatedAt: "2026-07-01T14:10:00.000Z",
+  },
+  {
+    id: "br-004",
+    stoId: "sto-002",
+    brand: "Audi",
+    model: "A4",
+    year: 2020,
+    licensePlate: "BC 7788 PQ",
+    clientName: "Сергій Ткаченко",
+    clientPhone: "+380 96 555 4433",
+    visitReason: "other",
+    problemDescription: "Після ДТП не закривається багажник, потрібна оцінка кузовних робіт.",
+    preferredDate: "2026-07-07",
+    preferredTimeSlot: "morning",
+    partsOption: "shop",
+    attachmentsCount: 3,
+    status: "pending",
+    createdAt: "2026-07-01T16:30:00.000Z",
+    updatedAt: "2026-07-01T16:30:00.000Z",
+  },
+  {
+    id: "br-005",
+    stoId: "sto-001",
+    brand: "Hyundai",
+    model: "Tucson",
+    year: 2020,
+    licensePlate: "AI 3456 FG",
+    clientName: "Анна Мельник",
+    visitReason: "maintenance",
+    problemDescription: "Заміна гальмівних колодок, скрипить при гальмуванні.",
+    preferredDate: "2026-06-28",
+    preferredTimeSlot: "day",
+    partsOption: "shop",
+    status: "confirmed",
+    managerAppointmentAt: "2026-06-29T09:10:00.000Z",
+    managerNote: "Запис підтверджено телефоном",
+    queueVehicleId: "sv-004",
+    createdAt: "2026-06-27T18:00:00.000Z",
+    updatedAt: "2026-06-28T09:00:00.000Z",
+  },
+  {
+    id: "br-006",
+    stoId: "sto-001",
+    brand: "Ford",
+    model: "Focus",
+    year: 2015,
+    licensePlate: "AA 5566 NO",
+    clientName: "Катерина Лисенко",
+    visitReason: "diagnostics",
+    problemDescription: "Не працює кондиціонер, потрібна діагностика.",
+    preferredDate: "2026-06-30",
+    preferredTimeSlot: "evening",
+    partsOption: "own",
+    status: "rejected",
+    rejectionReason: "Немає вільного вікна у зазначений час. Запропоновано іншу дату — клієнт відмовився.",
+    createdAt: "2026-06-29T11:00:00.000Z",
+    updatedAt: "2026-06-29T15:20:00.000Z",
+  },
+];
diff --git a/apps/AdminWebUi/src/data/mockVisits.ts b/apps/AdminWebUi/src/data/mockVisits.ts
new file mode 100644
index 000000000..19fc70e10
--- /dev/null
+++ b/apps/AdminWebUi/src/data/mockVisits.ts
@@ -0,0 +1,209 @@
+import type { VisitListItem } from "../types/visit";
+
+export const MOCK_VISITS: VisitListItem[] = [
+  {
+    id: "visit-001",
+    stoId: "sto-001",
+    stoName: "AutoService Kyiv",
+    vehicleId: "veh-001",
+    brand: "Mercedes-Benz",
+    model: "E-Class",
+    year: 2018,
+    licensePlate: "AA 7890 HI",
+    clientName: "Віктор Бондаренко",
+    clientPhone: "+380 97 222 3344",
+    title: "Ремонт кондиціонера",
+    description: "Діагностика та заміна компресора кондиціонера, вакуумування системи.",
+    status: "in_progress",
+    mechanicName: "Петро Механік",
+    records: [
+      { id: "vr-001-1", title: "Діагностика системи кондиціонування", price: 800 },
+      { id: "vr-001-2", title: "Заміна компресора", price: 3200 },
+      { id: "vr-001-3", title: "Вакуумування та заправка фреоном", price: 1400 },
+    ],
+    createdAt: "2026-06-28T11:00:00.000Z",
+    updatedAt: "2026-06-29T07:30:00.000Z",
+  },
+  {
+    id: "visit-002",
+    stoId: "sto-001",
+    stoName: "AutoService Kyiv",
+    vehicleId: "veh-002",
+    brand: "Mazda",
+    model: "CX-5",
+    year: 2018,
+    licensePlate: "KA 4455 RS",
+    clientName: "Юрій Романюк",
+    clientPhone: "+380 68 333 4455",
+    title: "Заміна ГРМ",
+    description: "Заміна комплекту ГРМ, помпи охолодження та усунення витоку ОР.",
+    status: "in_progress",
+    mechanicName: "Андрій Сервіс",
+    records: [
+      { id: "vr-002-1", title: "Зняття/встановлення ГРМ", price: 4500 },
+      { id: "vr-002-2", title: "Заміна помпи охолодження", price: 2800 },
+      { id: "vr-002-3", title: "Промивка системи охолодження", price: 1800 },
+      { id: "vr-002-4", title: "Комплект ГРМ (деталі)", price: 7200 },
+      { id: "vr-002-5", title: "Помпа охолодження (деталь)", price: 3400 },
+    ],
+    createdAt: "2026-06-27T09:30:00.000Z",
+    updatedAt: "2026-06-29T10:20:00.000Z",
+  },
+  {
+    id: "visit-003",
+    stoId: "sto-001",
+    stoName: "AutoService Kyiv",
+    vehicleId: "veh-003",
+    brand: "BMW",
+    model: "X5",
+    year: 2021,
+    licensePlate: "BC 9012 DE",
+    clientName: "Ігор Сидоренко",
+    clientPhone: "+380 63 777 8899",
+    title: "Діагностика двигуна",
+    description: "Комп'ютерна діагностика, зчитування помилок Check Engine.",
+    status: "waiting_payment",
+    mechanicName: "Олег Діагност",
+    records: [
+      { id: "vr-003-1", title: "Комп'ютерна діагностика", price: 900 },
+      { id: "vr-003-2", title: "Заміна свічок запалення", price: 2200 },
+      { id: "vr-003-3", title: "Діагностика котушок запалювання", price: 800 },
+    ],
+    createdAt: "2026-06-26T12:00:00.000Z",
+    updatedAt: "2026-06-29T09:20:00.000Z",
+  },
+  {
+    id: "visit-004",
+    stoId: "sto-001",
+    stoName: "AutoService Kyiv",
+    vehicleId: "veh-004",
+    brand: "Ford",
+    model: "Focus",
+    year: 2015,
+    licensePlate: "AA 5566 NO",
+    clientName: "Катерина Лисенко",
+    clientPhone: "+380 93 888 9900",
+    title: "Заміна акумулятора",
+    description: "Заміна акумулятора, перевірка системи зарядки.",
+    status: "completed",
+    mechanicName: "Петро Механік",
+    records: [
+      { id: "vr-004-1", title: "Діагностика електросистеми", price: 500 },
+      { id: "vr-004-2", title: "Заміна акумулятора", price: 4200 },
+    ],
+    createdAt: "2026-06-26T16:00:00.000Z",
+    updatedAt: "2026-06-29T09:45:00.000Z",
+    completedAt: "2026-06-29T09:45:00.000Z",
+  },
+  {
+    id: "visit-005",
+    stoId: "sto-001",
+    stoName: "AutoService Kyiv",
+    vehicleId: "veh-005",
+    brand: "Renault",
+    model: "Duster",
+    year: 2019,
+    licensePlate: "AB 3344 LM",
+    clientName: "Дмитро Гриценко",
+    title: "ТО-2",
+    description: "Планове технічне обслуговування: заміна масла, фільтрів, перевірка ходової.",
+    status: "completed",
+    records: [
+      { id: "vr-005-1", title: "Заміна моторної оливи", price: 1200 },
+      { id: "vr-005-2", title: "Заміна масляного фільтра", price: 350 },
+      { id: "vr-005-3", title: "Заміна повітряного фільтра", price: 450 },
+      { id: "vr-005-4", title: "Заміна салонного фільтра", price: 380 },
+      { id: "vr-005-5", title: "Перевірка ходової частини", price: 600 },
+    ],
+    createdAt: "2026-06-23T11:00:00.000Z",
+    updatedAt: "2026-06-29T10:00:00.000Z",
+    completedAt: "2026-06-29T10:00:00.000Z",
+  },
+  {
+    id: "visit-006",
+    stoId: "sto-001",
+    stoName: "AutoService Kyiv",
+    vehicleId: "veh-006",
+    brand: "Skoda",
+    model: "Octavia",
+    year: 2016,
+    licensePlate: "KA 1122 JK",
+    clientName: "Олена Шевченко",
+    clientPhone: "+380 66 555 6677",
+    title: "Заміна зчеплення",
+    description: "Заміна комплекту зчеплення, перевірка маховика.",
+    status: "in_progress",
+    mechanicName: "Андрій Сервіс",
+    records: [
+      { id: "vr-006-1", title: "Зняття КПП", price: 3800 },
+      { id: "vr-006-2", title: "Заміна комплекту зчеплення", price: 5200 },
+      { id: "vr-006-3", title: "Комплект зчеплення (деталі)", price: 8900 },
+    ],
+    createdAt: "2026-06-24T14:00:00.000Z",
+    updatedAt: "2026-06-29T06:00:00.000Z",
+  },
+  {
+    id: "visit-007",
+    stoId: "sto-002",
+    stoName: "ProMotors Lviv",
+    vehicleId: "veh-007",
+    brand: "Audi",
+    model: "A4",
+    year: 2020,
+    licensePlate: "BC 7788 PQ",
+    clientName: "Сергій Ткаченко",
+    title: "Діагностика ходової",
+    description: "Перевірка підвіски, рульового управління та гальмівної системи.",
+    status: "in_progress",
+    mechanicName: "Михайло Львів",
+    records: [
+      { id: "vr-007-1", title: "Діагностика ходової частини", price: 700 },
+      { id: "vr-007-2", title: "Перевірка гальмівних механізмів", price: 500 },
+    ],
+    createdAt: "2026-06-28T17:00:00.000Z",
+    updatedAt: "2026-06-29T10:00:00.000Z",
+  },
+  {
+    id: "visit-008",
+    stoId: "sto-002",
+    stoName: "ProMotors Lviv",
+    vehicleId: "veh-008",
+    brand: "Toyota",
+    model: "Camry",
+    year: 2019,
+    licensePlate: "AA 1234 BC",
+    clientName: "Олександр Коваленко",
+    clientPhone: "+380 67 111 2233",
+    title: "Перевірка підвіски",
+    description: "Клієнт скасував візит після попередньої оцінки вартості.",
+    status: "cancelled",
+    records: [
+      { id: "vr-008-1", title: "Огляд підвіски", price: 600 },
+    ],
+    createdAt: "2026-06-28T10:00:00.000Z",
+    updatedAt: "2026-06-28T14:30:00.000Z",
+  },
+  {
+    id: "visit-009",
+    stoId: "sto-001",
+    stoName: "AutoService Kyiv",
+    vehicleId: "veh-009",
+    brand: "Hyundai",
+    model: "Tucson",
+    year: 2020,
+    licensePlate: "AI 3456 FG",
+    clientName: "Анна Мельник",
+    title: "Заміна гальмівних колодок",
+    description: "Заміна передніх і задніх гальмівних колодок.",
+    status: "waiting_payment",
+    mechanicName: "Петро Механік",
+    records: [
+      { id: "vr-009-1", title: "Заміна передніх колодок", price: 1600 },
+      { id: "vr-009-2", title: "Заміна задніх колодок", price: 1400 },
+      { id: "vr-009-3", title: "Передні колодки (деталі)", price: 2100 },
+      { id: "vr-009-4", title: "Задні колодки (деталі)", price: 1800 },
+    ],
+    createdAt: "2026-06-28T08:30:00.000Z",
+    updatedAt: "2026-06-29T09:10:00.000Z",
+  },
+];
diff --git a/apps/AdminWebUi/src/layout/Sidebar/Sidebar.tsx b/apps/AdminWebUi/src/layout/Sidebar/Sidebar.tsx
index 21cea89a2..2a811cdfe 100644
--- a/apps/AdminWebUi/src/layout/Sidebar/Sidebar.tsx
+++ b/apps/AdminWebUi/src/layout/Sidebar/Sidebar.tsx
@@ -26,7 +26,7 @@ export function Sidebar({ isCollapsed, onToggleCollapse }: SidebarProps) {
         <div className={styles.brandInfo}>
           <div className={styles.logoMark}>C</div>
           <div>
-            <p className={styles.brandTitle}>CaRaMob</p>
+            <p className={styles.brandTitle}>Rookit</p>
             <p className={styles.brandSubtitle}>Admin Panel</p>
           </div>
         </div>
diff --git a/apps/AdminWebUi/src/pages/BookingRequestsPage/BookingRequestsPage.module.css b/apps/AdminWebUi/src/pages/BookingRequestsPage/BookingRequestsPage.module.css
new file mode 100644
index 000000000..16030029c
--- /dev/null
+++ b/apps/AdminWebUi/src/pages/BookingRequestsPage/BookingRequestsPage.module.css
@@ -0,0 +1,175 @@
+.page {
+  width: 100%;
+  max-width: none;
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 20px;
+}
+
+.headerText {
+  flex: 1;
+  min-width: 0;
+}
+
+.title {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.subtitle {
+  font-size: 15px;
+  color: var(--text-secondary);
+  max-width: 560px;
+}
+
+.headerActions {
+  display: flex;
+  align-items: flex-end;
+  gap: 16px;
+  flex-shrink: 0;
+}
+
+.stoSelect {
+  min-width: 220px;
+}
+
+.stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.statCard {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 150px;
+  padding: 14px 16px;
+  border-radius: var(--radius-md);
+  background-color: #1a1c1e;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.statCardAttention {
+  border-color: rgba(255, 166, 87, 0.28);
+  background-color: rgba(255, 166, 87, 0.04);
+}
+
+.statLabel {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+}
+
+.statValue {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.board {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(300px, 1fr));
+  gap: 16px;
+  align-items: start;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+
+.columnHeader {
+  padding: 14px 16px;
+  border-radius: var(--radius-md);
+  background-color: #1a1c1e;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.columnTitleRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.columnTitle {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.columnCount {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 24px;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-secondary);
+  background-color: rgba(255, 255, 255, 0.06);
+}
+
+.columnDescription {
+  margin: 6px 0 0;
+  font-size: 12px;
+  color: var(--text-tertiary);
+  line-height: 1.4;
+}
+
+.columnCards {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.emptyColumn {
+  padding: 24px 16px;
+  border-radius: var(--radius-md);
+  border: 1px dashed rgba(255, 255, 255, 0.1);
+  text-align: center;
+  font-size: 13px;
+  color: var(--text-tertiary);
+}
+
+.hint {
+  margin: 0 0 16px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+@media (max-width: 1100px) {
+  .board {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 700px) {
+  .header {
+    flex-direction: column;
+  }
+
+  .headerActions {
+    width: 100%;
+  }
+
+  .stoSelect {
+    width: 100%;
+  }
+}
diff --git a/apps/AdminWebUi/src/pages/BookingRequestsPage/BookingRequestsPage.tsx b/apps/AdminWebUi/src/pages/BookingRequestsPage/BookingRequestsPage.tsx
new file mode 100644
index 000000000..e2bee7594
--- /dev/null
+++ b/apps/AdminWebUi/src/pages/BookingRequestsPage/BookingRequestsPage.tsx
@@ -0,0 +1,185 @@
+import { useMemo, useState } from "react";
+import { BookingRequestCard } from "../../components/BookingRequestCard";
+import { BookingRequestDetailModal } from "../../components/BookingRequestDetailModal";
+import { Select, type SelectOption } from "../../components/Select";
+import { useBookingRequests } from "../../context/BookingRequestContext";
+import { useStos } from "../../context/StoContext";
+import type { BookingRequest, BookingRequestStatus } from "../../types/bookingRequest";
+import { BOOKING_STATUS_LABELS } from "../../utils/bookingLabels";
+import styles from "./BookingRequestsPage.module.css";
+
+const COLUMN_ORDER: BookingRequestStatus[] = ["pending", "confirmed", "rejected"];
+
+const COLUMN_DESCRIPTIONS: Record<BookingRequestStatus, string> = {
+  pending: "Нові запити з мобільного додатку — потребують рішення менеджера",
+  confirmed: "Підтверджені записи, авто додані до черги «Записано»",
+  rejected: "Відхилені запити з поясненням для водія",
+};
+
+interface BookingColumnProps {
+  status: BookingRequestStatus;
+  requests: BookingRequest[];
+  onOpen: (request: BookingRequest) => void;
+}
+
+function BookingColumn({ status, requests, onOpen }: BookingColumnProps) {
+  const label = BOOKING_STATUS_LABELS[status];
+
+  return (
+    <section className={styles.column}>
+      <div className={styles.columnHeader}>
+        <div className={styles.columnTitleRow}>
+          <h2 className={styles.columnTitle}>{label}</h2>
+          <span className={styles.columnCount}>{requests.length}</span>
+        </div>
+        <p className={styles.columnDescription}>{COLUMN_DESCRIPTIONS[status]}</p>
+      </div>
+
+      <div className={styles.columnCards}>
+        {requests.length === 0 ? (
+          <div className={styles.emptyColumn}>Немає запитів</div>
+        ) : (
+          requests.map((request) => (
+            <BookingRequestCard key={request.id} request={request} onOpen={onOpen} />
+          ))
+        )}
+      </div>
+    </section>
+  );
+}
+
+export function BookingRequestsPage() {
+  const { stos } = useStos();
+  const { getRequestsBySto, confirmRequest, rejectRequest } = useBookingRequests();
+
+  const activeStos = useMemo(
+    () => stos.filter((sto) => sto.status === "active"),
+    [stos],
+  );
+
+  const [selectedStoId, setSelectedStoId] = useState(
+    () => activeStos[0]?.id ?? stos[0]?.id ?? "",
+  );
+  const [selectedRequest, setSelectedRequest] = useState<BookingRequest | null>(null);
+
+  const stoOptions: SelectOption[] = useMemo(
+    () =>
+      (activeStos.length > 0 ? activeStos : stos).map((sto) => ({
+        value: sto.id,
+        label: sto.name,
+      })),
+    [activeStos, stos],
+  );
+
+  const allRequests = useMemo(
+    () => getRequestsBySto(selectedStoId),
+    [getRequestsBySto, selectedStoId],
+  );
+
+  const requestsByStatus = useMemo(() => {
+    const grouped = Object.fromEntries(
+      COLUMN_ORDER.map((status) => [status, [] as BookingRequest[]]),
+    ) as Record<BookingRequestStatus, BookingRequest[]>;
+
+    for (const request of allRequests) {
+      grouped[request.status].push(request);
+    }
+
+    for (const status of COLUMN_ORDER) {
+      grouped[status].sort(
+        (left, right) =>
+          new Date(right.createdAt).getTime() - new Date(left.createdAt).getTime(),
+      );
+    }
+
+    return grouped;
+  }, [allRequests]);
+
+  const detailRequest = useMemo(() => {
+    if (!selectedRequest) return null;
+    return allRequests.find((request) => request.id === selectedRequest.id) ?? selectedRequest;
+  }, [allRequests, selectedRequest]);
+
+  const selectedSto = stos.find((sto) => sto.id === selectedStoId);
+  const pendingCount = requestsByStatus.pending.length;
+
+  const handleConfirm = (requestId: string, appointmentAt: string, managerNote?: string) => {
+    const updated = confirmRequest(requestId, appointmentAt, managerNote);
+    if (updated) {
+      setSelectedRequest(updated);
+    }
+  };
+
+  const handleReject = (requestId: string, reason: string) => {
+    rejectRequest(requestId, reason);
+    setSelectedRequest((current) =>
+      current?.id === requestId
+        ? { ...current, status: "rejected", rejectionReason: reason }
+        : current,
+    );
+  };
+
+  return (
+    <div className={styles.page}>
+      <header className={styles.header}>
+        <div className={styles.headerText}>
+          <h1 className={styles.title}>Онлайн-записи</h1>
+          <p className={styles.subtitle}>
+            Запити від водіїв через додаток — підтвердження, час прийому та додавання в чергу
+            {selectedSto ? ` · ${selectedSto.name}` : ""}
+          </p>
+        </div>
+        <div className={styles.headerActions}>
+          <div className={styles.stoSelect}>
+            <Select
+              label="СТО"
+              value={selectedStoId}
+              onChange={setSelectedStoId}
+              options={stoOptions}
+            />
+          </div>
+        </div>
+      </header>
+
+      <div className={styles.stats}>
+        <div className={`${styles.statCard} ${pendingCount > 0 ? styles.statCardAttention : ""}`}>
+          <span className={styles.statLabel}>Очікують обробки</span>
+          <span className={styles.statValue}>{pendingCount}</span>
+        </div>
+        <div className={styles.statCard}>
+          <span className={styles.statLabel}>Підтверджено</span>
+          <span className={styles.statValue}>{requestsByStatus.confirmed.length}</span>
+        </div>
+        <div className={styles.statCard}>
+          <span className={styles.statLabel}>Відхилено</span>
+          <span className={styles.statValue}>{requestsByStatus.rejected.length}</span>
+        </div>
+        <div className={styles.statCard}>
+          <span className={styles.statLabel}>Всього</span>
+          <span className={styles.statValue}>{allRequests.length}</span>
+        </div>
+      </div>
+
+      <p className={styles.hint}>Натисніть на картку запиту, щоб переглянути деталі та обробити</p>
+
+      <div className={styles.board}>
+        {COLUMN_ORDER.map((status) => (
+          <BookingColumn
+            key={status}
+            status={status}
+            requests={requestsByStatus[status]}
+            onOpen={setSelectedRequest}
+          />
+        ))}
+      </div>
+
+      <BookingRequestDetailModal
+        request={detailRequest}
+        isOpen={selectedRequest !== null}
+        onClose={() => setSelectedRequest(null)}
+        onConfirm={handleConfirm}
+        onReject={handleReject}
+      />
+    </div>
+  );
+}
diff --git a/apps/AdminWebUi/src/pages/BookingRequestsPage/index.ts b/apps/AdminWebUi/src/pages/BookingRequestsPage/index.ts
new file mode 100644
index 000000000..e3b428790
--- /dev/null
+++ b/apps/AdminWebUi/src/pages/BookingRequestsPage/index.ts
@@ -0,0 +1 @@
+export { BookingRequestsPage } from "./BookingRequestsPage";
diff --git a/apps/AdminWebUi/src/pages/DriversPage/DriversPage.module.css b/apps/AdminWebUi/src/pages/DriversPage/DriversPage.module.css
index 5a5067058..73201a74d 100644
--- a/apps/AdminWebUi/src/pages/DriversPage/DriversPage.module.css
+++ b/apps/AdminWebUi/src/pages/DriversPage/DriversPage.module.css
@@ -31,6 +31,30 @@
   padding: 16px;
 }
 
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table th,
+.table td {
+  text-align: left;
+  padding: 10px 8px;
+  border-bottom: 1px solid var(--border-secondary);
+  font-size: 14px;
+}
+
+.table th {
+  color: var(--text-secondary);
+  font-weight: 600;
+}
+
+.empty {
+  text-align: center;
+  color: var(--text-secondary);
+  padding: 20px;
+}
+
 .footer {
   margin-top: 14px;
   display: flex;
@@ -53,3 +77,20 @@
   display: flex;
   gap: 8px;
 }
+
+.linkButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm);
+  padding: 6px 10px;
+  color: var(--text-primary);
+  background-color: var(--bg-tertiary);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.linkButton:hover {
+  background-color: var(--interactive-secondary-hover);
+}
diff --git a/apps/AdminWebUi/src/pages/VisitsPage/VisitsPage.module.css b/apps/AdminWebUi/src/pages/VisitsPage/VisitsPage.module.css
new file mode 100644
index 000000000..4d3d3de3f
--- /dev/null
+++ b/apps/AdminWebUi/src/pages/VisitsPage/VisitsPage.module.css
@@ -0,0 +1,124 @@
+.page {
+  width: 100%;
+  max-width: none;
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 20px;
+}
+
+.headerText {
+  flex: 1;
+  min-width: 0;
+}
+
+.title {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.subtitle {
+  font-size: 15px;
+  color: var(--text-secondary);
+  max-width: 560px;
+}
+
+.headerActions {
+  display: flex;
+  align-items: flex-end;
+  gap: 16px;
+  flex-shrink: 0;
+}
+
+.stoSelect {
+  min-width: 220px;
+}
+
+.stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.statCard {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 140px;
+  padding: 14px 16px;
+  border-radius: var(--radius-md);
+  background-color: #1a1c1e;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.statLabel {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+}
+
+.statValue {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.tableCard {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: var(--radius-lg);
+  background-color: #1a1c1e;
+  padding: 4px 16px 16px;
+  overflow: hidden;
+}
+
+.plateCell {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--accent-primary);
+  background-color: #1a4038;
+}
+
+.amountCell {
+  font-weight: 600;
+  color: var(--accent-primary);
+  white-space: nowrap;
+}
+
+.hint {
+  margin: 0 0 12px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.empty {
+  padding: 32px 16px;
+  text-align: center;
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+@media (max-width: 700px) {
+  .header {
+    flex-direction: column;
+  }
+
+  .headerActions {
+    width: 100%;
+  }
+
+  .stoSelect {
+    width: 100%;
+  }
+}
diff --git a/apps/AdminWebUi/src/pages/VisitsPage/VisitsPage.tsx b/apps/AdminWebUi/src/pages/VisitsPage/VisitsPage.tsx
new file mode 100644
index 000000000..941591431
--- /dev/null
+++ b/apps/AdminWebUi/src/pages/VisitsPage/VisitsPage.tsx
@@ -0,0 +1,162 @@
+import { useMemo, useState } from "react";
+import { DataTable, type DataTableColumn } from "../../components/DataTable";
+import { Select, type SelectOption } from "../../components/Select";
+import { VisitDetailModal } from "../../components/VisitDetailModal";
+import { VisitStatusBadge } from "../../components/VisitStatusBadge";
+import { useStos } from "../../context/StoContext";
+import { MOCK_VISITS } from "../../data/mockVisits";
+import type { VisitListItem, VisitStatus } from "../../types/visit";
+import {
+  calcVisitTotal,
+  formatVisitDate,
+  formatVisitPrice,
+  formatVisitTitle,
+  VISIT_STATUS_LABELS,
+} from "../../utils/visitLabels";
+import styles from "./VisitsPage.module.css";
+
+const VISIT_COLUMNS: DataTableColumn<VisitListItem>[] = [
+    {
+      key: "createdAt",
+      header: "Дата",
+      render: (visit) => formatVisitDate(visit.createdAt),
+    },
+    {
+      key: "vehicle",
+      header: "Автомобіль",
+      render: (visit) => (
+        <>
+          <div>{formatVisitTitle(visit.brand, visit.model, visit.year)}</div>
+          <span className={styles.plateCell}>{visit.licensePlate}</span>
+        </>
+      ),
+    },
+    {
+      key: "client",
+      header: "Клієнт",
+      render: (visit) => visit.clientName,
+    },
+    {
+      key: "title",
+      header: "Візит",
+      render: (visit) => visit.title,
+    },
+    {
+      key: "sto",
+      header: "СТО",
+      render: (visit) => visit.stoName,
+    },
+    {
+      key: "mechanic",
+      header: "Механік",
+      render: (visit) => visit.mechanicName ?? "—",
+    },
+    {
+      key: "status",
+      header: "Статус",
+      render: (visit) => <VisitStatusBadge status={visit.status} />,
+    },
+    {
+      key: "total",
+      header: "Сума",
+      render: (visit) => (
+        <span className={styles.amountCell}>{formatVisitPrice(calcVisitTotal(visit.records))}</span>
+      ),
+    },
+  ];
+
+function countByStatus(visits: VisitListItem[], status: VisitStatus): number {
+  return visits.filter((visit) => visit.status === status).length;
+}
+
+export function VisitsPage() {
+  const { stos } = useStos();
+  const [selectedStoId, setSelectedStoId] = useState("all");
+  const [selectedVisit, setSelectedVisit] = useState<VisitListItem | null>(null);
+
+  const activeStos = useMemo(
+    () => stos.filter((sto) => sto.status === "active"),
+    [stos],
+  );
+
+  const stoOptions: SelectOption[] = useMemo(
+    () => [
+      { value: "all", label: "Усі СТО" },
+      ...(activeStos.length > 0 ? activeStos : stos).map((sto) => ({
+        value: sto.id,
+        label: sto.name,
+      })),
+    ],
+    [activeStos, stos],
+  );
+
+  const visits = useMemo(() => {
+    const sorted = [...MOCK_VISITS].sort(
+      (left, right) => new Date(right.createdAt).getTime() - new Date(left.createdAt).getTime(),
+    );
+    if (selectedStoId === "all") return sorted;
+    return sorted.filter((visit) => visit.stoId === selectedStoId);
+  }, [selectedStoId]);
+
+  const columns = VISIT_COLUMNS;
+
+  return (
+    <div className={styles.page}>
+      <header className={styles.header}>
+        <div className={styles.headerText}>
+          <h1 className={styles.title}>Візити</h1>
+          <p className={styles.subtitle}>
+            Усі візити клієнтів на СТО — перегляд деталей, робіт та сум
+          </p>
+        </div>
+        <div className={styles.headerActions}>
+          <div className={styles.stoSelect}>
+            <Select
+              label="СТО"
+              value={selectedStoId}
+              onChange={setSelectedStoId}
+              options={stoOptions}
+            />
+          </div>
+        </div>
+      </header>
+
+      <div className={styles.stats}>
+        <div className={styles.statCard}>
+          <span className={styles.statLabel}>Всього</span>
+          <span className={styles.statValue}>{visits.length}</span>
+        </div>
+        <div className={styles.statCard}>
+          <span className={styles.statLabel}>{VISIT_STATUS_LABELS.in_progress}</span>
+          <span className={styles.statValue}>{countByStatus(visits, "in_progress")}</span>
+        </div>
+        <div className={styles.statCard}>
+          <span className={styles.statLabel}>{VISIT_STATUS_LABELS.waiting_payment}</span>
+          <span className={styles.statValue}>{countByStatus(visits, "waiting_payment")}</span>
+        </div>
+        <div className={styles.statCard}>
+          <span className={styles.statLabel}>{VISIT_STATUS_LABELS.completed}</span>
+          <span className={styles.statValue}>{countByStatus(visits, "completed")}</span>
+        </div>
+      </div>
+
+      <div className={styles.tableCard}>
+        <p className={styles.hint}>Натисніть на рядок, щоб відкрити деталі візиту</p>
+        <DataTable
+          columns={columns}
+          data={visits}
+          getRowKey={(visit) => visit.id}
+          emptyMessage="Візитів за обраним СТО не знайдено."
+          minWidth={980}
+          onRowClick={setSelectedVisit}
+        />
+      </div>
+
+      <VisitDetailModal
+        visit={selectedVisit}
+        isOpen={selectedVisit !== null}
+        onClose={() => setSelectedVisit(null)}
+      />
+    </div>
+  );
+}
diff --git a/apps/AdminWebUi/src/pages/VisitsPage/index.ts b/apps/AdminWebUi/src/pages/VisitsPage/index.ts
new file mode 100644
index 000000000..ebab7d7e9
--- /dev/null
+++ b/apps/AdminWebUi/src/pages/VisitsPage/index.ts
@@ -0,0 +1 @@
+export { VisitsPage } from "./VisitsPage";
diff --git a/apps/AdminWebUi/src/routes/AppRouter.tsx b/apps/AdminWebUi/src/routes/AppRouter.tsx
index e20166348..4f5ab3425 100644
--- a/apps/AdminWebUi/src/routes/AppRouter.tsx
+++ b/apps/AdminWebUi/src/routes/AppRouter.tsx
@@ -8,8 +8,10 @@ import { LoginPage } from "../pages/LoginPage";
 import { PlaceholderPage } from "../pages/PlaceholderPage";
 import { StoListPage } from "../pages/StoListPage";
 import { StoQueuePage } from "../pages/StoQueuePage";
+import { BookingRequestsPage } from "../pages/BookingRequestsPage";
 import { VehicleServiceHistoryPage } from "../pages/VehicleServiceHistoryPage";
 import { VehiclesPage } from "../pages/VehiclesPage";
+import { VisitsPage } from "../pages/VisitsPage";
 import { PermissionGate } from "./PermissionGate";
 import { ProtectedRoute } from "./ProtectedRoute";
 
@@ -45,6 +47,24 @@ export function AppRouter() {
           }
         />
 
+        <Route
+          path="/sto/bookings"
+          element={
+            <PermissionGate requiredPermissions={[Permission.StoView]}>
+              <BookingRequestsPage />
+            </PermissionGate>
+          }
+        />
+
+        <Route
+          path="/visits"
+          element={
+            <PermissionGate requiredPermissions={[Permission.StoView]}>
+              <VisitsPage />
+            </PermissionGate>
+          }
+        />
+
         <Route
           path="/users"
           element={
diff --git a/apps/AdminWebUi/src/types/bookingRequest.ts b/apps/AdminWebUi/src/types/bookingRequest.ts
new file mode 100644
index 000000000..195ce397a
--- /dev/null
+++ b/apps/AdminWebUi/src/types/bookingRequest.ts
@@ -0,0 +1,34 @@
+export type VisitReasonId = "maintenance" | "suspension" | "diagnostics" | "other";
+
+export type TimeSlotId = "morning" | "day" | "evening";
+
+export type PartsOption = "shop" | "own";
+
+export type BookingRequestStatus = "pending" | "confirmed" | "rejected";
+
+export interface BookingRequest {
+  id: string;
+  stoId: string;
+  vehicleId?: string;
+  driverId?: string;
+  brand: string;
+  model: string;
+  year?: number;
+  licensePlate: string;
+  vin?: string;
+  clientName: string;
+  clientPhone?: string;
+  visitReason: VisitReasonId;
+  problemDescription: string;
+  preferredDate: string;
+  preferredTimeSlot: TimeSlotId;
+  partsOption: PartsOption;
+  attachmentsCount?: number;
+  status: BookingRequestStatus;
+  managerAppointmentAt?: string;
+  managerNote?: string;
+  rejectionReason?: string;
+  queueVehicleId?: string;
+  createdAt: string;
+  updatedAt: string;
+}
diff --git a/apps/AdminWebUi/src/types/stoVehicle.ts b/apps/AdminWebUi/src/types/stoVehicle.ts
index 94600b477..5c1264ab3 100644
--- a/apps/AdminWebUi/src/types/stoVehicle.ts
+++ b/apps/AdminWebUi/src/types/stoVehicle.ts
@@ -46,6 +46,34 @@ export interface StoMechanic {
   fullName: string;
 }
 
+export type StoVehicleActivityType =
+  | "vehicle_created"
+  | "appointment_scheduled"
+  | "vehicle_arrived"
+  | "status_changed"
+  | "mechanic_assigned"
+  | "approval_requested"
+  | "approval_sent_to_client"
+  | "approval_approved"
+  | "approval_rejected";
+
+export type StoVehicleActivityActorRole =
+  | "system"
+  | "operator"
+  | "manager"
+  | "mechanic"
+  | "client";
+
+export interface StoVehicleActivityEntry {
+  id: string;
+  type: StoVehicleActivityType;
+  occurredAt: string;
+  actorName: string;
+  actorRole: StoVehicleActivityActorRole;
+  title: string;
+  description?: string;
+}
+
 export interface StoQueueVehicle {
   id: string;
   stoId: string;
@@ -63,6 +91,8 @@ export interface StoQueueVehicle {
   mechanicName?: string;
   progress?: number;
   approvalRequests?: StoVehicleApprovalRequest[];
+  /** Журнал дій з API; якщо відсутній — будується на фронтенді з наявних полів */
+  activityLog?: StoVehicleActivityEntry[];
   isManualEntry?: boolean;
   createdAt: string;
   updatedAt: string;
@@ -79,4 +109,5 @@ export interface CreateStoQueueVehiclePayload {
   problemSummary?: string;
   status: StoVehicleQueueStatus;
   appointmentAt?: string;
+  isManualEntry?: boolean;
 }
diff --git a/apps/AdminWebUi/src/types/visit.ts b/apps/AdminWebUi/src/types/visit.ts
new file mode 100644
index 000000000..abd8df3dd
--- /dev/null
+++ b/apps/AdminWebUi/src/types/visit.ts
@@ -0,0 +1,33 @@
+import type { StoVehicleActivityEntry } from "./stoVehicle";
+
+export type VisitStatus = "in_progress" | "completed" | "cancelled" | "waiting_payment";
+
+export interface VisitRecord {
+  id: string;
+  title: string;
+  description?: string;
+  price: number;
+}
+
+export interface VisitListItem {
+  id: string;
+  stoId: string;
+  stoName: string;
+  vehicleId: string;
+  brand: string;
+  model: string;
+  year?: number;
+  licensePlate: string;
+  clientName: string;
+  clientPhone?: string;
+  title: string;
+  description: string;
+  status: VisitStatus;
+  mechanicName?: string;
+  records: VisitRecord[];
+  /** Журнал дій з API; якщо відсутній — будується на фронтенді */
+  activityLog?: StoVehicleActivityEntry[];
+  createdAt: string;
+  updatedAt?: string;
+  completedAt?: string;
+}
diff --git a/apps/AdminWebUi/src/utils/bookingLabels.ts b/apps/AdminWebUi/src/utils/bookingLabels.ts
new file mode 100644
index 000000000..7b9829211
--- /dev/null
+++ b/apps/AdminWebUi/src/utils/bookingLabels.ts
@@ -0,0 +1,82 @@
+import type {
+  BookingRequestStatus,
+  PartsOption,
+  TimeSlotId,
+  VisitReasonId,
+} from "../types/bookingRequest";
+
+export const VISIT_REASON_LABELS: Record<VisitReasonId, string> = {
+  maintenance: "Регулярне ТО",
+  suspension: "Ходова та підвіска",
+  diagnostics: "Діагностика / Електрика",
+  other: "Інше / Складна поломка",
+};
+
+export const TIME_SLOT_LABELS: Record<TimeSlotId, string> = {
+  morning: "Ранок",
+  day: "День",
+  evening: "Вечір",
+};
+
+export const TIME_SLOT_RANGES: Record<TimeSlotId, string> = {
+  morning: "09:00 – 13:00",
+  day: "13:00 – 17:00",
+  evening: "17:00 – 19:00",
+};
+
+export const PARTS_OPTION_LABELS: Record<PartsOption, string> = {
+  shop: "Запчастини від СТО",
+  own: "Свої запчастини",
+};
+
+export const BOOKING_STATUS_LABELS: Record<BookingRequestStatus, string> = {
+  pending: "Очікує обробки",
+  confirmed: "Підтверджено",
+  rejected: "Відхилено",
+};
+
+export function formatPreferredSlot(date: string, slot: TimeSlotId): string {
+  const formattedDate = new Intl.DateTimeFormat("uk-UA", {
+    weekday: "short",
+    day: "2-digit",
+    month: "long",
+  }).format(new Date(`${date}T12:00:00`));
+
+  return `${formattedDate}, ${TIME_SLOT_LABELS[slot]} (${TIME_SLOT_RANGES[slot]})`;
+}
+
+export function buildProblemSummary(
+  visitReason: VisitReasonId,
+  problemDescription: string,
+): string {
+  return `${VISIT_REASON_LABELS[visitReason]}: ${problemDescription}`;
+}
+
+export function suggestedAppointmentIso(date: string, slot: TimeSlotId): string {
+  const hour = slot === "morning" ? 11 : slot === "day" ? 15 : 18;
+  const local = new Date(`${date}T${String(hour).padStart(2, "0")}:00:00`);
+  return local.toISOString();
+}
+
+export function toDatetimeLocalValue(isoDate: string): string {
+  const date = new Date(isoDate);
+  if (Number.isNaN(date.getTime())) return "";
+
+  const pad = (value: number) => String(value).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+
+export function fromDatetimeLocalValue(value: string): string {
+  return new Date(value).toISOString();
+}
+
+export function formatBookingDateTime(isoDate: string): string {
+  return new Intl.DateTimeFormat("uk-UA", {
+    weekday: "short",
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(new Date(isoDate));
+}
diff --git a/apps/AdminWebUi/src/utils/stoVehicleActivityLog.ts b/apps/AdminWebUi/src/utils/stoVehicleActivityLog.ts
new file mode 100644
index 000000000..509dccf90
--- /dev/null
+++ b/apps/AdminWebUi/src/utils/stoVehicleActivityLog.ts
@@ -0,0 +1,214 @@
+import type {
+  StoQueueVehicle,
+  StoVehicleActivityEntry,
+  StoVehicleApprovalRequest,
+} from "../types/stoVehicle";
+import { APPROVAL_TYPE_LABELS, formatPriceUah } from "./stoVehicleApprovals";
+import {
+  formatEventDateTime,
+  getVehicleStepIndex,
+  STO_VEHICLE_STATUS_LABELS,
+  STO_VEHICLE_STATUS_ORDER,
+} from "./stoVehicleLabels";
+
+function interpolateIsoTime(startIso: string, endIso: string, ratio: number): string {
+  const start = new Date(startIso).getTime();
+  const end = new Date(endIso).getTime();
+  if (Number.isNaN(start) || Number.isNaN(end) || end <= start) {
+    return endIso;
+  }
+  return new Date(start + (end - start) * ratio).toISOString();
+}
+
+function formatApprovalItemsSummary(request: StoVehicleApprovalRequest): string | undefined {
+  const items = request.lineItems ?? [];
+  if (items.length === 0) return undefined;
+
+  const preview = items
+    .slice(0, 3)
+    .map((item) => {
+      const qty = item.quantity && item.quantity > 1 ? ` ×${item.quantity}` : "";
+      return `${item.title}${qty}`;
+    })
+    .join(", ");
+
+  const suffix = items.length > 3 ? ` та ще ${items.length - 3}` : "";
+  const total = request.totalAmount;
+  const totalPart = total != null ? ` · ${formatPriceUah(total)}` : "";
+
+  return `${preview}${suffix}${totalPart}`;
+}
+
+function buildApprovalEntries(
+  vehicle: StoQueueVehicle,
+  request: StoVehicleApprovalRequest,
+): StoVehicleActivityEntry[] {
+  const entries: StoVehicleActivityEntry[] = [];
+  const typeLabel = APPROVAL_TYPE_LABELS[request.type];
+  const itemsSummary = formatApprovalItemsSummary(request);
+
+  entries.push({
+    id: `${request.id}-requested`,
+    type: "approval_requested",
+    occurredAt: request.createdAt,
+    actorName: request.requestedBy,
+    actorRole: "mechanic",
+    title: `Створено запит: ${typeLabel}`,
+    description: itemsSummary ?? request.description,
+  });
+
+  if (request.sentToClientAt) {
+    entries.push({
+      id: `${request.id}-sent`,
+      type: "approval_sent_to_client",
+      occurredAt: request.sentToClientAt,
+      actorName: "Менеджер СТО",
+      actorRole: "manager",
+      title: `Надіслано клієнту на погодження: ${typeLabel}`,
+      description: `Очікує відповіді від ${vehicle.clientName}`,
+    });
+  }
+
+  if (request.clientNotifiedAt) {
+    entries.push({
+      id: `${request.id}-notified`,
+      type: "approval_sent_to_client",
+      occurredAt: request.clientNotifiedAt,
+      actorName: "Система",
+      actorRole: "system",
+      title: `Нагадування клієнту: ${typeLabel}`,
+      description: `Повторне сповіщення для ${vehicle.clientName}`,
+    });
+  }
+
+  if (request.status === "approved" && request.reviewedAt) {
+    const byManager = request.approverRole === "manager";
+    entries.push({
+      id: `${request.id}-approved`,
+      type: "approval_approved",
+      occurredAt: request.reviewedAt,
+      actorName: request.approvedByName ?? (byManager ? "Менеджер СТО" : vehicle.clientName),
+      actorRole: byManager ? "manager" : "client",
+      title: `Погоджено: ${typeLabel}`,
+      description: request.managerOverrideReason ?? itemsSummary,
+    });
+  }
+
+  if (request.status === "rejected" && request.reviewedAt) {
+    entries.push({
+      id: `${request.id}-rejected`,
+      type: "approval_rejected",
+      occurredAt: request.reviewedAt,
+      actorName: request.approvedByName ?? vehicle.clientName,
+      actorRole: request.approverRole === "manager" ? "manager" : "client",
+      title: `Відхилено: ${typeLabel}`,
+      description: request.rejectionReason,
+    });
+  }
+
+  return entries;
+}
+
+function buildDerivedActivityLog(vehicle: StoQueueVehicle): StoVehicleActivityEntry[] {
+  const entries: StoVehicleActivityEntry[] = [];
+
+  entries.push({
+    id: `${vehicle.id}-created`,
+    type: "vehicle_created",
+    occurredAt: vehicle.createdAt,
+    actorName: vehicle.isManualEntry ? "Оператор СТО" : "Система",
+    actorRole: vehicle.isManualEntry ? "operator" : "system",
+    title: vehicle.isManualEntry ? "Автомобіль додано вручну" : "Автомобіль зареєстровано в черзі",
+    description: vehicle.problemSummary,
+  });
+
+  if (vehicle.appointmentAt) {
+    entries.push({
+      id: `${vehicle.id}-appointment`,
+      type: "appointment_scheduled",
+      occurredAt: vehicle.appointmentAt,
+      actorName: vehicle.clientName,
+      actorRole: "client",
+      title: "Запис на прийом",
+      description: formatEventDateTime(vehicle.appointmentAt),
+    });
+  }
+
+  if (vehicle.arrivedAt) {
+    entries.push({
+      id: `${vehicle.id}-arrived`,
+      type: "vehicle_arrived",
+      occurredAt: vehicle.arrivedAt,
+      actorName: "Оператор СТО",
+      actorRole: "operator",
+      title: "Автомобіль прибув на СТО",
+    });
+  }
+
+  const currentIndex = getVehicleStepIndex(vehicle.status);
+  const statusesToLog = STO_VEHICLE_STATUS_ORDER.slice(0, currentIndex + 1);
+  const statusTimelineEnd = vehicle.updatedAt;
+
+  statusesToLog.forEach((status, index) => {
+    const ratio =
+      statusesToLog.length === 1 ? 0 : index / Math.max(statusesToLog.length - 1, 1);
+    const occurredAt = interpolateIsoTime(vehicle.createdAt, statusTimelineEnd, ratio);
+    const label = STO_VEHICLE_STATUS_LABELS[status];
+
+    entries.push({
+      id: `${vehicle.id}-status-${status}`,
+      type: "status_changed",
+      occurredAt,
+      actorName: "Оператор СТО",
+      actorRole: "operator",
+      title:
+        index === 0
+          ? `Початковий етап: ${label}`
+          : `Етап змінено на «${label}»`,
+    });
+  });
+
+  if (vehicle.mechanicName) {
+    const mechanicTime = vehicle.arrivedAt
+      ? interpolateIsoTime(vehicle.arrivedAt, vehicle.updatedAt, 0.35)
+      : interpolateIsoTime(vehicle.createdAt, vehicle.updatedAt, 0.4);
+
+    entries.push({
+      id: `${vehicle.id}-mechanic`,
+      type: "mechanic_assigned",
+      occurredAt: mechanicTime,
+      actorName: "Менеджер СТО",
+      actorRole: "manager",
+      title: "Призначено механіка",
+      description: vehicle.mechanicName,
+    });
+  }
+
+  for (const request of vehicle.approvalRequests ?? []) {
+    entries.push(...buildApprovalEntries(vehicle, request));
+  }
+
+  return entries;
+}
+
+export function buildVehicleActivityLog(vehicle: StoQueueVehicle): StoVehicleActivityEntry[] {
+  const entries =
+    vehicle.activityLog && vehicle.activityLog.length > 0
+      ? [...vehicle.activityLog]
+      : buildDerivedActivityLog(vehicle);
+
+  return entries.sort(
+    (left, right) => new Date(right.occurredAt).getTime() - new Date(left.occurredAt).getTime(),
+  );
+}
+
+export const ACTIVITY_ACTOR_ROLE_LABELS: Record<
+  StoVehicleActivityEntry["actorRole"],
+  string
+> = {
+  system: "Система",
+  operator: "Оператор",
+  manager: "Менеджер",
+  mechanic: "Механік",
+  client: "Клієнт",
+};
diff --git a/apps/AdminWebUi/src/utils/visitActivityLog.ts b/apps/AdminWebUi/src/utils/visitActivityLog.ts
new file mode 100644
index 000000000..3dbeec842
--- /dev/null
+++ b/apps/AdminWebUi/src/utils/visitActivityLog.ts
@@ -0,0 +1,131 @@
+import type { StoVehicleActivityEntry } from "../types/stoVehicle";
+import type { VisitListItem, VisitStatus } from "../types/visit";
+import { formatVisitPrice, VISIT_STATUS_LABELS } from "./visitLabels";
+
+function interpolateIsoTime(startIso: string, endIso: string, ratio: number): string {
+  const start = new Date(startIso).getTime();
+  const end = new Date(endIso).getTime();
+  if (Number.isNaN(start) || Number.isNaN(end) || end <= start) {
+    return endIso;
+  }
+  return new Date(start + (end - start) * ratio).toISOString();
+}
+
+const VISIT_STATUS_ORDER: VisitStatus[] = [
+  "in_progress",
+  "waiting_payment",
+  "completed",
+];
+
+function getVisitStatusIndex(status: VisitStatus): number {
+  if (status === "cancelled") return -1;
+  return VISIT_STATUS_ORDER.indexOf(status);
+}
+
+function buildDerivedVisitActivityLog(visit: VisitListItem): StoVehicleActivityEntry[] {
+  const entries: StoVehicleActivityEntry[] = [];
+  const endTime = visit.completedAt ?? visit.updatedAt ?? visit.createdAt;
+
+  entries.push({
+    id: `${visit.id}-created`,
+    type: "vehicle_created",
+    occurredAt: visit.createdAt,
+    actorName: "Оператор СТО",
+    actorRole: "operator",
+    title: "Візит відкрито",
+    description: visit.description || visit.title,
+  });
+
+  if (visit.mechanicName) {
+    entries.push({
+      id: `${visit.id}-mechanic`,
+      type: "mechanic_assigned",
+      occurredAt: interpolateIsoTime(visit.createdAt, endTime, 0.15),
+      actorName: "Менеджер СТО",
+      actorRole: "manager",
+      title: "Призначено механіка",
+      description: visit.mechanicName,
+    });
+  }
+
+  const currentIndex = getVisitStatusIndex(visit.status);
+  if (currentIndex >= 0) {
+    const statusesToLog = VISIT_STATUS_ORDER.slice(0, currentIndex + 1);
+    statusesToLog.forEach((status, index) => {
+      const ratio =
+        statusesToLog.length === 1 ? 0.25 : 0.2 + index / Math.max(statusesToLog.length, 1) * 0.35;
+
+      entries.push({
+        id: `${visit.id}-status-${status}`,
+        type: "status_changed",
+        occurredAt: interpolateIsoTime(visit.createdAt, endTime, ratio),
+        actorName: "Оператор СТО",
+        actorRole: "operator",
+        title: `Статус: ${VISIT_STATUS_LABELS[status]}`,
+      });
+    });
+  }
+
+  visit.records.forEach((record, index) => {
+    const ratio = 0.35 + (index / Math.max(visit.records.length, 1)) * 0.4;
+    entries.push({
+      id: `${visit.id}-record-${record.id}`,
+      type: "approval_requested",
+      occurredAt: interpolateIsoTime(visit.createdAt, endTime, ratio),
+      actorName: visit.mechanicName ?? "Механік",
+      actorRole: "mechanic",
+      title: `Додано до кошторису: ${record.title}`,
+      description: formatVisitPrice(record.price),
+    });
+  });
+
+  if (visit.status === "waiting_payment") {
+    entries.push({
+      id: `${visit.id}-payment`,
+      type: "approval_sent_to_client",
+      occurredAt: visit.updatedAt ?? endTime,
+      actorName: "Менеджер СТО",
+      actorRole: "manager",
+      title: "Надіслано клієнту на оплату",
+      description: `Очікує оплати від ${visit.clientName}`,
+    });
+  }
+
+  if (visit.status === "completed" && visit.completedAt) {
+    entries.push({
+      id: `${visit.id}-completed`,
+      type: "approval_approved",
+      occurredAt: visit.completedAt,
+      actorName: visit.clientName,
+      actorRole: "client",
+      title: "Візит завершено",
+      description: `Загальна сума: ${formatVisitPrice(
+        visit.records.reduce((sum, record) => sum + record.price, 0),
+      )}`,
+    });
+  }
+
+  if (visit.status === "cancelled") {
+    entries.push({
+      id: `${visit.id}-cancelled`,
+      type: "approval_rejected",
+      occurredAt: visit.updatedAt ?? endTime,
+      actorName: "Менеджер СТО",
+      actorRole: "manager",
+      title: "Візит скасовано",
+    });
+  }
+
+  return entries;
+}
+
+export function buildVisitActivityLog(visit: VisitListItem): StoVehicleActivityEntry[] {
+  const entries =
+    visit.activityLog && visit.activityLog.length > 0
+      ? [...visit.activityLog]
+      : buildDerivedVisitActivityLog(visit);
+
+  return entries.sort(
+    (left, right) => new Date(right.occurredAt).getTime() - new Date(left.occurredAt).getTime(),
+  );
+}
diff --git a/apps/AdminWebUi/src/utils/visitLabels.ts b/apps/AdminWebUi/src/utils/visitLabels.ts
new file mode 100644
index 000000000..0471b20be
--- /dev/null
+++ b/apps/AdminWebUi/src/utils/visitLabels.ts
@@ -0,0 +1,82 @@
+import type { VisitStatus } from "../types/visit";
+
+export const VISIT_STATUS_LABELS: Record<VisitStatus, string> = {
+  in_progress: "В роботі",
+  completed: "Завершено",
+  cancelled: "Скасовано",
+  waiting_payment: "Очікує оплати",
+};
+
+export interface VisitStatusBadgeStyle {
+  backgroundColor: string;
+  borderColor: string;
+  textColor: string;
+  dotColor: string;
+}
+
+export function getVisitStatusBadgeStyle(status: VisitStatus): VisitStatusBadgeStyle {
+  switch (status) {
+    case "in_progress":
+      return {
+        backgroundColor: "rgba(88, 166, 255, 0.15)",
+        borderColor: "rgba(88, 166, 255, 0.3)",
+        textColor: "#58a6ff",
+        dotColor: "#58a6ff",
+      };
+    case "completed":
+      return {
+        backgroundColor: "rgba(74, 222, 158, 0.15)",
+        borderColor: "rgba(74, 222, 158, 0.3)",
+        textColor: "#4ade9e",
+        dotColor: "#4ade9e",
+      };
+    case "waiting_payment":
+      return {
+        backgroundColor: "rgba(255, 166, 87, 0.14)",
+        borderColor: "rgba(255, 166, 87, 0.28)",
+        textColor: "#ffa657",
+        dotColor: "#ffa657",
+      };
+    case "cancelled":
+      return {
+        backgroundColor: "rgba(248, 81, 73, 0.12)",
+        borderColor: "rgba(248, 81, 73, 0.28)",
+        textColor: "#f85149",
+        dotColor: "#f85149",
+      };
+  }
+}
+
+export function formatVisitTitle(brand: string, model: string, year?: number): string {
+  return year ? `${brand} ${model} · ${year}` : `${brand} ${model}`;
+}
+
+export function formatVisitPrice(amount: number): string {
+  return new Intl.NumberFormat("uk-UA", {
+    style: "currency",
+    currency: "UAH",
+    maximumFractionDigits: 0,
+  }).format(amount);
+}
+
+export function calcVisitTotal(records: { price: number }[]): number {
+  return records.reduce((sum, record) => sum + record.price, 0);
+}
+
+export function formatVisitDate(isoDate: string): string {
+  return new Intl.DateTimeFormat("uk-UA", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  }).format(new Date(isoDate));
+}
+
+export function formatVisitDateTime(isoDate: string): string {
+  return new Intl.DateTimeFormat("uk-UA", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(new Date(isoDate));
+}
diff --git a/apps/Mobile/App.tsx b/apps/Mobile/App.tsx
index 7b74a8327..9964ce802 100644
--- a/apps/Mobile/App.tsx
+++ b/apps/Mobile/App.tsx
@@ -6,6 +6,7 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
 import { AuthProvider } from "./src/context/AuthContext";
 import { CarProvider } from "./src/context/CarContext";
 import { NotificationsProvider } from "./src/context/NotificationsContext";
+import { AppAlertProvider } from "./src/components/AppAlert";
 import AppNavigator from "./src/navigation/AppNavigator";
 import { queryClient } from "./src/lib/queryClient";
 import { configureStatusBar } from "./src/styles/globalStyles";
@@ -26,8 +27,10 @@ export default function App() {
           <AuthProvider>
             <CarProvider>
               <NotificationsProvider>
-                <StatusBar style="light" backgroundColor="#0D1117" />
-                <AppNavigator />
+                <AppAlertProvider>
+                  <StatusBar style="light" backgroundColor="#0D1117" />
+                  <AppNavigator />
+                </AppAlertProvider>
               </NotificationsProvider>
             </CarProvider>
           </AuthProvider>
diff --git a/apps/Mobile/src/api/authTokenBridge.ts b/apps/Mobile/src/api/authTokenBridge.ts
new file mode 100644
index 000000000..721fd44e7
--- /dev/null
+++ b/apps/Mobile/src/api/authTokenBridge.ts
@@ -0,0 +1,15 @@
+type RefreshAccessTokenFn = () => Promise<string | null>;
+
+let refreshAccessTokenFn: RefreshAccessTokenFn | null = null;
+
+export function registerRefreshAccessToken(fn: RefreshAccessTokenFn): void {
+  refreshAccessTokenFn = fn;
+}
+
+export async function tryRefreshAccessToken(): Promise<string | null> {
+  if (!refreshAccessTokenFn) {
+    return null;
+  }
+
+  return refreshAccessTokenFn();
+}
diff --git a/apps/Mobile/src/api/client.ts b/apps/Mobile/src/api/client.ts
index ff6e92b27..74bd9b06b 100644
--- a/apps/Mobile/src/api/client.ts
+++ b/apps/Mobile/src/api/client.ts
@@ -1,7 +1,10 @@
 import { API_CONFIG, getNgrokHeaders } from "../config/api";
+import { tryRefreshAccessToken } from "./authTokenBridge";
 
 const API_BASE_URL = API_CONFIG.BASE_URL;
 
+type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
+
 export class ApiClient {
   private baseURL: string;
   private getAccessToken: () => Promise<string | null>;
@@ -14,149 +17,89 @@ export class ApiClient {
     this.getAccessToken = getAccessToken;
   }
 
-  private async getHeaders(): Promise<HeadersInit> {
-    const token = await this.getAccessToken();
+  private async getHeaders(token?: string | null): Promise<HeadersInit> {
+    const accessToken = token ?? (await this.getAccessToken());
 
     return {
       "Content-Type": "application/json",
       ...getNgrokHeaders(),
-      ...(token && { Authorization: `Bearer ${token}` }),
+      ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
     };
   }
 
-  async get<T>(endpoint: string): Promise<T> {
-    const response = await fetch(`${this.baseURL}${endpoint}`, {
-      method: "GET",
-      headers: await this.getHeaders(),
-    });
-
-    if (!response.ok) {
-      // Спробуємо отримати текст помилки
-      let errorMessage = `HTTP error! status: ${response.status}`;
-      try {
-        const errorText = await response.text();
-        if (errorText) {
-          errorMessage = errorText;
-        }
-      } catch (e) {
-        // Ігноруємо помилки парсингу тексту
+  private async readErrorMessage(response: Response): Promise<string> {
+    let errorMessage = `HTTP error! status: ${response.status}`;
+    try {
+      const errorText = await response.text();
+      if (errorText) {
+        errorMessage = errorText;
       }
-      throw new Error(errorMessage);
-    }
-
-    // Перевіряємо чи відповідь є JSON
-    const contentType = response.headers.get("content-type");
-    if (!contentType || !contentType.includes("application/json")) {
-      const responseText = await response.text();
-      throw new Error(
-        `Expected JSON response but got: ${contentType}. Response: ${responseText.substring(0, 200)}...`
-      );
+    } catch {
+      // Ignore body read errors.
     }
-
-    return response.json();
+    return errorMessage;
   }
 
-  async post<T>(endpoint: string, data: any): Promise<T> {
+  private async request<T>(
+    method: HttpMethod,
+    endpoint: string,
+    body?: unknown,
+    hasRetried = false
+  ): Promise<T> {
     const response = await fetch(`${this.baseURL}${endpoint}`, {
-      method: "POST",
+      method,
       headers: await this.getHeaders(),
-      body: JSON.stringify(data),
+      ...(body !== undefined ? { body: JSON.stringify(body) } : {}),
     });
 
-    if (!response.ok) {
-      // Спробуємо отримати текст помилки
-      let errorMessage = `HTTP error! status: ${response.status}`;
-      try {
-        const errorText = await response.text();
-        if (errorText) {
-          errorMessage = errorText;
-        }
-      } catch (e) {
-        // Ігноруємо помилки парсингу тексту
+    if (response.status === 401 && !hasRetried) {
+      const refreshedToken = await tryRefreshAccessToken();
+      if (refreshedToken) {
+        return this.request<T>(method, endpoint, body, true);
       }
-      throw new Error(errorMessage);
     }
 
-    // Перевіряємо чи є контент для парсингу
-    const contentType = response.headers.get("content-type");
-    const contentLength = response.headers.get("content-length");
-
-    // Якщо немає контенту або content-length = 0, повертаємо порожній об'єкт
-    if (!contentLength || contentLength === "0") {
-      return {} as T;
-    }
-
-    // Перевіряємо чи відповідь є JSON
-    if (!contentType || !contentType.includes("application/json")) {
-      const responseText = await response.text();
-      throw new Error(
-        `Expected JSON response but got: ${contentType}. Response: ${responseText.substring(0, 200)}...`
-      );
+    if (!response.ok) {
+      throw new Error(await this.readErrorMessage(response));
     }
 
-    return response.json();
-  }
-
-  async put<T>(endpoint: string, data: any): Promise<T> {
-    const response = await fetch(`${this.baseURL}${endpoint}`, {
-      method: "PUT",
-      headers: await this.getHeaders(),
-      body: JSON.stringify(data),
-    });
-
-    if (!response.ok) {
-      // Спробуємо отримати текст помилки
-      let errorMessage = `HTTP error! status: ${response.status}`;
-      try {
-        const errorText = await response.text();
-        if (errorText) {
-          errorMessage = errorText;
-        }
-      } catch (e) {
-        // Ігноруємо помилки парсингу тексту
-      }
-      throw new Error(errorMessage);
+    if (response.status === 204) {
+      return {} as T;
     }
 
-    // Перевіряємо чи є контент для парсингу
     const contentType = response.headers.get("content-type");
-    const contentLength = response.headers.get("content-length");
+    const responseText = await response.text();
 
-    // Якщо немає контенту або content-length = 0, повертаємо порожній об'єкт
-    if (!contentLength || contentLength === "0") {
+    if (!responseText) {
       return {} as T;
     }
 
-    // Перевіряємо чи відповідь є JSON
     if (!contentType || !contentType.includes("application/json")) {
-      const responseText = await response.text();
       throw new Error(
         `Expected JSON response but got: ${contentType}. Response: ${responseText.substring(0, 200)}...`
       );
     }
 
-    return response.json();
+    return JSON.parse(responseText) as T;
   }
 
-  async delete<T>(endpoint: string): Promise<T> {
-    const response = await fetch(`${this.baseURL}${endpoint}`, {
-      method: "DELETE",
-      headers: await this.getHeaders(),
-    });
+  async get<T>(endpoint: string): Promise<T> {
+    return this.request<T>("GET", endpoint);
+  }
 
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
+  async post<T>(endpoint: string, data: unknown): Promise<T> {
+    return this.request<T>("POST", endpoint, data);
+  }
 
-    // 204 No Content — тіла немає, не викликаємо .json()
-    if (response.status === 204) {
-      return {} as T;
-    }
-    return response.json();
+  async put<T>(endpoint: string, data: unknown): Promise<T> {
+    return this.request<T>("PUT", endpoint, data);
+  }
+
+  async delete<T>(endpoint: string): Promise<T> {
+    return this.request<T>("DELETE", endpoint);
   }
 }
 
-// Функція для створення API клієнта з токеном
 export const createApiClient = (
   getAccessToken: () => Promise<string | null>
 ) => {
diff --git a/apps/Mobile/src/components/AppAlert/AppAlert.tsx b/apps/Mobile/src/components/AppAlert/AppAlert.tsx
new file mode 100644
index 000000000..69a033f1e
--- /dev/null
+++ b/apps/Mobile/src/components/AppAlert/AppAlert.tsx
@@ -0,0 +1,178 @@
+import React from "react";
+import {
+  Modal,
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+} from "react-native";
+import { globalStyles } from "../../styles/globalStyles";
+
+export type AppAlertButtonStyle = "default" | "cancel" | "destructive";
+
+export interface AppAlertButton {
+  text: string;
+  onPress?: () => void;
+  style?: AppAlertButtonStyle;
+}
+
+export interface AppAlertProps {
+  visible: boolean;
+  title: string;
+  message?: string;
+  buttons?: AppAlertButton[];
+  onDismiss: () => void;
+}
+
+export function AppAlert({
+  visible,
+  title,
+  message,
+  buttons = [{ text: "OK", style: "default" }],
+  onDismiss,
+}: AppAlertProps) {
+  const handlePress = (button: AppAlertButton) => {
+    onDismiss();
+    button.onPress?.();
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onDismiss}
+    >
+      <View style={styles.overlay}>
+        <TouchableOpacity
+          style={styles.backdrop}
+          activeOpacity={1}
+          onPress={onDismiss}
+        />
+        <View style={styles.card}>
+          <Text style={[globalStyles.textLarge, styles.title]}>{title}</Text>
+          {message ? (
+            <Text style={[globalStyles.textSecondary, styles.message]}>
+              {message}
+            </Text>
+          ) : null}
+
+          <View
+            style={[
+              styles.actions,
+              buttons.length > 1 && styles.actionsMultiple,
+            ]}
+          >
+            {buttons.map((button, index) => {
+              const isDestructive = button.style === "destructive";
+              const isCancel = button.style === "cancel";
+              const isPrimary = !isCancel && !isDestructive;
+
+              return (
+                <TouchableOpacity
+                  key={`${button.text}-${index}`}
+                  style={[
+                    styles.actionButton,
+                    buttons.length > 1 && styles.actionButtonMultiple,
+                    isPrimary && styles.actionButtonPrimary,
+                    isCancel && styles.actionButtonSecondary,
+                    isDestructive && styles.actionButtonDestructive,
+                  ]}
+                  onPress={() => handlePress(button)}
+                  activeOpacity={0.85}
+                >
+                  <Text
+                    style={[
+                      styles.actionButtonText,
+                      isPrimary && styles.actionButtonTextPrimary,
+                      isCancel && styles.actionButtonTextSecondary,
+                      isDestructive && styles.actionButtonTextDestructive,
+                    ]}
+                  >
+                    {button.text}
+                  </Text>
+                </TouchableOpacity>
+              );
+            })}
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 24,
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+  },
+  card: {
+    width: "100%",
+    maxWidth: 360,
+    backgroundColor: "#161B22",
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: "#30363D",
+    paddingHorizontal: 20,
+    paddingTop: 20,
+    paddingBottom: 16,
+  },
+  title: {
+    fontSize: 18,
+    marginBottom: 8,
+    textAlign: "center",
+  },
+  message: {
+    textAlign: "center",
+    lineHeight: 22,
+    marginBottom: 20,
+  },
+  actions: {
+    gap: 10,
+  },
+  actionsMultiple: {
+    flexDirection: "column-reverse",
+  },
+  actionButton: {
+    borderRadius: 12,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  actionButtonMultiple: {
+    width: "100%",
+  },
+  actionButtonPrimary: {
+    backgroundColor: "#4ade9e",
+  },
+  actionButtonSecondary: {
+    backgroundColor: "#21262D",
+    borderWidth: 1,
+    borderColor: "#30363D",
+  },
+  actionButtonDestructive: {
+    backgroundColor: "transparent",
+    borderWidth: 1,
+    borderColor: "#F85149",
+  },
+  actionButtonText: {
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  actionButtonTextPrimary: {
+    color: "#121212",
+  },
+  actionButtonTextSecondary: {
+    color: "#FFFFFF",
+  },
+  actionButtonTextDestructive: {
+    color: "#F85149",
+  },
+});
diff --git a/apps/Mobile/src/components/AppAlert/AppAlertContext.tsx b/apps/Mobile/src/components/AppAlert/AppAlertContext.tsx
new file mode 100644
index 000000000..3f5101694
--- /dev/null
+++ b/apps/Mobile/src/components/AppAlert/AppAlertContext.tsx
@@ -0,0 +1,94 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useState,
+} from "react";
+import { AppAlert, AppAlertButton } from "./AppAlert";
+
+export interface ShowAppAlertOptions {
+  title: string;
+  message?: string;
+  buttons?: AppAlertButton[];
+}
+
+interface AppAlertState extends ShowAppAlertOptions {
+  visible: boolean;
+}
+
+interface AppAlertContextValue {
+  showAlert: (options: ShowAppAlertOptions) => void;
+  showError: (message: string, title?: string) => void;
+  showSuccess: (
+    message: string,
+    title?: string,
+    buttons?: AppAlertButton[]
+  ) => void;
+  hideAlert: () => void;
+}
+
+const AppAlertContext = createContext<AppAlertContextValue | null>(null);
+
+export function AppAlertProvider({ children }: { children: React.ReactNode }) {
+  const [alertState, setAlertState] = useState<AppAlertState | null>(null);
+
+  const hideAlert = useCallback(() => {
+    setAlertState(null);
+  }, []);
+
+  const showAlert = useCallback((options: ShowAppAlertOptions) => {
+    setAlertState({
+      ...options,
+      visible: true,
+      buttons: options.buttons ?? [{ text: "OK", style: "default" }],
+    });
+  }, []);
+
+  const showError = useCallback(
+    (message: string, title = "Помилка") => {
+      showAlert({ title, message });
+    },
+    [showAlert]
+  );
+
+  const showSuccess = useCallback(
+    (message: string, title = "Успішно!", buttons?: AppAlertButton[]) => {
+      showAlert({
+        title,
+        message,
+        buttons: buttons ?? [{ text: "OK", style: "default" }],
+      });
+    },
+    [showAlert]
+  );
+
+  const value: AppAlertContextValue = {
+    showAlert,
+    showError,
+    showSuccess,
+    hideAlert,
+  };
+
+  return (
+    <AppAlertContext.Provider value={value}>
+      {children}
+      {alertState ? (
+        <AppAlert
+          visible={alertState.visible}
+          title={alertState.title}
+          message={alertState.message}
+          buttons={alertState.buttons}
+          onDismiss={hideAlert}
+        />
+      ) : null}
+    </AppAlertContext.Provider>
+  );
+}
+
+export function useAppAlert() {
+  const context = useContext(AppAlertContext);
+  if (!context) {
+    throw new Error("useAppAlert must be used within an AppAlertProvider");
+  }
+  return context;
+}
diff --git a/apps/Mobile/src/components/AppAlert/index.ts b/apps/Mobile/src/components/AppAlert/index.ts
new file mode 100644
index 000000000..e74dbad36
--- /dev/null
+++ b/apps/Mobile/src/components/AppAlert/index.ts
@@ -0,0 +1,4 @@
+export { AppAlert } from "./AppAlert";
+export type { AppAlertButton, AppAlertButtonStyle, AppAlertProps } from "./AppAlert";
+export { AppAlertProvider, useAppAlert } from "./AppAlertContext";
+export type { ShowAppAlertOptions } from "./AppAlertContext";
diff --git a/apps/Mobile/src/components/AppAlert/useAppAlert.tsx b/apps/Mobile/src/components/AppAlert/useAppAlert.tsx
new file mode 100644
index 000000000..f74c9fa18
--- /dev/null
+++ b/apps/Mobile/src/components/AppAlert/useAppAlert.tsx
@@ -0,0 +1,2 @@
+export { AppAlertProvider, useAppAlert } from "./AppAlertContext";
+export type { ShowAppAlertOptions } from "./AppAlertContext";
diff --git a/apps/Mobile/src/components/Select/Select.styles.ts b/apps/Mobile/src/components/Select/Select.styles.ts
index c88bcac21..98c9c04b2 100644
--- a/apps/Mobile/src/components/Select/Select.styles.ts
+++ b/apps/Mobile/src/components/Select/Select.styles.ts
@@ -72,9 +72,12 @@ export const styles = StyleSheet.create({
     borderWidth: 1,
     borderBottomWidth: 0,
     borderColor: "rgba(255, 255, 255, 0.08)",
-    maxHeight: "85%",
+    height: "85%",
     overflow: "hidden",
   },
+  optionsBody: {
+    flex: 1,
+  },
   handle: {
     alignSelf: "center",
     width: 40,
@@ -83,23 +86,27 @@ export const styles = StyleSheet.create({
     backgroundColor: "rgba(255, 255, 255, 0.15)",
     marginTop: 10,
     marginBottom: 4,
+    flexShrink: 0,
   },
   sheetHeader: {
     flexDirection: "row",
-    alignItems: "center",
+    alignItems: "flex-start",
     justifyContent: "space-between",
     paddingHorizontal: 16,
     paddingTop: 8,
     paddingBottom: 12,
+    flexShrink: 0,
   },
   sheetHeaderContent: {
     flex: 1,
+    minWidth: 0,
+    marginRight: 12,
   },
   sheetTitle: {
     color: "#FFFFFF",
     fontSize: 18,
     fontWeight: "700",
-    flex: 1,
+    lineHeight: 24,
   },
   sheetSubtitle: {
     color: "#8E8E93",
@@ -113,10 +120,12 @@ export const styles = StyleSheet.create({
     backgroundColor: "rgba(255, 255, 255, 0.06)",
     alignItems: "center",
     justifyContent: "center",
+    marginTop: 2,
   },
   searchContainer: {
     paddingHorizontal: 16,
     paddingBottom: 12,
+    flexShrink: 0,
   },
   searchInputWrapper: {
     flexDirection: "row",
@@ -135,7 +144,7 @@ export const styles = StyleSheet.create({
     paddingVertical: 11,
   },
   optionsList: {
-    flexGrow: 0,
+    flex: 1,
   },
   optionsListContent: {
     paddingHorizontal: 12,
@@ -167,9 +176,11 @@ export const styles = StyleSheet.create({
     fontWeight: "600",
   },
   noResultsContainer: {
+    flex: 1,
     paddingVertical: 36,
     paddingHorizontal: 24,
     alignItems: "center",
+    justifyContent: "center",
     gap: 8,
   },
   noResultsTitle: {
@@ -187,6 +198,7 @@ export const styles = StyleSheet.create({
     paddingTop: 8,
     borderTopWidth: 1,
     borderTopColor: "rgba(255, 255, 255, 0.06)",
+    flexShrink: 0,
   },
   doneButton: {
     alignItems: "center",
diff --git a/apps/Mobile/src/components/Select/Select.tsx b/apps/Mobile/src/components/Select/Select.tsx
index af48ca048..7d3324ef9 100644
--- a/apps/Mobile/src/components/Select/Select.tsx
+++ b/apps/Mobile/src/components/Select/Select.tsx
@@ -6,8 +6,6 @@ import {
   TouchableOpacity,
   Modal,
   FlatList,
-  Platform,
-  Dimensions,
 } from "react-native";
 import { Feather } from "@expo/vector-icons";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -70,7 +68,6 @@ export const Select: React.FC<SelectProps> = ({
   const selectedOption = options.find((option) => option.value === value);
   const showSearch = options.length > searchThreshold;
   const modalTitle = label || "Виберіть опцію";
-  const listMaxHeight = Dimensions.get("window").height * 0.42;
 
   const filteredOptions = useMemo(() => {
     if (!searchQuery.trim()) {
@@ -211,7 +208,6 @@ export const Select: React.FC<SelectProps> = ({
                     onChangeText={setSearchQuery}
                     autoCapitalize="none"
                     autoCorrect={false}
-                    autoFocus={Platform.OS === "ios"}
                   />
                   {searchQuery.length > 0 ? (
                     <TouchableOpacity
@@ -225,25 +221,27 @@ export const Select: React.FC<SelectProps> = ({
               </View>
             ) : null}
 
-            {filteredOptions.length > 0 ? (
-              <FlatList
-                data={filteredOptions}
-                keyExtractor={(item) => String(item.value)}
-                style={[styles.optionsList, { maxHeight: listMaxHeight }]}
-                contentContainerStyle={styles.optionsListContent}
-                renderItem={renderOption}
-                keyboardShouldPersistTaps="handled"
-                showsVerticalScrollIndicator={false}
-              />
-            ) : (
-              <View style={styles.noResultsContainer}>
-                <Feather name="search" size={28} color="#8E8E93" />
-                <Text style={styles.noResultsTitle}>Нічого не знайдено</Text>
-                <Text style={styles.noResultsText}>
-                  Спробуйте інший пошуковий запит
-                </Text>
-              </View>
-            )}
+            <View style={styles.optionsBody}>
+              {filteredOptions.length > 0 ? (
+                <FlatList
+                  data={filteredOptions}
+                  keyExtractor={(item) => String(item.value)}
+                  style={styles.optionsList}
+                  contentContainerStyle={styles.optionsListContent}
+                  renderItem={renderOption}
+                  keyboardShouldPersistTaps="handled"
+                  showsVerticalScrollIndicator={false}
+                />
+              ) : (
+                <View style={styles.noResultsContainer}>
+                  <Feather name="search" size={28} color="#8E8E93" />
+                  <Text style={styles.noResultsTitle}>Нічого не знайдено</Text>
+                  <Text style={styles.noResultsText}>
+                    Спробуйте інший пошуковий запит
+                  </Text>
+                </View>
+              )}
+            </View>
 
             <View
               style={[
diff --git a/apps/Mobile/src/components/VinDecoder/VinDecoder.tsx b/apps/Mobile/src/components/VinDecoder/VinDecoder.tsx
index 664e50afb..e1e83b2fd 100644
--- a/apps/Mobile/src/components/VinDecoder/VinDecoder.tsx
+++ b/apps/Mobile/src/components/VinDecoder/VinDecoder.tsx
@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from "react";
-import { View, Text, Alert, ActivityIndicator, StyleSheet } from "react-native";
+import { View, Text, ActivityIndicator, StyleSheet } from "react-native";
 import { useTheme } from "../../hooks/useTheme";
 import { globalStyles } from "../../styles/globalStyles";
 import { Input } from "../Input";
 import { decodeVinExtended, VinDecodeData } from "../../api/services/nhtsaService";
+import { useAppAlert } from "../AppAlert";
 
 interface VinDecoderProps {
   onDecodeSuccess: (data: {
@@ -25,6 +26,7 @@ export const VinDecoder: React.FC<VinDecoderProps> = ({
   containerStyle,
 }) => {
   const theme = useTheme();
+  const { showSuccess, showError } = useAppAlert();
   const [vinDecode, setVinDecode] = useState("");
   const [isDecodingVin, setIsDecodingVin] = useState(false);
 
@@ -54,14 +56,14 @@ export const VinDecoder: React.FC<VinDecoderProps> = ({
           driveType: vinData.DriveType,
         });
 
-        Alert.alert("Успішно!", "Дані про автомобіль отримано та заповнено");
+        showSuccess("Дані про автомобіль отримано та заповнено", "Успішно!");
       } catch (error) {
         console.error("Error decoding VIN:", error);
         const errorMessage =
           error instanceof Error
             ? error.message
             : "Не вдалося розшифрувати VIN номер. Перевірте правильність введення.";
-        Alert.alert("Помилка", errorMessage);
+        showError(errorMessage);
       } finally {
         setIsDecodingVin(false);
       }
@@ -75,7 +77,7 @@ export const VinDecoder: React.FC<VinDecoderProps> = ({
     }, 500); // 500ms затримка після останнього введення
 
     return () => clearTimeout(timeoutId);
-  }, [vinDecode, onDecodeSuccess]);
+  }, [vinDecode, onDecodeSuccess, showSuccess, showError]);
 
   return (
     <View style={[styles.container, containerStyle]}>
diff --git a/apps/Mobile/src/context/AuthContext.tsx b/apps/Mobile/src/context/AuthContext.tsx
index 032a14019..0ab5d8d5b 100644
--- a/apps/Mobile/src/context/AuthContext.tsx
+++ b/apps/Mobile/src/context/AuthContext.tsx
@@ -15,6 +15,7 @@ import {
   refreshAccessToken,
 } from "../api/services/authService";
 import { queryClient } from "../lib/queryClient";
+import { registerRefreshAccessToken } from "../api/authTokenBridge";
 
 interface AuthContextType {
   isAuthenticated: boolean;
@@ -137,6 +138,10 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     checkAuthStatus();
   }, [checkAuthStatus]);
 
+  useEffect(() => {
+    registerRefreshAccessToken(refreshSession);
+  }, [refreshSession]);
+
   const login = async () => {
     const result = await WebBrowser.openAuthSessionAsync(
       `${API_CONFIG.BASE_URL}/auth/login`,
diff --git a/apps/Mobile/src/queries/vehicleQueries.ts b/apps/Mobile/src/queries/vehicleQueries.ts
index 901fea998..aa5389d7d 100644
--- a/apps/Mobile/src/queries/vehicleQueries.ts
+++ b/apps/Mobile/src/queries/vehicleQueries.ts
@@ -11,9 +11,10 @@ export const useVehicles = () => {
 
   return useQuery({
     queryKey: queryKeys.vehicles,
-    queryFn: () => {
+    queryFn: async () => {
       const apiClient = createApiClient(getAccessToken);
-      return apiClient.get<VehicleListItem[]>(ENDPOINTS.VEHICLES);
+      const result = await apiClient.get<VehicleListItem[]>(ENDPOINTS.VEHICLES);
+      return Array.isArray(result) ? result : [];
     },
     staleTime: CACHE_STALE_TIME_MS,
   });
@@ -66,6 +67,7 @@ export const useDeleteVehicle = () => {
     },
     onSuccess: (_, vehicleId) => {
       queryClient.removeQueries({ queryKey: queryKeys.vehicle(vehicleId) });
+      queryClient.removeQueries({ queryKey: queryKeys.serviceHistory(vehicleId) });
       queryClient.invalidateQueries({ queryKey: queryKeys.vehicles });
     },
   });
diff --git a/apps/Mobile/src/screens/CarCardScreen/CarCardScreen.styles.ts b/apps/Mobile/src/screens/CarCardScreen/CarCardScreen.styles.ts
index d17f853e8..bd4c3b959 100644
--- a/apps/Mobile/src/screens/CarCardScreen/CarCardScreen.styles.ts
+++ b/apps/Mobile/src/screens/CarCardScreen/CarCardScreen.styles.ts
@@ -1,90 +1,219 @@
 import { StyleSheet } from "react-native";
+import { theme } from "../../styles/theme";
 
 export const styles = StyleSheet.create({
-  scrollContainer: {
-    flexGrow: 1,
-    paddingHorizontal: 24,
+  contentContainer: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 24,
   },
-  header: {
-    alignItems: "center",
-    marginTop: 20,
-    marginBottom: 40,
+  pageTitle: {
+    color: "#FFFFFF",
+    fontSize: 24,
+    fontWeight: "700",
+    marginBottom: 4,
   },
-  title: {
-    marginBottom: 8,
-    textAlign: "center",
-  },
-  subtitle: {
-    textAlign: "center",
+  pageSubtitle: {
+    color: "#8E8E93",
+    fontSize: 14,
+    marginBottom: 18,
+    lineHeight: 20,
+  },
+  stepHeader: {
+    marginBottom: 14,
+    gap: 6,
+  },
+  stepCounter: {
+    color: theme.colors.accent.primary,
+    fontSize: 12,
+    fontWeight: "600",
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+  },
+  stepTitle: {
+    color: "#FFFFFF",
+    fontSize: 17,
+    fontWeight: "600",
+  },
+  stepProgress: {
+    flexDirection: "row",
+    gap: 6,
+    marginTop: 4,
   },
-  form: {
+  stepDot: {
     flex: 1,
+    height: 4,
+    borderRadius: 999,
+    backgroundColor: "rgba(255, 255, 255, 0.08)",
   },
-  imageSection: {
-    alignItems: "center",
-    marginBottom: 32,
-  },
-  imageContainer: {
-    width: 200,
-    height: 120,
-    borderRadius: 12,
-    borderWidth: 2,
-    borderColor: "#30363D", // Using theme color directly
-    borderStyle: "dashed",
-    justifyContent: "center",
-    alignItems: "center",
+  stepDotCompleted: {
+    backgroundColor: theme.colors.accent.primary,
+  },
+  stepDotActive: {
+    backgroundColor: "#FFFFFF",
+  },
+  section: {
+    backgroundColor: "#1A1C1E",
+    borderRadius: 16,
+    padding: 16,
+    marginBottom: 14,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.05)",
+    gap: 14,
+  },
+  field: {
+    gap: 6,
   },
-  carImage: {
-    width: 196,
-    height: 116,
+  label: {
+    color: "#8E8E93",
+    fontSize: 13,
+  },
+  input: {
+    backgroundColor: "#232527",
     borderRadius: 10,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.08)",
+    color: "#FFFFFF",
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    fontSize: 15,
+  },
+  dateInput: {
+    justifyContent: "center",
   },
-  placeholderImage: {
-    alignItems: "center",
+  dateInputText: {
+    color: "#FFFFFF",
+    fontSize: 15,
   },
-  placeholderText: {
-    fontSize: 32,
-    marginBottom: 8,
+  selectContainer: {
+    marginBottom: 0,
   },
-  placeholderLabel: {
-    fontSize: 14,
-    color: "#8B949E", // Using theme color directly
+  loadingIndicator: {
+    marginTop: 4,
+    alignItems: "flex-start",
   },
-  inputContainer: {
-    marginBottom: 20,
+  photoCard: {
+    borderRadius: 14,
+    overflow: "hidden",
+    backgroundColor: "#121212",
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.06)",
+  },
+  photoImage: {
+    width: "100%",
+    height: 180,
+    backgroundColor: "#121212",
+  },
+  photoPlaceholder: {
+    width: "100%",
+    height: 180,
+    backgroundColor: theme.colors.accent.dark,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
   },
-  label: {
-    marginBottom: 8,
+  photoPlaceholderText: {
+    color: "#FFFFFF",
+    fontSize: 14,
+    fontWeight: "500",
   },
-  input: {
-    // Additional input styles if needed
+  photoOverlay: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    paddingVertical: 12,
+    backgroundColor: "rgba(0, 0, 0, 0.55)",
+  },
+  photoOverlayText: {
+    color: "#FFFFFF",
+    fontSize: 14,
+    fontWeight: "600",
   },
-  vinDecodeContainer: {
+  actionsRow: {
     flexDirection: "row",
-    gap: 12,
-    alignItems: "flex-start",
+    gap: 10,
+    marginTop: 4,
   },
-  vinDecodeInput: {
+  halfButton: {
     flex: 1,
   },
-  decodeButton: {
-    minWidth: 120,
-    justifyContent: "center",
+  primaryButton: {
+    flexDirection: "row",
     alignItems: "center",
-    paddingHorizontal: 16,
+    justifyContent: "center",
+    gap: 8,
+    backgroundColor: theme.colors.interactive.primary,
+    borderRadius: 14,
+    paddingVertical: 14,
   },
-  decodeButtonDisabled: {
-    opacity: 0.6,
+  primaryButtonText: {
+    color: theme.colors.text.inverse,
+    fontSize: 15,
+    fontWeight: "600",
   },
-  buttonContainer: {
+  secondaryButton: {
     flexDirection: "row",
-    justifyContent: "space-between",
-    marginTop: 20,
-    marginBottom: 40,
-    gap: 12,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    backgroundColor: theme.colors.accent.dark,
+    borderRadius: 14,
+    paddingVertical: 14,
+    borderWidth: 1,
+    borderColor: "rgba(74, 222, 158, 0.15)",
+  },
+  secondaryButtonText: {
+    color: theme.colors.accent.primary,
+    fontSize: 15,
+    fontWeight: "600",
+  },
+  datePickerModalRoot: {
+    flex: 1,
+    justifyContent: "flex-end",
+  },
+  datePickerBackdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.55)",
+  },
+  datePickerSheet: {
+    backgroundColor: "#1A1C1E",
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    borderWidth: 1,
+    borderBottomWidth: 0,
+    borderColor: "rgba(255, 255, 255, 0.08)",
+    paddingBottom: 24,
+  },
+  datePickerHandle: {
+    alignSelf: "center",
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: "rgba(255, 255, 255, 0.15)",
+    marginTop: 10,
+    marginBottom: 8,
   },
-  loadingIndicator: {
-    marginTop: 8,
+  datePickerHeader: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+  },
+  datePickerDoneText: {
+    color: theme.colors.accent.primary,
+    fontSize: 15,
+    fontWeight: "600",
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
     alignItems: "center",
+    paddingHorizontal: 24,
   },
 });
diff --git a/apps/Mobile/src/screens/CarCardScreen/CarCardScreen.tsx b/apps/Mobile/src/screens/CarCardScreen/CarCardScreen.tsx
index b90b320eb..e378468db 100644
--- a/apps/Mobile/src/screens/CarCardScreen/CarCardScreen.tsx
+++ b/apps/Mobile/src/screens/CarCardScreen/CarCardScreen.tsx
@@ -1,23 +1,29 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import {
   View,
   Text,
   TextInput,
   TouchableOpacity,
   Image,
-  Alert,
   Platform,
   ActivityIndicator,
+  Animated,
+  Easing,
+  Modal,
 } from "react-native";
+import ReanimatedAnimated, { FadeIn } from "react-native-reanimated";
+import { Feather } from "@expo/vector-icons";
 import { FormScreen } from "../../components/FormScreen";
 import DateTimePicker from "@react-native-community/datetimepicker";
 import * as ImagePicker from "expo-image-picker";
 import { useAuth } from "../../context/AuthContext";
 import { useTheme } from "../../hooks/useTheme";
+import { useStatusBar } from "../../hooks/useStatusBar";
 import { globalStyles } from "../../styles/globalStyles";
 import { styles } from "./CarCardScreen.styles";
 import { CarCardScreenProps } from "../../navigation/types";
 import { Select, SelectOption } from "../../components/Select";
+import { useAppAlert } from "../../components/AppAlert";
 import {
   getAllMakes,
   getModelsForMakeId,
@@ -33,6 +39,21 @@ import {
   TransmissionType,
   WheelDriveType,
 } from "../../types/api";
+import {
+  isValidVin,
+  normalizeVinInput,
+  VIN_VALIDATION_MESSAGE,
+} from "../../utils/vinUtils";
+import { parseApiErrorMessage } from "../../utils/apiErrorUtils";
+import {
+  getEnginePowerLabel,
+  getTransmissionOptionsForFuel,
+  isTransmissionAllowedForFuel,
+  normalizeFuelType,
+  normalizeTransmissionType,
+  requiresEngineDisplacement,
+  resolveEngineCapacityCc,
+} from "../../utils/vehicleFormUtils";
 
 const COLOR_OPTIONS: SelectOption[] = [
   { label: "Білий", value: "white" },
@@ -50,15 +71,15 @@ const COLOR_OPTIONS: SelectOption[] = [
 ];
 
 const BODY_CLASS_OPTIONS: SelectOption[] = [
-  { label: "Sedan", value: "Sedan" },
-  { label: "Hatchback", value: "Hatchback" },
-  { label: "Universal", value: "Universal" },
-  { label: "Coupe", value: "Coupe" },
-  { label: "Convertible", value: "Convertible" },
-  { label: "SUV", value: "SUV" },
-  { label: "Crossover", value: "Crossover" },
-  { label: "Minivan", value: "Minivan" },
-  { label: "Pickup", value: "Pickup" },
+  { label: "Седан", value: "Sedan" },
+  { label: "Хетчбек", value: "Hatchback" },
+  { label: "Універсал", value: "Universal" },
+  { label: "Купе", value: "Coupe" },
+  { label: "Кабріолет", value: "Convertible" },
+  { label: "Позашляховик", value: "SUV" },
+  { label: "Кросовер", value: "Crossover" },
+  { label: "Мінівен", value: "Minivan" },
+  { label: "Пікап", value: "Pickup" },
 ];
 
 // Відповідають enum FuelType на бекенді (0–5)
@@ -86,10 +107,22 @@ const WHEEL_DRIVE_API_OPTIONS: SelectOption[] = [
   { label: "4WD", value: WheelDriveType.FourWD },
 ];
 
+const TOTAL_STEPS = 6;
+const STEP_TITLES = [
+  "Базова інформація",
+  "Ідентифікація авто",
+  "Історія використання",
+  "Двигун",
+  "Трансмісія та привід",
+  "Фото та завершення",
+];
+
 export default function CarCardScreen({ navigation }: CarCardScreenProps) {
+  useStatusBar();
   const { getAccessToken } = useAuth();
   const queryClient = useQueryClient();
   const theme = useTheme();
+  const { showAlert, showError, showSuccess } = useAppAlert();
   const [carImage, setCarImage] = useState<string | null>(null);
   const [brand, setBrand] = useState<string | number | undefined>(undefined);
   const [model, setModel] = useState<string | number | undefined>(undefined);
@@ -97,12 +130,17 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
   const [color, setColor] = useState<string | number | undefined>(undefined);
   const [licensePlate, setLicensePlate] = useState("");
   const [vin, setVin] = useState("");
-  const [bodyClass, setBodyClass] = useState<string | number | undefined>(undefined);
+  const [bodyClass, setBodyClass] = useState<string | number | undefined>(
+    undefined
+  );
   const [fuelType, setFuelType] = useState<number | undefined>(undefined);
   const [displacement, setDisplacement] = useState("");
-  const [transmission, setTransmission] = useState<number | undefined>(undefined);
+  const [transmission, setTransmission] = useState<number | undefined>(
+    undefined
+  );
   const [driveType, setDriveType] = useState<number | undefined>(undefined);
-  const [boughtAt, setBoughtAt] = useState<Date | null>(null);
+  const [boughtAt, setBoughtAt] = useState(() => new Date());
+  const [pickerDate, setPickerDate] = useState(() => new Date());
   const [showBoughtAtPicker, setShowBoughtAtPicker] = useState(false);
   const [mileage, setMileage] = useState("");
   const [enginePower, setEnginePower] = useState("");
@@ -114,6 +152,8 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
   const [yearOptions] = useState<SelectOption[]>(generateYearOptions());
   const [isLoadingBrands, setIsLoadingBrands] = useState(false);
   const [isLoadingModels, setIsLoadingModels] = useState(false);
+  const [currentStep, setCurrentStep] = useState(0);
+  const stepAnimation = useRef(new Animated.Value(1)).current;
 
   // Завантаження марок при монтуванні компонента
   useEffect(() => {
@@ -128,17 +168,14 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
         setBrandOptions(options);
       } catch (error) {
         console.error("Error loading brands:", error);
-        Alert.alert(
-          "Помилка",
-          "Не вдалося завантажити список марок. Спробуйте пізніше."
-        );
+        showError("Не вдалося завантажити список марок. Спробуйте пізніше.");
       } finally {
         setIsLoadingBrands(false);
       }
     };
 
     loadBrands();
-  }, []);
+  }, [showError]);
 
   // Завантаження моделей при зміні марки
   useEffect(() => {
@@ -146,10 +183,10 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
       if (!brand || typeof brand !== "number") {
         setModelOptions([]);
         setModel(undefined);
-      return;
-    }
+        return;
+      }
 
-    try {
+      try {
         setIsLoadingModels(true);
         const models = await getModelsForMakeId(brand);
         const options: SelectOption[] = models.map((model) => ({
@@ -161,10 +198,7 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
         setModel(undefined);
       } catch (error) {
         console.error("Error loading models:", error);
-        Alert.alert(
-          "Помилка",
-          "Не вдалося завантажити список моделей. Спробуйте пізніше."
-        );
+        showError("Не вдалося завантажити список моделей. Спробуйте пізніше.");
         setModelOptions([]);
       } finally {
         setIsLoadingModels(false);
@@ -172,7 +206,17 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
     };
 
     loadModels();
-  }, [brand]);
+  }, [brand, showError]);
+
+  useEffect(() => {
+    if (!requiresEngineDisplacement(fuelType)) {
+      setDisplacement("");
+    }
+
+    if (!isTransmissionAllowedForFuel(fuelType, transmission)) {
+      setTransmission(undefined);
+    }
+  }, [fuelType, transmission]);
 
   // const handleVinDecodeSuccess = async (data: {
   //   brand: string;
@@ -252,12 +296,26 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
   //   }
   // };
 
+  const openBoughtAtPicker = () => {
+    setPickerDate(boughtAt);
+    setShowBoughtAtPicker(true);
+  };
+
+  const closeBoughtAtPicker = () => {
+    setShowBoughtAtPicker(false);
+  };
+
+  const confirmBoughtAtPicker = () => {
+    setBoughtAt(pickerDate);
+    setShowBoughtAtPicker(false);
+  };
+
   const pickImage = async () => {
     const permissionResult =
       await ImagePicker.requestMediaLibraryPermissionsAsync();
 
     if (permissionResult.granted === false) {
-      Alert.alert("Дозвіл потрібен", "Потрібен дозвіл для доступу до галереї!");
+      showError("Потрібен дозвіл для доступу до галереї!", "Дозвіл потрібен");
       return;
     }
 
@@ -283,14 +341,13 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
       vin.trim() ||
       carImage ||
       mileage.trim() !== "" ||
-      enginePower.trim() !== "" ||
-      boughtAt !== null;
+      enginePower.trim() !== "";
 
     if (hasData) {
-      Alert.alert(
-        "Скасувати створення?",
-        "Ви вже ввели деякі дані. Ви впевнені, що хочете скасувати?",
-        [
+      showAlert({
+        title: "Скасувати створення?",
+        message: "Ви вже ввели деякі дані. Ви впевнені, що хочете скасувати?",
+        buttons: [
           {
             text: "Продовжити редагування",
             style: "cancel",
@@ -300,8 +357,8 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
             style: "destructive",
             onPress: () => navigation.navigate("Home"),
           },
-        ]
-      );
+        ],
+      });
     } else {
       navigation.navigate("Home");
     }
@@ -309,71 +366,74 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
 
   const handleSave = async () => {
     if (!brand) {
-      Alert.alert("Помилка", "Будь ласка, вибери марку автомобіля");
+      showError("Будь ласка, вибери марку автомобіля");
       return;
     }
     if (!model) {
-      Alert.alert("Помилка", "Будь ласка, вибери модель автомобіля");
+      showError("Будь ласка, вибери модель автомобіля");
       return;
     }
     if (!year) {
-      Alert.alert("Помилка", "Будь ласка, вибери рік випуску");
+      showError("Будь ласка, вибери рік випуску");
       return;
     }
     if (!color) {
-      Alert.alert("Помилка", "Будь ласка, вибери колір автомобіля");
+      showError("Будь ласка, вибери колір автомобіля");
       return;
     }
     if (!licensePlate.trim()) {
-      Alert.alert("Помилка", "Будь ласка, введи номерний знак");
+      showError("Будь ласка, введи номерний знак");
       return;
     }
     if (vin.trim().length !== 0 && vin.trim().length !== 17) {
-      Alert.alert("Помилка", "VIN має містити рівно 17 символів");
+      showError("VIN має містити рівно 17 символів");
       return;
     }
     if (!vin.trim()) {
-      Alert.alert("Помилка", "Будь ласка, введи VIN номер (17 символів)");
+      showError("Будь ласка, введи VIN номер (17 символів)");
+      return;
+    }
+    if (!isValidVin(vin)) {
+      showError(VIN_VALIDATION_MESSAGE);
       return;
     }
     if (fuelType === undefined) {
-      Alert.alert("Помилка", "Будь ласка, вибери тип палива");
+      showError("Будь ласка, вибери тип палива");
       return;
     }
     if (transmission === undefined) {
-      Alert.alert("Помилка", "Будь ласка, вибери коробку передач");
+      showError("Будь ласка, вибери коробку передач");
       return;
     }
-    if (driveType === undefined) {
-      Alert.alert("Помилка", "Будь ласка, вибери тип приводу");
+    if (!isTransmissionAllowedForFuel(fuelType, transmission)) {
+      showError("Для електрокарів доступні лише автомат або CVT");
       return;
     }
-    const displacementNum = displacement.trim() ? parseFloat(displacement.replace(",", ".")) : 0;
-    if (!displacement.trim() || isNaN(displacementNum) || displacementNum <= 0) {
-      Alert.alert("Помилка", "Введіть об'єм двигуна в літрах (наприклад 2.0)");
+    if (driveType === undefined) {
+      showError("Будь ласка, вибери тип приводу");
       return;
     }
-    const engineCapacityCc = Math.round(displacementNum * 1000);
-    if (engineCapacityCc <= 0 || engineCapacityCc > 10000) {
-      Alert.alert("Помилка", "Об'єм двигуна має бути від 0.001 до 10 л");
+    const engineCapacityCc = resolveEngineCapacityCc(fuelType, displacement);
+    if (requiresEngineDisplacement(fuelType) && engineCapacityCc === null) {
+      showError("Введіть об'єм двигуна в літрах (наприклад 2.0)");
       return;
     }
     const mileageNum = parseInt(mileage.trim(), 10);
     if (mileage.trim() === "" || isNaN(mileageNum) || mileageNum < 0) {
-      Alert.alert("Помилка", "Введіть пробіг (км)");
+      showError("Введіть пробіг (км)");
       return;
     }
     if (mileageNum > 1000000) {
-      Alert.alert("Помилка", "Пробіг не може перевищувати 1 000 000 км");
+      showError("Пробіг не може перевищувати 1 000 000 км");
       return;
     }
     const enginePowerNum = parseInt(enginePower.trim(), 10);
     if (!enginePower.trim() || isNaN(enginePowerNum) || enginePowerNum <= 0) {
-      Alert.alert("Помилка", "Введіть потужність двигуна (к.с.)");
+      showError("Введіть потужність двигуна (к.с.)");
       return;
     }
     if (enginePowerNum > 1000) {
-      Alert.alert("Помилка", "Потужність не може перевищувати 1000 к.с.");
+      showError("Потужність не може перевищувати 1000 к.с.");
       return;
     }
 
@@ -384,26 +444,30 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
         brandOptions.find((opt) => opt.value === brand)?.label || String(brand);
       const modelLabel =
         modelOptions.find((opt) => opt.value === model)?.label || String(model);
-      const yearNum = typeof year === "number" ? year : parseInt(String(year), 10);
+      const yearNum =
+        typeof year === "number" ? year : parseInt(String(year), 10);
       const colorLabel =
         COLOR_OPTIONS.find((opt) => opt.value === color)?.label ||
         String(color);
 
       const dto: CreateVehicleDto = {
         licensePlate: licensePlate.trim(),
-        vin: vin.trim(),
+        vin: vin.trim().toUpperCase(),
         brand: brandLabel,
         model: modelLabel,
         year: yearNum,
-        boughtAt: boughtAt ? boughtAt.toISOString() : null,
+        boughtAt: boughtAt.toISOString(),
         wheelDriveType: driveType as WheelDriveType,
-        engineCapacity: engineCapacityCc,
+        engineCapacity: engineCapacityCc ?? 0,
         fuelType: fuelType as FuelType,
         enginePower: enginePowerNum,
         color: colorLabel,
         transmissionType: transmission as TransmissionType,
         mileage: mileageNum,
-        photoUrl: carImage && (carImage.startsWith("http") ? carImage : null) ? carImage : null,
+        photoUrl:
+          carImage && (carImage.startsWith("http") ? carImage : null)
+            ? carImage
+            : null,
       };
 
       const apiClient = createApiClient(getAccessToken);
@@ -411,7 +475,7 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
 
       queryClient.invalidateQueries({ queryKey: queryKeys.vehicles });
 
-      Alert.alert("Успішно!", "Автомобіль додано в базу", [
+      showSuccess("Автомобіль додано в базу", "Успішно!", [
         {
           text: "OK",
           onPress: () => navigation.navigate("Home"),
@@ -419,20 +483,152 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
       ]);
     } catch (error) {
       console.error("Error saving vehicle:", error);
-      const message = error instanceof Error ? error.message : "Не вдалося зберегти дані";
-      Alert.alert("Помилка", message);
+      showError(parseApiErrorMessage(error));
     } finally {
       setIsLoading(false);
     }
   };
 
+  const validateStep = (step: number): boolean => {
+    if (step === 0) {
+      if (!brand) {
+        showError("Будь ласка, вибери марку автомобіля");
+        return false;
+      }
+      if (!model) {
+        showError("Будь ласка, вибери модель автомобіля");
+        return false;
+      }
+      if (!year) {
+        showError("Будь ласка, вибери рік випуску");
+        return false;
+      }
+      return true;
+    }
+
+    if (step === 1) {
+      if (!color) {
+        showError("Будь ласка, вибери колір автомобіля");
+        return false;
+      }
+      if (!licensePlate.trim()) {
+        showError("Будь ласка, введи номерний знак");
+        return false;
+      }
+      if (vin.trim().length !== 0 && vin.trim().length !== 17) {
+        showError("VIN має містити рівно 17 символів");
+        return false;
+      }
+      if (!vin.trim()) {
+        showError("Будь ласка, введи VIN номер (17 символів)");
+        return false;
+      }
+      if (!isValidVin(vin)) {
+        showError(VIN_VALIDATION_MESSAGE);
+        return false;
+      }
+      return true;
+    }
+
+    if (step === 2) {
+      if (
+        mileage.trim() === "" ||
+        isNaN(parseInt(mileage.trim(), 10)) ||
+        parseInt(mileage.trim(), 10) < 0
+      ) {
+        showError("Введіть пробіг (км)");
+        return false;
+      }
+      if (parseInt(mileage.trim(), 10) > 1000000) {
+        showError("Пробіг не може перевищувати 1 000 000 км");
+        return false;
+      }
+      return true;
+    }
+
+    if (step === 3) {
+      if (fuelType === undefined) {
+        showError("Будь ласка, вибери тип палива");
+        return false;
+      }
+      if (requiresEngineDisplacement(fuelType)) {
+        const engineCapacityCc = resolveEngineCapacityCc(fuelType, displacement);
+        if (engineCapacityCc === null) {
+          showError("Введіть об'єм двигуна в літрах (наприклад 2.0)");
+          return false;
+        }
+      }
+      const enginePowerNum = parseInt(enginePower.trim(), 10);
+      if (!enginePower.trim() || isNaN(enginePowerNum) || enginePowerNum <= 0) {
+        showError("Введіть потужність двигуна (к.с.)");
+        return false;
+      }
+      if (enginePowerNum > 1000) {
+        showError("Потужність не може перевищувати 1000 к.с.");
+        return false;
+      }
+      return true;
+    }
+
+    if (step === 4) {
+      if (transmission === undefined) {
+        showError("Будь ласка, вибери коробку передач");
+        return false;
+      }
+      if (!isTransmissionAllowedForFuel(fuelType, transmission)) {
+        showError("Для електрокарів доступні лише автомат або CVT");
+        return false;
+      }
+      if (driveType === undefined) {
+        showError("Будь ласка, вибери тип приводу");
+        return false;
+      }
+      return true;
+    }
+
+    return true;
+  };
+
+  const animateStepTransition = (nextStep: number) => {
+    Animated.sequence([
+      Animated.timing(stepAnimation, {
+        toValue: 0,
+        duration: 140,
+        easing: Easing.out(Easing.quad),
+        useNativeDriver: true,
+      }),
+      Animated.timing(stepAnimation, {
+        toValue: 1,
+        duration: 220,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true,
+      }),
+    ]).start();
+    setCurrentStep(nextStep);
+  };
+
+  const handleNextStep = () => {
+    if (!validateStep(currentStep)) {
+      return;
+    }
+    if (currentStep < TOTAL_STEPS - 1) {
+      animateStepTransition(currentStep + 1);
+    }
+  };
+
+  const handlePreviousStep = () => {
+    if (currentStep > 0) {
+      animateStepTransition(currentStep - 1);
+    }
+  };
+
   if (isLoading) {
     return (
       <View
         style={[
           globalStyles.container,
           globalStyles.pageBackground,
-          globalStyles.loadingContainer,
+          styles.loadingContainer,
         ]}
       >
         <ActivityIndicator size="large" color={theme.colors.accent.primary} />
@@ -444,268 +640,394 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
   return (
     <FormScreen
       style={[globalStyles.container, globalStyles.pageBackground]}
-      contentContainerStyle={styles.scrollContainer}
+      contentContainerStyle={styles.contentContainer}
     >
-        <View style={styles.header}>
-          <Text style={[globalStyles.textLarge, styles.title]}>
-            Додай свій автомобіль
-          </Text>
-          <Text style={[globalStyles.textSecondary, styles.subtitle]}>
-            Створи картку твого авто
-          </Text>
-        </View>
-
-        <View style={styles.form}>
-          {/* VIN Decode Field */}
-          {/* <VinDecoder onDecodeSuccess={handleVinDecodeSuccess} /> */}
-
-          {/* Car Image */}
-          <View style={styles.imageSection}>
-            <TouchableOpacity style={styles.imageContainer} onPress={pickImage}>
-              {carImage ? (
-                <Image source={{ uri: carImage }} style={styles.carImage} />
-              ) : (
-                <View style={styles.placeholderImage}>
-                  <Text style={styles.placeholderText}>🚗</Text>
-                  <Text style={styles.placeholderLabel}>Фото авто</Text>
-                </View>
-              )}
-            </TouchableOpacity>
-          </View>
+      <ReanimatedAnimated.View entering={FadeIn.duration(280)}>
+        <Text style={styles.pageTitle}>Додай свій автомобіль</Text>
+        <Text style={styles.pageSubtitle}>Створи картку твого авто</Text>
+      </ReanimatedAnimated.View>
 
-          {/* Brand Field */}
-          <View style={styles.inputContainer}>
-            <Select
-              label="Марка *"
-              options={brandOptions}
-              value={brand}
-              onValueChange={setBrand}
-              placeholder={
-                isLoadingBrands
-                  ? "Завантаження марок..."
-                  : "Виберіть марку автомобіля"
-              }
+      <View style={styles.stepHeader}>
+        <Text style={styles.stepCounter}>
+          Крок {currentStep + 1} з {TOTAL_STEPS}
+        </Text>
+        <Text style={styles.stepTitle}>{STEP_TITLES[currentStep]}</Text>
+        <View style={styles.stepProgress}>
+          {Array.from({ length: TOTAL_STEPS }).map((_, index) => (
+            <View
+              key={index}
+              style={[
+                styles.stepDot,
+                index < currentStep && styles.stepDotCompleted,
+                index === currentStep && styles.stepDotActive,
+              ]}
             />
-            {isLoadingBrands && (
-              <View style={styles.loadingIndicator}>
-                <ActivityIndicator
-                  size="small"
-                  color={theme.colors.accent.primary}
+          ))}
+        </View>
+      </View>
+
+      <Animated.View
+        style={{
+          opacity: stepAnimation,
+          transform: [
+            {
+              translateY: stepAnimation.interpolate({
+                inputRange: [0, 1],
+                outputRange: [14, 0],
+              }),
+            },
+          ],
+        }}
+      >
+        <View style={styles.section}>
+          {currentStep === 0 && (
+            <>
+              <View style={styles.field}>
+                <Text style={styles.label}>Марка *</Text>
+                <Select
+                  options={brandOptions}
+                  value={brand}
+                  onValueChange={setBrand}
+                  placeholder={
+                    isLoadingBrands
+                      ? "Завантаження марок..."
+                      : "Виберіть марку автомобіля"
+                  }
+                  containerStyle={styles.selectContainer}
                 />
+                {isLoadingBrands ? (
+                  <View style={styles.loadingIndicator}>
+                    <ActivityIndicator
+                      size="small"
+                      color={theme.colors.accent.primary}
+                    />
+                  </View>
+                ) : null}
               </View>
-            )}
-          </View>
 
-          {/* Model Field */}
-          <View style={styles.inputContainer}>
-            <Select
-              label="Модель *"
-              options={modelOptions}
-              value={model}
-              onValueChange={setModel}
-              placeholder={
-                !brand
-                  ? "Спочатку виберіть марку"
-                  : isLoadingModels
-                    ? "Завантаження моделей..."
-                    : "Виберіть модель автомобіля"
-              }
-              disabled={!brand || isLoadingModels}
-            />
-            {isLoadingModels && (
-              <View style={styles.loadingIndicator}>
-                <ActivityIndicator
-                  size="small"
-                  color={theme.colors.accent.primary}
+              <View style={styles.field}>
+                <Text style={styles.label}>Модель *</Text>
+                <Select
+                  options={modelOptions}
+                  value={model}
+                  onValueChange={setModel}
+                  placeholder={
+                    !brand
+                      ? "Спочатку виберіть марку"
+                      : isLoadingModels
+                        ? "Завантаження моделей..."
+                        : "Виберіть модель автомобіля"
+                  }
+                  disabled={!brand || isLoadingModels}
+                  containerStyle={styles.selectContainer}
                 />
+                {isLoadingModels ? (
+                  <View style={styles.loadingIndicator}>
+                    <ActivityIndicator
+                      size="small"
+                      color={theme.colors.accent.primary}
+                    />
+                  </View>
+                ) : null}
               </View>
-            )}
-          </View>
 
-          {/* Year Field */}
-          <Select
-            label="Рік випуску *"
-            options={yearOptions}
-              value={year}
-            onValueChange={setYear}
-            placeholder="Виберіть рік випуску"
-          />
+              <View style={styles.field}>
+                <Text style={styles.label}>Рік випуску *</Text>
+                <Select
+                  options={yearOptions}
+                  value={year}
+                  onValueChange={setYear}
+                  placeholder="Виберіть рік випуску"
+                  containerStyle={styles.selectContainer}
+                />
+              </View>
+            </>
+          )}
 
-          {/* Color Field */}
-          <Select
-            label="Колір *"
-            options={COLOR_OPTIONS}
-              value={color}
-            onValueChange={setColor}
-            placeholder="Виберіть колір автомобіля"
-            />
+          {currentStep === 1 && (
+            <>
+              <View style={styles.field}>
+                <Text style={styles.label}>Колір *</Text>
+                <Select
+                  options={COLOR_OPTIONS}
+                  value={color}
+                  onValueChange={setColor}
+                  placeholder="Виберіть колір автомобіля"
+                  containerStyle={styles.selectContainer}
+                />
+              </View>
 
-          {/* License Plate Field */}
-          <View style={styles.inputContainer}>
-            <Text style={[globalStyles.textPrimary, styles.label]}>
-              Номерний знак *
-            </Text>
-            <TextInput
-              style={[globalStyles.input, styles.input]}
-              value={licensePlate}
-              onChangeText={setLicensePlate}
-              placeholder="Наприклад: АА1234ВВ"
-              placeholderTextColor={theme.colors.special.placeholder}
-              autoCapitalize="characters"
-            />
-          </View>
+              <View style={styles.field}>
+                <Text style={styles.label}>Номерний знак *</Text>
+                <TextInput
+                  style={styles.input}
+                  value={licensePlate}
+                  onChangeText={setLicensePlate}
+                  placeholder="Наприклад: АА1234ВВ"
+                  placeholderTextColor="#8E8E93"
+                  autoCapitalize="characters"
+                />
+              </View>
 
-          {/* VIN Field */}
-          <View style={styles.inputContainer}>
-            <Text style={[globalStyles.textPrimary, styles.label]}>
-              VIN номер *
-            </Text>
-            <TextInput
-              style={[globalStyles.input, styles.input]}
-              value={vin}
-              onChangeText={setVin}
-              placeholder="17 символів (обов'язково)"
-              placeholderTextColor={theme.colors.special.placeholder}
-              autoCapitalize="characters"
-              maxLength={17}
-            />
-          </View>
+              <View style={styles.field}>
+                <Text style={styles.label}>VIN номер *</Text>
+                <TextInput
+                  style={styles.input}
+                  value={vin}
+                  onChangeText={(text) => setVin(normalizeVinInput(text))}
+                  placeholder="17 символів (латиниця, без I, O, Q)"
+                  placeholderTextColor="#8E8E93"
+                  autoCapitalize="characters"
+                  maxLength={17}
+                />
+              </View>
+            </>
+          )}
 
-          {/* Date bought */}
-          <View style={styles.inputContainer}>
-            <Text style={[globalStyles.textPrimary, styles.label]}>
-              Дата купівлі
-            </Text>
-            <TouchableOpacity
-              style={[globalStyles.input, styles.input]}
-              onPress={() => setShowBoughtAtPicker(true)}
-            >
-              <Text
-                style={
-                  boughtAt
-                    ? [globalStyles.textPrimary, { paddingVertical: 12 }]
-                    : [
-                        { color: theme.colors.special.placeholder, paddingVertical: 12 },
-                      ]
-                }
-              >
-                {boughtAt
-                  ? boughtAt.toLocaleDateString("uk-UA")
-                  : "Оберіть дату (необов'язково)"}
-              </Text>
-            </TouchableOpacity>
-            {showBoughtAtPicker && (
-              <DateTimePicker
-                value={boughtAt ?? new Date()}
-                mode="date"
-                display={Platform.OS === "ios" ? "spinner" : "default"}
-                maximumDate={new Date()}
-                onChange={(_, date) => {
-                  setShowBoughtAtPicker(Platform.OS === "ios");
-                  if (date) setBoughtAt(date);
-                }}
-              />
-            )}
-          </View>
+          {currentStep === 2 && (
+            <>
+              <View style={styles.field}>
+                <Text style={styles.label}>Дата купівлі</Text>
+                <TouchableOpacity
+                  style={[styles.input, styles.dateInput]}
+                  onPress={openBoughtAtPicker}
+                  activeOpacity={0.8}
+                >
+                  <Text style={styles.dateInputText}>
+                    {boughtAt.toLocaleDateString("uk-UA")}
+                  </Text>
+                </TouchableOpacity>
+              </View>
 
-          {/* Mileage */}
-          <View style={styles.inputContainer}>
-            <Text style={[globalStyles.textPrimary, styles.label]}>
-              Пробіг (км) *
-            </Text>
-            <TextInput
-              style={[globalStyles.input, styles.input]}
-              value={mileage}
-              onChangeText={setMileage}
-              placeholder="Наприклад: 50000"
-              placeholderTextColor={theme.colors.special.placeholder}
-              keyboardType="number-pad"
-            />
-          </View>
+              <View style={styles.field}>
+                <Text style={styles.label}>Пробіг (км) *</Text>
+                <TextInput
+                  style={styles.input}
+                  value={mileage}
+                  onChangeText={setMileage}
+                  placeholder="Наприклад: 50000"
+                  placeholderTextColor="#8E8E93"
+                  keyboardType="number-pad"
+                />
+              </View>
+            </>
+          )}
 
-          {/* Engine power */}
-          <View style={styles.inputContainer}>
-            <Text style={[globalStyles.textPrimary, styles.label]}>
-              Потужність двигуна (к.с.) *
-            </Text>
-            <TextInput
-              style={[globalStyles.input, styles.input]}
-              value={enginePower}
-              onChangeText={setEnginePower}
-              placeholder="Наприклад: 150"
-              placeholderTextColor={theme.colors.special.placeholder}
-              keyboardType="number-pad"
-            />
-          </View>
+          {currentStep === 3 && (
+            <>
+              <View style={styles.field}>
+                <Text style={styles.label}>Тип палива *</Text>
+                <Select
+                  options={FUEL_TYPE_OPTIONS}
+                  value={fuelType}
+                  onValueChange={(value) =>
+                    setFuelType(normalizeFuelType(value))
+                  }
+                  placeholder="Виберіть тип палива"
+                  containerStyle={styles.selectContainer}
+                />
+              </View>
 
-          {/* Body Class Field */}
-          <Select
-            label="Тип кузова"
-            options={BODY_CLASS_OPTIONS}
-            value={bodyClass}
-            onValueChange={setBodyClass}
-            placeholder="Виберіть тип кузова"
-          />
+              <View style={styles.field}>
+                <Text style={styles.label}>{getEnginePowerLabel(fuelType)}</Text>
+                <TextInput
+                  style={styles.input}
+                  value={enginePower}
+                  onChangeText={setEnginePower}
+                  placeholder="Наприклад: 150"
+                  placeholderTextColor="#8E8E93"
+                  keyboardType="number-pad"
+                />
+              </View>
 
-          {/* Fuel Type Field */}
-          <Select
-            label="Тип палива *"
-            options={FUEL_TYPE_OPTIONS}
-            value={fuelType}
-            onValueChange={(v) => setFuelType(v as number)}
-            placeholder="Виберіть тип палива"
-          />
+              {requiresEngineDisplacement(fuelType) ? (
+                <View style={styles.field}>
+                  <Text style={styles.label}>Об&apos;єм двигуна (л) *</Text>
+                  <TextInput
+                    style={styles.input}
+                    value={displacement}
+                    onChangeText={setDisplacement}
+                    placeholder="Наприклад: 2.0, 3.5"
+                    placeholderTextColor="#8E8E93"
+                    keyboardType="decimal-pad"
+                  />
+                </View>
+              ) : null}
 
-          {/* Displacement Field */}
-          <View style={styles.inputContainer}>
-            <Text style={[globalStyles.textPrimary, styles.label]}>
-              Об&apos;єм двигуна (л) *
-            </Text>
-            <TextInput
-              style={[globalStyles.input, styles.input]}
-              value={displacement}
-              onChangeText={setDisplacement}
-              placeholder="Наприклад: 2.0, 3.5"
-              placeholderTextColor={theme.colors.special.placeholder}
-              keyboardType="decimal-pad"
-            />
-          </View>
+              <View style={styles.field}>
+                <Text style={styles.label}>Тип кузова</Text>
+                <Select
+                  options={BODY_CLASS_OPTIONS}
+                  value={bodyClass}
+                  onValueChange={setBodyClass}
+                  placeholder="Виберіть тип кузова"
+                  containerStyle={styles.selectContainer}
+                />
+              </View>
+            </>
+          )}
 
-          {/* Transmission Field */}
-          <Select
-            label="Коробка передач *"
-            options={TRANSMISSION_API_OPTIONS}
-            value={transmission}
-            onValueChange={(v) => setTransmission(v as number)}
-            placeholder="Виберіть коробку передач"
-          />
+          {currentStep === 4 && (
+            <>
+              <View style={styles.field}>
+                <Text style={styles.label}>Коробка передач *</Text>
+                <Select
+                  options={getTransmissionOptionsForFuel(
+                    fuelType,
+                    TRANSMISSION_API_OPTIONS
+                  )}
+                  value={transmission}
+                  onValueChange={(value) =>
+                    setTransmission(normalizeTransmissionType(value))
+                  }
+                  placeholder={
+                    normalizeFuelType(fuelType) === FuelType.Electric
+                      ? "Для електрокарів — автомат або CVT"
+                      : "Виберіть коробку передач"
+                  }
+                  containerStyle={styles.selectContainer}
+                />
+              </View>
 
-          {/* Drive Type Field */}
-          <Select
-            label="Привід *"
-            options={WHEEL_DRIVE_API_OPTIONS}
-            value={driveType}
-            onValueChange={(v) => setDriveType(v as number)}
-            placeholder="Виберіть тип приводу"
-          />
+              <View style={styles.field}>
+                <Text style={styles.label}>Привід *</Text>
+                <Select
+                  options={WHEEL_DRIVE_API_OPTIONS}
+                  value={driveType}
+                  onValueChange={(v) => setDriveType(v as number)}
+                  placeholder="Виберіть тип приводу"
+                  containerStyle={styles.selectContainer}
+                />
+              </View>
+            </>
+          )}
 
-          {/* Action Buttons */}
-          <View style={styles.buttonContainer}>
+          {currentStep === 5 && (
             <TouchableOpacity
-              style={globalStyles.buttonSecondary}
-              onPress={handleCancel}
+              style={styles.photoCard}
+              onPress={pickImage}
+              activeOpacity={0.9}
             >
-              <Text style={globalStyles.buttonSecondaryText}>Скасувати</Text>
+              {carImage ? (
+                <Image source={{ uri: carImage }} style={styles.photoImage} />
+              ) : (
+                <View style={styles.photoPlaceholder}>
+                  <Feather
+                    name="image"
+                    size={32}
+                    color={theme.colors.accent.primary}
+                  />
+                  <Text style={styles.photoPlaceholderText}>
+                    Додати фото автомобіля
+                  </Text>
+                </View>
+              )}
+              <View style={styles.photoOverlay}>
+                <Feather name="camera" size={16} color="#FFFFFF" />
+                <Text style={styles.photoOverlayText}>
+                  {carImage ? "Змінити фото" : "Обрати фото"}
+                </Text>
+              </View>
             </TouchableOpacity>
+          )}
+        </View>
+      </Animated.View>
 
+      <View style={styles.actionsRow}>
+        <TouchableOpacity
+          style={[styles.secondaryButton, styles.halfButton]}
+          onPress={currentStep === 0 ? handleCancel : handlePreviousStep}
+          activeOpacity={0.85}
+        >
+          <Feather
+            name={currentStep === 0 ? "x" : "arrow-left"}
+            size={18}
+            color={theme.colors.accent.primary}
+          />
+          <Text style={styles.secondaryButtonText}>
+            {currentStep === 0 ? "Скасувати" : "Назад"}
+          </Text>
+        </TouchableOpacity>
+
+        {currentStep < TOTAL_STEPS - 1 ? (
+          <TouchableOpacity
+            style={[styles.primaryButton, styles.halfButton]}
+            onPress={handleNextStep}
+            activeOpacity={0.85}
+          >
+            <Text style={styles.primaryButtonText}>Далі</Text>
+            <Feather
+              name="arrow-right"
+              size={18}
+              color={theme.colors.text.inverse}
+            />
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity
+            style={[styles.primaryButton, styles.halfButton]}
+            onPress={handleSave}
+            activeOpacity={0.85}
+          >
+            <Feather
+              name="check"
+              size={18}
+              color={theme.colors.text.inverse}
+            />
+            <Text style={styles.primaryButtonText}>Зберегти</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+
+      {Platform.OS === "ios" ? (
+        <Modal
+          visible={showBoughtAtPicker}
+          transparent
+          animationType="slide"
+          onRequestClose={closeBoughtAtPicker}
+        >
+          <View style={styles.datePickerModalRoot}>
             <TouchableOpacity
-              style={globalStyles.buttonPrimary}
-              onPress={handleSave}
-            >
-              <Text style={globalStyles.buttonPrimaryText}>Зберегти</Text>
-            </TouchableOpacity>
+              style={styles.datePickerBackdrop}
+              activeOpacity={1}
+              onPress={closeBoughtAtPicker}
+            />
+            <View style={styles.datePickerSheet}>
+              <View style={styles.datePickerHandle} />
+              <View style={styles.datePickerHeader}>
+                <TouchableOpacity onPress={confirmBoughtAtPicker}>
+                  <Text style={styles.datePickerDoneText}>Готово</Text>
+                </TouchableOpacity>
+              </View>
+              <DateTimePicker
+                value={pickerDate}
+                mode="date"
+                display="spinner"
+                maximumDate={new Date()}
+                themeVariant="dark"
+                textColor={theme.colors.text.primary}
+                onChange={(_, date) => {
+                  if (date) setPickerDate(date);
+                }}
+              />
+            </View>
           </View>
-        </View>
+        </Modal>
+      ) : (
+        showBoughtAtPicker && (
+          <DateTimePicker
+            value={pickerDate}
+            mode="date"
+            display="default"
+            maximumDate={new Date()}
+            onChange={(event, date) => {
+              setShowBoughtAtPicker(false);
+              if (event.type === "set" && date) {
+                setBoughtAt(date);
+              }
+            }}
+          />
+        )
+      )}
     </FormScreen>
   );
 }
diff --git a/apps/Mobile/src/screens/CarEditScreen/CarEditScreen.tsx b/apps/Mobile/src/screens/CarEditScreen/CarEditScreen.tsx
index 9d16e9a29..292ff7f25 100644
--- a/apps/Mobile/src/screens/CarEditScreen/CarEditScreen.tsx
+++ b/apps/Mobile/src/screens/CarEditScreen/CarEditScreen.tsx
@@ -5,7 +5,6 @@ import {
   TextInput,
   TouchableOpacity,
   Image,
-  Alert,
   Platform,
   ActivityIndicator,
 } from "react-native";
@@ -22,6 +21,7 @@ import { CarEditScreenProps } from "../../navigation/types";
 import { Select, SelectOption } from "../../components/Select";
 import { useVehicle, useUpdateVehicle, useDeleteVehicle } from "../../queries";
 import { formatVinShort } from "../HomeScreen/homeScreenUtils";
+import { useAppAlert } from "../../components/AppAlert";
 
 const COLOR_OPTIONS: SelectOption[] = [
   { label: "Білий", value: "white" },
@@ -44,6 +44,7 @@ export default function CarEditScreen({
 }: CarEditScreenProps) {
   useStatusBar();
   const theme = useTheme();
+  const { showAlert, showError, showSuccess } = useAppAlert();
   const { carId } = route.params;
   const {
     data: vehicle,
@@ -75,7 +76,7 @@ export default function CarEditScreen({
     const permissionResult =
       await ImagePicker.requestMediaLibraryPermissionsAsync();
     if (permissionResult.granted === false) {
-      Alert.alert("Дозвіл потрібен", "Потрібен дозвіл для доступу до галереї!");
+      showError("Потрібен дозвіл для доступу до галереї!", "Дозвіл потрібен");
       return;
     }
     const result = await ImagePicker.launchImageLibraryAsync({
@@ -114,18 +115,18 @@ export default function CarEditScreen({
 
   const handleCancel = () => {
     if (hasChanges()) {
-      Alert.alert(
-        "Скасувати зміни?",
-        "Ви внесли зміни. Ви впевнені, що хочете скасувати?",
-        [
+      showAlert({
+        title: "Скасувати зміни?",
+        message: "Ви внесли зміни. Ви впевнені, що хочете скасувати?",
+        buttons: [
           { text: "Продовжити редагування", style: "cancel" },
           {
             text: "Скасувати",
             style: "destructive",
             onPress: () => navigation.goBack(),
           },
-        ]
-      );
+        ],
+      });
     } else {
       navigation.goBack();
     }
@@ -133,16 +134,16 @@ export default function CarEditScreen({
 
   const handleSave = async () => {
     if (!licensePlate.trim()) {
-      Alert.alert("Помилка", "Введіть номерний знак");
+      showError("Введіть номерний знак");
       return;
     }
     const mileageNum = parseInt(mileage.trim(), 10);
     if (mileage.trim() === "" || isNaN(mileageNum) || mileageNum < 0) {
-      Alert.alert("Помилка", "Введіть коректний пробіг (км)");
+      showError("Введіть коректний пробіг (км)");
       return;
     }
     if (mileageNum > 1000000) {
-      Alert.alert("Помилка", "Пробіг не може перевищувати 1 000 000 км");
+      showError("Пробіг не може перевищувати 1 000 000 км");
       return;
     }
 
@@ -160,22 +161,22 @@ export default function CarEditScreen({
 
     try {
       await updateVehicle.mutateAsync({ vehicleId: carId, data: dto });
-      Alert.alert("Успішно!", "Дані автомобіля оновлені", [
+      showSuccess("Дані автомобіля оновлені", "Успішно!", [
         { text: "OK", onPress: () => navigation.goBack() },
       ]);
     } catch (e) {
-      Alert.alert(
-        "Помилка",
+      showError(
         e instanceof Error ? e.message : "Не вдалося зберегти зміни"
       );
     }
   };
 
   const handleDelete = () => {
-    Alert.alert(
-      "Видалити автомобіль?",
-      "Ви впевнені, що хочете видалити цей автомобіль? Цю дію неможливо скасувати.",
-      [
+    showAlert({
+      title: "Видалити автомобіль?",
+      message:
+        "Ви впевнені, що хочете видалити цей автомобіль? Цю дію неможливо скасувати.",
+      buttons: [
         { text: "Скасувати", style: "cancel" },
         {
           text: "Видалити",
@@ -185,15 +186,14 @@ export default function CarEditScreen({
               await deleteVehicle.mutateAsync(carId);
               navigation.navigate("Home");
             } catch (e) {
-              Alert.alert(
-                "Помилка",
+              showError(
                 e instanceof Error ? e.message : "Не вдалося видалити"
               );
             }
           },
         },
-      ]
-    );
+      ],
+    });
   };
 
   if (isLoadingVehicle || !vehicle) {
@@ -377,10 +377,7 @@ export default function CarEditScreen({
       <Animated.View entering={FadeIn.duration(300).delay(240)}>
         <View style={styles.actionsSection}>
           <TouchableOpacity
-            style={[
-              styles.saveButton,
-              isSaving && styles.saveButtonDisabled,
-            ]}
+            style={[styles.saveButton, isSaving && styles.saveButtonDisabled]}
             onPress={handleSave}
             disabled={isSaving}
             activeOpacity={0.85}
@@ -397,11 +394,7 @@ export default function CarEditScreen({
             disabled={isSaving}
             activeOpacity={0.85}
           >
-            <Feather
-              name="x"
-              size={18}
-              color={theme.colors.accent.primary}
-            />
+            <Feather name="x" size={18} color={theme.colors.accent.primary} />
             <Text style={styles.cancelButtonText}>Скасувати</Text>
           </TouchableOpacity>
         </View>
diff --git a/apps/Mobile/src/screens/HomeScreen/GarageContent.tsx b/apps/Mobile/src/screens/HomeScreen/GarageContent.tsx
index 07061cc25..25efd5d25 100644
--- a/apps/Mobile/src/screens/HomeScreen/GarageContent.tsx
+++ b/apps/Mobile/src/screens/HomeScreen/GarageContent.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import {
   ActivityIndicator,
-  Alert,
   Image,
   RefreshControl,
   ScrollView,
@@ -34,7 +33,9 @@ import {
   TRANSMISSION_LABELS,
   WHEEL_DRIVE_LABELS,
 } from "./homeScreenUtils";
+import { formatEngineDisplay } from "../../utils/vehicleFormUtils";
 import { styles } from "./GarageContent.styles";
+import { useAppAlert } from "../../components/AppAlert";
 
 const CAR_PLACEHOLDER_SVG = `
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420.849 420.849">
@@ -120,6 +121,7 @@ export function GarageContent({
   contentContainerStyle,
 }: GarageContentProps) {
   const theme = useTheme();
+  const { showAlert } = useAppAlert();
   const insets = useSafeAreaInsets();
   const pickerRef = React.useRef<View>(null);
   const [isPickerOpen, setIsPickerOpen] = React.useState(false);
@@ -138,7 +140,7 @@ export function GarageContent({
 
   const handleCopyVin = () => {
     if (car?.vin) {
-      Alert.alert("VIN-код", car.vin, [{ text: "OK" }]);
+      showAlert({ title: "VIN-код", message: car.vin, buttons: [{ text: "OK" }] });
     }
   };
 
@@ -487,8 +489,11 @@ export function GarageContent({
                         <View style={styles.infoContent}>
                           <Text style={styles.infoLabel}>Двигун</Text>
                           <Text style={styles.infoValue}>
-                            {(car.engineCapacity / 1000).toFixed(1)} л,{" "}
-                            {car.enginePower} к.с.
+                            {formatEngineDisplay(
+                              car.engineCapacity,
+                              car.enginePower,
+                              car.fuelType as FuelType
+                            )}
                           </Text>
                         </View>
                       </View>
diff --git a/apps/Mobile/src/screens/HomeScreen/HomeScreen.tsx b/apps/Mobile/src/screens/HomeScreen/HomeScreen.tsx
index b716e2555..0ec148e63 100644
--- a/apps/Mobile/src/screens/HomeScreen/HomeScreen.tsx
+++ b/apps/Mobile/src/screens/HomeScreen/HomeScreen.tsx
@@ -4,7 +4,6 @@ import {
   View,
   TouchableOpacity,
   ActivityIndicator,
-  Alert,
 } from "react-native";
 import Animated, { FadeIn } from "react-native-reanimated";
 import { SvgXml } from "react-native-svg";
@@ -23,6 +22,7 @@ import { GarageContent } from "./GarageContent";
 import { useTheme } from "../../hooks/useTheme";
 import { NotificationBellButton } from "../../components/NotificationBellButton";
 import { useNotifications } from "../../context/NotificationsContext";
+import { useAppAlert } from "../../components/AppAlert";
 
 const CAR_PLACEHOLDER_SVG = `
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420.849 420.849">
@@ -38,6 +38,7 @@ const CAR_PLACEHOLDER_SVG = `
 export default function HomeScreen({ navigation }: HomeScreenProps) {
   useStatusBar();
   const theme = useTheme();
+  const { showError } = useAppAlert();
   const insets = useSafeAreaInsets();
   const { unreadCount } = useNotifications();
   const [selectedVehicleId, setSelectedVehicleId] = React.useState<
@@ -97,9 +98,9 @@ export default function HomeScreen({ navigation }: HomeScreenProps) {
 
   const openServiceHistory = () => {
     if (!activeVehicleId) {
-      Alert.alert(
-        "Немає автомобіля",
-        "Додайте авто, щоб переглядати історію обслуговування."
+      showError(
+        "Додайте авто, щоб переглядати історію обслуговування.",
+        "Немає автомобіля"
       );
       return;
     }
diff --git a/apps/Mobile/src/screens/LoginScreen/LoginScreen.tsx b/apps/Mobile/src/screens/LoginScreen/LoginScreen.tsx
index 27a7c1118..17598bebc 100644
--- a/apps/Mobile/src/screens/LoginScreen/LoginScreen.tsx
+++ b/apps/Mobile/src/screens/LoginScreen/LoginScreen.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import {
   ActivityIndicator,
-  Alert,
   Image,
   Text,
   View,
@@ -11,9 +10,11 @@ import { useAuth } from "../../context/AuthContext";
 import { useStatusBar } from "../../hooks/useStatusBar";
 import { globalStyles } from "../../styles/globalStyles";
 import { styles } from "./LoginScreen.styles";
+import { useAppAlert } from "../../components/AppAlert";
 
 export default function LoginScreen() {
   const { login } = useAuth();
+  const { showError } = useAppAlert();
   const [loading, setLoading] = useState(false);
   const handleLogin = async () => {
     try {
@@ -23,11 +24,11 @@ export default function LoginScreen() {
       if (error instanceof Error && error.message.includes("cancel")) {
         // user cancelled
       } else {
-        Alert.alert(
-          "Login Failed",
+        showError(
           error instanceof Error
             ? error.message
-            : "Failed to login. Please try again."
+            : "Failed to login. Please try again.",
+          "Login Failed"
         );
       }
     } finally {
diff --git a/apps/Mobile/src/screens/MechanicActiveWorkScreen/MechanicActiveWorkContent.tsx b/apps/Mobile/src/screens/MechanicActiveWorkScreen/MechanicActiveWorkContent.tsx
index 479c31c94..fd1bf18b4 100644
--- a/apps/Mobile/src/screens/MechanicActiveWorkScreen/MechanicActiveWorkContent.tsx
+++ b/apps/Mobile/src/screens/MechanicActiveWorkScreen/MechanicActiveWorkContent.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import {
-  Alert,
   Image,
   ScrollView,
   Text,
@@ -37,6 +36,7 @@ import {
   PART_ORDER_STATUS_ORDER,
 } from "./mechanicPartsUtils";
 import { styles } from "./MechanicActiveWorkContent.styles";
+import { useAppAlert } from "../../components/AppAlert";
 
 const MAX_PHOTOS = 6;
 
@@ -593,10 +593,12 @@ function EstimateWorkItemRow({ item, onPriceChange }: EstimateWorkItemProps) {
   );
 }
 
-async function pickPhoto(): Promise<string | null> {
+async function pickPhoto(
+  showPermissionError: (message: string, title?: string) => void
+): Promise<string | null> {
   const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
   if (!permission.granted) {
-    Alert.alert("Дозвіл потрібен", "Потрібен дозвіл для доступу до галереї");
+    showPermissionError("Потрібен дозвіл для доступу до галереї", "Дозвіл потрібен");
     return null;
   }
 
@@ -613,6 +615,7 @@ export function MechanicActiveWorkContent({
   contentContainerStyle,
 }: MechanicActiveWorkContentProps) {
   const theme = useTheme();
+  const { showAlert, showError } = useAppAlert();
   const insets = useSafeAreaInsets();
   const scrollTopInset = 16 + insets.top;
 
@@ -642,19 +645,19 @@ export function MechanicActiveWorkContent({
 
   const handlePickWorkItemPhoto = async (workItemId: string, currentCount: number) => {
     if (currentCount >= MAX_PHOTOS) {
-      Alert.alert("Ліміт", `Можна додати до ${MAX_PHOTOS} фото`);
+      showError(`Можна додати до ${MAX_PHOTOS} фото`, "Ліміт");
       return;
     }
-    const uri = await pickPhoto();
+    const uri = await pickPhoto(showError);
     if (uri) addWorkItemPhoto(workItemId, uri);
   };
 
   const handlePickConclusionPhoto = async () => {
     if ((session?.conclusionPhotos.length ?? 0) >= MAX_PHOTOS) {
-      Alert.alert("Ліміт", `Можна додати до ${MAX_PHOTOS} фото`);
+      showError(`Можна додати до ${MAX_PHOTOS} фото`, "Ліміт");
       return;
     }
-    const uri = await pickPhoto();
+    const uri = await pickPhoto(showError);
     if (uri) addConclusionPhoto(uri);
   };
 
@@ -663,18 +666,19 @@ export function MechanicActiveWorkContent({
     const hasValidWork = planned.some((item) => item.title.trim().length > 0);
 
     if (!hasValidWork) {
-      Alert.alert("Помилка", "Додайте хоча б одну роботу з назвою перед погодженням");
+      showError("Додайте хоча б одну роботу з назвою перед погодженням");
       return;
     }
 
-    Alert.alert(
-      "Погодити кошторис?",
-      "Клієнт отримає список робіт та приблизну вартість для підтвердження.",
-      [
+    showAlert({
+      title: "Погодити кошторис?",
+      message:
+        "Клієнт отримає список робіт та приблизну вартість для підтвердження.",
+      buttons: [
         { text: "Скасувати", style: "cancel" },
         { text: "Погодити", onPress: approveDiagnostics },
-      ]
-    );
+      ],
+    });
   };
 
   const handleCompleteRepair = () => {
@@ -684,14 +688,15 @@ export function MechanicActiveWorkContent({
       ) ?? [];
 
     if (planned.length > 0) {
-      Alert.alert(
-        "Незавершені роботи",
-        "Деякі роботи ще не позначені як виконані. Все одно перейти до фінальної перевірки?",
-        [
+      showAlert({
+        title: "Незавершені роботи",
+        message:
+          "Деякі роботи ще не позначені як виконані. Все одно перейти до фінальної перевірки?",
+        buttons: [
           { text: "Скасувати", style: "cancel" },
           { text: "Перейти", onPress: completeRepair },
-        ]
-      );
+        ],
+      });
       return;
     }
 
@@ -699,14 +704,15 @@ export function MechanicActiveWorkContent({
   };
 
   const handleReturnToRepair = () => {
-    Alert.alert(
-      "Повернутись до ремонту?",
-      "Ви зможете змінити статуси робіт, додати фото та продовжити ремонт.",
-      [
+    showAlert({
+      title: "Повернутись до ремонту?",
+      message:
+        "Ви зможете змінити статуси робіт, додати фото та продовжити ремонт.",
+      buttons: [
         { text: "Скасувати", style: "cancel" },
         { text: "Повернутись", onPress: returnToRepair },
-      ]
-    );
+      ],
+    });
   };
 
   const handleStartWaitingParts = () => {
@@ -725,14 +731,15 @@ export function MechanicActiveWorkContent({
       session?.partOrders.filter((item) => item.status !== "received") ?? [];
 
     if (pending.length > 0) {
-      Alert.alert(
-        "Деталі ще не всі отримані",
-        "Деякі позиції ще не позначені як «Отримано». Продовжити ремонт?",
-        [
+      showAlert({
+        title: "Деталі ще не всі отримані",
+        message:
+          "Деякі позиції ще не позначені як «Отримано». Продовжити ремонт?",
+        buttons: [
           { text: "Скасувати", style: "cancel" },
           { text: "Продовжити", onPress: returnToRepair },
-        ]
-      );
+        ],
+      });
       return;
     }
 
@@ -741,18 +748,19 @@ export function MechanicActiveWorkContent({
 
   const handleFinishWork = () => {
     if (!session?.conclusion.trim()) {
-      Alert.alert("Помилка", "Напишіть висновок для водія перед завершенням");
+      showError("Напишіть висновок для водія перед завершенням");
       return;
     }
 
-    Alert.alert(
-      "Завершити роботу?",
-      "Водій побачить кошторис, висновок та фото. Статус зміниться на «Завершено».",
-      [
+    showAlert({
+      title: "Завершити роботу?",
+      message:
+        "Водій побачить кошторис, висновок та фото. Статус зміниться на «Завершено».",
+      buttons: [
         { text: "Скасувати", style: "cancel" },
         { text: "Завершити", onPress: finishWork },
-      ]
-    );
+      ],
+    });
   };
 
   if (!activeVehicle || !session) {
diff --git a/apps/Mobile/src/screens/MechanicActiveWorkScreen/mechanicSessionConfig.ts b/apps/Mobile/src/screens/MechanicActiveWorkScreen/mechanicSessionConfig.ts
index 2d2dc5c2f..89d8c76be 100644
--- a/apps/Mobile/src/screens/MechanicActiveWorkScreen/mechanicSessionConfig.ts
+++ b/apps/Mobile/src/screens/MechanicActiveWorkScreen/mechanicSessionConfig.ts
@@ -63,8 +63,9 @@ export function mapSessionToDriverStatus(
     case "diagnostics":
       return "diagnostics";
     case "repair":
-    case "waiting_parts":
       return "in_progress";
+    case "waiting_parts":
+      return "waiting_parts";
     case "final_check":
       return "quality_check";
     case "estimate":
diff --git a/apps/Mobile/src/screens/ProfileEditScreen/ProfileEditScreen.tsx b/apps/Mobile/src/screens/ProfileEditScreen/ProfileEditScreen.tsx
index 789829868..5aaab8b8d 100644
--- a/apps/Mobile/src/screens/ProfileEditScreen/ProfileEditScreen.tsx
+++ b/apps/Mobile/src/screens/ProfileEditScreen/ProfileEditScreen.tsx
@@ -4,7 +4,6 @@ import {
   Text,
   TextInput,
   TouchableOpacity,
-  Alert,
   ActivityIndicator,
 } from "react-native";
 import Animated, { FadeIn } from "react-native-reanimated";
@@ -17,12 +16,14 @@ import { globalStyles } from "../../styles/globalStyles";
 import { styles } from "./ProfileEditScreen.styles";
 import { ProfileEditScreenProps } from "../../navigation/types";
 import { formatPhone } from "../ProfileScreen/profileUtils";
+import { useAppAlert } from "../../components/AppAlert";
 
 export default function ProfileEditScreen({
   navigation,
 }: ProfileEditScreenProps) {
   useStatusBar();
   const theme = useTheme();
+  const { showAlert, showError, showSuccess } = useAppAlert();
   const { data: meData, isLoading: isLoadingMe } = useMe();
   const updateUserMutation = useUpdateUserProfile();
 
@@ -42,12 +43,12 @@ export default function ProfileEditScreen({
 
   const handleSave = async () => {
     if (!name.trim()) {
-      Alert.alert("Помилка", "Будь ласка, введіть ваше ім'я");
+      showError("Будь ласка, введіть ваше ім'я");
       return;
     }
 
     if (!email.trim()) {
-      Alert.alert("Помилка", "Будь ласка, введіть вашу пошту");
+      showError("Будь ласка, введіть вашу пошту");
       return;
     }
 
@@ -57,7 +58,7 @@ export default function ProfileEditScreen({
         email: email.trim(),
       });
 
-      Alert.alert("Успішно!", "Профіль успішно оновлено", [
+      showSuccess("Профіль успішно оновлено", "Успішно!", [
         { text: "OK", onPress: () => navigation.goBack() },
       ]);
     } catch (error) {
@@ -80,7 +81,7 @@ export default function ProfileEditScreen({
         }
       }
 
-      Alert.alert("Помилка", errorMessage);
+      showError(errorMessage);
     }
   };
 
@@ -89,18 +90,18 @@ export default function ProfileEditScreen({
       name !== (meData?.name || "") || email !== (meData?.email || "");
 
     if (hasChanges) {
-      Alert.alert(
-        "Скасувати зміни?",
-        "Ви вже внесли зміни. Ви впевнені, що хочете скасувати?",
-        [
+      showAlert({
+        title: "Скасувати зміни?",
+        message: "Ви вже внесли зміни. Ви впевнені, що хочете скасувати?",
+        buttons: [
           { text: "Продовжити редагування", style: "cancel" },
           {
             text: "Скасувати",
             style: "destructive",
             onPress: () => navigation.goBack(),
           },
-        ]
-      );
+        ],
+      });
     } else {
       navigation.goBack();
     }
diff --git a/apps/Mobile/src/screens/ProfileScreen/ProfileScreen.tsx b/apps/Mobile/src/screens/ProfileScreen/ProfileScreen.tsx
index 404c4ba8c..f24915503 100644
--- a/apps/Mobile/src/screens/ProfileScreen/ProfileScreen.tsx
+++ b/apps/Mobile/src/screens/ProfileScreen/ProfileScreen.tsx
@@ -4,7 +4,6 @@ import {
   View,
   TouchableOpacity,
   ScrollView,
-  Alert,
   ActivityIndicator,
   Image,
   RefreshControl,
@@ -20,12 +19,14 @@ import { globalStyles } from "../../styles/globalStyles";
 import { styles } from "./ProfileScreen.styles";
 import { ProfileScreenProps } from "../../navigation/types";
 import { formatPhone, getProfileInitials } from "./profileUtils";
+import { useAppAlert } from "../../components/AppAlert";
 
 export default function ProfileScreen({ navigation }: ProfileScreenProps) {
   useStatusBar();
   const { logout } = useAuth();
   const { data: meData, isLoading, error, refetch } = useMe();
   const theme = useTheme();
+  const { showAlert } = useAppAlert();
 
   const refreshProfile = React.useCallback(async () => {
     await refetch();
@@ -38,10 +39,14 @@ export default function ProfileScreen({ navigation }: ProfileScreenProps) {
   };
 
   const handleLogout = () => {
-    Alert.alert("Вийти з акаунту?", "Ви впевнені, що хочете вийти?", [
-      { text: "Скасувати", style: "cancel" },
-      { text: "Вийти", style: "destructive", onPress: logout },
-    ]);
+    showAlert({
+      title: "Вийти з акаунту?",
+      message: "Ви впевнені, що хочете вийти?",
+      buttons: [
+        { text: "Скасувати", style: "cancel" },
+        { text: "Вийти", style: "destructive", onPress: logout },
+      ],
+    });
   };
 
   if (isLoading) {
diff --git a/apps/Mobile/src/screens/ProfileSetupScreen/ProfileSetupScreen.tsx b/apps/Mobile/src/screens/ProfileSetupScreen/ProfileSetupScreen.tsx
index bfef9209a..2a7e17dd0 100644
--- a/apps/Mobile/src/screens/ProfileSetupScreen/ProfileSetupScreen.tsx
+++ b/apps/Mobile/src/screens/ProfileSetupScreen/ProfileSetupScreen.tsx
@@ -4,7 +4,6 @@ import {
   Text,
   TextInput,
   TouchableOpacity,
-  Alert,
   ActivityIndicator,
 } from "react-native";
 import { FormScreen } from "../../components/FormScreen";
@@ -13,12 +12,14 @@ import { useAuth } from "../../context/AuthContext";
 import { useUpdateUserProfile } from "../../queries/userQueries";
 import { styles } from "./ProfileSetupScreen.styles";
 import { ProfileSetupScreenProps } from "../../navigation/types";
+import { useAppAlert } from "../../components/AppAlert";
 
 export default function ProfileSetupScreen({
   navigation,
 }: ProfileSetupScreenProps) {
   const { meData } = useAuth();
   const updateUserMutation = useUpdateUserProfile();
+  const { showAlert, showError } = useAppAlert();
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [isLoadingProfile, setIsLoadingProfile] = useState(true);
@@ -36,10 +37,10 @@ export default function ProfileSetupScreen({
     const hasData = name.trim() || email.trim();
 
     if (hasData) {
-      Alert.alert(
-        "Скасувати створення профілю?",
-        "Ви вже ввели деякі дані. Ви впевнені, що хочете скасувати?",
-        [
+      showAlert({
+        title: "Скасувати створення профілю?",
+        message: "Ви вже ввели деякі дані. Ви впевнені, що хочете скасувати?",
+        buttons: [
           {
             text: "Продовжити редагування",
             style: "cancel",
@@ -49,8 +50,8 @@ export default function ProfileSetupScreen({
             style: "destructive",
             onPress: () => navigation.navigate("Home"),
           },
-        ]
-      );
+        ],
+      });
     } else {
       navigation.navigate("Home");
     }
@@ -58,11 +59,11 @@ export default function ProfileSetupScreen({
 
   const handleContinue = async () => {
     if (!name.trim()) {
-      Alert.alert("Error", "Будь ласка, введи своє імʼя");
+      showError("Будь ласка, введи своє імʼя", "Error");
       return;
     }
     if (!email.trim()) {
-      Alert.alert("Error", "Будь ласка, введи свою пошту");
+      showError("Будь ласка, введи свою пошту", "Error");
       return;
     }
 
@@ -94,7 +95,7 @@ export default function ProfileSetupScreen({
         }
       }
 
-      Alert.alert("Помилка", errorMessage);
+      showError(errorMessage);
     }
   };
 
diff --git a/apps/Mobile/src/screens/ServiceBookingScreen/ServiceBookingScreen.tsx b/apps/Mobile/src/screens/ServiceBookingScreen/ServiceBookingScreen.tsx
index a5804d836..4da3caaae 100644
--- a/apps/Mobile/src/screens/ServiceBookingScreen/ServiceBookingScreen.tsx
+++ b/apps/Mobile/src/screens/ServiceBookingScreen/ServiceBookingScreen.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import {
   ActivityIndicator,
-  Alert,
   Image,
   Text,
   TextInput,
@@ -31,6 +30,7 @@ import {
   VISIT_REASON_OPTIONS,
 } from "./serviceBookingConfig";
 import { styles } from "./ServiceBookingScreen.styles";
+import { useAppAlert } from "../../components/AppAlert";
 
 const MAX_PHOTO_ATTACHMENTS = 3;
 
@@ -44,6 +44,7 @@ export default function ServiceBookingScreen({
 }: ServiceBookingScreenProps) {
   useStatusBar();
   const theme = useTheme();
+  const { showError, showSuccess } = useAppAlert();
   const { serviceId, serviceName } = route.params;
   void serviceId;
 
@@ -88,16 +89,16 @@ export default function ServiceBookingScreen({
 
   const handlePickMedia = async () => {
     if (attachments.length >= MAX_PHOTO_ATTACHMENTS) {
-      Alert.alert(
-        "Ліміт досягнуто",
-        `Можна додати до ${MAX_PHOTO_ATTACHMENTS} фото або відео`
+      showError(
+        `Можна додати до ${MAX_PHOTO_ATTACHMENTS} фото або відео`,
+        "Ліміт досягнуто"
       );
       return;
     }
 
     const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
     if (!permission.granted) {
-      Alert.alert("Дозвіл потрібен", "Потрібен дозвіл для доступу до галереї");
+      showError("Потрібен дозвіл для доступу до галереї", "Дозвіл потрібен");
       return;
     }
 
@@ -126,27 +127,27 @@ export default function ServiceBookingScreen({
 
   const handleSubmit = async () => {
     if (!selectedVehicleId || !selectedVehicle) {
-      Alert.alert("Помилка", "Оберіть автомобіль для запису");
+      showError("Оберіть автомобіль для запису");
       return;
     }
     if (!visitReason) {
-      Alert.alert("Помилка", "Оберіть причину візиту");
+      showError("Оберіть причину візиту");
       return;
     }
     if (!problemDescription.trim()) {
-      Alert.alert("Помилка", "Опишіть проблему своїми словами");
+      showError("Опишіть проблему своїми словами");
       return;
     }
     if (!selectedDateKey) {
-      Alert.alert("Помилка", "Оберіть бажану дату");
+      showError("Оберіть бажану дату");
       return;
     }
     if (!timeSlot) {
-      Alert.alert("Помилка", "Оберіть часовий слот");
+      showError("Оберіть часовий слот");
       return;
     }
     if (!partsOption) {
-      Alert.alert("Помилка", "Вкажіть, чи потрібні запчастини від СТО");
+      showError("Вкажіть, чи потрібні запчастини від СТО");
       return;
     }
 
@@ -154,9 +155,9 @@ export default function ServiceBookingScreen({
     try {
       await new Promise((resolve) => setTimeout(resolve, 600));
 
-      Alert.alert(
-        "Заявку надіслано",
+      showSuccess(
         `${serviceName ?? "СТО"} отримає вашу заявку. Адміністратор зателефонує, щоб підтвердити точний час.`,
+        "Заявку надіслано",
         [{ text: "OK", onPress: () => navigation.goBack() }]
       );
     } finally {
diff --git a/apps/Mobile/src/screens/ServiceHistoryCreateScreen/ServiceHistoryCreateScreen.tsx b/apps/Mobile/src/screens/ServiceHistoryCreateScreen/ServiceHistoryCreateScreen.tsx
index 2aedc61d9..22689bece 100644
--- a/apps/Mobile/src/screens/ServiceHistoryCreateScreen/ServiceHistoryCreateScreen.tsx
+++ b/apps/Mobile/src/screens/ServiceHistoryCreateScreen/ServiceHistoryCreateScreen.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Alert, ActivityIndicator, Text, View } from "react-native";
+import { ActivityIndicator, Text, View } from "react-native";
 import { FormScreen } from "../../components/FormScreen";
 import { useServiceHistoryCreateDraft } from "../../hooks/useServiceHistoryCreateDraft";
 import { useStatusBar } from "../../hooks/useStatusBar";
@@ -9,6 +9,7 @@ import { globalStyles } from "../../styles/globalStyles";
 import { useTheme } from "../../hooks/useTheme";
 import { ServiceHistoryForm } from "./ServiceHistoryForm";
 import { styles } from "./ServiceHistoryCreateScreen.styles";
+import { useAppAlert } from "../../components/AppAlert";
 
 export default function ServiceHistoryCreateScreen({
   navigation,
@@ -16,6 +17,7 @@ export default function ServiceHistoryCreateScreen({
 }: ServiceHistoryCreateScreenProps) {
   useStatusBar();
   const theme = useTheme();
+  const { showError, showSuccess } = useAppAlert();
   const { vehicleId, vehicleTitle } = route.params;
   const createServiceHistory = useCreateServiceHistory();
   const {
@@ -35,7 +37,7 @@ export default function ServiceHistoryCreateScreen({
 
   const handleSave = async () => {
     if (!title.trim()) {
-      Alert.alert("Помилка", "Вкажіть назву візиту або сервісу.");
+      showError("Вкажіть назву візиту або сервісу.");
       return;
     }
 
@@ -49,7 +51,7 @@ export default function ServiceHistoryCreateScreen({
     });
 
     if (!parsedRecords.length) {
-      Alert.alert("Помилка", "Додайте хоча б одну виконану роботу.");
+      showError("Додайте хоча б одну виконану роботу.");
       return;
     }
 
@@ -62,8 +64,7 @@ export default function ServiceHistoryCreateScreen({
     );
 
     if (invalidRecord) {
-      Alert.alert(
-        "Помилка",
+      showError(
         `Перевірте пункт #${invalidRecord.index + 1}: вкажіть назву роботи та ціну більше 0.`
       );
       return;
@@ -87,12 +88,11 @@ export default function ServiceHistoryCreateScreen({
 
       await clearDraft();
 
-      Alert.alert("Успіх", "Запис обслуговування збережено у базі.", [
+      showSuccess("Запис обслуговування збережено у базі.", "Успіх", [
         { text: "OK", onPress: () => navigation.goBack() },
       ]);
     } catch (error) {
-      Alert.alert(
-        "Помилка",
+      showError(
         error instanceof Error
           ? error.message
           : "Не вдалося зберегти запис обслуговування"
diff --git a/apps/Mobile/src/screens/ServiceHistoryEditScreen/ServiceHistoryEditScreen.tsx b/apps/Mobile/src/screens/ServiceHistoryEditScreen/ServiceHistoryEditScreen.tsx
index 12be27718..7981a01ee 100644
--- a/apps/Mobile/src/screens/ServiceHistoryEditScreen/ServiceHistoryEditScreen.tsx
+++ b/apps/Mobile/src/screens/ServiceHistoryEditScreen/ServiceHistoryEditScreen.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { Alert } from "react-native";
 import { FormScreen } from "../../components/FormScreen";
 import { useStatusBar } from "../../hooks/useStatusBar";
 import { useUpdateServiceHistory } from "../../queries";
@@ -10,6 +9,7 @@ import {
   ServiceHistoryWorkInput,
 } from "../ServiceHistoryCreateScreen/ServiceHistoryForm";
 import { styles } from "../ServiceHistoryCreateScreen/ServiceHistoryCreateScreen.styles";
+import { useAppAlert } from "../../components/AppAlert";
 
 const createEmptyWork = (): ServiceHistoryWorkInput => ({
   id: `${Date.now()}-${Math.random().toString(16).slice(2)}`,
@@ -36,6 +36,7 @@ export default function ServiceHistoryEditScreen({
   route,
 }: ServiceHistoryEditScreenProps) {
   useStatusBar();
+  const { showError, showSuccess } = useAppAlert();
   const { vehicleId, vehicleTitle, visit } = route.params;
   const updateServiceHistory = useUpdateServiceHistory();
 
@@ -71,7 +72,7 @@ export default function ServiceHistoryEditScreen({
 
   const handleSave = async () => {
     if (!title.trim()) {
-      Alert.alert("Помилка", "Вкажіть назву візиту або сервісу.");
+      showError("Вкажіть назву візиту або сервісу.");
       return;
     }
 
@@ -85,7 +86,7 @@ export default function ServiceHistoryEditScreen({
     });
 
     if (!parsedRecords.length) {
-      Alert.alert("Помилка", "Додайте хоча б одну виконану роботу.");
+      showError("Додайте хоча б одну виконану роботу.");
       return;
     }
 
@@ -98,8 +99,7 @@ export default function ServiceHistoryEditScreen({
     );
 
     if (invalidRecord) {
-      Alert.alert(
-        "Помилка",
+      showError(
         `Перевірте пункт #${invalidRecord.index + 1}: вкажіть назву роботи та ціну більше 0.`
       );
       return;
@@ -122,12 +122,11 @@ export default function ServiceHistoryEditScreen({
         },
       });
 
-      Alert.alert("Успіх", "Запис обслуговування оновлено.", [
+      showSuccess("Запис обслуговування оновлено.", "Успіх", [
         { text: "OK", onPress: () => navigation.goBack() },
       ]);
     } catch (error) {
-      Alert.alert(
-        "Помилка",
+      showError(
         error instanceof Error
           ? error.message
           : "Не вдалося оновити запис обслуговування"
diff --git a/apps/Mobile/src/screens/ServiceHistoryScreen/ServiceHistoryContent.tsx b/apps/Mobile/src/screens/ServiceHistoryScreen/ServiceHistoryContent.tsx
index d7c71d850..83b076694 100644
--- a/apps/Mobile/src/screens/ServiceHistoryScreen/ServiceHistoryContent.tsx
+++ b/apps/Mobile/src/screens/ServiceHistoryScreen/ServiceHistoryContent.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import {
   ActivityIndicator,
-  Alert,
   RefreshControl,
   ScrollView,
   Text,
@@ -22,6 +21,7 @@ import { globalStyles } from "../../styles/globalStyles";
 import { ServiceHistorySwipeableVisit } from "./ServiceHistorySwipeableVisit";
 import { formatVisitCount } from "./serviceHistoryUtils";
 import { styles } from "./ServiceHistoryScreen.styles";
+import { useAppAlert } from "../../components/AppAlert";
 
 export interface ServiceHistoryContentProps {
   vehicleId: string;
@@ -39,6 +39,7 @@ export function ServiceHistoryContent({
   contentContainerStyle,
 }: ServiceHistoryContentProps) {
   const theme = useTheme();
+  const { showAlert, showError } = useAppAlert();
   const insets = useSafeAreaInsets();
   const deleteServiceHistory = useDeleteServiceHistory();
   const swipeableRefs = React.useRef<Map<string, Swipeable | null>>(new Map());
@@ -68,10 +69,10 @@ export function ServiceHistoryContent({
   const handleDeletePress = (visit: ServiceHistoryVisitDto) => {
     swipeableRefs.current.get(visit.id)?.close();
 
-    Alert.alert(
-      "Видалити запис?",
-      `Запис «${visit.title}» буде видалено без можливості відновлення.`,
-      [
+    showAlert({
+      title: "Видалити запис?",
+      message: `Запис «${visit.title}» буде видалено без можливості відновлення.`,
+      buttons: [
         { text: "Скасувати", style: "cancel" },
         {
           text: "Видалити",
@@ -83,8 +84,7 @@ export function ServiceHistoryContent({
                 serviceHistoryId: visit.id,
               });
             } catch (deleteError) {
-              Alert.alert(
-                "Помилка",
+              showError(
                 deleteError instanceof Error
                   ? deleteError.message
                   : "Не вдалося видалити запис обслуговування"
@@ -92,8 +92,8 @@ export function ServiceHistoryContent({
             }
           },
         },
-      ]
-    );
+      ],
+    });
   };
 
   const handleEditPress = (visit: ServiceHistoryVisitDto) => {
diff --git a/apps/Mobile/src/screens/ServiceHistoryScreen/ServiceHistoryVisitBody.tsx b/apps/Mobile/src/screens/ServiceHistoryScreen/ServiceHistoryVisitBody.tsx
index 3dd8a4258..d6a9a3a02 100644
--- a/apps/Mobile/src/screens/ServiceHistoryScreen/ServiceHistoryVisitBody.tsx
+++ b/apps/Mobile/src/screens/ServiceHistoryScreen/ServiceHistoryVisitBody.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import {
   ActivityIndicator,
-  Alert,
   LayoutChangeEvent,
   Text,
   TouchableOpacity,
@@ -24,6 +23,7 @@ import {
   getRecordsTotalPrice,
 } from "./serviceHistoryUtils";
 import { styles } from "./ServiceHistoryScreen.styles";
+import { useAppAlert } from "../../components/AppAlert";
 
 const EXPAND_DURATION_MS = 320;
 
@@ -37,6 +37,7 @@ export function ServiceHistoryVisitBody({
   vehicleId,
 }: ServiceHistoryVisitBodyProps) {
   const theme = useTheme();
+  const { showError } = useAppAlert();
   const detailsMutation = useServiceHistoryDetails();
   const [isExpanded, setIsExpanded] = React.useState(false);
   const [records, setRecords] = React.useState<ServiceWorkItemDto[] | null>(
@@ -93,8 +94,7 @@ export function ServiceHistoryVisitBody({
       setRecords(details.records ?? []);
       setIsExpanded(true);
     } catch (error) {
-      Alert.alert(
-        "Помилка",
+      showError(
         error instanceof Error
           ? error.message
           : "Не вдалося завантажити виконані роботи"
diff --git a/apps/Mobile/src/screens/ServiceShopDetailScreen/ServiceShopDetailScreen.tsx b/apps/Mobile/src/screens/ServiceShopDetailScreen/ServiceShopDetailScreen.tsx
index 4b7558d86..ec60cf68e 100644
--- a/apps/Mobile/src/screens/ServiceShopDetailScreen/ServiceShopDetailScreen.tsx
+++ b/apps/Mobile/src/screens/ServiceShopDetailScreen/ServiceShopDetailScreen.tsx
@@ -6,7 +6,6 @@ import {
   Text,
   TouchableOpacity,
   View,
-  Alert,
 } from "react-native";
 import Animated, { FadeInDown } from "react-native-reanimated";
 import { Feather, FontAwesome5 } from "@expo/vector-icons";
@@ -21,6 +20,7 @@ import {
   SERVICE_TAG_LABELS,
 } from "../ServicesScreen/serviceShopUtils";
 import { styles } from "./ServiceShopDetailScreen.styles";
+import { useAppAlert } from "../../components/AppAlert";
 
 type SocialPlatform = "instagram" | "facebook" | "telegram" | "website";
 
@@ -43,6 +43,7 @@ export default function ServiceShopDetailScreen({
   route,
 }: ServiceShopDetailScreenProps) {
   const theme = useTheme();
+  const { showError } = useAppAlert();
   const { serviceId } = route.params;
   const service = getServiceById(serviceId);
 
@@ -71,10 +72,10 @@ export default function ServiceShopDetailScreen({
       if (canOpen) {
         await Linking.openURL(url);
       } else {
-        Alert.alert("Помилка", "Не вдалося відкрити телефонний дзвінок");
+        showError("Не вдалося відкрити телефонний дзвінок");
       }
     } catch {
-      Alert.alert("Помилка", "Не вдалося відкрити телефонний дзвінок");
+      showError("Не вдалося відкрити телефонний дзвінок");
     }
   };
 
@@ -86,7 +87,7 @@ export default function ServiceShopDetailScreen({
         await Linking.openURL(url);
       }
     } catch {
-      Alert.alert("Помилка", "Не вдалося відкрити посилання");
+      showError("Не вдалося відкрити посилання");
     }
   };
 
diff --git a/apps/Mobile/src/screens/ServiceStatusScreen/ServiceStatusContent.tsx b/apps/Mobile/src/screens/ServiceStatusScreen/ServiceStatusContent.tsx
index d6ad908d7..191c45f1b 100644
--- a/apps/Mobile/src/screens/ServiceStatusScreen/ServiceStatusContent.tsx
+++ b/apps/Mobile/src/screens/ServiceStatusScreen/ServiceStatusContent.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import {
-  Alert,
   Linking,
   ScrollView,
   Text,
@@ -18,7 +17,10 @@ import Animated, {
 import { Feather } from "@expo/vector-icons";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTheme } from "../../hooks/useTheme";
-import { ActiveServiceSession, ServiceStatusId } from "../../types/serviceStatus";
+import {
+  ActiveServiceSession,
+  ServiceStatusId,
+} from "../../types/serviceStatus";
 import { MOCK_ACTIVE_SESSION } from "./mockServiceStatus";
 import {
   getStatusContextMessage,
@@ -27,6 +29,7 @@ import {
   SERVICE_STATUS_STEPS,
 } from "./serviceStatusConfig";
 import { styles } from "./ServiceStatusContent.styles";
+import { useAppAlert } from "../../components/AppAlert";
 
 export interface ServiceStatusContentProps {
   contentContainerStyle?: ViewStyle;
@@ -51,11 +54,7 @@ function PulsingDot() {
   const opacity = useSharedValue(1);
 
   React.useEffect(() => {
-    opacity.value = withRepeat(
-      withTiming(0.35, { duration: 900 }),
-      -1,
-      true
-    );
+    opacity.value = withRepeat(withTiming(0.35, { duration: 900 }), -1, true);
   }, [opacity]);
 
   const animatedStyle = useAnimatedStyle(() => ({
@@ -69,6 +68,7 @@ export function ServiceStatusContent({
   contentContainerStyle,
 }: ServiceStatusContentProps) {
   const theme = useTheme();
+  const { showAlert, showError } = useAppAlert();
   const insets = useSafeAreaInsets();
   const scrollTopInset = 16 + insets.top;
 
@@ -97,10 +97,10 @@ export function ServiceStatusContent({
   const handleApprove = () => {
     if (!session?.estimateItems?.length) return;
 
-    Alert.alert(
-      "Затвердити кошторис?",
-      "Після підтвердження СТО розпочне виконання погоджених робіт.",
-      [
+    showAlert({
+      title: "Затвердити кошторис?",
+      message: "Після підтвердження СТО розпочне виконання погоджених робіт.",
+      buttons: [
         { text: "Скасувати", style: "cancel" },
         {
           text: "Затвердити",
@@ -110,14 +110,14 @@ export function ServiceStatusContent({
                 ? {
                     ...prev,
                     isApproved: true,
-                    currentStatus: "in_progress",
+                    currentStatus: "waiting_parts",
                   }
                 : prev
             );
           },
         },
-      ]
-    );
+      ],
+    });
   };
 
   const handleNavigate = () => {
@@ -125,14 +125,14 @@ export function ServiceStatusContent({
     const query = encodeURIComponent(session.serviceAddress);
     const url = `https://maps.google.com/?q=${query}`;
     Linking.openURL(url).catch(() => {
-      Alert.alert("Помилка", "Не вдалося відкрити карту");
+      showError("Не вдалося відкрити карту");
     });
   };
 
   const handleCall = () => {
     if (!session?.servicePhone) return;
     Linking.openURL(`tel:${session.servicePhone.replace(/\s/g, "")}`).catch(
-      () => Alert.alert("Помилка", "Не вдалося відкрити дзвінок")
+      () => showError("Не вдалося відкрити дзвінок")
     );
   };
 
@@ -208,7 +208,9 @@ export function ServiceStatusContent({
                   </View>
                   <View style={styles.liveBadge}>
                     <PulsingDot />
-                    <Text style={styles.liveBadgeText}>Оновлення в реальному часі</Text>
+                    <Text style={styles.liveBadgeText}>
+                      Оновлення в реальному часі
+                    </Text>
                   </View>
                   <Text style={styles.sessionVehicle}>
                     Прийнято о {formatAcceptedAt(session.acceptedAt)}
@@ -340,7 +342,7 @@ export function ServiceStatusContent({
                       color={theme.colors.text.inverse}
                     />
                     <Text style={styles.primaryButtonText}>
-                      Переглянути та затвердити перелік робіт
+                      Затвердити перелік робіт
                     </Text>
                   </TouchableOpacity>
                 </Animated.View>
diff --git a/apps/Mobile/src/screens/ServiceStatusScreen/serviceStatusConfig.ts b/apps/Mobile/src/screens/ServiceStatusScreen/serviceStatusConfig.ts
index e8857ca82..595ef23fd 100644
--- a/apps/Mobile/src/screens/ServiceStatusScreen/serviceStatusConfig.ts
+++ b/apps/Mobile/src/screens/ServiceStatusScreen/serviceStatusConfig.ts
@@ -26,6 +26,12 @@ export const SERVICE_STATUS_STEPS: ServiceStatusStepConfig[] = [
     title: "Погодження",
     shortTitle: "Кошторис",
   },
+  {
+    id: "waiting_parts",
+    emoji: "📦",
+    title: "Очікуємо деталей",
+    shortTitle: "Деталі",
+  },
   {
     id: "in_progress",
     emoji: "🔧",
@@ -67,6 +73,8 @@ export function getStatusContextMessage(
       return "Майстер проводить огляд. Очікуйте на результати та кошторис.";
     case "approval":
       return "Діагностику завершено. Перегляньте перелік робіт і затвердіть кошторис.";
+    case "waiting_parts":
+      return "Очікуємо постачання деталей. Ремонт розпочнеться одразу після їх отримання.";
     case "in_progress":
       return currentWork
         ? `Зараз виконується: ${currentWork}`
diff --git a/apps/Mobile/src/screens/UserCheckScreen/UserCheckScreen.tsx b/apps/Mobile/src/screens/UserCheckScreen/UserCheckScreen.tsx
index d2173799f..45267b91f 100644
--- a/apps/Mobile/src/screens/UserCheckScreen/UserCheckScreen.tsx
+++ b/apps/Mobile/src/screens/UserCheckScreen/UserCheckScreen.tsx
@@ -3,7 +3,6 @@ import {
   View,
   Text,
   ActivityIndicator,
-  Alert,
   TouchableOpacity,
 } from "react-native";
 import { useMe } from "../../queries/userQueries";
@@ -11,10 +10,12 @@ import { useAuth } from "../../context/AuthContext";
 import { theme } from "../../styles/theme";
 import { styles } from "./UserCheckScreen.styles";
 import { UserCheckScreenProps } from "../../navigation/types";
+import { useAppAlert } from "../../components/AppAlert";
 
 export default function UserCheckScreen({ navigation }: UserCheckScreenProps) {
   const { data: meData, isLoading, error } = useMe();
   const { logout } = useAuth();
+  const { showAlert } = useAppAlert();
   const [showSkipButton, setShowSkipButton] = useState(false);
 
   useEffect(() => {
@@ -93,34 +94,39 @@ export default function UserCheckScreen({ navigation }: UserCheckScreenProps) {
       }
 
       // Показуємо повідомлення користувачу
-      Alert.alert("Помилка", errorMessage, [
-        {
-          text: "Скасувати",
-          style: "cancel",
-          onPress: async () => {
-            await logout();
-          },
-        },
-        {
-          text: buttonText,
-          onPress: async () => {
-            if (buttonText === "Увійти знову") {
+      showAlert({
+        title: "Помилка",
+        message: errorMessage,
+        buttons: [
+          {
+            text: "Скасувати",
+            style: "cancel",
+            onPress: async () => {
               await logout();
-            } else {
-              // Спробувати знову - просто закриваємо Alert, query автоматично повториться
-              // React Query автоматично повторить запит через retry логіку
-            }
+            },
           },
-        },
-      ]);
+          {
+            text: buttonText,
+            onPress: async () => {
+              if (buttonText === "Увійти знову") {
+                await logout();
+              } else {
+                // Спробувати знову - просто закриваємо Alert, query автоматично повториться
+                // React Query автоматично повторить запит через retry логіку
+              }
+            },
+          },
+        ],
+      });
     }
-  }, [error, isLoading, logout, navigation]);
+  }, [error, isLoading, logout, navigation, showAlert]);
 
   const handleSkip = () => {
-    Alert.alert(
-      "Пропустити перевірку",
-      "Ви впевнені, що хочете пропустити перевірку профілю? Це може призвести до проблем з функціональністю додатку.",
-      [
+    showAlert({
+      title: "Пропустити перевірку",
+      message:
+        "Ви впевнені, що хочете пропустити перевірку профілю? Це може призвести до проблем з функціональністю додатку.",
+      buttons: [
         {
           text: "Скасувати",
           style: "cancel",
@@ -130,8 +136,8 @@ export default function UserCheckScreen({ navigation }: UserCheckScreenProps) {
           style: "destructive",
           onPress: () => navigation.replace("ProfileSetup"),
         },
-      ]
-    );
+      ],
+    });
   };
 
   return (
diff --git a/apps/Mobile/src/types/serviceStatus.ts b/apps/Mobile/src/types/serviceStatus.ts
index 3ee0e41ba..c4c204ebf 100644
--- a/apps/Mobile/src/types/serviceStatus.ts
+++ b/apps/Mobile/src/types/serviceStatus.ts
@@ -2,6 +2,7 @@ export type ServiceStatusId =
   | "received"
   | "diagnostics"
   | "approval"
+  | "waiting_parts"
   | "in_progress"
   | "quality_check"
   | "ready";
diff --git a/apps/Mobile/src/utils/apiErrorUtils.ts b/apps/Mobile/src/utils/apiErrorUtils.ts
new file mode 100644
index 000000000..824ae9775
--- /dev/null
+++ b/apps/Mobile/src/utils/apiErrorUtils.ts
@@ -0,0 +1,49 @@
+const API_ERROR_MESSAGES_UK: Record<string, string> = {
+  "Vin is required.": "Введіть VIN номер.",
+  "Vin must be 17 characters long.": "VIN має містити рівно 17 символів.",
+  "Vin must not exceed 17 characters.": "VIN має містити рівно 17 символів.",
+  "Vin must be a valid 17-character VIN.":
+    "VIN має містити 17 символів: латинські літери (без I, O, Q) та цифри.",
+  "License plate is required.": "Введіть номерний знак.",
+  "License plate must not exceed 10 characters.":
+    "Номерний знак не може перевищувати 10 символів.",
+};
+
+function translateApiMessage(message: string): string {
+  return API_ERROR_MESSAGES_UK[message] ?? message;
+}
+
+export function parseApiErrorMessage(error: unknown): string {
+  if (!(error instanceof Error)) {
+    return "Не вдалося зберегти дані";
+  }
+
+  try {
+    const parsed = JSON.parse(error.message) as {
+      title?: string;
+      errors?: Record<string, string[]>;
+    };
+
+    if (parsed.errors) {
+      const messages = Object.values(parsed.errors)
+        .flat()
+        .map(translateApiMessage);
+
+      if (messages.length > 0) {
+        return messages.join("\n");
+      }
+    }
+
+    if (parsed.title) {
+      return translateApiMessage(parsed.title);
+    }
+  } catch {
+    // Response is not JSON — use raw message below.
+  }
+
+  if (error.message.includes("401")) {
+    return "Сесія закінчилася. Будь ласка, увійдіть знову.";
+  }
+
+  return translateApiMessage(error.message);
+}
diff --git a/apps/Mobile/src/utils/vehicleFormUtils.ts b/apps/Mobile/src/utils/vehicleFormUtils.ts
new file mode 100644
index 000000000..8cc08fd74
--- /dev/null
+++ b/apps/Mobile/src/utils/vehicleFormUtils.ts
@@ -0,0 +1,134 @@
+import { SelectOption } from "../components/Select";
+import { FuelType, TransmissionType } from "../types/api";
+
+export function normalizeFuelType(
+  fuelType?: string | number | null
+): number | undefined {
+  if (fuelType === undefined || fuelType === null || fuelType === "") {
+    return undefined;
+  }
+
+  if (typeof fuelType === "number") {
+    return fuelType;
+  }
+
+  const parsed = Number(fuelType);
+  return Number.isNaN(parsed) ? undefined : parsed;
+}
+
+export function normalizeTransmissionType(
+  transmission?: string | number | null
+): number | undefined {
+  if (transmission === undefined || transmission === null || transmission === "") {
+    return undefined;
+  }
+
+  if (typeof transmission === "number") {
+    return transmission;
+  }
+
+  const parsed = Number(transmission);
+  return Number.isNaN(parsed) ? undefined : parsed;
+}
+
+export function requiresEngineDisplacement(
+  fuelType?: string | number | null
+): boolean {
+  const normalizedFuelType = normalizeFuelType(fuelType);
+
+  if (normalizedFuelType === undefined) {
+    return false;
+  }
+
+  return (
+    normalizedFuelType !== FuelType.Electric &&
+    normalizedFuelType !== FuelType.Hydrogen
+  );
+}
+
+export function getEnginePowerLabel(fuelType?: string | number | null): string {
+  const normalizedFuelType = normalizeFuelType(fuelType);
+
+  if (normalizedFuelType === FuelType.Electric) {
+    return "Потужність електромотора (к.с.) *";
+  }
+
+  if (normalizedFuelType === FuelType.Hydrogen) {
+    return "Потужність силової установки (к.с.) *";
+  }
+
+  return "Потужність двигуна (к.с.) *";
+}
+
+export function getTransmissionOptionsForFuel(
+  fuelType: string | number | undefined,
+  allOptions: SelectOption[]
+): SelectOption[] {
+  if (normalizeFuelType(fuelType) === FuelType.Electric) {
+    return allOptions.filter(
+      (option) =>
+        normalizeTransmissionType(option.value) === TransmissionType.Automatic ||
+        normalizeTransmissionType(option.value) === TransmissionType.CVT
+    );
+  }
+
+  return allOptions;
+}
+
+export function isTransmissionAllowedForFuel(
+  fuelType: string | number | undefined,
+  transmission: string | number | undefined
+): boolean {
+  if (normalizeFuelType(fuelType) !== FuelType.Electric) {
+    return true;
+  }
+
+  const normalizedTransmission = normalizeTransmissionType(transmission);
+  if (normalizedTransmission === undefined) {
+    return true;
+  }
+
+  return (
+    normalizedTransmission === TransmissionType.Automatic ||
+    normalizedTransmission === TransmissionType.CVT
+  );
+}
+
+export function resolveEngineCapacityCc(
+  fuelType: string | number,
+  displacement: string
+): number | null {
+  if (!requiresEngineDisplacement(fuelType)) {
+    return 0;
+  }
+
+  const displacementNum = displacement.trim()
+    ? parseFloat(displacement.replace(",", "."))
+    : NaN;
+
+  if (!displacement.trim() || isNaN(displacementNum) || displacementNum <= 0) {
+    return null;
+  }
+
+  const engineCapacityCc = Math.round(displacementNum * 1000);
+
+  if (engineCapacityCc <= 0 || engineCapacityCc > 10000) {
+    return null;
+  }
+
+  return engineCapacityCc;
+}
+
+export function formatEngineDisplay(
+  engineCapacity: number,
+  enginePower: number,
+  fuelType: FuelType
+): string {
+  const power = `${enginePower} к.с.`;
+
+  if (!requiresEngineDisplacement(fuelType) || engineCapacity <= 0) {
+    return power;
+  }
+
+  return `${(engineCapacity / 1000).toFixed(1)} л, ${power}`;
+}
diff --git a/apps/Mobile/src/utils/vinUtils.ts b/apps/Mobile/src/utils/vinUtils.ts
new file mode 100644
index 000000000..1c494516b
--- /dev/null
+++ b/apps/Mobile/src/utils/vinUtils.ts
@@ -0,0 +1,12 @@
+const VIN_REGEX = /^[A-HJ-NPR-Z0-9]{17}$/i;
+
+export function normalizeVinInput(value: string): string {
+  return value.toUpperCase().replace(/[^A-HJ-NPR-Z0-9]/gi, "").slice(0, 17);
+}
+
+export function isValidVin(vin: string): boolean {
+  return VIN_REGEX.test(vin.trim());
+}
+
+export const VIN_VALIDATION_MESSAGE =
+  "VIN має містити 17 символів: латинські літери (без I, O, Q) та цифри";
diff --git a/apps/landing/assets/favicon.png b/apps/landing/assets/favicon.png
new file mode 100644
index 000000000..9b83df3a3
Binary files /dev/null and b/apps/landing/assets/favicon.png differ
diff --git a/apps/landing/assets/favicon.svg b/apps/landing/assets/favicon.svg
new file mode 100644
index 000000000..f84f8b4f5
--- /dev/null
+++ b/apps/landing/assets/favicon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8" ?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1024" height="1027" viewBox="0 0 1024 1027"><path fill="#010000" d="M0 0L1024 0L1024 1027L0 1027L0 0ZM809.41 430.401C804.447 430.071 797.75 430.178 792.638 430.131C791.182 427.318 788.049 423.937 787.993 420.713C787.913 416.116 806.108 399.621 807.942 388.056C808.753 382.935 807.886 377.412 804.705 373.216C807.658 381.649 808.832 385.981 804.923 394.844C801.2 403.285 789.998 413.291 786.194 420.376C788.149 424.207 789.999 427.553 792.15 431.282C798.923 431.375 802.666 431.405 809.41 430.401ZM582.414 88.0044C577.702 86.3735 568.336 86.7922 563.524 88.2952C567.489 88.393 579.048 88.6361 582.414 88.0044Z"/><path fill="#49DF9F" d="M582.414 88.0044C611.688 92.7465 647.085 100.019 662.083 128.733C664.549 133.455 667.772 137.395 671.777 140.845C693.1 160.56 707.346 188.637 713.276 216.869C715.595 227.911 715.037 237.55 719.565 248.22C721.86 253.628 721.062 265.034 720.096 270.929C719.656 273.567 719.192 276.201 718.706 278.831C731.117 291.154 747.982 295.521 745.671 317.267C745.055 323.063 735.434 343.615 735.917 346.577C739.799 346.649 742.623 344.927 746.144 343.472C760.077 337.714 771.789 330.654 784.346 343.972C792.522 352.644 798.075 363.947 804.705 373.216C807.658 381.649 808.832 385.981 804.923 394.844C801.2 403.285 789.998 413.291 786.194 420.376C788.149 424.207 789.999 427.553 792.15 431.282C798.923 431.375 802.666 431.405 809.41 430.401C836.216 425.606 840.958 446.294 846.804 466.26C854.469 492.439 845.272 499.921 823.85 512.784C819.272 515.532 817.741 516.833 818.895 522.446C822.444 536.83 849.708 531.017 856.127 545.564C861.782 558.509 861.802 576.339 859.34 590.163C856.073 608.512 837.28 605.453 827.014 612.026C833.796 617.122 848.5 619.673 853.139 629.383C858.652 640.923 852.537 662.252 849.447 674.216C844.483 693.391 827.338 692.968 811.278 693.064C802.717 693.116 803.291 693.313 801.01 701.39C808.845 711.428 827.285 722.129 824.882 736.37C822.767 748.901 809.344 773.445 800.026 782.087C790.662 790.771 768.187 782.977 756.777 781.433C753.828 788.145 780.962 806.436 757.808 829.572C732.264 855.096 723.982 864.95 689.482 839.209C688.392 838.396 687.406 838.488 686.251 838.803C685.568 842.322 688.772 856.297 688.702 861.243C688.62 866.942 687.774 875.099 683.122 879.13C669.737 889.514 653.206 899.189 636.225 900.614C622.022 901.806 610.113 876.966 604.484 876.72C600.272 881.793 603.943 909.951 586.547 915.187C571.047 919.852 555.229 924.762 538.884 921.265C527.642 918.86 520.911 892.019 516.983 890.497C510.966 893.478 506.383 922.204 490.152 920.859C473.454 919.476 456.91 918.651 442.454 909.266C432.258 902.647 433.888 877.092 431.73 875.343C426.908 876.179 414.909 899.173 400.954 897.516C383.7 895.467 370.923 886.897 357.673 877.288C344.702 867.882 355.994 839.786 352.522 836.63C348.879 837.282 345.987 839.539 343.026 841.649C335.204 847.224 328.02 850.242 318.986 853.229C313.056 851.098 309.077 850.257 303.818 845.701C292.47 835.372 276.929 824.56 275.131 808.313C274.256 800.407 284.592 786.358 284.097 782.41C276.458 782.656 266.281 787.278 258.04 786.847C241.28 785.841 234.306 766.718 227.212 754.938C214.353 733.582 221.405 721.859 239.276 707.724C245.224 703.019 246.208 698.816 240.4 693.51C200.194 690.37 201 694.732 191.856 653.542C183.426 615.566 215.341 620.486 217.458 611.405C210.748 608.205 196.413 605.396 191.295 600.248C182.705 591.609 184.934 569.414 185.785 558.128C186.327 550.935 189.791 546.167 194.321 541.295C188.796 538.182 183.03 536.436 177.181 532.755C167.112 526.419 161.103 517.969 158.514 506.325C157.578 501.221 156.152 493.312 157.692 488.192C160.384 479.241 159.1 472.758 157.845 463.6C155.789 448.602 159.399 440.015 167.303 427.632C167.59 419.477 166.372 414.59 168.758 406.377C174.497 386.62 189.785 383.056 206.769 378.059C204.999 357.795 203.184 342.431 215.015 324.106C223.952 310.265 242.932 301.118 257.958 311.082C267.241 317.238 270.567 329.78 272.084 340.078C276.473 338.766 280.772 337.25 285.166 336.017C291.437 337.824 296.324 338.731 302.424 341.315C305.541 342.637 319.286 350.415 320.954 346.263C325.084 335.985 312.648 321.099 311.624 310.315C311.253 306.416 310.675 303.161 312.343 299.461C319.171 286.139 337.812 274.618 350.726 268.354C362.69 262.551 375.451 273.543 383.566 280.833C389.126 285.14 387.797 286.245 393.533 283.988C407.017 278.684 403.102 272.377 406.019 259.9C408.014 251.367 411.164 242.567 414.171 233.512C399.646 226.726 381.003 217.325 375.109 201.926C366.156 178.734 392.737 166.428 411.198 164.399C431.157 162.206 425.434 162.195 432.325 146.024C441.661 124.114 469.119 104.197 493.65 108.548C496.488 109.051 502.358 111.797 505.355 113.033C518.679 109.866 522.907 103.67 534.424 97.1026C543.757 91.7802 553.151 90.2464 563.524 88.2952C567.489 88.393 579.048 88.6361 582.414 88.0044Z"/><path fill="#010000" d="M503.901 126.392C506.936 124.585 509.172 123.544 512.551 122.495C515.569 121.559 519.713 120.503 522.354 118.862C527.962 115.376 532.544 110.325 538.469 107.228C558.932 96.3151 583.228 97.8943 604.916 103.581C623.7 108.507 641.957 115.362 652.223 132.808C654.145 135.829 655.649 139.735 657.772 142.565C660.281 145.91 664.058 148.588 667.046 151.498C691.343 175.157 704.491 209.934 705.92 243.464C706.039 246.255 708.37 248.604 709.506 251.011C711.52 256.194 710.675 266.184 709.426 271.583C708.343 276.263 706.326 278.272 703.317 281.436C711.296 287.478 734.153 301.669 735.174 310.824C736.055 318.729 726.023 342.123 722.177 349.777C725.551 354.108 728.923 357.383 733.058 360.988C738.708 357.979 764.059 345.854 770.058 347.598C777.773 349.842 790.492 370.901 794.763 378.194C796.229 380.696 797.635 385.645 796.25 388.598C792.046 397.56 779.768 411.907 772.67 418.508C777.925 426.736 782.125 434.154 785.736 443.335C792.661 442.584 815.592 441.013 822.114 441.363C829.41 445.629 831.288 452.871 833.515 460.687C835.837 468.833 839.729 479.959 838.288 488.292C832.764 496.675 815.209 504.755 807.079 510.794C808.323 519.986 809.639 529.167 811.026 538.338C818.504 540.124 840.148 545.484 846.117 549.353C851.196 557.126 849.786 579.131 848.996 588.366C848.218 597.469 820.071 602.015 812.077 605.445L811.36 615.604L812.023 616.022C819.36 620.599 835.776 627.218 841.065 631.792C842.857 633.341 844.169 635.309 844.688 637.638C845.985 643.455 839.875 672.879 836.024 678.041C835.287 679.029 834.283 679.943 833.274 680.647C819.772 682.921 808.672 681.666 796.184 682.944C794.704 688.763 790.403 699.101 788.121 705.15C793.837 710.255 814.891 727.544 814.381 734.707C813.75 743.557 798.166 770.819 790.68 775.81C781.067 776.14 761.017 771.722 751.685 768.701C748.65 772.019 745.553 775.886 743.278 779.764C758.212 811.902 765.865 810.656 736.829 835.09C721.739 847.788 721.487 846.578 705.044 836.969C699.192 833.381 692.752 829.587 687.107 825.777C683.837 828.081 677.309 832.458 674.603 835.043C675.701 842.139 680.696 866.342 676.593 870.775C670.157 877.728 648.039 888.438 638.16 889.972C634.176 890.591 631.592 889.379 628.766 886.857C621.126 880.039 614.775 871.086 607.802 863.724C604.233 864.86 598.237 866.576 594.976 868.007C593.486 875.733 590.953 901.017 585.489 903.848C576.467 908.522 553.832 911.764 543.308 911.861C538.884 909.612 537.806 908.356 535.572 903.832C533.313 899.602 524.465 880.071 522.675 878.221L511.128 877.822C506.288 886.192 499.789 904.541 493.704 909.591C488.682 911.141 478.734 909.219 473.384 908.357C465.468 907.038 447.204 904.796 445.533 895.366C443.831 885.757 442.812 875.275 441.674 865.498C437.993 864.028 432.992 862.512 429.15 861.225C424.977 867.041 407.631 888.947 400.323 887.072C390.768 884.621 369.137 874.936 362.587 867.544C359.27 863.801 364.71 839.077 365.86 833.418C362.148 829.925 357.254 826.717 353.042 823.745C340.814 829.838 332.679 837.455 319.373 842.201C310.436 839.775 304.812 832.516 298.272 826.678C283.261 813.277 282.292 808.24 292.964 791.255C294.717 788.464 298.397 780.66 299.957 777.273C298.239 773.964 296.08 771.587 293.557 768.911C284.857 771.532 269.013 774.795 259.774 776.01C256.206 776.48 252.7 775.027 250.401 772.272C244.643 765.372 230.829 742.465 231.379 734.058C231.821 727.299 252.024 709.599 257.483 704.646C254.508 697.893 251.909 690.158 249.248 683.163C238.078 682.686 224.081 682.492 213.085 680.59C211.778 680.363 210.702 679.38 209.778 678.473C206.455 673.553 203.856 659.868 202.3 653.387C200.82 644.545 197.662 635.883 206.837 630.406C215.375 625.309 225.983 621.638 234.146 616.249L234.734 615.856C234.376 612.485 234.221 609.112 234.031 605.727C224.31 600.752 206.657 598.981 198.951 593C194.324 589.409 195.96 571.969 195.914 565.968C194.996 548.584 204.064 549.29 217.637 544.956C220.653 543.992 224.551 542.909 224.004 538.959C221.971 537.628 209.387 535.096 205.892 534.007C201.648 532.684 198.767 531.675 194.439 529.864C190.649 528.109 188.003 526.939 184.511 524.696C180.69 522.514 176.303 518.625 173.817 514.985C172.795 513.59 172.342 512.634 171.558 511.12C170.762 509.649 170.109 508.105 169.606 506.509C167.045 498.585 168.064 484.979 171.756 477.712L172.163 476.412C168.11 467.248 167.024 458.654 169.045 448.843C171.387 440.472 176.839 436.815 178.45 429.131C178.808 425.272 177.533 420.62 177.796 416.833C179.523 392.001 201.126 389.327 220.23 389.203C217.692 380.931 216.21 372.371 215.821 363.727C215.1 349.66 217.829 336.709 227.502 326.056C229.666 323.988 230.864 323.054 233.238 321.286C241.688 316.141 249.93 315.506 256.215 324.306C260.432 328.268 262.277 344.314 262.955 350.167C263.398 353.994 262.822 361.664 264.826 364.907C268.012 365.391 274.858 349.294 281.928 347.769C290.167 345.992 312.301 357.452 320.249 361.024C324.929 357.085 332.119 349.846 336.604 345.363C330.931 335.915 324.782 318.844 321.84 308.063C319.391 299.089 351.014 278.417 358.046 277.78C365.03 277.148 382.128 294.146 388.012 299.228C397.676 293.463 403.354 290.722 413.544 286.14C414.006 270.421 416.578 257.044 422.111 242.16C423.628 238.079 427.457 232.403 429.458 228.138L428.801 227.44C423.649 225.626 419.647 224.111 414.603 221.947C388.526 211.625 364.221 187.118 406.974 176.438C418.613 173.531 426.261 172.685 438.281 172.529C438.003 150.346 444.564 142.035 461.13 127.969C476.704 118.546 488.276 114.431 503.901 126.392Z"/><defs><linearGradient id="gradient_0" gradientUnits="userSpaceOnUse" x1="598.75024" y1="766.95264" x2="693.00293" y2="866.55798"><stop offset="0" stop-color="#504F3F"/><stop offset="1" stop-color="#656057"/></linearGradient></defs><path fill="url(#gradient_0)" d="M778.64 689.573C779.315 691.647 776.32 702.629 776.527 708.287C784.077 719.613 785.214 722.973 797.965 729.331C800.357 730.524 803.362 732.628 806.001 733.32L806.085 733.236C805.39 731.705 805.092 731.583 803.891 730.428L804.182 730.05L804.635 729.999C806.426 731.751 807.221 732.887 808.682 734.888C806.144 742.041 793.191 765.133 788.321 770.29L787.689 770.249C774.978 769.3 762.699 764.127 750.246 762.399C747.27 761.987 737.483 776.027 736.112 778.624C738.489 786.625 747.592 801.978 751.183 811.379C748.14 817.492 729.996 833.861 723.253 837.215C720.661 838.505 716.165 836.074 713.657 834.681C711.845 833.67 710.04 832.647 708.241 831.612C707.091 833.994 706.704 834.948 705.044 836.969C699.192 833.381 692.752 829.587 687.107 825.777C683.837 828.081 677.309 832.458 674.603 835.043C675.701 842.139 680.696 866.342 676.593 870.775C670.157 877.728 648.039 888.438 638.16 889.972C634.176 890.591 631.592 889.379 628.766 886.857C621.126 880.039 614.775 871.086 607.802 863.724C604.233 864.86 598.237 866.576 594.976 868.007C593.486 875.733 590.953 901.017 585.489 903.848C576.467 908.522 553.832 911.764 543.308 911.861C538.884 909.612 537.806 908.356 535.572 903.832C533.313 899.602 524.465 880.071 522.675 878.221L511.128 877.822C506.288 886.192 499.789 904.541 493.704 909.591C488.682 911.141 478.734 909.219 473.384 908.357C476.137 905.951 476.824 906.276 480.52 905.826L480.326 903.239L479.266 902.453C473.004 902.665 458.076 898.938 452.021 895.847C451.135 891.331 450.631 885.505 450.103 880.845L449.161 873.365C448.554 869.191 448.081 863.354 445.831 859.869C443.933 852.26 437.113 849.79 430.57 843.924C416.328 851.884 418.082 854.203 410.215 866.209C410.157 865.695 410.095 865.181 410.029 864.669C409.165 858.152 407.654 855.986 402.638 852.095C402.599 851.834 403.264 848.291 403.254 847.017C407.187 838.253 411.542 848.509 414.501 849.093C416.206 849.429 423.467 844.105 425.126 842.576C424.915 840.963 420.814 833.729 419.774 831.748C421.169 827.542 419.62 825.644 421.069 823.16C427.232 825.526 439.619 831.281 445.426 832.631C446.578 831.991 449.542 832.699 451.53 832.811C450.776 832.226 450.092 831.68 449.362 831.066L449.373 830.215C467.033 835.745 494.198 841.069 512.856 841.015C516.489 840.825 521.545 840.96 525.273 840.932C525.954 835.928 526.452 834.705 530.113 831.288C534.072 828.53 536.747 826.84 541.02 824.718C549.228 822.723 555.695 827.096 563.441 825.098C566.767 824.24 565.303 820.072 564.215 818.052C570.21 817.215 580.555 814.153 586.872 812.558C597.452 808.912 606.962 805.533 617.138 800.848C623.137 798.085 629.021 794.822 634.926 792.111C646.047 796.854 650.794 796.976 662.929 796.742C649.649 807.691 625.827 818.727 609.68 825.486C606.962 826.624 598.77 828.79 598.015 830.957C601.73 832.659 620.727 824.361 625.355 822.568C626.933 821.336 634.294 818.006 636.502 816.955C649.13 809.906 659.7 803.287 671.61 795.526C685.608 786.403 689.237 787.892 698.341 772.314L699.122 772.039C702.455 768.593 705.703 765.067 708.864 761.462C711.121 759.014 712.685 757.246 714.721 754.611C719.777 748.543 724.561 742.253 729.061 735.761C730.707 733.406 738.257 721.826 739.971 720.842C754.7 712.386 766.346 701.192 778.64 689.573Z"/><path fill="#87837C" d="M699.122 772.039C700.913 772.645 701.822 772.709 702.936 774.342C703.767 777.524 702.335 780.526 700.93 782.617C698.843 785.726 690.89 798.959 696.966 800.832C711.937 805.446 715.078 787.233 720.332 778.236C723.106 773.486 726.207 769.797 729.178 766.938C728.836 773.225 728.612 775.372 729.919 781.481C728.696 782.747 727.266 783.851 727.071 785.509C727.401 786.269 728.977 789.087 729.026 789.338C725.899 792.18 724.344 795.229 723.332 799.339C722.556 802.06 721.959 804.428 721.983 807.43C721.673 807.666 721.362 807.903 721.052 808.14L719.129 808.328C718.29 810.076 720.684 822.108 715.519 825.168C706.819 825.728 692.567 811.344 682.962 812.439C679.358 812.849 664.745 824.065 662.17 827.167C660.876 831.489 661.52 834.221 662.129 838.614C663.676 848.636 665.461 860.372 654.771 866.388C648.689 869.811 641.346 873.631 634.657 875.675C628.406 868.362 621.521 855.614 613.435 851.221C607.43 847.96 596.46 851.426 590.204 853.317C583.98 855.198 581.542 859.565 580.028 865.615C579.483 867.793 580.075 868.495 578.932 870.919C576.22 872.211 573.426 870.513 572.287 867.834C564.478 849.473 597.262 850.345 589.439 833.839L588.003 831.442C591.656 827.261 610.249 823.974 607.792 814.038C603.246 809.495 595.007 816.831 587.204 813.31L586.872 812.558C597.452 808.912 606.962 805.533 617.138 800.848C623.137 798.085 629.021 794.822 634.926 792.111C646.047 796.854 650.794 796.976 662.929 796.742C649.649 807.691 625.827 818.727 609.68 825.486C606.962 826.624 598.77 828.79 598.015 830.957C601.73 832.659 620.727 824.361 625.355 822.568C626.933 821.336 634.294 818.006 636.502 816.955C649.13 809.906 659.7 803.287 671.61 795.526C685.608 786.403 689.237 787.892 698.341 772.314L699.122 772.039Z"/><path fill="#525245" d="M625.355 822.568C626.933 821.336 634.294 818.006 636.502 816.955C648.92 821.758 640.301 831.955 632.077 834.747C621.736 838.257 622.682 829.908 625.942 823.075L625.355 822.568Z"/><path fill="#525245" d="M705.834 806.829L708.338 806.91C712.375 808.977 711.547 813.384 707.047 814.404C704.536 813.406 701.44 812.512 701.527 809.462C702.689 807.796 703.837 807.621 705.834 806.829Z"/><path fill="#6C685A" d="M421.069 823.16C427.232 825.526 439.619 831.281 445.426 832.631C446.578 831.991 449.542 832.699 451.53 832.811C450.776 832.226 450.092 831.68 449.362 831.066L449.373 830.215C467.033 835.745 494.198 841.069 512.856 841.015C520.446 842.2 534.594 840.947 542.39 840.295L544.056 841.473C544.113 842.811 544.231 842.127 542.986 843.505C539.573 843.581 530.694 843.936 527.443 844.461C526.277 848.638 523.2 850.27 522.574 852.761C524.397 855.083 524.517 851.795 524.658 854.822L523.746 856.359C524.369 858.228 524.704 858.652 525.769 860.355C518.201 860.955 506.773 861.04 502.191 867.025C499.582 870.433 498.263 875.567 496.925 876.804C494.847 876.806 493.239 876.591 491.402 877.481C490.309 878.986 490.486 878.203 490.517 879.8C493.258 881.082 494.132 879.494 495.886 880.995C495.799 884.131 492.608 886.107 489.458 885.63C479.622 884.14 481.217 898.338 480.065 900.075C477.622 901.269 476.422 900.439 474.349 901.093C476.337 901.372 477.94 901.476 479.807 902.244L479.266 902.453C473.004 902.665 458.076 898.938 452.021 895.847C451.135 891.331 450.631 885.505 450.103 880.845L449.161 873.365C448.554 869.191 448.081 863.354 445.831 859.869C443.933 852.26 437.113 849.79 430.57 843.924C416.328 851.884 418.082 854.203 410.215 866.209C410.157 865.695 410.095 865.181 410.029 864.669C409.165 858.152 407.654 855.986 402.638 852.095C402.599 851.834 403.264 848.291 403.254 847.017C407.187 838.253 411.542 848.509 414.501 849.093C416.206 849.429 423.467 844.105 425.126 842.576C424.915 840.963 420.814 833.729 419.774 831.748C421.169 827.542 419.62 825.644 421.069 823.16Z"/><path fill="#010000" d="M445.426 832.631C446.578 831.991 449.542 832.699 451.53 832.811C450.776 832.226 450.092 831.68 449.362 831.066L449.373 830.215C467.033 835.745 494.198 841.069 512.856 841.015C520.446 842.2 534.594 840.947 542.39 840.295L544.056 841.473C544.113 842.811 544.231 842.127 542.986 843.505C539.573 843.581 530.694 843.936 527.443 844.461C498.762 845.015 472.73 842.328 445.426 832.631Z"/><path fill="#51504B" d="M456.571 875.108C457.915 873.57 459.317 873.409 461.375 873.312C463.342 875.492 461.801 880.696 459.392 881.974C457.239 881.146 456.741 877.842 456.126 875.715L456.571 875.108Z"/><path fill="#5B5850" d="M449.161 873.365C452.338 873.718 453.569 873.767 456.571 875.108L456.126 875.715C453.931 876.242 452.176 876.353 450.714 877.948C450.235 879.346 450.228 879.373 450.103 880.845L449.161 873.365Z"/><path fill="#5B5850" d="M473.471 885.667L474.807 886.259C477.416 889.683 479.944 892.175 477.086 896.115C475.998 896.571 476.412 896.462 475.227 896.503C471.666 894.195 471.859 889.167 473.471 885.667Z"/><path fill="#5B5850" d="M443.845 837.135C446.519 837.546 446.59 837.536 447.636 840.045C447.461 841.902 447.568 842.052 446.627 843.713C444.335 843.517 443.615 843.693 442.211 841.788C442.128 839.977 442.995 838.79 443.845 837.135Z"/><path fill="#51504B" d="M427.524 838.366C431.761 839.31 434.191 839.627 434.19 844.241C429.813 844.331 427.549 843.066 427.524 838.366Z"/><path fill="#51504B" d="M462.453 857.808C464.616 858.263 464.885 858.74 465.18 860.706C464.506 862.841 464.158 863.02 462.568 864.715C460.691 863.576 460.119 863.21 459.595 861.296C460.061 859.588 461.09 858.99 462.453 857.808Z"/><path fill="#51504B" d="M489.054 852.724C493.206 853.891 491.871 857.666 489.556 860.012C487.582 859.046 487.186 858.805 486.629 856.795C487.091 854.733 487.614 854.396 489.054 852.724Z"/><path fill="#0D0E0F" d="M686.949 818.672C692.954 821.462 702.693 827.832 708.241 831.612C707.091 833.994 706.704 834.948 705.044 836.969C699.192 833.381 692.752 829.587 687.107 825.777C683.837 828.081 677.309 832.458 674.603 835.043C675.701 842.139 680.696 866.342 676.593 870.775C670.157 877.728 648.039 888.438 638.16 889.972C634.176 890.591 631.592 889.379 628.766 886.857C621.126 880.039 614.775 871.086 607.802 863.724C604.233 864.86 598.237 866.576 594.976 868.007C593.486 875.733 590.953 901.017 585.489 903.848C576.467 908.522 553.832 911.764 543.308 911.861C538.884 909.612 537.806 908.356 535.572 903.832C533.313 899.602 524.465 880.071 522.675 878.221L511.128 877.822C506.288 886.192 499.789 904.541 493.704 909.591C488.682 911.141 478.734 909.219 473.384 908.357C476.137 905.951 476.824 906.276 480.52 905.826L480.326 903.239C484.08 903.733 486.931 903.682 490.732 903.682C497.848 892.734 501.587 880.928 507.585 871.583C512.376 871.406 521.929 872.288 526.963 872.644C532.595 880.752 537.952 896.748 544.39 905.841C553.945 904.828 563.607 903.187 573.077 901.54C576.815 900.891 582.043 899.706 583.236 895.457C586.134 885.137 586.516 873.391 589.69 863.175C597.14 860.128 602.73 858.027 610.74 857.241C613.082 859.227 615.758 862.947 617.812 865.39C623.78 872.485 628.365 878.712 635.726 884.435C644.815 882.238 666.228 872.949 672.554 866.313C671.066 855.024 669.314 844.032 667.737 832.804C671.206 829.29 682.705 821.054 686.949 818.672Z"/><path fill="#0F1118" d="M480.52 905.826C483.82 906.064 486.635 906.156 489.649 907.639C490.99 908.298 492.347 909.203 493.704 909.591C488.682 911.141 478.734 909.219 473.384 908.357C476.137 905.951 476.824 906.276 480.52 905.826Z"/><path fill="#0F1118" d="M522.675 878.221C524.053 878.474 523.722 878.133 524.613 879.494C527.129 883.337 529.351 887.833 531.506 891.911L530.826 889.533C533.891 895.109 535.56 897.542 535.572 903.832C533.313 899.602 524.465 880.071 522.675 878.221Z"/><path fill="#87837C" d="M560.059 842.345C561.605 844.699 561.123 847.512 563.526 851.598C561.616 854.645 558.251 860.94 554.975 861.925C551.836 861.515 548.909 857.13 549.079 854.458C549.302 850.92 556.94 844.751 559.551 842.33L560.059 842.345Z"/><defs><linearGradient id="gradient_1" gradientUnits="userSpaceOnUse" x1="553.11737" y1="835.0083" x2="559.82391" y2="844.26617"><stop offset="0" stop-color="#292C25"/><stop offset="1" stop-color="#4C493D"/></linearGradient></defs><path fill="url(#gradient_1)" d="M542.39 840.295C548.544 839.712 553.681 840.15 559.442 839.428C562.735 839.016 564.606 838.115 568.32 838.121L568.921 838.549C566.257 841.451 563.615 841.042 560.059 842.345L559.551 842.33C556.245 841.567 548.113 843.768 542.986 843.505C544.231 842.127 544.113 842.811 544.056 841.473L542.39 840.295Z"/><path fill="#5B5850" d="M723.332 799.339C724.344 795.229 725.899 792.18 729.026 789.338C729.496 792.368 726.861 796.08 725.054 798.541C724.834 798.84 724.611 799.136 724.384 799.429L723.332 799.339Z"/><path fill="#424039" d="M589.439 833.839C587.608 834.821 585.952 836.106 584.16 834.702L584.256 833.427C585.192 831.953 585.167 831.731 586.724 830.888L588.003 831.442L589.439 833.839Z"/><path fill="#5B5850" d="M662.17 827.167C664.921 831.822 662.701 833.86 662.129 838.614C661.52 834.221 660.876 831.489 662.17 827.167Z"/><path fill="#51504B" d="M785.876 724.191C793.257 723.816 796.202 734.623 783.731 737.138C770.587 735.555 777.318 727.138 785.876 724.191Z"/><path fill="#51504B" d="M741.803 806.767L742.31 806.901C744.749 810.025 742.977 813.206 740.264 815.429C738.864 813.897 737.54 812.156 736.244 810.524C739.024 809.121 739.519 808.857 741.803 806.767Z"/><path fill="#51504B" d="M770.135 730.514C771.862 731.839 772.242 732.195 771.875 734.228C770.586 735.814 769.852 735.95 767.915 736.825C766.236 736.062 766.907 736.61 765.823 735.119L766.026 733.987C767.418 732.087 768.096 731.832 770.135 730.514Z"/><path fill="#5B5850" d="M735.454 800.742L735.973 801.843C735.503 804.16 735.443 807.05 733.964 808.134C732.895 806.618 732.521 806.084 732.533 804.289C733.277 802.354 733.796 802.139 735.454 800.742Z"/><path fill="#2C3237" d="M226.851 337.323C233.985 324.034 249.722 314.888 254.221 336.008C259.375 360.206 254.886 382.008 270.297 403.269C285.046 423.617 293.263 450.722 282.74 474.864C281.901 476.791 275.2 482.884 279.307 485.791C283.556 485.195 286.752 478.55 289.508 479.809C290.659 484.036 284.13 500.044 281.662 504.055C271.633 520.348 254.806 539.021 234.269 539.913L229.253 534.01C219.992 530.69 212.572 530.721 203.711 526.654C197.834 531.531 198.684 527.479 194.439 529.864C190.649 528.109 188.003 526.939 184.511 524.696C180.69 522.514 176.303 518.625 173.817 514.985C172.795 513.59 172.342 512.634 171.558 511.12C170.762 509.649 170.109 508.105 169.606 506.509C167.045 498.585 168.064 484.979 171.756 477.712L172.163 476.412C168.11 467.248 167.024 458.654 169.045 448.843C171.387 440.472 176.839 436.815 178.45 429.131C178.808 425.272 177.533 420.62 177.796 416.833C179.523 392.001 201.126 389.327 220.23 389.203C217.692 380.931 216.21 372.371 215.821 363.727C215.1 349.66 217.829 336.709 227.502 326.056C227.425 332.101 224.824 331.962 226.851 337.323Z"/><path fill="#0D0E0F" d="M227.502 326.056C227.425 332.101 224.824 331.962 226.851 337.323C220.102 353.271 220.164 373.036 226.283 389.031C239.4 392.439 251.657 396.699 258.608 409.112C266.492 423.19 266.053 435.81 254.761 447.5C260.627 457.2 263.403 468.535 257.635 479.076C256.607 480.385 256.375 480.463 256.066 482.117C253.962 485.533 251.549 486.75 248.189 488.772C250.951 495.027 252.291 501.938 249.784 508.541C247.854 513.632 243.973 517.742 239 519.959C231.734 523.189 204.149 524.966 202.033 516.082C202.613 515.194 202.697 514.866 203.988 514.776C215.083 513.998 223.203 518.827 234.367 514.357C245.463 509.913 248.827 494.723 237.818 488.22C229.761 483.801 220.202 481.679 211.093 480.817C207.478 480.474 198.713 481.741 197.127 478.298C197.939 471.725 206.239 474.053 210.756 474.077C224.265 474.148 232.649 478.978 244.537 483.603C254.298 475.65 256.81 460.639 247.97 450.968C239.777 442.004 225.3 437.739 213.59 436.139C210.821 435.76 197.792 437.812 198.996 432.836C210.259 422.638 239.111 435.471 249.561 442.756C253.639 438.848 257.783 434.024 257.419 427.916C255.943 403.125 232.89 394.748 211.112 395.602C197.148 396.149 183.631 402.671 183.942 419.028C184.007 422.48 185.369 426.523 184.905 430.044C183.48 438.259 176.697 442.316 174.734 450.899C172.292 461.58 175.865 467.823 178.563 477.529C177.508 481.33 175.893 484.756 175.19 488.629C170.924 512.138 184.867 519.405 203.711 526.654C197.834 531.531 198.684 527.479 194.439 529.864C190.649 528.109 188.003 526.939 184.511 524.696C180.69 522.514 176.303 518.625 173.817 514.985C172.795 513.59 172.342 512.634 171.558 511.12C170.762 509.649 170.109 508.105 169.606 506.509C167.045 498.585 168.064 484.979 171.756 477.712L172.163 476.412C168.11 467.248 167.024 458.654 169.045 448.843C171.387 440.472 176.839 436.815 178.45 429.131C178.808 425.272 177.533 420.62 177.796 416.833C179.523 392.001 201.126 389.327 220.23 389.203C217.692 380.931 216.21 372.371 215.821 363.727C215.1 349.66 217.829 336.709 227.502 326.056Z"/><path fill="#0F1118" d="M171.558 511.12C170.762 509.649 170.109 508.105 169.606 506.509C167.045 498.585 168.064 484.979 171.756 477.712C172.387 482.272 171.697 488.647 171.407 493.456C171.094 498.648 172.233 506.395 171.558 511.12Z"/><path fill="#0F1118" d="M172.163 476.412C168.11 467.248 167.024 458.654 169.045 448.843C170.175 449.652 170.795 449.771 170.85 451.525C171.103 459.685 171.898 468.311 172.163 476.412Z"/><path fill="#0D0E0F" d="M173.817 514.985C175.604 514.25 175.02 514.538 176.329 512.814C176.956 513.575 177.461 514.495 177.66 515.432C178.731 520.453 184.198 520.695 185.868 522.959C185.36 523.509 184.922 524.07 184.511 524.696C180.69 522.514 176.303 518.625 173.817 514.985Z"/><path fill="#0F1118" d="M257.635 479.076C269.329 482.191 270.485 489.391 269.435 500.147C266.894 492.19 265.552 484.27 256.066 482.117C256.375 480.463 256.607 480.385 257.635 479.076Z"/><defs><linearGradient id="gradient_2" gradientUnits="userSpaceOnUse" x1="352.2236" y1="801.86792" x2="530.24371" y2="732.66614"><stop offset="0" stop-color="#524E3E"/><stop offset="1" stop-color="#86827E"/></linearGradient></defs><path fill="url(#gradient_2)" d="M274.507 611.122C280.27 616.205 288.995 623.463 294.15 628.672C297.705 648.403 302.476 658.628 308.646 676.708C311.869 685.028 319.873 698.865 324.301 707.221C325.269 708.771 326.398 710.702 327.431 712.165C334.359 722.987 339.392 729.75 347.108 739.806C358.727 753.544 365.871 759.8 379.488 771.611C381.033 772.615 390.822 779.295 391.793 780.31C403.348 788.931 410.995 792.18 422.866 798.994C428.03 801.104 433.191 803.527 438.327 805.749C439.913 806.435 443.124 807.494 444.33 808.113C447.993 809.321 451.648 810.557 455.293 811.82C472.369 816.682 490.611 820.914 508.451 821.587C527.893 822.395 544.937 821.657 564.215 818.052C565.303 820.072 566.767 824.24 563.441 825.098C555.695 827.096 549.228 822.723 541.02 824.718C536.747 826.84 534.072 828.53 530.113 831.288C526.452 834.705 525.954 835.928 525.273 840.932C521.545 840.96 516.489 840.825 512.856 841.015C494.198 841.069 467.033 835.745 449.373 830.215L449.362 831.066C450.092 831.68 450.776 832.226 451.53 832.811C449.542 832.699 446.578 831.991 445.426 832.631C439.619 831.281 427.232 825.526 421.069 823.16L420.803 822.879C416.386 820.964 411.801 818.099 407.506 815.855C387.512 805.414 369.442 791.703 353.39 775.909C349.284 771.869 345.209 767.41 340.95 763.572C338.484 760.519 335.567 757.493 332.88 754.598C331.243 752.416 328.504 749.414 326.661 747.272C311.011 727.249 301.097 708.358 290.109 685.628C290.229 684.172 290.456 684.217 291.363 682.895L292.645 682.803L293.619 684.199C296.734 671.37 293.008 666.566 289.548 654.509C289.193 653.272 289.372 648.155 289.355 646.533C289.271 638.532 285.686 632.413 277.337 631.243L276.629 626.931C275.947 621.959 274.995 616.04 274.507 611.122Z"/><path fill="#87837C" d="M274.507 611.122C280.27 616.205 288.995 623.463 294.15 628.672C297.705 648.403 302.476 658.628 308.646 676.708C311.869 685.028 319.873 698.865 324.301 707.221C322.394 708.069 321.234 708.403 319.759 709.819C318.506 714.243 318.168 718.554 320.467 722.746C323.435 728.155 330.307 730.153 333.083 734.819C334.41 737.048 334.385 744.27 335.584 747.003C336.963 750.15 339.735 750.512 340.429 753.411C340.065 754.929 340.14 754.875 339.243 756.128C318.75 732.023 306.364 713.254 293.619 684.199C296.734 671.37 293.008 666.566 289.548 654.509C289.193 653.272 289.372 648.155 289.355 646.533C289.271 638.532 285.686 632.413 277.337 631.243L276.629 626.931C275.947 621.959 274.995 616.04 274.507 611.122Z"/><path fill="#6C685A" d="M308.646 676.708C311.869 685.028 319.873 698.865 324.301 707.221C322.394 708.069 321.234 708.403 319.759 709.819C319.858 709.212 320.466 706.727 320.527 706.378C320.869 704.406 315.761 703.921 314.08 701.437C309.915 695.28 306.569 686.351 306.694 678.863C306.714 677.692 307.674 677.381 308.646 676.708Z"/><path fill="#0D0E0F" d="M292.645 682.803L293.619 684.199C306.364 713.254 318.75 732.023 339.243 756.128C363.697 786.281 403.098 813.854 439.823 826.752C442.55 827.71 447.008 828.878 449.373 830.215L449.362 831.066C450.092 831.68 450.776 832.226 451.53 832.811C449.542 832.699 446.578 831.991 445.426 832.631C439.619 831.281 427.232 825.526 421.069 823.16L420.803 822.879C416.386 820.964 411.801 818.099 407.506 815.855C387.512 805.414 369.442 791.703 353.39 775.909C349.284 771.869 345.209 767.41 340.95 763.572C338.484 760.519 335.567 757.493 332.88 754.598C331.243 752.416 328.504 749.414 326.661 747.272C311.011 727.249 301.097 708.358 290.109 685.628C290.229 684.172 290.456 684.217 291.363 682.895L292.645 682.803Z"/><path fill="#87837C" d="M444.33 808.113C447.993 809.321 451.648 810.557 455.293 811.82C472.369 816.682 490.611 820.914 508.451 821.587L508.569 822.265C507.321 822.377 506.076 822.51 504.833 822.665C504.652 824.959 510.997 825.345 513.158 827.083C515.266 828.778 515.859 832.526 517.248 835.385C519.799 835.221 522.906 834.626 523.881 837.374C521.447 839.515 509.295 837.807 505.665 837.441L504.758 835.943C490.428 811.8 463.828 837.166 449.195 815.641C447.833 813.637 444.835 810.336 444.33 808.113Z"/><path fill="#87837C" d="M347.108 739.806C358.727 753.544 365.871 759.8 379.488 771.611C376.812 771.856 374.07 770.54 371.487 769.824C359.701 766.559 353.353 760.091 345.154 751.57C346.201 747.674 346.423 741.663 347.108 739.806Z"/><path fill="#87837C" d="M391.793 780.31C403.348 788.931 410.995 792.18 422.866 798.994C420.975 800.357 420.638 800.359 418.24 800.638L417.289 800.739C406.958 801.895 396.872 794.812 389.921 787.716C390.504 785.075 390.976 782.911 391.793 780.31Z"/><path fill="#87837C" d="M530.113 831.288C529.519 831.01 529.812 831.185 529.146 830.633L528.607 830.178C525.383 830.121 523.172 830.115 520.46 828.303L520.442 827.419C523.466 824.79 537.874 822.809 541.02 824.718C536.747 826.84 534.072 828.53 530.113 831.288Z"/><path fill="#525245" d="M340.95 763.572C345.209 767.41 349.284 771.869 353.39 775.909C369.442 791.703 387.512 805.414 407.506 815.855C411.801 818.099 416.386 820.964 420.803 822.879L421.069 823.16C419.62 825.644 421.169 827.542 419.774 831.748C420.814 833.729 424.915 840.963 425.126 842.576C423.467 844.105 416.206 849.429 414.501 849.093C411.542 848.509 407.187 838.253 403.254 847.017C403.264 848.291 402.599 851.834 402.638 852.095C407.654 855.986 409.165 858.152 410.029 864.669C410.095 865.181 410.157 865.695 410.215 866.209C418.082 854.203 416.328 851.884 430.57 843.924C437.113 849.79 443.933 852.26 445.831 859.869C442.149 858.385 431.211 855.349 427.29 854.367C423.638 857.15 421.279 860.932 418.254 864.36C413.286 869.99 407.999 876.387 402.399 881.336C394.458 878.947 373.817 869.357 367.616 864.164C368.565 855.412 372.165 839.052 371.654 830.78C371.483 828.015 356.336 818.264 352.696 816.752C343.842 820.45 330.906 830.441 320.585 835.512C312.466 833.017 298.324 818.425 293.132 811.389C295.805 809.063 307.672 788.482 309.588 784.629C312.474 786.992 313.235 790.107 317.272 791.847L318.076 791.436C319.348 786.964 315.389 780.513 319.548 777.216C323.461 776.772 331.768 781.88 335.875 777.675C340.505 772.934 328.852 770.147 337.947 764.119C339.048 764.025 339.886 763.869 340.95 763.572Z"/><path fill="#5B5850" d="M419.774 831.748C417.182 830.473 411.195 829.346 412.867 824.757C415.362 822.88 417.755 822.905 420.803 822.879L421.069 823.16C419.62 825.644 421.169 827.542 419.774 831.748Z"/><path fill="#6C685A" d="M399.236 853.031C391.168 854.821 390.954 848.477 394.59 845.787L396.006 846.008C397.603 847.189 397.631 847.744 398.307 849.599C398.925 851.15 399.249 851.438 399.236 853.031Z"/><path fill="#5B5850" d="M398.307 849.599C399.972 848.77 401.621 847.909 403.254 847.017C403.264 848.291 402.599 851.834 402.638 852.095L399.236 853.031C399.249 851.438 398.925 851.15 398.307 849.599Z"/><path fill="#6C685A" d="M392.107 831.744C394.638 832.867 398.254 835.347 397.911 838.437L396.661 839.333C395.295 840.308 395.635 840.215 394.129 840.775C391.127 838.796 391.555 834.895 392.107 831.744Z"/><defs><linearGradient id="gradient_3" gradientUnits="userSpaceOnUse" x1="301.92023" y1="794.90674" x2="273.05945" y2="682.11163"><stop offset="0" stop-color="#767264"/><stop offset="1" stop-color="#8F8C83"/></linearGradient></defs><path fill="url(#gradient_3)" d="M276.629 626.931L277.337 631.243C285.686 632.413 289.271 638.532 289.355 646.533C289.372 648.155 289.193 653.272 289.548 654.509C293.008 666.566 296.734 671.37 293.619 684.199L292.645 682.803L291.363 682.895C290.456 684.217 290.229 684.172 290.109 685.628C301.097 708.358 311.011 727.249 326.661 747.272C328.504 749.414 331.243 752.416 332.88 754.598C335.567 757.493 338.484 760.519 340.95 763.572C339.886 763.869 339.048 764.025 337.947 764.119C328.852 770.147 340.505 772.934 335.875 777.675C331.768 781.88 323.461 776.772 319.548 777.216C315.389 780.513 319.348 786.964 318.076 791.436L317.272 791.847C313.235 790.107 312.474 786.992 309.588 784.629C313.751 772.85 311.03 771.789 303.083 763.2C301.542 763.262 299.384 763.2 298.054 763.783C292.143 759.69 266.687 771.639 258.829 769.679C254.002 768.476 251.701 762.961 249.444 758.784C249.819 756.055 249.549 755.475 248.911 752.733C246.696 750.172 243.028 739.36 242.003 735.738C248.116 726.77 264.949 717.948 267.63 707.651C269.118 701.936 264.414 691.409 261.046 686.496L260.146 683.138C258.201 682.136 257.467 681.359 255.497 681.443L253.819 677.551C253.207 666.004 256.842 668.883 264.287 662.013C265.859 660.562 270.331 653.642 271.853 651.474C271.717 644.639 268.719 635.788 273.413 630.144L273.18 629.067C275.725 628.426 275.566 628.553 276.629 626.931Z"/><path fill="#525245" d="M276.629 626.931L277.337 631.243C285.686 632.413 289.271 638.532 289.355 646.533C289.372 648.155 289.193 653.272 289.548 654.509C293.008 666.566 296.734 671.37 293.619 684.199L292.645 682.803L291.363 682.895C290.456 684.217 290.229 684.172 290.109 685.628C285.651 690.806 297.56 705.167 293.698 713.062C293.313 714.588 291.565 716.597 289.837 717.019C276.653 720.244 273.481 700.388 270.422 692.214C268.279 686.487 264.422 685.105 260.146 683.138C258.201 682.136 257.467 681.359 255.497 681.443L253.819 677.551C253.207 666.004 256.842 668.883 264.287 662.013C265.859 660.562 270.331 653.642 271.853 651.474C271.717 644.639 268.719 635.788 273.413 630.144L273.18 629.067C275.725 628.426 275.566 628.553 276.629 626.931Z"/><path fill="#0D0E0F" d="M276.629 626.931L277.337 631.243C277.428 635.666 277.372 638.634 277.03 643.038C275.872 640.257 274.199 633.211 273.413 630.144L273.18 629.067C275.725 628.426 275.566 628.553 276.629 626.931Z"/><path fill="#51504B" d="M291.363 682.895C290.56 681.102 289.118 678.55 289.734 676.733L290.569 677.025C292.073 679.12 292.116 680.288 292.645 682.803L291.363 682.895Z"/><path fill="#5B5850" d="M254.981 751.736C256.882 751.588 258.151 751.178 259.698 751.892C259.869 754.202 259.535 755.093 260.617 757.073C263.884 757.171 262.133 755.756 264.555 756.965C265.187 758.386 263.805 763.046 265.314 763.462C270.812 764.976 293.281 748.394 301.932 761.229C302.359 761.862 302.717 762.53 303.083 763.2C301.542 763.262 299.384 763.2 298.054 763.783C292.143 759.69 266.687 771.639 258.829 769.679C254.002 768.476 251.701 762.961 249.444 758.784C249.819 756.055 249.549 755.475 248.911 752.733L250.221 752.414C251.811 753.767 251.089 756.645 252.589 758.872C253.788 756.91 254.435 754.004 254.981 751.736Z"/><path fill="#5B5850" d="M326.661 747.272C328.504 749.414 331.243 752.416 332.88 754.598C331.639 753.933 330.368 752.695 329.504 752.797C329.07 754.243 328.667 755.456 328.164 756.88L327.346 757.044C325.42 755.082 327.068 751.007 326.661 747.272Z"/><path fill="#525245" d="M312.119 749.104C316.787 748.944 317.677 750.509 320.391 754.065C320.865 758.988 321.488 762.49 317.034 765.537C305.983 767.781 306.886 754.723 312.119 749.104Z"/><path fill="#51504B" d="M288.283 722.991C294.533 725.722 295.466 731.939 289.238 735.553C283.238 733.592 282.464 726.417 288.283 722.991Z"/><path fill="#51504B" d="M310.085 737.294C313.695 738.687 315.588 742.937 312.052 746.015C307.035 743.859 305.973 741.238 310.085 737.294Z"/><path fill="#424039" d="M267.267 734.919L267.843 735.449C268.27 737.892 267.187 741.334 266.497 743.755C265.711 742.975 265.903 743.136 265.34 742.138C265.452 739.632 266.441 737.324 267.267 734.919Z"/><path fill="#E56B26" d="M417.013 217.878C408.356 213.77 393.938 206.622 389.269 197.435C386.019 189.918 394.973 185.081 400.481 183.451C444.555 170.404 494.612 179.022 537.537 192.733C553.822 197.934 570.271 205.666 585.559 213.217C588.847 212.854 590.903 212.5 594.142 211.807C623.417 225.843 671.906 260.126 694.22 283.818C693.132 285.416 692.369 286.458 691.129 287.94L695.629 292.954C703.808 302.781 711.776 313.363 711.485 326.63L710.573 329.073C707.414 337.349 700.942 338.066 693.272 339.144L692.58 332.334C691.865 327.476 691.067 322.63 690.185 317.799C689.233 313.985 688.413 309.164 687.634 305.24L687.754 303.848C689.831 304.846 694.496 312.516 695.466 314.774C697.233 317.153 697.375 319.958 699.451 322.399C701.316 323.108 700.912 323.26 702.631 322.996C703.256 321.925 703.507 321.137 703.168 319.78C698.249 300.063 672.124 276.865 656.975 264.957C644.591 255.011 620.027 238.719 606.355 231.904C563.253 209.265 514.669 190.134 465.082 196.604C460.693 197.176 433.913 199.703 436.736 206.396C439.925 208.64 441.061 208.291 444.953 208.137C441.066 212.316 436.666 218.214 432.73 222.538C432.105 223.225 429.869 222.572 428.649 222.368C426.943 224.407 427.745 225.078 428.801 227.44C423.649 225.626 419.647 224.111 414.603 221.947C415.476 220.022 415.632 219.411 417.013 217.878Z"/><defs><linearGradient id="gradient_4" gradientUnits="userSpaceOnUse" x1="644.84509" y1="243.74902" x2="640.06451" y2="250.35083"><stop offset="0" stop-color="#1D0000"/><stop offset="1" stop-color="#2E0201"/></linearGradient></defs><path fill="url(#gradient_4)" d="M585.559 213.217C588.847 212.854 590.903 212.5 594.142 211.807C623.417 225.843 671.906 260.126 694.22 283.818C693.132 285.416 692.369 286.458 691.129 287.94C689.811 286.936 684.541 281.686 683.04 280.281C677.493 275.04 671.77 269.988 665.882 265.134C640.998 245.065 614.076 227.664 585.559 213.217Z"/><path fill="#1E0503" d="M417.013 217.878C421.686 219.911 424.134 220.711 428.649 222.368C426.943 224.407 427.745 225.078 428.801 227.44C423.649 225.626 419.647 224.111 414.603 221.947C415.476 220.022 415.632 219.411 417.013 217.878Z"/><path fill="#B9846E" d="M687.634 305.24L687.754 303.848C689.831 304.846 694.496 312.516 695.466 314.774C692.736 314.075 692.881 310.199 690.145 308.75C688.691 312.159 691.778 315.701 690.185 317.799C689.233 313.985 688.413 309.164 687.634 305.24Z"/><path fill="#87837C" d="M226.016 552.687C230.194 559.809 235.475 566.223 241.664 571.689C250.326 579.432 252.486 581.206 258.038 591.947C259.703 595.168 267.503 602.686 270.204 606.392C270.844 614.566 271.939 620.964 273.18 629.067L273.413 630.144C268.719 635.788 271.717 644.639 271.853 651.474C270.331 653.642 265.859 660.562 264.287 662.013C256.842 668.883 253.207 666.004 253.819 677.551C247.878 677.434 219.664 675.905 215.318 674.321C213.853 673.12 213.552 671.723 212.852 669.922L210.716 659.94C212.889 657.599 212.637 644.481 212.788 640.298C214.318 639.866 215.843 639.412 217.36 638.936C228.192 635.512 240.725 629.39 246.194 618.914C246.708 601.836 244.152 596.438 227.282 591.577C221.131 589.805 213.11 586.665 207.624 583.458C207.246 575.317 207.719 567.603 208.23 559.493C211.572 558.363 223.997 554.52 226.016 552.687Z"/><path fill="#525245" d="M254.8 635.645C261.592 636.469 265.121 646.591 259.789 652.214C249.729 652.609 249.313 641.106 254.8 635.645Z"/><path fill="#E56B26" d="M618.387 201.688C626.187 208.558 627.665 206.509 635.59 210.967C638.524 212.618 647.201 220.552 650.321 223.116C662.248 232.918 671.903 242.404 682.199 253.824C684.215 254.143 687.868 256.632 689.033 256.235L688.772 254.702C692.686 258.927 695.492 263.576 699.133 267.906C698.367 269.925 698.342 270.51 698.042 272.691C700.32 277.047 698.969 282.949 698.33 287.894L694.22 283.818C671.906 260.126 623.417 225.843 594.142 211.807C605.928 209.683 608.832 208.717 618.387 201.688Z"/><path fill="#340704" d="M682.199 253.824C684.215 254.143 687.868 256.632 689.033 256.235L688.772 254.702C692.686 258.927 695.492 263.576 699.133 267.906C698.367 269.925 698.342 270.51 698.042 272.691C692.796 266.372 687.515 260.083 682.199 253.824Z"/><path fill="#525245" d="M810.116 623.078C817.787 626.337 831.76 633.172 838.6 637.732C838.625 644.28 834.575 669.049 830.758 673.95C827.352 678.323 796.255 674.634 792.251 678.75C789.656 681.417 781.751 702.674 780.829 706.732C787.004 713.193 800.035 723.701 804.635 729.999L804.182 730.05L803.891 730.428C805.092 731.583 805.39 731.705 806.085 733.236L806.001 733.32C803.362 732.628 800.357 730.524 797.965 729.331C785.214 722.973 784.077 719.613 776.527 708.287C776.32 702.629 779.315 691.647 778.64 689.573C783.177 685.034 785.964 680.27 789.703 675.34C803.147 657.615 809.106 645.217 810.116 623.078Z"/><path fill="#51504B" d="M642.776 190.164C655.974 200.411 704.037 241.177 705.762 256.509C706.406 262.232 705.61 269.125 704.441 274.74C702.382 271.569 701.755 270.612 699.133 267.906C695.492 263.576 692.686 258.927 688.772 254.702C678.558 240.75 649.29 216.06 635.442 204.406C638.856 198.843 640.523 196.236 642.776 190.164Z"/><path fill="#AFAEAA" d="M202.816 556.754C207.285 554.95 219.436 550.291 223.743 549.428C225.035 550.089 225.359 551.307 226.016 552.687C223.997 554.52 211.572 558.363 208.23 559.493C207.719 567.603 207.246 575.317 207.624 583.458C213.11 586.665 221.131 589.805 227.282 591.577C244.152 596.438 246.708 601.836 246.194 618.914C240.725 629.39 228.192 635.512 217.36 638.936C215.843 639.412 214.318 639.866 212.788 640.298C212.637 644.481 212.889 657.599 210.716 659.94C209.853 656.962 209.331 654.288 208.718 651.254C207.985 645.938 207.594 642.549 207.525 637.212C213.963 633.963 234.673 624.177 240.174 619.196C241.135 618.325 240.309 603.833 239.453 602.074C239.064 601.275 238.908 600.479 237.735 599.961C233.919 598.275 229.165 597.109 225.148 595.913C217.519 593.64 209.99 591.476 202.663 588.365C202.256 577.831 202.307 567.284 202.816 556.754Z"/><path fill="#87837C" d="M458.953 134.298C463.789 131.163 467.351 127.894 472.874 125.527C492.048 117.309 504.863 126.667 496.836 147.56C493.064 157.379 485.336 166.127 476.387 171.678C472.444 174.026 469.155 173.206 464.829 172.72C468.697 170.862 472.71 168.988 476.335 166.223C484.529 159.973 497.289 144.742 492.708 133.828C488.741 124.378 473.769 128.729 467.283 132.903C456.724 138.747 441.478 157.988 449.088 170.29C449.466 170.892 449.861 171.483 450.273 172.061C447.877 172.021 444.99 172.153 442.757 171.487C440.681 172.712 440.613 172.743 438.281 172.529C438.003 150.346 444.564 142.035 461.13 127.969C461.762 130.861 461.014 130.823 458.864 132.908C458.772 133.972 458.694 133.514 458.953 134.298Z"/><path fill="#0D0E0F" d="M461.13 127.969C461.762 130.861 461.014 130.823 458.864 132.908C458.772 133.972 458.694 133.514 458.953 134.298C449.118 143.168 439.317 157.588 442.757 171.487C440.681 172.712 440.613 172.743 438.281 172.529C438.003 150.346 444.564 142.035 461.13 127.969Z"/><defs><linearGradient id="gradient_5" gradientUnits="userSpaceOnUse" x1="720.51917" y1="719.98712" x2="705.34326" y2="760.88202"><stop offset="0" stop-color="#383533"/><stop offset="1" stop-color="#5F5D51"/></linearGradient></defs><path fill="url(#gradient_5)" d="M699.1 743.147C710.636 744.433 717.557 737.561 726.334 730.556C728.979 728.446 729.327 726.082 733.379 723.614L733.555 723.996C727.422 732.605 722.99 739.943 716.305 748.65C716.06 751.686 714.089 751.118 713.932 753.661L714.721 754.611C712.685 757.246 711.121 759.014 708.864 761.462C705.703 765.067 702.455 768.593 699.122 772.039L698.341 772.314C698.23 770.82 698.534 770.015 698.568 768.547C698.683 763.581 697.686 760.897 695.973 756.454C695.337 754.991 694.436 754.461 693.186 753.297C695.496 749.706 697.083 746.921 699.1 743.147Z"/><path fill="#424039" d="M716.305 748.65C716.06 751.686 714.089 751.118 713.932 753.661L714.721 754.611C712.685 757.246 711.121 759.014 708.864 761.462C705.703 765.067 702.455 768.593 699.122 772.039L698.341 772.314C698.23 770.82 698.534 770.015 698.568 768.547C698.683 763.581 697.686 760.897 695.973 756.454L697.155 757.182C698.461 756.209 697.719 756.459 699.519 756.627C701.965 758.178 703.105 759.357 703.699 762.232C706.578 758.473 710.065 754.964 713.417 751.633C714.502 750.398 715.107 749.775 716.305 748.65Z"/><path fill="#5B5850" d="M697.155 757.182C698.461 756.209 697.719 756.459 699.519 756.627C701.965 758.178 703.105 759.357 703.699 762.232L699.561 766.501C699.079 762.429 698.964 760.873 697.155 757.182Z"/><path fill="#0D0E0F" d="M716.305 748.65C716.06 751.686 714.089 751.118 713.932 753.661L714.721 754.611C712.685 757.246 711.121 759.014 708.864 761.462L708.077 761.02C708.006 759.09 712.429 755.558 713.417 751.633C714.502 750.398 715.107 749.775 716.305 748.65Z"/><path fill="#AFAEAA" d="M258.358 688.955C259.524 686.751 258.687 687.571 261.046 686.496C264.414 691.409 269.118 701.936 267.63 707.651C264.949 717.948 248.116 726.77 242.003 735.738C243.028 739.36 246.696 750.172 248.911 752.733C249.549 755.475 249.819 756.055 249.444 758.784C244.128 751.005 240.735 743.289 237.157 734.664C243.265 724.642 259.19 713.92 264.392 706.402C262.891 700.814 260.399 694.429 258.358 688.955Z"/><path fill="#AFAEAA" d="M303.083 763.2C311.03 771.789 313.751 772.85 309.588 784.629C307.672 788.482 295.805 809.063 293.132 811.389C292.599 810.533 291.805 809.361 292.06 808.373C294.736 797.977 304.617 787.394 306.684 777.099C307.393 773.569 300.677 766.811 298.054 763.783C299.384 763.2 301.542 763.262 303.083 763.2Z"/><path fill="#1E0503" d="M606.355 231.904C620.027 238.719 644.591 255.011 656.975 264.957C647.597 264.236 631.201 246.537 622.363 242.972C609.662 237.848 614.018 243.245 606.659 232.349L606.355 231.904Z"/><path fill="#1E0503" d="M695.629 292.954C702.516 292.162 703.783 297.675 707.044 302.684C710.456 307.924 713.875 317.323 714.283 323.43L713.848 323.866C712.507 319.739 714.37 325.779 713.54 322.092C712.07 315.568 710.215 309.522 706.086 304.458C705.621 306.807 715.538 318.18 711.485 326.63C711.776 313.363 703.808 302.781 695.629 292.954Z"/><path fill="#0D0E0F" d="M233.238 321.286C241.688 316.141 249.93 315.506 256.215 324.306L255.326 324.949C254.586 324.82 254.201 324.856 253.711 324.417C247.692 319.029 239.688 324.284 233.238 321.286Z"/><path fill="#340704" d="M687.634 305.24C688.413 309.164 689.233 313.985 690.185 317.799C691.067 322.63 691.865 327.476 692.58 332.334C689.027 327.485 687.299 319.03 686.131 313.086C685.424 309.485 685.568 308.017 687.634 305.24Z"/><path fill="#0F1118" d="M202.3 653.387C207.213 656.644 209.965 672.794 209.778 678.473C206.455 673.553 203.856 659.868 202.3 653.387Z"/><path fill="#0D0E0F" d="M208.718 651.254C209.331 654.288 209.853 656.962 210.716 659.94L212.852 669.922C211.821 670.235 212.374 670.223 211.197 669.791C207.856 665.339 208.066 656.636 208.718 651.254Z"/><path fill="#87837C" d="M255.497 681.443C257.467 681.359 258.201 682.136 260.146 683.138L261.046 686.496C258.687 687.571 259.524 686.751 258.358 688.955L255.497 681.443Z"/><path fill="#2C3237" d="M445.984 216.172C462.597 200.284 466.838 200.323 489.683 201.599C557.312 205.379 625.33 243.041 674.295 288.269C680.759 294.248 680.854 301.297 682.203 309.382C685.562 336.479 690.569 359.484 702.83 384.064C698.264 382.335 694.508 381.04 690.525 378.134C684.467 373.712 682.956 370.212 675.676 367.591C673.769 383.744 684.348 405.929 691.232 420.213C669.863 433.64 652.774 407.693 645.624 407.394C641.673 411.467 648.201 465.25 615.498 435.967C600.421 422.467 603.639 431.539 598.154 444.748C579.897 488.918 566.207 474.462 555.102 437.837L554.464 437.321C546.7 451.676 540.063 464.903 526.702 475.036C524.452 476.743 519.678 480.133 516.929 480.174C515.39 478.297 514.628 460.328 514.439 456.625C513.651 453.593 513.795 451.887 513.864 448.814C512.915 449.38 513.267 449.347 512.676 450.83L511.932 450.754C509.877 448.87 509.495 448.392 506.865 447.583C502.263 455.493 497.377 462.631 491.124 469.362C456.093 507.075 463.483 471.087 466.564 444.99C464.585 445.302 461.996 445.827 460.058 445.714L459.459 446.41C450.562 456.727 441.433 463.439 427.254 464.503C430.883 454.264 434.715 446.768 435.559 435.933C425.921 441.503 421.144 445.076 409.958 446.061C416.549 438.115 430.221 411.719 432.43 401.336C433.142 397.988 431.958 387.125 433.453 384.804C435.942 385.173 438.189 385.585 440.711 385.605C447.386 384.961 458.222 385.163 464.793 386.127C482.444 388.716 497.431 375.899 510.679 366.214C518.712 354.209 556.842 337.594 535.39 321.272C533.245 319.64 526.887 317.398 524.238 316.718C493.27 308.773 496.503 272.99 460.213 270.694C460.858 260.49 461.622 249.701 454.481 241.33C448.776 234.642 439.786 235.832 434.211 241.944C425.124 251.909 422.348 267.741 425.187 280.624L419.482 283.034C420.273 267.571 422.978 253.738 430.192 239.841C434.985 230.608 437.297 226.414 448.105 223.855L448.859 224.057C453.296 225.265 459.745 229.093 462.712 228.043C465.412 224.726 460.913 219.996 458.107 218.229C454.218 215.779 450.375 215.943 445.984 216.172Z"/><path fill="#0F1118" d="M440.711 385.605C447.386 384.961 458.222 385.163 464.793 386.127C482.444 388.716 497.431 375.899 510.679 366.214C507.317 380.785 501.578 394.204 492.355 406.09C490.122 408.967 485.78 415.103 481.65 415.066C480.812 415.058 479.483 413.505 478.56 413.239C477.6 416.495 474.305 421.97 470.47 421.398C469.732 419.812 470.151 419.002 470.75 417.085L470.363 416.094L469.761 415.963C468.247 417.45 467.045 419.19 464.883 418.972C461.685 416.11 464.011 412.495 462.397 408.957C458.778 401.021 454.867 393.053 449.131 386.425C446.204 386.304 443.574 386.299 440.711 385.605Z"/><path fill="#0D0E0F" d="M470.75 417.085C473.144 413.631 474.38 408.172 476.632 406.358L477.542 406.746C478.817 408.945 478.544 410.652 478.56 413.239C477.6 416.495 474.305 421.97 470.47 421.398C469.732 419.812 470.151 419.002 470.75 417.085Z"/><path fill="#6A7F92" d="M409.958 446.061C416.549 438.115 430.221 411.719 432.43 401.336C433.142 397.988 431.958 387.125 433.453 384.804C437.14 392.165 435.181 410.993 432.353 419.517C430.772 424.184 428.946 428.764 426.881 433.238C433.857 430.709 439.962 428.799 445.72 424.069C443.342 437.951 440.448 443.024 436.518 455.208C442.638 453.669 446.873 451.87 452.386 448.709C454.421 447.543 458.781 444.071 460.495 443.904C460.339 444.818 460.359 444.833 460.058 445.714L459.459 446.41C450.562 456.727 441.433 463.439 427.254 464.503C430.883 454.264 434.715 446.768 435.559 435.933C425.921 441.503 421.144 445.076 409.958 446.061Z"/><path fill="#6A7F92" d="M468.25 435.525C471.91 450.948 471.607 456.132 471.459 471.967C482.541 466.947 487.922 463.246 497.066 454.961C500.162 452.156 503.053 448.303 506.332 445.838L506.841 446.036L506.865 447.583C502.263 455.493 497.377 462.631 491.124 469.362C456.093 507.075 463.483 471.087 466.564 444.99C467.033 442.197 467.588 438.176 468.25 435.525Z"/><path fill="#6A7F92" d="M521.185 464.355C532.233 457.004 539.494 451.581 547.583 440.531C550.408 436.672 552.74 431.874 555.681 428.334L556.333 428.448C557.042 430.361 555.157 435.194 554.464 437.321C546.7 451.676 540.063 464.903 526.702 475.036C524.452 476.743 519.678 480.133 516.929 480.174C515.39 478.297 514.628 460.328 514.439 456.625C514.38 453.107 513.889 445.282 515.434 442.507L516.454 442.498L515.335 442.729L516.738 442.901C520.157 449.285 520.987 457.283 521.185 464.355Z"/><path fill="#010000" d="M544.982 241.265C552.574 240.753 558 240.886 564.681 245.264C582.229 256.762 585.225 284.699 573.177 301.139C568.021 308.175 563.977 312.088 555.085 313.711C548.491 314.3 542.978 314.031 536.997 310.668C529.023 306.153 523.209 298.61 520.874 289.749C515.668 269.974 523.523 246.628 544.982 241.265Z"/><path fill="#FEFEFE" d="M547.093 246.792C558.736 246.266 563.837 249.781 569.9 259.484C558.33 252.833 548.7 255.802 543.58 268.57C537.07 284.804 547.396 308.561 567.909 298.569L568.386 298.652C566.938 302.457 560.569 306.567 556.78 307.63C550.618 309.321 544.032 308.389 538.581 305.055C531.924 301.02 527.633 293.468 525.86 286.03C523.623 276.793 525.169 267.045 530.153 258.953C534.422 252.162 539.314 248.599 547.093 246.792Z"/><path fill="#FEFEFE" d="M562.701 262.707C570.616 262.649 573.606 271.489 565.419 276.121C564.275 276.242 564.083 276.267 562.913 276.063C561.363 275.784 559.994 274.886 559.121 273.575C556.321 269.395 559.001 265.095 562.701 262.707Z"/><path fill="#0D0E0F" d="M544.352 217.218C549.494 216.896 554.311 217.36 559.082 219.355C564.185 221.488 572.975 225.408 573.199 231.721C570.841 236.584 562.479 230.574 559.16 228.693C541.553 220.56 540.806 230.468 530.952 231.455C529.166 230.775 529.821 231.349 528.904 229.695C528.525 221.798 537.91 218.28 544.352 217.218Z"/><path fill="#6A7F92" d="M622.435 363.233C629.014 365.711 630.493 385.239 629.737 391.327C627.658 408.085 620.545 402.282 613.291 392.814C611.68 390.435 606.81 384.517 608.535 381.78C612.344 381.258 619.231 388.029 622.182 390.609C623.057 384.197 622.783 379.093 622.069 372.697C621.709 369.463 621.096 366.244 622.435 363.233Z"/><path fill="#6A7F92" d="M628.425 332.786C631.22 333.906 633.455 336.863 635.019 339.382C642.531 351.475 653.156 375.218 627.863 358.633C626.307 357.496 624.766 356.337 623.24 355.159C621.546 353.83 618.543 351.468 618.295 349.336C621.169 347.917 631.8 354.021 635.295 355.367C634.216 347.223 629.043 338.344 628.425 332.786Z"/><path fill="#6A7F92" d="M628.694 291.792C641.926 295.999 668.562 343.311 634.811 327.177C633.273 325.772 631.043 324.289 632.081 322.207C635.923 320.805 643.555 324.635 647.276 326.313C644.719 319.404 640.353 311.986 636.521 305.469C634.693 302.361 630.364 296.99 628.558 293.543C628.603 292.959 628.649 292.376 628.694 291.792Z"/><path fill="#6A7F92" d="M596.564 384.336C603.408 389.729 598.262 412.305 593.462 419.047C591.886 418.84 591.995 418.874 590.717 417.923C589.813 415.705 595.285 387.795 596.564 384.336Z"/><path fill="#6A7F92" d="M569.868 404.975C574.181 408.886 571.44 420.519 568.238 425.057C563.793 423.13 568.813 408.252 569.868 404.975Z"/><path fill="#406686" d="M674.753 456.31C687.589 463.382 718.633 489.897 729.044 500.302C730.628 501.71 737.727 508.945 738.848 510.628C757.439 530.469 775.798 551.364 789.194 575.12C801.493 595.343 806.776 615.119 802.095 639.141C800.769 645.948 790.912 664.475 786.363 670.152C774.754 685.764 760.675 699.377 744.681 710.455C735.897 716.557 736.45 716.286 726.526 719.018C724.43 721.027 725.017 722.931 724.44 723.492C717.467 730.276 706.187 741.558 695.979 735.028C676.859 722.799 661.632 704.58 653.489 683.462C652.195 680.105 649.752 674.854 651.643 671.236C658.599 660.489 673.051 658.269 679.741 646.907C681.396 644.096 685.042 640.424 687.183 637.951C697.458 626.087 708.764 616.879 724.423 613.511C729.611 612.392 734.612 612.001 739.852 610.306C740.148 608.705 740.235 609.471 739.49 607.944C738.381 607.174 737.27 606.555 735.897 606.459C718.382 605.233 705.592 613.003 692.739 622.462C678.369 611.83 664.398 600.669 650.856 588.999C644.877 583.943 638.874 577.251 632.432 572.949C631.761 572.501 631.7 572.756 630.758 573.084C627.914 576.956 640.103 587.064 642.93 589.716C647.025 593.558 651.323 597.353 655.472 601.151C651.801 607.763 643.206 617.567 635.12 617.638C609.931 617.737 594.729 587.074 592.736 565.336C587.658 509.96 618.119 463.75 674.753 456.31Z"/><path fill="#525245" d="M738.848 510.628L737.83 510.913C732.186 516.588 757.025 544.419 743.805 552.576C737.26 556.615 726.784 540.932 721.717 537.765C710.124 530.517 700.927 532.581 692.231 520.741C679.143 502.92 695.7 484.902 714.255 495.077C718.331 497.31 724.152 504.467 728.729 501.684L729.044 500.302C730.628 501.71 737.727 508.945 738.848 510.628Z"/><path fill="#525245" d="M789.194 575.12C801.493 595.343 806.776 615.119 802.095 639.141C800.769 645.948 790.912 664.475 786.363 670.152C777.402 652.742 786.436 645.923 784.24 635.729C781.82 633.288 773.447 634.248 772.389 628.161C771 620.169 777.823 616.244 781.128 610.16C786.223 600.782 773.446 591.382 778.444 581.839C780.743 577.529 784.84 576.506 789.194 575.12Z"/><path fill="#0F1118" d="M658.012 473.816C660.223 473.847 659.427 473.431 660.792 474.503C660.813 475.421 660.765 476.207 659.903 476.754C640.365 489.171 630.163 510.83 626.945 533.192C626.197 538.393 625.776 544.368 624.779 549.932C624.2 550.002 624.608 549.985 623.577 549.697C623.459 549.52 623.004 548.877 622.973 548.698C618.31 521.987 634.55 485.715 658.012 473.816Z"/><path fill="#0F1118" d="M676.775 665.111C679.097 665.963 681.363 670.188 682.701 672.376C690.385 684.945 700.179 696.313 711.466 705.776C713.086 707.134 715.641 709.396 715.879 711.527C704.422 711.34 675.941 677.092 676.775 665.111Z"/><path fill="#51504B" d="M707.473 540.502C716.196 540.716 727.587 549.831 716.286 557.016C706.623 558.357 696.508 546.698 707.473 540.502Z"/><path fill="#406686" d="M599.655 498.884L599.684 499.789C592.294 509.905 587.549 532.732 586.389 545.219C583.481 576.52 598.072 621.635 635.093 623.88C634.508 638.511 634.896 640.373 628.365 652.951C629.942 659.033 630.566 662.492 630.857 668.744C629.412 668.898 627.974 669.105 626.544 669.365C603.918 673.38 605.049 684.793 599.268 698.703C597.054 704.031 565.011 709.328 556.67 710.57C555.792 708.895 554.395 705.954 552.341 705.825C547.52 705.522 538.275 705.645 534.328 708.511C533.257 710.249 533.485 711.94 533.445 714.054C521.75 714.954 503.992 716.67 492.689 715.529C491.722 714.689 489.898 713.019 488.759 712.665C480.919 710.227 469.028 710.328 460.688 709.96C453.988 699.217 458.963 691.139 456.687 678.942C453.326 667.504 457.06 648.157 458.471 635.912C459.379 628.098 460.032 620.257 460.429 612.402C461.122 612.386 461.815 612.364 462.508 612.336C465.295 612.218 466.346 612.344 468.268 610.257C469.861 605.95 467.75 581.803 466.577 576.069C477.431 566.13 503.386 539.895 515.496 535.509C524.433 540.212 537.945 551.908 545.791 558.789C548.718 561.356 550.833 562.917 554.796 562.618C557.894 560.033 564.118 548.373 566.807 544.18C572.479 535.335 577.796 526.112 583.834 517.436C579.693 533.49 575.019 561.767 582.271 577.114L582.78 576.952C583.884 572.752 580.724 556.779 581.299 549.477C583.067 527.026 582.944 514.844 599.655 498.884Z"/><path fill="#525245" d="M512.325 597.048C510.086 596.622 506.4 595.679 504.854 593.969L505.185 593.197C507.446 592.228 523.471 594.659 527.615 594.943C536.45 595.574 545.321 595.502 554.144 594.726C555.388 594.701 556.353 594.508 557.243 595.62C559.681 598.667 559.789 607.209 556.342 609.566C554.406 610.94 550.137 611.823 548.811 613.753C545.72 618.252 546.633 633.11 538.792 632.413C531.174 631.736 533.197 622.621 529.514 620.636C524.217 624.402 521.258 630.617 515.345 622.682C510.28 615.884 510.167 609.034 511.532 601.047C511.761 599.711 512.447 598.291 512.325 597.048Z"/><defs><linearGradient id="gradient_6" gradientUnits="userSpaceOnUse" x1="528.06818" y1="598.88745" x2="527.03815" y2="590.70782"><stop offset="0" stop-color="#040000"/><stop offset="1" stop-color="#00091E"/></linearGradient></defs><path fill="url(#gradient_6)" d="M512.325 597.048C510.086 596.622 506.4 595.679 504.854 593.969L505.185 593.197C507.446 592.228 523.471 594.659 527.615 594.943C536.45 595.574 545.321 595.502 554.144 594.726C545.954 600.236 522.266 598.102 512.325 597.048Z"/><path fill="#0F1118" d="M498.337 581.565C503.238 581.47 512.024 582.584 517.225 583.063C525.048 583.777 532.897 584.184 540.752 584.284C550.827 584.431 560.508 582.819 570.522 582.682C574.523 582.628 575.916 586.159 575.974 589.616C576.279 607.844 574.443 626.251 573.147 644.438C573.02 646.226 572.182 649.127 570.66 650.246L569.912 649.813C567.947 642.949 570.783 619.395 571.026 611.019C571.254 603.151 571.767 595.329 571.282 587.126C546.979 588.866 525.076 590.38 500.705 585.274C499.208 595.974 499.436 609.644 499.467 620.563C499.464 628.584 499.964 643.201 501.694 650.907C509.001 658.838 525.599 667.548 535.175 672.425C544.195 667.12 560.852 657.276 569.962 653.338C563.058 662.651 545.368 673.253 534.676 676.845C527.632 674.316 498.254 657.948 497.264 651.828C495.197 639.038 492.965 591.62 498.337 581.565Z"/><path fill="#51504B" d="M585.411 657.819C589.416 659.316 588.552 660.491 591.054 663.314C593.141 663.815 602.721 657.314 603.583 664.469C604.728 673.973 585.905 685.266 578.807 689.623C578.717 689.678 570.39 690.88 568.966 691.291C564.929 693.245 555.682 697.603 552.249 693.733C550.241 686.29 567.06 676.529 571.289 671.463C576.775 664.892 577.548 661.94 585.411 657.819Z"/><path fill="#0F1118" d="M602.689 614.715C604.515 615.28 610.968 619.808 612.394 620.988C615.786 623.794 629.983 629.166 631.695 631.799C623.2 632.856 605.908 623.159 602.689 614.715Z"/><path fill="#87837C" d="M705.118 342.138C724.393 330.417 714.912 312.273 705.984 297.568C704.406 294.969 701.429 292.528 701.893 289.638C706.244 289.392 726.222 306.942 729.575 310.818C728.58 320.002 724.779 327.791 721.704 336.435C719.889 341.536 713.092 350.696 718.254 355.415C720.955 357.754 727.485 366.39 731.626 366.921C739.894 364.835 752.276 358.813 760.623 355.839C763.207 354.916 765.73 353.974 768.384 353.263C776.531 361.363 782.327 370.151 788.08 380.03C789.726 381.926 790.781 383.148 792.223 385.23C785.492 393.293 779.606 401.938 772.429 409.678C765.632 417.009 764.946 418.326 770.034 426.721C772.938 431.379 780.756 448.707 783.427 448.874C794.429 449.563 809.43 447.469 820.869 447.539C826.156 456.279 828.44 469.356 831.777 478.535C833.147 480.576 832.807 483.406 832.656 485.822C823.795 494.988 808.012 500.906 800.046 508.009C801.856 518.978 803.42 529.869 804.784 540.903C804.918 541.989 805.87 542.887 806.698 543.503C813.766 548.579 841.903 548.133 842.847 557.874C843.536 564.989 843.971 580.673 842.751 588.103C835.701 592.632 816.419 596.693 807.294 600.51C803.776 590.7 800.475 581.619 795.094 572.595C790.022 563.517 783.763 555.487 778.623 546.745C776.779 543.609 774.874 527.439 774.161 522.885C771.743 523.9 772.104 525.43 771.797 527.955L773.242 540.548C769.553 535.536 752.966 517.867 751.743 514.25C746.627 499.115 742.201 483.322 735.221 468.574C731.789 461.322 728.041 454.552 724.122 447.615C717.733 436.399 710.336 425.789 702.024 415.914C699.413 412.852 690.436 404.138 689.33 401.855C686.266 395.531 684.901 387.263 681.77 379.83C688.414 384.583 693.568 387.605 701.56 389.4C703.429 389.391 705.287 389.587 706.959 390.53C709.85 389.348 711.149 387.184 709.989 384.139C707.535 377.697 704.239 371.652 701.614 365.253C698.66 358.052 696.256 351.165 694.647 343.539C698.337 343.498 701.571 343.145 705.118 342.138Z"/><path fill="#87837C" d="M681.77 379.83C688.414 384.583 693.568 387.605 701.56 389.4C703.429 389.391 705.287 389.587 706.959 390.53C709.59 393.364 712.986 396.314 715.393 399.113C727.331 412.994 740.946 431.914 748.532 448.678C752.094 454.707 753.586 457.978 756.029 464.552C755.207 468.636 757.126 468.862 758.805 472.605C757.199 470.828 755.566 469.077 753.906 467.351C741.158 469.838 753.163 488.453 754.187 494.948C755.578 503.775 758.054 503.764 764.375 508.101C765.194 518.422 764.394 520.332 771.797 527.955L773.242 540.548C769.553 535.536 752.966 517.867 751.743 514.25C746.627 499.115 742.201 483.322 735.221 468.574C731.789 461.322 728.041 454.552 724.122 447.615C717.733 436.399 710.336 425.789 702.024 415.914C699.413 412.852 690.436 404.138 689.33 401.855C686.266 395.531 684.901 387.263 681.77 379.83Z"/><path fill="#0D0E0F" d="M701.56 389.4C703.429 389.391 705.287 389.587 706.959 390.53C709.59 393.364 712.986 396.314 715.393 399.113C727.331 412.994 740.946 431.914 748.532 448.678C752.094 454.707 753.586 457.978 756.029 464.552C755.207 468.636 757.126 468.862 758.805 472.605C757.199 470.828 755.566 469.077 753.906 467.351C752.877 465.53 751.321 461.466 750.451 459.349C750.404 459.177 745.485 449.517 744.761 447.944C744.733 447.918 742.183 444.073 741.922 443.688C733.407 426.197 720.097 410.378 707.67 395.56C705.544 393.025 704.203 391.432 701.56 389.4Z"/><path fill="#525245" d="M729.182 438.191C731.706 438.777 732.509 438.991 734.866 439.942C737.258 440.907 740.001 443.344 741.922 443.688C742.183 444.073 744.733 447.918 744.761 447.944C745.485 449.517 750.404 459.177 750.451 459.349C748.865 462.457 751.111 464.04 746.958 466.083C739.384 466.814 731.831 444.424 729.182 438.191Z"/><path fill="#5B5850" d="M831.777 478.535C833.147 480.576 832.807 483.406 832.656 485.822C823.795 494.988 808.012 500.906 800.046 508.009C801.856 518.978 803.42 529.869 804.784 540.903C804.918 541.989 805.87 542.887 806.698 543.503C813.766 548.579 841.903 548.133 842.847 557.874C843.536 564.989 843.971 580.673 842.751 588.103C835.701 592.632 816.419 596.693 807.294 600.51C803.776 590.7 800.475 581.619 795.094 572.595C795.996 570.978 797.468 567.092 798.704 566.045C801.39 563.767 805.214 561.893 808.201 559.78C811.117 552.426 814.797 554.019 821.688 552.06C812.697 549.925 803.552 551.346 798.229 541.69C793.223 532.609 791.458 518.505 794.219 508.549C797.267 497.558 811.842 491.098 820.829 486.18C823.213 484.963 825.457 482.142 828.155 481.86C830.139 480.533 830.46 480.441 831.777 478.535Z"/><path fill="#525245" d="M705.118 342.138C724.393 330.417 714.912 312.273 705.984 297.568C704.406 294.969 701.429 292.528 701.893 289.638C706.244 289.392 726.222 306.942 729.575 310.818C728.58 320.002 724.779 327.791 721.704 336.435C719.889 341.536 713.092 350.696 718.254 355.415C720.955 357.754 727.485 366.39 731.626 366.921C739.894 364.835 752.276 358.813 760.623 355.839C766.12 362.504 762.063 359.988 762.692 366.197C763.767 367.673 764.396 368.275 764.737 370.079C763.33 376.649 755.877 374.731 752.422 377.769C750.144 383.789 758.62 390.923 751.725 398.654C741.629 409.973 734.157 392.473 727.901 386.593C725.662 389.095 722.92 391.572 719.313 391.372C713.118 388.468 716.912 378.912 718.799 374.493C714.281 364.923 710.597 366.536 705.071 360.104C702.221 356.786 708.38 347.382 705.118 342.138Z"/><path fill="#525245" d="M756.029 464.552C773.101 473.831 771.16 475.586 779.094 493.049C780.359 489.374 781.791 483.326 785.638 481.589C789.724 479.745 791.985 485.025 792.386 488.232C793.156 494.383 790.632 498.213 787.548 503.136C787.732 505.87 787.685 513.649 787.241 516.441C785.718 526.024 778.823 527.551 775.285 517.52L774.979 517.276C774.804 518.508 774.423 521.841 774.161 522.885C771.743 523.9 772.104 525.43 771.797 527.955C764.394 520.332 765.194 518.422 764.375 508.101C758.054 503.764 755.578 503.775 754.187 494.948C753.163 488.453 741.158 469.838 753.906 467.351C755.566 469.077 757.199 470.828 758.805 472.605C757.126 468.862 755.207 468.636 756.029 464.552Z"/><path fill="#424039" d="M762.734 491.13C769.67 491.623 769.417 501.785 768.304 506.775C766.151 505.699 762.474 493.428 762.734 491.13Z"/><path fill="#AFAEAA" d="M764.413 422.883C766.366 425.116 766.889 426.555 770.034 426.721C772.938 431.379 780.756 448.707 783.427 448.874C794.429 449.563 809.43 447.469 820.869 447.539C826.156 456.279 828.44 469.356 831.777 478.535C830.46 480.441 830.139 480.533 828.155 481.86L826.595 481.026C825.499 473.439 820.546 459.204 816.747 452.614C804.962 454.174 797.97 457.122 785.471 454.327C770.283 450.931 770.677 435.675 764.143 424.093C764.233 423.689 764.323 423.286 764.413 422.883Z"/><path fill="#51504B" d="M788.08 380.03C789.726 381.926 790.781 383.148 792.223 385.23C785.492 393.293 779.606 401.938 772.429 409.678C765.632 417.009 764.946 418.326 770.034 426.721C766.889 426.555 766.366 425.116 764.413 422.883C763.727 422.044 761.131 418.931 761.397 417.65C763.21 408.916 770.745 401.651 775.545 394.189C778.869 389.021 783.743 384.54 788.08 380.03Z"/><path fill="#6C685A" d="M819.552 474.83C821.742 477.111 823.844 479.488 826.595 481.026L828.155 481.86C825.457 482.142 823.213 484.963 820.829 486.18C819.698 482.498 819.737 478.694 819.552 474.83Z"/><path fill="#525245" d="M783.083 529.433C784.67 529.716 786.826 530.15 788.006 531.37C792.034 535.535 792.102 547.039 787.952 551.122C780.774 549.282 779.658 544.348 779.795 537.009C779.855 533.778 780.509 531.571 783.083 529.433Z"/><path fill="#525245" d="M744.121 408.54C750.933 408.916 751.179 413.486 747.577 418.275C740.611 418.507 740.285 412.961 744.121 408.54Z"/><path fill="#525245" d="M769.598 460.146C775.108 461.796 775.796 466.549 771.735 470.515C764.553 470.3 765.721 464.074 769.598 460.146Z"/><path fill="#5B5850" d="M765.528 387.373L766.725 387.877C768.422 391.035 770.381 393.445 769.722 396.635C766.163 394.93 763.916 391.213 765.528 387.373Z"/><path fill="#5B5850" d="M773.448 385.464C775.608 385.836 776.445 385.749 777.516 387.594L777.087 389.123C775.285 389.048 774.701 389.159 773.108 388.271C772.502 386.603 772.57 387.502 773.448 385.464Z"/><path fill="#406686" d="M350.901 533.278C365.057 523.161 376.666 512.149 389.517 500.515C397.849 492.973 406.63 485.738 415.122 478.368C411.178 486.611 385.488 541.969 394.153 546.987L397.543 546.608L398.076 547.12C397.069 559.927 393.985 574.266 392.116 587.169C390.739 596.674 390.386 607.398 388.993 616.449C385.642 620.217 376.966 626.915 372.57 629.273C364.158 633.779 348.94 638.155 339.373 638.495C317.566 639.272 303.557 629.229 288.278 615.143C278.123 605.776 269.812 597.893 261.582 586.563C259.472 583.658 258.419 578.626 256.421 576.136C254.198 573.367 249.823 570.288 246.881 568.108C239.565 562.686 232.534 553.832 229.673 545.114L229.415 544.353C239.245 549.093 244.802 545.559 253.875 540.992C274.61 530.554 293.086 505.739 295.701 482.521C299.713 486.812 302.876 490.367 305.874 495.507C308.275 499.624 309.694 505.306 312.669 508.681C314.79 511.086 320.126 513.037 322.773 515.101C330.608 521.21 338.474 529.337 344.923 536.897C345.071 537.087 345.219 537.277 345.367 537.467C349.656 542.79 353.961 564.324 357.085 567.91C363.545 565.901 352.858 538.38 350.901 533.278Z"/><path fill="#525245" d="M288.278 615.143C292.511 614.281 294.458 615.905 297.673 615.569C303.052 614.926 307.596 612.189 313.175 613.274C318.438 614.311 323.724 617.391 329.107 617.428C332.865 617.454 336.569 614.314 340.069 613.578C348.052 611.898 350.483 616.159 353.821 622.435C353.968 622.711 357.807 622.57 358.165 622.305C361.574 621.839 366.432 619.863 369.62 621.746C371.694 622.97 370.844 627.049 372.57 629.273C364.158 633.779 348.94 638.155 339.373 638.495C317.566 639.272 303.557 629.229 288.278 615.143Z"/><path fill="#0F1118" d="M299.777 535.003C299.764 541.724 291.075 551.164 285.117 553.874L284.949 552.626C285.745 551.085 297.266 538.14 299.777 535.003Z"/><path fill="#87837C" d="M461.971 276.604C465.041 275.873 471.823 279.162 474.565 280.743C490.483 289.925 497.951 315.595 516.533 320.382C546.989 328.229 537.194 335.732 518.637 351.029C510.979 357.342 502.386 365.435 494.037 371.22C479.669 381.854 471.209 380.622 454.435 380.061C432.729 379.414 411.076 377.542 389.581 374.453C383.051 373.559 374.159 372.575 367.856 371.237C387.794 362.018 414.657 358.001 436.396 356.467C465.081 354.442 498.993 357.166 521.503 335.504C523.873 336.939 523.44 337.176 525.789 337.171C529.554 333.466 521.098 325.424 512.671 329.98C513.4 331.709 515.499 330.781 517.181 333.025C516.168 335.331 502.097 342.071 499.203 343.171C479.896 350.508 457.588 349.694 437.283 350.554C409.822 351.718 363.174 361.098 342.016 379.4C342.084 374.57 342.298 370.08 343.58 365.377C347.808 352.409 351.468 342.62 360.07 331.579C378.578 307.82 407.951 292.98 435.966 283.62C444.739 280.689 452.582 277.732 461.971 276.604Z"/><path fill="#AFAEAA" d="M343.58 365.377C347.808 352.409 351.468 342.62 360.07 331.579C378.578 307.82 407.951 292.98 435.966 283.62C444.739 280.689 452.582 277.732 461.971 276.604L462.575 277.312C460.054 282.338 431.907 291.1 425.927 293.864C399.166 306.232 379.341 319.444 360.382 342.462C353.682 350.598 350.291 359.967 345.344 369.049C344.767 367.796 344.226 366.6 343.58 365.377Z"/><path fill="#010000" d="M462.807 293.999L463.516 293.96C466.223 293.831 471.299 293.919 470.431 298.055C467.762 300.818 461.998 301.509 458.044 302.393C455.324 303.234 453.822 304.129 451.435 302.954L451.1 301.773C453.016 296.884 458.106 295.009 462.807 293.999Z"/><path fill="#406686" d="M428.012 532.054C429.233 532.336 429.959 532.424 430.566 533.722C437.778 549.135 443.39 561.399 454.835 574.328C451.176 581.769 448.253 590.254 446.384 598.295C443.891 609.023 445.211 610.366 454.999 612.811C454.39 633.028 449.505 652.445 450.187 672.549C450.338 676.992 452.539 683.407 453.959 687.58C451.317 696.822 452.09 699.541 453.735 708.806C446.808 708.507 442.48 707.874 436.811 712.062L430.29 710.844C420.197 708.183 430.235 706.443 421.289 703.522C415.703 701.699 411.272 700.536 407.137 705.157C402.389 703.357 399.154 702.046 394.945 699.222C392.484 693.141 389.778 683.512 389.78 676.915C389.784 661.157 391.506 644.529 393.375 628.934C395.645 609.475 398.292 590.061 401.315 570.705C402.499 563.346 404.534 548.291 406.416 541.796C412.913 537.215 420.469 534.411 428.012 532.054Z"/><path fill="#525245" d="M412.921 591.709C423.761 590.668 422.251 599.588 424.75 608.191C428.9 608.338 436.218 608.382 438.341 612.999C442.422 622.705 431.143 629.152 428.714 636.718C426.754 642.826 430.846 658.507 423.939 662.017C413.749 661.629 415.822 649.224 411.414 644.351C407.887 640.451 398.045 646.285 397.38 635.069C396.689 623.426 405.251 599.899 412.921 591.709Z"/><path fill="#51504B" d="M404.357 657.709C410.403 658.639 424.333 677.8 413.888 684.532C402.431 681.302 395.019 667.781 404.357 657.709Z"/><path fill="#2C3237" d="M628.786 674.579C633.849 673.982 638.762 674.517 643.741 675.375C645.705 680.348 646.802 685.343 649.275 690.527C660.519 714.092 671.981 726.37 693.053 741.099C690.14 746.157 688.019 750.091 683.708 754.126C680.73 756.867 677.418 759.222 673.852 761.137C670.121 763.116 658.522 765.241 660.296 770.223C666.956 775.428 684.437 762.459 690.079 758.724C695.111 765.995 692.237 772.139 686.647 778.11C675.626 789.881 660.976 792.443 645.7 789.66C634.427 787.388 627.657 778.253 628.538 767.098C628.766 764.21 628.8 760.308 627.493 757.682C626.074 756.921 626.852 757.122 625.025 757.374C621.473 760.12 622.856 768.461 622.1 773.194C619.169 775.23 612.054 771.377 609.929 768.704C604.936 762.423 604.158 753.07 605.669 745.423C606.423 741.604 608.75 738.208 608.983 734.265C608.247 732.781 608.802 733.315 607.203 732.672C601.572 733.25 600.284 743.607 599.044 748.514C581.196 734.354 592.87 710.66 608.486 700.577C612.068 698.264 623.066 693.453 623.28 689.067L622.502 688.465C616.673 687.408 612.371 690.051 607.437 692.6C611.201 681.524 617.435 676.792 628.786 674.579Z"/><path fill="#87837C" d="M285.439 359.62C291.31 361.507 296.979 363.676 302.804 365.822C309.254 368.197 317.729 373.206 324.69 370.88C329.634 369.228 333.001 363.467 338.395 362.321C337.707 366.263 332.692 386.304 340.997 385.589C349.065 384.894 353.783 375.176 363.437 375.379L363.921 375.975C362.981 377.761 348 390.581 345.146 393.38C346.356 394.034 347.237 394.586 348.535 395.051C354.07 389.496 362.503 381.451 369.002 377.306C375.868 378.616 384.89 380.105 391.593 381.799C381.003 389.784 370.153 397.869 360.816 407.359C352.514 415.797 344.932 425.896 337.273 435.048C336.76 435.853 335.978 437.251 335.329 437.837C324.671 455.286 315.916 469.995 308.829 489.446C304.275 482.002 302.657 480.319 295.666 475.394C297.511 470.378 299.724 465.856 302.114 461.096C303.198 458.938 305.222 455.907 305.979 453.919L305.988 453.107C308.703 446.575 315.368 436.492 319.26 430.293L316.313 429.645C313.76 433.539 311.431 437.134 309.07 441.145C307.774 443.346 305.266 448.341 303.928 450.14L303.868 450.678C298.864 458.225 296.618 466.555 292.286 473.648L291.431 473.4C289.886 470.193 293.332 462.306 293.583 458.036C294.015 450.66 294.116 445.004 292.734 437.718C291.18 429.752 288.571 422.029 284.975 414.754C280.477 405.671 265.724 385.12 265.98 376.184C270.662 381.704 282.039 363.301 285.064 360.019L285.439 359.62Z"/><path fill="#87837C" d="M369.002 377.306C375.868 378.616 384.89 380.105 391.593 381.799C381.003 389.784 370.153 397.869 360.816 407.359C352.514 415.797 344.932 425.896 337.273 435.048C336.76 435.853 335.978 437.251 335.329 437.837C324.671 455.286 315.916 469.995 308.829 489.446C304.275 482.002 302.657 480.319 295.666 475.394C297.511 470.378 299.724 465.856 302.114 461.096C303.198 458.938 305.222 455.907 305.979 453.919C318.84 453.294 315.638 449.052 322.81 440.641C323.566 439.754 329.088 435.851 330.979 434.113C331.209 432.976 332.259 427.991 332.708 427.299C341.051 414.453 345.389 419.759 348.651 402.069C348.03 399.998 347.501 398.761 346.646 396.76L348.535 395.051C354.07 389.496 362.503 381.451 369.002 377.306Z"/><path fill="#525245" d="M335.329 437.837C333.112 436.72 332.867 437.935 332.043 435.054C332.76 433.113 332.172 433.895 333.954 432.689C336.062 432.487 335.168 432.239 336.807 433.077L337.273 435.048C336.76 435.853 335.978 437.251 335.329 437.837Z"/><path fill="#424039" d="M309.394 460.396C314.366 461.606 313.269 464.377 310.573 467.509L309.603 467.682C306.635 466.572 308.6 462.796 309.394 460.396Z"/><path fill="#525245" d="M345.146 393.38C346.356 394.034 347.237 394.586 348.535 395.051L346.646 396.76C347.501 398.761 348.03 399.998 348.651 402.069C345.389 419.759 341.051 414.453 332.708 427.299C332.259 427.991 331.209 432.976 330.979 434.113C329.088 435.851 323.566 439.754 322.81 440.641C315.638 449.052 318.84 453.294 305.979 453.919L305.988 453.107C308.703 446.575 315.368 436.492 319.26 430.293L316.313 429.645C313.76 433.539 311.431 437.134 309.07 441.145C307.774 443.346 305.266 448.341 303.928 450.14C303.457 448.965 300.288 445.99 299.333 443.294C297.238 437.373 297.853 431.167 301.734 426.129C303.343 424.04 305.168 422.803 306.159 420.491C304.048 419.307 302.22 418.155 300.6 416.329C296.14 411.303 305.676 401.832 310.936 403.397C314.183 404.364 314.378 406.297 315.935 408.916C319.162 408.741 327.277 391.502 343.902 394.75L345.146 393.38Z"/><path fill="#424039" d="M343.75 399.581C340.034 403.766 340.116 404.195 335.474 407.419L335.792 407.067L334.686 405.587C336.668 401.715 338.61 402.303 341.03 398.96L343.75 399.581Z"/><path fill="#424039" d="M319.143 425.599C322.11 421.304 325.247 417.128 328.544 413.082C326.986 417.515 325.543 420.234 323.405 424.369L319.143 425.599Z"/><path fill="#0D0E0F" d="M345.146 393.38C346.356 394.034 347.237 394.586 348.535 395.051L346.646 396.76L343.75 399.581L341.03 398.96L343.902 394.75L345.146 393.38Z"/><path fill="#0D0E0F" d="M319.143 425.599L323.405 424.369L319.26 430.293L316.313 429.645C316.924 428.561 318.359 426.685 319.143 425.599Z"/><path fill="#525245" d="M301.509 376.537C313.032 376.417 311.009 389.308 303.432 393.549C290.313 394.612 293.891 381.163 301.509 376.537Z"/><path fill="#406686" d="M652.242 422.701C667.475 423.172 671.835 438.296 676.498 449.931C642.392 452.262 613.287 474.973 591.118 499.445C575.768 516.389 564.693 537.284 552.311 556.416C543.58 549.484 526.681 533.093 516.416 530.574C511.273 529.312 503.317 536.183 498.882 539.469C489.909 546.128 486.076 550.433 478.081 557.729C479.755 554.555 481.996 551.073 484.327 548.339C504.715 524.424 527.952 502.665 553.26 484.029C557.564 480.86 562.059 476.83 566.78 474.318C570.684 477.872 571.683 478.358 576.747 479.715C593.604 475.503 594.55 462.104 603.661 450.547C604.532 449.442 612.367 444.641 614.116 443.461C619.044 446.749 624.553 450.589 630.087 451.592C646.204 454.513 646.716 434.073 650.529 423.869C650.529 423.869 652.061 422.824 652.242 422.701Z"/><path fill="#525245" d="M567.187 507.044C568.717 507.06 570.791 508.668 570.577 510.177C569.764 515.919 563.621 521.54 558.927 524.513C555.714 526.548 552.934 526.594 549.334 526.677C535.834 519.779 561.153 508.679 567.187 507.044Z"/><path fill="#49DF9F" d="M425.837 402.088C424.174 407.608 422.06 412.983 419.516 418.157C411.637 434.12 386.857 463.327 426.637 448.156C423.304 456.374 422.812 458.786 421.541 467.424C414.748 472.555 408.173 476.684 401.596 482.219C387.667 493.944 374.046 506.071 360.471 518.204C355.992 522.208 350.75 525.511 346.475 529.222C342.881 525.845 340.21 523.319 337.43 519.216C338.566 515.488 339.745 511.773 340.966 508.072C338.801 505.819 340.716 498.408 342.211 496.157C343.443 496.265 344.027 496.534 345.2 496.926C360.526 458.873 390.157 422.759 425.837 402.088Z"/><path fill="#0F1118" d="M340.966 508.072C338.801 505.819 340.716 498.408 342.211 496.157C343.443 496.265 344.027 496.534 345.2 496.926C343.938 500.112 341.874 504.906 340.966 508.072Z"/><path fill="#87837C" d="M575.8 131.073C609.625 127.232 632.597 160.627 603.389 185.673C597.028 191.128 586.047 194.237 577.648 194.593C565.678 194.946 556.713 194.538 546.587 187.394C533.966 178.491 530.903 161.316 540.428 148.965C549.417 137.308 561.74 132.993 575.8 131.073Z"/><path fill="#010000" d="M576.528 136.094C618.047 133.023 620.585 184.594 575.618 188.565C566.825 188.759 557.145 188.083 549.893 182.494C545.23 178.932 542.252 173.598 541.667 167.76C539.728 147.957 559.598 137.47 576.528 136.094Z"/><path fill="#9EB8C0" d="M548.382 173.809C540.657 160.147 551.409 149.229 563.25 143.847C572.455 139.585 582.975 139.145 592.503 142.625L597.295 145.364C613.123 159.289 602.003 176.959 585.237 182.704C574.523 186.375 557.804 185.744 550.125 176.214L548.382 173.809Z"/><path fill="#9EB8C0" d="M548.382 173.809C540.657 160.147 551.409 149.229 563.25 143.847C572.455 139.585 582.975 139.145 592.503 142.625C586.353 144.164 550.166 168.228 548.382 173.809Z"/><path fill="#DBEFF3" d="M592.503 142.625L597.295 145.364C595.438 147.865 586.954 152.228 583.687 154.357L561.21 169.141C558.861 170.688 552.386 175.211 550.125 176.214L548.382 173.809C550.166 168.228 586.353 144.164 592.503 142.625Z"/><path fill="#5B5850" d="M606.28 773.277L610.24 776.023C614.319 778.36 618.052 779.559 622.766 779.932C625.028 780.951 625.022 781.696 626.599 783.924L631.077 789.35C627.251 792.175 619.093 795.632 614.425 797.7C602.489 804.297 575.49 812.089 562.161 814.009C558.206 815.178 552.401 815.934 548.242 816.437C521.372 819.229 496.695 818.556 470.388 811.609C471.762 810.136 475.163 809.076 477.191 808.275L478.883 806.968C477.201 805.205 476.461 804.808 474.389 803.433C466.2 803.053 467.352 803.027 462.994 796.294C460.79 792.889 454.423 792.608 450.535 792.14L452.027 789.782C452.312 786.991 450.446 787.294 450.788 784.528C453.842 784.977 457.346 785.874 460.396 786.58C461.883 785.771 463.454 784.713 464.896 783.788C511.847 800.645 561.664 792.71 606.28 773.277Z"/><path fill="#424039" d="M610.24 776.023C614.319 778.36 618.052 779.559 622.766 779.932C621.491 781.222 618.421 784.176 617.614 785.609C614.068 791.91 594.721 799.8 588.94 794.766C587.138 788.305 605.349 778.419 610.24 776.023Z"/><path fill="#424039" d="M548.242 816.437C547.8 812.601 548.657 811.679 552.136 809.743C556.146 807.51 567.96 802.864 570.51 808.453C569.378 812.893 564.697 809.738 562.161 814.009C558.206 815.178 552.401 815.934 548.242 816.437Z"/><path fill="#424039" d="M626.599 783.924L631.077 789.35C627.251 792.175 619.093 795.632 614.425 797.7C616.505 793.004 622.7 787.962 626.599 783.924Z"/><path fill="#525245" d="M478.883 806.968C480.913 806.38 482.22 805.761 484.215 806.21L484.82 806.853C482.757 809.069 480.061 808.397 477.191 808.275L478.883 806.968Z"/><path fill="#424039" d="M577.124 788.865C580.062 788.816 581.897 788.346 583.96 790.648C585.226 795.593 580.069 798.412 576.407 800.321C573.785 800.431 571.902 800.498 570.234 798.156C569.211 793.831 573.629 790.385 577.124 788.865Z"/><path fill="#424039" d="M507.776 805.698C508.181 802.691 506.433 803.25 506.431 800.482C510.209 798.005 513.937 801.256 516.005 804.275C516.086 806.42 516.303 807.184 515.44 809.058C512.511 811.999 506.598 809.897 505.819 806.654C506.895 805.944 506.522 806.118 507.776 805.698Z"/><path fill="#51504B" d="M507.776 805.698C508.181 802.691 506.433 803.25 506.431 800.482C510.209 798.005 513.937 801.256 516.005 804.275C513.116 805.046 510.727 805.934 507.776 805.698Z"/><path fill="#424039" d="M482.94 797.44C485.969 796.927 497.54 798.361 499.342 800.829L498.854 801.843C494.749 802.814 485.401 802.155 482.752 798.705L482.94 797.44Z"/><path fill="#424039" d="M399.407 382.051C408.471 383.086 417.672 383.737 426.602 384.791C427.281 388.459 427.288 389.9 427.324 393.654L426.745 394.081C420.942 398.321 414.395 401.719 408.24 406.164C391.497 418.258 379.429 431.702 366.154 447.275C351.816 463.44 337.942 494.564 332.129 515.159C320.447 504.027 319.001 508.797 311.931 493.111C319.542 469.642 338.25 438.636 354.85 420.335C365.031 408.778 386.26 389.435 399.407 382.051Z"/><path fill="#51504B" d="M354.85 420.335C357.938 430.695 325.85 461.973 332.833 467.312C343.574 468.135 356.172 435.417 358.86 434.298C367.973 435.136 366.115 440.507 366.154 447.275C351.816 463.44 337.942 494.564 332.129 515.159C320.447 504.027 319.001 508.797 311.931 493.111C319.542 469.642 338.25 438.636 354.85 420.335Z"/><path fill="#424039" d="M346.577 461.594L348.02 461.994C352.437 466.881 343.156 479.682 339.569 483.504C338.458 482.404 337.559 479.684 336.925 478.127C338.601 473.281 342.651 464.896 346.577 461.594Z"/><path fill="#424039" d="M334.285 479.212C337.92 482.034 335.038 486.489 332.946 489.393C328.569 484.85 330.704 482.866 334.285 479.212Z"/><path fill="#424039" d="M345.691 712.467C344.748 709.193 337.273 698.17 343.416 697.051C347.44 698.543 349.353 702.539 352.52 705.408C355.086 705.803 356.523 705.347 359.064 704.867C384.817 742.51 420.227 771.235 464.784 783.769C464.821 783.775 464.859 783.782 464.896 783.788C463.454 784.713 461.883 785.771 460.396 786.58C457.346 785.874 453.842 784.977 450.788 784.528C450.446 787.294 452.312 786.991 452.027 789.782L450.535 792.14C454.423 792.608 460.79 792.889 462.994 796.294C467.352 803.027 466.2 803.053 474.389 803.433C476.461 804.808 477.201 805.205 478.883 806.968L477.191 808.275C475.163 809.076 471.762 810.136 470.388 811.609C466.562 811.27 462.052 809.883 458.428 808.664C430.267 801.01 395.806 781.191 374.125 761.798C362.361 751.185 351.705 739.406 342.318 726.642C343.496 723.388 344.888 716.118 345.691 712.467Z"/><path fill="#525245" d="M437.366 791.225C436.063 789.715 433.427 786.631 433.123 784.666C436.515 781.939 446.68 783.289 450.788 784.528C450.446 787.294 452.312 786.991 452.027 789.782L450.535 792.14C449.485 792.291 448.274 792.316 447.455 792.825C444.722 793.578 444.081 793.483 441.664 792.326C440.227 791.976 438.794 791.61 437.366 791.225Z"/><path fill="#5B5850" d="M441.664 792.326C442.639 790.716 441.96 791.248 443.798 790.711C445.657 791.197 445.984 791.401 447.455 792.825C444.722 793.578 444.081 793.483 441.664 792.326Z"/><path fill="#2C3237" d="M553.281 451.595C553.106 451.437 560.979 467.766 562.316 469.965C549.113 478.965 536.427 488.702 524.321 499.131C518.436 504.134 511.541 511.423 505.504 515.415L494.623 515.269C494.644 512.237 494.839 508.898 491.871 507.209C491.327 507.192 490.784 507.175 490.24 507.158C481.758 515.231 474.881 525.782 465.204 532.769C465.038 532.877 464.871 532.984 464.705 533.092C455.735 519.511 455.206 508.923 454.022 493.375L452.952 492.482C446.9 491.506 435.976 500.347 431.017 503.917L430.284 497.21C431.063 486.017 432.454 480.372 435.523 469.682C444.659 467.098 451.54 462.58 458.743 456.637C458.207 463.654 455.956 486.889 461.834 490.207C478.061 499.368 501.564 467.226 508.481 457.059L508.594 457.936C509.626 465.652 509.029 473.024 510.287 480.577C511.094 485.417 516.285 487.762 520.677 485.971C535.692 479.845 546.016 465.475 553.281 451.595Z"/><path fill="#E56B26" d="M583.956 126.052C595.916 119.469 623.911 114.044 635.449 122.518C639.719 125.54 643.951 129.814 646.508 134.386L646.442 135.138L645.326 134.878L644.028 135.215C643.166 136.737 643.286 137.689 643.205 139.435C652.308 145.734 661.324 152.488 668.819 160.768C682.286 175.645 694.047 200.856 697.641 220.54C698.603 226.087 699.311 231.674 699.763 237.286C687.488 222.948 673.04 207.99 658.603 195.854C654.134 192.098 647.818 188.566 643.92 184.357C643.588 183.998 643.291 181.884 643.203 181.25C640.918 181.722 640.678 181.582 638.318 181.136C635.334 179.934 633.799 178.274 630.647 177.39C630.398 176.053 630.769 169.581 630.874 167.931C630.736 156.479 622.923 147.798 614.964 140.829C604.772 131.905 597.496 127.831 583.956 126.052Z"/><path fill="#340704" d="M631.505 129.439C637.489 129.357 640.452 131.69 645.326 134.878L644.028 135.215C643.166 136.737 643.286 137.689 643.205 139.435C640.219 137.771 633.303 134.281 631.266 131.866C630.81 131.325 631.271 130.427 631.505 129.439Z"/><path fill="#1E0503" d="M630.874 167.931C631.171 170.007 631.338 171.35 631.405 173.441C637.314 175.143 639.961 175.77 643.203 181.25C640.918 181.722 640.678 181.582 638.318 181.136C635.334 179.934 633.799 178.274 630.647 177.39C630.398 176.053 630.769 169.581 630.874 167.931Z"/><path fill="#B9846E" d="M635.449 122.518C639.719 125.54 643.951 129.814 646.508 134.386L646.442 135.138L645.326 134.878C640.452 131.69 637.489 129.357 631.505 129.439C632.629 127.626 632.144 127.814 633.781 127.024L634.542 127.344L634.131 128.756C638.324 128.532 638.322 130.822 640.622 130.551L640.989 129.166C640.332 127.131 637.237 125.093 635.344 123.453L635.449 122.518Z"/><path fill="#49DF9F" d="M386.86 626.251C388.1 627.293 387.136 631.103 386.959 632.683C385.103 649.23 383.252 666.037 384.68 682.695C384.521 684.544 387.847 695.04 387.469 696.09C383.71 706.517 385.956 718.38 387.869 729.567C379.362 721.257 373.9 714.643 367.02 704.919C355.326 689.434 342.969 663.678 337.322 644.95C359.753 641.96 368.002 639.979 386.86 626.251Z"/><path fill="#406686" d="M563.549 748.844L568.714 748.661C574.632 760.095 578.155 764.788 586.04 774.631C559.829 786.078 522.54 788.71 494.414 784.666C491.618 784.316 488.873 783.679 486.118 783.089C484.316 776.189 481.873 767.772 481.149 760.834C488.989 760.126 490.509 758.903 497.223 756.523C498.379 756.113 508.911 756.022 511.106 755.941C520.203 755.603 528.384 754.771 537.384 753.336C537.521 755.51 537.586 761.14 539.785 762.156C544.107 764.154 552.299 762.958 556.737 761.918C563.385 760.36 559.151 753.664 561.047 749.718C561.399 749.048 562.587 749.042 563.549 748.844Z"/><path fill="#AFAEAA" d="M327.969 305.947C333.233 300.021 350.778 286.523 358.034 283.755C366.259 287.723 375.858 296.662 382.822 302.83L378.583 305.223C362.97 317.868 354.353 326.084 344.829 344.76C342.56 350.274 339.73 356.583 338.395 362.321C333.001 363.467 329.634 369.228 324.69 370.88C317.729 373.206 309.254 368.197 302.804 365.822C296.979 363.676 291.31 361.507 285.439 359.62L285.064 360.019C282.039 363.301 270.662 381.704 265.98 376.184C268.656 371.19 279.318 357.486 283.507 353.605C297.376 355.777 309.115 364.662 321.42 367.203C323.989 367.734 339.451 351.154 341.444 348.294C342.368 346.854 342.66 345.605 342.14 343.94C338.26 331.538 330.659 318.676 327.969 305.947Z"/><path fill="#87837C" d="M355.465 289.754C362.325 293.678 373.757 302.819 378.583 305.223C362.97 317.868 354.353 326.084 344.829 344.76C344.184 340.863 344.725 339.295 343.556 334.317C341.346 324.901 337.492 316.742 335.057 307.567C338.873 303.864 351.309 292.3 355.465 289.754Z"/><path fill="#5B5850" d="M298.971 631.923C313.023 640.041 315.018 641.598 330.861 644.794C336.373 665.127 347.207 687.477 359.064 704.867C356.523 705.347 355.086 705.803 352.52 705.408C349.353 702.539 347.44 698.543 343.416 697.051C337.273 698.17 344.748 709.193 345.691 712.467C344.888 716.118 343.496 723.388 342.318 726.642C338.493 721.898 335.291 716.949 331.955 711.87C316.528 686.88 305.019 660.812 298.971 631.923Z"/><path fill="#424039" d="M329.6 685.247C335.904 686.049 337.008 695.766 339.233 700.71C340.395 703.292 339.867 704.526 338.652 706.871C333.393 705.883 326.487 691.486 329.6 685.247Z"/><path fill="#424039" d="M317.637 652.975C323.432 654.393 326.438 663.144 323.126 668.084C315.303 667.071 314.722 658.937 317.637 652.975Z"/><path fill="#E56B26" d="M559.644 105.727C569.434 103.465 592.618 104.69 601.328 108.161C606.618 108.942 615.169 111.888 620.558 113.642C614.507 113.689 607.584 114.235 601.92 114.19C586.724 118.11 577.932 125.958 562.625 128.907C552.127 130.929 542.55 139.095 535.814 147.155C527.123 144.778 524.142 144.684 515.035 144.455C514.807 141.122 514.742 140.485 513.778 137.241L512.909 135.318L514.198 135.264L515.217 135.245C517.515 133.272 523.799 125.646 526.17 122.975C536.625 112.916 545.341 108.25 559.644 105.727Z"/><path fill="#F0A562" d="M526.17 122.975C536.625 112.916 545.341 108.25 559.644 105.727L557.91 106.987C558.217 108.036 557.758 108.473 557.248 109.347L554.657 110.886C547.657 115.524 539.483 120.693 533.902 126.894C531.741 129.295 528.06 133.952 525.026 134.355C524.074 133.903 523.807 133.823 522.945 133.23C524.126 130.335 524.775 128.803 526.313 126.049L526.17 122.975Z"/><defs><linearGradient id="gradient_7" gradientUnits="userSpaceOnUse" x1="547.48322" y1="115.93427" x2="541.69049" y2="109.74109"><stop offset="0" stop-color="#DA794A"/><stop offset="1" stop-color="#AF8167"/></linearGradient></defs><path fill="url(#gradient_7)" d="M526.17 122.975C536.625 112.916 545.341 108.25 559.644 105.727L557.91 106.987C558.217 108.036 557.758 108.473 557.248 109.347L554.657 110.886C545.732 110.311 532.189 119.616 526.313 126.049L526.17 122.975Z"/><path fill="#CD764C" d="M526.17 122.975L526.313 126.049C524.775 128.803 524.126 130.335 522.945 133.23C521.422 133.543 521.451 133.702 520.206 134.707C519.293 134.119 519.683 134.249 519.25 132.631C516.524 134.765 518.588 134.967 513.778 137.241L512.909 135.318L514.198 135.264L515.217 135.245C517.515 133.272 523.799 125.646 526.17 122.975Z"/><path fill="#B9846E" d="M601.328 108.161C606.618 108.942 615.169 111.888 620.558 113.642C614.507 113.689 607.584 114.235 601.92 114.19L602.253 113.36C603.153 113.415 609.625 112.641 610.048 112.393C609.154 109.312 603.925 110.587 601.328 108.161Z"/><path fill="#87837C" d="M441.348 714.661C445.976 714.45 455.531 715.702 460.798 716.013C468.744 716.481 479.899 716.108 487.306 717.827C486.757 727.545 486.641 737.441 488.627 747.016C489.073 749.168 490.189 752.545 489.21 754.423L488.723 754.5C476.118 756.314 462.864 754.189 450.242 753.056C441.444 752.266 441.494 741.698 440.917 734.919C440.418 729.058 440.089 720.381 441.348 714.661Z"/><path fill="#010000" d="M481.16 719.297L481.9 719.672C482.748 721.911 482.213 730.299 482.346 733.581C482.566 739.028 485.55 747.459 484.107 752.709C483.931 753.346 482.802 753.519 481.926 753.841C479.33 744.459 474.973 727.855 481.16 719.297Z"/><path fill="#424039" d="M678.659 429.572C687.826 430.188 696.053 428.362 697.25 418.005C701.126 422.203 705.125 426.487 708.203 431.312C725.805 456.062 736.927 478.915 745.082 508.324C740.646 503.57 736.524 499.225 731.919 494.66C729.298 492.062 723.629 486.974 721.497 484.381C708.278 473.85 710.264 474.642 702.347 460.602C697.21 451.491 685.883 437.114 678.659 429.572Z"/><path fill="#5B5850" d="M721.497 484.381C720.633 479.443 719.233 473.699 717.962 468.813C717.034 465.243 715.643 462.098 714.897 458.332C715.691 457.443 715.881 457.197 716.526 456.195C716.588 453.92 708.487 437.35 707.338 432.128L708.203 431.312C725.805 456.062 736.927 478.915 745.082 508.324C740.646 503.57 736.524 499.225 731.919 494.66C729.298 492.062 723.629 486.974 721.497 484.381Z"/><path fill="#406686" d="M427.623 470.308C428.912 474.255 420.606 495.289 425.783 507.889C426.368 509.312 427.36 510.682 428.931 511.096C432.397 512.009 435.887 509.101 438.445 507.194C440.244 528.457 445.164 542.59 452.47 562.186C448.237 556.851 442.585 545.597 439.126 539.095C437.799 536.241 434.093 527.342 431.649 526.536C423.96 523.998 405.31 536.026 397.972 539.144L397.403 539.38C401.048 526.951 417.718 477.001 427.623 470.308Z"/><path fill="#8E6645" d="M528.741 719.922C530.591 719.659 532.392 719.175 534.077 719.851C535.881 723.157 536.781 743.021 537.137 748.002C526.182 749.671 511.294 750.508 500.127 751.057L494.753 751.128C493.024 742.294 492.584 730.68 492.526 721.677C506.289 721.782 515.135 721.642 528.741 719.922Z"/><path fill="#2C3237" d="M448.289 499.98C449.214 501.304 448.977 511.237 449.639 513.983C452.172 524.498 455.158 530.821 461.006 539.681C474.979 535.909 482.721 524.435 491.17 513.152C490.797 516.122 489.925 518.281 492.174 520.504C494.776 521.176 498.362 519.963 501.178 519.324C497.153 524.161 492.498 529.182 488.323 534.123C481.511 542.076 475.242 550.583 469.094 559.058C466.406 562.762 464.34 566.517 461.452 570.171C459.426 565.926 457.754 560.478 456.082 555.99C449.981 539.614 444.486 520.333 444.197 502.734C445.269 501.902 447.114 500.76 448.289 499.98Z"/><path fill="#9EB8C0" d="M451.971 160.079C454.096 146.911 472.042 130.586 486.052 132.765L488.9 134.812C490.325 139.299 488.739 144.679 486.572 148.71C481.808 157.571 473.703 165.172 463.908 168.012C458.779 169.499 453.02 170.029 451.605 163.612L451.971 160.079Z"/><path fill="#DBEFF3" d="M451.971 160.079C454.096 146.911 472.042 130.586 486.052 132.765L488.9 134.812C483.749 139.899 458.063 163.266 451.605 163.612L451.971 160.079Z"/><path fill="#9EB8C0" d="M451.971 160.079C454.096 146.911 472.042 130.586 486.052 132.765C478.897 137.385 474.443 140.65 467.889 146.28C463.263 150.255 456.728 156.601 451.971 160.079Z"/><path fill="#49DF9F" d="M665.969 609.875C673.458 615.22 681.087 621.419 688.838 627.005C684.939 631.427 680.808 634.682 677.149 639.655L678.575 640.315C679.076 642.9 675.313 648.17 672.756 648.745L671.13 648.306C665.183 651.81 660.766 655.51 655.242 659.569C654.826 656.951 653.278 647.932 653.644 645.838C654.794 639.252 659.482 630.508 661.763 623.885C663.477 618.911 664.625 614.834 665.969 609.875Z"/><path fill="#0D0E0F" d="M677.149 639.655L678.575 640.315C679.076 642.9 675.313 648.17 672.756 648.745L671.13 648.306C672.877 646.099 675.275 642.227 677.149 639.655Z"/><path fill="#406686" d="M659.677 604.079C665.452 609.241 652.926 618.739 650.254 623.205L650.597 623.873C652.895 623.98 654.562 622.931 656.715 621.956C654.163 628.995 648.934 636.486 647.734 643.876C646.853 649.3 648.681 657.276 649.659 662.86C648.004 665.277 646.751 667.529 645.31 670.072C642.023 669.427 638.052 668.938 634.688 668.439C634.211 661.78 634.471 659.976 631.623 654.059C636.548 639.792 636.413 640.29 637.703 624.123C650.12 617.221 651.595 615.75 659.677 604.079Z"/><path fill="#8E6645" d="M586.969 710.197C588.117 709.967 587.735 709.978 588.962 710.333C588.97 712.654 585.73 717.371 584.745 720.668C582.639 727.716 583.272 732.519 583.861 739.652C577.305 741.35 567.616 743.033 560.788 744.261C558.898 742.332 558.093 720.568 557.434 716.185C566.893 714.055 577.352 712.168 586.969 710.197Z"/><path fill="#51504B" d="M620.992 154.318C622.289 155.463 624.55 159.848 625.102 161.588C633.67 188.603 606.243 216.809 579.548 204.428L568.668 199.695C590.138 199.453 609.558 195.111 618.662 173.224C621.519 166.355 621.764 161.685 620.992 154.318Z"/><path fill="#406686" d="M547.488 710.787C549.14 710.655 549.468 710.442 550.858 711.301C552.804 714.982 555.673 750.472 556.199 757.085C552.955 757.382 549.723 757.79 546.507 758.308C545.548 758.344 544.782 758.325 543.825 758.306C542.249 756.662 541.113 735.178 540.705 731.149C539.994 724.118 539.116 718.431 537.361 711.453L547.488 710.787Z"/><path fill="#E56B26" d="M509.784 163.18C517.916 162.8 522.452 163.192 530.431 165.274C530.816 169.741 531.301 172.442 532.503 176.804C534.44 181.021 535.405 182.758 538.131 186.575C535.504 185.836 529.986 184.457 527.652 183.562C519.446 181.48 512.574 179.699 504.202 177.9C502.48 177.532 500.7 177.072 498.981 176.657L503.926 170.546C505.766 168.218 507.881 165.393 509.784 163.18Z"/><path fill="#CD764C" d="M532.503 176.804C534.44 181.021 535.405 182.758 538.131 186.575C535.504 185.836 529.986 184.457 527.652 183.562L527.735 182.827L528.263 183.006L528.769 182.432L528.451 182.253C530.638 180.116 531.23 179.659 532.503 176.804Z"/><path fill="#CD764C" d="M498.981 176.657L503.926 170.546C503.899 173.904 504.735 174.7 504.202 177.9C502.48 177.532 500.7 177.072 498.981 176.657Z"/><path fill="#406686" d="M425.57 749.621C429.044 750.468 434.741 751.257 438.417 751.887C439.24 753.261 440.136 754.594 441.014 755.936C446.296 758.395 452.678 758.973 458.48 759.816C459.146 763.311 462.542 773.728 461.901 775.957L460.724 775.968C453.851 773.678 427.11 763.168 423.607 758.028C424.569 757.16 424.779 757.216 426.037 756.653C426.442 755.179 425.78 751.344 425.57 749.621Z"/><path fill="#406686" d="M411.677 706.534C414.766 706.893 417.559 707.429 420.611 707.999C416.293 726.5 419.523 735.847 420.864 753.19C417.923 752.695 416.005 752.132 413.147 751.31L413.008 750.919C408.192 737.733 409.416 720.173 411.677 706.534Z"/><path fill="#8E6645" d="M390.571 704.063C396.044 705.997 400.092 708.406 406.259 710.247C405.009 720.236 405.285 728.167 405.905 738.101L405.391 738.451C401.944 738.41 396.56 734.346 393.92 732.099C391.648 723.824 391.065 712.685 390.571 704.063Z"/><path fill="#8E6645" d="M423.584 714.748C427.756 716.046 431.148 716.441 435.437 717.061C435.448 721.326 434.87 725.79 434.936 730.034C435.018 735.359 435.845 740.869 436.362 746.221L424.663 743.774C422.577 733.481 422.059 725.054 423.584 714.748Z"/><path fill="#51504B" d="M502.857 131.153C507.202 134.063 509.061 139.729 510.593 144.459C504.29 149.777 501.339 154.276 503.631 162.708C500.83 166.744 495.785 174.994 490.812 175.509C487.426 175.023 484.889 174.448 481.554 173.662C494.101 161.683 504.463 149.722 502.857 131.153Z"/><path fill="#87837C" d="M459.782 575.922L461.347 576.334C463.679 579.264 464.374 603.248 464.038 607.715C460.792 607.859 457.136 607.766 453.856 607.75C451.707 607.474 451.126 607.564 450.115 605.779C449.835 600.562 456.357 579.738 459.782 575.922Z"/><path fill="#010000" d="M455.307 595.143C461.995 594.793 463.594 600.436 459.046 604.895C451.83 606.248 451.941 599.405 455.307 595.143Z"/><path fill="#FEFEFE" d="M444.07 242.645C444.447 242.69 444.823 242.742 445.198 242.799C450.043 243.56 451.26 245.962 454.076 249.798C438.063 246.006 436.471 265.119 438.384 276.231C437.343 277.306 432.691 278.523 430.976 279.068C428.8 266.302 430.402 248.323 444.07 242.645Z"/><path fill="#406686" d="M462.723 760.3C467.366 760.833 472.448 761.053 477.143 761.348C478.977 767.948 480.592 775.631 482.115 782.336C477.043 781.111 472.451 780.077 467.511 778.328C465.824 772.343 464.228 766.333 462.723 760.3Z"/><path fill="#51504B" d="M630.647 177.39C633.799 178.274 635.334 179.934 638.318 181.136C639.912 185.318 637.647 191.155 635.892 195.089C631.145 205.726 629.262 205.873 621.366 198.394C625.51 191.225 628.43 185.331 630.647 177.39Z"/><path fill="#010000" d="M633.021 184.388C636.51 188.537 633.18 194.429 629.703 197.425C626.301 192.783 629.802 188.291 633.021 184.388Z"/><path fill="#51504B" d="M512.324 149.444C519.57 149.156 526.825 149.695 533.949 151.052C533.295 153.48 532.353 159.22 530.56 160.466L528.934 160.106C521.597 158.441 516.335 159.285 509.185 158.419C507.928 158.267 507.659 157.278 507.342 156.368C508.109 153.244 510.045 151.616 512.324 149.444Z"/><path fill="#406686" d="M577.586 746.336C578.297 746.809 578.136 746.58 578.534 747.281C582.856 754.902 588.511 764.614 594.854 770.601C592.937 771.383 591.323 771.997 589.36 772.654C581.607 765.606 576.202 756.805 570.966 747.873C573.015 747.279 575.475 746.801 577.586 746.336Z"/><path fill="#406686" d="M585.716 743.163C590.207 748.316 592.832 750.531 598.254 754.787C598.784 758.273 601.671 766.686 601.075 768.423L599.937 768.141C595.849 764.202 582.803 750.146 581.961 745.092C582.778 743.926 584.276 743.662 585.716 743.163Z"/><path fill="#49DF9F" d="M683.037 454.27C679.59 452.34 677.868 445.161 680.729 442.699L681.591 442.932C686.887 449.013 693.353 456.816 696.414 464.302C694.63 462.924 684.404 454.772 683.037 454.27Z"/><path fill="#0F1118" d="M683.037 454.27C679.59 452.34 677.868 445.161 680.729 442.699L681.591 442.932C680.866 444.884 682.936 450.407 683.037 454.27Z"/><path fill="#FEFEFE" d="M449.542 254.506C451.262 254.808 452.724 255.233 453.943 256.619C454.834 257.616 455.293 258.926 455.22 260.262C455.116 262.509 454.134 263.706 452.585 265.149C445.162 265.183 445.677 258.978 449.542 254.506Z"/><path fill="#B9846E" d="M507.788 129.21C511.033 127.627 513.243 126.835 516.681 125.899C514.125 129.522 511.967 131.041 514.198 135.264L512.909 135.318C511.306 132.303 510.228 131.408 507.788 129.21Z"/><path fill="#0F1118" d="M845.287 555.742L846.295 556.548C846.845 558.334 846.33 559.454 845.856 561.288C844.78 558.858 844.963 558.426 845.287 555.742Z"/><path fill="#FEFEFE" fill-opacity="0.023529412" d="M804.705 373.216C807.886 377.412 808.753 382.935 807.942 388.056C806.108 399.621 787.913 416.116 787.993 420.713C788.049 423.937 791.182 427.318 792.638 430.131C797.75 430.178 804.447 430.071 809.41 430.401C802.666 431.405 798.923 431.375 792.15 431.282C789.999 427.553 788.149 424.207 786.194 420.376C789.998 413.291 801.2 403.285 804.923 394.844C808.832 385.981 807.658 381.649 804.705 373.216Z"/><path fill="#FEFEFE" fill-opacity="0.090196081" d="M563.524 88.2952C568.336 86.7922 577.702 86.3735 582.414 88.0044C579.048 88.6361 567.489 88.393 563.524 88.2952Z"/></svg>
\ No newline at end of file
diff --git "a/apps/landing/assets/images/crm/\320\227\320\275\321\226\320\274\320\276\320\272 \320\265\320\272\321\200\320\260\320\275\320\260 2026-07-02 \320\276 13.35.33.png" "b/apps/landing/assets/images/crm/\320\227\320\275\321\226\320\274\320\276\320\272 \320\265\320\272\321\200\320\260\320\275\320\260 2026-07-02 \320\276 13.35.33.png"
new file mode 100644
index 000000000..63108764d
Binary files /dev/null and "b/apps/landing/assets/images/crm/\320\227\320\275\321\226\320\274\320\276\320\272 \320\265\320\272\321\200\320\260\320\275\320\260 2026-07-02 \320\276 13.35.33.png" differ
diff --git "a/apps/landing/assets/images/crm/\320\227\320\275\321\226\320\274\320\276\320\272 \320\265\320\272\321\200\320\260\320\275\320\260 2026-07-02 \320\276 13.35.55.png" "b/apps/landing/assets/images/crm/\320\227\320\275\321\226\320\274\320\276\320\272 \320\265\320\272\321\200\320\260\320\275\320\260 2026-07-02 \320\276 13.35.55.png"
new file mode 100644
index 000000000..f1dd72b40
Binary files /dev/null and "b/apps/landing/assets/images/crm/\320\227\320\275\321\226\320\274\320\276\320\272 \320\265\320\272\321\200\320\260\320\275\320\260 2026-07-02 \320\276 13.35.55.png" differ
diff --git a/apps/landing/assets/images/mechanic/Simulator Screenshot - iPhone 16 Pro - 2026-07-02 at 13.29.12.png b/apps/landing/assets/images/mechanic/Simulator Screenshot - iPhone 16 Pro - 2026-07-02 at 13.29.12.png
new file mode 100644
index 000000000..45f1232da
Binary files /dev/null and b/apps/landing/assets/images/mechanic/Simulator Screenshot - iPhone 16 Pro - 2026-07-02 at 13.29.12.png differ
diff --git a/apps/landing/assets/images/mechanic/Simulator Screenshot - iPhone 16 Pro - 2026-07-02 at 13.30.11.png b/apps/landing/assets/images/mechanic/Simulator Screenshot - iPhone 16 Pro - 2026-07-02 at 13.30.11.png
new file mode 100644
index 000000000..3c0747005
Binary files /dev/null and b/apps/landing/assets/images/mechanic/Simulator Screenshot - iPhone 16 Pro - 2026-07-02 at 13.30.11.png differ
diff --git a/apps/landing/assets/images/user/Simulator Screenshot - iPhone 16 Pro - 2026-07-02 at 13.27.51.png b/apps/landing/assets/images/user/Simulator Screenshot - iPhone 16 Pro - 2026-07-02 at 13.27.51.png
new file mode 100644
index 000000000..1a08255ec
Binary files /dev/null and b/apps/landing/assets/images/user/Simulator Screenshot - iPhone 16 Pro - 2026-07-02 at 13.27.51.png differ
diff --git a/apps/landing/assets/images/user/Simulator Screenshot - iPhone 16 Pro - 2026-07-02 at 13.28.37.png b/apps/landing/assets/images/user/Simulator Screenshot - iPhone 16 Pro - 2026-07-02 at 13.28.37.png
new file mode 100644
index 000000000..29d96d894
Binary files /dev/null and b/apps/landing/assets/images/user/Simulator Screenshot - iPhone 16 Pro - 2026-07-02 at 13.28.37.png differ
diff --git a/apps/landing/assets/images/user/Simulator Screenshot - iPhone 16 Pro - 2026-07-02 at 13.28.49.png b/apps/landing/assets/images/user/Simulator Screenshot - iPhone 16 Pro - 2026-07-02 at 13.28.49.png
new file mode 100644
index 000000000..38abace6b
Binary files /dev/null and b/apps/landing/assets/images/user/Simulator Screenshot - iPhone 16 Pro - 2026-07-02 at 13.28.49.png differ
diff --git a/apps/landing/index.html b/apps/landing/index.html
new file mode 100644
index 000000000..1ac8b6857
--- /dev/null
+++ b/apps/landing/index.html
@@ -0,0 +1,977 @@
+<!doctype html>
+<html lang="uk">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rookit | Нова культура сервісного обслуговування</title>
+    <meta
+      name="description"
+      content="Rookit: екосистема цифрових взаємин між водієм та СТО. Мобільний застосунок, CRM і робочі кабінети майстрів для нової культури сервісного обслуговування."
+    />
+    <link rel="icon" href="./assets/favicon.svg" type="image/svg+xml" />
+    <link rel="icon" href="./assets/favicon.png" type="image/png" />
+    <link rel="apple-touch-icon" href="./assets/favicon.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div class="bg-glow bg-glow--one"></div>
+    <div class="bg-glow bg-glow--two"></div>
+
+    <header class="site-header">
+      <div class="container header-inner">
+        <a href="#top" class="brand">
+          <img
+            src="../Mobile/assets/images/iconLogin.svg"
+            alt="Rookit logo"
+            class="brand-logo"
+          />
+          <span>Rookit</span>
+        </a>
+        <button
+          class="menu-toggle"
+          type="button"
+          aria-label="Відкрити меню"
+          aria-expanded="false"
+          data-menu-toggle
+        >
+          <span></span><span></span><span></span>
+        </button>
+        <nav class="header-nav" data-menu>
+          <a href="#ecosystem">Екосистема</a>
+          <a href="#for-sto">Для СТО</a>
+          <a href="#shared-ecosystem">Спільна система</a>
+          <a href="#for-driver">Для водія</a>
+          <a href="#crm">CRM</a>
+          <a href="#screens">Інтерфейс</a>
+          <a href="#onboarding">Старт</a>
+          <a href="#contact" class="cta-link">Долучитись</a>
+        </nav>
+      </div>
+    </header>
+
+    <main id="top">
+      <section class="hero section">
+        <div class="container hero-grid">
+          <div>
+            <p class="eyebrow">Екосистема для СТО і водіїв</p>
+            <h1>Створюємо нову культуру сервісного обслуговування</h1>
+            <p class="lead">
+              Ми будуємо екосистему цифрових взаємин між власниками авто та
+              сервісами: мобільний застосунок для водіїв, CRM для СТО та робочі
+              кабінети майстрів. Система створює довіру, підсилює співпрацю і
+              відкриває нові ринкові можливості для партнерських сервісів.
+            </p>
+            <div class="hero-actions">
+              <a class="btn btn-primary" href="#contact">Запросити презентацію</a>
+              <a class="btn btn-secondary" href="#screens">Переглянути інтерфейс</a>
+            </div>
+            <ul class="quick-metrics">
+              <li>
+                <strong>Mobile + CRM + Майстри</strong>
+                <span>Три інструменти в одній екосистемі</span>
+              </li>
+              <li>
+                <strong>Цифрова звичка клієнта</strong>
+                <span>Регулярне використання застосунку водієм</span>
+              </li>
+              <li>
+                <strong>Новий стандарт ринку</strong>
+                <span>Перевага над традиційними методами ведення сервісу</span>
+              </li>
+            </ul>
+          </div>
+
+          <aside class="hero-panel">
+            <p class="panel-label">Основна ідея продукту</p>
+            <h2>Цифрова звичка = довіра + лояльність + ріст частки ринку</h2>
+            <p>
+              Наша ціль - виховати у клієнтів нову культуру взаємодії із сервісами
+              та зробити її звичкою. Для СТО це нові інструменти залучення,
+              утримання та монетизації.
+            </p>
+            <div class="status-stack">
+              <div class="status-pill status-pill--success">Верифікована історія</div>
+              <div class="status-pill status-pill--info">Трекінг ремонту в реальному часі</div>
+              <div class="status-pill status-pill--warning">Нова культура сервісу</div>
+            </div>
+            <img
+              class="hero-mark"
+              src="../Mobile/assets/images/iconLogin.svg"
+              alt=""
+              aria-hidden="true"
+            />
+          </aside>
+        </div>
+      </section>
+
+      <section class="section" id="ecosystem">
+        <div class="container">
+          <div class="section-head">
+            <p class="eyebrow">Архітектура продукту</p>
+            <h2>Єдина платформа для всіх учасників сервісного процесу</h2>
+          </div>
+          <div class="cards-grid">
+            <article class="value-card">
+              <h3>Мобільний застосунок водія</h3>
+              <p>
+                Функціонал достатньо об’ємний для регулярного використання, тому
+                клієнт формує цифрову звичку та тісніше прив’язується до сервісу.
+              </p>
+            </article>
+            <article class="value-card">
+              <h3>CRM для сервісу</h3>
+              <p>
+                Контроль процесів, аналітика, комунікація та інструменти допродажу
+                в одному середовищі для керівника та адміністраторів.
+              </p>
+            </article>
+            <article class="value-card">
+              <h3>Робочі кабінети майстрів</h3>
+              <p>
+                Оперативне ведення робіт, оновлення статусів у реальному часі та
+                зручна взаємодія з клієнтом через загальну систему.
+              </p>
+            </article>
+            <article class="value-card">
+              <h3>Цифровий паспорт автомобіля</h3>
+              <p>
+                Після кожного візиту до партнерського СТО в профілі авто
+                автоматично з’являється верифікований запис обслуговування. Усі
+                підтверджені візити збираються в єдиний цифровий паспорт — цілісну
+                історію, яка зростає разом із автомобілем.
+              </p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="section alt" id="screens">
+        <div class="container">
+          <div class="section-head section-head--wide">
+            <p class="eyebrow">Інтерфейс продукту</p>
+            <h2>Один екосистемний досвід у трьох інтерфейсах</h2>
+            <p class="section-lead">
+              Перемикайте між застосунком водія, кабінетом майстра та CRM. Натисніть
+              на екран, щоб відкрити скріншот у повному розмірі.
+            </p>
+          </div>
+
+          <div class="product-showcase">
+            <div class="showcase-tabs" role="tablist" aria-label="Інтерфейси продукту">
+              <button
+                type="button"
+                class="showcase-tab is-active"
+                role="tab"
+                aria-selected="true"
+                data-showcase-tab="driver"
+              >
+                Водій
+              </button>
+              <button
+                type="button"
+                class="showcase-tab"
+                role="tab"
+                aria-selected="false"
+                data-showcase-tab="mechanic"
+              >
+                Майстер
+              </button>
+              <button
+                type="button"
+                class="showcase-tab"
+                role="tab"
+                aria-selected="false"
+                data-showcase-tab="crm"
+              >
+                CRM
+              </button>
+            </div>
+
+            <div class="showcase-panels">
+              <article
+                class="showcase-panel is-active"
+                role="tabpanel"
+                data-showcase-panel="driver"
+              >
+                <div class="showcase-copy">
+                  <p class="showcase-label">Мобільний застосунок</p>
+                  <h3>Застосунок для водіїв</h3>
+                  <p>
+                    Гараж, історія обслуговування, запис на сервіс і статуси ремонту
+                    в одному зручному середовищі.
+                  </p>
+                  <ul class="showcase-points">
+                    <li>Цифровий паспорт автомобіля</li>
+                    <li>Верифікована історія авто</li>
+                    <li>Realtime статуси ремонту</li>
+                    <li>Пошук партнерських сервісів</li>
+                  </ul>
+                  <div class="showcase-thumbs">
+                    <button
+                      type="button"
+                      class="showcase-thumb is-active"
+                      data-showcase-thumb
+                      data-lightbox-index="0"
+                      aria-label="Скріншот 1"
+                    >
+                      <img
+                        src="./assets/images/user/Simulator%20Screenshot%20-%20iPhone%2016%20Pro%20-%202026-07-02%20at%2013.27.51.png"
+                        alt=""
+                        loading="lazy"
+                      />
+                    </button>
+                    <button
+                      type="button"
+                      class="showcase-thumb"
+                      data-showcase-thumb
+                      data-lightbox-index="1"
+                      aria-label="Скріншот 2"
+                    >
+                      <img
+                        src="./assets/images/user/Simulator%20Screenshot%20-%20iPhone%2016%20Pro%20-%202026-07-02%20at%2013.28.37.png"
+                        alt=""
+                        loading="lazy"
+                      />
+                    </button>
+                    <button
+                      type="button"
+                      class="showcase-thumb"
+                      data-showcase-thumb
+                      data-lightbox-index="2"
+                      aria-label="Скріншот 3"
+                    >
+                      <img
+                        src="./assets/images/user/Simulator%20Screenshot%20-%20iPhone%2016%20Pro%20-%202026-07-02%20at%2013.28.49.png"
+                        alt=""
+                        loading="lazy"
+                      />
+                    </button>
+                  </div>
+                </div>
+                <div class="showcase-visual">
+                  <button
+                    type="button"
+                    class="showcase-main"
+                    data-showcase-main
+                    data-lightbox-open
+                    data-caption="Застосунок для водіїв"
+                    aria-label="Відкрити скріншот: застосунок для водіїв"
+                  >
+                    <div class="device-frame device-frame--phone">
+                      <div class="device-notch" aria-hidden="true"></div>
+                      <img
+                        src="./assets/images/user/Simulator%20Screenshot%20-%20iPhone%2016%20Pro%20-%202026-07-02%20at%2013.27.51.png"
+                        alt="Застосунок для водіїв"
+                      />
+                    </div>
+                    <span class="showcase-expand">Розгорнути</span>
+                  </button>
+                </div>
+              </article>
+
+              <article class="showcase-panel" role="tabpanel" data-showcase-panel="mechanic">
+                <div class="showcase-copy">
+                  <p class="showcase-label">Робочий кабінет</p>
+                  <h3>Кабінет майстра</h3>
+                  <p>
+                    Оперативне ведення ремонту, оновлення статусів і контроль робіт
+                    прямо з мобільного робочого місця.
+                  </p>
+                  <ul class="showcase-points">
+                    <li>Активні роботи та черга</li>
+                    <li>Оновлення статусів у реальному часі</li>
+                    <li>Зручний мобільний сценарій для цеху</li>
+                  </ul>
+                  <div class="showcase-thumbs">
+                    <button
+                      type="button"
+                      class="showcase-thumb is-active"
+                      data-showcase-thumb
+                      data-lightbox-index="3"
+                      aria-label="Скріншот 1"
+                    >
+                      <img
+                        src="./assets/images/mechanic/Simulator%20Screenshot%20-%20iPhone%2016%20Pro%20-%202026-07-02%20at%2013.29.12.png"
+                        alt=""
+                        loading="lazy"
+                      />
+                    </button>
+                    <button
+                      type="button"
+                      class="showcase-thumb"
+                      data-showcase-thumb
+                      data-lightbox-index="4"
+                      aria-label="Скріншот 2"
+                    >
+                      <img
+                        src="./assets/images/mechanic/Simulator%20Screenshot%20-%20iPhone%2016%20Pro%20-%202026-07-02%20at%2013.30.11.png"
+                        alt=""
+                        loading="lazy"
+                      />
+                    </button>
+                  </div>
+                </div>
+                <div class="showcase-visual">
+                  <button
+                    type="button"
+                    class="showcase-main"
+                    data-showcase-main
+                    data-lightbox-open
+                    data-caption="Кабінет майстра"
+                    aria-label="Відкрити скріншот: кабінет майстра"
+                  >
+                    <div class="device-frame device-frame--phone">
+                      <div class="device-notch" aria-hidden="true"></div>
+                      <img
+                        src="./assets/images/mechanic/Simulator%20Screenshot%20-%20iPhone%2016%20Pro%20-%202026-07-02%20at%2013.29.12.png"
+                        alt="Кабінет майстра"
+                      />
+                    </div>
+                    <span class="showcase-expand">Розгорнути</span>
+                  </button>
+                </div>
+              </article>
+
+              <article class="showcase-panel" role="tabpanel" data-showcase-panel="crm">
+                <div class="showcase-copy">
+                  <p class="showcase-label">Веб-панель СТО</p>
+                  <h3>CRM для сервісу</h3>
+                  <p>
+                    Керування чергою, картками авто та операційними процесами в
+                    єдиному робочому середовищі для команди сервісу.
+                  </p>
+                  <ul class="showcase-points">
+                    <li>Черга та статуси візитів</li>
+                    <li>Картки авто та історія робіт</li>
+                    <li>Операційна аналітика для керівника</li>
+                  </ul>
+                  <div class="showcase-thumbs showcase-thumbs--desktop">
+                    <button
+                      type="button"
+                      class="showcase-thumb is-active"
+                      data-showcase-thumb
+                      data-lightbox-index="5"
+                      aria-label="Скріншот 1"
+                    >
+                      <img
+                        src="./assets/images/crm/%D0%97%D0%BD%D1%96%D0%BC%D0%BE%D0%BA%20%D0%B5%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202026-07-02%20%D0%BE%2013.35.33.png"
+                        alt=""
+                        loading="lazy"
+                      />
+                    </button>
+                    <button
+                      type="button"
+                      class="showcase-thumb"
+                      data-showcase-thumb
+                      data-lightbox-index="6"
+                      aria-label="Скріншот 2"
+                    >
+                      <img
+                        src="./assets/images/crm/%D0%97%D0%BD%D1%96%D0%BC%D0%BE%D0%BA%20%D0%B5%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202026-07-02%20%D0%BE%2013.35.55.png"
+                        alt=""
+                        loading="lazy"
+                      />
+                    </button>
+                  </div>
+                </div>
+                <div class="showcase-visual">
+                  <button
+                    type="button"
+                    class="showcase-main"
+                    data-showcase-main
+                    data-lightbox-open
+                    data-caption="CRM для СТО"
+                    aria-label="Відкрити скріншот: CRM для СТО"
+                  >
+                    <div class="device-frame device-frame--desktop">
+                      <div class="device-browser-bar" aria-hidden="true">
+                        <span></span><span></span><span></span>
+                      </div>
+                      <img
+                        src="./assets/images/crm/%D0%97%D0%BD%D1%96%D0%BC%D0%BE%D0%BA%20%D0%B5%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202026-07-02%20%D0%BE%2013.35.33.png"
+                        alt="CRM для СТО"
+                      />
+                    </div>
+                    <span class="showcase-expand">Розгорнути</span>
+                  </button>
+                </div>
+              </article>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="section" id="for-sto">
+        <div class="container">
+          <div class="section-head">
+            <p class="eyebrow">Для власників СТО</p>
+            <h2>Як екосистема дає вам конкурентну перевагу</h2>
+          </div>
+          <div class="cards-grid">
+            <article class="value-card">
+              <h3>Перевага над традиційними методами сервісу</h3>
+              <p>
+                Партнерські СТО отримують сучасний цифровий підхід: прозорість,
+                керованість і верифіковану історію обслуговування для клієнта.
+              </p>
+            </article>
+            <article class="value-card">
+              <h3>Клієнти з новою цифровою звичкою</h3>
+              <p>
+                Коли водій регулярно користується застосунком, він очікує аналогічно
+                високий рівень сервісу і повертається до партнерського СТО.
+              </p>
+            </article>
+            <article class="value-card">
+              <h3>Прямий діалог і рекламні push</h3>
+              <p>
+                Сервісні push-сповіщення інформують клієнта про ключові етапи
+                ремонту без зайвих дзвінків. Окремо передбачені рекламні push для
+                ваших прив’язаних клієнтів: безкоштовно повідомляйте про акції та
+                послуги, допродавуючи сервіс без витрат на зовнішню рекламу.
+              </p>
+            </article>
+            <article class="value-card">
+              <h3>Допродаж послуг через застосунок</h3>
+              <p>
+                Коли під час обслуговування з’являються додаткові роботи, клієнт
+                може погодити їх прямо в застосунку. Це зручніше для водія і дає
+                сервісу додаткову можливість монетизувати послуги без зайвого
+                адміністративного навантаження.
+              </p>
+            </article>
+            <article class="value-card">
+              <h3>Ваша клієнтська база під захистом</h3>
+              <p>
+                Клієнти, яких ви додаєте в систему, не стають доступними іншим
+                учасникам екосистеми як чужа аудиторія. Модель підписок на СТО
+                одразу прив’язує доданого клієнта до вашої бази. Водій може, як і
+                в реальному житті, підписатися на інші сервіси або відписатися від
+                неактуальних — конкуренція залишається здоровою, а ваші зусилля з
+                залучення захищені.
+              </p>
+            </article>
+            <article class="value-card">
+              <h3>Напрям додаткового доходу</h3>
+              <p>
+                Ми рухаємось у бік того, щоб екосистема допомагала сервісу
+                отримувати додатковий дохід — через розвиток застосунку для водіїв
+                і нові цифрові сценарії разом із партнерами. Це вектор, у якому
+                бачимо можливість окупити ваші вкладення в систему, а не просто отримати готовий набір
+                інструментів на сьогодні.
+              </p>
+            </article>
+            <article class="value-card">
+              <h3>Підписка замість дорогої власної розробки</h3>
+              <p>
+                Подібні системи дійсно корисні для бізнесу СТО, але їх розробка
+                коштує дуже дорого. Навіть після запуску цифровий продукт і надалі
+                вимагає великих витрат лише на підтримку. Rookit дає доступ до
+                такої екосистеми за мінімальну підписку — без інвестицій у сотні
+                тисяч доларів на власну розробку та обслуговування.
+              </p>
+            </article>
+            <article class="value-card">
+              <h3>Мережевий ефект кластера</h3>
+              <p>
+                Кожен новий водій, який приходить у застосунок не через окремий
+                сервіс, а через сарафанне радіо про екосистему, стає потенційним
+                клієнтом для всіх учасників кластера — без ваших витрат на
+                залучення. Мережевий ефект працює в обидва боки: кожен новий клієнт
+                і кожен новий партнерський СТО підсилюють цінність платформи для
+                всіх інших.
+              </p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="section alt" id="shared-ecosystem">
+        <div class="container">
+          <div class="section-head">
+            <p class="eyebrow">Ключова стратегія платформи</p>
+            <h2>Чому спільна екосистема виграє у довгостроковій перспективі</h2>
+          </div>
+
+          <article class="split-card ecosystem-thesis">
+            <h3>"Власний застосунок під ваш бренд — це витрати без результату. Спільна екосистема — це клієнт, який повертається сам."</h3>
+            <p>
+              Ми не робимо копію продукту під кожне СТО. Єдиний мобільний
+              застосунок об’єднує водіїв і партнерські сервіси на рівних умовах:
+              водій отримує зручність одного цифрового середовища, а партнери -
+              стійкий доступ до аудиторії та перевагу над сервісами поза екосистемою.
+            </p>
+          </article>
+
+          <div class="cards-grid">
+            <article class="value-card">
+              <h3>1) Проблема уваги</h3>
+              <p>
+                Водій не триматиме в телефоні 10 різних застосунків від 10 СТО.
+                Але один застосунок, де "живе" його авто, залишається з ним
+                надовго. Ваш бренд присутній у середовищі, куди клієнт реально
+                повертається.
+              </p>
+            </article>
+
+            <article class="value-card">
+              <h3>2) Історія, що подорожує з клієнтом</h3>
+              <p>
+                Водій не прив’язаний до одного сервісу: за потреби він може
+                звертатися до будь-якого партнера екосистеми. Переїхавши в інше
+                місто, клієнт зберігає всю накопичену історію, яка й надалі
+                поповнюється в інших партнерських СТО. Автомобіль «живе» в
+                застосунку — і вихід із системи означає втрату цілісності цієї
+                історії, тому мотивація залишатися в екосистемі значно вища.
+              </p>
+            </article>
+
+            <article class="value-card">
+              <h3>3) Кластерний ефект партнерів</h3>
+              <p>
+                Партнерські СТО формують єдиний кластер, який разом залучає й
+                утримує аудиторію водіїв. Кожен новий партнер підсилює платформу,
+                а кожен новий водій підвищує цінність для всіх учасників.
+              </p>
+            </article>
+
+            <article class="value-card">
+              <h3>Один застосунок — звичка і лояльність</h3>
+              <p>
+                Один зрозумілий продукт простіше запам’ятати і регулярно
+                використовувати. Водій заходить у застосунок не лише під час
+                поломки — перевіряє історію, шукає сервіси, взаємодіє з авто
+                щоденно. Кожен вхід підсилює звичку і підвищує ймовірність
+                повернення до партнерського СТО.
+              </p>
+            </article>
+          </div>
+
+          <article class="split-card marketing-engine">
+            <h3>Новий водій у екосистемі — ваш потенційний клієнт без витрат на залучення</h3>
+            <p>
+              Кожен водій, який реєструється в спільній екосистемі, отримує доступ
+              до партнерських сервісів у одному застосунку. Для СТО це означає нову
+              аудиторію без окремих зусиль і бюджету на власний застосунок чи
+              рекламу: клієнт уже в системі, де ваш сервіс може стати його вибором.
+            </p>
+          </article>
+
+          <article class="split-card growth-engine">
+            <h3>Самопідсилювана екосистема</h3>
+            <p>
+              Rookit — не набір розрізнених інструментів, а взаємопов’язана система,
+              де кожен елемент підсилює інший. З кожною взаємодією в застосунку,
+              CRM або кабінеті майстра зростає загальна цінність платформи для всіх
+              учасників. Це дає перевагу над вузькими нішевими рішеннями: ми
+              запускаємо маховик, де кожен компонент працює на залучення,
+              нагадування та продаж ваших послуг клієнтам. Паралельно ми рухаємось
+              у напрямку функціоналу, який допомагає сервісу окуповувати вкладення
+              в цифрову систему.
+            </p>
+          </article>
+        </div>
+      </section>
+
+      <section class="section alt" id="for-driver">
+        <div class="container">
+          <div class="section-head">
+            <p class="eyebrow">Цінність для водія</p>
+            <h2>Регулярний корисний досвід, що формує довіру до сервісу</h2>
+          </div>
+          <div class="timeline">
+            <div class="timeline-item">
+              <div class="timeline-marker">
+                <span class="dot" aria-hidden="true"></span>
+              </div>
+              <div class="timeline-content">
+                <h3>Цифровий паспорт і верифікована історія</h3>
+                <p>
+                  Партнерське СТО підтверджує виконані роботи, і запис автоматично
+                  потрапляє в цифровий паспорт авто. Водій також може самостійно
+                  додавати власні записи — наприклад, про ремонт вдома. Але лише
+                  історія, верифікована сервісом, має статус офіційної — саме вона
+                  формує рейтинг автомобіля, корисний при продажі.
+                </p>
+              </div>
+            </div>
+            <div class="timeline-item">
+              <div class="timeline-marker">
+                <span class="dot" aria-hidden="true"></span>
+              </div>
+              <div class="timeline-content">
+                <h3>Realtime статуси ремонту</h3>
+                <p>
+                  Клієнт бачить процес ремонту в реальному часі через статуси в
+                  додатку, що знижує тривожність і кількість уточнюючих дзвінків.
+                </p>
+              </div>
+            </div>
+            <div class="timeline-item">
+              <div class="timeline-marker">
+                <span class="dot" aria-hidden="true"></span>
+              </div>
+              <div class="timeline-content">
+                <h3>Застосунок, куди хочеться повертатися</h3>
+                <p>
+                  Об’ємний корисний функціонал підтримує регулярне використання
+                  та формує довгострокову прив’язку водія до партнерського сервісу.
+                </p>
+              </div>
+            </div>
+            <div class="timeline-item">
+              <div class="timeline-marker">
+                <span class="dot" aria-hidden="true"></span>
+              </div>
+              <div class="timeline-content">
+                <h3>Рейтинг авто на основі офіційної історії</h3>
+                <p>
+                  Різниця між власними записами та верифікованою історією мотивує
+                  водіїв регулярніше обслуговуватися у партнерських СТО. Накопичена
+                  офіційна історія формує рейтинг автомобіля, що підвищує довіру
+                  покупця та потенційну вартість авто на вторинному ринку.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="section" id="crm">
+        <div class="container">
+          <div class="section-head">
+            <p class="eyebrow">CRM та робочі кабінети</p>
+            <h2>Функціонал, який підсилює операційку сервісу щодня</h2>
+          </div>
+          <div class="split">
+            <article class="split-card">
+              <h3>Що отримує сервіс у CRM</h3>
+              <p>
+                CRM проектується як практичний інструмент для щоденної роботи
+                сервісу, а не просто як "вітрина" процесів.
+              </p>
+              <ul>
+                <li>аналітика по роботах та процесах;</li>
+                <li>трекінг виконання у реальному часі;</li>
+                <li>оперативне погодження та допродаж послуг.</li>
+              </ul>
+            </article>
+            <article class="split-card">
+              <h3>Монетизація і швидкість реакції</h3>
+              <p>
+                Система відкриває нові точки доходу, зокрема в роботі з
+                "терміновими" клієнтами, де важлива швидкість і прозорість рішень.
+              </p>
+              <ul>
+                <li>менше простоїв у комунікації;</li>
+                <li>більше погоджених робіт у моменті;</li>
+                <li>контроль якості сервісу через цифрові сценарії.</li>
+              </ul>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="section alt" id="partnership">
+        <div class="container">
+          <div class="section-head">
+            <p class="eyebrow">Ринкове бачення</p>
+            <h2>Екосистема, яка змінює стандарт взаємодії на ринку</h2>
+          </div>
+          <div class="vision-grid">
+            <article class="vision-card">
+              <h3>Цифрова дисципліна обслуговування</h3>
+              <p>
+                Водій бачить прозорий процес, сервіс отримує керовані операції, а
+                довіра між сторонами стає частиною щоденної взаємодії.
+              </p>
+            </article>
+            <article class="vision-card">
+              <h3>Стійка лояльність клієнтів</h3>
+              <p>
+                Коли клієнт має цифрову історію та зрозумілий сервісний досвід,
+                він частіше повертається саме до партнерського СТО.
+              </p>
+            </article>
+            <article class="vision-card">
+              <h3>Самопідсилювана цінність платформи</h3>
+              <p>
+                Кожна взаємодія в екосистемі — візит до СТО, оновлення статусу,
+                перегляд історії — підсилює загальну цінність Rookit для всіх
+                учасників. Система працює як маховик: більше користувачів — сильніша
+                платформа — більше можливостей для кожного партнера.
+              </p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="section" id="onboarding">
+        <div class="container">
+          <div class="section-head">
+            <p class="eyebrow">Швидкий старт</p>
+            <h2>Запуск і впровадження проходять просто та без затягувань</h2>
+          </div>
+          <div class="split">
+            <article class="split-card">
+              <h3>Легкий онбординг команди</h3>
+              <p>
+                Інтерфейси CRM і кабінетів майстрів інтуїтивні, тому персонал
+                швидко адаптується до нових процесів без складного навчання.
+              </p>
+              <ul>
+                <li>зрозуміла структура робочих екранів;</li>
+                <li>швидкий перехід до щоденних задач;</li>
+                <li>мінімальний поріг входу для команди.</li>
+              </ul>
+            </article>
+            <article class="split-card">
+              <h3>Операційний ефект з перших тижнів</h3>
+              <p>
+                Сервіс швидко отримує контрольовані цифрові сценарії, менше
+                хаосу в комунікації та вищу передбачуваність роботи з клієнтами.
+              </p>
+              <ul>
+                <li>швидкий старт без складних інтеграційних бар'єрів;</li>
+                <li>прозорий контроль статусів та завантаження;</li>
+                <li>приріст лояльності за рахунок якісного сервісного досвіду.</li>
+              </ul>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="section" id="faq">
+        <div class="container">
+          <div class="section-head section-head--wide">
+            <p class="eyebrow">FAQ</p>
+            <h2>Поширені питання власників СТО</h2>
+            <p class="section-lead">
+              Короткі відповіді про те, як Rookit працює для сервісу, команди та
+              ваших клієнтів у щоденній операційці.
+            </p>
+          </div>
+          <div class="faq-list">
+            <details>
+              <summary>Що таке Rookit і чим він відрізняється від звичайної CRM?</summary>
+              <p>
+                Rookit — це не окрема CRM «всередині сервісу», а єдина екосистема з
+                трьох частин: мобільний застосунок для водія, CRM для керівника та
+                адміністраторів і робочі кабінети для майстрів. Коли клієнт бачить
+                статус ремонту, історію авто та сервіс у застосунку, а ваша команда
+                веде ті самі процеси в CRM і в цеху — це один синхронізований
+                досвід, а не розрізнені інструменти.
+              </p>
+            </details>
+            <details>
+              <summary>Чому ви не робите окремий застосунок під мій бренд СТО?</summary>
+              <p>
+                Водій не буде тримати в телефоні десяток застосунків від різних
+                сервісів — він залишить один або не завантажить жодного. Спільна
+                екосистема вирішує це: один застосунок, де «живе» авто клієнта,
+                куди він повертається регулярно. Ваш сервіс присутній у цьому
+                середовищі, а не в окремому застосунку, про який клієнт забуде після візиту.
+                Власний брендовий застосунок для більшості СТО — це високі витрати
+                на розробку і просування без гарантії регулярного використання.
+              </p>
+            </details>
+            <details>
+              <summary>Яку конкретну користь отримує моє СТО від спільної платформи?</summary>
+              <p>
+                Партнерський сервіс отримує перевагу над традиційними форматами
+                роботи: прозорі процеси для клієнта, верифіковану історію
+                обслуговування, керованість операцій у CRM і доступ до аудиторії
+                водіїв, які уже користуються екосистемою. Кожен новий водій у
+                системі — потенційний клієнт вашого сервісу без окремих витрат на
+                власний застосунок чи рекламу для залучення.
+              </p>
+            </details>
+            <details>
+              <summary>Що саме дає CRM у щоденній роботі сервісу?</summary>
+              <p>
+                CRM закриває операційку керівника та адміністраторів: черга і
+                статуси візитів, картки авто, історія робіт, аналітика по процесах
+                і трекінг виконання в реальному часі. Через систему швидше
+                погоджуються роботи, зручніше допродавати послуги в моменті та
+                контролювати завантаження сервісу без хаосу в комунікації.
+              </p>
+            </details>
+            <details>
+              <summary>Навіщо окремий кабінет для майстрів?</summary>
+              <p>
+                Майстер оновлює статуси ремонту прямо з цеху — без зайвих дзвінків
+                адміністратору і без затримок. Клієнт одразу бачить зміни в
+                застосунку, а керівник — актуальну картину по роботах у CRM.
+                Це зменшує кількість уточнюючих дзвінків від клієнтів і пришвидшує
+                проходження авто через сервіс.
+              </p>
+            </details>
+            <details>
+              <summary>Що таке цифровий паспорт автомобіля?</summary>
+              <p>
+                Це єдиний цифровий профіль авто, куди автоматично потрапляють
+                верифіковані записи після кожного візиту до партнерського СТО.
+                Історія збирається в одному місці, зростає з кожним обслуговуванням
+                і стає цінним активом для водія — зокрема при продажі автомобіля.
+              </p>
+            </details>
+            <details>
+              <summary>Чи бачать інші СТО моїх клієнтів?</summary>
+              <p>
+                Ні. Клієнти, яких ви додаєте в систему, прив’язуються до вашої бази
+                через модель підписок на СТО і не стають доступними іншим учасникам
+                як чужа аудиторія. Водій може самостійно підписатися на інші
+                партнерські сервіси або відписатися від неактуальних — як у реальному
+                житті, зі збереженням здорової конкуренції.
+              </p>
+            </details>
+            <details>
+              <summary>Чи може клієнт обслуговуватися в іншому місті?</summary>
+              <p>
+                Так. Водій не обмежений одним сервісом і може звертатися до будь-якого
+                партнера екосистеми. Уся накопичена історія зберігається і продовжує
+                поповнюватися в нових партнерських СТО. Це підвищує цінність
+                залишатися в системі: автомобіль «живе» в застосунку, і вихід із
+                нього означає втрату цілісності накопиченої історії.
+              </p>
+            </details>
+            <details>
+              <summary>Як верифікована історія допомагає утримувати клієнтів?</summary>
+              <p>
+                Після візиту до партнерського СТО у профілі авто з’являється
+                підтверджений запис про виконані роботи. Для водія це цифровий
+                актив: історія зростає з кожним обслуговуванням, і клієнту невигідно
+                втрачати її цілісність, переходячи на сервіс поза екосистемою.
+                Для вас це інструмент retention — клієнт із цифровою звичкою
+                частіше повертається саме до партнерського сервісу.
+              </p>
+            </details>
+            <details>
+              <summary>Чи підходить Rookit невеликій майстерні, а не лише великим мережам?</summary>
+              <p>
+                Так. Власна розробка подібної системи коштує дуже дорого, а після
+                запуску потребує ще й постійних витрат на підтримку. Rookit відкриває
+                доступ до готової екосистеми за мінімальну підписку — без інвестицій
+                у сотні тисяч доларів. Тому і невелика майстерня, і більший сервіс
+                отримують однаково потужний цифровий інструментарій.
+              </p>
+            </details>
+            <details>
+              <summary>Як realtime-статуси ремонту впливають на роботу сервісу?</summary>
+              <p>
+                Клієнт бачить етапи ремонту в застосунку й рідше дзвонить з питанням
+                «що там з моїм авто». Менше навантаження на адміністраторів,
+                менше тривожності з боку клієнта, швидше погодження додаткових робіт,
+                коли вони з’являються в процесі. Для сервісу це і економія часу
+                команди, і вищий рівень довіри до вашого бренду.
+              </p>
+            </details>
+            <details>
+              <summary>Звідки беруться нові клієнти для партнерського СТО?</summary>
+              <p>
+                Водії реєструються в єдиній екосистемі, шукають сервіси, ведуть
+                гараж і історію авто в одному застосунку. Партнерські СТО
+                формують кластер, який разом залучає й утримує аудиторію: кожен
+                новий водій підсилює цінність платформи для всіх учасників, а ваш
+                сервіс отримує доступ до клієнтів, які вже звикли до цифрового
+                формату обслуговування.
+              </p>
+            </details>
+            <details>
+              <summary>Наскільки складно запустити систему в моєму сервісі?</summary>
+              <p>
+                Запуск і впровадження розраховані на швидкий старт: інтерфейси CRM
+                і кабінетів майстрів інтуїтивні, команда адаптується без довгого
+                навчання, а цифрові сценарії дають операційний ефект уже в перші
+                тижні — прозорий контроль статусів, менше хаосу в комунікації та
+                передбачуваніша робота з клієнтами.
+              </p>
+            </details>
+            <details>
+              <summary>Чим відрізняється офіційна історія від записів, доданих водієм?</summary>
+              <p>
+                Водій може безкоштовно додавати власні записи — наприклад, про ремонт,
+                виконаний самостійно. Але лише історія, верифікована партнерським
+                СТО, отримує статус офіційної. Саме офіційні записи впливають на
+                рейтинг автомобіля, що мотивує водіїв регулярніше обслуговуватися
+                у партнерських сервісах і підвищує цінність авто при продажі.
+              </p>
+            </details>
+            <details>
+              <summary>Які нові можливості монетизації відкриває платформа?</summary>
+              <p>
+                Наразі це насамперед напрям розвитку, а не окремий модуль «з коробки».
+                Ми орієнтуємось на те, щоб застосунок для водіїв поступово
+                поповнювався новими цифровими сценаріями та послугами партнерських
+                СТО — із фокусом на форматах, які можуть приносити сервісу додатковий
+                дохід і допомагати окуповувати вкладення в платформу. Конкретні
+                механіки будуть формуватися та перевірятися разом із ринком.
+              </p>
+            </details>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <footer class="site-footer section" id="contact">
+      <div class="container footer-inner">
+        <div>
+          <p class="eyebrow">Rookit для вашого СТО</p>
+          <h2>Запросіть презентацію та подивіться екосистему в дії</h2>
+          <p>
+            Покажемо, як мобільний застосунок, CRM і кабінети майстрів працюють
+            як єдина система та допомагають сервісу отримувати більше лояльних
+            клієнтів і сильніше ринкове позиціонування.
+          </p>
+        </div>
+        <form class="demo-form">
+          <label>
+            Назва СТО
+            <input type="text" placeholder="Наприклад, STO AutoPlus" />
+          </label>
+          <label>
+            Контакт
+            <input type="text" placeholder="Телефон або email" />
+          </label>
+          <label>
+            Коментар
+            <textarea rows="4" placeholder="Які процеси для вас найкритичніші?"></textarea>
+          </label>
+          <button type="button" class="btn btn-primary">Запросити презентацію</button>
+        </form>
+      </div>
+    </footer>
+
+    <div class="lightbox" id="lightbox" hidden aria-hidden="true">
+      <button type="button" class="lightbox-backdrop" data-lightbox-close aria-label="Закрити"></button>
+      <div class="lightbox-shell" role="dialog" aria-modal="true" aria-label="Перегляд скріншота">
+        <header class="lightbox-toolbar">
+          <p class="lightbox-caption"></p>
+          <span class="lightbox-counter"></span>
+          <button type="button" class="lightbox-close" data-lightbox-close aria-label="Закрити">
+            ×
+          </button>
+        </header>
+        <div class="lightbox-stage">
+          <button type="button" class="lightbox-nav lightbox-prev" data-lightbox-prev aria-label="Попередній скріншот">
+            ‹
+          </button>
+          <div class="lightbox-image-wrap">
+            <img class="lightbox-image" src="" alt="" />
+          </div>
+          <button type="button" class="lightbox-nav lightbox-next" data-lightbox-next aria-label="Наступний скріншот">
+            ›
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/apps/landing/script.js b/apps/landing/script.js
new file mode 100644
index 000000000..581bcdb9d
--- /dev/null
+++ b/apps/landing/script.js
@@ -0,0 +1,165 @@
+const menuToggle = document.querySelector("[data-menu-toggle]");
+const menu = document.querySelector("[data-menu]");
+
+if (menuToggle && menu) {
+  menuToggle.addEventListener("click", () => {
+    const isOpen = menu.classList.toggle("open");
+    menuToggle.setAttribute("aria-expanded", String(isOpen));
+  });
+
+  menu.querySelectorAll("a").forEach((link) => {
+    link.addEventListener("click", () => {
+      menu.classList.remove("open");
+      menuToggle.setAttribute("aria-expanded", "false");
+    });
+  });
+}
+
+const showcaseTabs = Array.from(document.querySelectorAll("[data-showcase-tab]"));
+const showcasePanels = Array.from(document.querySelectorAll("[data-showcase-panel]"));
+
+showcaseTabs.forEach((tab) => {
+  tab.addEventListener("click", () => {
+    const target = tab.dataset.showcaseTab;
+
+    showcaseTabs.forEach((item) => {
+      const isActive = item === tab;
+      item.classList.toggle("is-active", isActive);
+      item.setAttribute("aria-selected", String(isActive));
+    });
+
+    showcasePanels.forEach((panel) => {
+      panel.classList.toggle("is-active", panel.dataset.showcasePanel === target);
+    });
+  });
+});
+
+document.querySelectorAll("[data-showcase-thumb]").forEach((thumb) => {
+  thumb.addEventListener("click", () => {
+    const panel = thumb.closest("[data-showcase-panel]");
+    const mainButton = panel?.querySelector("[data-showcase-main]");
+    const mainImage = mainButton?.querySelector(".device-frame img");
+    const thumbImage = thumb.querySelector("img");
+
+    if (!mainImage || !thumbImage) {
+      return;
+    }
+
+    mainImage.src = thumbImage.currentSrc || thumbImage.src;
+    mainImage.alt = thumbImage.alt || mainImage.alt;
+
+    panel.querySelectorAll("[data-showcase-thumb]").forEach((item) => {
+      item.classList.toggle("is-active", item === thumb);
+    });
+  });
+});
+
+const lightbox = document.getElementById("lightbox");
+const lightboxImage = lightbox?.querySelector(".lightbox-image");
+const lightboxCaption = lightbox?.querySelector(".lightbox-caption");
+const lightboxCounter = lightbox?.querySelector(".lightbox-counter");
+const lightboxItems = Array.from(document.querySelectorAll("[data-lightbox-index]")).map(
+  (trigger) => {
+    const image = trigger.querySelector("img");
+    const panel = trigger.closest("[data-showcase-panel]");
+    const caption =
+      panel?.querySelector("[data-showcase-main]")?.dataset.caption ||
+      image?.alt ||
+      "";
+
+    return {
+      src: image?.currentSrc || image?.src || "",
+      alt: image?.alt || "",
+      caption,
+    };
+  }
+);
+
+let lightboxIndex = 0;
+let lastFocusedElement = null;
+
+function renderLightboxItem(index) {
+  if (!lightboxItems.length || !lightboxImage || !lightboxCaption || !lightboxCounter) {
+    return;
+  }
+
+  const normalizedIndex = (index + lightboxItems.length) % lightboxItems.length;
+  const item = lightboxItems[normalizedIndex];
+
+  lightboxIndex = normalizedIndex;
+  lightboxImage.src = item.src;
+  lightboxImage.alt = item.alt;
+  lightboxCaption.textContent = item.caption;
+  lightboxCounter.textContent = `${normalizedIndex + 1} / ${lightboxItems.length}`;
+}
+
+function openLightbox(index) {
+  if (!lightbox || !lightboxItems.length) {
+    return;
+  }
+
+  lastFocusedElement = document.activeElement;
+  renderLightboxItem(index);
+
+  lightbox.hidden = false;
+  lightbox.setAttribute("aria-hidden", "false");
+  document.body.style.overflow = "hidden";
+
+  lightbox.querySelector(".lightbox-close")?.focus();
+}
+
+function closeLightbox() {
+  if (!lightbox || !lightboxImage) {
+    return;
+  }
+
+  lightbox.hidden = true;
+  lightbox.setAttribute("aria-hidden", "true");
+  document.body.style.overflow = "";
+
+  lightboxImage.removeAttribute("src");
+  lastFocusedElement?.focus();
+}
+
+function showNextLightboxItem(step) {
+  renderLightboxItem(lightboxIndex + step);
+}
+
+document.querySelectorAll("[data-lightbox-open]").forEach((trigger) => {
+  trigger.addEventListener("click", () => {
+    const panel = trigger.closest("[data-showcase-panel]");
+    const activeThumb = panel?.querySelector("[data-showcase-thumb].is-active");
+    const index = Number(activeThumb?.dataset.lightboxIndex ?? 0);
+    openLightbox(index);
+  });
+});
+
+lightbox?.querySelectorAll("[data-lightbox-close]").forEach((button) => {
+  button.addEventListener("click", closeLightbox);
+});
+
+lightbox
+  ?.querySelector("[data-lightbox-prev]")
+  ?.addEventListener("click", () => showNextLightboxItem(-1));
+
+lightbox
+  ?.querySelector("[data-lightbox-next]")
+  ?.addEventListener("click", () => showNextLightboxItem(1));
+
+document.addEventListener("keydown", (event) => {
+  if (!lightbox || lightbox.hidden) {
+    return;
+  }
+
+  if (event.key === "Escape") {
+    closeLightbox();
+  }
+
+  if (event.key === "ArrowLeft") {
+    showNextLightboxItem(-1);
+  }
+
+  if (event.key === "ArrowRight") {
+    showNextLightboxItem(1);
+  }
+});
diff --git a/apps/landing/styles.css b/apps/landing/styles.css
new file mode 100644
index 000000000..0a5b571b0
--- /dev/null
+++ b/apps/landing/styles.css
@@ -0,0 +1,1020 @@
+:root {
+  --bg-page: #0d1117;
+  --bg-card: #1a1c1e;
+  --bg-surface: #232527;
+  --text-primary: #f0f6fc;
+  --text-secondary: #8b949e;
+  --text-muted: #6e7681;
+  --accent-primary: #4ade9e;
+  --accent-hover: #3bc98e;
+  --accent-dark: #1a4038;
+  --accent-warning: #d29922;
+  --border-main: #30363d;
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 24px;
+  --shadow-card: 0 14px 36px rgba(0, 0, 0, 0.35);
+  --container-width: 1180px;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: radial-gradient(circle at top right, #111822, #0d1117 45%);
+  color: var(--text-primary);
+  line-height: 1.55;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.container {
+  width: min(var(--container-width), calc(100% - 40px));
+  margin: 0 auto;
+}
+
+.section {
+  padding: 84px 0;
+  position: relative;
+}
+
+.section.alt {
+  background: linear-gradient(
+    160deg,
+    rgba(26, 28, 30, 0.72),
+    rgba(13, 17, 23, 0.8) 55%
+  );
+  border-top: 1px solid rgba(255, 255, 255, 0.04);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  backdrop-filter: blur(16px);
+  background: rgba(13, 17, 23, 0.82);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.header-inner {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 74px;
+  gap: 16px;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: 0.3px;
+  color: var(--accent-primary);
+}
+
+.brand-logo {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  object-fit: contain;
+}
+
+.header-nav {
+  display: flex;
+  align-items: center;
+  gap: clamp(10px, 1.2vw, 18px);
+  color: var(--text-secondary);
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.header-nav a:hover {
+  color: var(--text-primary);
+}
+
+.header-nav .cta-link {
+  margin-left: 4px;
+  padding: 9px 14px;
+  border-radius: 10px;
+  background: var(--accent-primary);
+  color: #10171c !important;
+  font-weight: 600;
+}
+
+.header-nav .cta-link:hover {
+  background: var(--accent-hover);
+  color: #10171c !important;
+}
+
+.menu-toggle {
+  display: none;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 10px;
+  color: var(--text-primary);
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 4px;
+  cursor: pointer;
+}
+
+.menu-toggle span {
+  width: 18px;
+  height: 2px;
+  background-color: currentColor;
+}
+
+.hero {
+  padding-top: 74px;
+}
+
+.hero-grid {
+  display: grid;
+  grid-template-columns: 1.15fr 0.85fr;
+  gap: 28px;
+}
+
+.eyebrow {
+  color: var(--accent-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.11em;
+  font-size: 12px;
+  font-weight: 700;
+  margin: 0 0 14px;
+}
+
+h1,
+h2,
+h3 {
+  margin: 0 0 12px;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: clamp(34px, 4.6vw, 56px);
+  max-width: 12.5ch;
+  font-weight: 800;
+}
+
+h2 {
+  font-size: clamp(28px, 3.4vw, 42px);
+  font-weight: 700;
+}
+
+h3 {
+  font-size: 22px;
+  font-weight: 650;
+}
+
+.lead {
+  color: var(--text-secondary);
+  max-width: 65ch;
+  font-size: 18px;
+}
+
+.hero-actions {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-top: 28px;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 14px;
+  padding: 13px 18px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.2s ease;
+}
+
+.btn-primary {
+  background: var(--accent-primary);
+  color: #10171c;
+}
+
+.btn-primary:hover {
+  background: var(--accent-hover);
+  transform: translateY(-1px);
+}
+
+.btn-secondary {
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  border: 1px solid var(--border-main);
+}
+
+.btn-secondary:hover {
+  border-color: var(--accent-primary);
+}
+
+.quick-metrics {
+  margin: 30px 0 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.quick-metrics li {
+  background: rgba(35, 37, 39, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: var(--radius-sm);
+  padding: 12px;
+}
+
+.quick-metrics strong {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--text-primary);
+  font-size: 14px;
+}
+
+.quick-metrics span {
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.hero-panel {
+  position: relative;
+  overflow: visible;
+  background: linear-gradient(180deg, rgba(26, 64, 56, 0.32), rgba(26, 28, 30, 0.95));
+  border: 1px solid rgba(74, 222, 158, 0.24);
+  border-radius: var(--radius-lg);
+  padding: 28px;
+  box-shadow: var(--shadow-card);
+}
+
+.hero-mark {
+  position: absolute;
+  right: -75px;
+  bottom: -80px;
+  width: 250px;
+  height: auto;
+  pointer-events: none;
+  user-select: none;
+  z-index: 0;
+  filter: drop-shadow(0 0 28px rgba(74, 222, 158, 0.28));
+}
+
+.panel-label {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  background: rgba(74, 222, 158, 0.13);
+  color: var(--accent-primary);
+  padding: 5px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  margin-bottom: 16px;
+}
+
+.hero-panel p {
+  color: var(--text-secondary);
+}
+
+.hero-panel h2,
+.hero-panel p,
+.status-stack {
+  position: relative;
+  z-index: 1;
+}
+
+.status-stack {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.status-pill {
+  border-radius: 999px;
+  padding: 7px 12px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.status-pill--success {
+  background: rgba(74, 222, 158, 0.15);
+  color: var(--accent-primary);
+}
+
+.status-pill--info {
+  background: rgba(88, 166, 255, 0.14);
+  color: #58a6ff;
+}
+
+.status-pill--warning {
+  background: rgba(210, 153, 34, 0.15);
+  color: var(--accent-warning);
+}
+
+.section-head {
+  margin-bottom: 30px;
+}
+
+.section-head h2 {
+  max-width: 18ch;
+}
+
+.section-head--wide h2 {
+  max-width: 28ch;
+}
+
+.section-lead {
+  margin: 0;
+  color: var(--text-secondary);
+  max-width: 52ch;
+}
+
+.product-showcase {
+  background: linear-gradient(180deg, rgba(26, 28, 30, 0.95), rgba(13, 17, 23, 0.9));
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: var(--radius-lg);
+  padding: 18px;
+  box-shadow: var(--shadow-card);
+}
+
+.showcase-tabs {
+  display: inline-flex;
+  gap: 8px;
+  padding: 6px;
+  margin-bottom: 18px;
+  background: rgba(35, 37, 39, 0.9);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 999px;
+}
+
+.showcase-tab {
+  border: 0;
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: 999px;
+  padding: 10px 18px;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.showcase-tab:hover {
+  color: var(--text-primary);
+}
+
+.showcase-tab.is-active {
+  background: var(--accent-dark);
+  color: var(--accent-primary);
+  box-shadow: inset 0 0 0 1px rgba(74, 222, 158, 0.25);
+}
+
+.showcase-panels {
+  position: relative;
+}
+
+.showcase-panel {
+  display: none;
+  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
+  gap: 28px;
+  align-items: center;
+  padding: 8px 6px 12px;
+}
+
+.showcase-panel.is-active {
+  display: grid;
+}
+
+.showcase-label {
+  margin: 0 0 8px;
+  color: var(--accent-primary);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.showcase-copy h3 {
+  margin-bottom: 10px;
+  font-size: clamp(24px, 3vw, 32px);
+}
+
+.showcase-copy > p {
+  margin: 0 0 16px;
+  color: var(--text-secondary);
+  max-width: 42ch;
+}
+
+.showcase-points {
+  margin: 0 0 20px;
+  padding-left: 18px;
+  color: var(--text-secondary);
+}
+
+.showcase-points li + li {
+  margin-top: 6px;
+}
+
+.showcase-thumbs {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.showcase-thumb {
+  width: 64px;
+  aspect-ratio: 9 / 19.5;
+  padding: 0;
+  border-radius: 12px;
+  border: 2px solid rgba(255, 255, 255, 0.08);
+  background: var(--bg-surface);
+  overflow: hidden;
+  cursor: pointer;
+  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.showcase-thumb:hover {
+  transform: translateY(-2px);
+  border-color: rgba(74, 222, 158, 0.35);
+}
+
+.showcase-thumb.is-active {
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px rgba(74, 222, 158, 0.14);
+}
+
+.showcase-thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.showcase-thumbs--desktop .showcase-thumb {
+  width: 128px;
+  aspect-ratio: 16 / 10;
+  border-radius: 10px;
+}
+
+.showcase-thumbs--desktop .showcase-thumb img {
+  object-fit: contain;
+  background: #0d1117;
+}
+
+.showcase-visual {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 420px;
+  padding: 12px;
+  border-radius: 20px;
+}
+
+.showcase-main {
+  position: relative;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: zoom-in;
+}
+
+.showcase-main:hover .showcase-expand {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.device-frame {
+  position: relative;
+  overflow: hidden;
+  background: #0d1117;
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
+}
+
+.device-frame--phone {
+  width: min(270px, 72vw);
+  border-radius: 34px;
+  border: 2px solid rgba(255, 255, 255, 0.12);
+  padding: 12px 10px 14px;
+}
+
+.device-notch {
+  width: 96px;
+  height: 22px;
+  margin: 0 auto 10px;
+  border-radius: 0 0 14px 14px;
+  background: #0d1117;
+}
+
+.device-frame--phone img {
+  display: block;
+  width: 100%;
+  border-radius: 24px;
+}
+
+.device-frame--desktop {
+  width: min(560px, 92vw);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.device-browser-bar {
+  display: flex;
+  gap: 6px;
+  padding: 12px 14px;
+  background: #161b22;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.device-browser-bar span {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.14);
+}
+
+.device-frame--desktop img {
+  display: block;
+  width: 100%;
+}
+
+.showcase-expand {
+  position: absolute;
+  left: 50%;
+  bottom: 18px;
+  transform: translate(-50%, 8px);
+  opacity: 0;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(13, 17, 23, 0.82);
+  border: 1px solid rgba(74, 222, 158, 0.35);
+  color: var(--accent-primary);
+  font-size: 12px;
+  font-weight: 600;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  pointer-events: none;
+}
+
+.lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+}
+
+.lightbox[hidden] {
+  display: none;
+}
+
+.lightbox-backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgba(0, 0, 0, 0.9);
+  cursor: zoom-out;
+}
+
+.lightbox-shell {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 20px;
+}
+
+.lightbox-toolbar {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 16px;
+  padding: 12px 14px;
+  border-radius: 14px;
+  background: rgba(26, 28, 30, 0.92);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.lightbox-caption {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.lightbox-counter {
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.lightbox-close,
+.lightbox-nav {
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(35, 37, 39, 0.96);
+  color: var(--text-primary);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+
+.lightbox-close:hover,
+.lightbox-nav:hover {
+  border-color: rgba(74, 222, 158, 0.45);
+  background: rgba(26, 64, 56, 0.55);
+}
+
+.lightbox-close {
+  width: 40px;
+  height: 40px;
+  font-size: 24px;
+  line-height: 1;
+}
+
+.lightbox-stage {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 14px;
+}
+
+.lightbox-image-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  height: 100%;
+}
+
+.lightbox-image {
+  max-width: 100%;
+  max-height: calc(100vh - 140px);
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: 12px;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
+}
+
+.lightbox-nav {
+  width: 44px;
+  height: 44px;
+  font-size: 28px;
+  line-height: 1;
+}
+
+@media (max-width: 1040px) {
+  .showcase-panel,
+  .showcase-panel.is-active {
+    grid-template-columns: 1fr;
+  }
+
+  .showcase-visual {
+    min-height: 360px;
+  }
+}
+
+@media (max-width: 820px) {
+  .showcase-tabs {
+    display: flex;
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  .showcase-tab {
+    flex: 1 0 auto;
+  }
+
+  .lightbox-shell {
+    padding: 14px;
+  }
+
+  .lightbox-stage {
+    grid-template-columns: 1fr;
+    justify-items: center;
+    align-content: center;
+  }
+
+  .lightbox-nav {
+    display: none;
+  }
+
+  .lightbox-image {
+    max-height: calc(100vh - 120px);
+  }
+}
+
+.cards-grid,
+.vision-grid {
+  display: grid;
+  gap: 16px;
+}
+
+.cards-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.value-card,
+.vision-card,
+.split-card,
+.faq-list details {
+  background-color: var(--bg-card);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--radius-md);
+  padding: 22px;
+}
+
+.value-card p,
+.vision-card p,
+.split-card p,
+.faq-list p {
+  color: var(--text-secondary);
+}
+
+.timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.timeline-item {
+  display: grid;
+  grid-template-columns: 32px 1fr;
+  gap: 16px;
+  padding-bottom: 28px;
+}
+
+.timeline-item:last-child {
+  padding-bottom: 0;
+}
+
+.timeline-item:last-child .timeline-marker::after {
+  display: none;
+}
+
+.timeline-marker {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  padding-top: 7px;
+}
+
+.timeline-marker::after {
+  content: "";
+  position: absolute;
+  top: 24px;
+  bottom: -28px;
+  left: 50%;
+  width: 2px;
+  transform: translateX(-50%);
+  background: rgba(74, 222, 158, 0.22);
+}
+
+.timeline .dot {
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--accent-primary);
+  box-shadow: 0 0 0 5px #14181d;
+}
+
+.timeline h3 {
+  margin-bottom: 8px;
+}
+
+.timeline p {
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+.split {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.split-card ul {
+  margin: 0;
+  padding-left: 18px;
+  color: var(--text-secondary);
+}
+
+.ecosystem-thesis {
+  margin-bottom: 18px;
+}
+
+.marketing-engine {
+  margin-top: 18px;
+  border-color: rgba(74, 222, 158, 0.3);
+  background: linear-gradient(180deg, rgba(26, 64, 56, 0.2), rgba(26, 28, 30, 0.95));
+}
+
+.growth-engine {
+  margin-top: 18px;
+  border-color: rgba(88, 166, 255, 0.28);
+  background: linear-gradient(180deg, rgba(26, 40, 64, 0.22), rgba(26, 28, 30, 0.95));
+}
+
+.vision-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.faq-list {
+  display: grid;
+  gap: 12px;
+}
+
+.faq-list summary {
+  cursor: pointer;
+  list-style: none;
+  font-weight: 600;
+}
+
+.faq-list summary::-webkit-details-marker {
+  display: none;
+}
+
+.faq-list details[open] {
+  border-color: rgba(74, 222, 158, 0.4);
+}
+
+.faq-list p {
+  margin: 10px 0 0;
+}
+
+.site-footer {
+  padding-top: 62px;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.footer-inner {
+  display: grid;
+  grid-template-columns: 1fr minmax(280px, 420px);
+  gap: 24px;
+  align-items: start;
+}
+
+.footer-inner p {
+  color: var(--text-secondary);
+}
+
+.demo-form {
+  background: var(--bg-card);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--radius-md);
+  padding: 20px;
+  display: grid;
+  gap: 14px;
+}
+
+.demo-form label {
+  display: grid;
+  gap: 6px;
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.demo-form input,
+.demo-form textarea {
+  background: var(--bg-surface);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  color: var(--text-primary);
+  border-radius: 10px;
+  padding: 12px;
+  font: inherit;
+}
+
+.demo-form input:focus,
+.demo-form textarea:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+}
+
+.bg-glow {
+  position: fixed;
+  z-index: -1;
+  filter: blur(80px);
+  pointer-events: none;
+}
+
+.bg-glow--one {
+  width: 300px;
+  height: 300px;
+  background: rgba(74, 222, 158, 0.15);
+  top: -80px;
+  right: -100px;
+}
+
+.bg-glow--two {
+  width: 260px;
+  height: 260px;
+  background: rgba(88, 166, 255, 0.14);
+  bottom: 120px;
+  left: -120px;
+}
+
+@media (max-width: 1040px) {
+  .hero-grid,
+  .footer-inner,
+  .split {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-mark {
+    width: 120px;
+    right: 8px;
+    bottom: 8px;
+  }
+
+  .quick-metrics,
+  .cards-grid,
+  .vision-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .section {
+    padding: 68px 0;
+  }
+}
+
+@media (max-width: 1140px) {
+  .menu-toggle {
+    display: inline-flex;
+  }
+
+  .header-nav {
+    position: absolute;
+    top: calc(100% + 8px);
+    right: 0;
+    left: 0;
+    display: none;
+    flex-direction: column;
+    align-items: stretch;
+    background: rgba(13, 17, 23, 0.98);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 14px;
+    padding: 12px;
+    gap: 4px;
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
+    white-space: normal;
+  }
+
+  .header-nav.open {
+    display: flex;
+  }
+
+  .header-nav a {
+    padding: 10px 12px;
+    border-radius: 10px;
+  }
+
+  .header-nav a:hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  .header-nav .cta-link {
+    margin-left: 0;
+    margin-top: 6px;
+    text-align: center;
+  }
+}
+
+@media (max-width: 820px) {
+  .hero {
+    padding-top: 54px;
+  }
+
+  .container {
+    width: min(var(--container-width), calc(100% - 28px));
+  }
+}