/* ===== Reset & Base ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #111827;
    line-height: 1.5;
    background: #ffffff;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.btn-outline {
    background: #fff;
    color: #111827;
    border-color: #D1D5DB;
}

.btn-outline:hover {
    border-color: #070C9C;
    color: #070C9C;
}

.btn-primary {
    background: #070C9C;
    color: #fff;
}

.btn-primary:hover {
    background: #050878;
}

/* ===== Header ===== */
.site-header {
    border-bottom: 1px solid #E5E7EB;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 100;
}

.header-inner {
    display: flex;
    align-items: center;
    height: 72px;
    gap: 36px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #45464d;
    flex-shrink: 0;
}

.logo-text {
    text-transform: uppercase;
}

.logo-accent {
    color: #070C9C;
}

.logo-icon {
    flex-shrink: 0;
    color: #070C9C;
}

.logo-light {
    color: #fff;
}

.logo-light .logo-icon,
.logo-light .logo-accent {
    color: #fff;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: auto;
}

.nav-auth-link {
    display: none;
}

.main-nav a {
    font-size: 15px;
    font-weight: 500;
    color: #4B5563;
    transition: color 0.2s ease;
}

.main-nav a:hover,
.main-nav a.active {
    color: #070C9C;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.mobile-menu-toggle span {
    width: 22px;
    height: 2px;
    background: #111827;
}

/* ===== Hero ===== */
.hero {
    padding: 72px 0;
    overflow: hidden;
}

.hero-inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 56px;
}

.hero-badge {
    display: inline-block;
    background: #EEF2FF;
    color: #070C9C;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 24px;
}

.hero-title {
    font-size: 46px;
    font-weight: 800;
    line-height: 1.15;
    color: #111827;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.hero-title .highlight {
    color: #070C9C;
}

.hero-subtitle {
    font-size: 17px;
    color: #6B7280;
    max-width: 520px;
    margin-bottom: 32px;
}

.hero-search {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    padding: 6px 6px 6px 20px;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.06);
    max-width: 560px;
    margin-bottom: 20px;
}

.hero-search .search-icon {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.hero-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    padding: 10px 0;
    color: #111827;
    background: transparent;
}

.hero-search input::placeholder {
    color: #9CA3AF;
}

.btn-search {
    padding: 12px 26px;
}

.hero-popular {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 14px;
}

.popular-label {
    color: #6B7280;
    margin-right: 4px;
}

.pill {
    border: 1px solid #D1D5DB;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.pill:hover {
    border-color: #070C9C;
    color: #070C9C;
}

/* Hero media */
.hero-media {
    position: relative;
}

.hero-image {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
    aspect-ratio: 4 / 3.4;
    transform: rotate(4deg);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.hero-image:hover {
    transform: rotate(0deg);
}

/* Floating badges */
.float-badge {
    position: absolute;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
}

.badge-text {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    line-height: 1.3;
}

.badge-text strong {
    color: #111827;
    font-size: 14px;
}

.badge-text span {
    color: #6B7280;
    font-size: 12px;
}

/* Verified Talent - top-most right corner */
.float-verified {
    top: -22px;
    right: -18px;
    padding: 12px 16px;
    z-index: 3;
    transform-origin: center bottom;
    animation: ballBounce 2.6s ease-in-out infinite;
}

.verified-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #16A34A;
    flex-shrink: 0;
}

/* Milestone - bottom-most left corner, behind the image */
.float-milestone {
    bottom: -16px;
    left: -30px;
    padding: 10px 16px 10px 12px;
    z-index: 1;
    transform-origin: center bottom;
    animation: ballBounce 2.6s ease-in-out infinite;
    animation-delay: 0.5s;
}

.milestone-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FB923C, #EA580C);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.milestone-text {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}

@keyframes ballBounce {
    0%   { transform: translateY(0) scale(1, 1);        animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1); }
    22%  { transform: translateY(-28px) scale(0.97, 1.03); animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.4); }
    40%  { transform: translateY(0) scale(1.06, 0.94);  animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1); }
    56%  { transform: translateY(-13px) scale(0.98, 1.02); animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.4); }
    70%  { transform: translateY(0) scale(1.04, 0.96);  animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1); }
    80%  { transform: translateY(-5px) scale(1, 1);     animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.4); }
    87%  { transform: translateY(0) scale(1.02, 0.98); }
    100% { transform: translateY(0) scale(1, 1); }
}

/* ===== Stats ===== */
.stats {
    background: rgba(7, 12, 156, 0.2);
    padding: 44px 0;
}

.stats-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 46px;
    border-radius: 13px;
    background: rgba(7, 12, 156, 0.43);
    margin-bottom: 18px;
}

.stat-number {
    font-size: 32px;
    font-weight: 800;
    color: #0b1c30;
    line-height: 1.1;
}

.stat-label {
    font-size: 16px;
    color: #45464d;
    margin-top: 10px;
}

/* ===== How It Works ===== */
.how-it-works {
    padding: 80px 0;
}

.section-heading {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 48px;
}

.section-heading h2 {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 12px;
}

.section-heading p {
    font-size: 15px;
    color: #6B7280;
}

.steps-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.steps-grid::before {
    content: '';
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    height: 1px;
    background: #E5E7EB;
    z-index: 0;
}

.step-card {
    position: relative;
    z-index: 1;
    text-align: center;
}

.step-icon {
    position: relative;
    z-index: 2;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 16px rgba(17, 24, 39, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.step-card h3 {
    font-size: 19px;
    font-weight: 700;
    color: #070C9C;
    margin-bottom: 10px;
}

.step-card p {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.6;
    max-width: 260px;
    margin: 0 auto;
}

/* ===== Freelancers ===== */
.freelancers {
    padding: 0 0 80px;
}

.freelancers-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.freelancers-head h2 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.view-all {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.freelancer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.freelancer-card {
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.freelancer-card:hover {
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
    border-color: #E0E7FF;
}

.freelancer-cover {
    position: relative;
}

.cover-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.rating-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #111827;
}

.freelancer-body {
    padding: 16px;
}

.freelancer-body h3 {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.role {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 4px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.role-green { color: #007432; background: rgba(107, 255, 143, 0.3); }
.role-blue { color: #004395; background: rgba(216, 226, 255, 0.3); }
.role-navy { color: #3f465c; background: rgba(218, 226, 253, 0.3); }

.bio {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.5;
    margin-bottom: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rate {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.rate small {
    font-size: 12px;
    font-weight: 500;
    color: #9CA3AF;
}

.fav-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CTA ===== */
.cta {
    padding: 0 24px 80px;
}

.cta-card {
    max-width: 1152px;
    margin: 0 auto;
    background: #131B2E;
    border: 1px solid #1E293B;
    border-radius: 20px;
    padding: 56px 24px;
    text-align: center;
}

.cta-card h2 {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 14px;
}

.cta-card p {
    font-size: 15px;
    color: #94A3B8;
    max-width: 560px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

.cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.btn-ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}

.btn-ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* ===== Footer ===== */
.site-footer {
    background: #131B2E;
    padding: 32px 0;
    border-top: 1px solid #1E293B;
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.logo-light {
    color: #fff;
    margin-bottom: 4px;
}

.footer-brand p {
    font-size: 12px;
    color: #64748B;
}

.footer-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
}

.footer-nav a {
    font-size: 13px;
    color: #94A3B8;
    transition: color 0.2s ease;
}

.footer-nav a:hover {
    color: #fff;
}

/* ===== Scroll reveal & micro-interactions ===== */
/* Only hide when JS is active (progressive enhancement) */
.js .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Stagger children within grids/rows */
.stats-inner .reveal:nth-child(2) { transition-delay: 0.08s; }
.stats-inner .reveal:nth-child(3) { transition-delay: 0.16s; }
.stats-inner .reveal:nth-child(4) { transition-delay: 0.24s; }

.steps-grid .reveal:nth-child(2) { transition-delay: 0.12s; }
.steps-grid .reveal:nth-child(3) { transition-delay: 0.24s; }

.freelancer-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.freelancer-grid .reveal:nth-child(3) { transition-delay: 0.2s; }
.freelancer-grid .reveal:nth-child(4) { transition-delay: 0.3s; }

/* Card lift on hover */
.freelancer-card {
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.freelancer-card:hover {
    transform: translateY(-6px);
}

.freelancer-card .cover-img {
    transition: transform 0.4s ease;
}

.freelancer-card:hover .cover-img {
    transform: scale(1.05);
}

/* Button press feedback */
.btn {
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn-primary:hover,
.btn-light:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0) scale(0.97);
}

/* Step icon pop on hover */
.step-card .step-icon {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.step-card:hover .step-icon {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 10px 22px rgba(7, 12, 156, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none;
    }
    .hero-image,
    .float-verified,
    .float-milestone {
        animation: none !important;
    }
}

/* ===== Responsive ===== */
@media (max-width: 960px) {
    .main-nav {
        display: none;
    }

    .main-nav.show {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        margin-left: 0;
        gap: 18px;
        background: #fff;
        padding: 20px 24px;
        border-bottom: 1px solid #E5E7EB;
        box-shadow: 0 12px 24px rgba(17, 24, 39, 0.08);
        z-index: 99;
    }

    .main-nav.show .nav-auth-link {
        display: block;
        width: 100%;
        padding-top: 16px;
        border-top: 1px solid #EEF0F4;
        color: #070C9C;
        font-weight: 600;
    }

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

    .hero-media {
        order: -1;
    }

    .hero-title {
        font-size: 36px;
    }

    .steps-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .steps-grid::before {
        display: none;
    }

    .freelancer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .container {
        padding: 0 16px;
    }

    /* Stats: solid 2-column grid */
    .stats {
        padding: 32px 0;
    }

    .stats-inner {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 12px;
    }

    .stat-item {
        min-width: 0;
    }

    .stat-number {
        font-size: 26px;
    }

    .stat-label {
        font-size: 14px;
    }

    .stat-divider {
        display: none;
    }

    /* Hero */
    .hero {
        padding: 32px 0 48px;
    }

    .hero-inner {
        gap: 32px;
    }

    .hero-title {
        font-size: 30px;
    }

    .hero-subtitle {
        font-size: 15px;
    }

    .hero-search {
        flex-wrap: wrap;
        border-radius: 20px;
        padding: 14px;
    }

    .hero-search input {
        width: 100%;
        min-width: 0;
        padding: 8px 0 12px;
    }

    .btn-search {
        width: 100%;
    }

    /* Keep floating badges inside the frame on small screens */
    .float-verified {
        top: 10px;
        right: 10px;
        padding: 9px 12px;
    }

    .float-milestone {
        left: 10px;
        bottom: 10px;
        padding: 8px 12px 8px 10px;
    }

    .badge-text strong { font-size: 13px; }
    .badge-text span { font-size: 11px; }
    .milestone-text { font-size: 12px; }

    /* Sections */
    .how-it-works {
        padding: 56px 0;
    }

    .section-heading h2,
    .cta-card h2 {
        font-size: 24px;
    }

    .freelancers-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .freelancer-grid {
        grid-template-columns: 1fr;
    }

    .cta {
        padding: 0 16px 56px;
    }

    .cta-card {
        padding: 40px 20px;
    }

    .cta-actions {
        flex-direction: column;
    }

    .cta-actions .btn {
        width: 100%;
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .footer-nav {
        gap: 12px 20px;
    }

    .header-actions .btn-outline {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }
}

/* ===================================================================
   Inner pages
   =================================================================== */

/* Page hero (shared banner) */
.page-hero {
    padding: 44px 0 32px;
    background: linear-gradient(180deg, #F4F5FF 0%, #ffffff 100%);
    border-bottom: 1px solid #EEF0F4;
}

.page-eyebrow {
    display: inline-block;
    background: #EEF2FF;
    color: #070C9C;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.page-title {
    font-size: 40px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin-bottom: 14px;
}

.page-lead {
    font-size: 17px;
    color: #6B7280;
    max-width: 640px;
    line-height: 1.6;
}

.page-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.page-search {
    margin-top: 24px;
    margin-bottom: 0;
}

/* Find Talent listing */
.talent-listing {
    padding: 28px 0 72px;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.filter-chip {
    border: 1px solid #E5E7EB;
    background: #fff;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.filter-chip:hover {
    border-color: #070C9C;
    color: #070C9C;
}

.filter-chip.is-active {
    background: #070C9C;
    border-color: #070C9C;
    color: #fff;
}

.results-count {
    font-size: 14px;
    color: #6B7280;
    margin-bottom: 24px;
}

.results-count strong {
    color: #111827;
}

/* Process (How it works) */
.process {
    padding: 64px 0;
}

.process-alt {
    background: #F9FAFB;
}

.section-heading-left {
    text-align: left;
    margin: 0 0 32px;
    max-width: 640px;
}

.section-heading-left h2 {
    text-align: left;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.process-card {
    background: #fff;
    border: 1px solid #EEF0F4;
    border-radius: 16px;
    padding: 32px 28px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.process-card:hover {
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.08);
    transform: translateY(-4px);
}

.process-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #EEF2FF;
    color: #070C9C;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 18px;
}

.process-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
}

.process-card p {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.6;
}

/* FAQ */
.faq {
    padding: 72px 0 80px;
}

.faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-item {
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 0 22px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item[open] {
    border-color: #C7D2FE;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.05);
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    padding: 20px 0;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-icon {
    flex-shrink: 0;
    display: flex;
    transition: transform 0.25s ease;
}

.faq-item[open] .faq-icon {
    transform: rotate(180deg);
}

.faq-item p {
    font-size: 14.5px;
    color: #6B7280;
    line-height: 1.7;
    padding: 0 0 22px;
    margin: 0;
}

/* Categories */
.category-section {
    padding: 56px 0 80px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.category-card {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid #EEF0F4;
    border-radius: 18px;
    padding: 28px;
    color: inherit;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.category-card:hover {
    box-shadow: 0 16px 36px rgba(17, 24, 39, 0.1);
    transform: translateY(-6px);
    border-color: #E0E7FF;
}

.category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #EEF2FF;
    margin-bottom: 20px;
}

.category-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.category-card p {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.6;
    margin-bottom: 18px;
}

.category-count {
    font-size: 13px;
    font-weight: 600;
    color: #070C9C;
}

.category-arrow {
    position: absolute;
    top: 28px;
    right: 28px;
    color: #C7D2FE;
    transition: transform 0.25s ease, color 0.25s ease;
}

.category-card:hover .category-arrow {
    color: #070C9C;
    transform: translateX(4px);
}

/* Auth & forms */
.auth-section {
    padding: 56px 0 80px;
    background: linear-gradient(180deg, #F4F5FF 0%, #ffffff 40%);
}

.auth-wrap {
    max-width: 460px;
    margin: 0 auto;
}

.form-wrap-wide {
    max-width: 720px;
}

.auth-card {
    background: #fff;
    border: 1px solid #EEF0F4;
    border-radius: 20px;
    padding: 36px;
    box-shadow: 0 14px 44px rgba(17, 24, 39, 0.07);
}

.auth-head {
    text-align: center;
    margin-bottom: 28px;
}

.auth-head h1 {
    font-size: 26px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 8px;
}

.auth-head p {
    font-size: 14.5px;
    color: #6B7280;
}

.form-group {
    margin-bottom: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.form-control {
    width: 100%;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 15px;
    color: #111827;
    font-family: inherit;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control::placeholder {
    color: #9CA3AF;
}

.form-control:focus {
    outline: none;
    border-color: #070C9C;
    box-shadow: 0 0 0 3px rgba(7, 12, 156, 0.12);
}

textarea.form-control {
    min-height: 130px;
    resize: vertical;
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.btn-block {
    width: 100%;
}

.auth-alt {
    text-align: center;
    font-size: 14px;
    color: #6B7280;
    margin-top: 22px;
}

.auth-alt a {
    color: #070C9C;
    font-weight: 600;
}

/* Inner-page responsive */
@media (max-width: 900px) {
    .process-grid,
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .page-hero {
        padding: 36px 0 32px;
    }

    .page-title {
        font-size: 30px;
    }

    .page-lead {
        font-size: 15px;
    }

    .page-hero-actions .btn {
        flex: 1 1 auto;
    }

    .process-grid,
    .category-grid {
        grid-template-columns: 1fr;
    }

    .process {
        padding: 48px 0;
    }

    .auth-card {
        padding: 26px 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* About page */
.about-mission {
    padding: 72px 0;
}

.about-mission-inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
}

.about-mission-text h2 {
    font-size: 30px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.4px;
    margin-bottom: 18px;
}

.about-mission-text p {
    font-size: 15.5px;
    color: #6B7280;
    line-height: 1.7;
    margin-bottom: 16px;
}

.about-mission-media img {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
}

.about-stats {
    padding: 48px 0;
    background: rgba(7, 12, 156, 0.2);
}

.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.about-stat {
    text-align: center;
}

.about-stat-num {
    display: block;
    font-size: 34px;
    font-weight: 800;
    color: #0b1c30;
    line-height: 1.1;
}

.about-stat-label {
    font-size: 14px;
    color: #45464d;
    margin-top: 6px;
    display: block;
}

.about-values {
    padding: 72px 0 80px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.value-card {
    background: #fff;
    border: 1px solid #EEF0F4;
    border-radius: 16px;
    padding: 28px 24px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.value-card:hover {
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.08);
    transform: translateY(-4px);
}

.value-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: #EEF2FF;
    margin-bottom: 18px;
}

.value-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
}

.value-card p {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .about-mission-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .about-mission-media {
        order: -1;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 16px;
    }
}

@media (max-width: 640px) {
    .about-mission {
        padding: 48px 0;
    }

    .about-mission-text h2 {
        font-size: 24px;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }
}

/* Card CTA (View Profile) */
.card-cta {
    width: 100%;
    margin-top: 14px;
    padding: 9px 16px;
    font-size: 14px;
}

.card-name-link {
    color: inherit;
    transition: color 0.2s ease;
}

.card-name-link:hover {
    color: #070C9C;
}

.freelancer-cover {
    display: block;
}

/* ===== Freelancer profile page ===== */
.breadcrumb {
    padding: 20px 0 0;
    font-size: 13px;
    color: #9CA3AF;
}

.breadcrumb a {
    color: #6B7280;
    font-weight: 500;
}

.breadcrumb a:hover {
    color: #070C9C;
}

.breadcrumb span {
    margin: 0 8px;
}

.breadcrumb span:last-child {
    margin: 0;
    color: #6B7280;
}

.profile-hero {
    padding: 28px 0 40px;
    border-bottom: 1px solid #EEF0F4;
}

.profile-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    align-items: start;
}

.profile-media {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.profile-media img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.profile-verified {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #16A34A;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
}

.profile-info h1 {
    font-size: 34px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.5px;
    margin: 12px 0 12px;
}

.profile-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 14px;
    color: #6B7280;
    margin-bottom: 18px;
}

.meta-rating,
.meta-loc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.meta-rating strong {
    color: #111827;
}

.meta-dot {
    color: #D1D5DB;
}

.profile-bio {
    font-size: 16px;
    color: #4B5563;
    line-height: 1.7;
    max-width: 620px;
    margin-bottom: 22px;
}

.profile-rate {
    font-size: 15px;
    color: #6B7280;
    margin-bottom: 22px;
}

.profile-rate strong {
    font-size: 26px;
    font-weight: 800;
    color: #070C9C;
}

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

.profile-body {
    padding: 44px 0 56px;
}

.related-section {
    padding: 52px 0 72px;
    border-top: 1px solid #EEF0F4;
    background: #F9FAFB;
}

.profile-body-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
}

.profile-block {
    margin-bottom: 36px;
}

.profile-block h2 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 14px;
}

.profile-block p {
    font-size: 15.5px;
    color: #6B7280;
    line-height: 1.75;
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.skill-tag {
    background: #EEF2FF;
    color: #070C9C;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 999px;
}

.profile-sidebar {
    position: sticky;
    top: 92px;
}

.sidebar-card {
    background: #fff;
    border: 1px solid #EEF0F4;
    border-radius: 18px;
    padding: 26px;
    box-shadow: 0 12px 34px rgba(17, 24, 39, 0.06);
}

.sidebar-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 16px;
}

.glance-list {
    margin-bottom: 22px;
}

.glance-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid #F3F4F6;
    font-size: 14px;
}

.glance-list li:last-child {
    border-bottom: none;
}

.glance-list span {
    color: #6B7280;
}

.glance-list strong {
    color: #111827;
    font-weight: 700;
}

.sidebar-secondary {
    margin-top: 10px;
}

@media (max-width: 900px) {
    .profile-grid {
        grid-template-columns: 220px 1fr;
        gap: 28px;
    }

    .profile-body-grid {
        grid-template-columns: 1fr;
    }

    .profile-sidebar {
        position: static;
    }
}

@media (max-width: 640px) {
    .profile-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .profile-media {
        max-width: 240px;
    }

    .profile-info h1 {
        font-size: 27px;
    }

    .profile-actions .btn {
        flex: 1 1 auto;
    }
}

/* ===== Jobs listing ===== */
.jobs-listing {
    padding: 28px 0 72px;
}

.jobs-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.job-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #fff;
    border: 1px solid #EEF0F4;
    border-radius: 16px;
    padding: 24px;
    color: inherit;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.job-card:hover {
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.08);
    transform: translateY(-3px);
    border-color: #E0E7FF;
}

.job-logo {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
}

.job-logo-1 { background: linear-gradient(135deg, #6366F1, #070C9C); }
.job-logo-2 { background: linear-gradient(135deg, #10B981, #059669); }
.job-logo-3 { background: linear-gradient(135deg, #F59E0B, #D97706); }
.job-logo-4 { background: linear-gradient(135deg, #EC4899, #DB2777); }

.job-main {
    flex: 1;
    min-width: 0;
}

.job-top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.job-top h3 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.job-type {
    font-size: 12px;
    font-weight: 600;
    color: #070C9C;
    background: #EEF2FF;
    padding: 4px 10px;
    border-radius: 999px;
}

.job-company {
    font-size: 13.5px;
    color: #6B7280;
    margin-bottom: 10px;
}

.job-summary {
    font-size: 14.5px;
    color: #4B5563;
    line-height: 1.6;
    margin-bottom: 14px;
}

.job-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.job-skill {
    font-size: 12px;
    font-weight: 500;
    color: #4B5563;
    background: #F3F4F6;
    padding: 5px 12px;
    border-radius: 999px;
}

.job-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.job-budget {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.job-budget small {
    font-size: 12px;
    font-weight: 500;
    color: #9CA3AF;
}

.job-posted {
    font-size: 13px;
    color: #9CA3AF;
}

.job-arrow {
    flex-shrink: 0;
    align-self: center;
    color: #C7D2FE;
    transition: transform 0.25s ease, color 0.25s ease;
}

.job-card:hover .job-arrow {
    color: #070C9C;
    transform: translateX(4px);
}

/* ===== Job detail ===== */
.job-detail {
    padding: 32px 0 56px;
}

.job-detail-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
}

.job-detail-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.job-detail-head h1 {
    font-size: 28px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.4px;
}

.job-detail-company {
    font-size: 14.5px;
    color: #6B7280;
    margin-top: 4px;
}

.job-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}

.job-badge-muted {
    font-size: 13px;
    color: #6B7280;
    background: #F3F4F6;
    padding: 5px 12px;
    border-radius: 999px;
}

.job-list-bullets {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.job-list-bullets li {
    position: relative;
    padding-left: 28px;
    font-size: 15px;
    color: #6B7280;
    line-height: 1.6;
}

.job-list-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #EEF2FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12l5 5L20 7' stroke='%23070C9C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
}

.sidebar-budget {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #070C9C;
    margin-bottom: 18px;
}

.sidebar-budget small {
    font-size: 13px;
    font-weight: 500;
    color: #9CA3AF;
}

@media (max-width: 900px) {
    .job-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .job-card {
        padding: 18px;
        gap: 14px;
    }

    .job-logo {
        width: 46px;
        height: 46px;
        font-size: 18px;
    }

    .job-detail-head h1 {
        font-size: 23px;
    }
}

/* Account role chooser */
.role-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.role-card {
    display: block;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 30px 26px;
    color: inherit;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.role-card:hover {
    box-shadow: 0 16px 36px rgba(17, 24, 39, 0.1);
    transform: translateY(-4px);
    border-color: #C7D2FE;
}

.role-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #EEF2FF;
    margin-bottom: 20px;
}

.role-card h3 {
    font-size: 19px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.role-card p {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.6;
    margin-bottom: 18px;
}

.role-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #070C9C;
}

.role-go svg {
    transition: transform 0.2s ease;
}

.role-card:hover .role-go svg {
    transform: translateX(3px);
}

.auth-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #6B7280;
    margin-bottom: 18px;
    transition: color 0.2s ease;
}

.auth-back:hover {
    color: #070C9C;
}

@media (max-width: 640px) {
    .role-choice {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   9jaTech app layer - components the static design did not include
   (dashboards, tables, alerts, badges, forms in the app). Uses the
   same design tokens: primary #070C9C, dark #131B2E, green #16A34A.
   =================================================================== */
:root{
  --primary:#070C9C; --primary-dark:#050878; --ink:#111827; --muted:#6B7280;
  --line:#E5E7EB; --line-soft:#EEF0F4; --bg-soft:#F9FAFB; --indigo-soft:#EEF2FF;
  --green:#16A34A; --green-soft:#DCFCE7; --amber:#D97706; --amber-soft:#FEF3C7;
  --red:#DC2626; --red-soft:#FEE2E2; --navy:#131B2E;
}

/* Generic page wrapper so app pages get consistent rhythm */
.page-section{ padding:40px 0 64px; }
.page-section-tight{ padding:28px 0 56px; }
.container-narrow{ max-width:760px; margin:0 auto; }
.flash-wrap{ padding-top:18px; }
.muted{ color:var(--muted); }
.text-center{ text-align:center; }
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.stack{ display:flex; flex-direction:column; gap:16px; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* Buttons: extra variants on top of design .btn */
.btn-dark{ background:var(--navy); color:#fff; border-color:var(--navy); }
.btn-dark:hover{ background:#0b1220; }
.btn-success{ background:var(--green); color:#fff; border-color:var(--green); }
.btn-success:hover{ background:#12833c; }
.btn-danger{ background:var(--red); color:#fff; border-color:var(--red); }
.btn-danger:hover{ background:#b91c1c; }
.btn-light{ background:var(--indigo-soft); color:var(--primary); border-color:transparent; }
.btn-light:hover{ background:#e0e7ff; }
.btn-sm{ padding:7px 14px; font-size:13px; }
.btn-lg{ padding:13px 26px; font-size:15px; }
.btn[disabled],.btn.is-disabled{ opacity:.55; pointer-events:none; }

/* Alerts */
.alert{ border-radius:12px; padding:13px 16px; font-size:14px; font-weight:500; margin-bottom:14px; border:1px solid transparent; }
.alert-success{ background:var(--green-soft); color:#0f7a37; border-color:#bbf7d0; }
.alert-error,.alert-danger{ background:var(--red-soft); color:#b91c1c; border-color:#fecaca; }
.alert-info{ background:var(--indigo-soft); color:var(--primary); border-color:#c7d2fe; }
.alert-warning{ background:var(--amber-soft); color:#92600a; border-color:#fde68a; }

/* Generic card surface (app) */
.ui-card{ background:#fff; border:1px solid var(--line-soft); border-radius:16px; padding:24px; }
.ui-card + .ui-card{ margin-top:16px; }
.panel{ background:#fff; border:1px solid var(--line-soft); border-radius:16px; padding:24px; margin-bottom:20px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.panel-head h2,.panel-head h3{ font-size:18px; font-weight:700; color:var(--ink); }

/* Simple grids for app pages */
.g2,.g3,.g4{ display:grid; gap:20px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .g3,.g4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .g2,.g3,.g4{ grid-template-columns:1fr; } }

/* Dashboard header */
.dash-head{ padding:36px 0 8px; }
.dash-head h1{ font-size:30px; font-weight:800; color:var(--ink); letter-spacing:-.5px; }
.dash-head p{ color:var(--muted); font-size:15px; margin-top:6px; }
.dash-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:20px 0 8px; }

/* Stat tiles */
.stat-tile{ background:#fff; border:1px solid var(--line-soft); border-radius:16px; padding:22px; }
.stat-tile .st-top{ display:flex; align-items:center; justify-content:space-between; }
.stat-tile .st-label{ font-size:13px; color:var(--muted); font-weight:600; }
.stat-tile .st-num{ font-size:30px; font-weight:800; color:var(--ink); margin-top:10px; letter-spacing:-.5px; }
.stat-tile .st-icon{ width:36px; height:36px; border-radius:10px; background:var(--indigo-soft); display:flex; align-items:center; justify-content:center; color:var(--primary); }

/* Badges / pills / tags */
.badge{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; }
.badge-success{ background:var(--green-soft); color:#0f7a37; }
.badge-warning{ background:var(--amber-soft); color:#92600a; }
.badge-danger{ background:var(--red-soft); color:#b91c1c; }
.badge-info{ background:var(--indigo-soft); color:var(--primary); }
.badge-muted{ background:#F3F4F6; color:#4B5563; }
.tag{ display:inline-block; font-size:12px; font-weight:500; color:#4B5563; background:#F3F4F6; padding:5px 12px; border-radius:999px; margin:0 6px 6px 0; }

/* Avatar */
.avatar{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%;
  background:var(--indigo-soft); color:var(--primary); font-weight:800; font-size:16px; flex-shrink:0; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); }
.avatar-lg{ width:64px; height:64px; font-size:22px; }

/* Forms in app context: alias legacy classes to the design .form-control look */
.input,.select,textarea.textarea,.textarea{ width:100%; border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  font-size:15px; color:var(--ink); font-family:inherit; background:#fff; transition:border-color .2s, box-shadow .2s; }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(7,12,156,.12); }
.textarea{ min-height:130px; resize:vertical; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:14px; font-weight:600; color:#374151; margin-bottom:8px; }
.field .hint{ font-size:12px; color:var(--muted); margin-top:6px; }

/* Tables */
.table-wrap{ overflow-x:auto; border:1px solid var(--line-soft); border-radius:14px; background:#fff; }
table.table{ width:100%; border-collapse:collapse; min-width:640px; }
table.table th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted);
  font-weight:700; padding:14px 16px; background:var(--bg-soft); border-bottom:1px solid var(--line); white-space:nowrap; }
table.table td{ padding:14px 16px; font-size:14px; color:#374151; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
table.table tr:last-child td{ border-bottom:none; }
table.table tbody tr:hover{ background:#fafbff; }

/* Empty state */
.empty-state{ text-align:center; padding:56px 24px; background:#fff; border:1px dashed var(--line); border-radius:16px; }
.empty-state .es-icon{ width:56px; height:56px; border-radius:50%; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:var(--muted); }
.empty-state h3{ font-size:18px; color:var(--ink); margin-bottom:6px; }
.empty-state p{ color:var(--muted); font-size:14px; max-width:360px; margin:0 auto 18px; }

/* Section heading helper (left aligned, app) */
.app-h{ font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-.3px; }
.app-sub{ color:var(--muted); font-size:14.5px; margin-top:4px; }

/* Messages */
.msg-layout{ display:grid; grid-template-columns:300px 1fr; gap:20px; align-items:start; }
.msg-people{ background:#fff; border:1px solid var(--line-soft); border-radius:16px; overflow:hidden; }
.msg-person{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line-soft); color:inherit; }
.msg-person:hover,.msg-person.active{ background:var(--indigo-soft); }
.msg-person .mp-name{ font-weight:700; font-size:14px; color:var(--ink); }
.msg-thread{ background:#fff; border:1px solid var(--line-soft); border-radius:16px; display:flex; flex-direction:column; min-height:520px; }
.msg-scroll{ flex:1; padding:22px; display:flex; flex-direction:column; gap:12px; overflow-y:auto; max-height:520px; }
.bubble{ max-width:72%; padding:11px 15px; border-radius:16px; font-size:14px; line-height:1.5; }
.bubble small{ display:block; font-size:11px; opacity:.7; margin-top:5px; }
.bubble-in{ background:var(--bg-soft); color:#374151; border-bottom-left-radius:4px; align-self:flex-start; }
.bubble-out{ background:var(--primary); color:#fff; border-bottom-right-radius:4px; align-self:flex-end; }
.composer{ display:flex; gap:10px; padding:14px; border-top:1px solid var(--line-soft); }
.composer input{ flex:1; }
@media(max-width:760px){ .msg-layout{ grid-template-columns:1fr; } }

/* Wallet */
.wallet-hero{ background:var(--navy); border-radius:20px; padding:32px; color:#fff; }
.wallet-hero .wh-label{ color:#94A3B8; font-size:13px; font-weight:600; }
.wallet-hero .wh-amount{ font-size:38px; font-weight:800; margin-top:8px; letter-spacing:-1px; }

/* Auth mark tile */
.auth-mark{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:16px;
  background:var(--primary); color:#fff; font-weight:900; font-size:20px; box-shadow:0 8px 24px rgba(7,12,156,.22); margin-bottom:14px; }

/* Pagination */
.pagination{ display:flex; gap:8px; justify-content:center; margin-top:32px; flex-wrap:wrap; }
.pagination a,.pagination span{ min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 12px; border-radius:10px; border:1px solid var(--line); font-size:14px; font-weight:600; color:#374151; background:#fff; }
.pagination a:hover{ border-color:var(--primary); color:var(--primary); }
.pagination .is-current{ background:var(--primary); color:#fff; border-color:var(--primary); }
.pagination .is-disabled{ opacity:.45; pointer-events:none; }

/* Password toggle + strength (auth pages) */
.pw-wrap{ position:relative; }
.pw-toggle{ position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--muted); padding:4px; display:flex; }
.pw-toggle:hover{ color:var(--primary); }
.strength{ display:flex; gap:4px; margin-top:8px; }
.strength i{ flex:1; height:3px; border-radius:3px; background:var(--line); transition:background .2s; }
.strength-text{ font-size:11px; font-weight:600; margin-top:4px; display:block; }

/* Detail meta list */
.meta-list{ display:flex; flex-direction:column; gap:0; }
.meta-list li{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:14px; }
.meta-list li:last-child{ border-bottom:none; }
.meta-list span{ color:var(--muted); }
.meta-list strong{ color:var(--ink); }

/* Reveal safety: never leave content invisible if JS fails on app pages */
.no-reveal .reveal{ opacity:1 !important; transform:none !important; }

/* Legal / prose pages */
.prose{ max-width:760px; margin:0 auto; padding:8px 0 8px; }
.prose h2{ font-size:20px; font-weight:800; color:#111827; margin:30px 0 10px; }
.prose h3{ font-size:16px; font-weight:700; color:#111827; margin:22px 0 8px; }
.prose p,.prose li{ font-size:15px; color:#4B5563; line-height:1.75; margin-bottom:12px; }
.prose ul{ padding-left:20px; margin-bottom:12px; }
.prose ul li{ list-style:disc; margin-bottom:6px; }
.prose .updated{ font-size:13px; color:#9CA3AF; margin-bottom:8px; }

/* Contact grid */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:28px; align-items:start; }
.contact-info-card{ background:#fff; border:1px solid #EEF0F4; border-radius:16px; padding:26px; }
.contact-info-card .ci-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.contact-ico{ width:44px; height:44px; border-radius:12px; background:#EEF2FF; display:grid; place-items:center; flex-shrink:0; }
@media(max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }

/* Pricing */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.price-card{ background:#fff; border:1px solid #EEF0F4; border-radius:18px; padding:32px 28px; display:flex; flex-direction:column; transition:box-shadow .25s, transform .25s; }
.price-card:hover{ box-shadow:0 16px 36px rgba(17,24,39,.1); transform:translateY(-4px); }
.price-card.is-featured{ border-color:#070C9C; box-shadow:0 16px 40px rgba(7,12,156,.12); position:relative; }
.price-flag{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:#070C9C; color:#fff; font-size:12px; font-weight:700; padding:5px 14px; border-radius:999px; }
.price-name{ font-size:16px; font-weight:700; color:#111827; }
.price-amt{ font-size:38px; font-weight:800; color:#111827; letter-spacing:-1px; margin:12px 0 4px; }
.price-amt small{ font-size:14px; font-weight:600; color:#9CA3AF; }
.price-desc{ font-size:14px; color:#6B7280; margin-bottom:20px; }
.price-features{ list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:11px; flex:1; }
.price-features li{ display:flex; align-items:flex-start; gap:9px; font-size:14px; color:#4B5563; }
.price-features svg{ flex-shrink:0; margin-top:2px; }
@media(max-width:820px){ .pricing-grid{ grid-template-columns:1fr; } }

/* Resource cards reuse category-card; nothing extra needed */

/* ===================================================================
   Legacy compatibility layer.
   Maps the original backend's class + CSS-variable vocabulary onto the
   new 9jaTech design tokens so admin pages (and any legacy markup)
   render correctly without being rewritten.
   =================================================================== */
:root{
  --secondary:#131B2E; --accent:#16A34A; --danger:#DC2626; --warning:#D97706;
  --border:#E5E7EB;
}
/* Generic surface card (backend used .card everywhere) */
.card{ background:#fff; border:1px solid var(--line-soft); border-radius:16px; padding:24px; }
a.card{ color:inherit; text-decoration:none; transition:box-shadow .2s, transform .2s, border-color .2s; }
a.card:hover{ box-shadow:0 12px 30px rgba(17,24,39,.08); transform:translateY(-3px); border-color:#E0E7FF; }
.container-narrow{ max-width:760px; margin:0 auto; }

/* Section wrapper the old header used to open (we now open per page). */
main.container.section, .section{ }

/* Grids: support both ".grid two" and ".grid-2" spellings */
.grid{ display:grid; gap:20px; }
.grid.two,.grid-2{ display:grid; gap:20px; grid-template-columns:repeat(2,1fr); }
.grid.three,.grid-3{ display:grid; gap:20px; grid-template-columns:repeat(3,1fr); }
.grid.four,.grid-4{ display:grid; gap:20px; grid-template-columns:repeat(4,1fr); }
@media(max-width:960px){ .grid.three,.grid-3,.grid.four,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .grid,.grid.two,.grid-2,.grid.three,.grid-3,.grid.four,.grid-4{ grid-template-columns:1fr; } }

/* Old stats band */
.stats{ display:flex; flex-wrap:wrap; gap:16px; margin:8px 0; }
.stat{ flex:1; min-width:140px; background:#fff; border:1px solid var(--line-soft); border-radius:14px; padding:18px; }
.stat span{ font-size:13px; color:var(--muted); font-weight:600; }
.stat strong{ font-size:24px; font-weight:800; color:var(--ink); }

/* Topbar (admin) */
.topbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:24px; }

/* Admin sub-nav */
.admin-nav{ display:block; }
.admin-nav .btn{ padding:8px 14px; font-size:13px; }

/* Eyebrow + section titles used by a few legacy fragments */
.eyebrow{ display:inline-block; background:var(--indigo-soft); color:var(--primary); font-size:13px; font-weight:600; padding:6px 14px; border-radius:999px; margin-bottom:12px; }
.page-head{ padding:40px 0 20px; }
.page-head h1{ font-size:32px; font-weight:800; color:var(--ink); letter-spacing:-.5px; }
.section-title{ font-size:26px; font-weight:800; color:var(--ink); }
.section-sub{ color:var(--muted); }
.section-tight{ padding:32px 0; }
.lead{ font-size:16px; color:var(--muted); }
.container-narrow.card,.card.container-narrow{ margin-top:16px; }

/* Secondary button alias */
.btn.secondary,.btn-secondary{ background:var(--indigo-soft); color:var(--primary); border-color:transparent; }

/* Old alert classes */
.alert.success{ background:var(--green-soft); color:#0f7a37; border:1px solid #bbf7d0; }
.alert.error{ background:var(--red-soft); color:#b91c1c; border:1px solid #fecaca; }

/* Portfolio grid (freelancer profile) */
.portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.portfolio-item{ display:block; position:relative; border:1px solid var(--line-soft); border-radius:14px; overflow:hidden;
  background:#fff; color:inherit; transition:box-shadow .25s, transform .25s; }
.portfolio-item:hover{ box-shadow:0 12px 28px rgba(17,24,39,.1); transform:translateY(-3px); }
.portfolio-item img{ width:100%; height:150px; object-fit:cover; display:block; }
.portfolio-file{ display:flex; align-items:center; justify-content:center; height:150px; background:var(--indigo-soft); }
.portfolio-cap{ display:block; padding:10px 12px; font-size:13px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media(max-width:900px){ .portfolio-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .portfolio-grid{ grid-template-columns:1fr; } }

/* Attachment list */
.file-list{ display:flex; flex-direction:column; gap:8px; }
.file-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px;
  border:1px solid var(--line-soft); border-radius:12px; background:#fff; font-size:14px; }
.file-row a{ color:var(--primary); font-weight:600; }

/* Rich text editor */
.rt-wrap{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; transition:border-color .2s, box-shadow .2s; }
.rt-wrap:focus-within{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(7,12,156,.12); }
.rt-toolbar{ display:flex; flex-wrap:wrap; gap:4px; padding:8px 10px; background:var(--bg-soft); border-bottom:1px solid var(--line-soft); }
.rt-btn{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:5px 10px; font-size:12.5px;
  color:#374151; cursor:pointer; line-height:1.2; font-family:inherit; transition:all .15s; }
.rt-btn:hover{ border-color:var(--primary); color:var(--primary); }
.rt-btn:active{ transform:scale(.96); }
.rt-editor{ border:none !important; border-radius:0 !important; box-shadow:none !important; min-height:140px;
  padding:14px; font-size:15px; line-height:1.7; color:var(--ink); outline:none; overflow-y:auto; max-height:420px; }
.rt-editor:empty:before{ content:attr(data-placeholder); color:#9CA3AF; pointer-events:none; }
.rt-editor p{ margin:0 0 10px; }
.rt-editor ul,.rt-editor ol{ padding-left:22px; margin:0 0 10px; }
.rt-editor ul li{ list-style:disc; }
.rt-editor ol li{ list-style:decimal; }
.rt-editor a{ color:var(--primary); text-decoration:underline; }
.rt-editor.rt-invalid{ box-shadow:0 0 0 3px rgba(220,38,38,.15) !important; }
.rt-wrap:has(.rt-invalid){ border-color:var(--red); }

/* Rendered rich content */
.rich-content{ font-size:15px; line-height:1.75; color:#4B5563; }
.rich-content p{ margin:0 0 12px; }
.rich-content ul,.rich-content ol{ padding-left:22px; margin:0 0 12px; }
.rich-content ul li{ list-style:disc; margin-bottom:4px; }
.rich-content ol li{ list-style:decimal; margin-bottom:4px; }
.rich-content a{ color:var(--primary); text-decoration:underline; }
.rich-content h3,.rich-content h4{ color:var(--ink); margin:18px 0 8px; font-weight:700; }
.rich-content blockquote{ border-left:3px solid var(--line); padding-left:14px; color:var(--muted); margin:0 0 12px; }

/* Conversation project context (Upwork-style header) */
.msg-context{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px 20px; background:var(--indigo-soft); border-bottom:1px solid #C7D2FE; }
.msg-context-label{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--primary); margin-bottom:3px; }
.msg-context-title{ display:block; font-size:15px; font-weight:700; color:var(--ink); }
.msg-context-title:hover{ color:var(--primary); }
.msg-context-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; font-size:12.5px; color:#4B5563; }
.msg-context-actions{ flex-shrink:0; }
@media(max-width:560px){ .msg-context{ padding:12px 14px; } .msg-context-actions{ width:100%; } .msg-context-actions .btn{ width:100%; } }

/* Branded confirm modal (replaces window.confirm) */
.modal-backdrop{ position:fixed; inset:0; background:rgba(17,24,39,.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000; animation:modalFade .18s ease; }
.modal-backdrop[hidden]{ display:none; }
@keyframes modalFade{ from{ opacity:0 } to{ opacity:1 } }
.modal-card{ background:#fff; border-radius:20px; padding:32px 28px 24px; max-width:420px; width:100%;
  box-shadow:0 24px 60px rgba(17,24,39,.28); text-align:center; animation:modalPop .22s cubic-bezier(.34,1.56,.64,1); }
@keyframes modalPop{ from{ opacity:0; transform:translateY(12px) scale(.96) } to{ opacity:1; transform:none } }
.modal-icon{ width:52px; height:52px; border-radius:50%; background:var(--amber-soft); color:var(--amber);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.modal-title{ font-size:19px; font-weight:800; color:var(--ink); margin-bottom:8px; }
.modal-body{ font-size:14.5px; color:var(--muted); line-height:1.6; margin-bottom:24px; }
.modal-actions{ display:flex; gap:10px; justify-content:center; }
.modal-actions .btn{ min-width:120px; }
@media(max-width:480px){ .modal-actions{ flex-direction:column-reverse; } .modal-actions .btn{ width:100%; } }

/* Photo editor (avatar + cover) */
.photo-editor{ display:flex; flex-direction:column; gap:18px; }
.photo-cover{ position:relative; height:170px; border-radius:16px; background:#EEF2FF center/cover no-repeat;
  border:1px solid var(--line-soft); display:flex; align-items:center; justify-content:center; }
.photo-cover-empty{ font-size:13px; font-weight:600; color:#9CA3AF; }
.photo-avatar{ position:absolute; left:24px; bottom:-28px; width:92px; height:92px; border-radius:50%;
  object-fit:cover; border:4px solid #fff; box-shadow:0 6px 18px rgba(17,24,39,.15); background:#fff; }
.photo-actions{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:34px; }
.photo-form label{ display:block; font-size:14px; font-weight:600; color:#374151; margin-bottom:8px; }
.photo-form input[type=file]{ font-size:13px; padding:9px 12px; }
.photo-btns{ display:flex; gap:8px; margin-top:10px; }
@media(max-width:640px){ .photo-actions{ grid-template-columns:1fr; } }

/* Public profile cover banner */
.profile-cover{ height:190px; border-radius:20px; background:linear-gradient(135deg,#EEF2FF,#DCFCE7) center/cover no-repeat;
  margin-bottom:-70px; border:1px solid var(--line-soft); }
@media(max-width:640px){ .profile-cover{ height:130px; margin-bottom:-50px; } }

/* Company logo tile */
.logo-tile{ width:56px; height:56px; border-radius:14px; object-fit:cover; background:#fff; border:1px solid var(--line-soft); flex-shrink:0; }

/* Rich editor: active (currently-applied) toolbar button */
.rt-btn.is-active{ background:#070C9C; color:#fff; border-color:#070C9C; }