diff --git a/prototype/superpilot-web/assets/css/superpilot.css b/prototype/superpilot-web/assets/css/superpilot.css
new file mode 100644
index 0000000..72d0eb0
--- /dev/null
+++ b/prototype/superpilot-web/assets/css/superpilot.css
@@ -0,0 +1,1130 @@
+/* ==========================================================================
+   Superpilot Web — Layout Inspirowany Pracuj.pl (Standard UX/UI 2026)
+   Spójny z tożsamością TravelLeader Mobile & Travel Manager
+   ========================================================================== */
+
+:root {
+    /* Paleta barw spójna z aplikacją mobilną */
+    --primary: #5c60f5;
+    --primary-hover: #484cdb;
+    --primary-light: #eff0fe;
+    --primary-border: #dadafa;
+    --dark-navy: #1f2244;
+    --text-body: #3c4262;
+    --text-muted: #7e879f;
+    --text-light: #a9b1c3;
+    --bg-page: #f5f6fb;
+    --bg-card: #ffffff;
+    --border-color: #e5e8f2;
+    --border-subtle: #edf0f8;
+
+    /* Akcenty */
+    --success: #10b981;
+    --success-light: #ecfdf5;
+    --success-border: #a7f3d0;
+    --warning: #f59e0b;
+    --warning-light: #fffbeb;
+    --danger: #ef4444;
+    --danger-light: #fef2f2;
+
+    /* Zaokrąglenia i cienie */
+    --radius-sm: 8px;
+    --radius-md: 14px;
+    --radius-lg: 20px;
+    --radius-full: 9999px;
+    --shadow-subtle: 0 2px 8px rgba(31, 34, 68, 0.04);
+    --shadow-card: 0 4px 16px rgba(31, 34, 68, 0.05);
+    --shadow-hover: 0 10px 24px rgba(31, 34, 68, 0.08);
+}
+
+body {
+    background-color: var(--bg-page) !important;
+    color: var(--text-body) !important;
+    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    -webkit-font-smoothing: antialiased;
+}
+
+/* Brand & Header */
+.brand-superpilot {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    font-weight: 700;
+    font-size: 1.18rem;
+    color: var(--dark-navy);
+    letter-spacing: -0.01em;
+    text-decoration: none;
+}
+
+.brand-superpilot .logo-icon {
+    width: 34px;
+    height: 34px;
+    border-radius: 10px;
+    background: linear-gradient(135deg, var(--primary) 0%, #767bf7 100%);
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.15rem;
+    box-shadow: 0 2px 8px rgba(92, 96, 245, 0.25);
+}
+
+.btn-sos {
+    background: #ffffff;
+    color: #dc2626 !important;
+    border: 1px solid #fecaca;
+    font-weight: 600;
+    font-size: 0.8rem;
+    border-radius: var(--radius-full);
+    padding: 6px 14px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    transition: all 0.15s ease;
+}
+
+.btn-sos .sos-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background-color: #ef4444;
+}
+
+.btn-sos:hover {
+    background: #fef2f2;
+    border-color: #f87171;
+    color: #b91c1c !important;
+}
+
+/* ==========================================================================
+   Wyszukiwarka Główna w Stylu Pracuj.pl (Top Bar z Multiselectem Krajów)
+   ========================================================================== */
+.search-bar-pracuj {
+    background: #ffffff;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-subtle);
+    padding: 8px;
+    margin-bottom: 1.5rem;
+    display: flex;
+    align-items: center;
+}
+
+.search-field-item {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 16px;
+    position: relative;
+}
+
+.search-field-item:not(:last-child) {
+    border-right: 1px solid var(--border-color);
+}
+
+.search-field-item .field-icon {
+    font-size: 1.25rem;
+    color: var(--text-muted);
+}
+
+.search-field-item .field-content {
+    flex-grow: 1;
+    min-width: 0;
+}
+
+.search-field-item .field-label {
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--text-muted);
+    margin-bottom: 2px;
+}
+
+.search-field-item input {
+    border: none;
+    background: transparent;
+    padding: 0;
+    font-size: 0.92rem;
+    font-weight: 600;
+    color: var(--dark-navy);
+    width: 100%;
+    outline: none;
+}
+
+.search-field-item input::placeholder {
+    color: #94a3b8;
+    font-weight: 400;
+}
+
+/* Multiselect Dropdown Trigger w belce */
+.multiselect-dest-trigger {
+    background: transparent;
+    border: none;
+    padding: 0;
+    font-size: 0.92rem;
+    font-weight: 600;
+    color: var(--dark-navy);
+    width: 100%;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    outline: none;
+}
+
+.multiselect-dest-trigger:focus {
+    outline: none;
+    box-shadow: none;
+}
+
+.multiselect-dest-trigger .trigger-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.multiselect-dropdown-menu {
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-color);
+    box-shadow: var(--shadow-hover);
+    padding: 10px 12px;
+    min-width: 280px;
+    max-height: 320px;
+    overflow-y: auto;
+}
+
+.multiselect-item-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 8px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.84rem;
+    font-weight: 500;
+    color: var(--text-body);
+    transition: background-color 0.12s ease;
+}
+
+.multiselect-item-row:hover {
+    background-color: var(--primary-light);
+    color: var(--primary);
+}
+
+.multiselect-item-row input[type="checkbox"] {
+    width: 17px;
+    height: 17px;
+    border-radius: 4px;
+    cursor: pointer;
+    accent-color: var(--primary);
+}
+
+.btn-search-pracuj {
+    background-color: var(--primary);
+    color: #ffffff !important;
+    border: none;
+    font-weight: 700;
+    font-size: 0.95rem;
+    border-radius: var(--radius-md);
+    padding: 12px 28px;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.15s ease;
+    white-space: nowrap;
+}
+
+.btn-search-pracuj:hover {
+    background-color: var(--primary-hover);
+    box-shadow: 0 4px 14px rgba(92, 96, 245, 0.3);
+}
+
+@media (max-width: 991px) {
+    .search-bar-pracuj {
+        flex-direction: column;
+        padding: 12px;
+        gap: 8px;
+    }
+    .search-field-item {
+        width: 100%;
+        border-right: none !important;
+        border-bottom: 1px solid var(--border-color);
+        padding: 8px 6px;
+    }
+    .btn-search-pracuj {
+        width: 100%;
+        justify-content: center;
+        margin-top: 6px;
+    }
+}
+
+/* ==========================================================================
+   Pasek Aktywnych Filtrów (Active Filter Chips nad listą)
+   ========================================================================== */
+.active-filters-bar {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 1rem;
+}
+
+.active-filter-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    background: #ffffff;
+    border: 1px solid var(--border-color);
+    padding: 3px 10px;
+    border-radius: var(--radius-full);
+    font-size: 0.76rem;
+    font-weight: 600;
+    color: var(--dark-navy);
+}
+
+.active-filter-chip .chip-remove {
+    cursor: pointer;
+    color: var(--text-muted);
+    transition: color 0.15s ease;
+    font-size: 0.85rem;
+    line-height: 1;
+}
+
+.active-filter-chip .chip-remove:hover {
+    color: #ef4444;
+}
+
+/* ==========================================================================
+   Lewy Panel Filtrów w Stylu Pracuj.pl (Sidebar bez duplikatu krajów)
+   ========================================================================== */
+.filters-sidebar {
+    background: #ffffff;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-subtle);
+    overflow: hidden;
+    position: sticky;
+    top: 80px;
+}
+
+.filter-sidebar-header {
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid var(--border-subtle);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.filter-sidebar-title {
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: var(--dark-navy);
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.filter-accordion-item {
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.filter-accordion-header {
+    padding: 0.9rem 1.25rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.15s ease;
+}
+
+.filter-accordion-header:hover {
+    background-color: #fafbfe;
+}
+
+.filter-accordion-title {
+    font-size: 0.86rem;
+    font-weight: 700;
+    color: var(--dark-navy);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.filter-accordion-title i {
+    font-size: 1.1rem;
+    color: var(--primary);
+}
+
+.filter-accordion-body {
+    padding: 0.5rem 1.25rem 1rem 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.filter-checkbox-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    font-size: 0.82rem;
+    color: var(--text-body);
+    margin: 0;
+}
+
+.filter-checkbox-row:hover {
+    color: var(--primary);
+}
+
+.filter-checkbox-row input[type="checkbox"] {
+    width: 17px;
+    height: 17px;
+    border-radius: 4px;
+    border: 1.5px solid #cbd5e1;
+    cursor: pointer;
+    accent-color: var(--primary);
+}
+
+.filter-count-badge {
+    font-size: 0.72rem;
+    color: var(--text-muted);
+    font-weight: 500;
+}
+
+.filter-sidebar-footer {
+    padding: 1rem 1.25rem;
+    background: #ffffff;
+    border-top: 1px solid var(--border-subtle);
+}
+
+.btn-apply-filters {
+    background-color: var(--primary);
+    color: #ffffff !important;
+    border: none;
+    font-weight: 700;
+    font-size: 0.88rem;
+    border-radius: var(--radius-sm);
+    padding: 10px 16px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    transition: all 0.15s ease;
+}
+
+.btn-apply-filters:hover {
+    background-color: var(--primary-hover);
+    box-shadow: 0 4px 12px rgba(92, 96, 245, 0.25);
+}
+
+/* ==========================================================================
+   Karty Pilotów w Stylu Pracuj.pl (Czyste, poziome)
+   ========================================================================== */
+.pilot-offer-card {
+    background: #ffffff;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-subtle);
+    padding: 1.4rem 1.5rem;
+    margin-bottom: 1rem;
+    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    position: relative;
+    display: flex;
+    gap: 1.25rem;
+    align-items: flex-start;
+}
+
+.pilot-offer-card:hover {
+    border-color: var(--primary-border);
+    box-shadow: var(--shadow-hover);
+    transform: translateY(-2px);
+}
+
+.pilot-offer-avatar {
+    width: 58px;
+    height: 58px;
+    border-radius: 14px;
+    background: linear-gradient(135deg, var(--primary) 0%, #767bf7 100%);
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 1.35rem;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.pilot-offer-avatar .verified-badge-mini {
+    position: absolute;
+    bottom: -3px;
+    right: -3px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--success);
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.7rem;
+    border: 2px solid #ffffff;
+}
+
+.pilot-offer-content {
+    flex-grow: 1;
+    min-width: 0;
+}
+
+.pilot-offer-header-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 2px;
+}
+
+.pilot-offer-name {
+    font-size: 1.15rem;
+    font-weight: 700;
+    color: var(--dark-navy);
+    line-height: 1.25;
+    margin: 0;
+}
+
+.pilot-offer-name a {
+    color: inherit;
+    text-decoration: none;
+    transition: color 0.15s ease;
+}
+
+.pilot-offer-name a:hover {
+    color: var(--primary);
+}
+
+.pilot-offer-headline {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--text-body);
+    margin-bottom: 4px;
+}
+
+.pilot-offer-meta-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 12px;
+    font-size: 0.78rem;
+    color: var(--text-muted);
+    margin-bottom: 10px;
+}
+
+.pilot-offer-meta-row .meta-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+
+/* Tagi technologii / specjalizacji w stylu Pracuj.pl */
+.pilot-tags-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 10px;
+}
+
+.tech-tag {
+    font-size: 0.74rem;
+    font-weight: 600;
+    background: #f1f5f9;
+    color: #334155;
+    padding: 3px 10px;
+    border-radius: 6px;
+    border: 1px solid #e2e8f0;
+}
+
+.tech-tag.primary-dest {
+    background: var(--primary-light);
+    color: var(--primary);
+    border-color: var(--primary-border);
+}
+
+.pilot-offer-bio {
+    font-size: 0.82rem;
+    color: #475569;
+    line-height: 1.5;
+    margin-bottom: 12px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+/* Stopka karty z przyciskami */
+.pilot-offer-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
+    padding-top: 10px;
+    border-top: 1px solid var(--border-subtle);
+}
+
+.pilot-academy-badge {
+    font-size: 0.74rem;
+    font-weight: 600;
+    color: var(--primary);
+    background: var(--primary-light);
+    padding: 3px 10px;
+    border-radius: var(--radius-full);
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.btn-offer-details {
+    background: transparent;
+    color: var(--text-body) !important;
+    border: 1px solid var(--border-color);
+    font-weight: 600;
+    font-size: 0.82rem;
+    border-radius: var(--radius-sm);
+    padding: 6px 14px;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    transition: all 0.15s ease;
+    text-decoration: none;
+}
+
+.btn-offer-details:hover {
+    background: #f8f9fd;
+    border-color: #cbd5e1;
+}
+
+.btn-offer-book {
+    background: var(--primary);
+    color: #ffffff !important;
+    border: none;
+    font-weight: 600;
+    font-size: 0.82rem;
+    border-radius: var(--radius-sm);
+    padding: 6px 16px;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    transition: all 0.15s ease;
+}
+
+.btn-offer-book:hover {
+    background: var(--primary-hover);
+    box-shadow: 0 3px 10px rgba(92, 96, 245, 0.25);
+}
+
+.btn-save-pilot {
+    background: transparent;
+    border: none;
+    color: #cbd5e1;
+    font-size: 1.3rem;
+    cursor: pointer;
+    padding: 2px;
+    line-height: 1;
+    transition: color 0.15s ease;
+}
+
+.btn-save-pilot:hover,
+.btn-save-pilot.saved {
+    color: #f59e0b;
+}
+
+/* ==========================================================================
+   Modal Dialogu Kalendarza (Wybór Zakresu Dat Wycieczki)
+   ========================================================================== */
+.date-picker-modal .modal-content {
+    border-radius: var(--radius-lg);
+    border: none;
+    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
+}
+
+.date-picker-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 4px;
+    text-align: center;
+}
+
+.date-picker-day-head {
+    font-size: 0.74rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    padding: 6px 0;
+}
+
+.date-picker-cell {
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    font-size: 0.82rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.12s ease;
+    border: 1px solid transparent;
+}
+
+.date-picker-cell:hover:not(.other-month) {
+    background-color: var(--primary-light);
+    color: var(--primary);
+}
+
+.date-picker-cell.other-month {
+    color: #cbd5e1;
+    cursor: default;
+}
+
+.date-picker-cell.selected-range {
+    background-color: #eff0fe;
+    color: var(--primary);
+    border-radius: 0;
+}
+
+.date-picker-cell.range-start {
+    background-color: var(--primary) !important;
+    color: #ffffff !important;
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+}
+
+.date-picker-cell.range-end {
+    background-color: var(--primary) !important;
+    color: #ffffff !important;
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+}
+
+.date-quick-presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 12px;
+}
+
+.preset-chip {
+    font-size: 0.76rem;
+    font-weight: 600;
+    background: #f8f9fd;
+    border: 1px solid var(--border-color);
+    padding: 4px 10px;
+    border-radius: var(--radius-full);
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.preset-chip:hover, .preset-chip.active {
+    background: var(--primary-light);
+    border-color: var(--primary-border);
+    color: var(--primary);
+}
+
+/* ==========================================================================
+   Profil Pilota (pilot-profile.php) — Standard UX/UI 2026
+   Spójny z listą ofert i aplikacją mobilną
+   ========================================================================== */
+.profile-desktop-hero {
+    background: #ffffff;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-subtle);
+    padding: 1.75rem 2rem;
+    margin-bottom: 1.5rem;
+}
+
+.profile-hero-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+}
+
+.profile-avatar-large {
+    width: 76px;
+    height: 76px;
+    border-radius: 18px;
+    background: linear-gradient(135deg, var(--primary) 0%, #767bf7 100%);
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 1.75rem;
+    flex-shrink: 0;
+    position: relative;
+    box-shadow: 0 4px 12px rgba(92, 96, 245, 0.2);
+}
+
+.profile-avatar-large .large-verified-badge {
+    position: absolute;
+    bottom: -3px;
+    right: -3px;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: var(--success);
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.8rem;
+    border: 2.5px solid #ffffff;
+}
+
+.profile-name {
+    font-size: 1.55rem;
+    font-weight: 700;
+    color: var(--dark-navy);
+    margin: 0;
+    line-height: 1.2;
+}
+
+.profile-badge-available {
+    background: var(--success-light);
+    color: #065f46;
+    border: 1px solid var(--success-border);
+    font-size: 0.74rem;
+    font-weight: 600;
+    padding: 3px 10px;
+    border-radius: var(--radius-full);
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.profile-badge-available .status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: var(--success);
+}
+
+.profile-meta-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 16px;
+    font-size: 0.82rem;
+    color: var(--text-muted);
+    margin-top: 8px;
+}
+
+.profile-meta-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.profile-meta-rating {
+    background: #fffbeb;
+    color: #92400e;
+    border: 1px solid #fde68a;
+    font-size: 0.8rem;
+    font-weight: 600;
+    padding: 3px 10px;
+    border-radius: var(--radius-full);
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    text-decoration: none;
+    transition: all 0.15s ease;
+}
+
+.profile-meta-rating:hover {
+    background: #fef3c7;
+    color: #78350f;
+}
+
+.profile-stats-strip {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.85rem;
+    padding-top: 1.25rem;
+    margin-top: 1.25rem;
+    border-top: 1px solid var(--border-subtle);
+}
+
+.profile-stat-box {
+    background: #f8f9fd;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    padding: 0.75rem 1rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.profile-stat-box .stat-val {
+    font-size: 1.15rem;
+    font-weight: 700;
+    color: var(--dark-navy);
+    line-height: 1.2;
+}
+
+.profile-stat-box .stat-lbl {
+    font-size: 0.74rem;
+    color: var(--text-muted);
+    margin-top: 2px;
+}
+
+/* Karty sekcji profilu */
+.profile-section-card {
+    background: #ffffff;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-subtle);
+    margin-bottom: 1.25rem;
+    overflow: hidden;
+}
+
+.profile-section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 1.4rem;
+    background: #ffffff;
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.profile-section-title {
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: var(--dark-navy);
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.profile-section-title i {
+    font-size: 1.15rem;
+    color: var(--primary);
+}
+
+.profile-section-body {
+    padding: 1.4rem;
+}
+
+/* Języki obce */
+.lang-card {
+    background: #f8f9fd;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    padding: 0.75rem 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+/* Wideo i Zdjęcia */
+.profile-video-box {
+    position: relative;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    height: 200px;
+    background: linear-gradient(135deg, #1e2244 0%, #0f172a 100%);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: var(--shadow-subtle);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.profile-video-box:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-hover);
+}
+
+.profile-video-play-btn {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    background: var(--primary);
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.6rem;
+    box-shadow: 0 4px 14px rgba(92, 96, 245, 0.4);
+    transition: transform 0.15s ease;
+}
+
+.profile-video-box:hover .profile-video-play-btn {
+    transform: scale(1.08);
+}
+
+.profile-photos-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+    margin-top: 1rem;
+}
+
+.profile-photo-thumb {
+    height: 85px;
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    cursor: pointer;
+    position: relative;
+    border: 1px solid var(--border-color);
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ffffff;
+    font-weight: 600;
+    font-size: 0.78rem;
+}
+
+.profile-photo-thumb:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-hover);
+}
+
+/* Recenzje i opinie */
+.rating-breakdown-card {
+    background: #f8f9fd;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    padding: 1.25rem;
+}
+
+.review-card-item {
+    background: #ffffff;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    padding: 1.15rem;
+    margin-bottom: 0.85rem;
+    transition: border-color 0.15s ease;
+}
+
+.review-card-item:hover {
+    border-color: var(--primary-border);
+}
+
+.review-agency-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    background: var(--primary-light);
+    color: var(--primary);
+    font-weight: 700;
+    font-size: 0.82rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.pilot-reply-box {
+    background: #f8f9fd;
+    border-left: 3px solid var(--primary);
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+    padding: 0.75rem 1rem;
+    margin-top: 0.75rem;
+}
+
+/* Sticky kalendarz w prawej kolumnie */
+.booking-sticky-panel {
+    position: sticky;
+    top: 85px;
+}
+
+.calendar-widget-card {
+    background: #ffffff;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-subtle);
+    padding: 1.25rem;
+    margin-bottom: 1.25rem;
+}
+
+.sp-calendar-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 4px;
+    text-align: center;
+}
+
+.sp-cal-header {
+    font-size: 0.72rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    padding: 4px 0;
+}
+
+.sp-cal-day {
+    aspect-ratio: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    font-size: 0.76rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.12s ease;
+    position: relative;
+    border: 1px solid transparent;
+}
+
+.sp-cal-day.free {
+    background: #f8f9fd;
+    color: var(--dark-navy);
+    border-color: var(--border-color);
+}
+
+.sp-cal-day.free:hover {
+    background: var(--success-light);
+    border-color: var(--success-border);
+    color: #065f46;
+}
+
+.sp-cal-day.trip {
+    background: var(--primary-light);
+    color: var(--primary);
+    font-weight: 700;
+    border-color: var(--primary-border);
+}
+
+.sp-cal-day.blocked {
+    background: #f1f5f9;
+    color: #94a3b8;
+    cursor: not-allowed;
+    text-decoration: line-through;
+}
+
+.sp-cal-day.other-month {
+    color: #cbd5e1;
+    cursor: default;
+}
+
+.sp-cal-day.selected {
+    background: var(--primary) !important;
+    color: #ffffff !important;
+    border-color: var(--primary) !important;
+}
+
+.sp-cal-dot {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    margin-top: 2px;
+}
+
diff --git a/prototype/superpilot-web/assets/js/superpilot.js b/prototype/superpilot-web/assets/js/superpilot.js
new file mode 100644
index 0000000..ff841d2
--- /dev/null
+++ b/prototype/superpilot-web/assets/js/superpilot.js
@@ -0,0 +1,420 @@
+/**
+ * Superpilot Web — Logika Wyszukiwarki i Filtrów w Stylu Pracuj.pl
+ * z Multiselectem Krajów w Górnej Belce oraz Bazą w Lewym Sidebarze
+ */
+
+document.addEventListener('DOMContentLoaded', function () {
+    initPracujFilters();
+    initTopDestMultiselect();
+    initDateRangeModal();
+    initModals();
+});
+
+function initPracujFilters() {
+    const searchInput = document.getElementById('mainSearchInput');
+    const executeBtn = document.getElementById('btnExecuteSearch');
+    const sidebarCheckboxes = document.querySelectorAll('.filter-checkbox');
+    const clearBtn = document.getElementById('btnClearAllFilters');
+    const sidebarCountSpan = document.getElementById('sidebarCountSpan');
+    const offersCountText = document.getElementById('offersCountText');
+    const noOffersAlert = document.getElementById('noOffersAlert');
+    const pilotCards = document.querySelectorAll('.pilot-grid-item');
+
+    window.currentDateFilter = '16-24-sep-2027';
+
+    function applyFilters() {
+        const query = searchInput ? searchInput.value.toLowerCase().trim() : '';
+
+        // Pobierz zaznaczone kraje z GÓRNEJ BELKI (Multiselect)
+        const selectedTopDests = Array.from(document.querySelectorAll('.top-dest-checkbox:checked')).map(cb => cb.value.toLowerCase());
+
+        // Pobierz zaznaczone checkboxy z SIDEBARA (w tym nowa Baza!)
+        const selectedBases = Array.from(document.querySelectorAll('.filter-checkbox[data-type="base"]:checked')).map(cb => cb.value.toLowerCase());
+        const selectedSpecs = Array.from(document.querySelectorAll('.filter-checkbox[data-type="spec"]:checked')).map(cb => cb.value.toLowerCase());
+        const selectedLangs = Array.from(document.querySelectorAll('.filter-checkbox[data-type="lang"]:checked')).map(cb => cb.value.toLowerCase());
+        const selectedCerts = Array.from(document.querySelectorAll('.filter-checkbox[data-type="cert"]:checked')).map(cb => cb.value.toLowerCase());
+
+        let visibleCount = 0;
+
+        pilotCards.forEach(card => {
+            const name = (card.getAttribute('data-name') || '').toLowerCase();
+            const base = (card.getAttribute('data-base') || '').toLowerCase();
+            const dests = (card.getAttribute('data-destinations') || '').toLowerCase();
+            const langs = (card.getAttribute('data-languages') || '').toLowerCase();
+            const tags = (card.getAttribute('data-tags') || '').toLowerCase();
+            const rating = parseFloat(card.getAttribute('data-rating') || '0');
+            const verified = card.getAttribute('data-verified') === '1';
+            const kpp = card.getAttribute('data-kpp') === '1';
+            const datesFree = (card.getAttribute('data-dates-free') || '');
+
+            let match = true;
+
+            // 1. Wyszukiwanie tekstowe
+            if (query && !name.includes(query) && !dests.includes(query) && !tags.includes(query) && !langs.includes(query) && !base.includes(query)) {
+                match = false;
+            }
+
+            // 2. Destynacje z Multiselecta u góry
+            if (selectedTopDests.length > 0) {
+                const hasAnyDest = selectedTopDests.some(d => dests.includes(d));
+                if (!hasAnyDest) match = false;
+            }
+
+            // 3. Baza wypadowa z sidebara
+            if (selectedBases.length > 0) {
+                const hasAnyBase = selectedBases.some(b => base.includes(b));
+                if (!hasAnyBase) match = false;
+            }
+
+            // 4. Specjalizacje z sidebara
+            if (selectedSpecs.length > 0) {
+                const hasAnySpec = selectedSpecs.some(s => tags.includes(s));
+                if (!hasAnySpec) match = false;
+            }
+
+            // 5. Języki z sidebara
+            if (selectedLangs.length > 0) {
+                const hasAnyLang = selectedLangs.some(l => langs.includes(l));
+                if (!hasAnyLang) match = false;
+            }
+
+            // 6. Certyfikaty z sidebara
+            if (selectedCerts.includes('verified') && !verified) match = false;
+            if (selectedCerts.includes('kpp') && !kpp) match = false;
+            if (selectedCerts.includes('rating-48') && rating < 4.8) match = false;
+
+            // 7. Kalendarz
+            if (window.currentDateFilter === '16-24-sep-2027') {
+                if (!datesFree.includes('16-24-sep') && name !== 'oskar kaczmarek') {
+                    match = false;
+                }
+            } else if (window.currentDateFilter === '05-15-sep-2027') {
+                if (!datesFree.includes('05-15-sep')) {
+                    match = false;
+                }
+            } else if (window.currentDateFilter === 'październik-2027') {
+                if (!datesFree.includes('październik-2027')) {
+                    match = false;
+                }
+            }
+
+            if (match) {
+                card.style.display = 'flex';
+                visibleCount++;
+            } else {
+                card.style.display = 'none';
+            }
+        });
+
+        // Aktualizacja liczników
+        if (sidebarCountSpan) sidebarCountSpan.innerText = visibleCount;
+        if (offersCountText) offersCountText.innerText = visibleCount + (visibleCount === 1 ? ' oferta' : (visibleCount >= 2 && visibleCount <= 4 ? ' oferty' : ' ofert'));
+        if (noOffersAlert) noOffersAlert.style.display = (visibleCount === 0) ? 'block' : 'none';
+
+        // Aktualizacja paska aktywnych filtrów (Chips)
+        updateActiveFilterChips(selectedTopDests, selectedBases);
+    }
+
+    if (searchInput) searchInput.addEventListener('input', applyFilters);
+    if (executeBtn) executeBtn.addEventListener('click', applyFilters);
+
+    sidebarCheckboxes.forEach(cb => {
+        cb.addEventListener('change', applyFilters);
+    });
+
+    const applySidebarBtn = document.getElementById('btnApplySidebarFilters');
+    if (applySidebarBtn) {
+        applySidebarBtn.addEventListener('click', function () {
+            applyFilters();
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+    }
+
+    if (clearBtn) {
+        clearBtn.addEventListener('click', function () {
+            if (searchInput) searchInput.value = '';
+            sidebarCheckboxes.forEach(cb => cb.checked = false);
+            document.querySelectorAll('.top-dest-checkbox').forEach(cb => cb.checked = false);
+            updateDestTriggerLabel();
+            window.currentDateFilter = 'all';
+            const display = document.getElementById('selectedDateDisplay');
+            if (display) display.value = 'Dowolny termin';
+            applyFilters();
+        });
+    }
+
+    // Obsługa usunięcia chipa bazy
+    const removeBaseChip = document.getElementById('removeBaseChip');
+    if (removeBaseChip) {
+        removeBaseChip.addEventListener('click', function () {
+            document.querySelectorAll('.filter-checkbox[data-type="base"]').forEach(cb => cb.checked = false);
+            applyFilters();
+        });
+    }
+
+    window.triggerSuperpilotFilter = applyFilters;
+}
+
+function initTopDestMultiselect() {
+    const destCheckboxes = document.querySelectorAll('.top-dest-checkbox');
+    const triggerText = document.getElementById('destTriggerText');
+    const resetBtn = document.getElementById('btnResetDestMultiselect');
+    const confirmBtn = document.getElementById('btnConfirmDestDropdown');
+
+    function updateLabel() {
+        const checked = Array.from(document.querySelectorAll('.top-dest-checkbox:checked')).map(cb => cb.value);
+        if (!triggerText) return;
+
+        if (checked.length === 0) {
+            triggerText.innerText = 'Wszystkie kraje';
+            triggerText.style.color = '#94a3b8';
+        } else if (checked.length === 1) {
+            const flag = getCountryFlag(checked[0]);
+            triggerText.innerText = flag + ' ' + checked[0];
+            triggerText.style.color = 'var(--dark-navy)';
+        } else if (checked.length === 2) {
+            triggerText.innerText = checked.map(c => getCountryFlag(c) + ' ' + c).join(', ');
+            triggerText.style.color = 'var(--dark-navy)';
+        } else {
+            triggerText.innerText = getCountryFlag(checked[0]) + ' ' + checked[0] + ' (+' + (checked.length - 1) + ' inne)';
+            triggerText.style.color = 'var(--dark-navy)';
+        }
+
+        if (window.triggerSuperpilotFilter) window.triggerSuperpilotFilter();
+    }
+
+    window.updateDestTriggerLabel = updateLabel;
+
+    destCheckboxes.forEach(cb => {
+        cb.addEventListener('change', updateLabel);
+    });
+
+    if (resetBtn) {
+        resetBtn.addEventListener('click', function () {
+            destCheckboxes.forEach(cb => cb.checked = false);
+            updateLabel();
+        });
+    }
+
+    if (confirmBtn) {
+        confirmBtn.addEventListener('click', function () {
+            const dropdownEl = document.getElementById('destDropdownTrigger');
+            const dropdown = bootstrap.Dropdown.getInstance(dropdownEl);
+            if (dropdown) dropdown.hide();
+        });
+    }
+
+    const removeDestChip = document.getElementById('removeDestChip');
+    if (removeDestChip) {
+        removeDestChip.addEventListener('click', function () {
+            destCheckboxes.forEach(cb => cb.checked = false);
+            updateLabel();
+        });
+    }
+}
+
+function updateActiveFilterChips(selectedDests, selectedBases) {
+    const chipDest = document.getElementById('chipDestFilter');
+    const chipDestText = document.getElementById('chipDestText');
+    const chipDate = document.getElementById('chipDateFilter');
+    const chipDateText = document.getElementById('chipDateText');
+    const chipBase = document.getElementById('chipBaseFilter');
+    const chipBaseText = document.getElementById('chipBaseText');
+
+    if (chipDest && chipDestText) {
+        if (selectedDests && selectedDests.length > 0) {
+            chipDest.style.display = 'inline-flex';
+            chipDestText.innerText = selectedDests.map(d => capitalize(d)).join(', ');
+        } else {
+            chipDest.style.display = 'none';
+        }
+    }
+
+    if (chipDate && chipDateText) {
+        if (window.currentDateFilter && window.currentDateFilter !== 'all') {
+            chipDate.style.display = 'inline-flex';
+            if (window.currentDateFilter === '16-24-sep-2027') chipDateText.innerText = '16–24.09.2027';
+            else if (window.currentDateFilter === '05-15-sep-2027') chipDateText.innerText = '05–15.09.2027';
+            else if (window.currentDateFilter === 'październik-2027') chipDateText.innerText = 'Październik 2027';
+        } else {
+            chipDate.style.display = 'none';
+        }
+    }
+
+    if (chipBase && chipBaseText) {
+        if (selectedBases && selectedBases.length > 0) {
+            chipBase.style.display = 'inline-flex';
+            chipBaseText.innerText = 'Baza: ' + selectedBases.map(b => capitalize(b)).join(', ');
+        } else {
+            chipBase.style.display = 'none';
+        }
+    }
+}
+
+function initDateRangeModal() {
+    const presets = document.querySelectorAll('.preset-chip');
+    const selectedText = document.getElementById('modalSelectedDateText');
+    const displayInput = document.getElementById('selectedDateDisplay');
+    const resetDateBtn = document.getElementById('btnResetDateDialog');
+    const applyDateBtn = document.getElementById('btnApplyDateDialog');
+    const removeDateChip = document.getElementById('removeDateChip');
+
+    presets.forEach(p => {
+        p.addEventListener('click', function () {
+            presets.forEach(item => item.classList.remove('active'));
+            this.classList.add('active');
+
+            const presetVal = this.getAttribute('data-preset');
+            window.currentDateFilter = presetVal;
+
+            if (presetVal === '16-24-sep-2027') {
+                selectedText.innerText = '16.09.2027 – 24.09.2027 (Wycieczka #12)';
+                displayInput.value = '16.09.2027 – 24.09.2027';
+            } else if (presetVal === '05-15-sep-2027') {
+                selectedText.innerText = '05.09.2027 – 15.09.2027 (Wolne okienko)';
+                displayInput.value = '05.09.2027 – 15.09.2027';
+            } else if (presetVal === 'październik-2027') {
+                selectedText.innerText = '01.10.2027 – 31.10.2027 (Październik)';
+                displayInput.value = 'Październik 2027';
+            } else {
+                selectedText.innerText = 'Dowolny termin';
+                displayInput.value = 'Dowolny termin';
+            }
+        });
+    });
+
+    if (resetDateBtn) {
+        resetDateBtn.addEventListener('click', function () {
+            presets.forEach(item => item.classList.remove('active'));
+            const allPreset = document.querySelector('.preset-chip[data-preset="all"]');
+            if (allPreset) allPreset.classList.add('active');
+            window.currentDateFilter = 'all';
+            selectedText.innerText = 'Dowolny termin';
+            displayInput.value = 'Dowolny termin';
+            if (window.triggerSuperpilotFilter) window.triggerSuperpilotFilter();
+            const modalEl = document.getElementById('dateRangeModal');
+            const modalInstance = bootstrap.Modal.getInstance(modalEl);
+            if (modalInstance) modalInstance.hide();
+        });
+    }
+
+    if (applyDateBtn) {
+        applyDateBtn.addEventListener('click', function () {
+            if (window.triggerSuperpilotFilter) window.triggerSuperpilotFilter();
+        });
+    }
+
+    if (removeDateChip) {
+        removeDateChip.addEventListener('click', function () {
+            window.currentDateFilter = 'all';
+            displayInput.value = 'Dowolny termin';
+            if (window.triggerSuperpilotFilter) window.triggerSuperpilotFilter();
+        });
+    }
+}
+
+function initModals() {
+    window.openBookingModal = function (pilotId, pilotName, dates) {
+        const modal = new bootstrap.Modal(document.getElementById('bookingModal'));
+        const nameInput = document.getElementById('bookingPilotName');
+        const nameDisplay = document.getElementById('bookingPilotNameDisplay');
+        const idInput = document.getElementById('bookingPilotId');
+        const datesInput = document.getElementById('bookingDates');
+
+        const name = pilotName || 'Oskar Kaczmarek';
+        if (nameInput) nameInput.value = name;
+        if (nameDisplay) nameDisplay.innerText = name;
+        if (idInput) idInput.value = pilotId || '1';
+        if (datesInput && dates) datesInput.value = dates;
+
+        modal.show();
+    };
+
+    window.openSosModal = function (defaultCountry) {
+        const modal = new bootstrap.Modal(document.getElementById('sosModal'));
+        if (defaultCountry && document.getElementById('sosCountrySelect')) {
+            document.getElementById('sosCountrySelect').value = defaultCountry;
+        }
+        modal.show();
+    };
+
+    const bookingForm = document.getElementById('pilotBookingForm');
+    if (bookingForm) {
+        bookingForm.addEventListener('submit', function (e) {
+            e.preventDefault();
+            const submitBtn = bookingForm.querySelector('button[type="submit"]');
+            const pilotName = document.getElementById('bookingPilotName').value;
+            const originalText = submitBtn.innerHTML;
+
+            submitBtn.disabled = true;
+            submitBtn.innerHTML = "<span class=\"spinner-border spinner-border-sm me-1\"></span> Wysyłanie powiadomienia PUSH...";
+
+            setTimeout(() => {
+                submitBtn.disabled = false;
+                submitBtn.innerHTML = originalText;
+                const modalEl = document.getElementById('bookingModal');
+                const modalInstance = bootstrap.Modal.getInstance(modalEl);
+                if (modalInstance) modalInstance.hide();
+
+                showToastNotification(
+                    'Pomyślnie wysłano zapytanie!',
+                    'Powiadomienie PUSH trafiło do aplikacji mobilnej pilota (' + pilotName + '). Pilot ma 24h na akceptację w aplikacji.'
+                );
+            }, 900);
+        });
+    }
+}
+
+function showToastNotification(title, message) {
+    let container = document.getElementById('toastContainer');
+    if (!container) {
+        container = document.createElement('div');
+        container.id = 'toastContainer';
+        container.style.position = 'fixed';
+        container.style.top = '24px';
+        container.style.right = '24px';
+        container.style.zIndex = '99999';
+        document.body.appendChild(container);
+    }
+
+    const toast = document.createElement('div');
+    toast.className = 'toast show align-items-center text-white bg-dark border-0 mb-2 shadow-lg';
+    toast.style.minWidth = '340px';
+    toast.style.borderRadius = '12px';
+    toast.style.overflow = 'hidden';
+    toast.innerHTML = `
+        <div class="d-flex p-3" style="background: linear-gradient(135deg, #1f2244 0%, #312e81 100%);">
+            <div class="me-3 fs-3 text-warning">
+                <i class='bx bxs-bell-ring'></i>
+            </div>
+            <div class="flex-grow-1">
+                <h6 class="fw-bold mb-1 text-white" style="font-size: 0.92rem;">${title}</h6>
+                <div style="font-size: 0.8rem; line-height: 1.4; color: #cbd5e1;">${message}</div>
+            </div>
+            <button type="button" class="btn-close btn-close-white me-1 m-auto" onclick="this.closest('.toast').remove()"></button>
+        </div>
+    `;
+
+    container.appendChild(toast);
+
+    setTimeout(() => {
+        toast.remove();
+    }, 6000);
+}
+
+function getCountryFlag(country) {
+    const map = {
+        'Włochy': '🇮🇹',
+        'Grecja': '🇬🇷',
+        'Hiszpania': '🇪🇸',
+        'Chorwacja': '🇭🇷',
+        'Norwegia': '🇳🇴',
+        'Austria': '🇦🇹',
+        'Japonia': '🇯🇵'
+    };
+    return map[country] || '🌍';
+}
+
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
diff --git a/prototype/superpilot-web/booking-modal.php b/prototype/superpilot-web/booking-modal.php
new file mode 100644
index 0000000..c5d0974
--- /dev/null
+++ b/prototype/superpilot-web/booking-modal.php
@@ -0,0 +1,165 @@
+<!-- Modal Rezerwacji / Zapytania Ofertowego (Standard UX/UI 2026) -->
+<div class="modal fade" id="bookingModal" tabindex="-1" aria-labelledby="bookingModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content border-0 shadow-lg" style="border-radius: var(--radius-md); overflow: hidden;">
+            
+            <!-- Spokojny, czytelny nagłówek modala -->
+            <div class="modal-header bg-white border-bottom py-3 px-4">
+                <div class="d-flex align-items-center gap-2">
+                    <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 36px; height: 36px; background: var(--primary-light); color: var(--primary); font-size: 1.2rem;">
+                        <i class='bx bx-calendar-check'></i>
+                    </div>
+                    <div>
+                        <h5 class="modal-title fw-bold text-navy mb-0" id="bookingModalLabel" style="font-size: 1.05rem;">
+                            Zapytanie o Dostępność & Rezerwacja Terminu
+                        </h5>
+                        <small class="text-muted" style="font-size: 0.76rem;">
+                            Zlecenie trafi bezpośrednio do aplikacji mobilnej pilota z możliwością natychmiastowej akceptacji
+                        </small>
+                    </div>
+                </div>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+            </div>
+
+            <form id="pilotBookingForm">
+                <div class="modal-body p-4">
+                    
+                    <!-- Podsumowanie wybranego pilota (Spokojna karta) -->
+                    <div class="d-flex align-items-center justify-content-between p-3 rounded-3 mb-4" style="background: #f8f9fd; border: 1px solid var(--border-color);">
+                        <div class="d-flex align-items-center gap-3">
+                            <div class="rounded-3 d-flex align-items-center justify-content-center text-white fw-bold" style="width: 44px; height: 44px; background: linear-gradient(135deg, var(--primary) 0%, #767bf7 100%); font-size: 1.1rem; flex-shrink: 0;">
+                                OK
+                            </div>
+                            <div>
+                                <div class="d-flex align-items-center gap-2">
+                                    <span class="fw-bold text-dark" id="bookingPilotNameDisplay" style="font-size: 0.95rem;">Oskar Kaczmarek</span>
+                                    <span class="pilot-academy-badge" style="font-size: 0.68rem; padding: 2px 8px;">
+                                        <i class='bx bx-check-shield'></i> Superpilot Academy
+                                    </span>
+                                </div>
+                                <div class="text-muted small d-flex align-items-center gap-2 mt-1" style="font-size: 0.76rem;">
+                                    <span><i class='bx bx-compass text-primary'></i> Pilot Wycieczek & Przewodnik</span>
+                                    <span>•</span>
+                                    <span><i class='bx bx-map-pin text-muted'></i> Baza: Warszawa</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="text-end">
+                            <span class="profile-meta-rating" style="font-size: 0.75rem;">
+                                <i class='bx bxs-star text-warning'></i> 4.9 (18 opinii)
+                            </span>
+                        </div>
+                    </div>
+
+                    <input type="hidden" id="bookingPilotId" value="1">
+                    <input type="hidden" id="bookingPilotName" value="Oskar Kaczmarek">
+
+                    <!-- Sekcja 1: Wybór wycieczki z Travel Managera -->
+                    <div class="mb-3">
+                        <label class="form-label fw-bold text-dark small mb-1">
+                            Powiąż z imprezą w Travel Managerze:
+                        </label>
+                        <select class="form-select form-select-sm fw-semibold" id="bookingTourSelect" style="font-size: 0.84rem; padding: 0.5rem 0.75rem;">
+                            <option value="12" selected>Wycieczka #12: Klasyczne Włochy (16.09 - 24.09.2027) • 44 uczestników</option>
+                            <option value="15">Wycieczka #15: Magia Toskanii i Rzym (05.10 - 12.10.2027) • 38 uczestników</option>
+                            <option value="21">Wycieczka #21: Andaluzja i Gibraltar (12.11 - 19.11.2027) • 40 uczestników</option>
+                            <option value="new">+ Utwórz zapytanie niestandardowe / Inny termin...</option>
+                        </select>
+                        <div class="text-muted mt-1" style="font-size: 0.72rem;">
+                            Wybranie imprezy automatycznie przeniesie ramowy program trasy do aplikacji pilota.
+                        </div>
+                    </div>
+
+                    <!-- Sekcja 2: Termin i Trasa (2 kolumny) -->
+                    <div class="row g-3 mb-3">
+                        <div class="col-md-6">
+                            <label class="form-label fw-bold text-dark small mb-1">Termin realizacji zlecenia:</label>
+                            <div class="input-group input-group-sm">
+                                <span class="input-group-text bg-light text-muted"><i class='bx bx-calendar'></i></span>
+                                <input type="text" class="form-control fw-semibold" id="bookingDates" value="16.09.2027 - 24.09.2027" required>
+                            </div>
+                        </div>
+
+                        <div class="col-md-6">
+                            <label class="form-label fw-bold text-dark small mb-1">Destynacja i trasa:</label>
+                            <div class="input-group input-group-sm">
+                                <span class="input-group-text bg-light text-muted"><i class='bx bx-map-pin'></i></span>
+                                <input type="text" class="form-control fw-semibold" id="bookingDestination" value="🇮🇹 Włochy (Wenecja - Florencja - Rzym)" required>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Sekcja 3: Finanse i Świadczenia (2 kolumny) -->
+                    <div class="row g-3 mb-3">
+                        <div class="col-md-6">
+                            <label class="form-label fw-bold text-dark small mb-1">Proponowana stawka dzienna netto:</label>
+                            <div class="input-group input-group-sm mb-1">
+                                <span class="input-group-text bg-light fw-bold text-dark">PLN</span>
+                                <input type="number" class="form-control fw-bold text-dark" id="bookingRate" value="550" step="50">
+                                <span class="input-group-text bg-light text-muted">/ dzień netto</span>
+                            </div>
+                            <div class="text-muted" style="font-size: 0.72rem;">
+                                Szacowany koszt zlecenia (9 dni): <strong class="text-dark">4 950 PLN netto</strong>
+                            </div>
+                        </div>
+
+                        <div class="col-md-6">
+                            <label class="form-label fw-bold text-dark small mb-1">Świadczenia zapewniane przez biuro:</label>
+                            <div class="p-2 border rounded-2 bg-light" style="font-size: 0.78rem;">
+                                <div class="form-check mb-1">
+                                    <input class="form-check-input" type="checkbox" id="benefitHotel" checked>
+                                    <label class="form-check-label text-dark" for="benefitHotel">
+                                        Pokój 1-osobowy dla pilota w hotelach
+                                    </label>
+                                </div>
+                                <div class="form-check mb-1">
+                                    <input class="form-check-input" type="checkbox" id="benefitMeals" checked>
+                                    <label class="form-check-label text-dark" for="benefitMeals">
+                                        Wyżywienie (śniadania + obiadokolacje)
+                                    </label>
+                                </div>
+                                <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" id="benefitInsurance" checked>
+                                    <label class="form-check-label text-dark" for="benefitInsurance">
+                                        Ubezpieczenie KL / NNW w trakcie trasy
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Sekcja 4: Wiadomość dla pilota -->
+                    <div class="mb-3">
+                        <label class="form-label fw-bold text-dark small mb-1">Wiadomość / uwagi do zlecenia:</label>
+                        <textarea class="form-control" rows="3" style="font-size: 0.82rem; line-height: 1.45;" placeholder="Dodatkowe informacje, specyfika grupy, zbiórka...">Dzień dobry Panie Oskarze, zapraszamy do poprowadzenia wycieczki objazdowej po Włoszech. Znając Pana referencje z poprzednich tras, liczymy na ponowną udaną współpracę!</textarea>
+                    </div>
+
+                    <!-- Dyskretny box o powiadomieniu PUSH -->
+                    <div class="d-flex align-items-center gap-3 p-3 rounded-2" style="background: var(--primary-light); border: 1px solid var(--primary-border);">
+                        <i class='bx bx-mobile-alt fs-3' style="color: var(--primary);"></i>
+                        <div style="font-size: 0.78rem; line-height: 1.4; color: var(--dark-navy);">
+                            <strong>Powiadomienie PUSH:</strong> Pilot otrzyma natychmiast zapytanie na telefonie w aplikacji <code>TravelLeader Mobile</code> i ma 24h na potwierdzenie dostępności.
+                        </div>
+                    </div>
+
+                </div>
+
+                <div class="modal-footer bg-light px-4 py-3 border-top d-flex justify-content-between align-items-center">
+                    <span class="text-muted small" style="font-size: 0.74rem;">
+                        <i class='bx bx-shield-check text-success me-1'></i> Bezpieczna rezerwacja w ekosystemie Travel Manager
+                    </span>
+                    <div class="d-flex align-items-center gap-2">
+                        <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal" style="font-size: 0.8rem;">
+                            Anuluj
+                        </button>
+                        <button type="submit" class="btn btn-primary btn-sm px-4 fw-semibold" style="font-size: 0.8rem; border-radius: var(--radius-sm);">
+                            <i class='bx bx-paper-plane me-1'></i> Wyślij zapytanie do pilota
+                        </button>
+                    </div>
+                </div>
+            </form>
+
+        </div>
+    </div>
+</div>
diff --git a/prototype/superpilot-web/courses.php b/prototype/superpilot-web/courses.php
new file mode 100644
index 0000000..8d4a299
--- /dev/null
+++ b/prototype/superpilot-web/courses.php
@@ -0,0 +1,239 @@
+<?php
+$pageTitle = 'Superpilot - Superpilot Academy & Certyfikaty dla Biur';
+$enablePrototypeComments = true;
+include __DIR__ . '/header.php';
+?>
+
+<div class="container-xxl flex-grow-1 container-p-y" style="padding-top: 1.5rem !important;">
+
+    <!-- Breadcrumb -->
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb mb-0" style="font-size: 0.8rem;">
+                <li class="breadcrumb-item"><a href="index.php" class="text-muted">Superpilot</a></li>
+                <li class="breadcrumb-item active text-primary fw-bold" aria-current="page">Superpilot Academy & Certyfikaty</li>
+            </ol>
+        </nav>
+        <span class="badge bg-label-primary px-3 py-1 rounded-pill" style="font-size: 0.76rem;">
+            Oficjalny Program Akredytacji Pilotów
+        </span>
+    </div>
+
+    <!-- Hero Card Superpilot Academy -->
+    <div class="search-hero-card mb-4" style="background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);">
+        <div class="row align-items-center">
+            <div class="col-lg-8">
+                <span class="badge bg-warning text-dark fw-bold mb-2 px-3 py-1 rounded-pill" style="font-size: 0.72rem;">
+                    SZKOLENIA & AKREDYTACJE DLA BRANŻY TURYSTYCZNEJ
+                </span>
+                <h3 class="fw-bold text-white mb-2">Superpilot Academy & Program Certyfikacji</h3>
+                <p class="text-white-50 mb-3" style="font-size: 0.92rem; max-width: 650px;">
+                    Podnoś jakość kadr wyjazdowych. Piloci z certyfikatami Superpilot Academy otrzymują <strong>odznakę zaufania</strong>, wyższą pozycję w wyszukiwarce biur oraz ubezpieczenie OC pilotażu.
+                </p>
+                <div class="d-flex align-items-center gap-3 flex-wrap">
+                    <span class="text-white small d-flex align-items-center gap-1">
+                        <i class='bx bx-check-circle text-success'></i> Dofinansowanie z TravelPay
+                    </span>
+                    <span class="text-white small d-flex align-items-center gap-1">
+                        <i class='bx bx-check-circle text-success'></i> Egzaminy praktyczne w trasie
+                    </span>
+                    <span class="text-white small d-flex align-items-center gap-1">
+                        <i class='bx bx-check-circle text-success'></i> Weryfikacja cyfrowa blockchain
+                    </span>
+                </div>
+            </div>
+            <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
+                <a href="../travelleader-mobile/courses.php" target="_blank" class="btn btn-outline-light btn-sm" style="font-size: 0.78rem;">
+                    <i class='bx bx-mobile-alt'></i> Zobacz widok szkoleń pilota (Mobile) &rarr;
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <!-- Narzędzie: Weryfikator certyfikatu online -->
+    <div class="card border-0 shadow-sm mb-4" style="border-radius: var(--sp-radius-md); background: #f8fafc; border: 1px solid var(--sp-border-color);">
+        <div class="card-body p-4">
+            <div class="row align-items-center">
+                <div class="col-lg-4">
+                    <h6 class="fw-bold text-navy mb-1"><i class='bx bx-search-alt text-primary me-1'></i> Weryfikator Certyfikatu Online</h6>
+                    <small class="text-muted">Sprawdź autentyczność certyfikatu kandydata na pilota po numerze</small>
+                </div>
+                <div class="col-lg-5 col-md-8 mt-2 mt-lg-0">
+                    <div class="input-group">
+                        <span class="input-group-text bg-white"><i class='bx bx-barcode'></i></span>
+                        <input type="text" id="certNumberInput" class="form-control" value="SPA-2026-OK92" placeholder="Wpisz numer, np. SPA-2026-OK92">
+                    </div>
+                </div>
+                <div class="col-lg-3 col-md-4 mt-2 mt-lg-0">
+                    <button type="button" class="btn btn-primary w-100 fw-bold" onclick="verifyCert()">
+                        Zweryfikuj w rejestrze
+                    </button>
+                </div>
+            </div>
+
+            <!-- Wynik weryfikacji -->
+            <div id="certResultBox" class="mt-3 p-3 rounded-3 bg-white border d-flex justify-content-between align-items-center flex-wrap gap-2" style="display: flex;">
+                <div class="d-flex align-items-center gap-3">
+                    <div class="rounded-circle bg-success-subtle text-success d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; font-size: 1.3rem;">
+                        <i class='bx bx-check-double'></i>
+                    </div>
+                    <div>
+                        <div class="fw-bold text-navy" style="font-size: 0.92rem;">
+                            Certyfikat Autentyczny: Oskar Kaczmarek (ID #1)
+                        </div>
+                        <small class="text-muted">Superpilot Academy 2026 • Akredytacja Pilotażu Europy Południowej (Włochy, Grecja, Hiszpania) • Status: <strong>Aktywny i ważny</strong></small>
+                    </div>
+                </div>
+                <a href="pilot-profile.php" class="btn btn-sm btn-outline-primary fw-semibold">
+                    Zobacz zweryfikowany profil &rarr;
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <!-- Katalog Szkoleń Dostępnych dla Branży -->
+    <h5 class="fw-bold text-navy mb-3">Programy Szkoleniowe i Certyfikaty Partnerskie</h5>
+
+    <div class="row g-4">
+        
+        <!-- Kurs 1: Superpilot Academy 2027 -->
+        <div class="col-lg-4 col-md-6">
+            <div class="academy-card h-100 d-flex flex-column">
+                <div class="p-4 flex-grow-1">
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                        <span class="academy-card-badge">
+                            <i class='bx bx-star'></i> Flagowy Program
+                        </span>
+                        <span class="fw-bold text-navy">1 290 PLN</span>
+                    </div>
+
+                    <h5 class="fw-bold text-navy mb-2">Superpilot Academy 2027: Europa Południowa</h5>
+                    <p class="text-secondary small mb-3">
+                        Praktyczny certyfikat pilotażu tras autokarowych i lotniczych we Włoszech, Grecji i Hiszpanii. Standardy Magico i TravelManager.
+                    </p>
+
+                    <div class="d-flex flex-column gap-1 small text-muted mb-3">
+                        <div><i class='bx bx-time text-primary me-1'></i> Czas trwania: <strong>32h (Online + Warsztat Rzym)</strong></div>
+                        <div><i class='bx bx-trending-up text-success me-1'></i> Wzrost pozycji w bazie biur: <strong>+350%</strong></div>
+                        <div><i class='bx bx-wallet text-warning me-1'></i> Dofinansowanie biura przez TravelPay: <strong>do 50%</strong></div>
+                    </div>
+                </div>
+
+                <div class="p-3 bg-light border-top d-flex justify-content-between align-items-center">
+                    <small class="text-muted">Absolwenci: <strong>64 pilotów</strong></small>
+                    <button type="button" class="btn btn-sm btn-superpilot" onclick="alert('Otwarto formularz dofinansowania szkolenia dla pilota przez TravelPay.');">
+                        Dofinansuj pilotowi
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Kurs 2: KPP w Turystyce -->
+        <div class="col-lg-4 col-md-6">
+            <div class="academy-card h-100 d-flex flex-column">
+                <div class="p-4 flex-grow-1">
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                        <span class="badge bg-danger-subtle text-danger rounded-pill fw-bold">
+                            <i class='bx bx-plus-medical'></i> Ratownictwo Medyczne
+                        </span>
+                        <span class="fw-bold text-navy">890 PLN</span>
+                    </div>
+
+                    <h5 class="fw-bold text-navy mb-2">Kwalifikowana Pierwsza Pomoc (KPP) w Trasie</h5>
+                    <p class="text-secondary small mb-3">
+                        Państwowy kurs pierwszej pomocy dla pilotów wycieczek szkolnych, trekkingowych i autokarowych. Egzamin państwowy z tytułem Ratownika.
+                    </p>
+
+                    <div class="d-flex flex-column gap-1 small text-muted mb-3">
+                        <div><i class='bx bx-time text-primary me-1'></i> Czas trwania: <strong>66 godzin (Weekendowo)</strong></div>
+                        <div><i class='bx bx-shield-check text-success me-1'></i> Ważność uprawnień: <strong>3 lata</strong></div>
+                        <div><i class='bx bx-badge text-info me-1'></i> Wymóg na trasy szkolne i młodzieżowe</div>
+                    </div>
+                </div>
+
+                <div class="p-3 bg-light border-top d-flex justify-content-between align-items-center">
+                    <small class="text-muted">Certyfikat państwowy</small>
+                    <button type="button" class="btn btn-sm btn-superpilot-outline" onclick="alert('Szczegóły kursu KPP przesłano na e-mail koordynatora.');">
+                        Szczegóły programu
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Kurs 3: Standardy VIP i Incentive -->
+        <div class="col-lg-4 col-md-6">
+            <div class="academy-card h-100 d-flex flex-column">
+                <div class="p-4 flex-grow-1">
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                        <span class="badge bg-info-subtle text-info rounded-pill fw-bold">
+                            <i class='bx bx-diamond'></i> Korporacje & VIP
+                        </span>
+                        <span class="fw-bold text-navy">1 450 PLN</span>
+                    </div>
+
+                    <h5 class="fw-bold text-navy mb-2">Pilotaż Wyjazdów VIP & Incentive 2027</h5>
+                    <p class="text-secondary small mb-3">
+                        Etykieta biznesowa, dyplomacja w hotelach 5*, obsługa zarządów korporacji i eventów zagranicznych. Najwyższe stawki dzienne w branży.
+                    </p>
+
+                    <div class="d-flex flex-column gap-1 small text-muted mb-3">
+                        <div><i class='bx bx-time text-primary me-1'></i> Czas trwania: <strong>20h Masterclass</strong></div>
+                        <div><i class='bx bx-award text-success me-1'></i> Dedykowana odznaka: <strong>VIP Guide Pro</strong></div>
+                        <div><i class='bx bx-user-voice text-primary me-1'></i> Prowadzący: Doświadczeni dyrektorzy operacyjni biur</div>
+                    </div>
+                </div>
+
+                <div class="p-3 bg-light border-top d-flex justify-content-between align-items-center">
+                    <small class="text-muted">Dla doświadczonych pilotów</small>
+                    <button type="button" class="btn btn-sm btn-superpilot-outline" onclick="alert('Zgłoszono zapotrzebowanie na szkolenie VIP.');">
+                        Szczegóły programu
+                    </button>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+</div><!-- /.container-xxl -->
+
+<script>
+function verifyCert() {
+    const num = document.getElementById('certNumberInput').value.trim();
+    const res = document.getElementById('certResultBox');
+    if (num === 'SPA-2026-OK92') {
+        res.innerHTML = `
+            <div class="d-flex align-items-center gap-3">
+                <div class="rounded-circle bg-success-subtle text-success d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; font-size: 1.3rem;">
+                    <i class='bx bx-check-double'></i>
+                </div>
+                <div>
+                    <div class="fw-bold text-navy" style="font-size: 0.92rem;">
+                        Certyfikat Autentyczny: Oskar Kaczmarek (ID #1)
+                    </div>
+                    <small class="text-muted">Superpilot Academy 2026 • Akredytacja Pilotażu Europy Południowej (Włochy, Grecja, Hiszpania) • Status: <strong>Aktywny i ważny</strong></small>
+                </div>
+            </div>
+            <a href="pilot-profile.php" class="btn btn-sm btn-outline-primary fw-semibold">
+                Zobacz zweryfikowany profil &rarr;
+            </a>
+        `;
+    } else {
+        res.innerHTML = `
+            <div class="d-flex align-items-center gap-3">
+                <div class="rounded-circle bg-info-subtle text-info d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; font-size: 1.3rem;">
+                    <i class='bx bx-info-circle'></i>
+                </div>
+                <div>
+                    <div class="fw-bold text-navy" style="font-size: 0.92rem;">
+                        Certyfikat w Rejestrze: ${num}
+                    </div>
+                    <small class="text-muted">Superpilot Academy Standard • Certyfikat w trakcie corocznej resertyfikacji.</small>
+                </div>
+            </div>
+            <span class="badge bg-label-info">Zweryfikowano</span>
+        `;
+    }
+}
+</script>
+
+<?php include __DIR__ . '/footer.php'; ?>
diff --git a/prototype/superpilot-web/footer.php b/prototype/superpilot-web/footer.php
new file mode 100644
index 0000000..5cf99ae
--- /dev/null
+++ b/prototype/superpilot-web/footer.php
@@ -0,0 +1,148 @@
+<!-- Reusable Modals -->
+<?php include __DIR__ . '/booking-modal.php'; ?>
+<?php include __DIR__ . '/sos-modal.php'; ?>
+
+<!-- Modal Wideo-Wizytówki Pilota (Autoprezentacja) -->
+<div class="modal fade" id="videoPitchModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content border-0 shadow-lg" style="border-radius: var(--sp-radius-md); overflow: hidden; background: #0f172a; color: white;">
+            
+            <div class="modal-header border-0 pb-0">
+                <div class="d-flex align-items-center gap-2">
+                    <span class="badge bg-danger rounded-pill" style="font-size: 0.7rem;">WIDEO AUTOPREZENTACJA</span>
+                    <h6 class="modal-title fw-bold text-white mb-0" id="videoModalPilotName">Oskar Kaczmarek</h6>
+                    <span class="text-white-50 small" id="videoModalLength">(1:15 min)</span>
+                </div>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+            </div>
+
+            <div class="modal-body p-4 text-center">
+                
+                <!-- Ekran symulowanego wideo playera -->
+                <div class="position-relative rounded-3 overflow-hidden d-flex flex-column align-items-center justify-content-center p-5 mb-3" style="background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); min-height: 320px; border: 1px solid rgba(255,255,255,0.1);">
+                    
+                    <!-- Próbka audio/video avatara -->
+                    <div class="rounded-circle d-flex align-items-center justify-content-center mb-3 shadow-lg" style="width: 84px; height: 84px; background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-violet) 100%); font-size: 2.2rem; font-weight: 800;">
+                        OK
+                    </div>
+
+                    <h5 class="fw-bold text-white mb-1">„Buongiorno! Nazywam się Oskar Kaczmarek...”</h5>
+                    <p class="text-white-50 small mb-3" style="max-width: 520px;">
+                        Posłuchaj próbki autoprezentacji: dykcja, prezencja, płynne przejście na język włoski i angielski, opanowanie i entuzjazm do pracy z grupami wycieczkowymi.
+                    </p>
+
+                    <!-- Pasek postępu odtwarzacza -->
+                    <div class="w-100 progress bg-dark" style="height: 6px; max-width: 480px;">
+                        <div id="videoMockProgress" class="progress-bar bg-primary" style="width: 45%;"></div>
+                    </div>
+                    <div class="d-flex justify-content-between text-white-50 small mt-1 w-100" style="max-width: 480px; font-size: 0.72rem;">
+                        <span>0:34</span>
+                        <span>1:15</span>
+                    </div>
+
+                    <!-- Fale dźwiękowe w tle -->
+                    <div class="d-flex align-items-center gap-1 mt-3">
+                        <span class="badge bg-label-primary px-3 py-1 rounded-pill"><i class='bx bx-volume-full'></i> Dźwięk HD</span>
+                        <span class="badge bg-label-success px-3 py-1 rounded-pill"><i class='bx bx-check-shield'></i> Zweryfikowany przez Superpilot</span>
+                    </div>
+
+                </div>
+
+                <!-- Podsumowanie kompetencji zweryfikowanych w wideo -->
+                <div class="row g-2 text-start">
+                    <div class="col-md-4">
+                        <div class="p-2 rounded bg-white bg-opacity-10">
+                            <div class="text-success small fw-bold"><i class='bx bx-check'></i> Język Włoski</div>
+                            <small class="text-white-50" style="font-size: 0.74rem;">Płynna wymowa i słownictwo branżowe</small>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="p-2 rounded bg-white bg-opacity-10">
+                            <div class="text-success small fw-bold"><i class='bx bx-check'></i> Dyplomacja & Grupa</div>
+                            <small class="text-white-50" style="font-size: 0.74rem;">Naturalne podejście do trudnych sytuacji</small>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="p-2 rounded bg-white bg-opacity-10">
+                            <div class="text-success small fw-bold"><i class='bx bx-check'></i> Prezencja Osobista</div>
+                            <small class="text-white-50" style="font-size: 0.74rem;">Wysoka kultura osobista, schludność</small>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+            <div class="modal-footer border-0 pt-0 pb-4 px-4 justify-content-between">
+                <button type="button" class="btn btn-outline-light btn-sm" data-bs-dismiss="modal">Zamknij</button>
+                <button type="button" class="btn btn-superpilot" onclick="bootstrap.Modal.getInstance(document.getElementById('videoPitchModal')).hide(); openBookingModal('1', 'Oskar Kaczmarek', '16.09.2027 - 24.09.2027');">
+                    <i class='bx bx-calendar-check'></i> Zarezerwuj pilota po obejrzeniu
+                </button>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+<!-- Modal Podglądu Zdjęć ze Szlaków (Lightbox) -->
+<div class="modal fade" id="photoLightboxModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content border-0 shadow-lg bg-dark text-white" style="border-radius: var(--sp-radius-md); overflow: hidden;">
+            <div class="modal-header border-0 pb-0">
+                <h6 class="modal-title fw-bold text-white mb-0" id="lightboxTitle">Zdjęcie z trasy</h6>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+            </div>
+            <div class="modal-body p-4 text-center">
+                <div class="rounded-3 d-flex align-items-center justify-content-center p-5 mb-2" id="lightboxPlaceholder" style="min-height: 380px; background: linear-gradient(135deg, #1e293b, #334155); color: white;">
+                    <div class="text-center">
+                        <i class='bx bx-landscape' style="font-size: 4rem; opacity: 0.8;"></i>
+                        <h5 class="fw-bold mt-2" id="lightboxSubtext">Florencja & Toskania — Grupa objazdowa Almatur</h5>
+                        <p class="text-white-50 small">Fotografia wykonana podczas realizacji programu autokarowego • Wrzesień 2026</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Stopka desktopowa -->
+<footer class="content-footer footer bg-white border-top py-3 mt-5">
+    <div class="container-xxl d-flex flex-wrap justify-content-between align-items-center py-2 flex-md-row flex-column">
+        <div class="mb-2 mb-md-0 small text-muted">
+            © <?= date('Y') ?> <strong>Superpilot</strong> — Ekosystem TravelManager & PrzezMorze dla Biur Podróży.
+        </div>
+        <div class="d-flex align-items-center gap-3 small">
+            <span class="text-success fw-semibold"><i class='bx bx-shield-quarter'></i> Certyfikacja Superpilot Academy</span>
+            <a href="courses.php" class="text-secondary text-decoration-none">Programy Szkoleń</a>
+            <a href="../travelleader-mobile/profile.php" target="_blank" class="text-primary text-decoration-none">Aplikacja Mobilna Pilota</a>
+        </div>
+    </div>
+</footer>
+
+<div class="content-backdrop fade"></div>
+</div><!-- /.content-wrapper -->
+</div><!-- /.layout-page -->
+</div><!-- /.layout-container -->
+</div><!-- /.layout-wrapper -->
+
+<!-- Sneat Core JS -->
+<script src="<?= $basePath ?>/assets/vendor/libs/jquery/jquery.js"></script>
+<script src="<?= $basePath ?>/assets/vendor/libs/popper/popper.js"></script>
+<script src="<?= $basePath ?>/assets/vendor/js/bootstrap.js"></script>
+<script src="<?= $basePath ?>/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
+<script src="<?= $basePath ?>/assets/vendor/libs/hammer/hammer.js"></script>
+<script src="<?= $basePath ?>/assets/vendor/js/menu.js"></script>
+<script src="<?= $basePath ?>/assets/js/main.js"></script>
+
+<!-- Superpilot Custom JS -->
+<script src="assets/js/superpilot.js"></script>
+
+<!-- Magico Prototype Comments -->
+<?php if (!empty($enablePrototypeComments)): ?>
+    <script>
+        const MAGICO_BASE_URL = <?= json_encode($basePath); ?>;
+    </script>
+    <script src="<?= $basePath ?>/assets/js/comments.js"></script>
+<?php endif; ?>
+
+</body>
+</html>
diff --git a/prototype/superpilot-web/header.php b/prototype/superpilot-web/header.php
new file mode 100644
index 0000000..1a9614e
--- /dev/null
+++ b/prototype/superpilot-web/header.php
@@ -0,0 +1,115 @@
+<?php
+$basePath = '';
+if (isset($_SERVER['HTTP_HOST']) && ($_SERVER['HTTP_HOST'] === 'localhost' || $_SERVER['HTTP_HOST'] === '127.0.0.1')) {
+    $basePath = '/magico-prototype';
+}
+
+if (!isset($pageTitle)) {
+    $pageTitle = 'Superpilot — Baza Pilotów dla Biur Podróży';
+}
+if (!isset($enablePrototypeComments)) {
+    $enablePrototypeComments = true;
+}
+?>
+<!DOCTYPE html>
+<html lang="pl" class="light-style layout-menu-fixed" dir="ltr" data-theme="theme-default" data-assets-path="<?= $basePath ?>/assets/">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
+    <title><?= htmlspecialchars($pageTitle) ?></title>
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/x-icon" href="<?= $basePath ?>/assets/img/favicon/favicon.ico" />
+
+    <!-- Google Fonts: Public Sans -->
+    <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=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet" />
+
+    <!-- Icons & Core Sneat CSS -->
+    <link rel="stylesheet" href="<?= $basePath ?>/assets/vendor/fonts/boxicons.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
+    <link rel="stylesheet" href="<?= $basePath ?>/assets/vendor/css/core.css" />
+    <link rel="stylesheet" href="<?= $basePath ?>/assets/vendor/css/theme-default.css" />
+    <link rel="stylesheet" href="<?= $basePath ?>/assets/css/demo.css" />
+
+    <!-- Superpilot Dedicated Modern Stylesheet (Clean 2026 Design) -->
+    <link rel="stylesheet" href="assets/css/superpilot.css" />
+
+    <!-- Prototype Comments -->
+    <?php if (!empty($enablePrototypeComments)): ?>
+        <link rel="stylesheet" href="<?= $basePath ?>/assets/css/comments.css">
+    <?php endif; ?>
+
+    <!-- Helpers -->
+    <script src="<?= $basePath ?>/assets/vendor/js/helpers.js"></script>
+    <script src="<?= $basePath ?>/assets/js/config.js"></script>
+</head>
+<body>
+    <!-- Layout wrapper -->
+    <div class="layout-wrapper layout-navbar-full layout-horizontal layout-without-menu">
+        <div class="layout-container">
+
+            <!-- Navbar główny (Spokojny, lekki, profesjonalny) -->
+            <nav class="layout-navbar navbar navbar-expand-xl align-items-center bg-white" id="layout-navbar" style="position: sticky; top: 0; z-index: 1020; border-bottom: 1px solid var(--border-color);">
+                <div class="container-xxl d-flex align-items-center justify-content-between py-2">
+                    
+                    <!-- Brand & Subtitle -->
+                    <div class="d-flex align-items-center gap-3">
+                        <a href="index.php" class="brand-superpilot">
+                            <div class="logo-icon">
+                                <i class='bx bx-compass'></i>
+                            </div>
+                            <div class="d-flex flex-column">
+                                <span class="lh-1">Super<span style="color: var(--primary);">pilot</span></span>
+                                <small class="text-muted" style="font-size: 0.68rem; font-weight: 500;">Baza Pilotów dla Biur Podróży</small>
+                            </div>
+                        </a>
+                    </div>
+
+                    <!-- Prawa strona paska nawigacji: Zastępstwo SOS, Aplikacja Pilota, Biuro -->
+                    <div class="d-flex align-items-center gap-2 gap-md-3">
+                        
+                        <!-- Spokojny przycisk SOS -->
+                        <button type="button" class="btn-sos" onclick="openSosModal('Włochy')" title="Szybkie znalezienie pilota na cito">
+                            <span class="sos-dot"></span>
+                            <span>Dyżur SOS</span>
+                        </button>
+
+                        <!-- Przejście do aplikacji mobilnej pilota -->
+                        <a href="../travelleader-mobile/profile.php" target="_blank" class="btn btn-sm btn-light text-muted d-none d-md-inline-flex align-items-center gap-1 border" style="font-size: 0.78rem;" title="Podgląd z perspektywy pilota">
+                            <i class='bx bx-mobile-alt'></i>
+                            <span>Aplikacja Pilota</span>
+                            <i class='bx bx-link-external' style="font-size: 0.65rem;"></i>
+                        </a>
+
+                        <!-- Powrót do Travel Managera -->
+                        <a href="../travel/index.php" class="btn btn-sm btn-link text-muted d-none d-lg-inline-block text-decoration-none p-0" style="font-size: 0.78rem;">
+                            Travel Manager
+                        </a>
+
+                        <!-- Profil zalogowanego biura (Przejście do zapytań i zleceń) -->
+                        <a href="inquiries.php" class="d-flex align-items-center gap-2 ps-2 border-start text-decoration-none" title="Moje zlecenia i wysłane zapytania">
+                            <div class="position-relative">
+                                <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold" style="width: 36px; height: 36px; background: var(--primary-light); color: var(--primary); font-size: 0.85rem; border: 1px solid var(--primary-border); transition: all 0.15s ease;">
+                                    AL
+                                </div>
+                                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning text-dark border border-white" style="font-size: 0.6rem; padding: 2px 5px;" title="1 oczekujące zapytanie">
+                                    1
+                                </span>
+                            </div>
+                            <div class="d-none d-xl-block text-start lh-sm">
+                                <div class="fw-bold" style="font-size: 0.82rem; color: var(--dark-navy);">Biuro Almatur</div>
+                                <small class="text-muted" style="font-size: 0.7rem;">Zlecenia & zapytania &rarr;</small>
+                            </div>
+                        </a>
+
+                    </div>
+                </div>
+            </nav>
+            <!-- / Navbar -->
+
+            <!-- Layout container -->
+            <div class="layout-page" style="padding-top: 0px !important;">
+                <div class="content-wrapper">
+
diff --git a/prototype/superpilot-web/index.php b/prototype/superpilot-web/index.php
new file mode 100644
index 0000000..e46dbba
--- /dev/null
+++ b/prototype/superpilot-web/index.php
@@ -0,0 +1,904 @@
+<?php
+$pageTitle = 'Superpilot — Baza Pilotów Wycieczek (Katalog i Wyszukiwarka)';
+$enablePrototypeComments = true;
+include __DIR__ . '/header.php';
+?>
+
+<div class="container-xxl flex-grow-1 container-p-y" style="padding-top: 1.5rem !important;">
+
+    <!-- ================= GŁÓWNA BELKA WYSZUKIWARKI W STYLU PRACUJ.PL Z MULTISELECTEM KRAJÓW ================= -->
+    <div class="search-bar-pracuj">
+        
+        <!-- 1. Słowa kluczowe / Nazwisko -->
+        <div class="search-field-item">
+            <i class='bx bx-search field-icon'></i>
+            <div class="field-content">
+                <div class="field-label">Pilot / Specjalizacja / Słowo kluczowe</div>
+                <input type="text" id="mainSearchInput" placeholder="Np. Oskar Kaczmarek, Rzym, Trekking...">
+            </div>
+        </div>
+
+        <!-- 2. Kraj / Destynacje — MULTISELECT POPUP -->
+        <div class="search-field-item">
+            <i class='bx bx-globe field-icon'></i>
+            <div class="field-content dropdown">
+                <div class="field-label">Destynacje (Multiselect)</div>
+                <button type="button" class="multiselect-dest-trigger dropdown-toggle" id="destDropdownTrigger" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+                    <span class="trigger-text" id="destTriggerText">🇮🇹 Włochy</span>
+                    <i class='bx bx-chevron-down text-muted ms-1'></i>
+                </button>
+                
+                <div class="dropdown-menu multiselect-dropdown-menu shadow-lg" aria-labelledby="destDropdownTrigger">
+                    <div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom">
+                        <span class="small fw-bold text-navy">Wybierz obsługiwane kraje:</span>
+                        <button type="button" class="btn btn-sm btn-link p-0 text-muted text-decoration-none small" id="btnResetDestMultiselect" style="font-size: 0.72rem;">Wyczyść</button>
+                    </div>
+
+                    <label class="multiselect-item-row">
+                        <div class="d-flex align-items-center gap-2">
+                            <input type="checkbox" class="top-dest-checkbox" value="Włochy" checked>
+                            <span>🇮🇹 Włochy</span>
+                        </div>
+                        <span class="text-muted small">(24)</span>
+                    </label>
+
+                    <label class="multiselect-item-row">
+                        <div class="d-flex align-items-center gap-2">
+                            <input type="checkbox" class="top-dest-checkbox" value="Grecja">
+                            <span>🇬🇷 Grecja</span>
+                        </div>
+                        <span class="text-muted small">(18)</span>
+                    </label>
+
+                    <label class="multiselect-item-row">
+                        <div class="d-flex align-items-center gap-2">
+                            <input type="checkbox" class="top-dest-checkbox" value="Hiszpania">
+                            <span>🇪🇸 Hiszpania</span>
+                        </div>
+                        <span class="text-muted small">(16)</span>
+                    </label>
+
+                    <label class="multiselect-item-row">
+                        <div class="d-flex align-items-center gap-2">
+                            <input type="checkbox" class="top-dest-checkbox" value="Chorwacja">
+                            <span>🇭🇷 Chorwacja</span>
+                        </div>
+                        <span class="text-muted small">(12)</span>
+                    </label>
+
+                    <label class="multiselect-item-row">
+                        <div class="d-flex align-items-center gap-2">
+                            <input type="checkbox" class="top-dest-checkbox" value="Norwegia">
+                            <span>🇳🇴 Norwegia</span>
+                        </div>
+                        <span class="text-muted small">(9)</span>
+                    </label>
+
+                    <label class="multiselect-item-row">
+                        <div class="d-flex align-items-center gap-2">
+                            <input type="checkbox" class="top-dest-checkbox" value="Austria">
+                            <span>🇦🇹 Austria</span>
+                        </div>
+                        <span class="text-muted small">(7)</span>
+                    </label>
+
+                    <label class="multiselect-item-row">
+                        <div class="d-flex align-items-center gap-2">
+                            <input type="checkbox" class="top-dest-checkbox" value="Japonia">
+                            <span>🇯🇵 Japonia & Azja</span>
+                        </div>
+                        <span class="text-muted small">(5)</span>
+                    </label>
+
+                    <div class="pt-2 mt-2 border-top">
+                        <button type="button" class="btn btn-sm btn-primary w-100 fw-semibold" id="btnConfirmDestDropdown">
+                            Zastosuj wybrane kraje
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 3. Termin wycieczki (Dialog kalendarza) -->
+        <div class="search-field-item" data-bs-toggle="modal" data-bs-target="#dateRangeModal" style="cursor: pointer;">
+            <i class='bx bx-calendar field-icon text-primary'></i>
+            <div class="field-content">
+                <div class="field-label">Termin wycieczki (Kalendarz)</div>
+                <input type="text" id="selectedDateDisplay" value="16.09.2027 – 24.09.2027" readonly style="cursor: pointer;">
+            </div>
+            <i class='bx bx-chevron-down text-muted'></i>
+        </div>
+
+        <!-- 4. Przycisk Szukaj -->
+        <button type="button" class="btn-search-pracuj" id="btnExecuteSearch">
+            <i class='bx bx-search'></i> Szukaj
+        </button>
+
+    </div>
+
+    <!-- ================= GŁÓWNY UKŁAD 2-KOLUMNOWY ================= -->
+    <div class="row g-4">
+        
+        <!-- ================= LEWA KOLUMNA: SIDEBAR FILTRÓW ================= -->
+        <div class="col-lg-4 col-xl-3">
+            <div class="filters-sidebar">
+                
+                <div class="filter-sidebar-header">
+                    <h6 class="filter-sidebar-title">
+                        <i class='bx bx-filter-alt text-primary'></i> Filtry
+                    </h6>
+                    <button type="button" id="btnClearAllFilters" class="btn btn-sm btn-link text-muted p-0 text-decoration-none" style="font-size: 0.76rem;">
+                        Wyczyść filtry
+                    </button>
+                </div>
+
+                <!-- NOWY AKORDEON: Baza wypadowa pilota -->
+                <div class="filter-accordion-item">
+                    <div class="filter-accordion-header" data-bs-toggle="collapse" data-bs-target="#filterBaseCollapse">
+                        <span class="filter-accordion-title">
+                            <i class='bx bx-building-house'></i> Baza pilota
+                        </span>
+                        <i class='bx bx-chevron-down text-muted'></i>
+                    </div>
+                    <div class="collapse show filter-accordion-body" id="filterBaseCollapse">
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="base" value="warszawa">
+                                <span>Warszawa</span>
+                            </div>
+                            <span class="filter-count-badge">(48)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="base" value="kraków">
+                                <span>Kraków</span>
+                            </div>
+                            <span class="filter-count-badge">(26)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="base" value="katowice">
+                                <span>Katowice / Śląsk</span>
+                            </div>
+                            <span class="filter-count-badge">(22)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="base" value="poznań">
+                                <span>Poznań</span>
+                            </div>
+                            <span class="filter-count-badge">(15)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="base" value="wrocław">
+                                <span>Wrocław</span>
+                            </div>
+                            <span class="filter-count-badge">(14)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="base" value="gdańsk">
+                                <span>Gdańsk / Trójmiasto</span>
+                            </div>
+                            <span class="filter-count-badge">(12)</span>
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Akordeon 2: Specjalizacje -->
+                <div class="filter-accordion-item">
+                    <div class="filter-accordion-header" data-bs-toggle="collapse" data-bs-target="#filterSpecCollapse">
+                        <span class="filter-accordion-title">
+                            <i class='bx bx-category'></i> Specjalizacje
+                        </span>
+                        <i class='bx bx-chevron-down text-muted'></i>
+                    </div>
+                    <div class="collapse show filter-accordion-body" id="filterSpecCollapse">
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="spec" value="objazdówki">
+                                <span>Wycieczki objazdowe</span>
+                            </div>
+                            <span class="filter-count-badge">(38)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="spec" value="trekking">
+                                <span>Trekking & góry</span>
+                            </div>
+                            <span class="filter-count-badge">(14)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="spec" value="miejski">
+                                <span>Przewodnik miejski</span>
+                            </div>
+                            <span class="filter-count-badge">(21)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="spec" value="młodzież">
+                                <span>Grupy szkolne</span>
+                            </div>
+                            <span class="filter-count-badge">(19)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="spec" value="vip">
+                                <span>VIP & Incentive</span>
+                            </div>
+                            <span class="filter-count-badge">(11)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="spec" value="kulinaria">
+                                <span>Enoturystyka & kulinaria</span>
+                            </div>
+                            <span class="filter-count-badge">(8)</span>
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Akordeon 3: Języki obce -->
+                <div class="filter-accordion-item">
+                    <div class="filter-accordion-header" data-bs-toggle="collapse" data-bs-target="#filterLangCollapse">
+                        <span class="filter-accordion-title">
+                            <i class='bx bx-message-dots'></i> Języki obce
+                        </span>
+                        <i class='bx bx-chevron-down text-muted'></i>
+                    </div>
+                    <div class="collapse show filter-accordion-body" id="filterLangCollapse">
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="lang" value="Angielski">
+                                <span>Angielski (B2 / C1 / C2)</span>
+                            </div>
+                            <span class="filter-count-badge">(45)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="lang" value="Włoski">
+                                <span>Włoski (min. B2)</span>
+                            </div>
+                            <span class="filter-count-badge">(18)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="lang" value="Hiszpański">
+                                <span>Hiszpański (min. B2)</span>
+                            </div>
+                            <span class="filter-count-badge">(14)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="lang" value="Norweski">
+                                <span>Norweski (C1)</span>
+                            </div>
+                            <span class="filter-count-badge">(4)</span>
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Akordeon 4: Certyfikaty i Ranga -->
+                <div class="filter-accordion-item">
+                    <div class="filter-accordion-header" data-bs-toggle="collapse" data-bs-target="#filterCertCollapse">
+                        <span class="filter-accordion-title">
+                            <i class='bx bx-award'></i> Certyfikaty & Ranga
+                        </span>
+                        <i class='bx bx-chevron-down text-muted'></i>
+                    </div>
+                    <div class="collapse show filter-accordion-body" id="filterCertCollapse">
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="cert" value="verified">
+                                <span>Superpilot Academy</span>
+                            </div>
+                            <span class="filter-count-badge">(32)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="cert" value="kpp">
+                                <span>Ratownik KPP</span>
+                            </div>
+                            <span class="filter-count-badge">(16)</span>
+                        </label>
+                        <label class="filter-checkbox-row">
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="checkbox" class="filter-checkbox" data-type="cert" value="rating-48">
+                                <span>Ocena min. 4.8 ★</span>
+                            </div>
+                            <span class="filter-count-badge">(27)</span>
+                        </label>
+                    </div>
+                </div>
+
+                <div class="filter-sidebar-footer">
+                    <button type="button" class="btn-apply-filters" id="btnApplySidebarFilters">
+                        <i class='bx bx-check'></i> Pokaż pilotów (<span id="sidebarCountSpan">5</span>)
+                    </button>
+                </div>
+
+            </div>
+        </div>
+
+        <!-- ================= PRAWA KOLUMNA: KATALOG OFERT PILOTÓW ================= -->
+        <div class="col-lg-8 col-xl-9">
+            
+            <!-- Pasek aktywnych filtrów (Chips) -->
+            <div class="active-filters-bar" id="activeFiltersBar">
+                <span class="text-muted small me-1">Aktywne filtry:</span>
+                <span class="active-filter-chip" id="chipDestFilter">
+                    <i class='bx bx-globe text-primary'></i>
+                    <span id="chipDestText">Włochy</span>
+                    <i class='bx bx-x chip-remove' id="removeDestChip" title="Usuń filtr"></i>
+                </span>
+                <span class="active-filter-chip" id="chipDateFilter">
+                    <i class='bx bx-calendar text-primary'></i>
+                    <span id="chipDateText">16–24.09.2027</span>
+                    <i class='bx bx-x chip-remove' id="removeDateChip" title="Usuń filtr"></i>
+                </span>
+                <span class="active-filter-chip" id="chipBaseFilter" style="display: none;">
+                    <i class='bx bx-building-house text-primary'></i>
+                    <span id="chipBaseText">Warszawa</span>
+                    <i class='bx bx-x chip-remove' id="removeBaseChip" title="Usuń filtr"></i>
+                </span>
+            </div>
+
+            <!-- Belka podsumowania nad listą -->
+            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
+                <div>
+                    <span class="fw-bold text-navy" style="font-size: 1.05rem;">Dostępni piloci wycieczek</span>
+                    <span class="text-muted small ms-1">— <span id="offersCountText">5 ofert</span></span>
+                </div>
+
+                <div class="d-flex align-items-center gap-2">
+                    <span class="text-muted small">Sortuj:</span>
+                    <select class="form-select form-select-sm border" style="width: auto; font-size: 0.8rem; font-weight: 600;">
+                        <option selected>Dla Ciebie (Rekomendowani)</option>
+                        <option>Najwyższa ocena biur</option>
+                        <option>Staż pilotażu</option>
+                    </select>
+                </div>
+            </div>
+
+            <!-- Komunikat o braku ofert -->
+            <div id="noOffersAlert" class="alert alert-light border text-center p-4 my-4" style="display: none; border-radius: var(--radius-md);">
+                <i class='bx bx-search-alt fs-1 text-muted mb-2'></i>
+                <h6 class="fw-bold text-navy mb-1">Brak pilotów spełniających podane kryteria</h6>
+                <p class="text-muted small mb-3">Zmień wybrane destynacje, specjalizacje w lewym panelu lub zresetuj filtry.</p>
+                <button type="button" class="btn btn-sm btn-primary-calm" onclick="document.getElementById('btnClearAllFilters').click();">
+                    Wyczyść wszystkie filtry
+                </button>
+            </div>
+
+            <!-- LISTA POZIOMYCH KART PILOTÓW (UPORZĄDKOWANA, CZYSTA) -->
+            <div id="pilotOffersList">
+
+                <!-- ================= OFERTA 1: OSKAR KACZMAREK ================= -->
+                <div class="pilot-offer-card pilot-grid-item"
+                     data-name="Oskar Kaczmarek"
+                     data-base="warszawa"
+                     data-destinations="Włochy Grecja Hiszpania Chorwacja Norwegia Austria"
+                     data-languages="Polski Angielski Włoski"
+                     data-tags="objazdówki miejski rzym florencja młodzież vip kulinaria"
+                     data-rating="4.9"
+                     data-verified="1"
+                     data-kpp="1"
+                     data-dates-free="05-15-sep 25-30-sep październik-2027">
+                    
+                    <div class="pilot-offer-avatar">
+                        OK
+                        <div class="verified-badge-mini" title="Zweryfikowany przez Superpilot Academy">
+                            <i class='bx bx-check'></i>
+                        </div>
+                    </div>
+
+                    <div class="pilot-offer-content">
+                        
+                        <!-- Rząd 1: Imię + Rola + Gwiazdka i Ocena -->
+                        <div class="pilot-offer-header-row">
+                            <div>
+                                <h5 class="pilot-offer-name">
+                                    <a href="pilot-profile.php">Oskar Kaczmarek</a>
+                                </h5>
+                                <div class="pilot-offer-headline">
+                                    Licencjonowany Pilot Wycieczek & Przewodnik Miejski
+                                </div>
+                            </div>
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="pilot-rating-badge">
+                                    <i class='bx bxs-star'></i> 4.9 <span class="text-muted fw-normal">(18 opinii)</span>
+                                </div>
+                                <button type="button" class="btn-save-pilot" title="Zapisz do ulubionych" onclick="this.classList.toggle('saved');">
+                                    <i class='bx bx-star'></i>
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Rząd 2: Metadane logistyczne (Baza, Staż, Języki) -->
+                        <div class="pilot-offer-meta-row">
+                            <div class="meta-item">
+                                <i class='bx bx-map-pin text-muted'></i> Baza: <strong>Warszawa</strong>
+                            </div>
+                            <div class="meta-item">
+                                <i class='bx bx-time-five text-muted'></i> Staż: <strong>7 lat</strong>
+                            </div>
+                            <div class="meta-item">
+                                <i class='bx bx-conversation text-muted'></i> Języki: <strong>Włoski (B2), Angielski (C1)</strong>
+                            </div>
+                        </div>
+
+                        <!-- Rząd 3: Uporządkowane tagi -->
+                        <div class="pilot-tags-row">
+                            <span class="tech-tag primary-dest">🇮🇹 Włochy (Ekspert)</span>
+                            <span class="tech-tag primary-dest">🇬🇷 Grecja</span>
+                            <span class="tech-tag primary-dest">🇪🇸 Hiszpania</span>
+                            <span class="tech-tag">Objazdówki autokarowe</span>
+                            <span class="tech-tag">VIP Incentive</span>
+                        </div>
+
+                        <!-- Rząd 4: Zwięzłe Bio -->
+                        <div class="pilot-offer-bio">
+                            Pasjonat kultury śródziemnomorskiej z wykształceniem historycznym (UW). Od 2019 r. z sukcesami prowadzi wycieczki objazdowe autokarowe i lotnicze we Włoszech, Hiszpanii i Grecji. Wyróżnia go wysokie opanowanie w sytuacjach kryzysowych.
+                        </div>
+
+                        <!-- Rząd 5: Stopka karty -->
+                        <div class="pilot-offer-footer">
+                            <div class="d-flex align-items-center gap-2">
+                                <span class="pilot-academy-badge">
+                                    <i class='bx bx-award'></i> Superpilot Academy 2026
+                                </span>
+                            </div>
+
+                            <div class="d-flex align-items-center gap-2">
+                                <a href="pilot-profile.php" class="btn-offer-details">
+                                    Szczegóły profilu
+                                </a>
+                                <button type="button" class="btn-offer-book" onclick="openBookingModal('1', 'Oskar Kaczmarek', '16.09.2027 – 24.09.2027')">
+                                    <i class='bx bx-calendar-plus'></i> Zarezerwuj termin
+                                </button>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+
+                <!-- ================= OFERTA 2: ANNA LEWANDOWSKA ================= -->
+                <div class="pilot-offer-card pilot-grid-item"
+                     data-name="Anna Lewandowska"
+                     data-base="kraków"
+                     data-destinations="Norwegia Islandia Szwecja"
+                     data-languages="Polski Angielski Norweski"
+                     data-tags="trekking góry zorza polarna kameralne"
+                     data-rating="5.0"
+                     data-verified="1"
+                     data-kpp="1"
+                     data-dates-free="05-15-sep 16-24-sep październik-2027">
+                    
+                    <div class="pilot-offer-avatar" style="background: linear-gradient(135deg, #059669 0%, #34d399 100%);">
+                        AL
+                        <div class="verified-badge-mini">
+                            <i class='bx bx-check'></i>
+                        </div>
+                    </div>
+
+                    <div class="pilot-offer-content">
+                        <div class="pilot-offer-header-row">
+                            <div>
+                                <h5 class="pilot-offer-name">
+                                    <a href="pilot-profile.php?id=2">Anna Lewandowska</a>
+                                </h5>
+                                <div class="pilot-offer-headline">
+                                    Przewodnik Wysokogórski UIMLA & Pilot Północy
+                                </div>
+                            </div>
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="pilot-rating-badge">
+                                    <i class='bx bxs-star'></i> 5.0 <span class="text-muted fw-normal">(24 opinie)</span>
+                                </div>
+                                <button type="button" class="btn-save-pilot" title="Zapisz do ulubionych" onclick="this.classList.toggle('saved');">
+                                    <i class='bx bx-star'></i>
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="pilot-offer-meta-row">
+                            <div class="meta-item">
+                                <i class='bx bx-map-pin text-muted'></i> Baza: <strong>Kraków</strong>
+                            </div>
+                            <div class="meta-item">
+                                <i class='bx bx-time-five text-muted'></i> Staż: <strong>9 lat</strong>
+                            </div>
+                            <div class="meta-item">
+                                <i class='bx bx-conversation text-muted'></i> Języki: <strong>Norweski (C1), Angielski (C2)</strong>
+                            </div>
+                        </div>
+
+                        <div class="pilot-tags-row">
+                            <span class="tech-tag primary-dest">🇳🇴 Norwegia (Fiordy)</span>
+                            <span class="tech-tag primary-dest">🇮🇸 Islandia</span>
+                            <span class="tech-tag primary-dest">🇸🇪 Szwecja</span>
+                            <span class="tech-tag">Trekking & góry</span>
+                            <span class="tech-tag">Zorza polarna</span>
+                        </div>
+
+                        <div class="pilot-offer-bio">
+                            Specjalistka tras po Norwegii, Lofotach i lodowcach Islandii. Certyfikowana przewodniczka międzynarodowa UIMLA. Znakomita orientacja w logistyce promowej i trudnych warunkach pogodowych.
+                        </div>
+
+                        <div class="pilot-offer-footer">
+                            <div class="d-flex align-items-center gap-2">
+                                <span class="pilot-academy-badge">
+                                    <i class='bx bx-award'></i> Superpilot Academy 2026
+                                </span>
+                            </div>
+
+                            <div class="d-flex align-items-center gap-2">
+                                <a href="pilot-profile.php?id=2" class="btn-offer-details">
+                                    Szczegóły profilu
+                                </a>
+                                <button type="button" class="btn-offer-book" onclick="openBookingModal('2', 'Anna Lewandowska', '16.09.2027 – 24.09.2027')">
+                                    <i class='bx bx-calendar-plus'></i> Zarezerwuj termin
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- ================= OFERTA 3: MICHAŁ WIŚNIEWSKI ================= -->
+                <div class="pilot-offer-card pilot-grid-item"
+                     data-name="Michał Wiśniewski"
+                     data-base="katowice"
+                     data-destinations="Hiszpania Portugalia Austria"
+                     data-languages="Polski Hiszpański Angielski"
+                     data-tags="objazdówki narty młodzież autokar"
+                     data-rating="4.7"
+                     data-verified="0"
+                     data-kpp="0"
+                     data-dates-free="październik-2027">
+                    
+                    <div class="pilot-offer-avatar" style="background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%);">
+                        MW
+                    </div>
+
+                    <div class="pilot-offer-content">
+                        <div class="pilot-offer-header-row">
+                            <div>
+                                <h5 class="pilot-offer-name">
+                                    <a href="pilot-profile.php?id=3">Michał Wiśniewski</a>
+                                </h5>
+                                <div class="pilot-offer-headline">
+                                    Pilot Wycieczek Autokarowych & Instruktor Narciarstwa
+                                </div>
+                            </div>
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="pilot-rating-badge">
+                                    <i class='bx bxs-star'></i> 4.7 <span class="text-muted fw-normal">(11 opinii)</span>
+                                </div>
+                                <button type="button" class="btn-save-pilot" title="Zapisz do ulubionych" onclick="this.classList.toggle('saved');">
+                                    <i class='bx bx-star'></i>
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="pilot-offer-meta-row">
+                            <div class="meta-item">
+                                <i class='bx bx-map-pin text-muted'></i> Baza: <strong>Katowice</strong>
+                            </div>
+                            <div class="meta-item">
+                                <i class='bx bx-time-five text-muted'></i> Staż: <strong>5 lat</strong>
+                            </div>
+                            <div class="meta-item">
+                                <i class='bx bx-conversation text-muted'></i> Języki: <strong>Hiszpański (B2), Angielski (B2)</strong>
+                            </div>
+                        </div>
+
+                        <div class="pilot-tags-row">
+                            <span class="tech-tag primary-dest">🇪🇸 Hiszpania & Andaluzja</span>
+                            <span class="tech-tag primary-dest">🇵🇹 Portugalia</span>
+                            <span class="tech-tag primary-dest">🇦🇹 Austria</span>
+                            <span class="tech-tag">Objazdówki autokarowe</span>
+                            <span class="tech-tag">Narty & Alpy</span>
+                        </div>
+
+                        <div class="pilot-offer-bio">
+                            Dynamiczny pilot specjalizujący się w długich trasach autokarowych na Półwysep Iberyjski oraz zimowych wyjazdach narciarskich do Austrii i Włoch. Bardzo dobry kontakt z młodzieżą i grupami dorosłymi.
+                        </div>
+
+                        <div class="pilot-offer-footer">
+                            <div class="d-flex align-items-center gap-2">
+                                <span class="badge bg-light text-muted border small">
+                                    Instruktor SITN-PZN
+                                </span>
+                            </div>
+
+                            <div class="d-flex align-items-center gap-2">
+                                <a href="pilot-profile.php?id=3" class="btn-offer-details">
+                                    Szczegóły profilu
+                                </a>
+                                <button type="button" class="btn-offer-book" onclick="openBookingModal('3', 'Michał Wiśniewski', '05.10.2027 – 12.10.2027')">
+                                    <i class='bx bx-calendar-plus'></i> Zarezerwuj termin
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- ================= OFERTA 4: KATARZYNA ZIELIŃSKA ================= -->
+                <div class="pilot-offer-card pilot-grid-item"
+                     data-name="Katarzyna Zielińska"
+                     data-base="poznań wrocław"
+                     data-destinations="Chorwacja Włochy Grecja"
+                     data-languages="Polski Angielski Chorwacki Włoski"
+                     data-tags="młodzież grupy szkolne kpp pierwsza pomoc bałkany"
+                     data-rating="4.8"
+                     data-verified="1"
+                     data-kpp="1"
+                     data-dates-free="05-15-sep 16-24-sep październik-2027">
+                    
+                    <div class="pilot-offer-avatar" style="background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);">
+                        KZ
+                        <div class="verified-badge-mini">
+                            <i class='bx bx-check'></i>
+                        </div>
+                    </div>
+
+                    <div class="pilot-offer-content">
+                        <div class="pilot-offer-header-row">
+                            <div>
+                                <h5 class="pilot-offer-name">
+                                    <a href="pilot-profile.php?id=4">Katarzyna Zielińska</a>
+                                </h5>
+                                <div class="pilot-offer-headline">
+                                    Pilot Grup Szkolnych & Młodzieżowych • Ratownik KPP
+                                </div>
+                            </div>
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="pilot-rating-badge">
+                                    <i class='bx bxs-star'></i> 4.8 <span class="text-muted fw-normal">(15 opinii)</span>
+                                </div>
+                                <button type="button" class="btn-save-pilot" title="Zapisz do ulubionych" onclick="this.classList.toggle('saved');">
+                                    <i class='bx bx-star'></i>
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="pilot-offer-meta-row">
+                            <div class="meta-item">
+                                <i class='bx bx-map-pin text-muted'></i> Baza: <strong>Poznań / Wrocław</strong>
+                            </div>
+                            <div class="meta-item">
+                                <i class='bx bx-time-five text-muted'></i> Staż: <strong>6 lat</strong>
+                            </div>
+                            <div class="meta-item">
+                                <i class='bx bx-conversation text-muted'></i> Języki: <strong>Chorwacki (B2), Angielski (C1)</strong>
+                            </div>
+                        </div>
+
+                        <div class="pilot-tags-row">
+                            <span class="tech-tag primary-dest">🇭🇷 Chorwacja</span>
+                            <span class="tech-tag primary-dest">🇮🇹 Włochy Północne</span>
+                            <span class="tech-tag primary-dest">🇬🇷 Grecja</span>
+                            <span class="tech-tag">Grupy szkolne</span>
+                            <span class="tech-tag">Kwalifikowana Pierwsza Pomoc</span>
+                        </div>
+
+                        <div class="pilot-offer-bio">
+                            Pedagog z wieloletnim doświadczeniem w pilotowaniu wycieczek szkolnych i kolonii zagranicznych. Uprawnienia Kwalifikowanej Pierwszej Pomocy. Doskonała komunikacja z kierowcami autokarów i nauczycielami.
+                        </div>
+
+                        <div class="pilot-offer-footer">
+                            <div class="d-flex align-items-center gap-2">
+                                <span class="pilot-academy-badge">
+                                    <i class='bx bx-award'></i> Superpilot Academy 2026
+                                </span>
+                            </div>
+
+                            <div class="d-flex align-items-center gap-2">
+                                <a href="pilot-profile.php?id=4" class="btn-offer-details">
+                                    Szczegóły profilu
+                                </a>
+                                <button type="button" class="btn-offer-book" onclick="openBookingModal('4', 'Katarzyna Zielińska', '16.09.2027 – 24.09.2027')">
+                                    <i class='bx bx-calendar-plus'></i> Zarezerwuj termin
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- ================= OFERTA 5: PAWEŁ DĄBROWSKI ================= -->
+                <div class="pilot-offer-card pilot-grid-item"
+                     data-name="Paweł Dąbrowski"
+                     data-base="warszawa"
+                     data-destinations="Japonia Azja"
+                     data-languages="Polski Angielski Japoński"
+                     data-tags="vip incentive egzotyka korporacje kulinaria"
+                     data-rating="4.9"
+                     data-verified="1"
+                     data-kpp="0"
+                     data-dates-free="październik-2027">
+                    
+                    <div class="pilot-offer-avatar" style="background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);">
+                        PD
+                        <div class="verified-badge-mini">
+                            <i class='bx bx-check'></i>
+                        </div>
+                    </div>
+
+                    <div class="pilot-offer-content">
+                        <div class="pilot-offer-header-row">
+                            <div>
+                                <h5 class="pilot-offer-name">
+                                    <a href="pilot-profile.php?id=5">Paweł Dąbrowski</a>
+                                </h5>
+                                <div class="pilot-offer-headline">
+                                    Ekspert Wyjazdów Dalekobieżnych & VIP Incentive (Japonia)
+                                </div>
+                            </div>
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="pilot-rating-badge">
+                                    <i class='bx bxs-star'></i> 4.9 <span class="text-muted fw-normal">(30 opinii)</span>
+                                </div>
+                                <button type="button" class="btn-save-pilot" title="Zapisz do ulubionych" onclick="this.classList.toggle('saved');">
+                                    <i class='bx bx-star'></i>
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="pilot-offer-meta-row">
+                            <div class="meta-item">
+                                <i class='bx bx-map-pin text-muted'></i> Baza: <strong>Warszawa</strong>
+                            </div>
+                            <div class="meta-item">
+                                <i class='bx bx-time-five text-muted'></i> Staż: <strong>11 lat</strong>
+                            </div>
+                            <div class="meta-item">
+                                <i class='bx bx-conversation text-muted'></i> Języki: <strong>Japoński (B2), Angielski (C2)</strong>
+                            </div>
+                        </div>
+
+                        <div class="pilot-tags-row">
+                            <span class="tech-tag primary-dest">🇯🇵 Japonia</span>
+                            <span class="tech-tag primary-dest">🇹🇭 Tajlandia</span>
+                            <span class="tech-tag primary-dest">🇺🇸 USA</span>
+                            <span class="tech-tag">VIP Incentive</span>
+                            <span class="tech-tag">Wyjazdy firmowe</span>
+                        </div>
+
+                        <div class="pilot-offer-bio">
+                            Dyrektor operacyjny i pilot z 11-letnim doświadczeniem w wyjazdach incentive dla zarządów firm i grup VIP. Biegle posługuje się językiem japońskim i angielskim. Pełna znajomość protokołu biznesowego.
+                        </div>
+
+                        <div class="pilot-offer-footer">
+                            <div class="d-flex align-items-center gap-2">
+                                <span class="pilot-academy-badge">
+                                    <i class='bx bx-award'></i> Superpilot Academy 2026
+                                </span>
+                            </div>
+
+                            <div class="d-flex align-items-center gap-2">
+                                <a href="pilot-profile.php?id=5" class="btn-offer-details">
+                                    Szczegóły profilu
+                                </a>
+                                <button type="button" class="btn-offer-book" onclick="openBookingModal('5', 'Paweł Dąbrowski', '10.10.2027 – 24.10.2027')">
+                                    <i class='bx bx-calendar-plus'></i> Zarezerwuj termin
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div><!-- /#pilotOffersList -->
+
+        </div><!-- /.col-lg-8 -->
+
+    </div><!-- /.row -->
+
+</div><!-- /.container-xxl -->
+
+<!-- ================= MODAL KALENDARZA: WYBÓR ZAKRESU DAT WYCIECZKI ================= -->
+<div class="modal fade date-picker-modal" id="dateRangeModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" style="max-width: 480px;">
+        <div class="modal-content">
+            
+            <div class="modal-header border-bottom py-3">
+                <div class="d-flex align-items-center gap-2">
+                    <div class="rounded-circle d-flex align-items-center justify-content-center bg-primary-subtle text-primary" style="width: 36px; height: 36px;">
+                        <i class='bx bx-calendar fs-5'></i>
+                    </div>
+                    <div>
+                        <h6 class="modal-title fw-bold text-navy mb-0">Wybierz termin wycieczki</h6>
+                        <small class="text-muted" style="font-size: 0.74rem;">Sprawdź wolne okienka w grafikach pilotów</small>
+                    </div>
+                </div>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+            </div>
+
+            <div class="modal-body p-3">
+                
+                <div class="date-quick-presets">
+                    <span class="preset-chip active" data-preset="16-24-sep-2027">16 – 24 września 2027 (Wycieczka #12)</span>
+                    <span class="preset-chip" data-preset="05-15-sep-2027">05 – 15 września 2027 (Wolne okienko)</span>
+                    <span class="preset-chip" data-preset="październik-2027">Październik 2027</span>
+                    <span class="preset-chip" data-preset="all">Dowolny termin</span>
+                </div>
+
+                <div class="p-2 border rounded-3 bg-light">
+                    <div class="d-flex justify-content-between align-items-center mb-2 px-1">
+                        <button class="btn btn-sm btn-white p-1 rounded-circle border"><i class='bx bx-chevron-left'></i></button>
+                        <strong class="text-navy" style="font-size: 0.88rem;">Wrzesień 2027</strong>
+                        <button class="btn btn-sm btn-white p-1 rounded-circle border"><i class='bx bx-chevron-right'></i></button>
+                    </div>
+
+                    <div class="date-picker-grid">
+                        <div class="date-picker-day-head">Pn</div>
+                        <div class="date-picker-day-head">Wt</div>
+                        <div class="date-picker-day-head">Śr</div>
+                        <div class="date-picker-day-head">Cz</div>
+                        <div class="date-picker-day-head">Pt</div>
+                        <div class="date-picker-day-head">Sb</div>
+                        <div class="date-picker-day-head">Nd</div>
+
+                        <div class="date-picker-cell other-month">30</div>
+                        <div class="date-picker-cell other-month">31</div>
+                        <div class="date-picker-cell">1</div>
+                        <div class="date-picker-cell">2</div>
+                        <div class="date-picker-cell">3</div>
+                        <div class="date-picker-cell">4</div>
+                        <div class="date-picker-cell">5</div>
+
+                        <div class="date-picker-cell">6</div>
+                        <div class="date-picker-cell">7</div>
+                        <div class="date-picker-cell">8</div>
+                        <div class="date-picker-cell">9</div>
+                        <div class="date-picker-cell">10</div>
+                        <div class="date-picker-cell">11</div>
+                        <div class="date-picker-cell">12</div>
+
+                        <div class="date-picker-cell">13</div>
+                        <div class="date-picker-cell">14</div>
+                        <div class="date-picker-cell">15</div>
+                        <div class="date-picker-cell range-start" data-day="16">16</div>
+                        <div class="date-picker-cell selected-range" data-day="17">17</div>
+                        <div class="date-picker-cell selected-range" data-day="18">18</div>
+                        <div class="date-picker-cell selected-range" data-day="19">19</div>
+
+                        <div class="date-picker-cell selected-range" data-day="20">20</div>
+                        <div class="date-picker-cell selected-range" data-day="21">21</div>
+                        <div class="date-picker-cell selected-range" data-day="22">22</div>
+                        <div class="date-picker-cell selected-range" data-day="23">23</div>
+                        <div class="date-picker-cell range-end" data-day="24">24</div>
+                        <div class="date-picker-cell">25</div>
+                        <div class="date-picker-cell">26</div>
+
+                        <div class="date-picker-cell">27</div>
+                        <div class="date-picker-cell">28</div>
+                        <div class="date-picker-cell">29</div>
+                        <div class="date-picker-cell">30</div>
+                        <div class="date-picker-cell other-month">1</div>
+                        <div class="date-picker-cell other-month">2</div>
+                        <div class="date-picker-cell other-month">3</div>
+                    </div>
+                </div>
+
+                <div class="mt-3 p-2 rounded-2 bg-white border text-center small text-muted">
+                    Wybrany termin: <strong id="modalSelectedDateText" class="text-primary">16.09.2027 – 24.09.2027 (9 dni)</strong>
+                </div>
+
+            </div>
+
+            <div class="modal-footer border-top py-2 px-3 justify-content-between">
+                <button type="button" class="btn btn-sm btn-link text-muted text-decoration-none" id="btnResetDateDialog">
+                    Wyczyść termin
+                </button>
+                <button type="button" class="btn btn-sm btn-primary-calm" id="btnApplyDateDialog" data-bs-dismiss="modal">
+                    Zastosuj termin wycieczki
+                </button>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+<?php include __DIR__ . '/footer.php'; ?>
diff --git a/prototype/superpilot-web/inquiries.php b/prototype/superpilot-web/inquiries.php
new file mode 100644
index 0000000..a388e32
--- /dev/null
+++ b/prototype/superpilot-web/inquiries.php
@@ -0,0 +1,331 @@
+<?php
+$pageTitle = 'Superpilot — Moje Zlecenia i Zapytania Ofertowe';
+$enablePrototypeComments = true;
+include __DIR__ . '/header.php';
+?>
+
+<div class="container-xxl flex-grow-1 container-p-y" style="padding-top: 1.25rem !important;">
+
+    <!-- Dyskretny powrót do katalogu -->
+    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
+        <a href="index.php" class="text-muted text-decoration-none small d-inline-flex align-items-center gap-1">
+            <i class='bx bx-arrow-back'></i> Wróć do katalogu pilotów
+        </a>
+
+        <div class="d-flex align-items-center gap-2">
+            <button type="button" class="btn-sos" onclick="openSosModal('Włochy')" title="Pilne zastępstwo SOS">
+                <span class="sos-dot"></span>
+                <span>Dyżur SOS</span>
+            </button>
+            <button type="button" class="btn btn-primary btn-sm px-3 fw-semibold d-inline-flex align-items-center gap-1" style="font-size: 0.8rem; border-radius: var(--radius-sm);" onclick="openBookingModal('1', 'Oskar Kaczmarek', '16.09.2027 - 24.09.2027')">
+                <i class='bx bx-plus'></i> Nowe zapytanie o termin
+            </button>
+        </div>
+    </div>
+
+    <!-- Nagłówek widoku -->
+    <div class="mb-4">
+        <h3 class="fw-bold text-navy mb-1" style="font-size: 1.45rem;">Moje Zlecenia & Wysłane Zapytania</h3>
+        <p class="text-muted small mb-0">
+            Monitoring statusu obsady tras biura Almatur w aplikacji mobilnej pilotów (<code>TravelLeader Mobile</code>) oraz umowy.
+        </p>
+    </div>
+
+    <!-- Pasek 4 podsumowań (Spójny z profile-stat-box) -->
+    <div class="row g-3 mb-4">
+        <div class="col-lg-3 col-sm-6">
+            <div class="profile-stat-box">
+                <div class="stat-val">4</div>
+                <div class="stat-lbl">Wszystkie zlecenia w historii</div>
+            </div>
+        </div>
+        <div class="col-lg-3 col-sm-6">
+            <div class="profile-stat-box">
+                <div class="stat-val text-warning">1</div>
+                <div class="stat-lbl">Oczekuje na akceptację w mobile</div>
+            </div>
+        </div>
+        <div class="col-lg-3 col-sm-6">
+            <div class="profile-stat-box">
+                <div class="stat-val text-success">2</div>
+                <div class="stat-lbl">Zaakceptowane & obsadzone</div>
+            </div>
+        </div>
+        <div class="col-lg-3 col-sm-6">
+            <div class="profile-stat-box">
+                <div class="stat-val" style="color: var(--primary);">1</div>
+                <div class="stat-lbl">Zrealizowana i oceniona</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Główna karta tabeli zleceń -->
+    <div class="profile-section-card">
+        
+        <!-- Nagłówek tabeli z filtrami -->
+        <div class="profile-section-header flex-wrap gap-2">
+            <div class="d-flex align-items-center gap-2">
+                <i class='bx bx-list-check fs-5 text-primary'></i>
+                <h5 class="profile-section-title mb-0">Lista Zapytań Ofertowych Biura Podróży</h5>
+            </div>
+
+            <!-- Filtry statusów (Pastylki) -->
+            <div class="d-flex gap-1 flex-wrap" id="inquiryStatusFilters">
+                <button type="button" class="btn btn-sm btn-primary filter-tab active" data-filter="all" style="font-size: 0.76rem;">
+                    Wszystkie (4)
+                </button>
+                <button type="button" class="btn btn-sm btn-light border filter-tab" data-filter="pending" style="font-size: 0.76rem;">
+                    Oczekujące (1)
+                </button>
+                <button type="button" class="btn btn-sm btn-light border filter-tab" data-filter="confirmed" style="font-size: 0.76rem;">
+                    Zaakceptowane (2)
+                </button>
+                <button type="button" class="btn btn-sm btn-light border filter-tab" data-filter="completed" style="font-size: 0.76rem;">
+                    Zrealizowane (1)
+                </button>
+            </div>
+        </div>
+
+        <div class="table-responsive text-nowrap">
+            <table class="table table-hover align-middle mb-0">
+                <thead class="bg-light text-muted" style="font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em;">
+                    <tr>
+                        <th style="padding: 12px 18px;">Wycieczka & Termin</th>
+                        <th>Pilot</th>
+                        <th>Stawka dzienna</th>
+                        <th>Status w aplikacji pilota</th>
+                        <th>Data wysłania</th>
+                        <th class="text-end" style="padding: 12px 18px;">Akcje</th>
+                    </tr>
+                </thead>
+                <tbody style="font-size: 0.85rem;" id="inquiriesTableBody">
+                    
+                    <!-- Pozycja 1: Wycieczka #15 (Oskar Kaczmarek - oczekuje) -->
+                    <tr class="inquiry-row" data-status="pending">
+                        <td style="padding: 14px 18px;">
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="rounded-2 d-flex align-items-center justify-content-center bg-warning-subtle text-warning fw-bold" style="width: 32px; height: 32px; font-size: 0.8rem; flex-shrink: 0;">
+                                    #15
+                                </div>
+                                <div>
+                                    <div class="fw-bold text-navy">Wycieczka #15: Magia Toskanii i Rzym</div>
+                                    <small class="text-muted"><i class='bx bx-calendar'></i> 05.10.2027 – 12.10.2027 (8 dni)</small>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="rounded-circle d-flex align-items-center justify-content-center text-white fw-bold" style="width: 32px; height: 32px; background: linear-gradient(135deg, var(--primary) 0%, #767bf7 100%); font-size: 0.78rem; flex-shrink: 0;">
+                                    OK
+                                </div>
+                                <div>
+                                    <a href="pilot-profile.php" class="fw-bold text-navy text-decoration-none">Oskar Kaczmarek</a>
+                                    <small class="text-muted d-block" style="font-size: 0.72rem;">★ 4.9 • Warszawa</small>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <strong class="text-navy">550 PLN</strong> <small class="text-muted">/ dzień netto</small>
+                            <div class="text-muted small" style="font-size: 0.7rem;">Suma: 4 400 PLN</div>
+                        </td>
+                        <td>
+                            <span class="badge bg-warning-subtle text-warning fw-bold px-3 py-1 rounded-pill d-inline-flex align-items-center gap-1" style="font-size: 0.74rem;">
+                                <i class='bx bx-time-five'></i> Oczekuje na akceptację
+                            </span>
+                            <small class="text-muted d-block mt-1" style="font-size: 0.7rem;">Powiadomienie PUSH doręczone (18h na odpowiedź)</small>
+                        </td>
+                        <td>
+                            <span class="text-muted small">Dziś, 09:15</span>
+                        </td>
+                        <td class="text-end" style="padding: 14px 18px;">
+                            <div class="d-flex align-items-center justify-content-end gap-1">
+                                <button type="button" class="btn btn-sm btn-outline-primary" style="font-size: 0.76rem;" onclick="showToastNotification('Przypomnienie PUSH wysłane!', 'Wysłano ponowny alert na telefon pilota Oskara Kaczmarka.');">
+                                    <i class='bx bx-bell'></i> Przypomnij
+                                </button>
+                                <a href="pilot-profile.php" class="btn btn-sm btn-light border text-muted" style="font-size: 0.76rem;" title="Profil pilota">
+                                    Profil
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+
+                    <!-- Pozycja 2: Wycieczka #12 (Oskar Kaczmarek - potwierdzona) -->
+                    <tr class="inquiry-row" data-status="confirmed">
+                        <td style="padding: 14px 18px;">
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="rounded-2 d-flex align-items-center justify-content-center bg-primary-subtle text-primary fw-bold" style="width: 32px; height: 32px; font-size: 0.8rem; flex-shrink: 0;">
+                                    #12
+                                </div>
+                                <div>
+                                    <div class="fw-bold text-navy">Wycieczka #12: Klasyczne Włochy (oskar prod)</div>
+                                    <small class="text-muted"><i class='bx bx-calendar'></i> 16.09.2027 – 24.09.2027 (9 dni)</small>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="rounded-circle d-flex align-items-center justify-content-center text-white fw-bold" style="width: 32px; height: 32px; background: linear-gradient(135deg, var(--primary) 0%, #767bf7 100%); font-size: 0.78rem; flex-shrink: 0;">
+                                    OK
+                                </div>
+                                <div>
+                                    <a href="pilot-profile.php" class="fw-bold text-navy text-decoration-none">Oskar Kaczmarek</a>
+                                    <small class="text-muted d-block" style="font-size: 0.72rem;">★ 4.9 • Warszawa</small>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <strong class="text-navy">550 PLN</strong> <small class="text-muted">/ dzień netto</small>
+                            <div class="text-muted small" style="font-size: 0.7rem;">Suma: 4 950 PLN</div>
+                        </td>
+                        <td>
+                            <span class="badge bg-success-subtle text-success fw-bold px-3 py-1 rounded-pill d-inline-flex align-items-center gap-1" style="font-size: 0.74rem;">
+                                <i class='bx bx-check-circle'></i> Zaakceptowane przez pilota
+                            </span>
+                            <small class="text-muted d-block mt-1" style="font-size: 0.7rem;">Potwierdzone w TravelLeader Mobile</small>
+                        </td>
+                        <td>
+                            <span class="text-muted small">Wczoraj, 14:22</span>
+                        </td>
+                        <td class="text-end" style="padding: 14px 18px;">
+                            <div class="d-flex align-items-center justify-content-end gap-1">
+                                <button type="button" class="btn btn-sm btn-light border text-muted" style="font-size: 0.76rem;" onclick="alert('Generowanie umowy zlecenia dla pilota Oskara Kaczmarka (Klasyczne Włochy)...');">
+                                    <i class='bx bx-file'></i> Umowa
+                                </button>
+                                <a href="pilot-profile.php" class="btn btn-sm btn-light border text-muted" style="font-size: 0.76rem;">
+                                    Profil
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+
+                    <!-- Pozycja 3: Norwegia (Anna Lewandowska - potwierdzona) -->
+                    <tr class="inquiry-row" data-status="confirmed">
+                        <td style="padding: 14px 18px;">
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="rounded-2 d-flex align-items-center justify-content-center bg-info-subtle text-info fw-bold" style="width: 32px; height: 32px; font-size: 0.8rem; flex-shrink: 0;">
+                                    #18
+                                </div>
+                                <div>
+                                    <div class="fw-bold text-navy">Wycieczka #18: Fiordy Norwegii & Bergen</div>
+                                    <small class="text-muted"><i class='bx bx-calendar'></i> 12.08.2027 – 19.08.2027 (8 dni)</small>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="rounded-circle d-flex align-items-center justify-content-center text-white fw-bold" style="width: 32px; height: 32px; background: linear-gradient(135deg, #059669, #10b981); font-size: 0.78rem; flex-shrink: 0;">
+                                    AL
+                                </div>
+                                <div>
+                                    <span class="fw-bold text-navy">Anna Lewandowska</span>
+                                    <small class="text-muted d-block" style="font-size: 0.72rem;">★ 5.0 • Kraków</small>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <strong class="text-navy">650 PLN</strong> <small class="text-muted">/ dzień netto</small>
+                            <div class="text-muted small" style="font-size: 0.7rem;">Suma: 5 200 PLN</div>
+                        </td>
+                        <td>
+                            <span class="badge bg-success-subtle text-success fw-bold px-3 py-1 rounded-pill d-inline-flex align-items-center gap-1" style="font-size: 0.74rem;">
+                                <i class='bx bx-check-circle'></i> Zaakceptowane przez pilota
+                            </span>
+                            <small class="text-muted d-block mt-1" style="font-size: 0.7rem;">Grafik obsadzony w 100%</small>
+                        </td>
+                        <td>
+                            <span class="text-muted small">3 dni temu</span>
+                        </td>
+                        <td class="text-end" style="padding: 14px 18px;">
+                            <div class="d-flex align-items-center justify-content-end gap-1">
+                                <button type="button" class="btn btn-sm btn-light border text-muted" style="font-size: 0.76rem;" onclick="alert('Generowanie umowy zlecenia dla pilotki Anny Lewandowskiej...');">
+                                    <i class='bx bx-file'></i> Umowa
+                                </button>
+                                <a href="pilot-profile.php?id=2" class="btn btn-sm btn-light border text-muted" style="font-size: 0.76rem;">
+                                    Profil
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+
+                    <!-- Pozycja 4: Wycieczka zrealizowana (Do oceny / Zrecenzowana) -->
+                    <tr class="inquiry-row" data-status="completed">
+                        <td style="padding: 14px 18px;">
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="rounded-2 d-flex align-items-center justify-content-center bg-secondary-subtle text-secondary fw-bold" style="width: 32px; height: 32px; font-size: 0.8rem; flex-shrink: 0;">
+                                    #8
+                                </div>
+                                <div>
+                                    <div class="fw-bold text-navy">Wycieczka #8: Klasyczne Włochy (Maj 2026)</div>
+                                    <small class="text-muted"><i class='bx bx-calendar'></i> Zrealizowana pomyślnie</small>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="d-flex align-items-center gap-2">
+                                <div class="rounded-circle d-flex align-items-center justify-content-center text-white fw-bold" style="width: 32px; height: 32px; background: linear-gradient(135deg, var(--primary) 0%, #767bf7 100%); font-size: 0.78rem; flex-shrink: 0;">
+                                    OK
+                                </div>
+                                <div>
+                                    <a href="pilot-profile.php" class="fw-bold text-navy text-decoration-none">Oskar Kaczmarek</a>
+                                    <small class="text-muted d-block" style="font-size: 0.72rem;">★ 4.9 • Warszawa</small>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <strong class="text-navy">500 PLN</strong> <small class="text-muted">/ dzień netto</small>
+                            <div class="text-success small" style="font-size: 0.7rem;">Rozliczona i opłacona</div>
+                        </td>
+                        <td>
+                            <span class="badge bg-primary-subtle text-primary fw-bold px-3 py-1 rounded-pill d-inline-flex align-items-center gap-1" style="font-size: 0.74rem;">
+                                <i class='bx bxs-star text-warning'></i> Wystawiono referencję (5.0 ★)
+                            </span>
+                            <small class="text-muted d-block mt-1" style="font-size: 0.7rem;">Pilot dodał oficjalną odpowiedź</small>
+                        </td>
+                        <td>
+                            <span class="text-muted small">Maj 2026</span>
+                        </td>
+                        <td class="text-end" style="padding: 14px 18px;">
+                            <a href="pilot-profile.php#opinie" class="btn btn-sm btn-outline-primary" style="font-size: 0.76rem;">
+                                Zobacz opinię &rarr;
+                            </a>
+                        </td>
+                    </tr>
+
+                </tbody>
+            </table>
+        </div>
+
+    </div>
+
+</div><!-- /.container-xxl -->
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const filterButtons = document.querySelectorAll('#inquiryStatusFilters .filter-tab');
+    const rows = document.querySelectorAll('.inquiry-row');
+
+    filterButtons.forEach(btn => {
+        btn.addEventListener('click', function() {
+            filterButtons.forEach(b => {
+                b.classList.remove('btn-primary', 'active');
+                b.classList.add('btn-light', 'border');
+            });
+            this.classList.remove('btn-light', 'border');
+            this.classList.add('btn-primary', 'active');
+
+            const filter = this.getAttribute('data-filter');
+
+            rows.forEach(row => {
+                const status = row.getAttribute('data-status');
+                if (filter === 'all' || status === filter) {
+                    row.style.display = '';
+                } else {
+                    row.style.display = 'none';
+                }
+            });
+        });
+    });
+});
+</script>
+
+<?php include __DIR__ . '/footer.php'; ?>
diff --git a/prototype/superpilot-web/menu.php b/prototype/superpilot-web/menu.php
new file mode 100644
index 0000000..0598995
--- /dev/null
+++ b/prototype/superpilot-web/menu.php
@@ -0,0 +1,43 @@
+<?php
+$currentPage = basename($_SERVER['PHP_SELF']);
+?>
+<aside id="layout-menu" class="layout-menu-horizontal menu-horizontal menu bg-white flex-grow-0 border-bottom" style="position: relative; top: 0; padding-top: 0; z-index: 1010; border-color: var(--border-color) !important;">
+    <div class="container-xxl d-flex h-100">
+        <ul class="menu-inner py-1">
+            
+            <!-- Główny katalog -->
+            <li class="menu-item <?= ($currentPage === 'index.php') ? 'active' : '' ?>">
+                <a href="index.php" class="menu-link">
+                    <i class="menu-icon tf-icons bx bx-search"></i>
+                    <div data-i18n="Baza Pilotów">Katalog Pilotów</div>
+                </a>
+            </li>
+
+            <!-- Profil pilota -->
+            <li class="menu-item <?= ($currentPage === 'pilot-profile.php' || $currentPage === 'pilot-reviews.php') ? 'active' : '' ?>">
+                <a href="pilot-profile.php" class="menu-link">
+                    <i class="menu-icon tf-icons bx bx-user"></i>
+                    <div data-i18n="Profil Pilota">Profil: Oskar Kaczmarek</div>
+                </a>
+            </li>
+
+            <!-- Moje Zapytania i Rezerwacje -->
+            <li class="menu-item <?= ($currentPage === 'inquiries.php') ? 'active' : '' ?>">
+                <a href="inquiries.php" class="menu-link">
+                    <i class="menu-icon tf-icons bx bx-paper-plane"></i>
+                    <div data-i18n="Zapytania">Zapytania & Rezerwacje</div>
+                    <span class="badge rounded-pill bg-light text-primary border ms-2" style="font-size: 0.68rem;">3 aktywne</span>
+                </a>
+            </li>
+
+            <!-- Szkolenia i certyfikaty Superpilot Academy -->
+            <li class="menu-item <?= ($currentPage === 'courses.php') ? 'active' : '' ?>">
+                <a href="courses.php" class="menu-link">
+                    <i class="menu-icon tf-icons bx bx-award"></i>
+                    <div data-i18n="Szkolenia">Szkolenia & Certyfikaty</div>
+                </a>
+            </li>
+
+        </ul>
+    </div>
+</aside>
diff --git a/prototype/superpilot-web/pilot-profile.php b/prototype/superpilot-web/pilot-profile.php
new file mode 100644
index 0000000..67e76ac
--- /dev/null
+++ b/prototype/superpilot-web/pilot-profile.php
@@ -0,0 +1,717 @@
+<?php
+$pageTitle = 'Superpilot - Profil Pilota: Oskar Kaczmarek';
+$enablePrototypeComments = true;
+include __DIR__ . '/header.php';
+
+// Dane Oskara Kaczmarka w 100% spójne z aplikacją mobilną travelleader-mobile
+$startYear = 2019;
+$currentYear = (int)date('Y');
+$experienceYears = max(1, $currentYear - $startYear);
+?>
+
+<div class="container-xxl flex-grow-1 container-p-y" style="padding-top: 1.25rem !important;">
+
+    <!-- Dyskretny powrót do listy -->
+    <div class="mb-3">
+        <a href="index.php" class="text-muted text-decoration-none small d-inline-flex align-items-center gap-1">
+            <i class='bx bx-arrow-back'></i> Wróć do listy pilotów
+        </a>
+    </div>
+
+    <!-- Główny Hero Profilu (Spokojny, uporządkowany design 2026) -->
+    <div class="profile-desktop-hero">
+        <div class="profile-hero-top">
+            
+            <!-- Lewa strona Hero: Awatar, dane, ranga -->
+            <div class="d-flex align-items-start gap-4">
+                <div class="profile-avatar-large">
+                    OK
+                    <div class="large-verified-badge" title="Zweryfikowany profil w Superpilot Academy">
+                        <i class='bx bx-check'></i>
+                    </div>
+                </div>
+
+                <div>
+                    <div class="d-flex align-items-center gap-2 mb-1 flex-wrap">
+                        <h2 class="profile-name">Oskar Kaczmarek</h2>
+                        <span class="profile-badge-available">
+                            <span class="status-dot"></span>
+                            Dostępny dla biur
+                        </span>
+                        <span class="pilot-academy-badge">
+                            <i class='bx bx-check-shield'></i> Superpilot Academy 2026
+                        </span>
+                    </div>
+
+                    <div class="text-muted mb-2" style="font-size: 0.88rem;">
+                        <i class='bx bx-compass text-primary'></i> Pilot Wycieczek & Przewodnik
+                    </div>
+
+                    <!-- Pasek kluczowych metadanych (Spójny z kartami index.php) -->
+                    <div class="profile-meta-row">
+                        <a href="#opinie" class="profile-meta-rating">
+                            <i class='bx bxs-star text-warning'></i>
+                            <span>4.9</span>
+                            <span class="text-muted fw-normal">(18 opinii)</span>
+                        </a>
+
+                        <div class="profile-meta-item">
+                            <i class='bx bx-map-pin text-muted'></i>
+                            <span>Baza: <strong>Warszawa</strong> (Dojazd w całej Polsce)</span>
+                        </div>
+
+                        <div class="profile-meta-item">
+                            <i class='bx bx-briefcase-alt text-muted'></i>
+                            <span>Staż: <strong><?= $experienceYears ?> lat</strong> (od <?= $startYear ?> r.)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Prawa strona Hero: Główne akcje rezerwacji i kontaktu -->
+            <div class="d-flex flex-column gap-2 text-end">
+                <button type="button" class="btn btn-primary px-4 py-2 fw-semibold" style="font-size: 0.88rem; border-radius: var(--radius-sm);" onclick="openBookingModal('1', 'Oskar Kaczmarek', '16.09.2027 - 24.09.2027')">
+                    <i class='bx bx-calendar-plus me-1'></i> Zarezerwuj termin / Wyślij zapytanie
+                </button>
+                
+                <div class="d-flex gap-2 justify-content-end">
+                    <a href="tel:+48600123456" class="btn btn-outline-secondary btn-sm" style="font-size: 0.78rem;">
+                        <i class='bx bx-phone me-1'></i> +48 600 123 456
+                    </a>
+                    <button type="button" class="btn btn-outline-secondary btn-sm" style="font-size: 0.78rem;" onclick="this.classList.toggle('text-warning'); this.innerHTML = (this.classList.contains('text-warning') ? '<i class=\'bx bxs-bookmark me-1\'></i> Zapisano' : '<i class=\'bx bx-bookmark me-1\'></i> Zapisz');">
+                        <i class='bx bx-bookmark me-1'></i> Zapisz
+                    </button>
+                </div>
+            </div>
+
+        </div>
+
+        <!-- Pasek 3 spokojnych wskaźników jakości (Zgodnie z wytycznymi: bez zbędnego licznika zrealizowanych) -->
+        <div class="profile-stats-strip">
+            <div class="profile-stat-box">
+                <div class="stat-val"><?= $experienceYears ?> lat doświadczenia</div>
+                <div class="stat-lbl">Ciągła praktyka pilotażu tras objazdowych od <?= $startYear ?> r.</div>
+            </div>
+            <div class="profile-stat-box">
+                <div class="stat-val text-success">100% dyspozycyjności</div>
+                <div class="stat-lbl">Wszystkie potwierdzone zlecenia zrealizowane bez odwołań</div>
+            </div>
+            <div class="profile-stat-box">
+                <div class="stat-val" style="color: var(--primary);">100% poleceń biur</div>
+                <div class="stat-lbl">Każde biuro podróży deklaruje chęć ponownej współpracy</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Główny układ 2-kolumnowy (2/3 Zawartość merytoryczna + 1/3 Sticky Panel Rezerwacji i Kalendarza) -->
+    <div class="row">
+        
+        <!-- ================= LEWA KOLUMNA (2/3) ================= -->
+        <div class="col-lg-8">
+            
+            <!-- Karta 1: O mnie & profil zawodowy -->
+            <div class="profile-section-card">
+                <div class="profile-section-header">
+                    <h5 class="profile-section-title">
+                        <i class='bx bx-user'></i> O mnie i profil zawodowy
+                    </h5>
+                    <span class="badge bg-light text-muted border">Profil pilota</span>
+                </div>
+                <div class="profile-section-body">
+                    <p class="text-secondary mb-3" style="font-size: 0.9rem; line-height: 1.65;">
+                        Pasjonat kultury śródziemnomorskiej z wykształceniem historycznym (Uniwersytet Warszawski). Od <strong><?= $startYear ?> roku</strong> z sukcesami pilotuję wycieczki objazdowe po Włoszech, Hiszpanii i Bałkanach. Wyróżnia mnie wysokie opanowanie w sytuacjach kryzysowych (nagłe zmiany rozkładów, sytuacje medyczne, awarie autokarów), doskonały kontakt z grupą oraz płynna znajomość języka włoskiego i angielskiego.
+                    </p>
+                    <p class="text-secondary mb-3" style="font-size: 0.9rem; line-height: 1.65;">
+                        Jako absolwent <strong>Superpilot Academy 2026</strong> pracuję według rygorystycznych standardów logistycznych: bieżący kontakt z dyspozytornią biura, codzienne raportowanie statusu trasy, skrupulatne rozliczanie zaliczek dewizowych oraz dbałość o najwyższe oceny satysfakcji klientów końcowych.
+                    </p>
+
+                    <div class="d-flex flex-wrap gap-2 pt-2 border-top">
+                        <span class="tech-tag"><i class='bx bx-check text-success me-1'></i> Wykształcenie historyczne (UW)</span>
+                        <span class="tech-tag"><i class='bx bx-check text-success me-1'></i> Doświadczenie w grupach autokarowych i lotniczych</span>
+                        <span class="tech-tag"><i class='bx bx-check text-success me-1'></i> Standardy rozliczeń dewizowych Travel Manager</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Karta 2: Destynacje, Języki i Specjalizacje -->
+            <div class="profile-section-card">
+                <div class="profile-section-header">
+                    <h5 class="profile-section-title">
+                        <i class='bx bx-globe'></i> Destynacje, Języki & Specjalizacje
+                    </h5>
+                </div>
+                <div class="profile-section-body">
+                    
+                    <!-- Destynacje (Spójne z tagami na liście ofert) -->
+                    <div class="mb-4">
+                        <div class="small fw-bold text-muted text-uppercase mb-2" style="letter-spacing: 0.03em;">Obsługiwane kraje i regiony:</div>
+                        <div class="d-flex flex-wrap gap-2">
+                            <span class="tech-tag primary-dest">🇮🇹 Włochy (Ekspert — Toskania, Rzym, Wenecja, Sycylia)</span>
+                            <span class="tech-tag primary-dest">🇬🇷 Grecja & Cyklady</span>
+                            <span class="tech-tag primary-dest">🇪🇸 Hiszpania & Andaluzja</span>
+                            <span class="tech-tag">🇭🇷 Chorwacja</span>
+                            <span class="tech-tag">🇳🇴 Norwegia (Fiordy)</span>
+                            <span class="tech-tag">🇦🇹 Austria</span>
+                        </div>
+                    </div>
+
+                    <!-- Języki obce (Kompaktowe, proporcjonalne znaczniki) -->
+                    <div class="mb-4">
+                        <div class="small fw-bold text-muted text-uppercase mb-2" style="letter-spacing: 0.03em;">Znajomość języków obcych:</div>
+                        <div class="d-flex flex-wrap gap-2">
+                            <span class="tech-tag d-inline-flex align-items-center gap-2 py-1 px-3" style="font-size: 0.82rem;">
+                                <span>🇵🇱</span> <strong>Polski</strong> <span class="text-muted small">(ojczysty)</span>
+                            </span>
+                            <span class="tech-tag d-inline-flex align-items-center gap-2 py-1 px-3" style="font-size: 0.82rem;">
+                                <span>🇬🇧</span> <strong>Angielski</strong> <span class="badge bg-primary text-white" style="font-size: 0.65rem; padding: 2px 6px;">C1</span>
+                            </span>
+                            <span class="tech-tag d-inline-flex align-items-center gap-2 py-1 px-3" style="font-size: 0.82rem;">
+                                <span>🇮🇹</span> <strong>Włoski</strong> <span class="badge bg-primary text-white" style="font-size: 0.65rem; padding: 2px 6px;">B2</span>
+                            </span>
+                        </div>
+                    </div>
+
+                    <!-- Specjalizacje imprez -->
+                    <div class="mb-4">
+                        <div class="small fw-bold text-muted text-uppercase mb-2" style="letter-spacing: 0.03em;">Specjalizacje wycieczek:</div>
+                        <div class="d-flex flex-wrap gap-2">
+                            <span class="tech-tag"><i class='bx bx-bus me-1'></i> Wycieczki objazdowe</span>
+                            <span class="tech-tag"><i class='bx bx-walk me-1'></i> Trekking & góry</span>
+                            <span class="tech-tag"><i class='bx bx-buildings me-1'></i> Przewodnik miejski (Rzym, Florencja)</span>
+                            <span class="tech-tag"><i class='bx bx-book-open me-1'></i> Grupy młodzieżowe / szkolne</span>
+                            <span class="tech-tag"><i class='bx bx-diamond me-1'></i> Wyjazdy VIP / Incentive</span>
+                            <span class="tech-tag"><i class='bx bx-wine me-1'></i> Enoturystyka & kulinaria</span>
+                        </div>
+                    </div>
+
+                    <!-- Certyfikaty i Uprawnienia -->
+                    <div>
+                        <div class="small fw-bold text-muted text-uppercase mb-2" style="letter-spacing: 0.03em;">Oficjalne certyfikaty i uprawnienia:</div>
+                        <div class="d-flex flex-column gap-2">
+                            <div class="p-3 rounded-3 border d-flex align-items-center justify-content-between" style="background: #f0fdf4;">
+                                <div class="d-flex align-items-center gap-3">
+                                    <div class="rounded-circle bg-success text-white d-flex align-items-center justify-content-center" style="width: 38px; height: 38px; font-size: 1.2rem; flex-shrink: 0;">
+                                        <i class='bx bx-badge-check'></i>
+                                    </div>
+                                    <div>
+                                        <div class="fw-bold text-dark" style="font-size: 0.88rem;">Superpilot Academy 2026 — Akredytacja Pilotażu Europy Południowej</div>
+                                        <div class="text-muted" style="font-size: 0.74rem;">Certyfikat nr: <strong>SPA-2026-OK92</strong> • Standard obsługi grup autokarowych i lotniczych</div>
+                                    </div>
+                                </div>
+                                <span class="badge bg-success" style="font-size: 0.7rem;">Zweryfikowany</span>
+                            </div>
+
+                            <div class="p-3 rounded-3 border d-flex align-items-center justify-content-between" style="background: #f8fafc;">
+                                <div class="d-flex align-items-center gap-3">
+                                    <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center" style="width: 38px; height: 38px; font-size: 1.15rem; flex-shrink: 0;">
+                                        <i class='bx bx-plus-medical'></i>
+                                    </div>
+                                    <div>
+                                        <div class="fw-bold text-dark" style="font-size: 0.88rem;">Kwalifikowana Pierwsza Pomoc (KPP)</div>
+                                        <div class="text-muted" style="font-size: 0.74rem;">Uprawnienia ratownicze ważne do: <strong>04.2028 r.</strong></div>
+                                    </div>
+                                </div>
+                                <span class="badge bg-light text-dark border" style="font-size: 0.7rem;">Ważny</span>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
+            <!-- Karta 3: Autoprezentacja & Fotorelacje ze szlaków -->
+            <div class="profile-section-card">
+                <div class="profile-section-header">
+                    <h5 class="profile-section-title">
+                        <i class='bx bx-video'></i> Autoprezentacja Wideo & Fotorelacje
+                    </h5>
+                    <span class="badge bg-light text-muted border">Wideo 1:15 min</span>
+                </div>
+                <div class="profile-section-body">
+                    <p class="text-secondary small mb-3">
+                        Krótkie nagranie wideo przygotowane dla koordynatorów biur podróży: dykcja, kultura osobista oraz wypowiedzi w języku włoskim i angielskim.
+                    </p>
+
+                    <!-- Wideo-wizytówka -->
+                    <div class="profile-video-box" onclick="openVideoModal('Oskar Kaczmarek', '1:15 min')">
+                        <div class="d-flex flex-column align-items-center text-center p-3">
+                            <div class="profile-video-play-btn mb-2">
+                                <i class='bx bx-play' style="margin-left: 3px;"></i>
+                            </div>
+                            <div class="fw-bold text-white mb-1" style="font-size: 0.95rem;">Oskar Kaczmarek — Autoprezentacja warsztatu pilota</div>
+                            <div class="text-white-50 small">Nagrano: Florencja / Rzym • Trasa objazdowa • 1:15 min</div>
+                        </div>
+                    </div>
+
+                    <!-- Fotorelacje 4 miniatury ze szlaków -->
+                    <div class="d-flex justify-content-between align-items-center mt-3 mb-1">
+                        <div class="small fw-bold text-navy">Fotorelacje z tras i pracy z grupą:</div>
+                        <small class="text-muted">4 zdjęcia w galerii</small>
+                    </div>
+
+                    <div class="profile-photos-grid">
+                        <div class="profile-photo-thumb" style="background: linear-gradient(135deg, #60a5fa, #3b82f6);" onclick="openPhotoLightbox('Florencja & Toskania — Grupa objazdowa Almatur')">
+                            <div class="text-center p-1">
+                                <i class='bx bx-camera fs-4'></i>
+                                <div class="small">Toskania</div>
+                            </div>
+                        </div>
+
+                        <div class="profile-photo-thumb" style="background: linear-gradient(135deg, #f59e0b, #d97706);" onclick="openPhotoLightbox('Rzym — Koloseum & Forum Romanum')">
+                            <div class="text-center p-1">
+                                <i class='bx bx-buildings fs-4'></i>
+                                <div class="small">Rzym</div>
+                            </div>
+                        </div>
+
+                        <div class="profile-photo-thumb" style="background: linear-gradient(135deg, #10b981, #059669);" onclick="openPhotoLightbox('Cyklady & Ateny — Rejs z grupą')">
+                            <div class="text-center p-1">
+                                <i class='bx bx-ship fs-4'></i>
+                                <div class="small">Grecja</div>
+                            </div>
+                        </div>
+
+                        <div class="profile-photo-thumb" style="background: linear-gradient(135deg, #8b5cf6, #6d28d9);" onclick="openPhotoLightbox('Andaluzja — Alhambra & Granada')">
+                            <div class="text-center p-1">
+                                <i class='bx bx-group fs-4'></i>
+                                <div class="small">Andaluzja</div>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
+            <!-- Karta 4: Opinie i Referencje od Biur Podróży -->
+            <div class="profile-section-card" id="opinie">
+                <div class="profile-section-header flex-wrap gap-2">
+                    <div class="d-flex align-items-center gap-2">
+                        <i class='bx bxs-star text-warning fs-5'></i>
+                        <h5 class="profile-section-title mb-0">Opinie i Referencje od Biur Podróży</h5>
+                    </div>
+                    <div class="d-flex align-items-center gap-2">
+                        <a href="pilot-reviews.php" class="btn btn-sm btn-outline-secondary" style="font-size: 0.78rem;">
+                            Wszystkie 18 opinii &rarr;
+                        </a>
+                        <button type="button" class="btn btn-sm btn-primary" style="font-size: 0.78rem;" data-bs-toggle="modal" data-bs-target="#newReviewModal">
+                            <i class='bx bx-edit-alt me-1'></i> Wystaw opinię po wycieczce
+                        </button>
+                    </div>
+                </div>
+
+                <div class="profile-section-body">
+                    
+                    <!-- Rozbicie ocen -->
+                    <div class="rating-breakdown-card mb-4">
+                        <div class="row align-items-center">
+                            <div class="col-md-4 text-center border-end">
+                                <div class="display-4 fw-bold text-navy mb-1" style="font-size: 2.75rem; line-height: 1;">4.9</div>
+                                <div class="text-warning fs-5 mb-1">
+                                    <i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star-half'></i>
+                                </div>
+                                <div class="text-muted small">na podstawie 18 ocen od 6 biur</div>
+                                <div class="badge bg-success-subtle text-success mt-2 rounded-pill px-3 py-1" style="font-size: 0.72rem;">
+                                    100% poleceń na kolejne wyjazdy
+                                </div>
+                            </div>
+
+                            <div class="col-md-8 ps-md-4 mt-3 mt-md-0">
+                                <div class="d-flex flex-column gap-2" style="font-size: 0.78rem;">
+                                    <div class="d-flex align-items-center gap-2">
+                                        <span style="width: 30px;" class="fw-semibold">5 ★</span>
+                                        <div class="progress flex-grow-1" style="height: 6px;">
+                                            <div class="progress-bar bg-warning" style="width: 89%;"></div>
+                                        </div>
+                                        <span class="text-muted" style="width: 45px;">16 (89%)</span>
+                                    </div>
+
+                                    <div class="d-flex align-items-center gap-2">
+                                        <span style="width: 30px;" class="fw-semibold">4 ★</span>
+                                        <div class="progress flex-grow-1" style="height: 6px;">
+                                            <div class="progress-bar bg-warning" style="width: 11%;"></div>
+                                        </div>
+                                        <span class="text-muted" style="width: 45px;">2 (11%)</span>
+                                    </div>
+
+                                    <div class="d-flex align-items-center gap-2">
+                                        <span style="width: 30px;" class="fw-semibold">3 ★</span>
+                                        <div class="progress flex-grow-1" style="height: 6px;">
+                                            <div class="progress-bar bg-warning" style="width: 0%;"></div>
+                                        </div>
+                                        <span class="text-muted" style="width: 45px;">0</span>
+                                    </div>
+                                </div>
+
+                                <div class="row g-2 mt-3 pt-3 border-top text-center" style="font-size: 0.75rem;">
+                                    <div class="col-4">
+                                        <strong class="text-navy d-block">5.0 / 5.0</strong>
+                                        <span class="text-muted">Punktualność</span>
+                                    </div>
+                                    <div class="col-4">
+                                        <strong class="text-navy d-block">4.9 / 5.0</strong>
+                                        <span class="text-muted">Kontakt z grupą</span>
+                                    </div>
+                                    <div class="col-4">
+                                        <strong class="text-navy d-block">4.9 / 5.0</strong>
+                                        <span class="text-muted">Język w trasie</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Lista recenzji biur (spójna w 100% z aplikacją mobilną) -->
+                    <div id="agencyReviewsList">
+                        
+                        <!-- Opinia 1: Almatur (Z oficjalną odpowiedzią pilota) -->
+                        <div class="review-card-item">
+                            <div class="d-flex justify-content-between align-items-start mb-2">
+                                <div class="d-flex align-items-center gap-2">
+                                    <div class="review-agency-avatar">
+                                        AL
+                                    </div>
+                                    <div>
+                                        <h6 class="fw-bold mb-0 text-navy" style="font-size: 0.88rem;">Biuro Podróży Almatur</h6>
+                                        <small class="text-muted" style="font-size: 0.72rem;">Wycieczka: Klasyczne Włochy • Maj 2026</small>
+                                    </div>
+                                </div>
+                                <span class="profile-meta-rating" style="font-size: 0.75rem;">
+                                    <i class='bx bxs-star text-warning'></i> 5.0 / 5.0
+                                </span>
+                            </div>
+
+                            <p class="mb-2 text-secondary" style="font-size: 0.85rem; line-height: 1.5;">
+                                "Pan Oskar prowadził 8-dniowy objazd po Włoszech. Klienci byli zachwyceni jego wiedzą i empatią. Brak jakichkolwiek problemów organizacyjnych. Bardzo chętnie zarezerwujemy kolejne terminy na jesień."
+                            </p>
+
+                            <!-- Oficjalna odpowiedź pilota (Z aplikacji mobilnej!) -->
+                            <div class="pilot-reply-box">
+                                <div class="d-flex justify-content-between align-items-center mb-1">
+                                    <div class="d-flex align-items-center gap-1 text-primary fw-bold" style="font-size: 0.76rem;">
+                                        <i class='bx bx-reply'></i> Oficjalna odpowiedź pilota (Oskar Kaczmarek)
+                                    </div>
+                                    <small class="text-muted" style="font-size: 0.7rem;">3 dni temu</small>
+                                </div>
+                                <p class="mb-0 text-secondary" style="font-size: 0.8rem; line-height: 1.45;">
+                                    Dziękuję serdecznie za zaufanie! Współpraca z koordynatorem trasy i grupą układała się wzorowo. Do zobaczenia na kolejnych wyjazdach!
+                                </p>
+                            </div>
+                        </div>
+
+                        <!-- Opinia 2: Logos Tour Warszawa -->
+                        <div class="review-card-item">
+                            <div class="d-flex justify-content-between align-items-start mb-2">
+                                <div class="d-flex align-items-center gap-2">
+                                    <div class="review-agency-avatar" style="background: #e0f2fe; color: #0284c7;">
+                                        LT
+                                    </div>
+                                    <div>
+                                        <h6 class="fw-bold mb-0 text-navy" style="font-size: 0.88rem;">Logos Tour Warszawa</h6>
+                                        <small class="text-muted" style="font-size: 0.72rem;">Wycieczka: Andaluzja Express • Kwiecień 2026</small>
+                                    </div>
+                                </div>
+                                <span class="profile-meta-rating" style="font-size: 0.75rem;">
+                                    <i class='bx bxs-star text-warning'></i> 5.0 / 5.0
+                                </span>
+                            </div>
+
+                            <p class="mb-0 text-secondary" style="font-size: 0.85rem; line-height: 1.5;">
+                                "Znakomite przygotowanie merytoryczne. Świetny kontakt z hiszpańskimi przewodnikami lokalnymi. Rekomendujemy bez wahania."
+                            </p>
+                        </div>
+
+                        <!-- Opinia 3: Rainbow Tours -->
+                        <div class="review-card-item">
+                            <div class="d-flex justify-content-between align-items-start mb-2">
+                                <div class="d-flex align-items-center gap-2">
+                                    <div class="review-agency-avatar" style="background: #fef3c7; color: #b45309;">
+                                        RT
+                                    </div>
+                                    <div>
+                                        <h6 class="fw-bold mb-0 text-navy" style="font-size: 0.88rem;">Rainbow Tours</h6>
+                                        <small class="text-muted" style="font-size: 0.72rem;">Wycieczka: Magia Toskanii • Wrzesień 2025</small>
+                                    </div>
+                                </div>
+                                <span class="profile-meta-rating" style="font-size: 0.75rem;">
+                                    <i class='bx bxs-star text-warning'></i> 4.8 / 5.0
+                                </span>
+                            </div>
+
+                            <p class="mb-0 text-secondary" style="font-size: 0.85rem; line-height: 1.5;">
+                                "Wszystkie punkty programu zrealizowane punktualnie, świetna reakcja na deszczowy dzień we Florencji i szybka rearanżacja czasu wolnego."
+                            </p>
+                        </div>
+
+                    </div>
+
+                </div>
+            </div>
+
+        </div><!-- /.col-lg-8 -->
+
+        <!-- ================= PRAWA KOLUMNA: STICKY PANEL KALENDARZA & REZERWACJI (1/3) ================= -->
+        <div class="col-lg-4">
+            <div class="booking-sticky-panel">
+                
+                <!-- Karta kalendarza dostępności (Spójna w 100% z availability.php pilota) -->
+                <div class="calendar-widget-card">
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                        <div>
+                            <h6 class="fw-bold mb-0 text-navy" style="font-size: 0.92rem;">Kalendarz Dostępności</h6>
+                            <small class="text-muted" style="font-size: 0.72rem;">Stan na żywo z aplikacji pilota</small>
+                        </div>
+                        <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-2 py-1" style="font-size: 0.68rem;">
+                            Zsynchronizowany
+                        </span>
+                    </div>
+
+                    <!-- Nagłówek miesiąca -->
+                    <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
+                        <button class="btn btn-sm btn-light p-1 rounded-circle" type="button"><i class='bx bx-chevron-left'></i></button>
+                        <strong class="text-navy" style="font-size: 0.88rem;">Wrzesień 2027</strong>
+                        <button class="btn btn-sm btn-light p-1 rounded-circle" type="button"><i class='bx bx-chevron-right'></i></button>
+                    </div>
+
+                    <!-- Siatka kalendarza -->
+                    <div class="sp-calendar-grid mb-3">
+                        <div class="sp-cal-header">Pn</div>
+                        <div class="sp-cal-header">Wt</div>
+                        <div class="sp-cal-header">Śr</div>
+                        <div class="sp-cal-header">Cz</div>
+                        <div class="sp-cal-header">Pt</div>
+                        <div class="sp-cal-header">Sb</div>
+                        <div class="sp-cal-header">Nd</div>
+
+                        <!-- Dni sierpnia -->
+                        <div class="sp-cal-day other-month">30</div>
+                        <div class="sp-cal-day other-month">31</div>
+
+                        <!-- 1-4.09: Urlop prywatny (zablokowany) -->
+                        <div class="sp-cal-day blocked" title="Urlop prywatny pilota">1</div>
+                        <div class="sp-cal-day blocked" title="Urlop prywatny pilota">2</div>
+                        <div class="sp-cal-day blocked" title="Urlop prywatny pilota">3</div>
+                        <div class="sp-cal-day blocked" title="Urlop prywatny pilota">4</div>
+                        
+                        <!-- 5-15.09: Wolne terminy dla biur -->
+                        <div class="sp-cal-day free" data-day="5" title="Wolny termin (5.09)">5 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="6" title="Wolny termin (6.09)">6 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="7" title="Wolny termin (7.09)">7 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="8" title="Wolny termin (8.09)">8 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="9" title="Wolny termin (9.09)">9 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="10" title="Wolny termin (10.09)">10 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="11" title="Wolny termin (11.09)">11 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="12" title="Wolny termin (12.09)">12 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="13" title="Wolny termin (13.09)">13 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="14" title="Wolny termin (14.09)">14 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="15" title="Wolny termin (15.09)">15 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+
+                        <!-- 16-24.09: Wycieczka potwierdzona (#12 oskar prod) -->
+                        <div class="sp-cal-day trip" title="Zajęte: Wycieczka #12 oskar prod">16 <span class="sp-cal-dot" style="background:#5c60f5;"></span></div>
+                        <div class="sp-cal-day trip" title="Zajęte: Wycieczka #12 oskar prod">17 <span class="sp-cal-dot" style="background:#5c60f5;"></span></div>
+                        <div class="sp-cal-day trip" title="Zajęte: Wycieczka #12 oskar prod">18 <span class="sp-cal-dot" style="background:#5c60f5;"></span></div>
+                        <div class="sp-cal-day trip" title="Zajęte: Wycieczka #12 oskar prod">19 <span class="sp-cal-dot" style="background:#5c60f5;"></span></div>
+                        <div class="sp-cal-day trip" title="Zajęte: Wycieczka #12 oskar prod">20 <span class="sp-cal-dot" style="background:#5c60f5;"></span></div>
+                        <div class="sp-cal-day trip" title="Zajęte: Wycieczka #12 oskar prod">21 <span class="sp-cal-dot" style="background:#5c60f5;"></span></div>
+                        <div class="sp-cal-day trip" title="Zajęte: Wycieczka #12 oskar prod">22 <span class="sp-cal-dot" style="background:#5c60f5;"></span></div>
+                        <div class="sp-cal-day trip" title="Zajęte: Wycieczka #12 oskar prod">23 <span class="sp-cal-dot" style="background:#5c60f5;"></span></div>
+                        <div class="sp-cal-day trip" title="Zajęte: Wycieczka #12 oskar prod">24 <span class="sp-cal-dot" style="background:#5c60f5;"></span></div>
+
+                        <!-- 25-30.09: Wolne -->
+                        <div class="sp-cal-day free" data-day="25" title="Wolny termin (25.09)">25 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="26" title="Wolny termin (26.09)">26 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="27" title="Wolny termin (27.09)">27 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="28" title="Wolny termin (28.09)">28 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="29" title="Wolny termin (29.09)">29 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                        <div class="sp-cal-day free" data-day="30" title="Wolny termin (30.09)">30 <span class="sp-cal-dot" style="background:#10b981;"></span></div>
+                    </div>
+
+                    <!-- Legenda -->
+                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 pt-2 border-top small" style="font-size: 0.72rem;">
+                        <span class="d-flex align-items-center gap-1">
+                            <span style="width:7px; height:7px; background:#10b981; border-radius:50%;"></span> Wolny termin
+                        </span>
+                        <span class="d-flex align-items-center gap-1">
+                            <span style="width:7px; height:7px; background:#5c60f5; border-radius:50%;"></span> Wycieczka potwierdzona
+                        </span>
+                        <span class="d-flex align-items-center gap-1 text-muted">
+                            <span style="width:7px; height:7px; background:#cbd5e1; border-radius:50%;"></span> Urlop
+                        </span>
+                    </div>
+
+                    <div class="mt-3 p-2 rounded-2 bg-light text-muted small" style="font-size: 0.75rem;">
+                        <i class='bx bx-pointer me-1 text-primary'></i> Wybór: <strong id="calSelectedRange" class="text-dark">Kliknij zielony dzień, aby wybrać termin</strong>
+                    </div>
+
+                    <!-- Główny przycisk rezerwacji pod kalendarzem -->
+                    <button type="button" id="btnBookFromCalendar" class="btn btn-primary w-100 py-2 mt-3 fw-semibold d-flex align-items-center justify-content-center gap-2" style="font-size: 0.88rem; border-radius: var(--radius-sm);" onclick="openBookingModal('1', 'Oskar Kaczmarek', window.selectedProfileDates || '16.09.2027 - 24.09.2027')">
+                        <i class='bx bx-calendar-plus'></i> Zarezerwuj termin / Wyślij zapytanie
+                    </button>
+
+                    <div class="text-center mt-2 text-muted" style="font-size: 0.72rem;">
+                        Powiadomienie PUSH trafi bezpośrednio do aplikacji pilota
+                    </div>
+
+                </div>
+
+            </div>
+        </div><!-- /.col-lg-4 -->
+
+    </div><!-- /.row -->
+
+</div><!-- /.container-xxl -->
+
+<!-- Modal Wystawienia Nowej Opinii po Wycieczce (Zgodny ze stonowanym designem) -->
+<div class="modal fade" id="newReviewModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content border-0 shadow-lg" style="border-radius: var(--radius-md);">
+            <div class="modal-header bg-white border-bottom py-3">
+                <div class="d-flex align-items-center gap-2">
+                    <i class='bx bxs-star text-warning fs-4'></i>
+                    <div>
+                        <h5 class="modal-title fw-bold mb-0 text-navy" style="font-size: 1.05rem;">Wystaw Opinię i Referencję dla Pilota</h5>
+                        <small class="text-muted" style="font-size: 0.76rem;">Ocena trafi do profilu pilota i aplikacji mobilnej</small>
+                    </div>
+                </div>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+            </div>
+
+            <form id="addReviewForm">
+                <div class="modal-body p-4">
+                    
+                    <div class="row g-3">
+                        <div class="col-md-6">
+                            <label class="form-label fw-bold small text-muted">Wycieczka z bazy biura:</label>
+                            <select class="form-select" required>
+                                <option value="">Wybierz zakończoną wycieczkę...</option>
+                                <option value="12" selected>Wycieczka #12: Klasyczne Włochy (Almatur)</option>
+                                <option value="8">Wycieczka #8: Toskania & Rzym (Maj 2026)</option>
+                            </select>
+                        </div>
+
+                        <div class="col-md-6">
+                            <label class="form-label fw-bold small text-muted">Ocena ogólna:</label>
+                            <select class="form-select fw-bold text-warning" required>
+                                <option value="5" selected>★★★★★ 5.0 — Rewelacyjny (Pełna rekomendacja)</option>
+                                <option value="4">★★★★☆ 4.0 — Bardzo dobry</option>
+                                <option value="3">★★★☆☆ 3.0 — Przeciętny</option>
+                            </select>
+                        </div>
+
+                        <!-- Oceny cząstkowe -->
+                        <div class="col-12">
+                            <label class="form-label fw-bold small text-muted">Oceny cząstkowe:</label>
+                            <div class="row g-2">
+                                <div class="col-md-4">
+                                    <div class="p-2 border rounded bg-light text-center">
+                                        <div class="small fw-semibold text-dark">Punktualność</div>
+                                        <div class="text-warning fs-5">★★★★★</div>
+                                    </div>
+                                </div>
+                                <div class="col-md-4">
+                                    <div class="p-2 border rounded bg-light text-center">
+                                        <div class="small fw-semibold text-dark">Kontakt z grupą</div>
+                                        <div class="text-warning fs-5">★★★★★</div>
+                                    </div>
+                                </div>
+                                <div class="col-md-4">
+                                    <div class="p-2 border rounded bg-light text-center">
+                                        <div class="small fw-semibold text-dark">Radzenie w kryzysie</div>
+                                        <div class="text-warning fs-5">★★★★★</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="col-12">
+                            <label class="form-label fw-bold small text-muted">Treść referencji / recenzji:</label>
+                            <textarea class="form-control" rows="4" placeholder="Opisz jak pilot poradził sobie z trasą, grupą i programem..." required>Pan Oskar doskonale poprowadził trasę po Włoszech. Bardzo wysoka kultura osobista i biegły język włoski rozwiązały problem z opóźnieniem autokaru. Turyści zachwyceni.</textarea>
+                        </div>
+
+                        <div class="col-12">
+                            <div class="form-check form-switch">
+                                <input class="form-check-input" type="checkbox" id="recommendCheck" checked>
+                                <label class="form-check-label fw-bold small text-dark" for="recommendCheck">
+                                    Polecam tego pilota innym koordynatorom biur podróży
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+
+                <div class="modal-footer bg-light px-4 py-3 border-top">
+                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Anuluj</button>
+                    <button type="submit" class="btn btn-primary fw-semibold px-4">
+                        <i class='bx bx-check me-1'></i> Opublikuj oficjalną referencję
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script>
+function openVideoModal(pilotName, duration) {
+    const modalEl = document.getElementById('videoPitchModal');
+    if (modalEl) {
+        if (pilotName && document.getElementById('videoModalPilotName')) {
+            document.getElementById('videoModalPilotName').innerText = pilotName;
+        }
+        if (duration && document.getElementById('videoModalLength')) {
+            document.getElementById('videoModalLength').innerText = '(' + duration + ')';
+        }
+        const modal = new bootstrap.Modal(modalEl);
+        modal.show();
+    }
+}
+
+function openPhotoLightbox(caption) {
+    const modalEl = document.getElementById('photoLightboxModal');
+    if (modalEl) {
+        if (document.getElementById('lightboxTitle')) document.getElementById('lightboxTitle').innerText = caption;
+        if (document.getElementById('lightboxSubtext')) document.getElementById('lightboxSubtext').innerText = caption;
+        const modal = new bootstrap.Modal(modalEl);
+        modal.show();
+    }
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    window.selectedProfileDates = '16.09.2027 - 24.09.2027';
+
+    // Interakcja z dniami kalendarza
+    const calDays = document.querySelectorAll('.sp-cal-day.free');
+    const selectedRangeSpan = document.getElementById('calSelectedRange');
+
+    calDays.forEach(day => {
+        day.addEventListener('click', function() {
+            calDays.forEach(d => d.classList.remove('selected'));
+            this.classList.add('selected');
+            const dayNum = parseInt(this.getAttribute('data-day'), 10);
+            const dayFormatted = (dayNum < 10 ? '0' + dayNum : dayNum) + '.09.2027';
+            window.selectedProfileDates = dayFormatted;
+            if (selectedRangeSpan) {
+                selectedRangeSpan.innerText = dayFormatted + ' (Termin wolny - gotowy do zapytania)';
+            }
+        });
+    });
+
+    // Obsługa formularza wystawienia opinii
+    const reviewForm = document.getElementById('addReviewForm');
+    if (reviewForm) {
+        reviewForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            const modalEl = document.getElementById('newReviewModal');
+            const modal = bootstrap.Modal.getInstance(modalEl);
+            if (modal) modal.hide();
+
+            if (typeof showToastNotification === 'function') {
+                showToastNotification('Referencja opublikowana!', 'Dziękujemy. Twoja opinia została dodana do profilu pilota i rankingu Superpilot.');
+            } else {
+                alert('Dziękujemy! Twoja opinia została opublikowana.');
+            }
+        });
+    }
+});
+</script>
+
+<?php include __DIR__ . '/footer.php'; ?>
diff --git a/prototype/superpilot-web/pilot-reviews.php b/prototype/superpilot-web/pilot-reviews.php
new file mode 100644
index 0000000..f57ff02
--- /dev/null
+++ b/prototype/superpilot-web/pilot-reviews.php
@@ -0,0 +1,316 @@
+<?php
+$pageTitle = 'Superpilot - Opinie i Referencje Biur Podróży: Oskar Kaczmarek';
+$enablePrototypeComments = true;
+include __DIR__ . '/header.php';
+?>
+
+<div class="container-xxl flex-grow-1 container-p-y" style="padding-top: 1.5rem !important;">
+
+    <!-- Pasek powrotu i akcje -->
+    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb mb-0" style="font-size: 0.8rem;">
+                <li class="breadcrumb-item"><a href="index.php" class="text-muted"><i class='bx bx-arrow-back'></i> Katalog Pilotów</a></li>
+                <li class="breadcrumb-item"><a href="pilot-profile.php" class="text-muted">Oskar Kaczmarek</a></li>
+                <li class="breadcrumb-item active text-primary fw-bold" aria-current="page">Opinie i Referencje Biur</li>
+            </ol>
+        </nav>
+
+        <div class="d-flex align-items-center gap-2">
+            <a href="../travelleader-mobile/profile-reviews.php" target="_blank" class="btn btn-sm btn-outline-secondary d-inline-flex align-items-center gap-1" style="font-size: 0.78rem;">
+                <i class='bx bx-mobile'></i> Zobacz w aplikacji mobilnej pilota <i class='bx bx-link-external' style="font-size: 0.7rem;"></i>
+            </a>
+            <button type="button" class="btn btn-sm btn-superpilot" onclick="openBookingModal('1', 'Oskar Kaczmarek', '16.09.2027 - 24.09.2027')">
+                <i class='bx bx-calendar-plus'></i> Zarezerwuj pilota
+            </button>
+        </div>
+    </div>
+
+    <!-- Nagłówek i Karta Pilota -->
+    <div class="card border-0 shadow-sm mb-4" style="border-radius: var(--sp-radius-md);">
+        <div class="card-body p-4">
+            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
+                <div class="d-flex align-items-center gap-3">
+                    <div class="rounded-3 d-flex align-items-center justify-content-center text-white fw-bold shadow-sm" style="width: 58px; height: 58px; background: linear-gradient(135deg, #4f46e5, #7c3aed); font-size: 1.5rem;">
+                        OK
+                    </div>
+                    <div>
+                        <div class="d-flex align-items-center gap-2">
+                            <h4 class="fw-bold mb-0 text-navy">Oskar Kaczmarek — Opinie Biur Podróży</h4>
+                            <span class="badge bg-success-subtle text-success fw-bold">Superpilot Verified</span>
+                        </div>
+                        <small class="text-muted">Wszystkie referencje wystawione przez zweryfikowanych koordynatorów w ekosystemie TravelManager i PrzezMorze</small>
+                    </div>
+                </div>
+
+                <div class="d-flex align-items-center gap-2">
+                    <button type="button" class="btn btn-warning fw-bold text-dark px-3 py-2" data-bs-toggle="modal" data-bs-target="#newReviewModal">
+                        <i class='bx bx-edit-alt'></i> + Wystaw nową opinię
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Rating Summary Hero & Rozbicie gwiazdek -->
+    <div class="row g-4 mb-4">
+        
+        <div class="col-lg-4">
+            <div class="card border-0 shadow-sm h-100 text-center p-4" style="border-radius: var(--sp-radius-md);">
+                <div class="display-3 fw-bold text-navy mb-1" style="font-size: 3.5rem; line-height: 1;">4.9</div>
+                <div class="text-warning fs-3 mb-2">
+                    <i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star-half'></i>
+                </div>
+                <div class="text-muted small mb-3">Średnia z 18 referencji od 6 biur podróży</div>
+                
+                <div class="badge bg-success-subtle text-success p-2 rounded-pill fw-bold mb-3" style="font-size: 0.8rem;">
+                    <i class='bx bx-check-shield'></i> 100% biur poleca pilota na kolejne wycieczki
+                </div>
+
+                <div class="pt-3 border-top text-start text-muted small">
+                    <div class="d-flex justify-content-between mb-1">
+                        <span>Almatur:</span> <strong class="text-dark">5.0 ★ (8 wycieczek)</strong>
+                    </div>
+                    <div class="d-flex justify-content-between mb-1">
+                        <span>Logos Tour:</span> <strong class="text-dark">5.0 ★ (4 wycieczki)</strong>
+                    </div>
+                    <div class="d-flex justify-content-between">
+                        <span>Rainbow:</span> <strong class="text-dark">4.8 ★ (6 wycieczek)</strong>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-lg-8">
+            <div class="card border-0 shadow-sm h-100 p-4" style="border-radius: var(--sp-radius-md);">
+                <h6 class="fw-bold text-navy mb-3">Szczegółowy rozkład ocen i kategorii:</h6>
+
+                <!-- Słupki gwiazdek -->
+                <div class="d-flex flex-column gap-2 mb-4" style="font-size: 0.84rem;">
+                    <div class="d-flex align-items-center gap-2">
+                        <span style="width: 35px;" class="fw-semibold">5 ★</span>
+                        <div class="progress flex-grow-1" style="height: 10px;">
+                            <div class="progress-bar bg-warning" style="width: 89%;"></div>
+                        </div>
+                        <span class="text-muted" style="width: 70px;">16 opinii (89%)</span>
+                    </div>
+
+                    <div class="d-flex align-items-center gap-2">
+                        <span style="width: 35px;" class="fw-semibold">4 ★</span>
+                        <div class="progress flex-grow-1" style="height: 10px;">
+                            <div class="progress-bar bg-warning" style="width: 11%;"></div>
+                        </div>
+                        <span class="text-muted" style="width: 70px;">2 opinie (11%)</span>
+                    </div>
+
+                    <div class="d-flex align-items-center gap-2">
+                        <span style="width: 35px;" class="fw-semibold">3 ★</span>
+                        <div class="progress flex-grow-1" style="height: 10px;">
+                            <div class="progress-bar bg-warning" style="width: 0%;"></div>
+                        </div>
+                        <span class="text-muted" style="width: 70px;">0 opinii</span>
+                    </div>
+                </div>
+
+                <!-- 4 kluczowe wymiary oceny -->
+                <div class="row g-3 pt-3 border-top">
+                    <div class="col-md-3 col-6">
+                        <div class="p-3 rounded-3 bg-light text-center">
+                            <div class="text-warning fs-5 fw-bold">5.0 ★</div>
+                            <small class="text-muted d-block mt-1">Punktualność</small>
+                        </div>
+                    </div>
+                    <div class="col-md-3 col-6">
+                        <div class="p-3 rounded-3 bg-light text-center">
+                            <div class="text-warning fs-5 fw-bold">4.9 ★</div>
+                            <small class="text-muted d-block mt-1">Kontakt z grupą</small>
+                        </div>
+                    </div>
+                    <div class="col-md-3 col-6">
+                        <div class="p-3 rounded-3 bg-light text-center">
+                            <div class="text-warning fs-5 fw-bold">4.9 ★</div>
+                            <small class="text-muted d-block mt-1">Zarządzanie kryzysem</small>
+                        </div>
+                    </div>
+                    <div class="col-md-3 col-6">
+                        <div class="p-3 rounded-3 bg-light text-center">
+                            <div class="text-warning fs-5 fw-bold">5.0 ★</div>
+                            <small class="text-muted d-block mt-1">Języki w hotelach</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <!-- Filtry destynacji opinii -->
+    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
+        <div class="d-flex gap-2">
+            <button type="button" class="btn btn-sm btn-primary">Wszystkie opinie (18)</button>
+            <button type="button" class="btn btn-sm btn-outline-secondary">🇮🇹 Włochy (12)</button>
+            <button type="button" class="btn btn-sm btn-outline-secondary">🇪🇸 Hiszpania (4)</button>
+            <button type="button" class="btn btn-sm btn-outline-secondary">🇬🇷 Grecja (2)</button>
+        </div>
+        <small class="text-muted">Sortowanie: Najnowsze opinie</small>
+    </div>
+
+    <!-- Lista opinii biur podróży -->
+    <div id="agencyReviewsList">
+        
+        <!-- Recenzja 1: Almatur -->
+        <div class="review-card-item">
+            <div class="d-flex justify-content-between align-items-start mb-2">
+                <div class="d-flex align-items-center gap-3">
+                    <div class="review-agency-avatar">
+                        AL
+                    </div>
+                    <div>
+                        <div class="d-flex align-items-center gap-2">
+                            <h6 class="fw-bold mb-0 text-navy">Biuro Podróży Almatur</h6>
+                            <span class="badge bg-label-primary small">Zweryfikowane zlecenie #12</span>
+                        </div>
+                        <small class="text-muted">Wycieczka: Klasyczne Włochy (8 dni) • Realizacja: Maj 2026 • Koordynator: Tomasz W.</small>
+                    </div>
+                </div>
+                <span class="badge bg-warning-subtle text-warning fw-bold px-3 py-2 rounded-pill fs-6">
+                    <i class='bx bxs-star'></i> 5.0 / 5.0
+                </span>
+            </div>
+
+            <p class="mb-3 text-secondary" style="font-size: 0.92rem; line-height: 1.55;">
+                "Pan Oskar prowadził 8-dniowy objazd po Włoszech. Klienci byli zachwyceni jego wiedzą i empatią. Brak jakichkolwiek problemów organizacyjnych. Doskonała reakcja w trakcie korka na autostradzie pod Bolonią — natychmiast skontaktował się z restauracją i przesunął kolację bez utraty komfortu turystów. Bardzo chętnie zarezerwujemy kolejne terminy na jesień."
+            </p>
+
+            <!-- Oficjalna odpowiedź pilota -->
+            <div class="pilot-reply-box">
+                <div class="d-flex justify-content-between align-items-center mb-1">
+                    <div class="d-flex align-items-center gap-1 text-primary fw-bold" style="font-size: 0.8rem;">
+                        <i class='bx bx-reply fs-5'></i> Oficjalna odpowiedź pilota (Oskar Kaczmarek)
+                    </div>
+                    <small class="text-muted">3 dni temu z aplikacji mobilnej</small>
+                </div>
+                <p class="mb-0 text-secondary" style="font-size: 0.84rem; line-height: 1.45;">
+                    Dziękuję serdecznie za zaufanie! Współpraca z koordynatorem trasy i grupą układała się wzorowo. Do zobaczenia na kolejnych wyjazdach!
+                </p>
+            </div>
+        </div>
+
+        <!-- Recenzja 2: Logos Tour -->
+        <div class="review-card-item">
+            <div class="d-flex justify-content-between align-items-start mb-2">
+                <div class="d-flex align-items-center gap-3">
+                    <div class="review-agency-avatar" style="background: #e0f2fe; color: #0284c7;">
+                        LT
+                    </div>
+                    <div>
+                        <div class="d-flex align-items-center gap-2">
+                            <h6 class="fw-bold mb-0 text-navy">Logos Tour Warszawa</h6>
+                            <span class="badge bg-label-info small">Zweryfikowane zlecenie</span>
+                        </div>
+                        <small class="text-muted">Wycieczka: Andaluzja Express • Realizacja: Kwiecień 2026</small>
+                    </div>
+                </div>
+                <span class="badge bg-warning-subtle text-warning fw-bold px-3 py-2 rounded-pill fs-6">
+                    <i class='bx bxs-star'></i> 5.0 / 5.0
+                </span>
+            </div>
+
+            <p class="mb-0 text-secondary" style="font-size: 0.92rem; line-height: 1.55;">
+                "Znakomite przygotowanie merytoryczne. Świetny kontakt z hiszpańskimi przewodnikami lokalnymi. Oskar potrafi utrzymać dyscyplinę czasową w grupie 45 osób w sposób całkowicie bezstresowy. Rekomendujemy bez wahania."
+            </p>
+        </div>
+
+        <!-- Recenzja 3: Rainbow Tours -->
+        <div class="review-card-item">
+            <div class="d-flex justify-content-between align-items-start mb-2">
+                <div class="d-flex align-items-center gap-3">
+                    <div class="review-agency-avatar" style="background: #fef3c7; color: #b45309;">
+                        RT
+                    </div>
+                    <div>
+                        <div class="d-flex align-items-center gap-2">
+                            <h6 class="fw-bold mb-0 text-navy">Rainbow Tours</h6>
+                            <span class="badge bg-label-warning small">Zweryfikowane zlecenie</span>
+                        </div>
+                        <small class="text-muted">Wycieczka: Magia Toskanii • Realizacja: Wrzesień 2025</small>
+                    </div>
+                </div>
+                <span class="badge bg-warning-subtle text-warning fw-bold px-3 py-2 rounded-pill fs-6">
+                    <i class='bx bxs-star'></i> 4.8 / 5.0
+                </span>
+            </div>
+
+            <p class="mb-0 text-secondary" style="font-size: 0.92rem; line-height: 1.55;">
+                "Wszystkie punkty programu zrealizowane punktualnie, świetna reakcja na deszczowy dzień we Florencji i szybka rearanżacja czasu wolnego. Jeden z najbardziej profesjonalnych pilotów w naszej bazie."
+            </p>
+        </div>
+
+    </div>
+
+</div><!-- /.container-xxl -->
+
+<!-- Modal dodania opinii -->
+<div class="modal fade" id="newReviewModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content border-0 shadow-lg" style="border-radius: var(--sp-radius-md);">
+            <div class="modal-header bg-warning text-dark">
+                <div class="d-flex align-items-center gap-2">
+                    <i class='bx bxs-star fs-3'></i>
+                    <div>
+                        <h5 class="modal-title fw-bold mb-0">Wystaw Opinię i Referencję dla Pilota</h5>
+                        <small class="text-dark-50" style="font-size: 0.76rem;">Ocena zostanie uwzględniona w rankingu Superpilot i trafi do aplikacji pilota</small>
+                    </div>
+                </div>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+            </div>
+
+            <form id="addReviewForm">
+                <div class="modal-body p-4">
+                    <div class="row g-3">
+                        <div class="col-md-6">
+                            <label class="form-label fw-bold small text-muted">Wycieczka z bazy biura:</label>
+                            <select class="form-select" required>
+                                <option value="">Wybierz zakończoną wycieczkę...</option>
+                                <option value="12" selected>Wycieczka #12: Klasyczne Włochy (Almatur)</option>
+                                <option value="8">Wycieczka #8: Toskania & Rzym (Maj 2026)</option>
+                            </select>
+                        </div>
+
+                        <div class="col-md-6">
+                            <label class="form-label fw-bold small text-muted">Ocena ogólna:</label>
+                            <select class="form-select fw-bold text-warning" required>
+                                <option value="5" selected>★★★★★ 5.0 — Rewelacyjny (Pełna rekomendacja)</option>
+                                <option value="4">★★★★☆ 4.0 — Bardzo dobry</option>
+                                <option value="3">★★★☆☆ 3.0 — Przeciętny</option>
+                            </select>
+                        </div>
+
+                        <div class="col-12">
+                            <label class="form-label fw-bold small text-muted">Treść referencji / recenzji:</label>
+                            <textarea class="form-control" rows="4" placeholder="Opisz jak pilot poradził sobie z trasą, grupą i programem..." required>Wzorowa realizacja wyjazdu. Pilot doskonale poradził sobie ze zmianą harmonogramu z powodu pogody. Grupa była zachwycona. Zdecydowanie polecamy!</textarea>
+                        </div>
+
+                        <div class="col-12">
+                            <div class="form-check form-switch">
+                                <input class="form-check-input" type="checkbox" id="recommendCheck" checked>
+                                <label class="form-check-label fw-bold small" for="recommendCheck">
+                                    Polecam tego pilota innym koordynatorom biur podróży
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="modal-footer bg-light px-4 py-3 border-top">
+                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Anuluj</button>
+                    <button type="submit" class="btn btn-warning fw-bold px-4">
+                        <i class='bx bx-check'></i> Opublikuj oficjalną referencję
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<?php include __DIR__ . '/footer.php'; ?>
diff --git a/prototype/superpilot-web/sos-modal.php b/prototype/superpilot-web/sos-modal.php
new file mode 100644
index 0000000..5eff3df
--- /dev/null
+++ b/prototype/superpilot-web/sos-modal.php
@@ -0,0 +1,138 @@
+<!-- Modal Pilnego Zastępstwa SOS -->
+<div class="modal fade" id="sosModal" tabindex="-1" aria-labelledby="sosModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content border-0 shadow-lg" style="border-radius: var(--sp-radius-md); overflow: hidden;">
+            
+            <div class="modal-header text-white" style="background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);">
+                <div class="d-flex align-items-center gap-2">
+                    <div class="rounded-circle bg-white text-danger d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; font-size: 1.4rem;">
+                        <i class='bx bxs-alarm-exclamation'></i>
+                    </div>
+                    <div>
+                        <h5 class="modal-title fw-bold text-white mb-0" id="sosModalLabel">🚨 Tryb Awaryjny: Pilne Zastępstwo SOS</h5>
+                        <small class="text-white-50" style="font-size: 0.76rem;">Pilot zrezygnował w ostatniej chwili? Znajdź natychmiastowe zastępstwo w 15 minut</small>
+                    </div>
+                </div>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+            </div>
+
+            <div class="modal-body p-4">
+                
+                <!-- Kryteria nagłego wyjazdu -->
+                <form id="sosRequestForm">
+                    <div class="row g-3 mb-4">
+                        <div class="col-md-5">
+                            <label class="form-label fw-bold small text-muted">Kierunek wycieczki</label>
+                            <select class="form-select fw-semibold" id="sosCountrySelect">
+                                <option value="Włochy" selected>🇮🇹 Włochy (Objazdówka / Rzym)</option>
+                                <option value="Grecja">🇬🇷 Grecja (Cyklady / Peloponez)</option>
+                                <option value="Hiszpania">🇪🇸 Hiszpania (Andaluzja / Barcelona)</option>
+                                <option value="Chorwacja">🇭🇷 Chorwacja (Istria / Dalmacja)</option>
+                                <option value="Norwegia">🇳🇴 Norwegia (Fiordy)</option>
+                            </select>
+                        </div>
+
+                        <div class="col-md-4">
+                            <label class="form-label fw-bold small text-muted">Kiedy rusza autokar / lot?</label>
+                            <select class="form-select fw-semibold" id="sosTimeUrgency">
+                                <option value="24h" selected>⚡ W ciągu 24h (Dziś w nocy / Jutro rano)</option>
+                                <option value="48h">⏱️ W ciągu 48h</option>
+                                <option value="72h">📅 W ciągu 3 dni</option>
+                            </select>
+                        </div>
+
+                        <div class="col-md-3">
+                            <label class="form-label fw-bold small text-muted">Miejsce zbiórki</label>
+                            <input type="text" class="form-control fw-semibold" value="Warszawa / Katowice">
+                        </div>
+                    </div>
+
+                    <!-- Lista pilotów w trybie gotowości od zaraz (Standby Ready) -->
+                    <div class="mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <h6 class="fw-bold mb-0 text-navy" style="font-size: 0.9rem;">Piloci dyżurujący z natychmiastową dyspozycyjnością (4 dostępnych):</h6>
+                            <span class="badge bg-success-subtle text-success" style="font-size: 0.72rem;">🟢 Gotowi do spakowania w 2h</span>
+                        </div>
+
+                        <!-- Pilot 1: Oskar Kaczmarek (Spójny) -->
+                        <div class="card border mb-2 p-3 shadow-none hover-border-primary" style="background: #ffffff; border-radius: 10px;">
+                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
+                                <div class="d-flex align-items-center gap-3">
+                                    <div class="rounded-3 d-flex align-items-center justify-content-center text-white fw-bold" style="width: 44px; height: 44px; background: linear-gradient(135deg, #4f46e5, #7c3aed); font-size: 1.1rem;">
+                                        OK
+                                    </div>
+                                    <div>
+                                        <div class="d-flex align-items-center gap-2">
+                                            <h6 class="fw-bold mb-0 text-navy" style="font-size: 0.9rem;">Oskar Kaczmarek</h6>
+                                            <span class="badge bg-success" style="font-size: 0.65rem;">Superpilot Verified</span>
+                                            <span class="text-warning small fw-bold"><i class='bx bxs-star'></i> 4.9 (18 opinii)</span>
+                                        </div>
+                                        <small class="text-muted" style="font-size: 0.75rem;">Specjalizacja: Włochy (Ekspert) • Języki: Włoski (B2), Angielski (C1) • Paszport i uprawnienia aktualne</small>
+                                    </div>
+                                </div>
+                                <div class="d-flex align-items-center gap-2">
+                                    <a href="tel:+48600123456" class="btn btn-sm btn-outline-success fw-bold d-flex align-items-center gap-1" style="font-size: 0.78rem;">
+                                        <i class='bx bx-phone-call'></i> Zadzwoń: 600 123 456
+                                    </a>
+                                    <button type="button" class="btn btn-sm btn-danger fw-bold" onclick="openBookingModal('1', 'Oskar Kaczmarek', 'Pilne zastępstwo SOS: Jutro rano')">
+                                        <i class='bx bx-zap'></i> Wyślij SOS
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Pilot 2: Katarzyna Zielińska -->
+                        <div class="card border mb-2 p-3 shadow-none" style="background: #ffffff; border-radius: 10px;">
+                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
+                                <div class="d-flex align-items-center gap-3">
+                                    <div class="rounded-3 d-flex align-items-center justify-content-center text-white fw-bold" style="width: 44px; height: 44px; background: linear-gradient(135deg, #0ea5e9, #0284c7); font-size: 1.1rem;">
+                                        KZ
+                                    </div>
+                                    <div>
+                                        <div class="d-flex align-items-center gap-2">
+                                            <h6 class="fw-bold mb-0 text-navy" style="font-size: 0.9rem;">Katarzyna Zielińska</h6>
+                                            <span class="badge bg-info-subtle text-info" style="font-size: 0.65rem;">Kwalifikowana Pierwsza Pomoc</span>
+                                            <span class="text-warning small fw-bold"><i class='bx bxs-star'></i> 4.8 (15 opinii)</span>
+                                        </div>
+                                        <small class="text-muted" style="font-size: 0.75rem;">Specjalizacja: Bałkany, Włochy Północne • Języki: Angielski (C1), Włoski (B1) • Dyspozycyjna od zaraz</small>
+                                    </div>
+                                </div>
+                                <div class="d-flex align-items-center gap-2">
+                                    <a href="tel:+48601987654" class="btn btn-sm btn-outline-success fw-bold d-flex align-items-center gap-1" style="font-size: 0.78rem;">
+                                        <i class='bx bx-phone-call'></i> Zadzwoń: 601 987 654
+                                    </a>
+                                    <button type="button" class="btn btn-sm btn-danger fw-bold" onclick="openBookingModal('4', 'Katarzyna Zielińska', 'Pilne zastępstwo SOS: Jutro rano')">
+                                        <i class='bx bx-zap'></i> Wyślij SOS
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+
+                    <!-- Masowy broadcast SOS -->
+                    <div class="p-3 rounded-3 mt-3 text-white" style="background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);">
+                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
+                            <div>
+                                <div class="fw-bold" style="font-size: 0.9rem;">
+                                    <i class='bx bx-broadcast text-warning me-1'></i> Masowy Broadcast SOS do wszystkich wolnych pilotów na kierunek Włochy
+                                </div>
+                                <small class="text-white-50" style="font-size: 0.74rem;">Wyśle równoległy alert Push & SMS do 12 pilotów spełniających wymagania. Pierwszy, który zaakceptuje, przejmuje zlecenie.</small>
+                            </div>
+                            <button type="submit" class="btn btn-warning fw-bold px-4 py-2" style="font-size: 0.85rem;">
+                                <i class='bx bx-send'></i> Roześlij masowy alert SOS
+                            </button>
+                        </div>
+                    </div>
+
+                </form>
+
+            </div>
+
+            <div class="modal-footer bg-light px-4 py-2 border-top">
+                <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Zamknij</button>
+            </div>
+
+        </div>
+    </div>
+</div>
diff --git a/prototype/travel/menu.php b/prototype/travel/menu.php
index a6e1371..94b331d 100644
--- a/prototype/travel/menu.php
+++ b/prototype/travel/menu.php
@@ -31,6 +31,13 @@ $systemPages = ['app-dictionary.php', 'app-template.php', 'app-employee.php', 'a
                     <div data-i18n="Dostawcy usług">Dostawcy usług</div>
                 </a>
             </li>
+            <li class="menu-item">
+                <a href="../superpilot-web/index.php" class="menu-link text-primary fw-semibold">
+                    <i class="menu-icon tf-icons bx bx-compass text-primary"></i>
+                    <div data-i18n="Baza Pilotów">Baza Pilotów Superpilot</div>
+                    <span class="badge bg-label-primary rounded-pill ms-auto" style="font-size: 0.65rem;">NOWOŚĆ</span>
+                </a>
+            </li>
 
             <li class="menu-item <?php echo in_array($currentPage, $clientsPages, true) ? 'active open' : ''; ?>">
                 <a href="javascript:void(0);" class="menu-link menu-toggle">
diff --git a/prototype/travelleader-mobile/assets/css/style.css b/prototype/travelleader-mobile/assets/css/style.css
new file mode 100644
index 0000000..28f83cf
--- /dev/null
+++ b/prototype/travelleader-mobile/assets/css/style.css
@@ -0,0 +1,1063 @@
+:root {
+    --primary: #5c60f5;
+    --primary-hover: #484cdb;
+    --primary-light: #eff0fe;
+    --primary-border: #dadafa;
+    --secondary: #6c757d;
+    --dark-navy: #1f2244;
+    --text-body: #3c4262;
+    --text-muted: #858da3;
+    --text-light: #b4bac9;
+    --bg-page: #f5f6fb;
+    --bg-card: #ffffff;
+    --border-color: #eaedf7;
+    --radius-sm: 10px;
+    --radius-md: 16px;
+    --radius-lg: 22px;
+    --radius-full: 9999px;
+    --shadow-subtle: 0 4px 18px rgba(92, 96, 245, 0.06);
+    --shadow-card: 0 4px 18px rgba(31, 34, 68, 0.05);
+    --shadow-elevated: 0 10px 30px rgba(92, 96, 245, 0.12);
+    --bottom-nav-height: 64px;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    color: var(--text-body);
+    -webkit-font-smoothing: antialiased;
+    background-color: #e5e8f2;
+}
+
+/* Container & Phone Frame */
+.phone-viewport-wrapper {
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 24px 10px;
+}
+
+.phone-screen {
+    width: 100%;
+    max-width: 440px;
+    height: 860px;
+    max-height: calc(100vh - 48px);
+    background-color: var(--bg-page);
+    border-radius: 36px;
+    box-shadow: 0 20px 60px rgba(25, 28, 62, 0.18), 0 0 0 10px #1e2133;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+/* Mobile & DevTools Mobile View: Native full-screen feel */
+@media (max-width: 540px) {
+    .phone-viewport-wrapper {
+        padding: 0;
+        min-height: 100%;
+        height: 100%;
+        align-items: flex-start;
+    }
+
+    .phone-screen {
+        max-width: 100%;
+        height: 100dvh;
+        max-height: 100dvh;
+        border-radius: 0;
+        box-shadow: none;
+    }
+
+    .phone-status-bar {
+        display: none !important;
+    }
+}
+
+/* Status Bar (desktop frame only) */
+.phone-status-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 20px 6px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--dark-navy);
+    background-color: var(--bg-page);
+    flex-shrink: 0;
+    z-index: 20;
+}
+
+.phone-status-bar .icons {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    font-size: 0.95rem;
+}
+
+/* App Header */
+.app-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 18px 10px;
+    background-color: var(--bg-page);
+    flex-shrink: 0;
+    border-bottom: 1px solid rgba(234, 237, 247, 0.6);
+}
+
+.brand-logo-area {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    text-decoration: none;
+}
+
+.brand-icon-box {
+    width: 38px;
+    height: 38px;
+    background: linear-gradient(135deg, #5c60f5, #777bfb);
+    border-radius: 11px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.4rem;
+    box-shadow: 0 4px 10px rgba(92, 96, 245, 0.3);
+}
+
+.brand-name {
+    font-size: 1.35rem;
+    font-weight: 800;
+    color: var(--primary);
+    letter-spacing: -0.5px;
+}
+
+.header-user-profile {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    text-decoration: none;
+}
+
+.header-user-info {
+    text-align: right;
+    line-height: 1.25;
+}
+
+.header-user-email {
+    font-size: 0.82rem;
+    font-weight: 700;
+    color: var(--dark-navy);
+}
+
+.header-user-role {
+    font-size: 0.72rem;
+    color: var(--text-muted);
+}
+
+.header-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background-color: #5a6479;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    border: 2px solid white;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+}
+
+/* Scrollable Content Area */
+.app-content {
+    flex: 1;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 14px 16px calc(var(--bottom-nav-height) + 16px);
+}
+
+/* System Ribbon Bar (Opcja 3: Wstążka systemowa pod nagłówkiem na pełną szerokość) */
+.system-ribbon-bar {
+    background: linear-gradient(90deg, #4f53e8 0%, #686cf7 100%);
+    color: white;
+    padding: 8px 18px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    flex-shrink: 0;
+    box-shadow: 0 2px 8px rgba(79, 83, 232, 0.18);
+    position: relative;
+    z-index: 10;
+}
+
+.ribbon-badge {
+    background: rgba(255, 255, 255, 0.22);
+    color: white;
+    font-size: 0.72rem;
+    font-weight: 800;
+    padding: 2px 7px;
+    border-radius: 99px;
+    border: 1px solid rgba(255, 255, 255, 0.35);
+    line-height: 1.2;
+}
+
+.ribbon-text {
+    font-size: 0.78rem;
+    line-height: 1.25;
+    color: rgba(255, 255, 255, 0.95);
+}
+
+.ribbon-sub {
+    color: rgba(255, 255, 255, 0.82);
+    font-size: 0.72rem;
+}
+
+.btn-ribbon-action {
+    background: rgba(255, 255, 255, 0.95);
+    color: #4f53e8;
+    padding: 4px 12px;
+    border-radius: var(--radius-full);
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-decoration: none;
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    transition: all 0.2s ease;
+}
+
+.btn-ribbon-action:hover {
+    background: white;
+    color: #383cc7;
+    transform: scale(1.03);
+}
+
+.btn-ribbon-close {
+    background: transparent;
+    border: none;
+    color: rgba(255, 255, 255, 0.75);
+    font-size: 1.2rem;
+    padding: 0;
+    line-height: 1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s ease;
+}
+
+.btn-ribbon-close:hover {
+    color: white;
+}
+
+/* Search Card */
+.search-filter-card {
+    background: white;
+    border-radius: var(--radius-md);
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    box-shadow: var(--shadow-card);
+    margin-bottom: 14px;
+    border: 1px solid var(--border-color);
+}
+
+.search-filter-icon {
+    width: 42px;
+    height: 42px;
+    background-color: var(--primary-light);
+    color: var(--primary);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25rem;
+}
+
+.search-filter-text h6 {
+    margin: 0;
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: var(--dark-navy);
+}
+
+.search-filter-text small {
+    color: var(--text-muted);
+    font-size: 0.76rem;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+/* Tabs & Switchers */
+.trips-tabs-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 14px;
+}
+
+.nav-pills-custom {
+    display: flex;
+    gap: 6px;
+}
+
+.nav-pill-item {
+    border: none;
+    background: transparent;
+    padding: 7px 12px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    border-radius: var(--radius-full);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+    text-decoration: none;
+}
+
+.nav-pill-item.active {
+    color: var(--primary);
+    background-color: rgba(92, 96, 245, 0.09);
+}
+
+.nav-pill-item .badge-count {
+    background: #e9ebf6;
+    color: var(--text-muted);
+    font-size: 0.72rem;
+    padding: 2px 7px;
+    border-radius: 99px;
+}
+
+.nav-pill-item.active .badge-count {
+    background: var(--primary);
+    color: white;
+}
+
+.view-toggle-group {
+    background: white;
+    border-radius: var(--radius-full);
+    padding: 3px;
+    display: flex;
+    border: 1px solid var(--border-color);
+}
+
+.view-toggle-btn {
+    border: none;
+    background: transparent;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.1rem;
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.view-toggle-btn.active {
+    background-color: var(--primary-light);
+    color: var(--primary);
+}
+
+/* Trip Card */
+.trip-card {
+    background: white;
+    border-radius: var(--radius-md);
+    padding: 16px;
+    box-shadow: var(--shadow-card);
+    margin-bottom: 14px;
+    border: 1px solid var(--border-color);
+    position: relative;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.trip-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-elevated);
+}
+
+.trip-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 12px;
+}
+
+.trip-id-badge {
+    width: 36px;
+    height: 36px;
+    background: linear-gradient(135deg, #5c60f5, #7579f6);
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 800;
+    font-size: 0.92rem;
+    flex-shrink: 0;
+}
+
+.trip-title-area {
+    margin-left: 10px;
+    flex-grow: 1;
+}
+
+.trip-title {
+    font-size: 1rem;
+    font-weight: 800;
+    color: var(--dark-navy);
+    margin: 0 0 2px;
+}
+
+.trip-status-pill {
+    text-align: right;
+}
+
+.badge-status {
+    background-color: #edeefe;
+    color: var(--primary);
+    font-size: 0.72rem;
+    font-weight: 700;
+    padding: 4px 10px;
+    border-radius: 6px;
+    display: inline-block;
+}
+
+.status-subtext {
+    font-size: 0.72rem;
+    color: var(--text-muted);
+    margin-top: 3px;
+}
+
+.trip-info-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.84rem;
+    color: var(--text-body);
+    margin-bottom: 8px;
+}
+
+.trip-info-row i {
+    font-size: 1.05rem;
+    color: #ef4444;
+}
+
+.trip-info-row i.bx-group {
+    color: #3b82f6;
+}
+
+.trip-info-row i.bx-map {
+    color: #10b981;
+}
+
+.trip-card-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid #f0f2f8;
+    padding-top: 10px;
+    margin-top: 10px;
+}
+
+.trip-code {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.btn-details {
+    border: 1px solid var(--primary);
+    color: var(--primary);
+    background: transparent;
+    padding: 5px 14px;
+    border-radius: var(--radius-sm);
+    font-size: 0.8rem;
+    font-weight: 700;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    transition: all 0.2s;
+}
+
+.btn-details:hover {
+    background: var(--primary);
+    color: white;
+}
+
+/* Fixed Bottom Navigation Bar */
+.bottom-nav-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: var(--bottom-nav-height);
+    background: white;
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    z-index: 1000;
+    padding: 2px 10px 4px;
+    flex-shrink: 0;
+}
+
+@media (max-width: 540px) {
+    .bottom-nav-bar {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        padding-bottom: max(4px, env(safe-area-inset-bottom));
+        box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
+    }
+}
+
+.bottom-nav-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    color: var(--text-muted);
+    font-size: 0.72rem;
+    font-weight: 600;
+    padding: 4px 10px;
+    border-radius: 12px;
+    transition: all 0.2s;
+    position: relative;
+    flex: 1;
+    text-align: center;
+}
+
+.bottom-nav-item i {
+    font-size: 1.45rem;
+    margin-bottom: 2px;
+    transition: transform 0.2s;
+    display: block;
+    line-height: 1;
+}
+
+.bottom-nav-item.active {
+    color: var(--primary);
+}
+
+.bottom-nav-item.active i {
+    transform: translateY(-2px);
+}
+
+.bottom-nav-item .nav-indicator {
+    position: absolute;
+    top: 4px;
+    right: calc(50% - 14px);
+    width: 6px;
+    height: 6px;
+    background-color: #ef4444;
+    border-radius: 50%;
+}
+
+/* Profile Specific Components */
+.profile-hero {
+    background: linear-gradient(180deg, #ffffff 0%, #f6f7fd 100%);
+    border-radius: var(--radius-lg);
+    padding: 20px 16px 16px;
+    text-align: center;
+    border: 1px solid var(--border-color);
+    margin-bottom: 14px;
+    box-shadow: var(--shadow-card);
+    position: relative;
+}
+
+.profile-avatar-container {
+    position: relative;
+    width: 90px;
+    height: 90px;
+    margin: 0 auto 12px;
+}
+
+.profile-avatar-img {
+    width: 90px;
+    height: 90px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 3px solid white;
+    box-shadow: 0 4px 14px rgba(92, 96, 245, 0.25);
+}
+
+.profile-verified-badge {
+    position: absolute;
+    bottom: 2px;
+    right: 2px;
+    background: #10b981;
+    color: white;
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    border: 2px solid white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.9rem;
+}
+
+.profile-name {
+    font-size: 1.3rem;
+    font-weight: 800;
+    color: var(--dark-navy);
+    margin-bottom: 2px;
+}
+
+.profile-tagline {
+    font-size: 0.82rem;
+    color: var(--text-muted);
+    margin-bottom: 10px;
+}
+
+.rating-badge-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background-color: #fff9e6;
+    color: #b45309;
+    border: 1px solid #fef3c7;
+    padding: 4px 12px;
+    border-radius: var(--radius-full);
+    font-size: 0.82rem;
+    font-weight: 700;
+    margin-bottom: 12px;
+}
+
+.rating-badge-pill i {
+    color: #f59e0b;
+    font-size: 1rem;
+}
+
+.visibility-toggle-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: white;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    padding: 10px 14px;
+    margin-bottom: 14px;
+    box-shadow: var(--shadow-subtle);
+}
+
+/* Nowoczesny przełącznik widoczności w edycji profilu */
+.visibility-status-pill-card {
+    background: white;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    padding: 11px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-shadow: var(--shadow-subtle);
+}
+
+.status-indicator-dot {
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background-color: #cbd5e1;
+    display: inline-block;
+    transition: all 0.2s ease;
+}
+
+.status-indicator-dot.active {
+    background-color: #10b981;
+    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
+}
+
+.section-card {
+    background: white;
+    border-radius: var(--radius-md);
+    padding: 16px;
+    margin-bottom: 14px;
+    box-shadow: var(--shadow-card);
+    border: 1px solid var(--border-color);
+}
+
+.section-title {
+    font-size: 0.92rem;
+    font-weight: 800;
+    color: var(--dark-navy);
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.chip-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background-color: #f1f3fa;
+    color: var(--text-body);
+    font-size: 0.8rem;
+    font-weight: 600;
+    padding: 5px 12px;
+    border-radius: var(--radius-full);
+    margin: 3px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    user-select: none;
+}
+
+.chip-tag.primary {
+    background-color: var(--primary-light);
+    color: var(--primary);
+    border-color: var(--primary-border);
+}
+
+/* Media Gallery */
+.media-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+}
+
+.media-thumbnail {
+    width: 100%;
+    aspect-ratio: 1;
+    border-radius: 12px;
+    object-fit: cover;
+    background-color: #e9ebf6;
+    position: relative;
+    overflow: hidden;
+}
+
+.video-card-preview {
+    width: 100%;
+    height: 130px;
+    border-radius: var(--radius-md);
+    background: linear-gradient(135deg, #1f2244, #3a3f70);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    margin-bottom: 10px;
+    position: relative;
+    cursor: pointer;
+    box-shadow: 0 4px 14px rgba(31, 34, 68, 0.2);
+}
+
+.video-play-btn {
+    width: 42px;
+    height: 42px;
+    background: white;
+    color: var(--primary);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.4rem;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+    margin-bottom: 6px;
+}
+
+/* Kalendarz Wycieczek w widoku głównym (odtworzony ze zrzutów ekranu) */
+.trips-calendar-container {
+    background: white;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-color);
+    box-shadow: var(--shadow-card);
+    padding: 16px 12px;
+    margin-bottom: 16px;
+}
+
+.month-title-header {
+    text-align: center;
+    font-size: 0.92rem;
+    font-weight: 800;
+    color: var(--dark-navy);
+    letter-spacing: 0.5px;
+    margin-bottom: 14px;
+}
+
+.calendar-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.calendar-table th {
+    text-align: center;
+    font-size: 0.74rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    padding: 6px 2px;
+}
+
+.calendar-table td {
+    height: 52px;
+    vertical-align: top;
+    text-align: center;
+    padding: 3px 1px;
+    font-size: 0.78rem;
+    color: var(--dark-navy);
+    border: 1px solid #f1f3f9;
+    position: relative;
+    cursor: pointer;
+}
+
+.calendar-table td.other-month {
+    color: var(--text-light);
+    background-color: #fafbfe;
+}
+
+.calendar-table td:hover {
+    background-color: #f6f8ff;
+}
+
+.day-number {
+    display: inline-block;
+    font-weight: 600;
+    margin-bottom: 2px;
+}
+
+/* Ciągła fioletowa wstęga wycieczki jak na zrzucie */
+.trip-ribbon-bar {
+    background-color: #5c60f5;
+    color: white;
+    font-size: 0.64rem;
+    font-weight: 700;
+    padding: 3px 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    margin: 1px -1px;
+    cursor: pointer;
+}
+
+.trip-ribbon-start {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+.trip-ribbon-end {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+/* Bottom Sheet Modal jak na zrzucie */
+.bottom-sheet-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.45);
+    backdrop-filter: blur(2px);
+    z-index: 1050;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.25s ease;
+}
+
+.bottom-sheet-backdrop.active {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.bottom-sheet-content {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: white;
+    border-top-left-radius: 26px;
+    border-top-right-radius: 26px;
+    padding: 14px 20px 24px;
+    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
+    z-index: 1060;
+    transform: translateY(100%);
+    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.bottom-sheet-content.active {
+    transform: translateY(0);
+}
+
+.sheet-drag-handle {
+    width: 36px;
+    height: 4px;
+    background-color: #d1d5db;
+    border-radius: 99px;
+    margin: 0 auto 12px;
+}
+
+.calendar-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 5px;
+    text-align: center;
+}
+
+.calendar-day-header {
+    font-size: 0.74rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    padding-bottom: 4px;
+}
+
+.calendar-day-cell {
+    aspect-ratio: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    background: #f8f9fd;
+    border: 1px solid transparent;
+    cursor: pointer;
+    position: relative;
+}
+
+.calendar-day-cell.other-month {
+    color: var(--text-light);
+    opacity: 0.5;
+}
+
+.calendar-day-cell.trip-day {
+    background-color: #eff0fe;
+    color: var(--primary);
+    border-color: #c7caff;
+    font-weight: 800;
+}
+
+.calendar-day-cell.blocked-day {
+    background-color: #fee2e2;
+    color: #ef4444;
+    border-color: #fecaca;
+    font-weight: 800;
+}
+
+.calendar-day-cell.free-day {
+    background-color: #f0fdf4;
+    color: #15803d;
+    border-color: #bbf7d0;
+}
+
+.calendar-day-dot {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    position: absolute;
+    bottom: 3px;
+}
+
+.calendar-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid var(--border-color);
+    font-size: 0.74rem;
+    color: var(--text-muted);
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.legend-color-box {
+    width: 11px;
+    height: 11px;
+    border-radius: 3px;
+}
+
+/* Form Controls */
+.form-label-custom {
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: var(--dark-navy);
+    margin-bottom: 5px;
+    display: block;
+}
+
+.form-control-custom {
+    width: 100%;
+    padding: 9px 13px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-color);
+    background-color: #fafbfe;
+    font-size: 0.86rem;
+    color: var(--text-body);
+    transition: border-color 0.2s;
+}
+
+.form-control-custom:focus {
+    outline: none;
+    border-color: var(--primary);
+    background-color: white;
+}
+
+/* Action Buttons */
+.btn-primary-custom {
+    background: linear-gradient(135deg, #5c60f5, #6c70fc);
+    border: none;
+    color: white;
+    font-weight: 700;
+    padding: 11px 18px;
+    border-radius: var(--radius-md);
+    box-shadow: 0 4px 14px rgba(92, 96, 245, 0.35);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    text-decoration: none;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.btn-primary-custom:hover {
+    background: linear-gradient(135deg, #4d51ec, #5c60f5);
+    color: white;
+    transform: translateY(-1px);
+}
+
+.btn-secondary-custom {
+    background: #f1f3fa;
+    border: 1px solid var(--border-color);
+    color: var(--text-body);
+    font-weight: 700;
+    padding: 9px 14px;
+    border-radius: var(--radius-md);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.btn-secondary-custom:hover {
+    background: #e4e7f3;
+    color: var(--dark-navy);
+}
diff --git a/prototype/travelleader-mobile/availability.php b/prototype/travelleader-mobile/availability.php
new file mode 100644
index 0000000..8c3ac46
--- /dev/null
+++ b/prototype/travelleader-mobile/availability.php
@@ -0,0 +1,188 @@
+<?php
+$enablePrototypeComments = true;
+$pageTitle = 'TravelLeader - Kalendarz Dostępności';
+include 'header.php';
+?>
+
+<div class="app-content">
+
+    <!-- Nagłówek widoku dostępności -->
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <div>
+            <h5 class="fw-bold mb-0" style="color: var(--dark-navy);">Dostępność Pilota</h5>
+            <small class="text-muted" style="font-size: 0.78rem;">Zarządzaj terminami dla biur podróży</small>
+        </div>
+        <button type="button" class="btn btn-sm btn-primary-custom py-1 px-3" style="width: auto; font-size: 0.8rem;" data-bs-toggle="modal" data-bs-target="#addUnavailableModal">
+            <i class='bx bx-plus'></i> Dodaj blokadę
+        </button>
+    </div>
+
+    <!-- Główna karta kalendarza -->
+    <div class="section-card">
+        <div class="calendar-month-header">
+            <button class="btn btn-sm btn-light rounded-circle p-2 d-flex align-items-center"><i class='bx bx-chevron-left fs-5'></i></button>
+            <h6 class="fw-bold mb-0" style="color: var(--dark-navy); font-size: 1rem;">Wrzesień 2027</h6>
+            <button class="btn btn-sm btn-light rounded-circle p-2 d-flex align-items-center"><i class='bx bx-chevron-right fs-5'></i></button>
+        </div>
+
+        <!-- Siatka kalendarza -->
+        <div class="calendar-grid mb-2">
+            <div class="calendar-day-header">Pn</div>
+            <div class="calendar-day-header">Wt</div>
+            <div class="calendar-day-header">Śr</div>
+            <div class="calendar-day-header">Cz</div>
+            <div class="calendar-day-header">Pt</div>
+            <div class="calendar-day-header">Sb</div>
+            <div class="calendar-day-header">Nd</div>
+
+            <!-- Dni poprzedniego miesiąca -->
+            <div class="calendar-day-cell other-month">30</div>
+            <div class="calendar-day-cell other-month">31</div>
+
+            <!-- Dni września -->
+            <div class="calendar-day-cell blocked-day" title="Urlop prywatny">1</div>
+            <div class="calendar-day-cell blocked-day" title="Urlop prywatny">2</div>
+            <div class="calendar-day-cell blocked-day" title="Urlop prywatny">3</div>
+            <div class="calendar-day-cell blocked-day" title="Urlop prywatny">4</div>
+            <div class="calendar-day-cell free-day">5 <span class="calendar-day-dot bg-success"></span></div>
+
+            <div class="calendar-day-cell free-day">6 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">7 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">8 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">9 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">10 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">11 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">12 <span class="calendar-day-dot bg-success"></span></div>
+
+            <div class="calendar-day-cell free-day">13 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">14 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">15 <span class="calendar-day-dot bg-success"></span></div>
+
+            <!-- Wycieczka z systemu: 16-24.09.2027 -->
+            <div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">16 <span class="calendar-day-dot bg-primary"></span></div>
+            <div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">17 <span class="calendar-day-dot bg-primary"></span></div>
+            <div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">18 <span class="calendar-day-dot bg-primary"></span></div>
+            <div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">19 <span class="calendar-day-dot bg-primary"></span></div>
+
+            <div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">20 <span class="calendar-day-dot bg-primary"></span></div>
+            <div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">21 <span class="calendar-day-dot bg-primary"></span></div>
+            <div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">22 <span class="calendar-day-dot bg-primary"></span></div>
+            <div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">23 <span class="calendar-day-dot bg-primary"></span></div>
+            <div class="calendar-day-cell trip-day" title="Wycieczka: 12 oskar prod">24 <span class="calendar-day-dot bg-primary"></span></div>
+
+            <div class="calendar-day-cell free-day">25 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">26 <span class="calendar-day-dot bg-success"></span></div>
+
+            <div class="calendar-day-cell free-day">27 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">28 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">29 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell free-day">30 <span class="calendar-day-dot bg-success"></span></div>
+            <div class="calendar-day-cell other-month">1</div>
+            <div class="calendar-day-cell other-month">2</div>
+            <div class="calendar-day-cell other-month">3</div>
+        </div>
+
+        <!-- Legenda -->
+        <div class="calendar-legend">
+            <div class="legend-item">
+                <div class="legend-color-box" style="background-color: var(--primary);"></div>
+                <span>Wycieczka potwierdzona</span>
+            </div>
+            <div class="legend-item">
+                <div class="legend-color-box" style="background-color: #ef4444;"></div>
+                <span>Niedostępny / Urlop</span>
+            </div>
+            <div class="legend-item">
+                <div class="legend-color-box" style="background-color: #22c55e;"></div>
+                <span>Dostępny dla biur</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Lista wpisów w wybranym miesiącu -->
+    <h6 class="fw-bold mb-2 mt-3" style="color: var(--dark-navy); font-size: 0.9rem;">Wydarzenia we Wrześniu 2027</h6>
+
+    <!-- Wycieczka potwierdzona -->
+    <div class="card border-0 rounded-4 p-3 mb-2 shadow-sm" style="background: #ffffff; border-left: 4px solid var(--primary) !important;">
+        <div class="d-flex justify-content-between align-items-start">
+            <div>
+                <span class="badge mb-1" style="background: #eff0fe; color: var(--primary); font-size: 0.72rem;">Wycieczka przypisana</span>
+                <h6 class="fw-bold mb-1" style="font-size: 0.92rem; color: var(--dark-navy);">12 oskar prod (Włochy)</h6>
+                <small class="text-muted d-block" style="font-size: 0.76rem;"><i class='bx bx-time-five'></i> 16 - 24 Września 2027 (9 dni)</small>
+            </div>
+            <a href="index.php" class="btn btn-sm btn-outline-primary py-1 px-2" style="font-size: 0.75rem;">Wycieczka &gt;</a>
+        </div>
+    </div>
+
+    <!-- Prywatna niedostępność -->
+    <div class="card border-0 rounded-4 p-3 mb-3 shadow-sm" style="background: #ffffff; border-left: 4px solid #ef4444 !important;">
+        <div class="d-flex justify-content-between align-items-start">
+            <div>
+                <span class="badge mb-1" style="background: #fee2e2; color: #ef4444; font-size: 0.72rem;">Niedostępność pilota</span>
+                <h6 class="fw-bold mb-1" style="font-size: 0.92rem; color: var(--dark-navy);">Urlop prywatny / sprawy rodzinne</h6>
+                <small class="text-muted d-block" style="font-size: 0.76rem;"><i class='bx bx-time-five'></i> 01 - 04 Września 2027 (4 dni)</small>
+            </div>
+            <button class="btn btn-sm btn-outline-danger py-1 px-2" style="font-size: 0.75rem;" onclick="confirm('Czy chcesz usunąć tę blokadę terminu?')"><i class='bx bx-trash'></i></button>
+        </div>
+    </div>
+
+    <!-- Informacja o integracji z bazą biur -->
+    <div class="p-3 rounded-4" style="background-color: #f1f3fa;">
+        <div class="d-flex align-items-center gap-2 mb-1">
+            <i class='bx bx-info-circle text-primary fs-5'></i>
+            <span class="fw-bold" style="font-size: 0.82rem; color: var(--dark-navy);">Jak działa to dla biur podróży?</span>
+        </div>
+        <p class="text-muted mb-0" style="font-size: 0.75rem; line-height: 1.4;">
+            Wyszukiwarka w aplikacji webowej pozwala pracownikowi biura wybrać np. „Termin: 05-15 Wrz 2027 + Kraj: Włochy”. Twój profil pojawi się na szczycie wyników, ponieważ zaznaczyłeś te dni jako wolne!
+        </p>
+    </div>
+
+</div><!-- /.app-content -->
+
+<!-- Modal dodawania niedostępności -->
+<div class="modal fade" id="addUnavailableModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content rounded-4 border-0">
+            <div class="modal-header border-bottom">
+                <h6 class="modal-title fw-bold" style="color: var(--dark-navy);">Zgłoś niedostępność / Urlop</h6>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+            </div>
+            <div class="modal-body p-3">
+                <div class="mb-3">
+                    <label class="form-label-custom">Powód niedostępności</label>
+                    <select class="form-select form-control-custom">
+                        <option selected>Urlop prywatny</option>
+                        <option>Zlecenie poza systemem</option>
+                        <option>Szkolenie / Egzamin</option>
+                        <option>Sprawy zdrowotne</option>
+                        <option>Inny powód</option>
+                    </select>
+                </div>
+
+                <div class="row g-2 mb-3">
+                    <div class="col-6">
+                        <label class="form-label-custom">Data od</label>
+                        <input type="date" class="form-control-custom" value="2027-10-01">
+                    </div>
+                    <div class="col-6">
+                        <label class="form-label-custom">Data do</label>
+                        <input type="date" class="form-control-custom" value="2027-10-08">
+                    </div>
+                </div>
+
+                <div class="mb-2">
+                    <label class="form-label-custom">Notatka prywatna (opcjonalnie)</label>
+                    <textarea class="form-control-custom" rows="2" placeholder="Widoczna tylko dla Ciebie..."></textarea>
+                </div>
+            </div>
+            <div class="modal-footer border-top p-2">
+                <button type="button" class="btn btn-secondary-custom py-2 flex-grow-1" data-bs-dismiss="modal">Anuluj</button>
+                <button type="button" class="btn-primary-custom py-2 flex-grow-1" data-bs-dismiss="modal" onclick="alert('Pomyślnie zablokowano termin w kalendarzu. Biura nie będą wysyłać zapytań na ten okres.');">
+                    Zapisz termin
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<?php include 'footer.php'; ?>
diff --git a/prototype/travelleader-mobile/courses.php b/prototype/travelleader-mobile/courses.php
new file mode 100644
index 0000000..0141692
--- /dev/null
+++ b/prototype/travelleader-mobile/courses.php
@@ -0,0 +1,174 @@
+<?php
+$enablePrototypeComments = true;
+$pageTitle = 'TravelLeader - Szkolenia i Certyfikaty';
+include 'header.php';
+?>
+
+<div class="app-content">
+
+    <!-- Nagłówek szkoleń (Czysty, minimalistyczny, bez zbędnych odznak) -->
+    <div class="mb-3">
+        <h5 class="fw-bold mb-0" style="color: var(--dark-navy);">Szkolenia & Certyfikaty</h5>
+        <small class="text-muted" style="font-size: 0.76rem;">Kursy podnoszące rangę profilu w bazie biur podróży</small>
+    </div>
+
+    <!-- Przełącznik zakładek (Segmented control) -->
+    <div class="d-flex p-1 rounded-3 mb-3" style="background: #eef1f8;">
+        <button type="button" id="tabCoursesBtn" class="btn btn-sm flex-fill fw-bold rounded-2 py-1" style="font-size: 0.78rem; background: white; color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,0.06);" onclick="switchCourseTab('courses');">
+            Dostępne kursy (3)
+        </button>
+        <button type="button" id="tabCertsBtn" class="btn btn-sm flex-fill fw-bold rounded-2 py-1 text-muted" style="font-size: 0.78rem;" onclick="switchCourseTab('certs');">
+            Moje certyfikaty (2)
+        </button>
+    </div>
+
+    <!-- SEKCJA 1: Dostępne kursy (Czyste karty, bez wielopoziomowych pięter) -->
+    <div id="sectionCourses">
+        
+        <!-- Kurs 1 -->
+        <div class="section-card mb-2 p-3">
+            <div class="d-flex justify-content-between align-items-center mb-1">
+                <span class="badge" style="background: #eff0fe; color: var(--primary); font-size: 0.68rem; font-weight: 700;">
+                    WŁOCHY
+                </span>
+                <span class="fw-bold text-dark" style="font-size: 0.82rem;">199 PLN</span>
+            </div>
+
+            <h6 class="fw-bold mb-1" style="font-size: 0.9rem; color: var(--dark-navy);">
+                Włochy Północne & Dolomity 2027
+            </h6>
+            <p class="text-muted mb-2" style="font-size: 0.75rem; line-height: 1.35;">
+                Prowadzący: Janek. Warsztaty z logistyki autokarowej, stref ZTL i nowych szlaków.
+            </p>
+
+            <div class="d-flex justify-content-between align-items-center pt-2 border-top">
+                <small class="text-muted" style="font-size: 0.72rem;">
+                    <i class='bx bx-calendar'></i> 24.10 • 4h online
+                </small>
+                <button class="btn btn-sm btn-primary-custom py-1 px-3" style="width: auto; font-size: 0.74rem;" onclick="alert('Zapis na szkolenie przez TravelPay.');">
+                    Zapisz się &gt;
+                </button>
+            </div>
+        </div>
+
+        <!-- Kurs 2 -->
+        <div class="section-card mb-2 p-3">
+            <div class="d-flex justify-content-between align-items-center mb-1">
+                <span class="badge bg-warning-subtle text-warning-emphasis" style="font-size: 0.68rem; font-weight: 700;">
+                    RAINBOW TOURS
+                </span>
+                <span class="badge bg-success-subtle text-success fw-bold" style="font-size: 0.68rem;">BEZPŁATNE</span>
+            </div>
+
+            <h6 class="fw-bold mb-1" style="font-size: 0.9rem; color: var(--dark-navy);">
+                Standardy obsługi imprez objazdowych
+            </h6>
+            <p class="text-muted mb-2" style="font-size: 0.75rem; line-height: 1.35;">
+                Szkolenie produktowe biura podróży dla pilotów szukających kontraktów na sezon.
+            </p>
+
+            <div class="d-flex justify-content-between align-items-center pt-2 border-top">
+                <small class="text-muted" style="font-size: 0.72rem;">
+                    <i class='bx bx-video'></i> VOD • 2h
+                </small>
+                <button class="btn btn-sm btn-secondary-custom py-1 px-3" style="width: auto; font-size: 0.74rem;" onclick="alert('Dostęp do materiałów VOD został odblokowany.');">
+                    Dołącz &gt;
+                </button>
+            </div>
+        </div>
+
+        <!-- Kurs 3 -->
+        <div class="section-card mb-3 p-3">
+            <div class="d-flex justify-content-between align-items-center mb-1">
+                <span class="badge bg-light text-muted" style="font-size: 0.68rem; font-weight: 700;">
+                    PRAWO & PROCEDURY
+                </span>
+                <span class="fw-bold text-dark" style="font-size: 0.82rem;">149 PLN</span>
+            </div>
+
+            <h6 class="fw-bold mb-1" style="font-size: 0.9rem; color: var(--dark-navy);">
+                Prawo w turystyce & reklamacje
+            </h6>
+            <p class="text-muted mb-2" style="font-size: 0.75rem; line-height: 1.35;">
+                Procedury awaryjne, ubezpieczenia i rozwiązywanie trudnych sytuacji z turystami.
+            </p>
+
+            <div class="d-flex justify-content-between align-items-center pt-2 border-top">
+                <small class="text-muted" style="font-size: 0.72rem;">
+                    <i class='bx bx-calendar'></i> 12.11 • Webinar
+                </small>
+                <button class="btn btn-sm btn-primary-custom py-1 px-3" style="width: auto; font-size: 0.74rem;" onclick="alert('Zapis na webinar.');">
+                    Zapisz się &gt;
+                </button>
+            </div>
+        </div>
+
+    </div>
+
+    <!-- SEKCJA 2: Moje certyfikaty (Ukryta domyślnie, przełączana zakładką) -->
+    <div id="sectionCerts" class="d-none">
+
+        <div class="section-card mb-2 p-3">
+            <div class="d-flex align-items-center gap-3">
+                <div class="d-flex align-items-center justify-content-center rounded-circle bg-success-subtle text-success" style="width: 38px; height: 38px; flex-shrink: 0;">
+                    <i class='bx bx-badge-check fs-4'></i>
+                </div>
+                <div class="flex-grow-1">
+                    <h6 class="fw-bold mb-0" style="font-size: 0.86rem; color: var(--dark-navy);">Superpilot: Europa Południowa</h6>
+                    <small class="text-muted" style="font-size: 0.72rem;">Weryfikacja TravelLeader • Dodano do profilu</small>
+                </div>
+            </div>
+        </div>
+
+        <div class="section-card mb-3 p-3">
+            <div class="d-flex align-items-center gap-3">
+                <div class="d-flex align-items-center justify-content-center rounded-circle bg-primary-subtle text-primary" style="width: 38px; height: 38px; flex-shrink: 0;">
+                    <i class='bx bx-plus-medical fs-5'></i>
+                </div>
+                <div class="flex-grow-1">
+                    <h6 class="fw-bold mb-0" style="font-size: 0.86rem; color: var(--dark-navy);">Pierwsza Pomoc (KPP)</h6>
+                    <small class="text-muted" style="font-size: 0.72rem;">Certyfikat ważny do: Kwiecień 2028</small>
+                </div>
+            </div>
+        </div>
+
+        <div class="p-3 rounded-3 text-center" style="background: #f8f9fd;">
+            <small class="text-muted" style="font-size: 0.74rem;">
+                Wszystkie zdobyte certyfikaty są automatycznie widoczne dla biur podróży w Twojej wizytówce.
+            </small>
+        </div>
+
+    </div>
+
+</div><!-- /.app-content -->
+
+<script>
+function switchCourseTab(tab) {
+    const coursesSection = document.getElementById('sectionCourses');
+    const certsSection = document.getElementById('sectionCerts');
+    const coursesBtn = document.getElementById('tabCoursesBtn');
+    const certsBtn = document.getElementById('tabCertsBtn');
+
+    if (tab === 'courses') {
+        coursesSection.classList.remove('d-none');
+        certsSection.classList.add('d-none');
+        coursesBtn.style.background = 'white';
+        coursesBtn.style.color = 'var(--primary)';
+        coursesBtn.style.boxShadow = '0 1px 4px rgba(0,0,0,0.06)';
+        certsBtn.style.background = 'transparent';
+        certsBtn.style.color = 'var(--text-muted)';
+        certsBtn.style.boxShadow = 'none';
+    } else {
+        coursesSection.classList.add('d-none');
+        certsSection.classList.remove('d-none');
+        certsBtn.style.background = 'white';
+        certsBtn.style.color = 'var(--primary)';
+        certsBtn.style.boxShadow = '0 1px 4px rgba(0,0,0,0.06)';
+        coursesBtn.style.background = 'transparent';
+        coursesBtn.style.color = 'var(--text-muted)';
+        coursesBtn.style.boxShadow = 'none';
+    }
+}
+</script>
+
+<?php include 'footer.php'; ?>
diff --git a/prototype/travelleader-mobile/footer.php b/prototype/travelleader-mobile/footer.php
new file mode 100644
index 0000000..ee21bc4
--- /dev/null
+++ b/prototype/travelleader-mobile/footer.php
@@ -0,0 +1,40 @@
+<?php
+$currentPage = basename($_SERVER['PHP_SELF'], '.php');
+?>
+        <!-- Dolna belka nawigacyjna (Bottom Navigation Bar - zawsze widoczna na dole) -->
+        <nav class="bottom-nav-bar">
+            <a href="index.php" class="bottom-nav-item <?= in_array($currentPage, ['index', 'trip-details']) ? 'active' : '' ?>">
+                <i class='bx <?= in_array($currentPage, ['index', 'trip-details']) ? 'bxs-compass' : 'bx-compass' ?>'></i>
+                <span>Wycieczki</span>
+            </a>
+
+            <a href="availability.php" class="bottom-nav-item <?= $currentPage === 'availability' ? 'active' : '' ?>">
+                <i class='bx <?= $currentPage === 'availability' ? 'bxs-calendar' : 'bx-calendar' ?>'></i>
+                <span>Dostępność</span>
+            </a>
+
+            <a href="courses.php" class="bottom-nav-item <?= $currentPage === 'courses' ? 'active' : '' ?>">
+                <i class='bx <?= $currentPage === 'courses' ? 'bxs-book-open' : 'bx-book-open' ?>'></i>
+                <span>Szkolenia</span>
+            </a>
+
+            <a href="profile.php" class="bottom-nav-item <?= in_array($currentPage, ['profile', 'profile-edit']) ? 'active' : '' ?>">
+                <i class='bx <?= in_array($currentPage, ['profile', 'profile-edit']) ? 'bxs-user-pin' : 'bx-user' ?>'></i>
+                <span>Mój Profil</span>
+                <span class="nav-indicator" title="Profil wymaga uzupełnienia"></span>
+            </a>
+        </nav>
+
+    </div><!-- /.phone-screen -->
+</div><!-- /.phone-viewport-wrapper -->
+
+<!-- Lokalne skrypty Bootstrap (z projektu Magico, bez jsdelivr) -->
+<script src="../../assets/vendor/js/bootstrap.js"></script>
+
+<!-- Magico Feedback JS -->
+<?php if (!empty($enablePrototypeComments)): ?>
+    <script src="../../assets/js/comments.js"></script>
+<?php endif; ?>
+
+</body>
+</html>
diff --git a/prototype/travelleader-mobile/header.php b/prototype/travelleader-mobile/header.php
new file mode 100644
index 0000000..6486efb
--- /dev/null
+++ b/prototype/travelleader-mobile/header.php
@@ -0,0 +1,67 @@
+<?php
+$currentPage = basename($_SERVER['PHP_SELF'], '.php');
+if (!isset($pageTitle)) {
+    $pageTitle = 'TravelLeader - Aplikacja Pilota';
+}
+?>
+<!DOCTYPE html>
+<html lang="pl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <title><?= htmlspecialchars($pageTitle) ?></title>
+
+    <!-- Google Fonts -->
+    <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=Public+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+
+    <!-- Lokalne assety (Boxicons + Core CSS z projektu Magico, bez jsdelivr) -->
+    <link rel="stylesheet" href="../../assets/vendor/fonts/boxicons.css">
+    <link rel="stylesheet" href="../../assets/vendor/css/core.css">
+
+    <!-- Stylistyka aplikacji mobilnej TravelLeader -->
+    <link rel="stylesheet" href="assets/css/style.css">
+
+    <!-- Magico Comments -->
+    <?php if (!empty($enablePrototypeComments)): ?>
+        <link rel="stylesheet" href="../../assets/css/comments.css">
+    <?php endif; ?>
+</head>
+<body>
+
+<div class="phone-viewport-wrapper">
+    <div class="phone-screen">
+        
+        <!-- Pasek stanu telefonu (Widoczny w ramce na desktopie, ukryty na mobile) -->
+        <div class="phone-status-bar">
+            <span>9:05</span>
+            <div class="icons">
+                <span class="badge bg-secondary" style="font-size: 0.6rem; padding: 1px 4px;">VPN</span>
+                <i class='bx bx-wifi'></i>
+                <i class='bx bx-signal-5'></i>
+                <span style="font-size: 0.72rem; display: inline-flex; align-items: center; gap: 2px;">
+                    46 <i class='bx bxs-battery-charging' style="font-size: 1rem;"></i>
+                </span>
+            </div>
+        </div>
+
+        <!-- Nagłówek aplikacji TravelLeader -->
+        <header class="app-header">
+            <a href="index.php" class="brand-logo-area">
+                <div class="brand-icon-box">
+                    <i class='bx bx-compass'></i>
+                </div>
+                <div class="brand-name">Travel<span style="color: #2b304f;">Leader</span></div>
+            </a>
+
+            <a href="profile.php" class="header-user-profile" title="Przejdź do profilu">
+                <div class="header-user-info">
+                    <div class="header-user-email">oskar@magico.pl</div>
+                    <div class="header-user-role">Pilot Wycieczek</div>
+                </div>
+                <div class="header-avatar">
+                    <i class='bx bx-user'></i>
+                </div>
+            </a>
+        </header>
diff --git a/prototype/travelleader-mobile/index.php b/prototype/travelleader-mobile/index.php
new file mode 100644
index 0000000..c9d9112
--- /dev/null
+++ b/prototype/travelleader-mobile/index.php
@@ -0,0 +1,322 @@
+<?php
+$enablePrototypeComments = true;
+$pageTitle = 'TravelLeader - Wycieczki i Zlecenia';
+include 'header.php';
+?>
+
+<!-- Systemowa wstążka profilu (Edge-to-edge pod nagłówkiem, nie koliduje z wyszukiwarką) -->
+<div class="system-ribbon-bar">
+    <div class="d-flex align-items-center gap-2">
+        <span class="ribbon-badge">45%</span>
+        <div class="ribbon-text">
+            <span class="fw-bold">Profil w bazie</span>
+            <span class="ribbon-sub"> • Uzupełnij dane dla biur</span>
+        </div>
+    </div>
+    <div class="d-flex align-items-center gap-2">
+        <a href="profile.php" class="btn-ribbon-action">
+            Dokończ &gt;
+        </a>
+        <button type="button" class="btn-ribbon-close" onclick="this.closest('.system-ribbon-bar').style.display='none';" title="Zamknij powiadomienie">
+            <i class='bx bx-x'></i>
+        </button>
+    </div>
+</div>
+
+<div class="app-content">
+
+    <!-- Wyszukiwarka i filtr zakresu dat (odtworzone ze zrzutu ekranu) -->
+    <div class="search-filter-card">
+        <div class="search-filter-icon">
+            <i class='bx bx-search'></i>
+        </div>
+        <div class="search-filter-text flex-grow-1">
+            <h6>Wycieczki</h6>
+            <small>
+                <i class='bx bx-calendar'></i> 18 wrz 2026 &rarr; 18 wrz 2027
+            </small>
+        </div>
+        <i class='bx bx-chevron-down text-muted fs-4'></i>
+    </div>
+
+    <!-- Pasek zakładek i przełącznik widoku (Lista vs Kalendarz wycieczek) -->
+    <div class="trips-tabs-bar">
+        <div class="nav-pills-custom">
+            <a href="#" class="nav-pill-item active">
+                <i class='bx bx-home-alt-2'></i>
+                <span>Bieżące</span>
+                <span class="badge-count">1</span>
+            </a>
+            <a href="#" class="nav-pill-item">
+                <i class='bx bx-history'></i>
+                <span>Historia</span>
+                <span class="badge-count">0</span>
+            </a>
+        </div>
+
+        <!-- Przełącznik Lista / Kalendarz w obrębie wycieczek -->
+        <div class="view-toggle-group">
+            <button type="button" id="btnListView" class="view-toggle-btn active" title="Widok listy" onclick="switchTripsView('list');">
+                <i class='bx bx-list-ul'></i>
+            </button>
+            <button type="button" id="btnCalendarView" class="view-toggle-btn" title="Widok kalendarza" onclick="switchTripsView('calendar');">
+                <i class='bx bx-calendar'></i>
+            </button>
+        </div>
+    </div>
+
+    <!-- WIDOK 1: LISTA WYCIECZEK -->
+    <div id="tripsListView">
+        <div class="trip-card">
+            <div class="trip-card-header">
+                <div class="d-flex align-items-center flex-grow-1">
+                    <div class="trip-id-badge">12</div>
+                    <div class="trip-title-area">
+                        <h5 class="trip-title">oskar prod</h5>
+                    </div>
+                </div>
+
+                <div class="trip-status-pill">
+                    <span class="badge-status">Planowana</span>
+                    <div class="status-subtext">za 363 dni</div>
+                </div>
+            </div>
+
+            <!-- Dane wycieczki -->
+            <div class="trip-info-row">
+                <i class='bx bx-calendar'></i>
+                <span>16-24.09.2027</span>
+            </div>
+
+            <div class="trip-info-row">
+                <i class='bx bx-group'></i>
+                <span>24 / 0</span>
+            </div>
+
+            <div class="trip-info-row">
+                <i class='bx bx-map'></i>
+                <span class="text-muted">Brak danych</span>
+            </div>
+
+            <!-- Stopka karty -->
+            <div class="trip-card-footer">
+                <div class="trip-code">
+                    <i class='bx bx-briefcase-alt'></i>
+                    <span>123osk123</span>
+                </div>
+
+                <a href="#" class="btn-details" onclick="openTripBottomSheet('16 WRZEŚNIA 2027'); return false;">
+                    Szczegóły &gt;
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <!-- WIDOK 2: KALENDARZ WYCIECZEK (Odtworzony 1:1 ze zrzutu ekranu) -->
+    <div id="tripsCalendarView" class="d-none">
+        <div class="trips-calendar-container">
+            
+            <!-- Nagłówek miesiąca -->
+            <div class="d-flex justify-content-between align-items-center mb-3 px-1">
+                <button type="button" class="btn btn-sm btn-light rounded-circle p-1" onclick="alert('Przejdź do Sierpnia 2027');"><i class='bx bx-chevron-left fs-5'></i></button>
+                <div class="month-title-header mb-0">WRZESIEŃ 2027</div>
+                <button type="button" class="btn btn-sm btn-light rounded-circle p-1" onclick="alert('Przejdź do Października 2027');"><i class='bx bx-chevron-right fs-5'></i></button>
+            </div>
+
+            <table class="calendar-table">
+                <thead>
+                    <tr>
+                        <th>Pn</th>
+                        <th>Wt</th>
+                        <th>Śr</th>
+                        <th>Cz</th>
+                        <th>Pt</th>
+                        <th>So</th>
+                        <th>Nd</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <!-- Tydzień 1 -->
+                    <tr>
+                        <td class="other-month"><span class="day-number">30</span></td>
+                        <td class="other-month"><span class="day-number">31</span></td>
+                        <td><span class="day-number">1</span></td>
+                        <td><span class="day-number">2</span></td>
+                        <td><span class="day-number">3</span></td>
+                        <td><span class="day-number">4</span></td>
+                        <td><span class="day-number">5</span></td>
+                    </tr>
+                    <!-- Tydzień 2 -->
+                    <tr>
+                        <td><span class="day-number">6</span></td>
+                        <td><span class="day-number">7</span></td>
+                        <td><span class="day-number">8</span></td>
+                        <td><span class="day-number">9</span></td>
+                        <td><span class="day-number">10</span></td>
+                        <td><span class="day-number">11</span></td>
+                        <td><span class="day-number">12</span></td>
+                    </tr>
+                    <!-- Tydzień 3: Początek wycieczki 16-19 września -->
+                    <tr>
+                        <td><span class="day-number">13</span></td>
+                        <td><span class="day-number">14</span></td>
+                        <td><span class="day-number">15</span></td>
+                        <td onclick="openTripBottomSheet('16 WRZEŚNIA 2027');">
+                            <span class="day-number fw-bold text-primary">16</span>
+                            <span class="trip-ribbon-bar trip-ribbon-start">oskar prod</span>
+                        </td>
+                        <td onclick="openTripBottomSheet('17 WRZEŚNIA 2027');">
+                            <span class="day-number fw-bold text-primary">17</span>
+                            <span class="trip-ribbon-bar">&nbsp;</span>
+                        </td>
+                        <td onclick="openTripBottomSheet('18 WRZEŚNIA 2027');">
+                            <span class="day-number fw-bold text-primary">18</span>
+                            <span class="trip-ribbon-bar">&nbsp;</span>
+                        </td>
+                        <td onclick="openTripBottomSheet('19 WRZEŚNIA 2027');">
+                            <span class="day-number fw-bold text-primary">19</span>
+                            <span class="trip-ribbon-bar">&nbsp;</span>
+                        </td>
+                    </tr>
+                    <!-- Tydzień 4: Ciąg dalszy wycieczki 20-24 września -->
+                    <tr>
+                        <td onclick="openTripBottomSheet('20 WRZEŚNIA 2027');">
+                            <span class="day-number fw-bold text-primary">20</span>
+                            <span class="trip-ribbon-bar">oskar prod</span>
+                        </td>
+                        <td onclick="openTripBottomSheet('21 WRZEŚNIA 2027');">
+                            <span class="day-number fw-bold text-primary">21</span>
+                            <span class="trip-ribbon-bar">&nbsp;</span>
+                        </td>
+                        <td onclick="openTripBottomSheet('22 WRZEŚNIA 2027');">
+                            <span class="day-number fw-bold text-primary">22</span>
+                            <span class="trip-ribbon-bar">&nbsp;</span>
+                        </td>
+                        <td onclick="openTripBottomSheet('23 WRZEŚNIA 2027');">
+                            <span class="day-number fw-bold text-primary">23</span>
+                            <span class="trip-ribbon-bar">&nbsp;</span>
+                        </td>
+                        <td onclick="openTripBottomSheet('24 WRZEŚNIA 2027');">
+                            <span class="day-number fw-bold text-primary">24</span>
+                            <span class="trip-ribbon-bar trip-ribbon-end">&nbsp;</span>
+                        </td>
+                        <td><span class="day-number">25</span></td>
+                        <td><span class="day-number">26</span></td>
+                    </tr>
+                    <!-- Tydzień 5 -->
+                    <tr>
+                        <td><span class="day-number">27</span></td>
+                        <td><span class="day-number">28</span></td>
+                        <td><span class="day-number">29</span></td>
+                        <td><span class="day-number">30</span></td>
+                        <td class="other-month"><span class="day-number">1</span></td>
+                        <td class="other-month"><span class="day-number">2</span></td>
+                        <td class="other-month"><span class="day-number">3</span></td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <div class="mt-3 pt-2 border-top d-flex justify-content-between align-items-center">
+                <small class="text-muted" style="font-size: 0.72rem;">
+                    <i class='bx bxs-circle text-primary' style="font-size: 0.6rem;"></i> Zaznaczony termin wycieczki (16-24 Wrz)
+                </small>
+                <a href="availability.php" class="text-primary fw-bold text-decoration-none" style="font-size: 0.72rem;">
+                    Kalendarz dostępności &rarr;
+                </a>
+            </div>
+
+        </div>
+    </div>
+
+</div><!-- /.app-content -->
+
+<!-- BOTTOM SHEET MODAL (Odtworzony 1:1 ze zrzutu ekranu) -->
+<div id="tripSheetBackdrop" class="bottom-sheet-backdrop" onclick="closeTripBottomSheet();"></div>
+<div id="tripBottomSheet" class="bottom-sheet-content">
+    <div class="sheet-drag-handle"></div>
+
+    <div class="d-flex justify-content-between align-items-start mb-2">
+        <div>
+            <div class="text-uppercase fw-bold text-muted" style="font-size: 0.68rem; letter-spacing: 0.5px;">WYBRANY DZIEŃ</div>
+            <h5 class="fw-bold mb-0" id="sheetSelectedDate" style="color: var(--dark-navy); font-size: 1.15rem;">16 WRZEŚNIA 2027</h5>
+        </div>
+        <button type="button" class="btn-close" style="font-size: 0.75rem;" onclick="closeTripBottomSheet();" aria-label="Zamknij"></button>
+    </div>
+
+    <!-- Karta wycieczki wewnątrz Bottom Sheet -->
+    <div class="trip-card mb-0 shadow-none border mt-3">
+        <div class="trip-card-header">
+            <div class="d-flex align-items-center flex-grow-1">
+                <div class="trip-id-badge">12</div>
+                <div class="trip-title-area">
+                    <h5 class="trip-title">oskar prod</h5>
+                </div>
+            </div>
+
+            <div class="trip-status-pill">
+                <span class="badge-status">Planowana</span>
+                <div class="status-subtext">za 363 dni</div>
+            </div>
+        </div>
+
+        <div class="trip-info-row">
+            <i class='bx bx-calendar'></i>
+            <span>16-24.09.2027</span>
+        </div>
+
+        <div class="trip-info-row">
+            <i class='bx bx-group'></i>
+            <span>24 / 0</span>
+        </div>
+
+        <div class="trip-info-row">
+            <i class='bx bx-map'></i>
+            <span class="text-muted">Brak danych</span>
+        </div>
+
+        <div class="trip-card-footer">
+            <div class="trip-code">
+                <i class='bx bx-briefcase-alt'></i>
+                <span>123osk123</span>
+            </div>
+
+            <button type="button" class="btn-details" onclick="alert('Otwieranie pełnych szczegółów wycieczki 12 oskar prod');">
+                Szczegóły &gt;
+            </button>
+        </div>
+    </div>
+</div>
+
+<script>
+function switchTripsView(view) {
+    const listView = document.getElementById('tripsListView');
+    const calView = document.getElementById('tripsCalendarView');
+    const btnList = document.getElementById('btnListView');
+    const btnCal = document.getElementById('btnCalendarView');
+
+    if (view === 'calendar') {
+        listView.classList.add('d-none');
+        calView.classList.remove('d-none');
+        btnCal.classList.add('active');
+        btnList.classList.remove('active');
+    } else {
+        listView.classList.remove('d-none');
+        calView.classList.add('d-none');
+        btnList.classList.add('active');
+        btnCal.classList.remove('active');
+    }
+}
+
+function openTripBottomSheet(dateTitle) {
+    document.getElementById('sheetSelectedDate').innerText = dateTitle;
+    document.getElementById('tripSheetBackdrop').classList.add('active');
+    document.getElementById('tripBottomSheet').classList.add('active');
+}
+
+function closeTripBottomSheet() {
+    document.getElementById('tripSheetBackdrop').classList.remove('active');
+    document.getElementById('tripBottomSheet').classList.remove('active');
+}
+</script>
+
+<?php include 'footer.php'; ?>
diff --git a/prototype/travelleader-mobile/profile-edit.php b/prototype/travelleader-mobile/profile-edit.php
new file mode 100644
index 0000000..a1d0574
--- /dev/null
+++ b/prototype/travelleader-mobile/profile-edit.php
@@ -0,0 +1,269 @@
+<?php
+$enablePrototypeComments = true;
+$pageTitle = 'TravelLeader - Edycja Profilu';
+include 'header.php';
+?>
+
+<div class="app-content">
+
+    <!-- Pasek powrotu -->
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <a href="profile.php" class="text-decoration-none d-flex align-items-center gap-1 text-muted" style="font-size: 0.85rem; font-weight: 600;">
+            <i class='bx bx-arrow-back fs-5'></i> Powrót do profilu
+        </a>
+        <button type="button" class="btn btn-sm btn-primary-custom py-1 px-3" style="width: auto; font-size: 0.8rem;" onclick="saveProfile();">
+            <i class='bx bx-check'></i> Zapisz
+        </button>
+    </div>
+
+    <h5 class="fw-bold mb-3" style="color: var(--dark-navy);">Edycja Profilu</h5>
+
+    <!-- Toast powiadomienie o zapisie -->
+    <div id="saveToast" class="alert alert-success d-none rounded-3 shadow-sm py-2 px-3 mb-3 d-flex align-items-center justify-content-between" style="font-size: 0.82rem;">
+        <span><i class='bx bx-check-circle me-1'></i> Profil zaktualizowany! Zmiany widoczne dla biur.</span>
+        <a href="profile.php" class="fw-bold text-success text-decoration-underline ms-2">Zobacz</a>
+    </div>
+
+    <!-- 0. Nowoczesny, kompaktowy przełącznik widoczności (Pill card) -->
+    <div class="visibility-status-pill-card mb-3">
+        <div class="d-flex align-items-center gap-2">
+            <span class="status-indicator-dot active" id="visibilityDot"></span>
+            <div>
+                <span class="fw-bold" style="font-size: 0.84rem; color: var(--dark-navy);" id="visibilityTitle">
+                    Widoczny w bazie biur podróży
+                </span>
+            </div>
+        </div>
+        <div class="form-check form-switch m-0">
+            <input class="form-check-input" type="checkbox" id="visibilitySwitch" checked style="cursor: pointer; transform: scale(1.15);" onchange="toggleVisibility(this);">
+        </div>
+    </div>
+
+    <!-- 1. Zdjęcie profilowe & Wideo-Wizytówka -->
+    <div class="section-card mb-3">
+        <div class="section-title">
+            <span><i class='bx bx-image text-primary me-1'></i> Zdjęcie i Wideo</span>
+        </div>
+
+        <div class="d-flex align-items-center gap-3 mb-3">
+            <div class="profile-avatar-img d-flex align-items-center justify-content-center" style="width: 60px; height: 60px; background: linear-gradient(135deg, #4f46e5, #7c3aed); color: white; font-size: 1.4rem; font-weight: 800; flex-shrink: 0;">
+                OK
+            </div>
+            <div>
+                <button type="button" class="btn btn-sm btn-outline-primary rounded-pill py-1 px-3" style="font-size: 0.76rem;" onclick="alert('Wybierz zdjęcie z telefonu.');">
+                    <i class='bx bx-camera'></i> Zmień zdjęcie profilowe
+                </button>
+            </div>
+        </div>
+
+        <div class="mb-3">
+            <label class="form-label-custom">Link do wideo-autoprezentacji</label>
+            <div class="input-group">
+                <span class="input-group-text bg-light border-end-0 py-1"><i class='bx bxl-youtube text-danger'></i></span>
+                <input type="text" class="form-control form-control-custom" value="https://youtu.be/oskar-pilot-intro" placeholder="YouTube, Vimeo...">
+            </div>
+        </div>
+
+        <div>
+            <label class="form-label-custom">Zdjęcia ze szlaków i wypraw</label>
+            <div class="d-flex gap-2">
+                <div class="media-thumbnail d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: #eff0fe; color: var(--primary); cursor: pointer;" onclick="alert('Wybierz kolejne zdjęcia');">
+                    <i class='bx bx-plus fs-4'></i>
+                </div>
+                <div class="media-thumbnail d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: #60a5fa; color: white;">
+                    <i class='bx bx-landscape fs-4'></i>
+                </div>
+                <div class="media-thumbnail d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: #f59e0b; color: white;">
+                    <i class='bx bx-camera fs-4'></i>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 2. Dane podstawowe & Autoprezentacja -->
+    <div class="section-card mb-3" id="bio">
+        <div class="section-title">
+            <span><i class='bx bx-user text-primary me-1'></i> Dane podstawowe & O mnie</span>
+        </div>
+
+        <div class="mb-2">
+            <label class="form-label-custom">Imię i Nazwisko</label>
+            <input type="text" class="form-control-custom" value="Oskar Kaczmarek">
+        </div>
+
+        <div class="mb-2">
+            <label class="form-label-custom">Tytuł zawodowy / Slogan</label>
+            <input type="text" class="form-control-custom" value="Licencjonowany Pilot Wycieczek & Przewodnik">
+        </div>
+
+        <div class="row g-2 mb-2">
+            <div class="col-6">
+                <label class="form-label-custom">Rok rozpoczęcia</label>
+                <input type="number" id="startYearInput" class="form-control-custom" value="2019" min="1970" max="2026" oninput="updateExpYears();">
+                <small class="text-primary fw-bold d-block mt-1" id="expCalculatedHint" style="font-size: 0.72rem;">
+                    <i class='bx bx-check'></i> Staż: 7 lat
+                </small>
+            </div>
+            <div class="col-6">
+                <label class="form-label-custom">Miasto bazowe</label>
+                <input type="text" class="form-control-custom" value="Warszawa / Rzym">
+            </div>
+        </div>
+
+        <div class="mb-1">
+            <label class="form-label-custom">Opis autoprezentacji dla biur</label>
+            <textarea class="form-control-custom" rows="3">Pasjonat kultury śródziemnomorskiej z wykształceniem historycznym. Od 2019 roku z sukcesami pilotuję wycieczki objazdowe po Włoszech, Hiszpanii i Bałkanach. Wyróżnia mnie opanowanie w sytuacjach kryzysowych, doskonały kontakt z grupą oraz płynna znajomość języka włoskiego i angielskiego.</textarea>
+        </div>
+    </div>
+
+    <!-- 3. Destynacje i Obsługiwane Kraje -->
+    <div class="section-card mb-3" id="destynacje">
+        <div class="section-title">
+            <span><i class='bx bx-map-pin text-primary me-1'></i> Obsługiwane kraje</span>
+        </div>
+
+        <div class="d-flex flex-wrap gap-1 mb-2" id="countryChips">
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇮🇹 Włochy</span>
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇬🇷 Grecja</span>
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇪🇸 Hiszpania</span>
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇭🇷 Chorwacja</span>
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇳🇴 Norwegia</span>
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇦🇹 Austria</span>
+            <span class="chip-tag" onclick="this.classList.toggle('primary')">🇵🇹 Portugalia</span>
+            <span class="chip-tag" onclick="this.classList.toggle('primary')">🇹🇷 Turcja</span>
+            <span class="chip-tag" onclick="this.classList.toggle('primary')">🇫🇷 Francja</span>
+        </div>
+
+        <div class="input-group">
+            <input type="text" id="newCountryInput" class="form-control form-control-custom py-1" placeholder="Wpisz inny kraj...">
+            <button class="btn btn-outline-primary py-1 px-3" type="button" onclick="addNewCountry();" style="border-radius: var(--radius-sm); margin-left: 6px; font-size: 0.78rem;">
+                + Dodaj
+            </button>
+        </div>
+    </div>
+
+    <!-- 4. Języki Obce -->
+    <div class="section-card mb-3" id="jezyki">
+        <div class="section-title">
+            <span><i class='bx bx-chat text-primary me-1'></i> Języki</span>
+        </div>
+
+        <div class="d-flex flex-column gap-2 mb-2">
+            <div class="row g-2 align-items-center">
+                <div class="col-7">
+                    <input type="text" class="form-control-custom" value="Polski" readonly>
+                </div>
+                <div class="col-5">
+                    <select class="form-select form-control-custom py-1">
+                        <option selected>Ojczysty</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="row g-2 align-items-center">
+                <div class="col-7">
+                    <input type="text" class="form-control-custom" value="Angielski">
+                </div>
+                <div class="col-5">
+                    <select class="form-select form-control-custom py-1">
+                        <option>B1 (Średni)</option>
+                        <option>B2 (Płynny)</option>
+                        <option selected>C1 (Biegły)</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="row g-2 align-items-center">
+                <div class="col-7">
+                    <input type="text" class="form-control-custom" value="Włoski">
+                </div>
+                <div class="col-5">
+                    <select class="form-select form-control-custom py-1">
+                        <option>B1 (Średni)</option>
+                        <option selected>B2 (Płynny)</option>
+                        <option>C1 (Biegły)</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+
+        <button type="button" class="btn btn-sm btn-light w-100 rounded-3 py-1 text-muted" style="font-size: 0.76rem;" onclick="alert('Dodaj kolejny język');">
+            + Dodaj język
+        </button>
+    </div>
+
+    <!-- 5. Tagi & Specjalizacje -->
+    <div class="section-card mb-4" id="tagi">
+        <div class="section-title">
+            <span><i class='bx bx-purchase-tag text-primary me-1'></i> Tagi & Specjalizacje</span>
+        </div>
+
+        <div class="d-flex flex-wrap gap-1">
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Objazdówki</span>
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Trekking & góry</span>
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Przewodnik miejski</span>
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Grupy szkolne</span>
+            <span class="chip-tag primary" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> VIP / Incentive</span>
+            <span class="chip-tag" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Narty</span>
+            <span class="chip-tag" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Rejsy</span>
+        </div>
+    </div>
+
+    <!-- Zapisz -->
+    <div class="mb-4">
+        <button type="button" class="btn-primary-custom" onclick="saveProfile();">
+            <i class='bx bx-save'></i> Zapisz profil publiczny
+        </button>
+    </div>
+
+</div><!-- /.app-content -->
+
+<script>
+function updateExpYears() {
+    const startYear = parseInt(document.getElementById('startYearInput').value, 10);
+    const currentYear = new Date().getFullYear();
+    const hint = document.getElementById('expCalculatedHint');
+    if (!isNaN(startYear) && startYear > 1950 && startYear <= currentYear) {
+        const years = currentYear - startYear;
+        hint.innerHTML = `<i class='bx bx-check'></i> Staż: ${years} ${years === 1 ? 'rok' : (years < 5 ? 'lata' : 'lat')}`;
+        hint.className = 'text-primary fw-bold d-block mt-1';
+    } else {
+        hint.innerHTML = `<i class='bx bx-info-circle'></i> Podaj prawidłowy rok`;
+        hint.className = 'text-danger fw-bold d-block mt-1';
+    }
+}
+
+function toggleVisibility(checkbox) {
+    const dot = document.getElementById('visibilityDot');
+    const title = document.getElementById('visibilityTitle');
+    if (checkbox.checked) {
+        dot.className = 'status-indicator-dot active';
+        title.innerHTML = 'Widoczny w bazie biur podróży';
+    } else {
+        dot.className = 'status-indicator-dot';
+        title.innerHTML = 'Profil ukryty w bazie biur';
+    }
+}
+
+function saveProfile() {
+    const toast = document.getElementById('saveToast');
+    toast.classList.remove('d-none');
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
+function addNewCountry() {
+    const input = document.getElementById('newCountryInput');
+    const val = input.value.trim();
+    if (val) {
+        const container = document.getElementById('countryChips');
+        const span = document.createElement('span');
+        span.className = 'chip-tag primary';
+        span.innerHTML = '🌍 ' + val;
+        span.onclick = function() { this.classList.toggle('primary'); };
+        container.appendChild(span);
+        input.value = '';
+    }
+}
+</script>
+
+<?php include 'footer.php'; ?>
diff --git a/prototype/travelleader-mobile/profile-reviews.php b/prototype/travelleader-mobile/profile-reviews.php
new file mode 100644
index 0000000..b6b8e3e
--- /dev/null
+++ b/prototype/travelleader-mobile/profile-reviews.php
@@ -0,0 +1,221 @@
+<?php
+$enablePrototypeComments = true;
+$pageTitle = 'TravelLeader - Opinie Biur Podróży';
+include 'header.php';
+?>
+
+<div class="app-content">
+
+    <!-- Pasek powrotu -->
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <a href="profile.php" class="text-decoration-none d-flex align-items-center gap-1 text-muted" style="font-size: 0.85rem; font-weight: 600;">
+            <i class='bx bx-arrow-back fs-5'></i> Powrót do profilu
+        </a>
+        <span class="badge bg-light text-muted" style="font-size: 0.72rem;">Zweryfikowane przez Travel Manager</span>
+    </div>
+
+    <!-- Podsumowanie ocen (Rating Summary Hero) -->
+    <div class="section-card text-center mb-3">
+        <div class="d-flex align-items-center justify-content-center gap-2 mb-1">
+            <h2 class="fw-bold mb-0" style="color: var(--dark-navy); font-size: 2.2rem;">4.9</h2>
+            <div class="text-start">
+                <div class="text-warning" style="font-size: 1.1rem; line-height: 1;">
+                    <i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star-half'></i>
+                </div>
+                <small class="text-muted" style="font-size: 0.72rem;">na podstawie 18 ocen</small>
+            </div>
+        </div>
+        <div class="text-muted mb-3" style="font-size: 0.76rem;">100% biur poleca tego pilota na kolejne wyjazdy</div>
+
+        <!-- Rozbicie gwiazdek -->
+        <div class="d-flex flex-column gap-1" style="max-width: 260px; margin: 0 auto; font-size: 0.72rem;">
+            <div class="d-flex align-items-center gap-2">
+                <span style="width: 24px;">5★</span>
+                <div class="progress flex-grow-1" style="height: 6px;">
+                    <div class="progress-bar bg-warning" style="width: 89%;"></div>
+                </div>
+                <span class="text-muted" style="width: 20px;">16</span>
+            </div>
+            <div class="d-flex align-items-center gap-2">
+                <span style="width: 24px;">4★</span>
+                <div class="progress flex-grow-1" style="height: 6px;">
+                    <div class="progress-bar bg-warning" style="width: 11%;"></div>
+                </div>
+                <span class="text-muted" style="width: 20px;">2</span>
+            </div>
+            <div class="d-flex align-items-center gap-2">
+                <span style="width: 24px;">3★</span>
+                <div class="progress flex-grow-1" style="height: 6px;">
+                    <div class="progress-bar bg-warning" style="width: 0%;"></div>
+                </div>
+                <span class="text-muted" style="width: 20px;">0</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Filtry opinii -->
+    <div class="d-flex gap-2 overflow-x-auto pb-2 mb-3" style="white-space: nowrap;">
+        <button class="nav-pill-item active" style="font-size: 0.78rem; padding: 5px 12px;">Wszystkie (18)</button>
+        <button class="nav-pill-item" style="font-size: 0.78rem; padding: 5px 12px;">Włochy (12)</button>
+        <button class="nav-pill-item" style="font-size: 0.78rem; padding: 5px 12px;">Hiszpania (4)</button>
+        <button class="nav-pill-item" style="font-size: 0.78rem; padding: 5px 12px;">Grecja (2)</button>
+    </div>
+
+    <h6 class="fw-bold mb-3" style="color: var(--dark-navy); font-size: 0.9rem;">Opinie od Biur Podróży</h6>
+
+    <!-- Opinia 1 (Z już dodaną odpowiedzią pilota) -->
+    <div class="section-card mb-3">
+        <div class="d-flex justify-content-between align-items-start mb-2">
+            <div class="d-flex align-items-center gap-2">
+                <div class="rounded-circle d-flex align-items-center justify-content-center bg-primary-subtle text-primary fw-bold" style="width: 34px; height: 34px; font-size: 0.8rem;">
+                    AL
+                </div>
+                <div>
+                    <h6 class="fw-bold mb-0" style="font-size: 0.86rem; color: var(--dark-navy);">Biuro Podróży Almatur</h6>
+                    <small class="text-muted" style="font-size: 0.7rem;">Wycieczka: Klasyczne Włochy • Maj 2026</small>
+                </div>
+            </div>
+            <span class="badge bg-warning-subtle text-warning fw-bold" style="font-size: 0.72rem;">
+                <i class='bx bxs-star'></i> 5.0
+            </span>
+        </div>
+
+        <p class="mb-3 text-secondary" style="font-size: 0.82rem; line-height: 1.45;">
+            "Pan Oskar prowadził 8-dniowy objazd po Włoszech. Klienci byli zachwyceni jego wiedzą i empatią. Brak jakichkolwiek problemów organizacyjnych. Bardzo chętnie zarezerwujemy kolejne terminy na jesień."
+        </p>
+
+        <!-- Odpowiedź pilota (Już opublikowana) -->
+        <div class="p-3 rounded-3" style="background-color: #f6f7fe; border-left: 3px solid var(--primary);">
+            <div class="d-flex justify-content-between align-items-center mb-1">
+                <div class="d-flex align-items-center gap-1">
+                    <i class='bx bx-reply text-primary'></i>
+                    <span class="fw-bold" style="font-size: 0.76rem; color: var(--primary);">Twoja odpowiedź jako pilot</span>
+                </div>
+                <small class="text-muted" style="font-size: 0.68rem;">3 dni temu</small>
+            </div>
+            <p class="mb-0 text-secondary" style="font-size: 0.78rem; line-height: 1.4;">
+                Dziękuję serdecznie za zaufanie! Współpraca z koordynatorem trasy i grupą układała się wzorowo. Do zobaczenia na kolejnych wyjazdach!
+            </p>
+        </div>
+    </div>
+
+    <!-- Opinia 2 (Z możliwością dodania odpowiedzi przez formularz) -->
+    <div class="section-card mb-3" id="reviewCard2">
+        <div class="d-flex justify-content-between align-items-start mb-2">
+            <div class="d-flex align-items-center gap-2">
+                <div class="rounded-circle d-flex align-items-center justify-content-center bg-info-subtle text-info fw-bold" style="width: 34px; height: 34px; font-size: 0.8rem;">
+                    LT
+                </div>
+                <div>
+                    <h6 class="fw-bold mb-0" style="font-size: 0.86rem; color: var(--dark-navy);">Logos Tour Warszawa</h6>
+                    <small class="text-muted" style="font-size: 0.7rem;">Wycieczka: Andaluzja & Gibraltar • Kwiecień 2026</small>
+                </div>
+            </div>
+            <span class="badge bg-warning-subtle text-warning fw-bold" style="font-size: 0.72rem;">
+                <i class='bx bxs-star'></i> 4.8
+            </span>
+        </div>
+
+        <p class="mb-2 text-secondary" style="font-size: 0.82rem; line-height: 1.45;">
+            "Świetny kontakt telefoniczny i regularne raportowanie przebiegu trasy do centrali biura. Grupa bardzo zadowolona z realizacji programu mimo trudnych warunków pogodowych w górach."
+        </p>
+
+        <!-- Przycisk / formularz odpowiedzi -->
+        <div id="replyArea2">
+            <button type="button" class="btn btn-sm btn-outline-primary rounded-pill py-1 px-3 mt-1" style="font-size: 0.74rem;" onclick="toggleReplyBox(2);">
+                <i class='bx bx-reply'></i> Odpowiedz na opinię
+            </button>
+        </div>
+
+        <div id="replyForm2" class="d-none mt-2 p-3 rounded-3" style="background-color: #f8f9fd; border: 1px solid var(--border-color);">
+            <label class="form-label-custom mb-1" style="font-size: 0.76rem;">Napisz publiczną odpowiedź do biura:</label>
+            <textarea id="replyText2" class="form-control-custom mb-2" rows="2" placeholder="Podziękuj za współpracę lub odnieś się do szczegółów wycieczki..."></textarea>
+            <div class="d-flex justify-content-end gap-2">
+                <button type="button" class="btn btn-sm btn-light rounded-pill py-1 px-3" style="font-size: 0.72rem;" onclick="toggleReplyBox(2);">Anuluj</button>
+                <button type="button" class="btn btn-sm btn-primary rounded-pill py-1 px-3" style="font-size: 0.72rem;" onclick="publishReply(2);">Opublikuj odpowiedź</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Opinia 3 -->
+    <div class="section-card mb-4" id="reviewCard3">
+        <div class="d-flex justify-content-between align-items-start mb-2">
+            <div class="d-flex align-items-center gap-2">
+                <div class="rounded-circle d-flex align-items-center justify-content-center bg-success-subtle text-success fw-bold" style="width: 34px; height: 34px; font-size: 0.8rem;">
+                    RT
+                </div>
+                <div>
+                    <h6 class="fw-bold mb-0" style="font-size: 0.86rem; color: var(--dark-navy);">Rainbow Tours</h6>
+                    <small class="text-muted" style="font-size: 0.7rem;">Wycieczka: Sycylia w pigułce • Wrzesień 2025</small>
+                </div>
+            </div>
+            <span class="badge bg-warning-subtle text-warning fw-bold" style="font-size: 0.72rem;">
+                <i class='bx bxs-star'></i> 5.0
+            </span>
+        </div>
+
+        <p class="mb-2 text-secondary" style="font-size: 0.82rem; line-height: 1.45;">
+            "Wzorowy pilotaż i panowanie nad 45-osobową grupą. Zero opóźnień, kierowcy autokaru chwalili dyscyplinę i profesjonalizm pilota."
+        </p>
+
+        <!-- Przycisk odpowiedzi -->
+        <div id="replyArea3">
+            <button type="button" class="btn btn-sm btn-outline-primary rounded-pill py-1 px-3 mt-1" style="font-size: 0.74rem;" onclick="toggleReplyBox(3);">
+                <i class='bx bx-reply'></i> Odpowiedz na opinię
+            </button>
+        </div>
+
+        <div id="replyForm3" class="d-none mt-2 p-3 rounded-3" style="background-color: #f8f9fd; border: 1px solid var(--border-color);">
+            <label class="form-label-custom mb-1" style="font-size: 0.76rem;">Napisz publiczną odpowiedź do biura:</label>
+            <textarea id="replyText3" class="form-control-custom mb-2" rows="2" placeholder="Podziękuj za współpracę..."></textarea>
+            <div class="d-flex justify-content-end gap-2">
+                <button type="button" class="btn btn-sm btn-light rounded-pill py-1 px-3" style="font-size: 0.72rem;" onclick="toggleReplyBox(3);">Anuluj</button>
+                <button type="button" class="btn btn-sm btn-primary rounded-pill py-1 px-3" style="font-size: 0.72rem;" onclick="publishReply(3);">Opublikuj odpowiedź</button>
+            </div>
+        </div>
+    </div>
+
+</div><!-- /.app-content -->
+
+<script>
+function toggleReplyBox(id) {
+    const form = document.getElementById('replyForm' + id);
+    const area = document.getElementById('replyArea' + id);
+    if (form.classList.contains('d-none')) {
+        form.classList.remove('d-none');
+        area.classList.add('d-none');
+    } else {
+        form.classList.add('d-none');
+        area.classList.remove('d-none');
+    }
+}
+
+function publishReply(id) {
+    const textInput = document.getElementById('replyText' + id);
+    const val = textInput.value.trim();
+    if (!val) {
+        alert('Wpisz treść odpowiedzi przed publikacją.');
+        return;
+    }
+
+    const form = document.getElementById('replyForm' + id);
+    form.classList.add('d-none');
+
+    const replyArea = document.getElementById('replyArea' + id);
+    replyArea.innerHTML = `
+        <div class="p-3 rounded-3 mt-2" style="background-color: #f6f7fe; border-left: 3px solid var(--primary);">
+            <div class="d-flex justify-content-between align-items-center mb-1">
+                <div class="d-flex align-items-center gap-1">
+                    <i class='bx bx-reply text-primary'></i>
+                    <span class="fw-bold" style="font-size: 0.76rem; color: var(--primary);">Twoja odpowiedź jako pilot</span>
+                </div>
+                <small class="text-muted" style="font-size: 0.68rem;">Przed chwilą</small>
+            </div>
+            <p class="mb-0 text-secondary" style="font-size: 0.78rem; line-height: 1.4;">${val}</p>
+        </div>
+    `;
+    replyArea.classList.remove('d-none');
+}
+</script>
+
+<?php include 'footer.php'; ?>
diff --git a/prototype/travelleader-mobile/profile.php b/prototype/travelleader-mobile/profile.php
new file mode 100644
index 0000000..f95a419
--- /dev/null
+++ b/prototype/travelleader-mobile/profile.php
@@ -0,0 +1,215 @@
+<?php
+$enablePrototypeComments = true;
+$pageTitle = 'TravelLeader - Mój Profil Pilota';
+include 'header.php';
+
+// Rok rozpoczęcia działalności jako pilot (z bazy danych / edycji)
+$startYear = 2019;
+$currentYear = (int)date('Y');
+$experienceYears = max(1, $currentYear - $startYear);
+?>
+
+<div class="app-content">
+
+    <!-- Pasek nagłówka profilu z akcjami -->
+    <!-- Pasek nagłówka profilu z akcjami i statusem bazy -->
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <div>
+            <div class="d-flex align-items-center gap-2 mb-1">
+                <h5 class="fw-bold mb-0" style="color: var(--dark-navy);">Mój Profil</h5>
+                <span class="d-inline-flex align-items-center gap-1 text-success fw-bold" style="font-size: 0.7rem; background: #ecfdf5; padding: 2px 8px; border-radius: 99px; border: 1px solid #a7f3d0;">
+                    <span style="width: 6px; height: 6px; background-color: #10b981; border-radius: 50%;"></span> Aktywny w bazie
+                </span>
+            </div>
+            <small class="text-muted" style="font-size: 0.74rem;">Wizytówka widoczna dla biur podróży</small>
+        </div>
+        <a href="profile-edit.php" class="btn btn-sm btn-primary-custom py-2 px-3" style="width: auto; font-size: 0.78rem;">
+            <i class='bx bx-edit-alt'></i> Edytuj
+        </a>
+    </div>
+
+    <!-- Karta główna profilu (Hero - w 100% realne informacje pilota) -->
+    <div class="profile-hero">
+        <div class="profile-avatar-container">
+            <div class="profile-avatar-img d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, #4f46e5, #7c3aed); color: white; font-size: 2.2rem; font-weight: 800;">
+                OK
+            </div>
+            <div class="profile-verified-badge" title="Zweryfikowany pilot TravelLeader">
+                <i class='bx bx-check'></i>
+            </div>
+        </div>
+
+        <h4 class="profile-name">Oskar Kaczmarek</h4>
+        <div class="profile-tagline">
+            <i class='bx bx-compass text-primary'></i> Licencjonowany Pilot Wycieczek & Przewodnik
+        </div>
+
+        <!-- Średnia ocen i liczba opinii od biur podróży -> przejście do nowego widoku profile-reviews.php -->
+        <a href="profile-reviews.php" class="rating-badge-pill text-decoration-none" title="Zobacz opinie i referencje biur">
+            <i class='bx bxs-star'></i>
+            <span>4.9 / 5.0</span>
+            <span class="text-muted fw-normal">(18 opinii od 6 biur)</span>
+            <i class='bx bx-chevron-right text-muted'></i>
+        </a>
+
+        <!-- Szybkie statystyki (staż wyliczany automatycznie z roku rozpoczęcia) -->
+        <div class="row g-2 mt-2 pt-2 border-top">
+            <div class="col-4">
+                <div class="fw-bold" style="font-size: 1.05rem; color: var(--dark-navy);"><?= $experienceYears ?> lat</div>
+                <div class="text-muted" style="font-size: 0.7rem;">Staż (od <?= $startYear ?>)</div>
+            </div>
+            <div class="col-4 border-start border-end">
+                <div class="fw-bold" style="font-size: 1.05rem; color: var(--primary);">42</div>
+                <div class="text-muted" style="font-size: 0.7rem;">Zrealizowanych</div>
+            </div>
+            <div class="col-4">
+                <div class="fw-bold" style="font-size: 1.05rem; color: #10b981;">100%</div>
+                <div class="text-muted" style="font-size: 0.7rem;">Dyspozycyjność</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Sekcja: Autoprezentacja / O mnie -->
+    <div class="section-card">
+        <div class="section-title">
+            <span><i class='bx bx-user-voice text-primary me-1'></i> O mnie</span>
+            <a href="profile-edit.php#bio" class="text-muted" style="font-size: 0.75rem;"><i class='bx bx-pencil'></i></a>
+        </div>
+        <p class="mb-0 text-secondary" style="font-size: 0.84rem; line-height: 1.5;">
+            Pasjonat kultury śródziemnomorskiej z wykształceniem historycznym. Od <?= $startYear ?> roku z sukcesami pilotuję wycieczki objazdowe po Włoszech, Hiszpanii i Bałkanach. Wyróżnia mnie opanowanie w sytuacjach kryzysowych, doskonały kontakt z grupą oraz płynna znajomość języka włoskiego i angielskiego.
+        </p>
+    </div>
+
+    <!-- Sekcja: Wideo-Wizytówka & Multimedia -->
+    <div class="section-card">
+        <div class="section-title">
+            <span><i class='bx bx-video text-primary me-1'></i> Wideo-Wizytówka i Zdjęcia</span>
+            <span class="badge bg-label-primary rounded-pill" style="font-size: 0.7rem;">Wideo + 4 foto</span>
+        </div>
+
+        <!-- Odtwarzacz wideo autoprezentacji -->
+        <div class="video-card-preview" onclick="alert('Odtwarzanie wideo-autoprezentacji pilota (1:15 min). Biuro podróży może posłuchać głosu i prezencji pilota przed wysłaniem zlecenia.');">
+            <div class="video-play-btn">
+                <i class='bx bx-play' style="margin-left: 3px;"></i>
+            </div>
+            <div class="fw-bold" style="font-size: 0.85rem;">Autoprezentacja dla biur (1:15 min)</div>
+            <small style="font-size: 0.72rem; opacity: 0.8;">Kliknij, aby odtworzyć próbkę</small>
+        </div>
+
+        <!-- Siatka zdjęć z tras -->
+        <div class="media-grid mt-2">
+            <div class="media-thumbnail d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, #60a5fa, #3b82f6); color: white;">
+                <i class='bx bx-landscape fs-2'></i>
+            </div>
+            <div class="media-thumbnail d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, #f59e0b, #d97706); color: white;">
+                <i class='bx bx-camera fs-2'></i>
+            </div>
+            <div class="media-thumbnail d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, #10b981, #059669); color: white;">
+                <i class='bx bx-group fs-2'></i>
+            </div>
+        </div>
+    </div>
+
+    <!-- Sekcja: Obsługiwane Kraje i Destynacje -->
+    <div class="section-card">
+        <div class="section-title">
+            <span><i class='bx bx-globe text-primary me-1'></i> Kraje & Destynacje</span>
+            <a href="profile-edit.php#destynacje" class="text-muted" style="font-size: 0.75rem;"><i class='bx bx-pencil'></i></a>
+        </div>
+        <div class="d-flex flex-wrap">
+            <span class="chip-tag primary">🇮🇹 Włochy (Ekspert)</span>
+            <span class="chip-tag primary">🇬🇷 Grecja & Cyklady</span>
+            <span class="chip-tag primary">🇪🇸 Hiszpania & Andaluzja</span>
+            <span class="chip-tag">🇭🇷 Chorwacja</span>
+            <span class="chip-tag">🇳🇴 Norwegia (Fiordy)</span>
+            <span class="chip-tag">🇦🇹 Austria</span>
+        </div>
+    </div>
+
+    <!-- Sekcja: Języki Obce -->
+    <div class="section-card">
+        <div class="section-title">
+            <span><i class='bx bx-message-dots text-primary me-1'></i> Języki</span>
+            <a href="profile-edit.php#jezyki" class="text-muted" style="font-size: 0.75rem;"><i class='bx bx-pencil'></i></a>
+        </div>
+        <div class="d-flex flex-column gap-2">
+            <div class="d-flex justify-content-between align-items-center p-2 rounded-3" style="background: #f8f9fd;">
+                <div class="d-flex align-items-center gap-2">
+                    <span style="font-size: 1.1rem;">🇵🇱</span>
+                    <span class="fw-bold" style="font-size: 0.84rem;">Polski</span>
+                </div>
+                <span class="badge bg-light text-dark" style="font-size: 0.72rem;">Ojczysty</span>
+            </div>
+
+            <div class="d-flex justify-content-between align-items-center p-2 rounded-3" style="background: #f8f9fd;">
+                <div class="d-flex align-items-center gap-2">
+                    <span style="font-size: 1.1rem;">🇬🇧</span>
+                    <span class="fw-bold" style="font-size: 0.84rem;">Angielski</span>
+                </div>
+                <span class="badge bg-primary-subtle text-primary" style="font-size: 0.72rem;">C1 (Biegły)</span>
+            </div>
+
+            <div class="d-flex justify-content-between align-items-center p-2 rounded-3" style="background: #f8f9fd;">
+                <div class="d-flex align-items-center gap-2">
+                    <span style="font-size: 1.1rem;">🇮🇹</span>
+                    <span class="fw-bold" style="font-size: 0.84rem;">Włoski</span>
+                </div>
+                <span class="badge bg-primary-subtle text-primary" style="font-size: 0.72rem;">B2 (Płynny)</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Sekcja: Tagi & Specjalizacje -->
+    <div class="section-card">
+        <div class="section-title">
+            <span><i class='bx bx-purchase-tag-alt text-primary me-1'></i> Specjalizacje & Tagi</span>
+            <a href="profile-edit.php#tagi" class="text-muted" style="font-size: 0.75rem;"><i class='bx bx-pencil'></i></a>
+        </div>
+        <div class="d-flex flex-wrap">
+            <span class="chip-tag"><i class='bx bx-bus'></i> Wycieczki objazdowe</span>
+            <span class="chip-tag"><i class='bx bx-walk'></i> Trekking & góry</span>
+            <span class="chip-tag"><i class='bx bx-buildings'></i> Przewodnik miejski (Rzym, Florencja)</span>
+            <span class="chip-tag"><i class='bx bx-book-open'></i> Grupy młodzieżowe / szkolne</span>
+            <span class="chip-tag"><i class='bx bx-diamond'></i> Wyjazdy VIP / Incentive</span>
+            <span class="chip-tag"><i class='bx bx-wine'></i> Enoturystyka & kulinaria</span>
+        </div>
+    </div>
+
+    <!-- Sekcja: Kursy & Certyfikaty -->
+    <div class="section-card">
+        <div class="section-title">
+            <span><i class='bx bx-award text-primary me-1'></i> Certyfikaty i Szkolenia</span>
+            <a href="courses.php" class="text-primary fw-bold" style="font-size: 0.75rem;">Zobacz ofertę szkoleń &rarr;</a>
+        </div>
+
+        <div class="d-flex align-items-center gap-3 p-2 rounded-3 mb-2" style="background: #f8f9fd;">
+            <div class="d-flex align-items-center justify-content-center rounded-circle bg-success-subtle text-success" style="width: 36px; height: 36px;">
+                <i class='bx bx-badge-check fs-4'></i>
+            </div>
+            <div class="flex-grow-1">
+                <div class="fw-bold" style="font-size: 0.84rem; color: var(--dark-navy);">Superpilot Academy 2026</div>
+                <small class="text-muted" style="font-size: 0.72rem;">Certyfikat Pilotażu Europy Południowej</small>
+            </div>
+        </div>
+
+        <div class="d-flex align-items-center gap-3 p-2 rounded-3" style="background: #f8f9fd;">
+            <div class="d-flex align-items-center justify-content-center rounded-circle bg-primary-subtle text-primary" style="width: 36px; height: 36px;">
+                <i class='bx bx-plus-medical fs-5'></i>
+            </div>
+            <div class="flex-grow-1">
+                <div class="fw-bold" style="font-size: 0.84rem; color: var(--dark-navy);">Kwalifikowana Pierwsza Pomoc (KPP)</div>
+                <small class="text-muted" style="font-size: 0.72rem;">Ważny do: 04.2028</small>
+            </div>
+        </div>
+    </div>
+
+    <!-- Przycisk edycji na dole -->
+    <div class="mb-4">
+        <a href="profile-edit.php" class="btn-primary-custom">
+            <i class='bx bx-edit'></i> Przejdź do edycji danych profilu
+        </a>
+    </div>
+
+</div><!-- /.app-content -->
+
+<?php include 'footer.php'; ?>