/* وب‌فونت‌های فارسی */
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* فونت‌های جایگزین ویرایشگر؛ مسیرها به فایل‌های واقعی بسته اشاره می‌کنند. */
@font-face {
    font-family: 'Vazir';
    src: url('../fonts/vazir/Vazir-Code-FD.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Shabnam';
    src: url('../fonts/shabnam/Shabnam-FD.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Samim';
    src: url('../fonts/samim/Samim-FD.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root{
  --site-max: 1360px;
  --site-gutter: clamp(16px, 3.5vw, 56px);
  --section-gap-top: 24px;
  --section-gap-bottom: 40px;

    --fc-page-bg: #f7f9fc;
    --fc-page-bg-soft: #f8fbff;
    --fc-surface: #ffffff;
    --fc-surface-soft: #f8fafc;
    --fc-surface-muted: #f1f5f9;
    --fc-text: #111827;
    --fc-text-muted: #64748b;
    --fc-border: rgba(15, 23, 42, .10);
    --fc-border-strong: rgba(15, 23, 42, .16);
    --fc-shadow: 0 18px 46px rgba(15, 23, 42, .08);
    --fc-shadow-soft: 0 8px 24px rgba(15, 23, 42, .055);
    --fc-input-bg: #ffffff;
    --fc-header-bg: #ffffff;
    --fc-footer-bg: #ffffff;
    --fc-link: #2563eb;
    --fc-accent: #16a34a;

    --primary: #4F46E5;
    --primary-dark: #4338CA;
    --primary-soft: #EEF2FF;

    --background-page: #F5F7FF;
    --surface: #FFFFFF;

    --text-main: #111827;
    --text-muted: #6B7280;

    --accent: #06b6d4;
    --warning: #fbbf24;
    --danger: #ef4444;

    --border-soft: #E5E7EB;
}




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

body {
    font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
    background: var(--fc-page-bg);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    direction: rtl;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}



header {
    background:#F9FAFF;
    color:#111827;
    padding:0;
    box-shadow:none;
}

.topbar {
    width:100%;
    max-width: var(--site-max);
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 var(--site-gutter);
    min-height:64px;
    position: relative;
    z-index: 2;
    box-sizing:border-box;
    direction: rtl;
}



.topbar .nav-links {
    margin:0 auto;
}

.brand {
    font-weight:800;
    font-size:20px;
}

.brand-link {
    color:#4F46E5;
    text-decoration:none;
}

.brand-link:hover {
    color:#4338CA;
}

.nav-links {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    flex:1 1 auto;
}

.nav-links a {
    color:#4B5563;
    margin-left:0;
    text-decoration:none;
    font-size:14px;
}



.auth-links {
    display:flex;
    align-items:center;
    gap:10px;
}

/*
  Header spacing tweaks (as requested):
  - Move all left-side header buttons (auth-links) ~3cm to the right
  - Move the logo/brand on the right ~2cm to the left
      color:#f9fafb;
    border-radius:12px;
    padding:32px 28px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    margin-bottom:24px;
}

.hero-content {
    flex:1 1 300px;
    padding-left:16px;
}

.hero-title {
    font-size:26px;
    margin-bottom:12px;
}

.hero-subtitle {
    font-size:15px;
    line-height:1.7;
    color:#e5e7eb;
    margin-bottom:20px;
}

.hero-actions a {
    display:inline-block;
    margin-left:10px;
    padding:8px 16px;
    border-radius:999px;
    text-decoration:none;
    font-size:14px;
}

.btn-primary {
    background: var(--primary);
    color: #ffffff;
    font-weight: 600;
}


.btn-primary:hover {
    background: var(--primary-dark);
}


.btn-outline {
    border:1px solid #e5e7eb;
    color:#e5e7eb;
}

.btn-outline:hover {
    background:#e5e7eb;
    color:#111827;
}

/* Hero-specific button styling to contrast with light hero background */
.hero .btn-primary {
    background: linear-gradient(135deg, #4F46E5, #6366F1);
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.25);
}

.hero .btn-primary:hover {
    background: linear-gradient(135deg, #4338CA, #4F46E5);
}

.hero .btn-outline {
    border-color: #4F46E5;
    color: #4F46E5;
    background: transparent;
}

.hero .btn-outline:hover {
    background: #E0E7FF;
    color: #111827;
}


.hero-sidebar {
    flex:0 0 260px;
    background:rgba(15,23,42,0.7);
    border-radius:10px;
    padding:16px 18px;
    margin-top: -10px;
}

.hero-sidebar h3 {
    font-size:14px;
    margin-bottom:8px;
}

.hero-metric {
    display:flex;
    justify-content:space-between;
    font-size:13px;
    margin:4px 0;
}

.section {
    background:#ffffff;
    border-radius:12px;
    padding:20px 18px;
    margin-bottom:20px;
    box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.section-how-animation {
    background:#ffffff;
    border-radius:12px;
    padding:24px 18px;
    margin-bottom:24px;
    box-shadow:0 1px 3px rgba(0,0,0,0.06);
    margin-top:36px;
}

.section-how-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    flex-wrap:wrap;
    direction: ltr;
}

.section-how-text {
    flex:1 1 260px;
    min-width:0;
    direction: rtl;
    text-align: right; /* فقط متن‌های این ستون راست‌چین باشند */
}

/* فقط عنوان وسط‌چین باشد */
.section-how-text h2{
    text-align: center;
}

/* متن‌های توضیحی و لیست‌ها تمام‌عرض و راست‌چین */
.section-how-text .section-how-lead,
.section-how-text .section-how-bullets{
    text-align: right;
    width: 100%;
    max-width: none;
}


.section-how-lead {
    margin:8px 0 12px;
    font-size:14px;
    line-height:1.9;
    color:#4B5563;
}

.section-how-bullets {
    list-style:none;
    padding:0;
    margin:0 0 16px;
    font-size:13px;
    color:#374151;
}

.section-how-bullets li {
    display:flex;
    align-items:flex-start;
    gap:6px;
    margin-bottom:4px;
}

.section-how-bullets li::before {
    content:'•';
    font-size:18px;
    line-height:1;
    color:var(--primary);
    margin-top: -10px;
}

.section-how-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.section-how-actions .btn-primary,
.section-how-actions .btn-secondary {
    min-width:150px;
    text-align:center;
}

.section-how-visual {
    flex:1 1 260px;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    direction: ltr;
}

.how-svg {
    max-width:420px;
    width:100%;
    height:auto;
    display:block;
}



/* Under monitor content (NEW) */
.how-under-monitor{
    width:100%;
    max-width:520px;
    display:flex;
    justify-content:center;
    margin-top:34px; /* فاصله بیشتر از مانیتور + پایین‌تر */
}

.how-under-monitor-card{
    width:100%;
    border:1px solid rgba(79,70,229,0.18);
    background:#ffffff;
    border-radius:14px;
    padding:14px 14px;
    box-shadow:0 8px 24px rgba(15,23,42,0.06);

    direction: rtl;
    text-align: right;
}

.how-under-monitor-title{
    margin:0 0 6px 0;
    font-size:16px;
    font-weight:800;
    color:#111827;
}

.how-under-monitor-text{
    margin:0;
    color:#374151;
    font-size:14px;
    line-height:1.9;
}

/* CTA buttons (flat, sharp, wide, pastel matte green) */
.how-under-monitor-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:14px;

    direction: rtl;
    justify-content: flex-start;
}

.how-under-monitor-actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:210px;
    height:48px;
    padding:0 26px;

    border-radius:0;     /* لبه تیز */
    box-shadow:none;     /* فلت */
    text-decoration:none;
    white-space:nowrap;

    font-size:15px;
    font-weight:700;
    line-height:1;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

/* Primary (pastel matte green) */
.how-under-monitor-actions .btn-primary{
    background:#5fbf8f;
    color:#ffffff;
    border:none;
}

.how-under-monitor-actions .btn-primary:hover{
    background:#4faf80;
    transform: translateY(-1px);
}

/* Secondary (flat outline-like, still rectangular & sharp) */
.how-under-monitor-actions .btn-outline{
    background:#e6f4ee;
    color:#2f6f54;
    border:1px solid #5fbf8f;
}

.how-under-monitor-actions .btn-outline:hover{
    background:#dff0e9;
    transform: translateY(-1px);
}


/* ریسپانسیو برای موبایل */
@media (max-width:768px) {
    .section-how-inner {
        flex-direction:column-reverse;
        align-items:stretch;
    }

    .section-how-visual {
        margin-bottom:12px;
    }
}

.section-title {
    font-size:18px;
    margin-bottom:12px;
}

.grid-3 {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
}

.card {
    border-radius:10px;
    padding:14px 12px;
    background:#f9fafb;
    border:1px solid #e5e7eb;
}

.card h3 {
    font-size:15px;
    margin-bottom:6px;
}

.card p {
    font-size:13px;
    color:#4b5563;
    line-height:1.7;
}

.tag {
    display:inline-block;
    padding:2px 8px;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:11px;
    margin-left:4px;
}

.table {
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}

.table th,
.table td {
    border-bottom:1px solid #e5e7eb;
    padding:8px 6px;
    text-align:right;
}

.table th {
    background:#f9fafb;
    font-weight:600;
}

.flash {
    /* Inline flash: fit-to-text, inherit font */
    display:table;
    width:auto;
    max-width:min(520px, 92vw);
    padding:10px 18px;
    margin:12px auto;
    border-radius:12px;
    font-size:16px;
    line-height:1.7;
    text-align:center;
    font-family:inherit;
}

.flash-success {
    background:#dcfce7;
    color:#166534;
}

.flash-error {
    background:#fee2e2;
    color:#b91c1c;
}

form input,
form textarea,
form select {
    width:100%;
    padding:8px 10px;
    margin:5px 0 10px;
    box-sizing:border-box;
    border-radius:6px;
    border:1px solid #d1d5db;
    font-size:13px;
}

form button {
    padding:8px 16px;
    border-radius:999px;
    border:none;
    background:#2563eb;
    color:#fff;
    font-size:13px;
    cursor:pointer;
}

form button:hover {
    background:#1d4ed8;
}

footer {
    background:#111827;
    color:#9ca3af;
    text-align:center;
    padding:12px 0;
    font-size:12px;
}

/* =============================
   Footer v2 (Pro / SEO / Trust)
   Dark but not too black
   ============================= */
.site-footer {
    background: #161b22;
    color: #cbd5e1;
    text-align: initial;
    padding: 46px 0 18px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(900px 220px at 80% -30%, rgba(96, 165, 250, 0.18), rgba(0,0,0,0)),
                radial-gradient(700px 220px at 10% 0%, rgba(236, 72, 153, 0.10), rgba(0,0,0,0));
    pointer-events: none;
}

.site-footer .footer-inner {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
}

.site-footer .footer-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1fr;
    gap: 22px;
    align-items: start;
}

.site-footer .footer-brand {
    min-width: 240px;
}

.site-footer .footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.site-footer .footer-logo img {
    max-width: 260px;
    width: 100%;
    height: auto;
    border-radius: 0;
    background: transparent;
    border: 0;
    padding: 0;
}

.site-footer .footer-desc {
    margin: 12px 0 14px;
    font-size: 13px;
    line-height: 1.9;
    color: rgba(226, 232, 240, 0.80);
    max-width: 42ch;
}

.site-footer .footer-col h4 {
    margin: 0 0 10px;
    font-size: 13px;
    color: #f8fafc;
    letter-spacing: 0.2px;
}

.site-footer .footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}

.site-footer .footer-col a {
    color: rgba(226, 232, 240, 0.76);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.8;
}

.site-footer .footer-col a:hover {
    color: #ffffff;
}

.site-footer .footer-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}


.site-footer .footer-enamad-trustseal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 58px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(2, 6, 23, 0.28);
}

.site-footer .footer-enamad-trustseal a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.site-footer 
.footer-enamad-trustseal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 58px;
    padding: 4px 6px;
    border-radius: 10px;
    background: #111827;
    box-shadow: 0 0 0 1px rgba(55,65,81,0.6);
}

.footer-enamad-trustseal a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer-badge-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(2, 6, 23, 0.28);
    transition: transform .15s ease, border-color .15s ease;
}

.site-footer .footer-badge-link:hover {
    transform: translateY(-1px);
    border-color: rgba(191, 219, 254, 0.42);
}

.site-footer .footer-badge-link img {
    width: 92px;
    height: 44px;
    object-fit: contain;
    display: block;
}

.site-footer .footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 14px;
}

.site-footer .footer-social-link {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(2, 6, 23, 0.25);
    color: rgba(226, 232, 240, 0.84);
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.site-footer .footer-social-link:hover {
    transform: translateY(-1px);
    border-color: rgba(191, 219, 254, 0.42);
    background: rgba(2, 6, 23, 0.35);
    color: #ffffff;
}

.site-footer .footer-legal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}

.site-footer .footer-bottom {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}


.site-footer .footer-bottom-left {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.site-footer .footer-social--bottom {
    margin: 0;
}

.site-footer .footer-copy {
    margin: 0;
    font-size: 12px;
    color: rgba(226, 232, 240, 0.70);
}

.site-footer .footer-mini-links {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.site-footer .footer-mini-links a {
    color: rgba(226, 232, 240, 0.70);
    text-decoration: none;
}
/* جلوگیری از چسبیدن کلمات در متن‌ها و لینک‌های فارسی */
.site-footer .footer-desc,
.site-footer .footer-col a,
.site-footer .footer-mini-links a {
    word-spacing: 1px;
}


.site-footer .footer-mini-links a:hover {
    color: #ffffff;
}

.site-footer .footer-mini-links .sep {
    color: rgba(148, 163, 184, 0.55);
}

@media (max-width: 980px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .site-footer {
        padding: 36px 0 14px;
    }
    .site-footer .footer-grid {
        grid-template-columns: 1fr;
    }
    .site-footer .footer-logo img {
        max-width: 240px;
    }
}



/* ===== منوهای هدر داینامیک ===== */
.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.nav-item {
    position: relative;
}

.nav-dropdown-menu {
    position:absolute;
    top:100%;
    right:0;
    min-width:220px;
    max-width:80vw;
    background:#FFFFFF;
    padding:6px 0;
    border-radius:12px;
    box-shadow:0 18px 35px rgba(15,23,42,0.25);
    display:none;
    z-index:50;
}

.nav-dropdown:hover .nav-dropdown-menu {
    display: block;
}

.nav-dropdown-item {
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    font-size:13px;
    color:#111827;
    text-decoration:none;
}

.nav-dropdown-item:hover {
    background:#F9FAFB;
}

.nav-dropdown-icon {
    font-size:14px;
    color:#4B5563;
}

.nav-dropdown-label {
    flex:1;
}

/* ===== فوتر داینامیک ===== */
.footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: -10px;
    margin-bottom: 8px;
}

.footer-col {
    flex: 1 1 200px;
}

.footer-col h4 {
    font-size: 14px;
    margin: 0 0 8px;
    color: #f9fafb;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col li {
    margin-bottom: 4px;
}

.footer-col a {
    font-size: 13px;
    color: #d1d5db;
    text-decoration: none;
}

.footer-col a:hover {
    color: #ffffff;
}

.footer-copy {
    margin-top: -10px;
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
}

/* ===== منوی ثانویه داشبورد کاربر / فریلنسر ===== */
.dashboard-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.dashboard-nav a {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #374151;
    text-decoration: none;
}

.dashboard-nav a:hover {
    background: #111827;
    color: #f9fafb;
}

/* ===== منوی ادمین ===== */
.admin-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 16px;
    background: #111827;
}

.admin-nav a {
    font-size: 13px;
    color: #e5e7eb;
    text-decoration: none;
}

.admin-nav a:hover {
    color: #ffffff;
}

.admin-nav-signout-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.admin-nav-signout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid rgba(248, 113, 113, 0.55);
    border-radius: 999px;
    background: rgba(127, 29, 29, 0.48);
    color: #fee2e2;
    font-family: inherit !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
    cursor: pointer;
}

.admin-nav-signout:hover,
.admin-nav-signout:focus-visible {
    background: #b91c1c;
    color: #ffffff;
    outline: none;
}

.admin-nav-spacer {
    flex: 1;
}



/* وضعیت فعال در منوها */
.nav-links a.active,
.nav-dropdown.active > .nav-dropdown-trigger,
.nav-dropdown-menu .nav-dropdown-item.active {
    border-bottom: 2px solid #fbbf24;
    color: #fbbf24;
}

/* منوی موبایل */
.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #f9fafb;
    font-size: 20px;
    cursor: pointer;
    margin-right: 12px;
}

@media (max-width: 768px) {
    .topbar {
        flex-wrap: wrap;
    }
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        margin-top: -10px;
    }
    .nav-links.open {
        display: flex;
    }
    .nav-toggle {
        display: inline-block;
    }
    .auth-links {
        margin-top: -10px;
        width: 100%;
        justify-content: flex-start;
    }
}

.btn-secondary {
    display:inline-block;
    padding:6px 14px;
    border-radius:6px;
    border:1px solid #d1d5db;
    background:#ffffff;
    color:#374151;
    font-size:13px;
    text-decoration:none;
}

.btn-secondary:hover {
    background:#f3f4f6;
}

.btn-link {
    font-size:13px;
    color:#2563eb;
    text-decoration:none;
}

.btn-link:hover {
    text-decoration:underline;
}

.badge {
    display:inline-block;
    padding:2px 8px;
    border-radius:999px;
    font-size:11px;
    line-height:1.6;
}

.badge-status {
    background:#e5e7eb;
    color:#374151;
}

.badge-status.badge-open {
    background:#dcfce7;
    color:#166534;
}

.badge-status.badge-in_progress {
    background:#e0f2fe;
    color:#075985;
}

.badge-status.badge-completed {
    background:#e5e7eb;
    color:#4b5563;
}

.badge-status.badge-cancelled {
    background:#fee2e2;
    color:#991b1b;
}


/* ================================
   Phase 7 – UI/UX Pro Enhancements
   ================================ */

/* --- Generic layout --- */
.container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 16px;
}

/* --- Filter bar & forms --- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    background: #f9fafb;
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
}

.filter-bar .form-group {
    min-width: 160px;
    flex: 1;
}

.form-group label {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
}

/* --- Cards grid for listing pages --- */
.project-list,
.ticket-list,
.order-list,
.freelancer-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

/* Base card refinement */
.card {
    position: relative;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 16px 14px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.10);
    border-color: #cbd5f5;
}

.card-header {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

.card-header h3 {
    font-size: 15px;
    margin: 0;
}

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 8px 0 10px;
    font-size: 12px;
    color: #6b7280;
}

.card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.card-meta i {
    font-size: 11px;
}

.card-footer {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: -10px;
}

/* Project cards */
.project-card {
    position: relative;
}

.project-card .badge-status {
    position: absolute;
    left: 14px;
    top: 12px;
}

/* Freelancer cards */
.freelancer-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.freelancer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 0%, rgba(255, 252, 240, 0.9) 0%, rgba(255, 230, 180, 0.95) 45%, rgba(212, 175, 55, 0.98) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f9fafb;
    font-size: 16px;
    font-weight: 600;
}

.freelancer-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: -10px;
}

.freelancer-skills span {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
}

/* Ticket & order cards */
.ticket-card,
.order-card {
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 12px 12px;
    background: #f9fafb;
}

/* --- Buttons refinement --- */
.btn-primary,
.btn-secondary,
.btn-outline {
    font-size: 13px;
    border-radius: 999px;
    padding: 6px 14px;
}

/* Badge refinement */
.badge-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
}

/* --- Header & footer polish --- */
header .topbar {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 14px;
    padding-inline: 18px;
}

.brand a {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.nav-links a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Auth links and theme toggle */
.auth-links {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.theme-toggle-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle-btn:hover {
    background: rgba(148, 163, 184, 0.25);
}

/* --- Footer --- */
footer {
    margin-top: -10px;
}

/* --- Responsive tweaks for cards --- */
@media (max-width: 768px) {
    .container {
        padding: 12px;
    }

    .project-list,
    .ticket-list,
    .order-list,
    .freelancer-list {
        grid-template-columns: 1fr;
    }

    .card {
        padding: 14px 12px;
    }

    header .topbar {
        align-items: flex-start;
    }
}


/* Global image optimization */
img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* ===== Notification bell & dropdown (Phase 10) ===== */
.notif-bell-wrapper {
    position: relative;
    margin-left: 16px;
}

.notif-bell-link {
    position: relative;
    color: #e5e7eb;
    text-decoration: none;
    font-size: 18px;
}

.notif-bell-link:hover {
    color: #facc15;
}

.notif-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #ef4444;
    color: #fff;
    border-radius: 9999px;
    padding: 0 6px;
    font-size: 11px;
    line-height: 18px;
    min-width: 18px;
    text-align: center;
}

.notif-dropdown {
    display: none;
    position: absolute;
    right: 0;
    margin-top: -10px;
    background: #ffffff;
    color: #111827;
    min-width: 260px;
    max-width: 320px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    z-index: 999;
}

.notif-bell-wrapper:hover .notif-dropdown,
.notif-bell-wrapper.is-open .notif-dropdown {
    display: block;
}

.notif-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    max-height: 300px;
    overflow-y: auto;
}

.notif-dropdown li a {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    text-decoration: none;
    color: inherit;
    font-size: 13px;
}

.notif-dropdown li a:hover {
    background: #f3f4f6;
}

.notif-msg {
    margin-bottom: 2px;
}

.notif-date {
    font-size: 11px;
    color: #6b7280;
}

.notif-dropdown-footer {
    display: flex;
    justify-content: space-evenly;
    border-top: 1px solid #e5e7eb;
    padding: 6px 10px;
    font-size: 12px;
    background: #f9fafb;
}

.notif-dropdown-footer a,
.notif-dropdown-footer .notif-mark-all-link {
    color: #2563eb;
    text-decoration: none;
}

.notif-dropdown-footer a:hover,
.notif-dropdown-footer .notif-mark-all-link:hover,
.notif-dropdown-footer .notif-mark-all-link:focus-visible {
    text-decoration: underline;
}

.notif-mark-all-form {
    display: inline;
    margin: 0;
}

.notif-mark-all-link {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}



.auth-username:hover {
    text-decoration: none !important;
}

/* ===== end Notification bell styles ===== */


/* ===== داشبورد شبیه QuickBooks ===== */

.qb-dashboard-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
}

.qb-dashboard-header-title {
    display:flex;
    flex-direction:column;
    gap:4px;
}

.qb-dashboard-header-title h2 {
    margin:0;
}

.qb-dashboard-header-sub {
    font-size:13px;
    color: var(--text-muted);
}

.qb-role-badge {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:3px 8px;
    border-radius:999px;
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-size:11px;
    font-weight:500;
}

.qb-dashboard-header-actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-end;
}

.qb-dashboard-grid {
    display:grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 0.9fr);
    gap:16px;
    align-items:flex-start;
}

@media (max-width: 960px) {
    .qb-dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.qb-stat-row {
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap:12px;
    margin-bottom:16px;
}

@media (max-width: 960px) {
    .qb-stat-row {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

.qb-stat-card {
    background: var(--surface);
    border-radius:10px;
    border:1px solid var(--border-soft);
    padding:10px 12px;
}

.qb-stat-label {
    font-size:11px;
    color: var(--text-muted);
    margin-bottom:4px;
}

.qb-stat-value {
    font-size:18px;
    font-weight:600;
    margin-bottom:2px;
}

.qb-stat-extra {
    font-size:11px;
    color: var(--text-muted);
}

.qb-card {
    background: var(--surface);
    border-radius:10px;
    border:1px solid var(--border-soft);
    padding:14px 16px;
    margin-bottom:14px;
}

.qb-card h3 {
    margin-top:0;
    margin-bottom:8px;
}

.qb-card small {
    color: var(--text-muted);
    font-size:11px;
}

.qb-notifications-list {
    list-style:none;
    padding:0;
    margin:0;
}

.qb-notifications-list li+li {
    margin-top: -10px;
}

.qb-notifications-list a {
    color: var(--text-main);
    text-decoration:none;
    font-size:13px;
}

.qb-notifications-list a:hover {
    text-decoration:underline;
}

.qb-link-muted {
    font-size:12px;
    color: var(--text-muted);
    text-decoration:none;
}

.qb-link-muted:hover {
    text-decoration:underline;
}

/* tighten section spacing inside dashboard when wrapped in qb-card/section */
.qb-main-section .section {
    margin-bottom:16px;
}


/* Header categories + new hero layout */

.header-categories {
    border-top:none;
    margin-top: 0;
    background:#F9FAFB;
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

.header-categories-inner{
    max-width: var(--site-max);
    margin: 0 auto;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
    box-sizing: border-box;
}

.header-categories-links {
    display:flex;
    flex-wrap:wrap;
    gap:12px 18px;
}

.header-category-link {
    text-decoration:none;
    color:#4B5563;
    padding:4px 10px;
    border-radius:999px;
    background:#EEF2FF;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.header-category-link:hover {
    background:#E0E7FF;
    color:#111827;
    box-shadow:0 0 0 1px rgba(79,70,229,0.2);
}

.nav-links a {
    color:#4B5563;
    margin-left:16px;
    text-decoration:none;
    font-size:14px;
}

.nav-links a:hover {
    color:#111827;
}

.auth-links a {
    color:#374151;
}

.primary-btn {
    background:var(--primary);
    color:#ffffff !important;
}


/* Hero slider */

.hero-image-frame {
    border-radius:24px;
    overflow:hidden;
    background:transparent;
    height: 500px;

    margin-top:20px !important;
}


.hero-image-slider {
    position:relative;
    width:100%;
    padding-top:68%; /* نسبت تصویر تقریبی */
}

.hero-slide {
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .7s ease-in-out;
}



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


/* Freelancito-inspired header tuning */

.header-icon-btn,
.theme-toggle-btn {
    border:none;
    background:transparent;
    color:#6B7280;
    cursor:pointer;
    padding:6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
}

.header-icon-btn:hover,
.theme-toggle-btn:hover {
    background:#E5E7EB;
    color:#111827;
}

.header-categories {
    border-top:none;
    margin-top: -10px;
    background:#FFFFFF;
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

.header-categories-inner {
    max-width:1360px;
    margin:0 auto;
    padding:10px 20px;
    display:flex;
    flex-wrap:wrap;
    gap:12px 20px;
    font-size:13px;
}

.header-category-link {
    text-decoration:none;
    color:#4B5563;
    padding:4px 12px;
    border-radius:999px;
    background:#F3F4FF;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.header-category-link:hover {
    background:#E0E7FF;
    color:#111827;
    box-shadow:0 0 0 1px rgba(79,70,229,0.3);
}

@media (max-width: 768px) {
    .topbar {
        padding-inline:12px;
    }
    .header-categories-inner {
        padding-inline:12px;
    }
}



/* مخفی کردن آیتم‌های ورود / ثبت‌نام تکراری در منوی اصلی بالای هدر */
.nav-links a[href*="auth/login"],
.nav-links a[href*="auth/register"] {
    display:none;
}


/* هدر: منوی جستجو شبیه فریلنسیتو */

.header-search-menu {
    margin-left:auto;
    position:relative;
    margin-left:0;
    margin-right:auto;
}

.header-search-toggle {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    border-radius:999px;
    border:1px solid rgba(148,163,184,0.5);
    background:#FFFFFF;
    cursor:pointer;
    font-size:13px;
    color:#4B5563;
}

.header-search-toggle .chevron {
    font-size:11px;
}

.header-search-toggle:hover {
    background:#F3F4FF;
    border-color:rgba(79,70,229,0.45);
    color:#111827;
}

.header-search-dropdown {
    position:absolute;
    top:110%;
    right:0;
    width:260px;
    max-width:80vw;
    background:#FFFFFF;
    border-radius:12px;
    box-shadow:0 18px 35px rgba(15,23,42,0.25);
    padding:4px 0;
    opacity:0;
    visibility:hidden;
    transform:translateY(4px);
    transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
    z-index:40;
}

.header-search-menu.is-open .header-search-dropdown {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.header-search-option {
    display:block;
    padding:10px 14px;
    text-decoration:none;
    color:#111827;
}

.header-search-option + .header-search-option {
    border-top:1px solid #E5E7EB;
}

.header-search-option-title {
    font-size:13px;
    font-weight:600;
    margin-bottom:4px;
}

.header-search-option-desc {
    font-size:12px;
    color:#6B7280;
}

.header-search-option:hover {
    background:#F9FAFB;
}


/* Header user chip + search alignment tweaks */

/* تنظیم جانمایی منوی جستجو در هدر بالایی:
   آیتم «جستجو» در سمت چپ، بقیه منوها از سمت راست شروع شوند */
.nav-links a[href*="search"] {
    margin-right:auto;
}

/* چیدمان کاربر لاگین‌شده + دکمه خروج */
.auth-user {
    display:flex;
    align-items:center;
    gap:8px;
    margin-right:8px;
}













/* اعلان: وقتی نخوانده داریم، زنگوله بنفش گرادیانی شود */
.notif-bell-link.has-unread {
    background: radial-gradient(circle at 30% 0%, rgba(255, 252, 240, 0.9) 0%, rgba(255, 230, 180, 0.95) 45%, rgba(212, 175, 55, 0.98) 100%);
    color:#ffffff;
    border-radius:999px;
    padding:6px;
}



.notif-bell-link.has-unread .notif-badge {
    background:#F97316;
}


/* Header user layout and bell animation */

/* چیدمان کاربر لاگین‌شده + دکمه خروج */
.auth-user {
    display:flex;
    align-items:center;
    gap:8px;
    margin-right:8px;
}

.auth-user-avatar {
    width:26px;
    height:26px;
    border-radius:999px;
    background:#E5E7EB;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    color:#4B5563;
}

.auth-username {
    font-size: 12px;
    margin-left: 8px;
    color: inherit;
    text-decoration: none !important;
    cursor: pointer;
    font-weight: normal;
}

.auth-logout-link {
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:13px;
    color:#ef4444;
    text-decoration:none;
}

.auth-logout-link i {
    font-size:12px;
}

.auth-logout-link:hover {
    color:#b91c1c;
}

/* انیمیشن لرزش زنگوله وقتی اعلان نخوانده وجود دارد */
@keyframes bell-shake {
    0% { transform: translateY(0) rotate(0); }
    15% { transform: translateY(-1px) rotate(-12deg); }
    30% { transform: translateY(0) rotate(10deg); }
    45% { transform: translateY(-1px) rotate(-8deg); }
    60% { transform: translateY(0) rotate(6deg); }
    75% { transform: translateY(-0.5px) rotate(-3deg); }
    100% { transform: translateY(0) rotate(0); }
}

.notif-bell-link.has-unread {
    background: radial-gradient(circle at 30% 0%, rgba(255, 252, 240, 0.9) 0%, rgba(255, 230, 180, 0.95) 45%, rgba(212, 175, 55, 0.98) 100%);
    color:#ffffff;
    border-radius:999px;
    padding:6px;
    animation: bell-shake 1.4s ease-in-out infinite;
}

.notif-bell-link.has-unread i {
    color:#ffffff;
}


/* Flash messages */

.flash {
    /* Inline flash: fit-to-text, inherit font */
    display:table;
    width:auto;
    max-width:min(520px, 92vw);
    padding:10px 18px;
    border-radius:12px;
    margin:12px auto;
    font-size:16px;
    line-height:1.7;
    text-align:center;
    font-family:inherit;
}

.flash-success {
    background:#ECFDF3;
    color:#166534;
    border:1px solid #bbf7d0;
}

.flash-error {
    background:#FEF2F2;
    color:#991b1b;
    border:1px solid #fecaca;
}

.flash.is-fading-out {
    opacity:0;
    transform: translateY(-4px);
    transition: opacity .45s ease, transform .45s ease;
}


/* Hero CTA3 + slider dots (updated) */

.btn-ghost {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 16px;
    border-radius:999px;
    border:1px dashed #CBD5F5;
    background:transparent;
    color:#4F46E5;
    font-size:14px;
    text-decoration:none;
    transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}



/* دات‌های اسلایدر هرو */
.hero-slider-dots {
    position:absolute;
    left:50%;
    bottom:14px;
    transform:translateX(-44%);
    display:flex;
    align-items:center;
    gap:6px;
}

.hero-slider-dot {
    width:7px;
    height:7px;
    border-radius:999px;
    border:none;
    background:rgba(148,163,184,.6);
    cursor:pointer;
    padding:0;
    transition:background .2s ease, width .2s ease;
}

.hero-slider-dot.is-active {
    width:16px;
    background:#4F46E5;
}


/* Updated hero buttons */

.btn-primary {
    background:#4F46E5;
    color:#ffffff;
    border:none;
}

.btn-primary:hover {
    background:#4338CA;
}

.btn-outline {
    background:#EEF2FF;
    border:1px solid #C7D2FE;
    color:#4338CA;
}

.btn-outline:hover {
    background:#E0E7FF;
    border-color:#4F46E5;
}

.btn-ghost {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 22px;
    border-radius:18px;
    border:1px dashed #CBD5F5;
    background:#F9FAFB;
    color:#374151;
    font-size:14px;
    text-decoration:none;
    transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.btn-ghost:hover {
    background:#EEF2FF;
    border-color:#4F46E5;
    transform:translateY(-1px);
}


/* بزرگ‌تر کردن دکمه اصلی داشبورد کارفرما */
.btn-big {
    padding: 16px 32px;
    font-size: 16px;
    border-radius: 14px;
}


/* حذف هرگونه underline از نام کاربر در هدر، حتی اگر قوانین عمومی a:hover وجود داشته باشد */
.auth-user .auth-username,
.auth-user .auth-username:hover {
    text-decoration: none !important;
}


/* Why Choose Us section */
.section.why-choose-us {
    background-color: #f4f6ff;
    padding-top: 60px;
    padding-bottom: 60px;
}

.why-choose-us .why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: -10px;
    margin-bottom: 24px;
}

.why-choose-us .why-item h3 {
    margin-bottom: 8px;
    font-weight: 600;
}

.why-choose-us .why-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Popular freelance categories slider --- */
.section-hot-cats {
    padding-top: 40px;
    padding-bottom: 40px;
}

.section-hot-cats .section-title {
    margin-bottom: 8px;
    text-align: right;
}

.section-hot-cats .section-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
    text-align: right;
}

.hotcat-slider {
    position: relative;
    margin-top: -10px;
}

.hotcat-track-wrap {
    overflow: hidden;
    padding: 4px 32px;
}

.hotcat-track {
    display: flex;
    gap: 18px;
    transition: transform 0.35s ease;
    will-change: transform;
    direction: ltr; /* اسلایدر از چپ به راست حرکت می‌کند، محتوای کارت‌ها خودشان RTL هستند */
}

.hotcat-card {
    min-width: 260px;
    max-width: 260px;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    direction: rtl;
    height: 340px;
}

.hotcat-image-wrap {
    width: 100%;
    flex: 0 0 60%;
    overflow: hidden;
}

.hotcat-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 0.4s ease;
}

.hotcat-card:hover .hotcat-image {
    transform: scale(1.06);
}

.hotcat-body {
    padding: 14px 18px 18px;
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.hotcat-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #111827;
}

.hotcat-text {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.8;
}

/* arrows */
.hotcat-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    color: #111827;
    z-index: 5;
}

.hotcat-arrow:hover {
    background: #f3f4f6;
    transform: translateY(-50%) translateY(-1px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
}

.hotcat-arrow:disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
}

.hotcat-arrow-prev {
    right: 0;
}

.hotcat-arrow-next {
    left: 0;
}

.hotcat-arrow-icon {
    font-size: 22px;
    line-height: 1;
}

/* responsive tweaks */
@media (max-width: 768px) {
    .hotcat-track-wrap {
        padding: 4px 40px;
    }
    .hotcat-card {
        min-width: 230px;
        max-width: 230px;
    }
}

.home-stats-medal::before {
    box-shadow: 0 0 18px rgba(212,175,55,0.45), 0 0 28px rgba(255,255,200,0.35);
}

.cta-dual-title {
    font-size:20px;
    font-weight:700;
    margin-bottom:8px;
    color:#111827;
}

.cta-dual-subtitle {
    font-size:14px;
    color:#4B5563;
    margin:0 auto 20px;
    max-width:540px;
    line-height:1.7;
}

.cta-dual-buttons {
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

.cta-dual-buttons .btn-primary,
.cta-dual-buttons .btn-secondary {
    min-width:180px;
    text-align:center;
}

/* M4 – Popular categories grid */
.section-cat-grid {
    padding:40px 0 40px;
    background:#ffffff;
}

.section-cat-grid .container {
    text-align:center;
}

.cat-grid-title {
    font-size:20px;
    font-weight:700;
    margin-bottom:8px;
    color:#111827;
}

.cat-grid-subtitle {
    font-size:14px;
    color:#4B5563;
    margin:0 auto 24px;
    max-width:600px;
    line-height:1.7;
}

.cat-grid-wrapper {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:16px;
    margin-top:8px;
}

.cat-grid-card {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:right;
    padding:16px 14px;
    border-radius:12px;
    background:#F9FAFB;
    border:1px solid #E5E7EB;
    text-decoration:none;
    transition:transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.cat-grid-card:hover {
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(15,23,42,0.06);
    border-color:var(--primary);
}

.cat-grid-icon {
    width:36px;
    height:36px;
    border-radius:10px;
    background:rgba(59,130,246,0.06);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:8px;
    font-size:18px;
}

.cat-grid-card-title {
    font-size:14px;
    font-weight:600;
    margin-bottom:4px;
    color:#111827;
}

.cat-grid-card-text {
    font-size:12px;
    line-height:1.7;
    color:#6B7280;
}

/* RTL fix */
html[dir="rtl"] .cat-grid-card {
    align-items:flex-end;
    text-align:right;
}

/* Mobile */
@media (max-width:768px) {
    .section-cat-grid {
        padding:28px 0 32px;
    }
}


/* --- M4 redesign: Popular categories like sample screenshot --- */
.section-cat-grid {
    padding:24px 0 28px;
    background:#ffffff;
}

.section-cat-grid .container {
    text-align:left;
}

/* Title similar to "Popular services" */
.cat-grid-title {
    font-size:28px;
    font-weight:700;
    margin-bottom:4px;
    color:#111827;
    text-align:left;
}

.cat-grid-subtitle {
    font-size:14px;
    color:#4B5563;
    margin:0 0 20px 0;
    max-width:520px;
    line-height:1.7;
    text-align:left;
}

/* Cards styled like dark green tiles with image area at bottom */
.cat-grid-wrapper {
    display:flex;
    gap:16px;
    overflow-x:auto;
    padding-bottom:4px;
}

.cat-grid-card {
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    min-width:220px;
    max-width:240px;
    height:260px;
    padding:14px 14px 18px;
    border-radius:22px;
    background:#004725;
    border:none;
    color:#ffffff;
    text-decoration:none;
    box-shadow:0 10px 24px rgba(15,23,42,0.22);
    overflow:hidden;
}

/* Gradient image area at bottom */
.cat-grid-card::after {
    content:"";
    position:absolute;
    left:10px;
    right:10px;
    bottom:10px;
    height:52%;
    border-radius:18px;
    background:linear-gradient(135deg,#f9a9c4,#fdd3a0);
    box-shadow:0 6px 18px rgba(15,23,42,0.18);
}

/* Different accent colors per card (up to 8) */
.section-cat-grid .cat-grid-card:nth-child(2)::after {
    background:linear-gradient(135deg,#ffb347,#ffda7b);
}
.section-cat-grid .cat-grid-card:nth-child(3)::after {
    background:linear-gradient(135deg,#fdf0b4,#ffe27b);
}
.section-cat-grid .cat-grid-card:nth-child(4)::after {
    background:linear-gradient(135deg,#b5f2d5,#7ee3c9);
}
.section-cat-grid .cat-grid-card:nth-child(5)::after {
    background:linear-gradient(135deg,#fcd0b4,#f6a57a);
}
.section-cat-grid .cat-grid-card:nth-child(6)::after {
    background:linear-gradient(135deg,#f8bfd9,#f6a0c9);
}
.section-cat-grid .cat-grid-card:nth-child(7)::after {
    background:linear-gradient(135deg,#cfd9ff,#9bb8ff);
}
.section-cat-grid .cat-grid-card:nth-child(8)::after {
    background:linear-gradient(135deg,#ffe1c7,#ffb7a5);
}

/* Hide old icon & description to match clean design */
.cat-grid-icon {
    display:none;
}

.cat-grid-card-title {
    position:relative;
    z-index:2;
    font-size:15px;
    font-weight:700;
    margin-bottom:6px;
    color:#ffffff;
}

/* Optional: hide text for cleaner look like screenshot */
.cat-grid-card-text {
    display:none;
}

/* RTL alignment for title/subtitle */
html[dir="rtl"] .section-cat-grid .container,
html[dir="rtl"] .cat-grid-title,
html[dir="rtl"] .cat-grid-subtitle {
    text-align:right;
}

/* Mobile tweak: slightly smaller height */
@media (max-width:768px) {
    .cat-grid-card {
        height:230px;
        min-width:200px;
    }
}


/* --- Override hot categories design to match green card sample --- */
.section-hot-cats {
    padding-top: 24px;
    padding-bottom: 28px;
}

.section-hot-cats .section-title {
    font-size: 28px;
    font-weight: 700;
    text-align: right;
    margin-bottom: 4px;
}

.section-hot-cats .section-subtitle {
    font-size: 14px;
    color: #4B5563;
    margin-bottom: 16px;
    text-align: right;
}

/* Track behaves like a horizontal row */
.hotcat-track-wrap {
    padding: 0;
}

.hotcat-track {
    display: flex;
    gap: 16px;
}

/* Card: dark green tile with rounded corners */
.hotcat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 220px;
    max-width: 240px;
    height: 260px;
    border-radius: 22px;
    background: #004725;
    box-shadow: 0 10px 24px rgba(15,23,42,0.22);
    overflow: hidden;
}

/* Image zone at bottom */
.hotcat-image-wrap {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 52%;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(15,23,42,0.18);
}

.hotcat-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text area at top */
.hotcat-body {
    position: relative;
    z-index: 2;
    padding: 14px 16px 0;
    flex: 0 0 auto;
}

.hotcat-title {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.hotcat-text {
    display: none; /* مخفی برای سادگی مثل نمونه */
}

/* Navigation arrows unchanged but slightly closer */
.hotcat-arrow {
    top: 50%;
    transform: translateY(-50%);
}

/* Mobile height a bit smaller */
@media (max-width: 768px) {
    .hotcat-card {
        height: 230px;
        min-width: 200px;
    }
}


/* Hot categories – full-width section and centered image boxes */
.section-hot-cats {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-top: 24px;
    padding-bottom: 28px;
}

.hotcat-image-wrap {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100% - 20px);
}
.hotcat-card {
    margin: 0 0 0 0;
}


.hotcat-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.hotcat-card-link:hover .hotcat-title {
    text-decoration: none;
}


/* SEO content block at bottom of home page */
.section-seo-block {
    background:#ffffff;
    border-top:1px solid #E5E7EB;
    padding:40px 0 48px;
    margin-top:16px;
}

.section-seo-inner {
    max-width: 860px;
    margin:0 auto;
}

.section-seo-title {
    font-size:22px;
    margin-bottom:12px;
}

.section-seo-subtitle {
    font-size:14px;
    color:#4B5563;
    margin-bottom:16px;
}

.section-seo-content {
    font-size:14px;
    line-height:1.9;
    color:#374151;
}

.section-seo-content h2,
.section-seo-content h3 {
    font-size:16px;
    margin:16px 0 8px;
}

.section-seo-content p {
    margin:0 0 10px;
}
/* FAQ Section */
.section-faq {
    background:#F9FAFB;
    padding:40px 0 48px;
    margin-top:24px;
}

.section-faq .section-header {
    max-width:720px;
    margin:0 auto 24px auto;
    text-align:center;
}

.section-faq .section-title {
    font-size:22px;
    margin-bottom:10px;
}

.section-faq .section-subtitle {
    font-size:14px;
    color:#6B7280;
    line-height:1.9;
}

.faq-accordion {
    max-width:860px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.faq-item {
    position: relative;
    background:#ffffff;
    border-radius:12px;
    border:1px solid #E5E7EB;
    overflow: visible;
transition:box-shadow 0.2s ease, border-color 0.2s ease, transform 0.18s ease-out;
}

.faq-item.is-open {
    border-color:#4F46E5;
    box-shadow:0 14px 35px rgba(15,23,42,0.12);
    transform:translateY(-1px);
}

.faq-question {
    width:100%;
    background:transparent;
    border:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px;
    cursor:pointer;
    text-align:right;
}

.faq-q-text {
    font-size:15px;
    font-weight:500;
    color:#111827;
}

.faq-qtext{
    font-size:15px;
    font-weight:500;
    color:#111827;
}

.faq-icon {
    width:22px;
    height:22px;
    border-radius:999px;
    border:1px solid #E5E7EB;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    flex-shrink:0;
}

.faq-icon-line {
    position:absolute;
    width:10px;
    height:2px;
    border-radius:999px;
    background:#4F46E5;
    transition:transform 0.18s ease, opacity 0.18s ease;
}

.faq-icon-line-1 {
    transform:rotate(0deg);
}

.faq-icon-line-2 {
    transform:rotate(90deg);
}

.faq-item.is-open .faq-icon-line-2 {
    opacity:0;
    transform:rotate(90deg) scaleX(0);
}

.faq-answer {
    display:block;
    background:#F9FAFB;
}

/* Native <details> accordion: hide answer when closed */
details.faq-item:not([open]) .faq-answer{
    display:none;
}

/* Remove default marker on <summary> */
summary.faq-question{ list-style:none; }
summary.faq-question::-webkit-details-marker{ display:none; }

/* Make summary behave like previous button */
summary.faq-question{ cursor:pointer; }


.faq-answer-inner {
    padding:10px 16px 14px;
    font-size:14px;
    line-height:1.9;
    color:#374151;
}

/* Responsive */
@media (max-width: 768px) {
    .section-faq {
        padding:32px 0 40px;
    }
    .faq-question {
        padding:12px 14px;
    }
    .faq-answer-inner {
        padding:8px 14px 12px;
    }
}



.section-seo-content ul,
.section-seo-content ol {
    padding-right:18px;
    margin:0 0 10px;
}


/* Featured freelancers section on home page */
.section-featured-freelancers {
    padding: 32px 0;
    background: #F9FAFB;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
    margin-top: 24px;
}

.section-featured-freelancers .section-header-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 16px;
}

.section-featured-freelancers .section-title {
    margin: 0;
    font-size: 20px;
}

.section-featured-freelancers .section-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6B7280;
}

.section-featured-freelancers .link-more {
    font-size: 13px;
    text-decoration: none;
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.featured-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    padding: 12px 14px;
    box-shadow: 0 6px 16px rgba(15,23,42,0.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.featured-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.featured-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: linear-gradient(135deg, #4F46E5, #0EA5E9);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
}

.featured-name {
    font-weight: 600;
    font-size: 14px;
}

.featured-skill {
    font-size: 12px;
}

.featured-card-body {
    font-size: 12px;
}

.featured-stats-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.featured-stat .label {
    display: block;
    font-size: 11px;
    color: #6B7280;
    margin-bottom: 2px;
}

.featured-stat .value {
    font-size: 12px;
    font-weight: 500;
}

.featured-stat .muted,
.section-featured-freelancers .muted {
    color: #9CA3AF;
}

@media (max-width: 768px) {
    .section-featured-freelancers .section-header-inline {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Home page blog/articles preview (M7) */
.section-home-articles {
    padding: 32px 0;
    background: #ffffff;
    border-top: 1px solid #E5E7EB;
}

.section-home-articles .section-header-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 16px;
}

.home-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.home-article-card {
    background: #F9FAFB;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    box-shadow: 0 4px 12px rgba(15,23,42,0.03);
    overflow: hidden;
}

.home-article-link {
    display: block;
    padding: 16px 18px;
    text-decoration: none;
}

.home-article-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.home-article-excerpt {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #4B5563;
}

.home-article-more {
    font-size: 12px;
    font-weight: 500;
    color: #2563EB;
}

@media (max-width: 768px) {
    .section-home-articles .section-header-inline {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Trust & Safety strip (M8) */
.section-trust-strip {
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
    background: #F9FAFB;
    padding: 10px 0;
}

.trust-strip-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.trust-strip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    white-space: nowrap;
}

.trust-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-icon-circle {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #EEF2FF;
    border: 1px solid #C7D2FE;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.trust-icon-circle i {
    display: inline-block;
}

.trust-text {
    font-weight: 500;
}

@media (max-width: 768px) {
    .trust-strip-container {
        justify-content: flex-start;
    }
    .trust-strip-item {
        white-space: normal;
    }
}

.footer-extra {
    margin-top: 8px;
    margin-bottom: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.footer-badge-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #111827;
    border-radius: 10px;
    padding: 4px 6px;
    box-shadow: 0 0 0 1px rgba(55,65,81,0.6);
}

.footer-badge-link img {
    display: block;
    max-height: 82px;
    max-width: 140px;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.footer-social-link {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid #374151;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #e5e7eb;
    text-decoration: none;
    font-size: 16px;
}

.footer-social-link:hover {
    background: #1f2937;
    border-color: #9ca3af;
    color: #ffffff;
}

@media (max-width: 768px) {
    .footer-extra {
        flex-direction: column;
        align-items: center;
    }
    .footer-social {
        margin-left: 0;
        justify-content: center;
    }
    .footer-badges {
        justify-content: center;
    }
}



/* White background enforced */

html, body {
    background-color: #ffffff !important;
}
.page,
.main-wrapper,
.content-wrapper,
section,
.container {
    background-color: #ffffff !important;
}



/* Topbar height & vertical centering updated */
.topbar {
    height: 105px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.topbar > * {
    display: flex;
    align-items: center;
}



@media (min-width: 769px) {
    .nav-toggle {
        display: none !important;
    }
}


/* header-categories fix */
.header-categories {
    border-top:1px solid var(--border-soft) !important;
    border-bottom:1px solid #e5e7eb !important;
    margin-top:0 !important;
    background:#F9FAFB !important;
    padding:14px 0 !important;
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}
.header-categories-inner {
    padding:14px 20px !important;
}



/* --- Final header-categories fix --- */
.header-categories {
    border-top: none !important;
    border-bottom: none !important;
    background: #F9FAFB !important;
    margin-top: 0 !important;
    padding: 8px 0 !important;
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

.header-categories-inner {
    padding: 8px 20px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}



/* --- FULL HEADER CLEAN FIX --- */
header {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background: #F9FAFB !important;
}

.topbar,
.header-categories {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background: #F9FAFB !important;
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}



/* --- WHITE BACKGROUND ONLY FOR header-categories --- */
.header-categories,
.header-categories-inner {
    background: #ffffff !important;
}



/* --- Soft Pastel Blue Header Background --- */
header {
    background: #F1F8FF !important;
    border: none !important;
    box-shadow: none !important;
}

.header-categories,
.header-categories-inner {
    background: #DCEEFF !important;
    border: none !important;
}



/* ==== Stripe-inspired Header Theme ==== */
header {
    background: linear-gradient(135deg, #0A2540 0%, #1B3B6F 40%, #635BFF 100%) !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25) !important;
}

/* Topbar: dark, Stripe-like */
.topbar .brand-link {
    color: #F9FAFB !important;
}
.topbar .brand-link:hover {
    color: #E0E7FF !important;
}

/* Main nav links in header */
.nav-links a {
    color: #E5E7EB !important;
}
.nav-links a:hover,
.nav-links a.active {
    color: #FFFFFF !important;
}

/* Right side icons & links */
.auth-links a,
.auth-links button,
.auth-links i,
.auth-links .notif-badge {
    color: #E5E7EB !important;
}
.auth-links .notif-badge {
    background-color: #F97316 !important; /* accent like Stripe's orange-ish notification */
    color: #111827 !important;
}

/* Header categories strip: lighter band below header, inspired by Stripe dashboards */
.header-categories,
.header-categories-inner {
    background: #F6F9FC !important;
    color: #111827 !important;
    border: none !important;
}

/* Links inside header-categories */
.header-categories a {
    color: #4B5563 !important;
}
.header-categories a:hover {
    color: #1D4ED8 !important;
}



/* === HEADER-CATEGORIES FIXES === */

/* Remove bottom line & flatten the layer */
.header-categories, .header-categories-inner {
    border: none !important;
    border-bottom: none !important;
    background: #ffffff !important;
}

/* Adjust search button position & width */
.header-categories .search-box button {
    margin-left: -10px !important; /* pull button left */
    padding: 8px 22px !important;  /* wider button */
    font-family: inherit !important;
}

/* Search input font same as menu */
.header-categories .search-box input {
    font-family: inherit !important;
    font-size: 15px !important;
}

/* Align search box vertically with moon icon */
.header-categories .search-box {
    margin-top: 4px !important;
}



/* ==== FULL REMOVAL OF LINES UNDER header-categories ==== */
.header-categories,
.header-categories-inner {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Remove separators inserted by pseudo elements if any */
.header-categories::before,
.header-categories::after,
.header-categories-inner::before,
.header-categories-inner::after {
    content: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Global fix: remove possible HR or shadow between sections */
header + div,
.header-categories + div {
    border-top: none !important;
    box-shadow: none !important;
}

/* Remove subtle 1px system line from global layout */
.container,
body,
main,
section {
    border: none !important;
    box-shadow: none !important;
}


/* FINAL HEADER-CATEGORIES CLEAN FIX */
.header-categories {
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

.header-categories-inner {
    padding: 8px 16px 10px !important;
    border: none !important;
    box-shadow: none !important;
}

/* Search styling final */
.header-categories .header-search-menu {
    margin-right: auto !important; /* push search box leftwards */
}

.header-categories .search-box {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 0 !important;
}

.header-categories .search-box input {
    font-family: inherit !important;
    font-size: 14px !important;
}

.header-categories .search-box button {
    font-family: inherit !important;
    padding: 8px 28px !important; /* wider button */
}

/* === HEADER SEARCH BUTTON ALIGNMENT & TYPOGRAPHY === */
.header-categories .header-search-menu {
    margin-right: 0 !important;
    margin-left: auto !important; /* move closer to right side / under moon icon */
}

.header-categories .header-search-toggle {
    font-family: inherit !important;
    padding: 8px 24px !important; /* wider button */
}

.header-categories .header-search-toggle span {
    font-family: inherit !important;
    font-size: 14px !important;
}


/* === SUPER FINAL: remove all borders under header === */
.header-categories {
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}



/* === HEADER SEARCH POSITION: option B (under moon, not flush right) === */
.header-categories .header-search-menu {
    margin-left: auto !important;
    margin-right: 120px !important;  /* pull it left from extreme right edge */
}

/* keep search typography aligned with menu */
.header-categories .header-search-toggle,
.header-categories .header-search-toggle span {
    font-family: inherit !important;
    font-size: 14px !important;
}

.header-categories .header-search-toggle {
    padding: 8px 28px !important; /* slightly wider */
}


/* HARD OVERRIDE: remove header-categories borders completely */
.header-categories {
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

.header-categories-inner {
    border: none !important;
    box-shadow: none !important;
}


/* ULTIMATE FIX: hero background same as page to avoid any tiny edge line */
.hero {
    margin-top:-8px !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    border-top: none !important;
}


/* === HERO FLUSH WITH HEADER (no gap, no lines) === */
.hero,
.hero.section {
    margin-top: -1px !important;   /* pull hero up to overlap any 1px gap */
    padding-top: 0 !important;
    border-top: none !important;
    box-shadow: none !important;
}

/* Ensure inner container has no top spacing */
.hero .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    box-shadow: none !important;
}

/* Remove any margin between header/header-categories and hero explicitly */
header + .hero,
.header-categories + .hero,
header + .page .hero,
.header-categories + .page .hero {
    margin-top:-8px !important;

}


/* Increase hero height */
.hero {
    margin-top:-8px !important;
    min-height: 340px !important; /* balanced SaaS hero height */
    padding-bottom: 18px !important;
}


/* === HERO SLIDER IMAGE AREA TUNED (bigger width & height) === */
.hero-visual {
    flex: 1 1 380px !important;
}

/* make card a bit wider */
.hero-image-card {
    position:relative;
    max-width:580px;
    width:100%;
    background:transparent;
    border-radius:36px;
    padding:0;
    box-shadow:none;
    overflow:hidden;
}


/* taller image area with 4:3-ish ratio */
.hero-image-slider {
    padding-top: 75% !important; /* taller than before (68%) */
}

/* Remove header/hero lines */
header, .header, .navbar, .site-header {
 border-bottom:none !important;
 box-shadow:none !important;
}
.hero, .hero-wrapper, .hero-section {
 border-top:none !important;
 box-shadow:none !important;
 margin-top:0 !important;
}
.header::before, .header::after,
.hero::before, .hero::after {
 display:none !important;
 content:none !important;
}


.header-categories,
.hero {
    margin-top:-8px !important;
    border-top:none !important;
    border-bottom:none !important;
}


.hero-image-frame,
.hero-image-slider,
.hero-slide img {
    background:transparent !important;
}



/* NO FRAME HERO IMAGES */

.hero-image-card,
.hero-image-frame,
.hero-slide img,
.hero-slide,
.hero-image-slider {
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    overflow:hidden !important;
    outline:none !important;
    object-fit:cover !important;
}


/* ALT FIX */

.hero-slide img {
    color:transparent !important;
    font-size:0 !important;
    text-indent:-9999px !important;
}



.hero-main {
    padding-right:16px;
}


.hero-image-badge {
    display:none !important;
}


.hero-slide img {
    color:transparent !important;
    font-size:0 !important;
    text-indent:-9999px !important;
}


.home-stat-plus {
    display:inline-block;
    font-size:0.7em;
    font-weight:700;
    margin-right:4px;
    position:relative;
    top:-2px;
}

















/* Restored layout based on screenshot */
.home-stats-bar.home-stats-bar--bb {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;

    /* Fit داخل صفحه بدون بیرون‌زدگی */
    width:100%;
    box-sizing:border-box;
    padding:20px var(--site-gutter);
    padding-top:20px;
    padding-bottom:20px;
    margin:0 auto;

    /* Full-width look (بدون ایجاد اسکرول افقی) */
    background: linear-gradient(90deg, #FDF6E3 0%, #FACC6B 22%, #FDE68A 40%, #EDE9FE 70%, #C4B5FD 100%);
    border-radius:0;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
    overflow:hidden;
}
@media (max-width: 900px) {
    .home-stats-bar.home-stats-bar--bb {
        flex-wrap:wrap;
        justify-content:center;
        gap:20px;
        padding:18px 16px;
    }
}

/* Smaller medal, positioned slightly left like screenshot */



/* Restored employer satisfaction medal */


.home-stats-medal::before {
    content: "★";
    position: absolute;
    font-size: 64px;
    color: rgba(255, 215, 0, 0.35);
    transform: rotate(-12deg);
}

.home-stats-medal-percent {
    font-size: 28px; /* same as +300 */
    font-weight: 800;
    line-height: 1;
    color: #111827;
    margin: 0;
}




/* Medal size & positioning (no overflow) */
.home-stats-medal {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at top left, #FFF7D6, #FACC6B);
    box-shadow: 0 14px 32px rgba(250, 204, 107, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0;
}




/* === Header Pastel Purple (Corrected) === */
/* Apply ONLY to the top header bar */
header { background: transparent !important; } /* let topbar define background */

/* Keep lower categories menu clean (no gradient) */
.header-categories,
.header-categories-inner {
    background: #F9FAFB !important;
}

/* Ensure header text/icons readable on light pastel */
.topbar .brand-link,
.topbar .nav-links a,
.topbar .nav-links button,
.topbar .topbar-icons a,
.topbar .topbar-icons button {
    color: #111827 !important;
}
.topbar .nav-links a:hover { color: #0F172A !important; }



/* full-bleed background for top header */
.topbar::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #E9E4FF; /* solid pastel purple (slightly stronger) */
    z-index: -1;
}


/* readable colors on light pastel header */
.topbar .brand-link,
.topbar .nav-links a,
.topbar .nav-links button,
.topbar .topbar-icons a,
.topbar .topbar-icons button {
    color: #111827 !important;
}


/* Ensure topbar actions/icons are fully visible on light header */
.topbar .auth-links,
.topbar .auth-links a,
.topbar .auth-links button,
.topbar .auth-links i,
.topbar .notif-bell-wrapper a,
.topbar .auth-user-link {
    color:#111827 !important;
    opacity:1 !important;
}

.topbar .theme-toggle-btn {
    background: transparent !important;
    border: 1px solid rgba(17,24,39,0.18) !important;
}

.topbar .brand-link {
    color:#111827 !important;
}


.hero-inner{
    max-width: var(--site-max);
    margin: 0 auto;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
    box-sizing: border-box;
}


/* Utility: full-bleed section background with aligned inner content */
.full-bleed{
    width: 100%;
}
.full-bleed > .inner{
    max-width: var(--site-max);
    margin: 0 auto;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
    box-sizing: border-box;
}

/* ================================
   HEADER + HERO RESTORE (Google UX)
   هدف: هدر تمام‌عرض با محتوای هم‌تراز، و بازگردانی کامل Hero
   ================================ */

/* Make the header band full width; keep content aligned via topbar max-width */
header{
  width:100%;
}

/* Ensure topbar stays centered (content), while background is full-bleed via ::before */
.topbar{
  position:relative;
  width:100%;
  max-width: var(--site-max, 1200px);
  margin: 0 auto;
  padding-left: var(--site-gutter, 24px);
  padding-right: var(--site-gutter, 24px);
  box-sizing:border-box;
}

/* HERO: full-bleed background + stable 2-column layout */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:32px;
  max-width: var(--site-max, 1200px);
  margin: 0 auto !important;
  padding: 56px var(--site-gutter, 24px) 28px !important;

  /* cancel any previous hard overrides */
  min-height: unset !important;
  height:auto !important;
  background: transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.hero::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:#ffffff;
  z-index:-1;
}

/* Keep hero flush naturally; no negative margins */
header + .hero,
.header-categories + .hero{
  margin-top: 0 !important;
}

/* Main text column */
.hero-main{
  flex: 1 1 520px;
  padding: 0 !important;
  /* Proper vertical rhythm between kicker/title/subtitle/actions */
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block: 6px;
  gap: 22px;
}

/* Reset inner element margins to prevent texts from sticking together */
.hero-kicker,
.hero-kicker h2,
.hero-title,
.hero-title h1,
.hero-subtitle,
.hero-subtitle p{
  margin:0 !important;
}

/* Kicker (small headline) */
.hero-kicker{
  margin-bottom: 2px !important;
}
.hero-kicker h2{
  font-size: clamp(14px, 1.2vw, 18px) !important;
  line-height: 1.7 !important;
  color:#0F172A !important;
  font-weight:700 !important;
}

/* Title spacing and readable line-height */
.hero-title{
  line-height: 1.3 !important;
}

/* Subtitle spacing */
.hero-subtitle{
  line-height: 1.9 !important;
}

/* Buttons spacing */
.hero-actions{
  margin-top: 12px !important;
}

.hero-title{
  font-size: clamp(28px, 2.2vw, 44px) !important;
  line-height: 1.25 !important;
  margin: 0 0 18px 0 !important;
  color: #0F172A !important;
}

.hero-subtitle{
  font-size: clamp(14px, 1.1vw, 18px) !important;
  line-height: 1.9 !important;
  margin: 0 0 22px 0 !important;
  color: #334155 !important;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

/* Use flex-gap for spacing; avoid extra stacked margins inside hero-main */
.hero-main .hero-title,
.hero-main .hero-subtitle{
  margin: 0 !important;
}
.hero-main .hero-actions{
  margin-top: 0 !important;
}

/* Visual column */
.hero-visual{
  flex: 0 1 560px !important;
  display:flex;
  justify-content:flex-start;
}

.hero-image-card{
  width:100%;
  max-width:560px !important;
  border-radius: 24px !important;
  overflow:hidden !important;
  background:#ffffff !important;
  box-shadow: 0 18px 48px rgba(15,23,42,0.10) !important;
}

.hero-image-badge{
  display:flex !important;
  align-items:flex-start;
  gap:6px;
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
}

/* Slider frame */
.hero-image-frame{
  position:relative;
  border-radius: 24px !important;
  overflow:hidden !important;
}

/* Restore slider sizing (prevents tiny/huge weirdness) */
.hero-image-slider{
  position:relative;
  width:100%;
  padding-top: 62% !important; /* balanced ratio */
  min-height: 320px;
}

/* Slides */
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .45s ease;
}

.hero-slide.is-active{
  opacity:1;
}

.hero-slide img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;

  /* undo any previous hiding hacks */
  color: inherit !important;
  font-size: inherit !important;
  text-indent: 0 !important;
  border:0 !important;
  border-radius: 0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

/* Slider dots */
.hero-slider-dots{
  position:absolute;
  left:14px;
  bottom:14px;
  display:flex;
  gap:8px;
  z-index:3;
}

/* Avoid global 'remove lines' rules from pushing hero up */
.hero, .hero-wrapper, .hero-section{
  margin-top: 0 !important;
}


/* === HERO IMAGE BACKGROUND FIX (REFINED) === */
* === HERO POSITIONING FIX === */
.hero {
    margin-top: 0 !important;
    padding-top: clamp(32px, 5vw, 72px);
}


/* === GLOBAL SECTION STACKING FIX === */
section {
    margin-top: 0;
}

section + section {
    margin-top: 0;
}


/* === HERO STATS FLAT STYLE (SAFE) === */
.hero-stats-inner {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}


/* === HERO SLIDER DOTS RESTORE === */
.hero-image-slider {
    position: relative;
}

.hero-slider-dots,
.hero-dots {
    position: absolute;
    left: 24px;
    bottom: 24px;
    display: flex;
    gap: 8px;
    z-index: 5;
}

.hero-slider-dots span,
.hero-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all .25s ease;
}

.hero-slider-dots span.active,
.hero-dots span.active {
    background: #4f46e5;
    transform: scale(1.25);
}


/* === HERO SLIDER DOTS (FIX) === */
/* Ensure dots are positioned relative to the image frame */
.hero-image-frame { position: relative; }

/* Remove any white backing behind slides; match hero background */
.hero-image-frame,
.hero-image-slider,
.hero-slide {
    background: inherit !important;
}

/* Place dots bottom-left of the slider image */
.hero-slider-dots {
    left: 18px !important;
    bottom: 18px !important;
    transform: none !important;
    z-index: 10 !important;
}

/* Dot buttons styling (HTML uses <button> + .is-active) */
.hero-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: rgba(255,255,255,.55);
    cursor: pointer;
    transition: transform .2s ease, background-color .2s ease, opacity .2s ease;
    opacity: .95;
}

.hero-slider-dot.is-active {
    background: #4F46E5;
    transform: scale(1.25);
    opacity: 1;
}


/* === HERO SHOULD START RIGHT UNDER HEADER === */
.header,
.header-top,
.header-main,
.header-categories,
.header-categories-wrap,
.header-categories-bar {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

.hero {
    margin-top: 0 !important;
    padding-top: 0 !important; /* starts from header bottom edge */
}

/* keep inner breathing room instead of pushing whole hero down */
.hero-main {
    padding-top: clamp(24px, 3vw, 56px);
}

/* remove any extra top gaps on hero image frame */
.hero-image-frame {
    margin-top: 0 !important;
    background: inherit !important; /* match hero background */
}

/* Make slider & slides inherit hero bg (no white panel) */
.hero-image-slider,
.hero-slide,
.hero-slide img {
    background: inherit !important;
    box-shadow: none !important;
}

/* === DOTS MUST BE VISIBLE (override prior background-color rules) === */
.hero-slider-dots { display: flex !important; z-index: 20 !important; }

.hero-slider-dot {
    background-color: rgba(255,255,255,.55) !important;
}

.hero-slider-dot.is-active {
    background-color: #4F46E5 !important;
}

/* === GLOBAL STACKING: remove accidental top margins between homepage blocks === */
.hero + *,
.hero-stats-full,
.hero-stats-inner,
.home-stats-bar,
.section,
.home-section,
.home-block {
    margin-top: 0 !important;
}


/* === GLOBAL BACKGROUND = HERO BACKGROUND === */
/* Set global background to match Hero */
html, body {
    background: inherit;
}

/* Ensure main wrappers inherit hero background */
body,
.site-wrapper,
.main-wrapper,
main,
.page,
.page-wrapper {
    background: inherit !important;
}

/* Hero defines the base background */
.hero {
    background: var(--hero-bg, inherit);
}


/* === HOW ANIMATION SECTION – FLAT & STACKED === */
.section.section-how-animation {
    margin-top: 0 !important;          /* stick to previous section */
    padding-top: 0 !important;
    background: inherit !important;    /* same as hero background */
    box-shadow: none !important;
    border: none !important;
}

/* increase height by ~33% using padding (safe & responsive) */
.section.section-how-animation .how-animation-inner,
.section.section-how-animation .container {
    padding-top: calc(var(--how-padding-top, 1) * 1.33);
    padding-bottom: calc(var(--how-padding-bottom, 1) * 1.33);
}

/* ensure no pseudo separators */
.section.section-how-animation::before,
.section.section-how-animation::after {
    display: none !important;
}


/* === HOW ANIMATION: FULL-WIDTH BACKGROUND + GRID ALIGNMENT + LIGHT ANIMATION === */
.section.section-how-animation {
    /* Break out of .container to span full viewport width */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: inherit !important; /* same as hero/site background */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Keep inner content aligned to the site's grid (container width) */
.section.section-how-animation .section-how-inner {
    /* If it's inside extra containers, this still keeps a clean grid */
    max-width: var(--site-max, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-gutter, clamp(16px, 3vw, 32px));
    padding-right: var(--site-gutter, clamp(16px, 3vw, 32px));

    /* Vertical alignment + consistent layout */
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: clamp(18px, 3vw, 40px);
}

/* Make section taller (~ +33%) without fixed heights */
.section.section-how-animation {
    padding-top: clamp(28px, 4.2vw, 86px);
    padding-bottom: clamp(28px, 4.2vw, 86px);
}

/* Flat: no card effects anywhere in this section */
.section.section-how-animation,
.section.section-how-animation * {
    box-shadow: none !important;
}

/* Light, smooth SVG animation (GPU-friendly) */
.section.section-how-animation .how-svg {
    transform: translateZ(0);
    will-change: transform;
    animation: howFloat 6.5s ease-in-out infinite;
}

/* Optional subtle shimmer for gradient strokes/fills (very light) */
.section.section-how-animation .how-svg [fill*="url("],
.section.section-how-animation .how-svg [stroke*="url("] {
    animation: howGlow 5.5s ease-in-out infinite;
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .section.section-how-animation .how-svg,
    .section.section-how-animation .how-svg [fill*="url("],
    .section.section-how-animation .how-svg [stroke*="url("] {
        animation: none !important;
    }
}

/* Mobile: stacked layout */
@media (max-width: 768px) {
    .section.section-how-animation .section-how-inner {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* Keyframes */
@keyframes howFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@keyframes howGlow {
    0%, 100% { opacity: 1; }
    50%      { opacity: .92; }
}


/* === PHASE 1: HOW ANIMATION (custom, lightweight) === */
.section-how-visual { align-items: center; }
.how-anim-svg{
  width: min(520px, 100%);
  height: auto;
  display:block;
  background: transparent;
}

.how-blob-1{ animation: howBlob1 8s ease-in-out infinite; transform-origin: 110px 70px; }
.how-blob-2{ animation: howBlob2 9.5s ease-in-out infinite; transform-origin: 445px 250px; }

.how-card-1{ animation: howCard 4.8s ease-in-out infinite; }
.how-card-2{ animation: howCard 4.8s ease-in-out infinite; animation-delay: .35s; }
.how-card-3{ animation: howCard 4.8s ease-in-out infinite; animation-delay: .7s; }

.how-progress{ animation: howProgress 4.8s ease-in-out infinite; transform-origin: 110px 273px; }
.how-cursor{ animation: howCursor 4.8s ease-in-out infinite; }

.how-check{ animation: howCheck 4.8s ease-in-out infinite; transform-origin: 400px 120px; }

@keyframes howBlob1 { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(6px, 8px) scale(1.05);} }
@keyframes howBlob2 { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-8px, -6px) scale(1.04);} }

@keyframes howCard {
  0%,100%{ transform: translateY(0); opacity: 1; }
  50%{ transform: translateY(-3px); opacity: .98; }
}

@keyframes howProgress {
  0%{ width: 60px; opacity: .95; }
  45%{ width: 220px; opacity: 1; }
  100%{ width: 60px; opacity: .95; }
}

@keyframes howCursor{
  0%{ transform: translate(150px, 120px) scale(.95); opacity: 0; }
  12%{ opacity: 1; }
  30%{ transform: translate(350px, 118px) scale(1); }
  55%{ transform: translate(350px, 176px) scale(1); }
  78%{ transform: translate(350px, 232px) scale(1); }
  100%{ transform: translate(150px, 120px) scale(.95); opacity: 0; }
}

@keyframes howCheck{
  0%,22%{ opacity: 0; transform: scale(.8); }
  28%,60%{ opacity: 1; transform: scale(1); }
  100%{ opacity: 0; transform: scale(.85); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .how-blob-1,.how-blob-2,.how-card-1,.how-card-2,.how-card-3,.how-progress,.how-cursor,.how-check{ animation:none !important; }
}


/* === PHASE 1 (v2): HOW ANIMATION – brighter UI + real Persian labels === */
.how-anim-svg-v2{ width:min(540px,100%); }
/* Smooth, lightweight highlighting per step (no heavy filters) */
.section.section-how-animation .how-step rect{
  transition: stroke .25s ease, transform .25s ease;
}

.section.section-how-animation .how-step{ opacity:.98; }

.section.section-how-animation .how-highlight{
  animation: howHighlight 6.2s ease-in-out infinite;
}

.section.section-how-animation .how-progress{
  animation: howProgress2 6.2s ease-in-out infinite;
  transform-origin: 104px 267px;
}

.section.section-how-animation .how-cursor{
  animation: howCursor2 6.2s ease-in-out infinite;
  will-change: transform, opacity;
}

/* Slight step "pulse" with delays */
.section.section-how-animation .how-step-1{ animation: howStepPulse 6.2s ease-in-out infinite; }
.section.section-how-animation .how-step-2{ animation: howStepPulse 6.2s ease-in-out infinite; animation-delay: 1.05s; }
.section.section-how-animation .how-step-3{ animation: howStepPulse 6.2s ease-in-out infinite; animation-delay: 2.10s; }
.section.section-how-animation .how-step-4{ animation: howStepPulse 6.2s ease-in-out infinite; animation-delay: 3.15s; }
.section.section-how-animation .how-step-5{ animation: howStepPulse 6.2s ease-in-out infinite; animation-delay: 4.20s; }

@keyframes howStepPulse{
  0%,100%{ transform: translateY(0); opacity: .96; }
  45%{ transform: translateY(-1px); opacity: 1; }
  70%{ transform: translateY(0); opacity: .98; }
}

@keyframes howHighlight{
  0%{ opacity:0; transform: translateY(0); }
  10%{ opacity:1; transform: translateY(0); }
  22%{ opacity:0; transform: translateY(0); }

  30%{ opacity:1; transform: translateY(34px); }
  42%{ opacity:0; transform: translateY(34px); }

  50%{ opacity:1; transform: translateY(68px); }
  62%{ opacity:0; transform: translateY(68px); }

  70%{ opacity:1; transform: translateY(102px); }
  82%{ opacity:0; transform: translateY(102px); }

  90%{ opacity:1; transform: translateY(136px); }
  100%{ opacity:0; transform: translateY(136px); }
}

@keyframes howProgress2{
  0%{ width: 70px; }
  22%{ width: 130px; }
  42%{ width: 200px; }
  62%{ width: 260px; }
  82%{ width: 312px; }
  100%{ width: 70px; }
}

@keyframes howCursor2{
  0%{ transform: translate(138px, 96px) scale(.96); opacity: 0; }
  8%{ opacity: 1; }
  18%{ transform: translate(356px, 96px) scale(1); }
  34%{ transform: translate(356px, 130px) scale(1); }
  50%{ transform: translate(356px, 164px) scale(1); }
  66%{ transform: translate(356px, 198px) scale(1); }
  82%{ transform: translate(356px, 232px) scale(1); }
  100%{ transform: translate(138px, 96px) scale(.96); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .section.section-how-animation .how-highlight,
  .section.section-how-animation .how-progress,
  .section.section-how-animation .how-cursor,
  .section.section-how-animation .how-step-1,
  .section.section-how-animation .how-step-2,
  .section.section-how-animation .how-step-3,
  .section.section-how-animation .how-step-4,
  .section.section-how-animation .how-step-5{ animation:none !important; }
}


/* === HOW ANIM SVG TEXT FONT FIX === */

/* === HOW ANIM (v5): stable two-column text layout === */
.how-anim-svg-v5 text{
  font-family: inherit !important;
  paint-order: stroke;
}

/* === HOW ANIMATION v6: HTML overlay for perfect RTL layout (fast) === */
.how-anim-wrap{
  position: relative;
  width: min(540px, 100%);
  margin: 0 auto;
}
.how-anim-monitor{ width:100%; height:auto; display:block; }

/* Clip area sits exactly on monitor screen (x=86,y=48,w=348,h=202) mapped to wrap width */
.how-ui-clip{
  position:absolute;
  left: 16.5%;
  top: 15%;
  width: 67%;
  height: 63%;
  border-radius: 18px;
  overflow:hidden;
  pointer-events:none;
  background: transparent;
}

/* UI base */
.how-ui{
  position:relative;
  width:100%;
  height:100%;
  background: rgba(255,255,255,.90);
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 10px 12px;
  box-sizing:border-box;
}

/* top bar */
.how-ui-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 2px 2px 6px;
}
.how-ui-pill{
  width: 86px;
  height: 14px;
  border-radius: 999px;
  background: rgba(99,102,241,.18);
}
.how-ui-brand{
  font-weight: 600;
  font-size: 12px;
  color: #334155;
  line-height: 1;
}
.how-ui-dot{
  width: 10px; height:10px; border-radius:999px;
  background: rgba(79,70,229,.85);
}

/* rows */
.how-ui-rows{ display:flex; flex-direction:column; gap: 8px; margin-top: 2px; }
.how-ui-row{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius: 10px;
  padding: 7px 10px;
  box-sizing:border-box;
  min-height: 28px;
}
.how-ui-title{
  flex: 0 0 auto;
  min-width: 78px;
  text-align:right;
  font-weight: 700;
  color:#0f172a;
  font-size: 12px;
  white-space: nowrap;
}
.how-ui-sub{
  flex: 1 1 auto;
  text-align:left;
  color:#64748b;
  font-size: 11px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  direction: rtl; /* Persian readable even when left-aligned */
}

/* progress */
.how-ui-progress{
  position: relative;
  height: 10px;
  background: rgba(226,232,240,.9);
  border-radius: 999px;
  overflow:hidden;
  margin-top: 6px;
}
.how-ui-progress-bar{
  position:absolute;
  left:0; top:0; bottom:0;
  width: 28%;
  background: linear-gradient(135deg, #4F46E5, #6366F1);
  border-radius: 999px;
  animation: howProgressHTML 6.2s ease-in-out infinite;
}

/* highlight */
.how-ui-highlight{
  position:absolute;
  left: 8px;
  right: 8px;
  top: 44px;
  height: 32px;
  border-radius: 12px;
  border: 2px solid rgba(79,70,229,.85);
  box-shadow: 0 0 0 3px rgba(79,70,229,.10);
  opacity: 0;
  animation: howHighlightHTML 6.2s ease-in-out infinite;
}

/* cursor */
.how-ui-cursor{
  position:absolute;
  width: 18px; height: 26px;
  left: 72%;
  top: 52px;
  opacity: 0;
  animation: howCursorHTML 6.2s ease-in-out infinite;
}
.how-ui-cursor::before{
  content:"";
  position:absolute; inset:0;
  background: #fff;
  clip-path: polygon(0 0, 0 100%, 32% 78%, 52% 100%, 76% 90%, 56% 66%, 100% 66%);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 4px;
}

/* Light blobs (reuse existing keyframes if present) */
.how-blob-1{ animation: howBlob1 8s ease-in-out infinite; transform-origin: 118px 70px; }
.how-blob-2{ animation: howBlob2 9.5s ease-in-out infinite; transform-origin: 448px 250px; }

@keyframes howProgressHTML{
  0%{ width: 22%; }
  22%{ width: 36%; }
  42%{ width: 52%; }
  62%{ width: 70%; }
  82%{ width: 100%; }
  100%{ width: 22%; }
}
@keyframes howHighlightHTML{
  0%{ opacity:0; transform: translateY(0); }
  10%{ opacity:1; transform: translateY(0); }
  22%{ opacity:0; transform: translateY(0); }

  30%{ opacity:1; transform: translateY(36px); }
  42%{ opacity:0; transform: translateY(36px); }

  50%{ opacity:1; transform: translateY(72px); }
  62%{ opacity:0; transform: translateY(72px); }

  70%{ opacity:1; transform: translateY(108px); }
  82%{ opacity:0; transform: translateY(108px); }

  90%{ opacity:1; transform: translateY(144px); }
  100%{ opacity:0; transform: translateY(144px); }
}
@keyframes howCursorHTML{
  0%{ opacity:0; transform: translate(0,0) scale(.96); }
  8%{ opacity:1; }
  18%{ transform: translate(0,0) scale(1); }
  34%{ transform: translate(0,36px) scale(1); }
  50%{ transform: translate(0,72px) scale(1); }
  66%{ transform: translate(0,108px) scale(1); }
  82%{ transform: translate(0,144px) scale(1); }
  100%{ opacity:0; transform: translate(0,0) scale(.96); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .how-ui-progress-bar,.how-ui-highlight,.how-ui-cursor,.how-blob-1,.how-blob-2{ animation:none !important; }
}


/* === FIX: keep last row (پرداخت امن) fully inside monitor === */
.how-ui{
  gap: 8px !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

.how-ui-rows{ gap: 7px !important; }
.how-ui-row{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  min-height: 26px !important;
}

.how-ui-progress{ margin-top: 4px !important; height: 9px !important; }


/* === FIX v6.2: expand clip area vertically so last row fits === */
.how-ui-clip{
  top: 14% !important;
  height: 66% !important;
}


/* === FIX v6.3: move all rows slightly upward inside monitor === */
.how-ui{
  padding-top: 6px !important; /* move content up */
}


/* === HOW SECTION: divider + typography system (Google-like) === */
.section-how-inner{
  position: relative;
  padding-right: clamp(24px, 3vw, 48px);
}

/* vertical divider on the right edge of the text column */
@media (max-width: 992px){
  .section-how-inner{
    padding-right: 0;
  }
  }

/* Typography */
.section-how-inner .how-text-eyebrow{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(79,70,229,.92);
  margin-bottom: 10px;
}

.section-how-inner .how-text-title{
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.25;
  margin: 0 0 14px 0;
  text-align:center;
}

.section-how-inner .how-text-lead{
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.9;
  color: rgba(15,23,42,.78);
  margin: 0 0 18px 0;
  max-width: 48ch;
  text-align:right;
  margin-left:0;
  margin-right:0;
}

/* Steps list (if exists) */
.section-how-inner .how-steps-list{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 10px;

  text-align:right;
}

.section-how-inner .how-steps-list li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(226,232,240,.9);
}

.section-how-inner .how-steps-list li::before{
  content:"";
  flex: 0 0 10px;
  width:10px; height:10px;
  margin-top: 7px;
  border-radius: 999px;
  background: rgba(79,70,229,.85);
}

/* Fallback for paragraphs */
.section-how-inner p{
  line-height: 1.9;
}


/* === HOW SECTION: divider between columns + typography (final) === */
.section.section-how-animation .section-how-inner{
  position: relative;
}

/* Divider should sit between TEXT (left) and VISUAL (right) */
.section.section-how-animation .section-how-inner .section-how-text{ text-align:right; }
.section-how-text{
  position: relative;
  padding-right: clamp(22px, 3vw, 48px); /* space from divider to text */
}

/* Draw divider on the RIGHT edge of the text column (between text & monitor) */
.section.section-how-animation .section-how-text::after{
  content:"";
  position:absolute;
  top: 10px;
  bottom: 10px;
  right: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(99,102,241,.40), transparent);
}

/* Mobile: remove divider */
@media (max-width: 992px){
  .section.section-how-animation .section-how-text{
    padding-right: 0;
  }
  .section.section-how-animation .section-how-text::after{ display:none; }
}

/* Typography improvements */
.section.section-how-animation .section-how-text{
  font-family: inherit; /* uses site standard font */
}

.section-how-text .how-text-title{
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.25;
  font-weight: 800;
  margin: 0 0 14px 0;
}

.section-how-text .how-text-lead{
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 2.0;
  font-weight: 500;
  color: rgba(15,23,42,.80);
  margin: 0 0 18px 0;
  max-width: 56ch;
}

.section-how-text .how-steps-list{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
}

.section-how-text .how-steps-list li{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(226,232,240,.92);
}

.section-how-text .how-steps-list li::before{
  content:"";
  flex: 0 0 10px;
  width:10px; height:10px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(79,70,229,.90);
}

.section-how-text .how-step-head{
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.5;
}

.section-how-text .how-step-desc{
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.9;
  color: rgba(15,23,42,.72);
}


/* === HOW SECTION: compact professional sizing (reduce height) === */
.section.section-how-animation .section-how-text .how-text-title{
  font-size: clamp(20px, 2.0vw, 30px);
  margin-bottom: 10px;
}

.section.section-how-animation .section-how-text .how-text-lead{
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.85;
  margin-bottom: 14px;
}

.section.section-how-animation .section-how-text .how-steps-list{
  gap: 8px;
}

.section.section-how-animation .section-how-text .how-steps-list li{
  padding: 10px 12px;
  border-radius: 12px;
}

.section.section-how-animation .section-how-text .how-step-head{
  font-size: 14px;
  line-height: 1.45;
}

.section.section-how-animation .section-how-text .how-step-desc{
  font-size: 13px;
  line-height: 1.75;
}

/* Reduce bullet dot vertical offset slightly */
.section.section-how-animation .section-how-text .how-steps-list li::before{
  margin-top: 9px;
}

/* === FIX: How-it-works lead text should use full column width (no early line break) === */
/*
  The lead paragraph previously had a character-based max-width (ch) in earlier rules.
  That can force wrapping before the text reaches the left edge of the column.
  This override makes the lead text behave like normal paragraphs (similar to .how-text-bottom),
  using the full available width and only wrapping when the column actually ends.
*/
.section.section-how-animation .section-how-text .how-text-lead{
  display: block;
  width: 100%;
  max-width: none !important;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  margin-left: 0;
  margin-right: 0;
}


/* === HOW SECTION: requested cleanup === */
.section.section-how-animation{
  /* Add standard vertical gap from the section above so the title doesn't stick */
  margin-top: clamp(14px, 2.2vw, 32px) !important;
  padding-bottom: 18px !important; /* reduce bottom height */
  margin-bottom: 0 !important;
}

.section.section-how-animation .section-how-actions{
  display: none !important;
}

/* Remove any leftover dot stacks near divider/title (safety) */
.section.section-how-animation .how-dots,
.section.section-how-animation .how-visual-dots,
.section.section-how-animation .how-visual-caption{
  display:none !important;
}


/* === HOW SECTION: SAFE cleanup (no layout break) === */
.section.section-how-animation{
  padding-bottom: 16px !important; /* reduce empty space at bottom */
  margin-bottom: 0 !important;
}

/* Make inner wrapper not enforce extra height */
.section.section-how-animation .section-how-inner{
  min-height: auto !important;
  padding-bottom: 0 !important;
}

/* Ensure legacy under-monitor title/dots never appear */
.section.section-how-animation .section-title,
.section.section-how-animation .section-how-bullets,
.section.section-how-animation [class*="how"][class*="dot"],
.section.section-how-animation [class*="how"][class*="dots"]{
  display:none !important;
}


/* === HOW SECTION: move bottom text under left column & lift monitor up === */
.section.section-how-animation .section-how-inner{
  align-items: flex-start !important; /* prevents centering, lifts monitor */
}

.section.section-how-animation .section-how-visual{
  align-self: flex-start !important;
  margin-top: 0 !important;
}

/* Give the right column room under monitor for future content */
.section.section-how-animation .section-how-visual{
  padding-bottom: 40px; /* creates space below monitor for a new block later */
}

/* Bottom paragraph moved under left text */
.section.section-how-animation .how-text-bottom{
  margin-top: 14px;
  text-align:right;
  margin-left:0;
  margin-right:0;
}

.section.section-how-animation .how-text-bottom p{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.9;
  color: rgba(15,23,42,.74);
  max-width: 60ch;
}


/* Sidebar FAQ compact */
.faq-accordion--compact{
  max-width:none;
  margin:0;
}
.faq-accordion--compact .faq-question{
  padding:10px 12px;
  font-size:12.2px;
  line-height:1.62;
}
.faq-accordion--compact .faq-answer-inner{
  padding:10px 12px 12px;
  font-size:13px;
  line-height:1.85;
}

/* === Admin Embed mode (taxonomyHub) === */
body.admin-embed {
  background: transparent;
}
body.admin-embed .container.admin-embed-container{
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.admin-embed .page{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}





/* Frame/slider should also be transparent so clipped corners show the hero background */
.hero .hero-visual .hero-image-frame,
.hero .hero-visual .hero-image-slider,
.hero .hero-visual .hero-slide,
.hero .hero-visual .hero-slide img{
  background: transparent !important;
  box-shadow: none !important;
}

/* Prevent any caption/title layer from showing (if present in some versions) */
.hero .hero-visual figcaption,
.hero .hero-visual .slide-caption,
.hero .hero-visual .hero-caption,
.hero .hero-visual .image-title,
.hero .hero-visual .hero-image-title{
  display: none !important;
}

/* Keep badge hidden (some blocks re-enable it elsewhere) */
.hero .hero-visual .hero-image-badge{
  display: none !important;
}

/* === HERO VISUAL: remove white backdrop behind clipped images (scoped) === */
.hero .hero-visual{
  background: transparent !important;
}

/* The white rounded 'card' behind the slider */
.hero .hero-visual .hero-image-card{
  background: transparent !important;
  box-shadow: none !important;
}

/* Make sure internal wrappers are transparent too */
.hero .hero-visual .hero-image-frame,
.hero .hero-visual .hero-image-slider,
.hero .hero-visual .hero-slide,
.hero .hero-visual .hero-slide img{
  background: transparent !important;
}

/* Keep clipping on the frame only (not a white card) */
.hero .hero-visual .hero-image-frame{
  overflow: hidden !important;
}

/* Do not visually show any title/caption for slides (alt text is non-visual by default) */
.hero .hero-visual .slide-caption,
.hero .hero-visual figcaption,
.hero .hero-visual .hero-caption,
.hero .hero-visual .image-title{
  display: none !important;
}

/* Hide the badge overlay too (if present) */
.hero .hero-visual .hero-image-badge{
  display: none !important;
}





/* Don't render any visible title/caption for the slider */
.hero .hero-visual .slide-caption,
.hero .hero-visual figcaption,
.hero .hero-visual .hero-caption,
.hero .hero-visual .image-title{
  display: none !important;
}

/* Ensure the badge doesn't re-appear from earlier CSS blocks */
.hero .hero-visual .hero-image-badge{
  display: none !important;
}

/* === HERO VISUAL: remove white backdrop behind clipped images (scoped) === */
.hero .hero-visual,
.hero .hero-visual .hero-image-card,
.hero .hero-visual .hero-image-frame,
.hero .hero-visual .hero-image-slider,
.hero .hero-visual .hero-slide,
.hero .hero-visual .hero-slide img{
  background: transparent !important;
}

/* Remove the white card shadow/backdrop */
.hero .hero-visual .hero-image-card{
  box-shadow: none !important;
}

/* Keep only the image/frame clipping (if any), but don't create a separate white backdrop */
.hero .hero-visual .hero-image-card{
  overflow: visible !important;
}
.hero .hero-visual .hero-image-frame{
  overflow: hidden !important;
}

/* Ensure images fill the frame neatly */
.hero .hero-visual .hero-slide img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Hide any visible title/caption overlays for hero slides (alt should not be shown) */
.hero .hero-visual .hero-image-badge,
.hero .hero-visual figcaption,
.hero .hero-visual .slide-caption,
.hero .hero-visual .hero-caption,
.hero .hero-visual .image-title{
  display: none !important;
}

/* HOME: how-under-monitor btn-ghost override */
.how-under-monitor-actions .btn-ghost{
  background-color:#2f8f6b;
  color:#fff;
  border:0;
}
.how-under-monitor-actions .btn-ghost:hover{
  background-color:#277a5c;
  color:#fff;
}
@media (max-width: 768px){
  .home-process,
.home-process-box{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* How animation (SVG file) */
img.how-anim-monitor{display:block;max-width:100%;height:auto;}


/* --- HOW section alignment fixes (RTL) --- */
.section-how-animation .how-steps-list li,
.section-how-animation .how-steps-list li *{ text-align:right; }

.section-how-animation .how-ui-row{
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
  text-align:right;
}
.section-how-animation .how-ui-title,
.section-how-animation .how-ui-sub{
  width:100%;
  text-align:right !important;
  direction:rtl;
}

.section-how-animation .how-under-monitor-card{
  text-align:right;
  direction:rtl;
}
.section-how-animation .how-under-monitor-actions{
  justify-content:flex-end;
}



/* --- FIX: Keep 'How it works' title in single line (avoid last word dropping to next line) --- */
.section-how-text h2,
.section-how-text .how-text-title{
  display: inline-block;
  width: 100%;
  white-space: normal;
  word-break: keep-all;
  line-height: 1.4;
}
.section-how-text h2 span,
.section-how-text .how-text-title span{
  display: inline;
}



/* === Footer logo: remove any frame/border/background (admin request) === */
.site-footer .footer-logo,
.site-footer .footer-logo img{
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}



/* Header Brand Logo (Freelancito) */
.brand .brand-link{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
}
.brand .brand-logo{
    width:auto;
    height:40px;
    max-height:40px;
    display:block;
}
.brand .brand-name{
    font-weight:800;
    font-size:18px;
    line-height:1;
    color:inherit;
    letter-spacing:0.2px;
}
@media (max-width: 480px){
    .brand .brand-logo{ max-height:34px; }
    .brand .brand-name{ font-size:16px; }
}

/* =========================================
   AUTH PAGES (Scoped) — Login/Register UI
   Notes: Designed to NOT affect other pages.
========================================= */
.auth-page{
    position: relative;
    width: 100%;
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}
.auth-page::before{
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(1200px 700px at 20% 10%, rgba(19,88,97,.10), rgba(255,255,255,0) 60%),
                radial-gradient(900px 600px at 80% 20%, rgba(19,88,97,.06), rgba(255,255,255,0) 55%),
                linear-gradient(180deg, rgba(245,248,249,.9), rgba(255,255,255,1));
    pointer-events: none;
}
.auth-wrap{
    position: relative;
    width: 100%;
    max-width: 520px;
    padding: 0 16px;
}
.auth-card{
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(0,0,0,.08);
    padding: 22px 22px 18px;
}
.auth-card__header{ margin-bottom: 18px; }
.auth-title{
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.35;
    color: #0f172a;
    letter-spacing: -.2px;
}
.auth-subtitle{
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: rgba(15, 23, 42, .70);
}

/* Social login (scoped) */
.auth-social{ margin: 14px 0 18px; }
.auth-social__divider{
    position: relative;
    text-align: center;
    margin: 14px 0;
    font-size: 12px;
    color: rgba(15, 23, 42, .45);
}
.auth-social__divider::before,
.auth-social__divider::after{
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: rgba(15, 23, 42, .10);
}
.auth-social__divider::before{ right: 0; }
.auth-social__divider::after{ left: 0; }

.auth-social__grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.auth-social-btn{
    width: 100%;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .14);
    background: #fff;
    color: rgba(15, 23, 42, .85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, transform .08s ease, border-color .15s ease;
}
.auth-social-btn:hover{ background: rgba(15, 23, 42, .02); border-color: rgba(15, 23, 42, .20); }
.auth-social-btn:active{ transform: translateY(1px); }
.auth-social-btn[aria-disabled="true"]{
    opacity: .60;
    cursor: not-allowed;
    pointer-events: none;
}
.auth-social-btn__icon{
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    flex: 0 0 20px;
    display: inline-block;
}
.auth-social-note{
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.7;
    color: rgba(15, 23, 42, .55);
}
.auth-form{ display:block; }
.auth-field{ margin-bottom: 14px; }
.auth-label{
    display: block;
    font-size: 13px;
    margin: 0 0 8px;
    color: rgba(15, 23, 42, .85);
}
.auth-input-wrap{
    position: relative;
}
.auth-input-icon{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(15, 23, 42, .40);
    font-size: 15px;
    pointer-events: none;
}
.auth-input{
    width: 100%;
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .12);
    background: #fff;
    padding: 0 40px 0 44px;
    outline: none;
    font-size: 14px;
    color: #0f172a;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-input::placeholder{ color: rgba(15, 23, 42, .35); }
.auth-input:focus{
    border-color: rgba(19,88,97,.45);
    box-shadow: 0 0 0 4px rgba(19,88,97,.10);
}
.auth-toggle{
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: rgba(15, 23, 42, .55);
    cursor: pointer;
}
.auth-toggle:hover{ background: rgba(15, 23, 42, .04); }

.auth-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 0 14px;
}
.auth-check{
    display:flex;
    align-items:center;
    gap: 8px;
    font-size: 13px;
    color: rgba(15, 23, 42, .75);
    user-select: none;
}
.auth-check input{ width: 16px; height: 16px; }

.auth-btn{
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    background: #135861;
    color: #fff;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform .08s ease, filter .15s ease;
}
.auth-btn--ghost{
    background: transparent;
    color: #135861;
    border: 1px solid rgba(19,88,97,.28);
}
.auth-btn--ghost:hover{ filter: none; background: rgba(19,88,97,.06); }
.auth-btn:hover{ filter: brightness(1.03); }
.auth-btn:active{ transform: translateY(1px); }
.auth-btn[disabled]{ opacity: .75; cursor: not-allowed; }
.auth-btn__spinner{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: rgba(255,255,255,1);
    display: none;
    animation: authSpin .8s linear infinite;
}
.auth-btn.is-loading .auth-btn__spinner{ display: inline-block; }
.auth-btn.is-loading .auth-btn__text{ opacity: .95; }
@keyframes authSpin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }

.auth-help{
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
}
.auth-dot{ color: rgba(15, 23, 42, .35); }
.auth-link{
    color: #135861;
    text-decoration: none;
}
.auth-link:hover{ text-decoration: underline; }

/* Two-step login (Upwork-like) */
.auth-step{ display: none; }
.auth-step.is-active{ display: block; }

.auth-mini{
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.8;
    color: rgba(15, 23, 42, .55);
}
.auth-mini.is-error{ color: rgba(239, 68, 68, .92); }
.auth-mini.is-ok{ color: rgba(19,88,97,.95); }

.auth-identity{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(15, 23, 42, .02);
    margin-bottom: 14px;
}
.auth-identity__label{
    font-size: 12px;
    color: rgba(15, 23, 42, .55);
}
.auth-identity__value{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(15, 23, 42, .85);
}
.auth-identity__change{
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 12px;
    cursor: pointer;
}

.auth-alt{
    margin-top: 14px;
    padding: 12px;
    border-radius: 14px;
    border: 1px dashed rgba(15, 23, 42, .16);
    background: rgba(15, 23, 42, .03);
}
.auth-alt__msg{
    font-size: 12px;
    line-height: 1.9;
    color: rgba(15, 23, 42, .72);
    margin-bottom: 10px;
}
.auth-alt__actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (max-width: 480px){
    .auth-page{ padding: 28px 0; }
    .auth-card{ padding: 18px 16px 16px; border-radius: 16px; }
    .auth-title{ font-size: 20px; }
}


/* Auth page - notes (scoped) */
.auth-page .auth-note{
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed rgba(15, 23, 42, .18);
    background: rgba(15, 23, 42, .03);
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.9;
    color: rgba(15, 23, 42, .72);
}
.auth-page .auth-note p{ margin: 0; }



/* Auth alerts (scoped) */
.auth-page .auth-alert{
    margin: 10px 0 14px;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.9;
    border: 1px solid rgba(0,0,0,.08);
}
.auth-page .auth-alert--success{
    background: rgba(34, 197, 94, .10);
    border-color: rgba(34, 197, 94, .25);
    color: rgba(15, 23, 42, .92);
}
.auth-page .auth-alert--error{
    background: rgba(239, 68, 68, .08);
    border-color: rgba(239, 68, 68, .22);
    color: rgba(15, 23, 42, .92);
}

/* Auth password rules + strength (scoped) */
.auth-page .auth-rules{
    margin: 6px 0 14px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(15, 23, 42, .03);
    border: 1px dashed rgba(15, 23, 42, .16);
}
.auth-page .auth-rules__title{
    font-size: 12px;
    color: rgba(15, 23, 42, .75);
    margin-bottom: 6px;
}
.auth-page .auth-rules__list{
    margin: 0;
    padding: 0 16px 0 0;
    font-size: 12px;
    line-height: 1.9;
    color: rgba(15, 23, 42, .68);
}
.auth-page .auth-rules__list li{
    margin: 0;
    list-style: disc;
}
.auth-page .auth-rules__list li.is-ok{
    color: rgba(19,88,97,.95);
    font-weight: 600;
}
.auth-page .auth-strength{
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.auth-page .auth-strength__bar{
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: rgba(15,23,42,.10);
    overflow: hidden;
}
.auth-page .auth-strength__fill{
    display:block;
    height: 100%;
    width: 0%;
    background: rgba(19,88,97,.95);
    border-radius: 999px;
    transition: width .18s ease;
}
.auth-page .auth-strength__text{
    font-size: 12px;
    color: rgba(15, 23, 42, .70);
    min-width: 92px;
    text-align: left;
}



/* =========================
   AUTH (Upwork-like) OVERRIDES
   Scoped to .auth-page to avoid affecting other pages
   ========================= */
.auth-page{
  min-height: calc(100vh - 120px);
  background: #f7f7f7;
}
.auth-page::before,
.auth-page::after{ display:none !important; }

.auth-wrap{ width: 100%; display:flex; justify-content:center; padding: 24px 16px; }
.auth-card{
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: none;
  padding: 22px;
}

.auth-brand{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom: 14px; }
.auth-brand__mark{
  width: 34px; height: 34px; border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(20,168,0,.12);
  color: #0f172a;
  font-weight: 800;
}
.auth-brand__text{ font-weight: 800; color:#0f172a; }

.auth-title{ text-align:center; font-size: 18px; margin: 0 0 6px; }
.auth-subtitle{ text-align:center; margin: 0 0 16px; font-size: 13px; color: rgba(15,23,42,.70); }

.auth-divider{
  position: relative;
  margin: 14px 0;
  text-align:center;
  color: rgba(15,23,42,.55);
  font-size: 12px;
}
.auth-divider::before{
  content:"";
  position:absolute;
  left:0; right:0; top:50%;
  height:1px;
  background: rgba(15,23,42,.10);
}
.auth-divider span{
  position: relative;
  padding: 0 10px;
  background: #fff;
}

.auth-field{ margin: 10px 0 12px; }
.auth-label{ display:block; margin: 0 0 6px; font-size: 13px; color:#0f172a; }
.auth-input{
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.16);
  background: #fff;
  outline: none;
}
.auth-input:focus{
  border-color: rgba(20,168,0,.55);
  box-shadow: 0 0 0 3px rgba(20,168,0,.12);
}
.auth-field__error{ margin-top:6px; font-size: 12px; color: #b42318; min-height: 16px; }

.auth-btn{
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: 1px solid transparent;
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  font-weight: 700;
}
.auth-btn--primary{
  background: #14a800;
  color: #fff;
}
.auth-btn--primary:hover{ filter: brightness(.98); }
.auth-btn--ghost{
  background: #fff;
  border-color: rgba(15,23,42,.14);
  color: #0f172a;
}
.auth-btn.is-loading .auth-btn__text{ opacity: .65; }
.auth-btn__spinner{
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,.95);
  display:none;
  animation: authSpin .7s linear infinite;
}
.auth-btn.is-loading .auth-btn__spinner{ display:inline-block; }
@keyframes authSpin{ to { transform: rotate(360deg);} }

.auth-social-btn{
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.14);
  background: #fff;
  color: #0f172a;
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  text-decoration:none;
  font-weight: 700;
}
.auth-social-btn__icon{
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex: 0 0 18px !important;
}
.auth-social-btn:hover{ background: rgba(15,23,42,.02); }

.auth-step{ display:none; }
.auth-step.is-active{ display:block; }

.auth-identity{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 10px;
  background: rgba(15,23,42,.02);
  margin-bottom: 12px;
}
.auth-identity__email{ font-weight: 800; color:#0f172a; direction:ltr; }
.auth-identity__change{ font-size: 12px; }

.auth-password{ position: relative; }
.auth-eye{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  left: 10px;
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  cursor: pointer;
}
.auth-eye__dot{
  display:block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(15,23,42,.35);
  margin: 0 auto;
}
.auth-eye.is-on .auth-eye__dot{ background: #14a800; }

.auth-row{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin: 6px 0 12px; }
.auth-check{ display:flex; align-items:center; gap: 8px; font-size: 13px; color: rgba(15,23,42,.75); }
.auth-check input{ width: 16px; height: 16px; }

.auth-help--center{ text-align:center; margin-top: 12px; }
.auth-link{ color: #0f172a; text-decoration: none; }
.auth-link:hover{ text-decoration: underline; }

.auth-alt{ margin-top: 14px; border-top: 1px solid rgba(15,23,42,.10); padding-top: 14px; }
.auth-alt__title{ font-weight: 800; margin-bottom: 6px; }
.auth-alt__desc{ font-size: 13px; color: rgba(15,23,42,.70); margin-bottom: 10px; }

@media (max-width: 480px){
  .auth-card{ border-radius: 14px; padding: 18px; }
}


/* =======================================================
   Phase 3: Static Pages (Upwork structure + Fiverr vibe)
   Safe: affects only the new .static-page--pro wrapper.
   ======================================================= */

.static-page--pro{
  padding: 0 0 56px;
  /* Break out of layout .container wrapper to allow full-width hero/backgrounds */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

.static-hero{
  padding: 28px 0 18px;
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(79,70,229,.18), transparent 60%),
    radial-gradient(900px 500px at 20% 0%, rgba(6,182,212,.14), transparent 55%),
    linear-gradient(180deg, #F9FAFF 0%, rgba(255,255,255,0) 100%);
  border-bottom: 1px solid rgba(17,24,39,.06);
}

.static-hero__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: stretch;
}

.static-hero__content{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 18px;
  padding: 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(17,24,39,.06);
}

.static-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(17,24,39,.72);
  background: rgba(79,70,229,.08);
  border: 1px solid rgba(79,70,229,.14);
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.static-hero__title{
  margin: 0 0 8px;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.25;
  letter-spacing: -.2px;
}

.static-hero__subtitle{
  margin: 0 0 14px;
  color: rgba(17,24,39,.70);
  font-size: 14px;
  line-height: 1.9;
}

.static-hero__actions{ display:flex; flex-wrap:wrap; gap: 10px; }

.btn.btn--static-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 900;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn.btn--static-cta:hover{ transform: translateY(-1px); box-shadow: 0 14px 26px rgba(17,24,39,.12); }

.btn--static-cta-primary{ background: var(--primary); color: #fff; }
.btn--static-cta-primary:hover{ opacity: .96; }
.btn--static-cta-accent{ background: #14a800; color: #fff; }
.btn--static-cta-accent:hover{ opacity: .96; }
.btn--static-cta-outline{ background: rgba(255,255,255,.8); color: var(--text-main); border-color: rgba(17,24,39,.12); }

.static-hero__card{
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.08);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 40px rgba(17,24,39,.06);
  padding: 18px;
}

.static-hero__cardTitle{
  font-weight: 900;
  margin-bottom: 8px;
}

.static-hero__cardText{
  color: rgba(17,24,39,.70);
  line-height: 1.9;
  font-size: 13px;
}

.static-hero__cardBadges{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 12px; }
.static-hero__cardBadges .badge{
  display:inline-flex;
  font-size: 12px;
  font-weight: 800;
  color: rgba(17,24,39,.78);
  background: rgba(6,182,212,.10);
  border: 1px solid rgba(6,182,212,.18);
  padding: 6px 10px;
  border-radius: 999px;
}

.static-sectionHead{ margin-bottom: 14px; }
.static-sectionHead__title{
  margin: 0 0 6px;
  font-size: 18px;
}
.static-sectionHead__desc{ margin: 0; color: rgba(17,24,39,.66); font-size: 13px; line-height: 1.9; }

.static-features{ padding: 22px 0; }
.static-features__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.static-featureCard{
  background: #fff;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 14px 28px rgba(17,24,39,.05);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.static-featureCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(17,24,39,.10);
  border-color: rgba(79,70,229,.18);
}

.static-featureCard__icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(79,70,229,.10);
  border: 1px solid rgba(79,70,229,.16);
  margin-bottom: 10px;
}

.static-featureCard__icon .iconDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--primary);
}

/* Icons (Phase 3.1 polish) */
.static-featureCard__icon .static-iconSvg{ display:block; }
.static-featureCard__icon .static-iconEmoji{ font-size: 18px; line-height: 1; }
.static-featureCard__icon i{ font-size: 18px; line-height: 1; }
.static-featureCard__icon .static-iconText{ font-size: 12px; font-weight: 800; color: rgba(17,24,39,.75); }

.static-featureCard__title{ font-weight: 900; margin-bottom: 6px; }
.static-featureCard__text{ color: rgba(17,24,39,.68); line-height: 1.9; font-size: 13px; }

.static-content{ padding: 10px 0 18px; }
.static-content__wrap{
  background: #fff;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 20px;
  box-shadow: 0 18px 38px rgba(17,24,39,.06);
  padding: 18px;
}
.static-content__head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 10px; margin-bottom: 12px; }
.static-content__title{ margin:0; font-size: 18px; }
.static-content__meta{ display:flex; align-items:center; gap: 8px; color: rgba(17,24,39,.60); font-size: 12px; }
.static-content__meta .dot{ width: 8px; height: 8px; border-radius: 999px; background: rgba(20,168,0,.9); }
.static-content__body{ line-height: 2.05; }

.static-trust{ padding: 18px 0 10px; }
.static-trust__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.static-trustCard{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 14px 28px rgba(17,24,39,.05);
}
.static-trustCard__icon{ font-size: 20px; margin-bottom: 8px; }
.static-trustCard__title{ font-weight: 900; margin-bottom: 6px; }
.static-trustCard__text{ color: rgba(17,24,39,.68); line-height: 1.9; font-size: 13px; }

.static-finalCta{ padding: 18px 0 0; }
.static-finalCta__box{
  background: linear-gradient(135deg, rgba(79,70,229,.10) 0%, rgba(20,168,0,.08) 100%);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 22px;
  padding: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.static-finalCta__title{ font-weight: 900; margin-bottom: 6px; }
.static-finalCta__text{ color: rgba(17,24,39,.70); font-size: 13px; line-height: 1.9; }
.static-finalCta__actions{ display:flex; align-items:center; gap: 10px; }

@media (max-width: 980px){
  .static-hero__grid{ grid-template-columns: 1fr; }
  .static-features__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .static-trust__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .static-finalCta__box{ flex-direction: column; align-items: stretch; }
}

@media (max-width: 520px){
  .static-features__grid{ grid-template-columns: 1fr; }
  .static-trust__grid{ grid-template-columns: 1fr; }
  .static-content__head{ flex-direction: column; align-items: flex-start; }
}



/* === Profile Progress buttons: Frost Forest C32 (uniform, full-width) === */
.db-actions--profile{
  display:flex;
  gap:12px;
  width:100%;
  margin-top:14px;
}

.db-actions--profile .btn-frost{
  flex:1 1 0;
  width:100%;
  min-width:0;
  height:56px !important;
  border-radius:18px !important;

  /* Frost Forest C32 */
  --c1:#DCFCE7;
  --c2:#14532D;
  --c3:#16A34A;

  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:0 12px !important;
  font-weight:800 !important;
  text-decoration:none !important;

  /* text */
  color:#fff !important;

  /* glossy frost */
  background: linear-gradient(145deg, var(--c1), var(--c2) 55%, var(--c3)) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 14px 30px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -12px 18px rgba(0,0,0,.22) !important;

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

.db-actions--profile .btn-frost::before{
  content:"";
  position:absolute;
  top:7px; left:10px; right:10px;
  height:45%;
  border-radius:14px;
  background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none;
}

.db-actions--profile .btn-frost:hover{
  transform: translateY(-2px);
  filter: saturate(1.05);
  box-shadow:
    0 18px 36px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -14px 22px rgba(0,0,0,.25) !important;
}

.db-actions--profile .btn-frost:active{
  transform: translateY(0);
}

@media (max-width: 520px){
  .db-actions--profile{ flex-direction:column; }
  .db-actions--profile .btn-frost{ height:54px !important; }
}
/* === End Profile Progress buttons === */


/* ===== Terms page CTA section styling (ONLY .sec.cta) ===== */
.sec.cta{
  background:
    radial-gradient(120% 80% at 90% 0%, rgba(190,225,240,.35), transparent 60%),
    linear-gradient(135deg, #eef4f7 0%, #f7fafc 45%, #eef6f3 100%);
  border-radius: 18px;
  padding: 48px 40px;
}
.sec.cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,0));
  pointer-events:none;
}
@media(max-width:768px){
  .sec.cta{padding:32px 20px;}
}
/* ===== END Terms CTA ===== */


/* ===== FIX: ensure CTA background applies ===== */
.sec.cta{
  position: relative;
  background:
    radial-gradient(120% 90% at 90% 0%, rgba(190,225,240,.45), transparent 60%),
    linear-gradient(135deg, #eef3f7 0%, #f4f7fb 45%, #edf3f0 100%) !important;
}
.sec.cta > *{
  position: relative;
  z-index: 1;
}
/* ===== END FIX ===== */


/* ===== V7: Terms-v1 CTA selector fix (ONLY terms page bottom CTA) ===== */
/* DOM (terms template): <div class="terms-v1"> ... <div class="sec cta" id="cta"> */
.terms-v1 .sec.cta#cta{
  position: relative !important;
  background:
    radial-gradient(140% 110% at 90% 10%, rgba(170,210,230,.55), transparent 62%),
    radial-gradient(120% 120% at 10% 90%, rgba(190,230,210,.32), transparent 60%),
    linear-gradient(135deg, #eef3f7 0%, #f5f8fc 45%, #eef4f3 100%) !important;
  border: 1px solid rgba(20,40,60,.06);
  box-shadow: 0 18px 40px rgba(10,20,30,.06);
  border-radius: 22px;
  overflow: hidden;
}
.terms-v1 .sec.cta#cta::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0));
  pointer-events:none;
}
.terms-v1 .sec.cta#cta > *{
  position: relative;
  z-index: 1;
}
/* ===== END V7 ===== */

/* =========================================================
   UI Font Lock (Global)
   Rule: All UI boxes/components must use the site font.
   Prevent browser default fonts on form controls.
   ========================================================= */
:root{
  --site-font: 'Vazirmatn', Tahoma, Arial, sans-serif;
}

body{
  font-family: var(--site-font);
}

/* Force form controls to inherit the site font (fixes select/input default font issues) */
button,
input,
select,
textarea,
optgroup,
option{
  font-family: inherit !important;
}

/* Common UI wrappers */
.card,
.card-title,
.card-body,
.box,
.panel,
.alert,
.badge,
.modal,
.modal *{
  font-family: inherit;
}

/* Popular enhanced selects (safe no-op if unused) */
.select2-container,
.select2-container *,
.choices,
.choices *{
  font-family: inherit !important;
}

/* ==========================
   Ultimate Layout Builder — Layout Engine styles (Category Pages)
   Phase 2: apply Row/Col/Slot spacing + width + background tokens
   Contract v1.3: keep UI clean + font inherit
   ========================== */
.ulb-page{
  width: 100%;
  box-sizing: border-box;
}

/*
  IMPORTANT:
  Some pages may not include the `.category-page` wrapper (or may include nested containers).
  The ULB layout MUST still render rows/cols exactly as designed.
  Therefore we provide a global fallback for `.ulb-*` classes, and keep `.category-page` rules
  for higher specificity where needed.
*/
/* ================================
   ULB Layout Engine (Category Pages)
   Root cause fix: Flex + gap can exceed 100% and force wrapping, causing
   columns to stack under each other (Admin Builder ≠ Preview ≠ Front).
   Use a true 12-column CSS Grid to guarantee identical architecture.
   ================================ */
.ulb-row-inner{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--ulb-row-gap, 16px);
  row-gap: var(--ulb-row-gap, 16px);
  box-sizing: border-box;
}

.ulb-width-container .ulb-row-inner{
  max-width: var(--site-max, 1360px);
  margin: 0 auto;
  padding: 0 var(--site-gutter, 16px);
}

.ulb-width-full .ulb-row-inner{
  max-width: none;
  margin: 0;
  padding: 0 var(--site-gutter, 16px);
}

.ulb-col{
  box-sizing: border-box;
  padding: var(--ulb-pt, 0) var(--ulb-pr, 0) var(--ulb-pb, 0) var(--ulb-pl, 0);
  /* Critical for Grid: allow content to shrink inside columns */
  min-width: 0;
  /* Default span in case inline style missing */
  grid-column: span var(--ulb-span, 12);
}

/*
  ULB responsive stacking strategy (global, safe):

  Problem:
  - On desktop, when DevTools is docked or the available container width becomes narrow,
    viewport-based media queries can "lie" (still large viewport) while the ULB grid
    actually has a small inline-size. This caused rows to feel like "full-row" even
    when the author intended a multi-column layout.

  Solution:
  - Keep a very small viewport fallback.
  - Prefer JS-driven, container-width stacking via `.ulb-row-inner.ulb-stack`.
    (See public/assets/js/app.js: ResizeObserver-based ULB stack controller.)
*/

/* JS-driven stack class (container-width based) */
.ulb-row-inner.ulb-stack{ grid-template-columns: 1fr !important; }
.ulb-row-inner.ulb-stack > .ulb-col{ grid-column: 1 / -1 !important; }

/* Viewport fallback (only for very small screens when JS is disabled) */
@media (max-width: 520px){
  .ulb-row-inner{ grid-template-columns: 1fr !important; }
  .ulb-col{ grid-column: 1 / -1 !important; }
}

/* Admin Preview Mobile mode: simulate mobile stacking even on desktop viewport */
.ulb-device-mobile .ulb-row-inner{ grid-template-columns: 1fr !important; }
.ulb-device-mobile .ulb-col{ grid-column: 1 / -1 !important; }

/* Tablet preview hook (admin preview). We mainly rely on stage width constraint,
   but this class remains as an explicit switch for future responsive tweaks. */
.ulb-device-tablet .ulb-row-inner{ max-width:100%; }

/*
  Legacy viewport stacking for ULB output kept as a very-small fallback.
  Main behavior is handled by `.ulb-row-inner.ulb-stack`.
*/
@media (max-width: 520px){
  .ulb-page .ulb-row-inner{ grid-template-columns: 1fr !important; }
  .ulb-page .ulb-col{ grid-column: 1 / -1 !important; }
}

.ulb-slot{
  box-sizing: border-box;
  padding-top: var(--ulb-st, 0);
  padding-bottom: var(--ulb-sb, 0);
  border-radius: 18px;
  /* Grid safety: never let internal wrappers cause column overflow */
  min-width: 0;
  max-width: 100%;
}

.ulb-sec{
  margin-top: var(--ulb-st, 0);
  margin-bottom: var(--ulb-sb, 0);
  /* Critical: sections must respect the column width in all layouts */
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Text/content overflow guard inside ULB (prevents "full-row" looking text in narrow columns) */
.ulb-sec :where(h1,h2,h3,h4,h5,h6,p,li,blockquote,pre,code,small,strong,em,span,a){
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Media should also stay within the column and scale responsively */
.ulb-sec :where(img,video,iframe,embed,object,svg,canvas){
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.ulb-section{
  box-sizing: border-box;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 26px rgba(0,0,0,.04);
  /* Grid safety: section blocks should never exceed their column */
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.category-page .ulb-page{
  width: 100%;
  box-sizing: border-box;
}

.category-page .ulb-row{
  box-sizing: border-box;
  padding: var(--ulb-pt, 0) var(--ulb-pr, 0) var(--ulb-pb, 0) var(--ulb-pl, 0);
  margin: 18px 0;
  border-radius: 20px;
}

.category-page .ulb-row-inner{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--ulb-row-gap, 16px);
  row-gap: var(--ulb-row-gap, 16px);
  box-sizing: border-box;
}

.category-page .ulb-width-container .ulb-row-inner{
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--site-gutter);
}

.category-page .ulb-width-full .ulb-row-inner{
  max-width: none;
  margin: 0;
  padding: 0 var(--site-gutter);
}

.category-page .ulb-col{
  box-sizing: border-box;
  padding: var(--ulb-pt, 0) var(--ulb-pr, 0) var(--ulb-pb, 0) var(--ulb-pl, 0);
  min-width: 0;
  grid-column: span var(--ulb-span, 12);
}

@media (max-width: 768px){
  .category-page .ulb-row-inner{ grid-template-columns: 1fr; }
  .category-page .ulb-col{ grid-column: 1 / -1; }
}

.category-page .ulb-align-start{ align-self: flex-start; }
.category-page .ulb-align-center{ align-self: center; }
.category-page .ulb-align-end{ align-self: flex-end; }
.category-page .ulb-align-stretch{ align-self: stretch; }

.category-page .ulb-slot{
  box-sizing: border-box;
  padding-top: var(--ulb-st, 0);
  padding-bottom: var(--ulb-sb, 0);
  border-radius: 18px;
}

.category-page .ulb-sec{
  margin-top: var(--ulb-st, 0);
  margin-bottom: var(--ulb-sb, 0);
}

.category-page .ulb-section{
  box-sizing: border-box;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 26px rgba(0,0,0,.04);
}

.category-page .ulb-muted{ color: rgba(17,24,39,.55); }

/* Phase 3 — Section Library additions */
.category-page .ulb-title{margin:0 0 10px;font-size:18px;line-height:1.5}
.category-page .ulb-kicker{font-size:12px;opacity:.75;margin-bottom:6px}
.category-page .ulb-subtitle{margin:0;opacity:.75;line-height:1.8}

.category-page .ulb-grid{display:grid;gap:12px;grid-template-columns:repeat(2, minmax(0,1fr));}
@media (min-width: 992px){
  .category-page .ulb-grid{grid-template-columns:repeat(4, minmax(0,1fr));}
}

.category-page .ulb-card{display:block;text-decoration:none;border:1px solid rgba(17,24,39,.08);border-radius:16px;padding:14px;background:rgba(255,255,255,.9);box-shadow:0 10px 26px rgba(0,0,0,.035)}
.category-page .ulb-card:hover{transform:translateY(-1px)}
.category-page .ulb-card-title{font-weight:600;line-height:1.6}
.category-page .ulb-card-meta{font-size:12px;opacity:.7;margin-top:6px}

.category-page .ulb-chips{display:flex;flex-wrap:wrap;gap:10px}
.category-page .ulb-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid rgba(17,24,39,.1);background:rgba(255,255,255,.92);text-decoration:none;font-size:13px;line-height:1.2}
.category-page .ulb-chip:hover{background:rgba(255,255,255,1)}

/* Background modes (token-driven) */
.category-page .ulb-bg-surface, .ulb-page .ulb-bg-surface{ background: var(--surface); }
.category-page .ulb-bg-soft, .ulb-page .ulb-bg-soft{ background: var(--primary-soft); }
.category-page .ulb-bg-primary, .ulb-page .ulb-bg-primary{ background: rgba(79,70,229,.10); }
.category-page .ulb-bg-gradient, .ulb-page .ulb-bg-gradient{ background: linear-gradient(135deg, rgba(79,70,229,.10), rgba(6,182,212,.10)); }

/* Token overrides (safe subset). Data tokens come from JSON but are sanitized in PHP. */
.category-page [data-bg-token="surface"], .ulb-page [data-bg-token="surface"]{ background: var(--surface); }
.category-page [data-bg-token="page"], .ulb-page [data-bg-token="page"]{ background: var(--background-page); }
.category-page [data-bg-token="primary_soft"], .ulb-page [data-bg-token="primary_soft"]{ background: var(--primary-soft); }
.category-page [data-bg-token="primary"], .ulb-page [data-bg-token="primary"]{ background: rgba(79,70,229,.10); }
.category-page [data-bg-token="accent"], .ulb-page [data-bg-token="accent"]{ background: rgba(6,182,212,.10); }

/*
  CMS (/p/...) — Style Tokens Bridge (v2)
  -------------------------------------------------------------------
  Problem: Some section templates output their own `.ulb-section` wrapper
  (nested inside the renderer wrapper `.ulb-sec > .ulb-section`).
  The token styles must therefore apply to BOTH the wrapper and the
  first nested `.ulb-section` to be visible.
*/

.ulb-page .ulb-sec[data-bg-token] > .ulb-section,
.ulb-page .ulb-sec[data-bg-token] > .ulb-section > .ulb-section{
  background: var(--background-page, #fff) !important;
}

.ulb-page .ulb-sec[data-bg-token="brand"] > .ulb-section,
.ulb-page .ulb-sec[data-bg-token="brand"] > .ulb-section > .ulb-section{
  background: rgba(91, 143, 249, 0.10) !important;
}

.ulb-page .ulb-sec[data-bg-token="accent"] > .ulb-section,
.ulb-page .ulb-sec[data-bg-token="accent"] > .ulb-section > .ulb-section{
  background: rgba(34, 197, 94, 0.12) !important;
}

.ulb-page .ulb-sec[data-bg-token="surface"] > .ulb-section,
.ulb-page .ulb-sec[data-bg-token="surface"] > .ulb-section > .ulb-section{
  background: rgba(255, 255, 255, 0.70) !important;
}

.ulb-page .ulb-sec[data-radius-token] > .ulb-section,
.ulb-page .ulb-sec[data-radius-token] > .ulb-section > .ulb-section{
  border-radius: 10px !important;
  overflow: hidden; /* keep radius visible even if inner has backgrounds */
}

.ulb-page .ulb-sec[data-radius-token="md"] > .ulb-section,
.ulb-page .ulb-sec[data-radius-token="md"] > .ulb-section > .ulb-section{
  border-radius: 14px !important;
}

.ulb-page .ulb-sec[data-radius-token="lg"] > .ulb-section,
.ulb-page .ulb-sec[data-radius-token="lg"] > .ulb-section > .ulb-section{
  border-radius: 18px !important;
}

.ulb-page .ulb-sec[data-radius-token="xl"] > .ulb-section,
.ulb-page .ulb-sec[data-radius-token="xl"] > .ulb-section > .ulb-section{
  border-radius: 22px !important;
}

.ulb-page .ulb-sec[data-shadow-token] > .ulb-section,
.ulb-page .ulb-sec[data-shadow-token] > .ulb-section > .ulb-section{
  box-shadow: none !important;
}

.ulb-page .ulb-sec[data-shadow-token="sm"] > .ulb-section,
.ulb-page .ulb-sec[data-shadow-token="sm"] > .ulb-section > .ulb-section{
  box-shadow: 0 8px 22px rgba(0,0,0,.08) !important;
}

.ulb-page .ulb-sec[data-shadow-token="md"] > .ulb-section,
.ulb-page .ulb-sec[data-shadow-token="md"] > .ulb-section > .ulb-section{
  box-shadow: 0 12px 30px rgba(0,0,0,.12) !important;
}

.ulb-page .ulb-sec[data-shadow-token="lg"] > .ulb-section,
.ulb-page .ulb-sec[data-shadow-token="lg"] > .ulb-section > .ulb-section{
  box-shadow: 0 18px 48px rgba(0,0,0,.14) !important;
}

.ulb-page .ulb-sec[data-text-token] > .ulb-section,
.ulb-page .ulb-sec[data-text-token] > .ulb-section > .ulb-section{
  color: #0f172a !important;
}

.ulb-page .ulb-sec[data-text-token="accent"] > .ulb-section,
.ulb-page .ulb-sec[data-text-token="accent"] > .ulb-section > .ulb-section{
  color: #14532d !important;
}

.ulb-page .ulb-sec[data-text-token="muted"] > .ulb-section,
.ulb-page .ulb-sec[data-text-token="muted"] > .ulb-section > .ulb-section{
  color: #475569 !important;
}

/* Accent token: link / interactive color inside tokenized blocks */
.ulb-page .ulb-sec[data-accent-token="accent"] .ulb-section a{
  color: #2563eb;
}

.ulb-page .ulb-sec[data-accent-token="brand"] .ulb-section a{
  color: #5b8ff9;
}


/* Phase 15 — Additional Design Token hooks (scoped to section wrapper) */
.category-page [data-radius-token="none"], .ulb-page [data-radius-token="none"]{ border-radius:0; overflow:visible; }
.category-page [data-radius-token="sm"], .ulb-page [data-radius-token="sm"]{ border-radius:var(--radius-sm,10px); overflow:hidden; }
.category-page [data-radius-token="md"], .ulb-page [data-radius-token="md"]{ border-radius:var(--radius-md,14px); overflow:hidden; }
.category-page [data-radius-token="lg"], .ulb-page [data-radius-token="lg"]{ border-radius:var(--radius-lg,18px); overflow:hidden; }
.category-page [data-radius-token="xl"], .ulb-page [data-radius-token="xl"]{ border-radius:22px; overflow:hidden; }

.category-page [data-shadow-token="none"], .ulb-page [data-shadow-token="none"]{ box-shadow:none; }
.category-page [data-shadow-token="sm"], .ulb-page [data-shadow-token="sm"]{ box-shadow:0 6px 16px rgba(0,0,0,.08); }
.category-page [data-shadow-token="md"], .ulb-page [data-shadow-token="md"]{ box-shadow:0 10px 24px rgba(0,0,0,.10); }
.category-page [data-shadow-token="lg"], .ulb-page [data-shadow-token="lg"]{ box-shadow:0 16px 40px rgba(0,0,0,.14); }


/* Color token hook (scoped). Sets a CSS variable for section accents. */
.category-page [data-color-token="primary"], .ulb-page [data-color-token="primary"]{ --ulb-accent: var(--color-primary, var(--primary)); }
.category-page [data-color-token="accent"], .ulb-page [data-color-token="accent"]{ --ulb-accent: var(--color-accent, var(--accent)); }
.category-page [data-color-token="surface"], .ulb-page [data-color-token="surface"]{ --ulb-accent: var(--color-surface, var(--surface)); }
.category-page [data-color-token="text"], .ulb-page [data-color-token="text"]{ --ulb-accent: var(--color-text, var(--text)); }



/* Phase 20 — Scoped Color Overrides (Style.colors) */
.category-page .ulb-sec, .ulb-page .ulb-sec{ color: var(--ulb-color-text, inherit); }
.category-page .ulb-sec h1,
.ulb-page .ulb-sec h1,
.category-page .ulb-sec h2,
.ulb-page .ulb-sec h2,
.category-page .ulb-sec h3,
.ulb-page .ulb-sec h3,
.category-page .ulb-sec h4,
.ulb-page .ulb-sec h4,
.category-page .ulb-sec .ulb-sec-title, .ulb-page .ulb-sec .ulb-sec-title{
  color: var(--ulb-color-heading, var(--ulb-accent, var(--ulb-color-text, inherit)));
}
.category-page .ulb-sec a, .ulb-page .ulb-sec a{
  color: var(--ulb-color-link, var(--ulb-accent, var(--ulb-color-text, inherit)));
}/* ===== Phase 25 — Apply semantic color vars to common ULB buttons/borders (scoped) =====
   We keep this conservative:
   - If overrides are not set, buttons keep their existing look (via fallbacks).
   - If overrides are set, we use them for background/text/border colors.
*/

/* Common button-like elements used by ULB sections */
.category-page .ulb-cta-btn,
.category-page .ulb-cta-banner-btn,
.category-page .ulb-btn,
.category-page .cat-s28__btn{
  background: var(--ulb-color-btn-bg, transparent);
  color: var(--ulb-color-btn-text, inherit);
  border-color: var(--ulb-color-border, rgba(0,0,0,.12));
}

/* Primary style fallback uses section accent when no explicit button bg is set */
.category-page .ulb-btn.ulb-btn-primary{
  background: var(--ulb-color-btn-bg, var(--ulb-accent, var(--primary)));
  color: var(--ulb-color-btn-text, #fff);
  border-color: var(--ulb-color-border, rgba(0,0,0,.0));
}

/* Outline style keeps transparent bg but can still inherit accent/text overrides */
.category-page .ulb-btn.ulb-btn-outline{
  background: transparent;
  color: var(--ulb-color-btn-text, var(--ulb-accent, inherit));
  border-color: var(--ulb-color-border, rgba(0,0,0,.14));
}

/* Border override is also useful for cards/chips */
.category-page .ulb-card,
.category-page .ulb-chip{
  border-color: var(--ulb-color-border, rgba(17,24,39,.1));
}

.category-page [data-text-token="default"]{ color:var(--text); }
.category-page [data-text-token="muted"]{ color:var(--text-muted); }
.category-page [data-text-token="primary"]{ color:var(--primary); }



.category-page .ulb-cta-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.category-page .ulb-cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  text-decoration: none;
  font: inherit;
}

/* ===== ULB S03 (CTA Strip) — V2 Global SaaS ===== */
.ulb-cta-v2{
  position: relative;
  border-radius: 18px;
  padding: 0;
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
  font-family: inherit;
  direction: rtl;
}
.ulb-cta-v2 .ulb-cta-bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
}
.ulb-cta-v2 .ulb-cta-overlay{ position:absolute; inset:0; background: rgba(0,0,0,.65); }
.ulb-cta-v2 .ulb-cta-container{
  position: relative;
  display:flex;
  align-items:center;
  /* Avoid huge blank space on wide screens (space-between can create a large void)
     and let content naturally take available width. */
  justify-content:flex-start;
  gap:18px;
  padding: 18px 18px;
}

/* SaaS layout: when media exists, use a grid so we never create "empty void" gaps */
.ulb-cta-v2.has-media .ulb-cta-container{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.ulb-cta-v2.has-media.media-left .ulb-cta-container{ grid-template-columns: auto minmax(0, 1fr); }

/* Make media order deterministic regardless of RTL/LTR direction */
.ulb-cta-v2.media-left .ulb-cta-media{ order: 0; }
.ulb-cta-v2.media-left .ulb-cta-content{ order: 1; }
.ulb-cta-v2.media-right .ulb-cta-content{ order: 0; }
.ulb-cta-v2.media-right .ulb-cta-media{ order: 1; }
.ulb-cta-v2.maxw-md .ulb-cta-container{ max-width: 720px; margin: 0 auto; }
.ulb-cta-v2.maxw-lg .ulb-cta-container{ max-width: 960px; margin: 0 auto; }
.ulb-cta-v2.maxw-xl .ulb-cta-container{ max-width: 1120px; margin: 0 auto; }
.ulb-cta-v2.maxw-full .ulb-cta-container{ max-width: none; }

.ulb-cta-v2.py-0 .ulb-cta-container{ padding-top:0; padding-bottom:0; }
.ulb-cta-v2.py-sm .ulb-cta-container{ padding-top:10px; padding-bottom:10px; }
.ulb-cta-v2.py-md .ulb-cta-container{ padding-top:14px; padding-bottom:14px; }
.ulb-cta-v2.py-lg .ulb-cta-container{ padding-top:18px; padding-bottom:18px; }
.ulb-cta-v2.py-xl .ulb-cta-container{ padding-top:24px; padding-bottom:24px; }

.ulb-cta-v2 .ulb-cta-content{ display:flex; flex-direction:column; gap:10px; min-width: 0; flex: 1 1 auto; }
.ulb-cta-v2 .ulb-cta-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  width: fit-content;
  font: inherit; font-weight: 800; line-height: 1;
}
.ulb-cta-v2 .ulb-cta-badge i{ font-size: 14px; }
.ulb-cta-v2 .ulb-cta-subtitle{ opacity: .85; font: inherit; font-weight: 800; }

/* Typography sizing hooks */
.ulb-cta-v2.title-xl .ulb-cta-title{ font-size: 26px; }
.ulb-cta-v2.title-lg .ulb-cta-title{ font-size: 22px; }
.ulb-cta-v2.title-md .ulb-cta-title{ font-size: 18px; }
.ulb-cta-v2.subtitle-lg .ulb-cta-subtitle{ font-size: 14px; }
.ulb-cta-v2.subtitle-md .ulb-cta-subtitle{ font-size: 13px; }
.ulb-cta-v2.subtitle-sm .ulb-cta-subtitle{ font-size: 12px; }
.ulb-cta-v2.desc-md .ulb-cta-desc{ font-size: 14px; }
.ulb-cta-v2.desc-sm .ulb-cta-desc{ font-size: 13px; }

.ulb-cta-v2 .ulb-cta-title{ font: inherit; font-weight: 900; line-height: 1.4; margin:0; }
.ulb-cta-v2 .ulb-cta-desc{ font: inherit; line-height: 1.9; opacity: .9; max-width: 60ch; }

/* Alignment */
.ulb-cta-v2.align-right .ulb-cta-content{ text-align: right; }
.ulb-cta-v2.align-center .ulb-cta-content{ text-align: center; }
.ulb-cta-v2.align-left .ulb-cta-content{ text-align: left; }
.ulb-cta-v2.align-center .ulb-cta-actions{ justify-content: center; }
.ulb-cta-v2.align-left .ulb-cta-actions{ justify-content: flex-start; }
.ulb-cta-v2.align-right .ulb-cta-actions{ justify-content: flex-start; }

/* Variants (SaaS) */
.ulb-cta-v2.variant-glass{ background: rgba(255,255,255,.55); border-color: rgba(0,0,0,.08); }
.ulb-cta-v2.variant-soft{ background: rgba(255,255,255,.85); }
.ulb-cta-v2.variant-primary{ background: rgba(255,255,255,.78); }
.ulb-cta-v2.variant-accent{ background: rgba(255,255,255,.82); }
.ulb-cta-v2.variant-dark{ background: rgba(17,24,39,.92); border-color: rgba(255,255,255,.10); color: rgba(255,255,255,.92); }
.ulb-cta-v2.variant-dark .ulb-cta-desc{ opacity: .88; }
.ulb-cta-v2.variant-dark .ulb-cta-badge{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.90); }

/* Button polish */
.ulb-cta-v2 .ulb-cta-btn{ box-shadow: 0 10px 24px rgba(0,0,0,.08); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease; }
.ulb-cta-v2 .ulb-cta-btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,.12); }
.ulb-cta-v2 .ulb-cta-btn:active{ transform: translateY(0px); box-shadow: 0 10px 24px rgba(0,0,0,.10); }
.ulb-cta-v2 .btn-outline{ background: rgba(255,255,255,.65); }
.ulb-cta-v2.variant-dark .btn-outline{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.92); }

/* Media polish */
.ulb-cta-v2 .ulb-cta-media{ box-shadow: 0 18px 40px rgba(0,0,0,.12); }

.ulb-cta-v2 .ulb-cta-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 6px; }
.ulb-cta-v2 .ulb-cta-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border: 1px solid rgba(0,0,0,.12);
  text-decoration:none;
  font: inherit;
  font-weight: 900;
  white-space: nowrap;
}
.ulb-cta-v2.btnshape-pill .ulb-cta-btn{ border-radius: 999px; }
.ulb-cta-v2.btnshape-rounded .ulb-cta-btn{ border-radius: 16px; }

.ulb-cta-v2.btnsize-lg .ulb-cta-btn{ padding: 12px 18px; font-size: 15px; }
.ulb-cta-v2.btnsize-md .ulb-cta-btn{ padding: 10px 16px; font-size: 14px; }
.ulb-cta-v2.btnsize-sm .ulb-cta-btn{ padding: 9px 14px; font-size: 13px; }
.ulb-cta-v2 .ulb-cta-btn i{ font-size: 16px; }

/* Button variants */
.ulb-cta-v2 .btn-primary{ background: var(--ulb-accent, rgba(22,163,74,.90)); color: #fff; border-color: rgba(0,0,0,.0); }
.ulb-cta-v2 .btn-soft{ background: rgba(0,0,0,.05); color: var(--ulb-accent, var(--text)); }
.ulb-cta-v2 .btn-outline{ background: transparent; color: var(--ulb-accent, var(--text)); border-color: rgba(0,0,0,.16); }
.ulb-cta-v2 .btn-ghost{ background: transparent; border-color: transparent; color: var(--ulb-accent, var(--text)); padding-left: 8px; padding-right: 8px; }

/* Media */
.ulb-cta-v2 .ulb-cta-media{
  flex: 0 0 auto;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.55);
  width: var(--ulb-media-w, 168px);
  height: var(--ulb-media-h, 112px);
  /* keep admin pixel controls effective (avoid % overrides causing "no effect") */
  max-width: 520px;
  max-height: 420px;
}
.ulb-cta-v2 .ulb-cta-media.radius-sm{ border-radius: 12px; }
.ulb-cta-v2 .ulb-cta-media.radius-md{ border-radius: 14px; }
.ulb-cta-v2 .ulb-cta-media.radius-lg{ border-radius: 16px; }
.ulb-cta-v2 .ulb-cta-media img{ width:100%; height:100%; object-fit: cover; display:block; }

/* Better mobile behavior */
@media (max-width: 720px){
  .ulb-cta-v2.stack-mobile .ulb-cta-container{ display:flex; flex-direction: column; align-items: stretch; }
  .ulb-cta-v2.stack-mobile .ulb-cta-media{ width: 100%; max-width: none; height: 220px; max-height: none; }
  .ulb-cta-v2.stack-mobile .ulb-cta-actions{ justify-content: center; }
  .ulb-cta-v2.align-right .ulb-cta-actions{ justify-content: center; }
}

/* Variants (background feel) */
.ulb-cta-v2.variant-soft{ background: rgba(0,0,0,.03); }
.ulb-cta-v2.variant-primary{ background: rgba(22,163,74,.08); }
.ulb-cta-v2.variant-accent{ background: rgba(99,102,241,.10); }
.ulb-cta-v2.variant-glass{ background: rgba(255,255,255,.55); backdrop-filter: blur(10px); }
.ulb-cta-v2.variant-dark{ background: rgba(0,0,0,.75); color:#fff; border-color: rgba(255,255,255,.10); }
.ulb-cta-v2.variant-dark .ulb-cta-badge{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.12); }
.ulb-cta-v2.variant-dark .ulb-cta-btn.btn-outline{ border-color: rgba(255,255,255,.18); }
.ulb-cta-v2.variant-dark .ulb-cta-btn.btn-soft{ background: rgba(255,255,255,.10); color:#fff; }

/* Align */
.ulb-cta-v2.align-center .ulb-cta-content{ align-items:center; text-align:center; }
.ulb-cta-v2.align-left .ulb-cta-content{ align-items:flex-start; text-align:left; }
.ulb-cta-v2.align-right .ulb-cta-content{ align-items:flex-start; text-align:right; }

/* Responsive stacking */
@media (max-width: 720px){
  .ulb-cta-v2.stack-mobile .ulb-cta-container{ flex-direction: column; align-items: stretch; }
  .ulb-cta-v2.stack-mobile .ulb-cta-media{ width: 100% !important; height: 180px !important; }
  .ulb-cta-v2.title-xl .ulb-cta-title{ font-size: 20px; }
  .ulb-cta-v2.title-lg .ulb-cta-title{ font-size: 18px; }
}

.category-page .ulb-cta-v2{
  position: relative;
  border-radius: 18px;
  padding: 0;
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
  font-family: inherit;
}
.category-page .ulb-cta-v2 .ulb-cta-bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
}
.category-page .ulb-cta-v2 .ulb-cta-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.65);
}
.category-page .ulb-cta-v2 .ulb-cta-container{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding: 18px 18px;
}
.category-page .ulb-cta-v2.maxw-md .ulb-cta-container{ max-width: 720px; margin: 0 auto; }
.category-page .ulb-cta-v2.maxw-lg .ulb-cta-container{ max-width: 960px; margin: 0 auto; }
.category-page .ulb-cta-v2.maxw-xl .ulb-cta-container{ max-width: 1120px; margin: 0 auto; }
.category-page .ulb-cta-v2.maxw-full .ulb-cta-container{ max-width: none; }

.category-page .ulb-cta-v2.py-0 .ulb-cta-container{ padding-top:0; padding-bottom:0; }
.category-page .ulb-cta-v2.py-sm .ulb-cta-container{ padding-top:10px; padding-bottom:10px; }
.category-page .ulb-cta-v2.py-md .ulb-cta-container{ padding-top:14px; padding-bottom:14px; }
.category-page .ulb-cta-v2.py-lg .ulb-cta-container{ padding-top:18px; padding-bottom:18px; }
.category-page .ulb-cta-v2.py-xl .ulb-cta-container{ padding-top:24px; padding-bottom:24px; }

.category-page .ulb-cta-v2 .ulb-cta-content{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width: 0;
}
.category-page .ulb-cta-v2 .ulb-cta-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  width: fit-content;
  font: inherit;
  font-weight: 800;
  line-height: 1;
}
.category-page .ulb-cta-v2 .ulb-cta-badge i{ font-size: 14px; }
.category-page .ulb-cta-v2 .ulb-cta-subtitle{
  opacity: .85;
  font: inherit;
  font-weight: 800;
}
.category-page .ulb-cta-v2 .ulb-cta-title{
  font: inherit;
  font-weight: 900;
  font-size: 20px;
  line-height: 1.4;
}
.category-page .ulb-cta-v2 .ulb-cta-desc{
  font: inherit;
  line-height: 1.9;
  opacity: .9;
  max-width: 60ch;
}

.category-page .ulb-cta-v2 .ulb-cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 6px;
}
.category-page .ulb-cta-v2 .ulb-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  text-decoration:none;
  font: inherit;
  font-weight: 900;
  white-space: nowrap;
}
.category-page .ulb-cta-v2 .ulb-cta-btn i{ font-size: 16px; }

/* Button variants */
.category-page .ulb-cta-v2 .btn-primary{
  background: var(--ulb-accent, rgba(22,163,74,.90));
  color: #fff;
  border-color: rgba(0,0,0,.0);
}
.category-page .ulb-cta-v2 .btn-soft{
  background: rgba(0,0,0,.05);
  color: var(--ulb-accent, var(--text));
}
.category-page .ulb-cta-v2 .btn-outline{
  background: transparent;
  color: var(--ulb-accent, var(--text));
  border-color: rgba(0,0,0,.16);
}
.category-page .ulb-cta-v2 .btn-ghost{
  background: transparent;
  border-color: transparent;
  color: var(--ulb-accent, var(--text));
  padding-left: 8px;
  padding-right: 8px;
}

/* Media */
.category-page .ulb-cta-v2 .ulb-cta-media{
  flex: 0 0 auto;
  width: var(--ulb-media-w, 168px);
  height: var(--ulb-media-h, 112px);
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.55);
  max-width: 520px;
  max-height: 420px;
}
.category-page .ulb-cta-v2 .ulb-cta-media img{
  width:100%; height:100%; object-fit: cover; display:block;
}

/* Variants (background feel) */
.category-page .ulb-cta-v2.variant-soft{ background: rgba(0,0,0,.03); }
.category-page .ulb-cta-v2.variant-primary{ background: rgba(22,163,74,.08); }
.category-page .ulb-cta-v2.variant-accent{ background: rgba(99,102,241,.10); }
.category-page .ulb-cta-v2.variant-glass{ background: rgba(255,255,255,.55); backdrop-filter: blur(10px); }
.category-page .ulb-cta-v2.variant-dark{ background: rgba(0,0,0,.75); color:#fff; border-color: rgba(255,255,255,.10); }
.category-page .ulb-cta-v2.variant-dark .ulb-cta-badge{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.12); }
.category-page .ulb-cta-v2.variant-dark .ulb-cta-btn.btn-outline{ border-color: rgba(255,255,255,.18); }
.category-page .ulb-cta-v2.variant-dark .ulb-cta-btn.btn-soft{ background: rgba(255,255,255,.10); color:#fff; }

/* Align */
.category-page .ulb-cta-v2.align-center .ulb-cta-content{ align-items:center; text-align:center; }
.category-page .ulb-cta-v2.align-left .ulb-cta-content{ align-items:flex-start; text-align:left; }
.category-page .ulb-cta-v2.align-right .ulb-cta-content{ align-items:flex-start; text-align:right; }

/* Responsive stacking */
@media (max-width: 720px){
  .category-page .ulb-cta-v2.stack-mobile .ulb-cta-container{ flex-direction: column; align-items: stretch; }
  .category-page .ulb-cta-v2.stack-mobile .ulb-cta-media{ width: 100%; height: 160px; }
  .category-page .ulb-cta-v2 .ulb-cta-title{ font-size: 18px; }
  .category-page .ulb-cta-v2.align-left .ulb-cta-content,
  .category-page .ulb-cta-v2.align-right .ulb-cta-content{ text-align: right; }
}

.category-page .ulb-faq-q{ font-weight: 700; margin: 0 0 8px 0; }
.category-page .ulb-faq-a{ margin: 0; }

.category-page .ulb-section a,
.category-page .ulb-section button,
.category-page .ulb-section input,
.category-page .ulb-section select,
.category-page .ulb-section textarea{
  font: inherit;
}


/* ===== ULB Phase 4: Rich Content / TOC / FAQ / CTA / Related Categories ===== */

.category-page .ulb-rich{font-family:inherit}
.category-page .ulb-rich-title{margin:0 0 10px 0;font:inherit;font-weight:800}
.category-page .ulb-rich-body{display:grid;gap:10px;font-family:inherit}
.category-page .ulb-rich-body h2,.category-page .ulb-rich-body h3{margin:10px 0 0 0;font:inherit;font-weight:800;scroll-margin-top:90px}
.category-page .ulb-rich-body p{margin:0;line-height:1.95;font-family:inherit}
.category-page .ulb-rich-body ul,.category-page .ulb-rich-body ol{margin:0;padding-right:18px;line-height:1.95;font-family:inherit}
.category-page .ulb-rich-body blockquote{margin:0;padding:10px 14px;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:rgba(0,0,0,.02)}
.category-page .ulb-rich-figure{margin:0;display:grid;gap:8px}
.category-page .ulb-rich-figure img{max-width:100%;height:auto;border-radius:16px;display:block}
.category-page .ulb-rich-figure figcaption{font-size:12px;color:rgba(0,0,0,.65);font-family:inherit}

.category-page .ulb-toc{border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:12px 14px;background:rgba(0,0,0,.015);font-family:inherit}
.category-page .ulb-toc-title{font-weight:800;font:inherit}
.category-page .ulb-toc-list{margin:10px 0 0 0;padding:0;list-style:none;display:grid;gap:6px}
.category-page .ulb-toc-item a{text-decoration:none;font-family:inherit}
.category-page .ulb-toc-item.lvl-3{padding-right:14px;font-size:13px}

.category-page .ulb-faq{font-family:inherit}
.category-page .ulb-faq-title{margin:0 0 10px 0;font:inherit;font-weight:800}
.category-page .ulb-faq-list{display:grid;gap:8px}
.category-page .ulb-faq-item{border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:10px 12px;background:#fff}
.category-page .ulb-faq-item summary{cursor:pointer;font-family:inherit;font-weight:700}
.category-page .ulb-faq-answer{margin-top:8px;line-height:1.9;color:rgba(0,0,0,.8);font-family:inherit}

.category-page .ulb-cta-banner{border-radius:18px;padding:14px;border:1px solid rgba(0,0,0,.08);font-family:inherit}
.category-page .ulb-cta-banner .ulb-cta-banner-inner{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.category-page .ulb-cta-banner h2{margin:0 0 6px 0;font:inherit;font-weight:900}
.category-page .ulb-cta-banner p{margin:0;line-height:1.9;font-family:inherit}
.category-page .ulb-cta-banner-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:14px;text-decoration:none;font-family:inherit;font-weight:800}
.category-page .ulb-cta-banner.variant-primary{background:rgba(22,163,74,.08)}
.category-page .ulb-cta-banner.variant-primary .ulb-cta-banner-btn{background:rgba(22,163,74,.18)}
.category-page .ulb-cta-banner.variant-soft{background:rgba(0,0,0,.03)}
.category-page .ulb-cta-banner.variant-soft .ulb-cta-banner-btn{background:rgba(0,0,0,.06)}
.category-page .ulb-cta-banner.variant-accent{background:rgba(99,102,241,.10)}
.category-page .ulb-cta-banner.variant-accent .ulb-cta-banner-btn{background:rgba(99,102,241,.18)}

.category-page .ulb-relatedcats{font-family:inherit}
.category-page .ulb-relatedcats-title{margin:0 0 10px 0;font:inherit;font-weight:800}
.category-page .ulb-relatedcats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.category-page .ulb-relatedcats-card{border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:12px;text-decoration:none;font-family:inherit;background:#fff}

/* ===== ULB Phase 7: Testimonials / Steps / Pricing / Video / Icon Strip / Featured / Search / Safety ===== */
.category-page .ulb-section-title{margin:0 0 10px 0;font:inherit;font-weight:900}

.category-page .ulb-testimonials .ulb-testimonials-list{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.category-page .ulb-testimonials .ulb-testimonial{border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:12px;background:#fff}
.category-page .ulb-testimonials .ulb-person{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.category-page .ulb-testimonials .ulb-avatar{width:42px;height:42px;border-radius:999px;object-fit:cover;border:1px solid rgba(0,0,0,.08)}
.category-page .ulb-testimonials .ulb-name{font-weight:900}
.category-page .ulb-testimonials .ulb-role{font-size:12px;opacity:.75}
.category-page .ulb-testimonials .ulb-quote{margin:0;line-height:1.9}

.category-page .ulb-steps .ulb-steps-list{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.category-page .ulb-steps .ulb-step{border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:12px;background:#fff;position:relative}
.category-page .ulb-steps .ulb-step-no{position:absolute;top:10px;left:10px;width:28px;height:28px;border-radius:999px;border:1px solid rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;font-size:12px;opacity:.75}
.category-page .ulb-steps .ulb-step-title{margin:0 0 6px 0;font-weight:900}
.category-page .ulb-steps .ulb-step-desc{margin:0;line-height:1.9;opacity:.8}

.category-page .ulb-pricing .ulb-pricing-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.category-page .ulb-pricing .ulb-plan{border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:14px;background:#fff}
.category-page .ulb-pricing .ulb-plan-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.category-page .ulb-pricing .ulb-plan-name{font-weight:900}
.category-page .ulb-pricing .ulb-plan-badge{font-size:12px;border:1px solid rgba(0,0,0,.1);border-radius:999px;padding:2px 8px;opacity:.85}
.category-page .ulb-pricing .ulb-plan-price{font-size:22px;font-weight:1000;line-height:1.2}
.category-page .ulb-pricing .ulb-plan-cur{font-size:12px;opacity:.7;margin-right:6px}
.category-page .ulb-pricing .ulb-plan-features{margin:10px 0 12px 0;padding-right:18px;display:grid;gap:6px}
.category-page .ulb-pricing .ulb-plan-cta{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:14px;border:1px solid rgba(0,0,0,.12);text-decoration:none;font-weight:900}

.category-page .ulb-video .ulb-video-wrap{border:1px solid rgba(0,0,0,.08);border-radius:18px;overflow:hidden;background:#000}
.category-page .ulb-video .ulb-video-embed{position:relative;padding-top:56.25%}
.category-page .ulb-video .ulb-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.category-page .ulb-video .ulb-video-caption{margin-top:8px;font-size:12px;opacity:.75}

.category-page .ulb-icon-strip .ulb-icons{display:flex;flex-wrap:wrap;gap:10px}
.category-page .ulb-icon-strip .ulb-icon{display:flex;align-items:center;gap:10px;border:1px solid rgba(0,0,0,.08);border-radius:999px;padding:8px 12px;background:#fff}
.category-page .ulb-icon-strip .ulb-icon-img{width:22px;height:22px;object-fit:contain}
.category-page .ulb-icon-strip .ulb-icon-label{font-weight:900;font-size:13px}

.category-page .ulb-featured .ulb-featured-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.category-page .ulb-featured .ulb-freelancer{border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:12px;background:#fff;text-decoration:none;color:inherit;display:block}
.category-page .ulb-featured .ulb-f-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.category-page .ulb-featured .ulb-f-avatar{width:48px;height:48px;border-radius:999px;border:1px solid rgba(0,0,0,.08);object-fit:cover}
.category-page .ulb-featured .ulb-f-name{font-weight:1000}
.category-page .ulb-featured .ulb-f-title{font-size:12px;opacity:.75}
.category-page .ulb-featured .ulb-f-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px}
.category-page .ulb-featured .ulb-f-rate{font-size:12px;opacity:.8}
.category-page .ulb-featured .ulb-f-badge{font-size:12px;border:1px solid rgba(0,0,0,.1);border-radius:999px;padding:2px 8px;opacity:.85}

.category-page .ulb-search .ulb-search-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.category-page .ulb-search .ulb-search-input{flex:1 1 260px;min-width:220px;border:1px solid rgba(0,0,0,.12);border-radius:14px;padding:12px;font:inherit}
.category-page .ulb-search .ulb-search-btn{border:1px solid rgba(0,0,0,.12);border-radius:14px;padding:12px 14px;background:rgba(22,163,74,.14);font-weight:1000;cursor:pointer}

.category-page .ulb-safety .ulb-safety-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.category-page .ulb-safety .ulb-safety-item{border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:12px;background:#fff;display:flex;gap:10px}
.category-page .ulb-safety .ulb-safety-icon{width:30px;height:30px;object-fit:contain}
.category-page .ulb-safety .ulb-safety-title{margin:0 0 6px 0;font-weight:1000}
.category-page .ulb-safety .ulb-safety-desc{margin:0;line-height:1.9;opacity:.8}

/* ===== Phase 11: UI polish + class aliasing to avoid mismatches between views and CSS ===== */
.category-page .ulb-card,
.category-page .ulb-relatedcats-card,
.category-page .ulb-testimonial-card,
.category-page .ulb-pricing-card,
.category-page .ulb-featured-card{transition:transform .12s ease, box-shadow .12s ease}

.category-page .ulb-card:hover,
.category-page .ulb-relatedcats-card:hover,
.category-page .ulb-testimonial-card:hover,
.category-page .ulb-pricing-card:hover,
.category-page .ulb-featured-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.06)}

/* Testimonials aliases */
.category-page .ulb-testimonials .ulb-testimonials-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.category-page .ulb-testimonials .ulb-testimonial-card{border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:12px;background:#fff}
.category-page .ulb-testimonials .ulb-testimonial-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.category-page .ulb-testimonials .ulb-testimonial-text{margin:0;line-height:1.9;opacity:.9}
.category-page .ulb-testimonials .ulb-avatar-fallback{background:rgba(0,0,0,.04)}

/* Pricing aliases */
.category-page .ulb-pricing .ulb-pricing-card{border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:14px;background:#fff}
.category-page .ulb-pricing .ulb-pricing-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.category-page .ulb-pricing .ulb-pricing-name{font-weight:1000}
.category-page .ulb-pricing .ulb-pricing-badge{font-size:12px;border:1px solid rgba(0,0,0,.1);border-radius:999px;padding:2px 8px;opacity:.85}
.category-page .ulb-pricing .ulb-pricing-price{font-size:22px;font-weight:1000;line-height:1.2}
.category-page .ulb-pricing .ulb-pricing-features{margin:10px 0 12px 0;padding-right:18px;display:grid;gap:6px}
.category-page .ulb-pricing .ulb-pricing-cta{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:14px;border:1px solid rgba(0,0,0,.12);text-decoration:none;font-weight:900}

/* Video aliases */
.category-page .ulb-video .ulb-video-el,
.category-page .ulb-video .ulb-video-iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0}
.category-page .ulb-video .ulb-video-iframe{height:100%}

/* Icon strip aliases */
.category-page .ulb-icon-strip .ulb-icon-strip-row{display:flex;flex-wrap:wrap;gap:10px}
.category-page .ulb-icon-strip .ulb-icon-item{display:flex;align-items:center;gap:10px;border:1px solid rgba(0,0,0,.08);border-radius:999px;padding:8px 12px;background:#fff}
.category-page .ulb-icon-strip .ulb-icon{width:22px;height:22px;object-fit:contain}

/* Featured freelancers aliases */
.category-page .ulb-featured .ulb-featured-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.category-page .ulb-featured .ulb-featured-card{border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:12px;background:#fff;text-decoration:none;color:inherit;display:block}

/* Search polish */
.category-page .ulb-search .ulb-search-btn:hover{filter:saturate(1.05)}

/* Typography polish for rich content */
.category-page .ulb-rich-content h2,
.category-page .ulb-rich-content h3,
.category-page .ulb-rich h2,
.category-page .ulb-rich h3{margin:18px 0 10px;line-height:1.6}
.category-page .ulb-rich-content p,
.category-page .ulb-rich p{margin:10px 0;line-height:2}
.category-page .ulb-rich-content ul,
.category-page .ulb-rich ul{margin:10px 0;padding-right:18px;display:grid;gap:6px}


/* ULB Admin Builder cleanup (Phase 13) */
.ulb-admin, .ulb-admin * { font-family: inherit; }
.ulb-admin #lb_modal_body { max-height: 70vh; overflow: auto; }

/* Screen-reader only utility (A11y) */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* PD background artifact fix */
.pd-card, .pd-wrap, .pd-main{background-image:none !important;}



/* ============================================================
   Phase 7 — Theme Migration & Visual Harmonization (Home-safe)
   - Adds a token contract WITHOUT breaking legacy variables
   - Scopes theme/brand overrides to Home ONLY via [data-ishome="1"]
   ============================================================ */

:root{
  /* Token Contract (aliases) */
  --color-primary: var(--primary);
  --color-primary-dark: var(--primary-dark, var(--primary));
  --color-accent: var(--static-cta-primary, var(--primary));
  --color-surface: var(--surface);
  --color-text: var(--text-main);
  --color-text-muted: var(--text-muted, rgba(0,0,0,.65));

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 14px;
  --space-lg: 18px;

  /* Font contract (inherit site font) */
  --font-body: inherit;
  --font-h1: inherit;
  --font-h2: inherit;
}

html[data-brand="forest"][data-ishome="1"]{
  /* Forest brand tuning (subtle) */
  --color-primary: #2f7d5a;
  --color-primary-dark: #256548;
  --color-accent: #3aa874;
}

/* Home migration bridge: map legacy vars ONLY on home to token values */
html[data-ishome="1"]{
  --surface: var(--color-surface);
  --text-main: var(--color-text);
  --text-muted: var(--color-text-muted);
  --primary: var(--color-primary);
  --primary-dark: var(--color-primary-dark);
}

/* Ensure form controls inherit font everywhere (UI rule) */
button, input, select, textarea, label{
  font-family: inherit !important;
}



/* ============================================================
 Phase 9 — UX Polish (Safe)
 ============================================================ */
.card, .box, .panel{
  border-radius: var(--radius-md);
}
.btn, button{
  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:active, button:active{ transform: translateY(1px); }
.empty-state{ color: var(--color-text-muted); text-align:center; padding: var(--space-lg); }


/* === ULB Phase 2 (Full Power Blocks) === */
.ulb-hero-lite .ulb-hero-inner { display:flex; flex-direction:column; gap:12px; }
.ulb-hero-lite .ulb-hero-media img { max-width:100%; height:auto; display:block; border-radius:12px; }
.ulb-hero-lite .ulb-hero-media.is-fixed-height img{ height:100% !important; object-fit:cover; }
.ulb-hero-lite .ulb-hero-cta { margin-top:8px; }
.ulb-text-blocks, .ulb-hero-blocks, .ulb-faq-blocks { display:flex; flex-direction:column; gap:10px; }
.ulb-block-divider { border:0; border-top:1px solid rgba(0,0,0,.08); margin:8px 0; }
.ulb-block-image { max-width:100%; height:auto; display:block; border-radius:12px; }
.ulb-block-figure { margin:0; }
.ulb-block-figure figcaption { font-size:0.9em; opacity:.8; margin-top:6px; }
.ulb-block-text p { margin:0; }

/* ULB Text Block (S04) — Overflow-safe typography
   Permanent fix for long unbroken strings in RTL+Grid layouts. */
.ulb-text-body{
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.ulb-text-body *{
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}


/* ==========================================================
   ULB Layout Engine — Global Responsive Fit Lock (All Sections)
   Goal: Any content (text/media) inside rows/columns/slots must
   automatically fit the available column/row width on all devices.
   Applies to ALL 28 sections.
   ========================================================== */

/* Grid/Flex children must be allowed to shrink (critical for overflow bugs) */
.ulb-row,
.ulb-col,
.ulb-slot,
.ulb-section,
.ulb-section-inner{
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Ensure direct children cannot exceed container width */
.ulb-slot > *,
.ulb-col  > *,
.ulb-section-inner > *{
  max-width: 100% !important;
}

/* Responsive media inside any section */
.ulb-section img,
.ulb-section video{
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/*
  IMPORTANT:
  - max-width prevents overflow but does NOT scale-up smaller images.
  - In the ULB builder, "media" images are expected to automatically fit the
    current column/row width (desktop/tablet/mobile).
  We therefore "upscale" media images to 100% width, while explicitly
  excluding known icon classes (which have intentional fixed sizes).
*/
/* Targeted upscale for "content media" images (not icons) */
.ulb-hero-media img,
.ulb-block-image,
.ulb-section figure img,
.ulb-section picture img,
.ulb-section .ulb-media img{
  width: 100% !important;
}

/* Embedded content should never overflow horizontally */
.ulb-section iframe,
.ulb-section embed,
.ulb-section object{
  max-width: 100% !important;
  width: 100% !important;
}

/* Tables/code blocks can easily overflow; keep them contained */
.ulb-section table{
  max-width: 100% !important;
}
.ulb-section pre,
.ulb-section code{
  max-width: 100% !important;
  white-space: pre-wrap;
  word-break: break-word;
}

/* As a final safeguard: prevent horizontal bleed from section bodies */
.ulb-section,
.ulb-section-inner{
  overflow-x: hidden;
}


/* ============================================================
   ULB Grid Integrity Guard (v151)
   Fix: Prevent column content from expanding beyond its grid cell.
   This solves cases where text blocks appear full-row even inside a span-6 column.
   ============================================================ */
html body .ulb-row-inner { min-width: 0 !important; }
html body .ulb-col { min-width: 0 !important; max-width: 100% !important; }
html body .ulb-slot { min-width: 0 !important; max-width: 100% !important; }
html body .ulb-sec { max-width: 100% !important; min-width: 0 !important; width: 100% !important; }
html body .ulb-section { max-width: 100% !important; min-width: 0 !important; width: 100% !important; }

/* Text wrapping inside columns */
html body .ulb-sec,
html body .ulb-section { overflow-wrap: anywhere !important; }
html body .ulb-sec * ,
html body .ulb-section * { max-width: 100% !important; }

/* ==========================================
   ULB GLOBAL TEXT JUSTIFY (ALL 28 SECTIONS)
   Scope: only rendered ULB content (.ulb-page)
   ========================================== */

html body .ulb-page .ulb-section,
html body .ulb-page .ulb-sec,
html body .ulb-page .ulb-slot {
  text-align: justify;
  text-justify: inter-word;
}

/* Common text elements */
html body .ulb-page .ulb-section p,
html body .ulb-page .ulb-section li,
html body .ulb-page .ulb-section blockquote,
html body .ulb-page .ulb-section .richtext,
html body .ulb-page .ulb-sec p,
html body .ulb-page .ulb-sec li,
html body .ulb-page .ulb-sec blockquote,
html body .ulb-page .ulb-slot p,
html body .ulb-page .ulb-slot li,
html body .ulb-page .ulb-slot blockquote {
  text-align: justify !important;
  text-justify: inter-word;
}

/* Keep UI controls unaffected */
html body .ulb-page .ulb-section button,
html body .ulb-page .ulb-section .btn,
html body .ulb-page .ulb-section input,
html body .ulb-page .ulb-section textarea,
html body .ulb-page .ulb-section select,
html body .ulb-page .ulb-section label,
html body .ulb-page .ulb-sec button,
html body .ulb-page .ulb-sec .btn,
html body .ulb-page .ulb-sec input,
html body .ulb-page .ulb-sec textarea,
html body .ulb-page .ulb-sec select,
html body .ulb-page .ulb-sec label {
  text-align: inherit !important;
  text-justify: auto;
}


/* ===== ULTRA GLOBAL HERO CTA (Freelancito) ===== */
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.hero-actions .btn-ghost{
  font-family:inherit !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border-radius:14px;
  text-decoration:none !important;
  font-weight:800;
  line-height:1;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
}

/* Primary = first CTA */
.hero-actions .btn-ghost:first-child{
  background:linear-gradient(135deg,#00c896,#6c5cff);
  color:#fff !important;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 26px rgba(0,0,0,.16);
}
.hero-actions .btn-ghost:first-child:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(0,0,0,.22);
}

/* Secondary = second CTA */
.hero-actions .btn-ghost:nth-child(2){
  background:#fff;
  color:#111827 !important;
  border:2px solid rgba(108,92,255,.18);
  box-shadow:0 6px 18px rgba(17,24,39,.06);
}
.hero-actions .btn-ghost:nth-child(2):hover{
  transform:translateY(-2px);
  border-color:rgba(108,92,255,.32);
  box-shadow:0 12px 26px rgba(17,24,39,.10);
}

/* Third CTA (if exists) = minimal link-style */
.hero-actions .btn-ghost:nth-child(3){
  background:transparent;
  border:1px solid rgba(17,24,39,.08);
  color:#374151 !important;
  font-weight:700;
  box-shadow:none;
}
.hero-actions .btn-ghost:nth-child(3):hover{
  transform:translateY(-1px);
  border-color:rgba(17,24,39,.16);
}

/* Trust pills under hero CTAs */
.hero-trustbar{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.hero-trustbar .trust-pill{
  font-family:inherit !important;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:999px;
  text-decoration:none !important;
  font-size:13px;
  font-weight:700;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(17,24,39,.08);
  color:#111827 !important;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  backdrop-filter: blur(6px);
}
.hero-trustbar .trust-pill:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg,#00c896,#6c5cff);
  color:#fff !important;
  border-color:rgba(0,0,0,.06);
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}
.hero-trustbar .trust-ico{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:12px;
  background:rgba(0,200,150,.12);
  color:#00a97f;
}
.hero-trustbar .trust-pill:hover .trust-ico{
  background:rgba(255,255,255,.18);
  color:#fff;
}

/* Responsive polish */
@media (max-width: 720px){
  .hero-actions{ justify-content:center; }
  .hero-trustbar{ justify-content:center; }
  .hero-actions .btn-ghost{ width:100%; max-width:340px; }
}



/* ===========================
   ULTRA GLOBAL HOME CTA (v3)
   - strong overrides to avoid theme collisions
   =========================== */
.hero-cta-actions .ultra-hero-primary,
.how-under-monitor-actions .ultra-cta-primary{
  font-family:inherit !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:14px 26px !important;
  border-radius:14px !important;
  font-weight:800 !important;
  letter-spacing:-0.2px !important;
  text-decoration:none !important;
  color:#fff !important;
  border:none !important;
  background:linear-gradient(135deg, #00c896 0%, #34d399 20%, #6c5cff 100%) !important;
  box-shadow:0 10px 28px rgba(17,24,39,.18) !important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
  will-change:transform;
}
.hero-cta-actions .ultra-hero-primary:hover,
.how-under-monitor-actions .ultra-cta-primary:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 16px 38px rgba(17,24,39,.22) !important;
  filter:saturate(1.05) !important;
}

.hero-cta-actions .ultra-hero-secondary,
.how-under-monitor-actions .ultra-cta-secondary{
  font-family:inherit !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:14px 22px !important;
  border-radius:14px !important;
  font-weight:800 !important;
  text-decoration:none !important;
  color:#0f172a !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(15,23,42,.14) !important;
  box-shadow:0 10px 24px rgba(17,24,39,.08) !important;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}
.hero-cta-actions .ultra-hero-secondary:hover,
.how-under-monitor-actions .ultra-cta-secondary:hover{
  transform:translateY(-2px) !important;
  background:#fff !important;
  box-shadow:0 14px 30px rgba(17,24,39,.12) !important;
}

/* trust chips (no default link styling) */
.ultra-trustbar{
  margin-top:14px !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  align-items:center !important;
}
.ultra-trustbar .ultra-trust-pill{
  font-family:inherit !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:9px 14px !important;
  border-radius:999px !important;
  text-decoration:none !important;
  font-size:13px !important;
  font-weight:800 !important;
  background:rgba(255,255,255,.85) !important;
  border:1px solid rgba(15,23,42,.10) !important;
  color:#0f172a !important;
  box-shadow:0 8px 18px rgba(17,24,39,.06) !important;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease !important;
}
.ultra-trustbar .ultra-trust-pill:hover{
  transform:translateY(-2px) !important;
  background:linear-gradient(135deg, rgba(0,200,150,.16), rgba(108,92,255,.16)) !important;
  box-shadow:0 12px 26px rgba(17,24,39,.10) !important;
  color:#0b1220 !important;
}
.ultra-trustbar .ultra-trust-ico{
  font-weight:900 !important;
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(0,200,150,.22), rgba(108,92,255,.22));
}

/* responsive safety */
@media (max-width: 768px){
  .hero-cta-actions,
  .how-under-monitor-actions{
    flex-wrap:wrap !important;
    gap:12px !important;
    justify-content:center !important;
  }
  .hero-cta-actions a,
  .how-under-monitor-actions a{
    width:100% !important;
    max-width:360px !important;
  }
  .ultra-trustbar{
    justify-content:center !important;
  }
}


/* ===== Freelancito Ultra CTA (Home only / scoped) ===== */
.how-under-monitor-actions.ultra-cta-actions{
  display:flex !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  align-items:center !important;
  margin-top:14px !important;
}
.how-under-monitor-actions.ultra-cta-actions a{
  font-family:inherit !important;
  border-radius:14px !important;
  padding:12px 22px !important;
  font-weight:800 !important;
  letter-spacing:-0.2px !important;
  text-decoration:none !important;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:140px !important;
  box-sizing:border-box !important;
}
.how-under-monitor-actions.ultra-cta-actions a.ultra-btn-primary{
  background:linear-gradient(135deg, #12c18b 0%, #19b88a 20%, #6c5cff 100%) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 10px 26px rgba(17, 24, 39, .18) !important;
}
.how-under-monitor-actions.ultra-cta-actions a.ultra-btn-primary:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 16px 34px rgba(17, 24, 39, .26) !important;
}
.how-under-monitor-actions.ultra-cta-actions a.ultra-btn-secondary{
  background:rgba(255,255,255,.75) !important;
  color:#111827 !important;
  border:1.5px solid rgba(108,92,255,.28) !important;
  box-shadow:0 8px 20px rgba(17, 24, 39, .08) !important;
  backdrop-filter:saturate(140%) blur(8px) !important;
}
.how-under-monitor-actions.ultra-cta-actions a.ultra-btn-secondary:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(18,193,139,.35) !important;
  box-shadow:0 14px 30px rgba(17, 24, 39, .14) !important;
}

/* Trust chips under CTA */
.ultra-trust-chips{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin-top:12px !important;
}
.ultra-trust-chips .ultra-chip{
  font-family:inherit !important;
  font-size:13px !important;
  padding:8px 14px !important;
  border-radius:999px !important;
  background:rgba(249,250,251,.9) !important;
  border:1px solid rgba(229,231,235,.9) !important;
  color:#374151 !important;
  text-decoration:none !important;
  box-shadow:0 6px 18px rgba(17, 24, 39, .06) !important;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease !important;
}
.ultra-trust-chips .ultra-chip:hover{
  transform:translateY(-1px) !important;
  background:linear-gradient(135deg, rgba(18,193,139,.12), rgba(108,92,255,.12)) !important;
  color:#111827 !important;
  box-shadow:0 10px 22px rgba(17, 24, 39, .10) !important;
}

/* Mobile stacking */
@media (max-width: 768px){
  .how-under-monitor-actions.ultra-cta-actions{
    justify-content:center !important;
  }
  .how-under-monitor-actions.ultra-cta-actions a{
    width:100% !important;
    max-width:320px !important;
  }
  .ultra-trust-chips{
    justify-content:center !important;
  }
}

/* ==========================================================
   HOME (Unicorn SaaS) — Ultra Conversion Homepage
   Scope: New home layout only. Old styles remain untouched.
   ========================================================== */

.home-ultra,
.home-ultra * {
  font-family: inherit !important; /* Font Law */
}

.home-ultra-hero {
  position: relative;
  overflow: hidden;
  padding: 54px 0 26px;
}

.home-ultra-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(19, 88, 97, 0.18), transparent 60%),
    radial-gradient(900px 420px at 80% 20%, rgba(28, 200, 138, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(10, 20, 18, 0.03), rgba(10, 20, 18, 0));
  pointer-events: none;
}

.home-ultra-hero__inner { position: relative; }

.home-ultra-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: center;
}

.home-ultra-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(19, 88, 97, 0.08);
  border: 1px solid rgba(19, 88, 97, 0.12);
  font-size: 13px;
  line-height: 1;
  color: rgba(0,0,0,0.7);
  margin-bottom: 14px;
}

.home-ultra-hero__title {
  font-size: 40px;
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -0.2px;
}

.home-ultra-hero__subtitle {
  font-size: 16px;
  line-height: 1.95;
  margin: 0 0 18px;
  color: rgba(0,0,0,0.72);
}

.home-ultra-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.btn-ultra-primary,
.btn-ultra-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  padding: 12px 14px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  user-select: none;
}

.btn-ultra__icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.btn-ultra-primary {
  background: linear-gradient(135deg, rgba(19, 88, 97, 1), rgba(22, 132, 108, 1));
  color: #fff;
  box-shadow: 0 14px 34px rgba(19, 88, 97, 0.24);
}
.btn-ultra-primary .btn-ultra__icon { background: rgba(255,255,255,0.18); }

.btn-ultra-secondary {
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.08);
  color: rgba(0,0,0,0.82);
}
.btn-ultra-secondary .btn-ultra__icon { background: rgba(19, 88, 97, 0.10); color: rgba(19,88,97,1); }

.btn-ultra-primary:hover,
.btn-ultra-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
}

.home-ultra-hero__micro {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}

.micro-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(0,0,0,0.06);
  font-size: 13px;
  color: rgba(0,0,0,0.72);
}

.home-ultra-hero__trustlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: rgba(0,0,0,0.62);
}

.trustlink {
  text-decoration: none;
  color: rgba(0,0,0,0.62);
  border-bottom: 1px dashed rgba(0,0,0,0.20);
}

.trustlink:hover { color: rgba(19, 88, 97, 1); border-bottom-color: rgba(19, 88, 97, 0.55); }
.trustdot { opacity: .5; }

/* UI Mock */
.mock-surface {
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(0,0,0,0.10);
  overflow: hidden;
}

.mock-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.mock-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.14);
}

.mock-chip {
  margin-right: auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(19, 88, 97, 0.10);
  font-weight: 700;
  font-size: 12px;
}

.mock-body { padding: 14px; }
.mock-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.mock-card { background: rgba(255,255,255,0.86); border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; padding: 12px; }
.mock-card--wide { grid-column: 1 / span 1; }
.mock-card--mini { display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 8px; }
.mock-mini__icon { width: 42px; height: 42px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: rgba(19,88,97,0.12); }
.mock-mini__text { font-weight: 700; font-size: 12px; opacity: .85; }
.mock-card__title { font-weight: 800; font-size: 13px; margin-bottom: 10px; }
.mock-card__meta { display:flex; flex-wrap:wrap; gap: 6px; }
.mock-badge { font-size: 11px; padding: 6px 8px; border-radius: 999px; background: rgba(0,0,0,0.05); }
.mock-avatar { width: 40px; height: 40px; border-radius: 14px; background: rgba(0,0,0,0.10); margin-bottom: 10px; }
.mock-lines { display:flex; flex-direction:column; gap: 8px; margin-bottom: 10px; }
.mock-line { height: 8px; border-radius: 999px; background: rgba(0,0,0,0.08); }
.mock-line.w-70 { width: 70%; }
.mock-line.w-65 { width: 65%; }
.mock-line.w-60 { width: 60%; }
.mock-line.w-55 { width: 55%; }
.mock-line.w-45 { width: 45%; }
.mock-line.w-40 { width: 40%; }
.mock-score { display:flex; gap: 6px; }
.mock-pill { font-size: 11px; padding: 6px 8px; border-radius: 999px; background: rgba(19, 88, 97, 0.10); }
.mock-footer { display:flex; gap: 10px; margin-top: 12px; }
.mock-cta { height: 42px; flex: 1; border-radius: 14px; background: rgba(19, 88, 97, 0.18); }
.mock-cta.ghost { background: rgba(0,0,0,0.06); }

/* Trust strip */
.home-ultra-truststrip { padding: 10px 0 0; }
.truststrip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(0,0,0,0.06);
}
.truststrip__item { display:flex; align-items:center; gap: 10px; font-size: 13px; color: rgba(0,0,0,0.70); }
.truststrip__sep { width: 1px; height: 16px; background: rgba(0,0,0,0.10); opacity: .7; }

/* Sections */
.home-ultra-section { padding: 44px 0; }
.home-ultra-section--soft { background: rgba(10, 20, 18, 0.02); border-top: 1px solid rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.03); }
.section-head { margin-bottom: 16px; }
.section-head--inline { display:flex; align-items:flex-end; justify-content:space-between; gap: 12px; flex-wrap:wrap; }
.section-title { margin: 0 0 8px; font-size: 22px; line-height: 1.5; }
.section-sub { margin: 0; color: rgba(0,0,0,0.66); line-height: 1.9; }
.link-cta { text-decoration:none; font-weight: 800; font-size: 13px; color: rgba(19,88,97,1); display:inline-flex; align-items:center; gap: 8px; }

/* How */
.how-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.how-card { border-radius: 18px; border: 1px solid rgba(0,0,0,0.06); background: rgba(255,255,255,0.75); padding: 18px; }
.how-icon { width: 46px; height: 46px; border-radius: 16px; display:flex; align-items:center; justify-content:center; background: rgba(19, 88, 97, 0.10); margin-bottom: 12px; }
.how-title { font-weight: 900; margin-bottom: 6px; }
.how-text { color: rgba(0,0,0,0.66); line-height: 1.9; font-size: 14px; }

/* Categories */
.home-ultra-cats__grid { display:grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.cat-card { display:flex; align-items:center; gap: 10px; padding: 12px 12px; border-radius: 16px; border: 1px solid rgba(0,0,0,0.06); background: rgba(255,255,255,0.75); text-decoration:none; color: rgba(0,0,0,0.86); }
.cat-ic { width: 40px; height: 40px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.06); color: rgba(19,88,97,1); }
.cat-t { font-weight: 900; font-size: 13px; }

/* Featured freelancers */
.ff-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ff-card { display:flex; gap: 12px; align-items:center; padding: 14px; border-radius: 18px; border: 1px solid rgba(0,0,0,0.06); background: rgba(255,255,255,0.75); text-decoration:none; color: rgba(0,0,0,0.88); }
.ff-ava { width: 54px; height: 54px; border-radius: 18px; background-size: cover; background-position: center; background-color: rgba(0,0,0,0.08); flex: 0 0 auto; }
.ff-meta { display:flex; flex-direction:column; gap: 4px; min-width: 0; }
.ff-name { font-weight: 900; }
.ff-title { font-size: 13px; color: rgba(0,0,0,0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-foot { display:flex; gap: 6px; flex-wrap:wrap; }
.ff-pill { font-size: 11px; padding: 6px 8px; border-radius: 999px; background: rgba(19,88,97,0.10); }

/* Authority */
.authority { display:grid; grid-template-columns: 1.2fr 0.8fr; gap: 14px; align-items: stretch; }
.authority__bullets { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ab { display:flex; align-items:center; gap: 10px; padding: 12px; border-radius: 16px; border: 1px solid rgba(0,0,0,0.06); background: rgba(255,255,255,0.75); }
.authority__panel .panel-card { height: 100%; border-radius: 18px; border: 1px solid rgba(0,0,0,0.06); background: rgba(255,255,255,0.75); padding: 16px; }
.panel-title { font-weight: 900; margin-bottom: 12px; }
.panel-row { display:flex; align-items:center; justify-content:space-between; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.panel-row:last-child { border-bottom: 0; }
.panel-row .ok { display:inline-flex; width: 26px; height: 26px; align-items:center; justify-content:center; border-radius: 999px; background: rgba(19,88,97,0.10); color: rgba(19,88,97,1); }

/* Final CTA */
.home-ultra-final { padding: 28px 0 54px; }
.final-cta {
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,0.06);
  background: linear-gradient(135deg, rgba(19, 88, 97, 0.10), rgba(28, 200, 138, 0.08));
  padding: 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  flex-wrap:wrap;
}
.final-cta__title { margin: 0 0 8px; font-size: 22px; }
.final-cta__sub { margin: 0; color: rgba(0,0,0,0.66); line-height: 1.9; }
.final-cta__actions { display:flex; gap: 10px; flex-wrap:wrap; }

/* Articles */
.articles-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.article-card { padding: 16px; border-radius: 18px; border: 1px solid rgba(0,0,0,0.06); background: rgba(255,255,255,0.75); text-decoration:none; color: rgba(0,0,0,0.88); display:block; }
.article-title { font-weight: 900; margin-bottom: 8px; }
.article-ex { color: rgba(0,0,0,0.66); line-height: 1.9; font-size: 14px; margin-bottom: 10px; }
.article-more { font-weight: 900; font-size: 13px; color: rgba(19,88,97,1); display:inline-flex; gap: 8px; align-items:center; }

/* Responsive */
@media (max-width: 1100px) {
  .home-ultra-hero__grid { grid-template-columns: 1fr; }
  .authority { grid-template-columns: 1fr; }
  .home-ultra-cats__grid { grid-template-columns: repeat(3, 1fr); }
  .how-grid { grid-template-columns: 1fr; }
  .ff-grid { grid-template-columns: 1fr; }
  .articles-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .home-ultra-hero__title { font-size: 30px; }
  .home-ultra-hero { padding-top: 44px; }
  .btn-ultra-primary, .btn-ultra-secondary { width: 100%; justify-content: center; }
  .home-ultra-cats__grid { grid-template-columns: 1fr 1fr; }
}

/* =============================
   Freelancito Standard Toast Law — v1346
   - top-right only
   - fit-to-text, inherited font
   - success green / error red / warning orange / info blue
   - soft fade + auto-close
   - one transient toast at a time (no visual stack)
   - high z-index
   ============================= */
.globalToastHost,
.fc-global-toast-stack{
  position:fixed !important;
  top:18px !important;
  right:18px !important;
  bottom:auto !important;
  left:auto !important;
  transform:none !important;
  z-index:2147483200 !important;
  pointer-events:none !important;
  width:auto !important;
  max-width:calc(100vw - 28px) !important;
  display:block !important;
  direction:rtl !important;
}
.globalToast,
.fc-global-toast{
  --fc-toast-accent:#0284c7;
  --fc-toast-border:rgba(2,132,199,.28);
  --fc-toast-bg-a:rgba(240,249,255,.96);
  --fc-toast-bg-b:rgba(239,246,255,.94);
  --fc-toast-text:#075985;
  --fc-toast-ring:rgba(2,132,199,.13);
  position:relative !important;
  overflow:hidden !important;
  pointer-events:auto !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:9px !important;
  width:fit-content !important;
  min-width:min(280px,calc(100vw - 28px)) !important;
  max-width:min(560px,calc(100vw - 28px)) !important;
  min-height:46px !important;
  padding:9px 11px 9px 9px !important;
  border-radius:17px !important;
  border:1px solid var(--fc-toast-border) !important;
  background:linear-gradient(135deg,var(--fc-toast-bg-a),var(--fc-toast-bg-b)) !important;
  box-shadow:0 17px 42px rgba(15,43,70,.14),0 7px 19px rgba(2,6,23,.08),0 0 0 1px rgba(255,255,255,.56) inset !important;
  backdrop-filter:blur(15px) saturate(1.12) !important;
  -webkit-backdrop-filter:blur(15px) saturate(1.12) !important;
  color:var(--fc-toast-text) !important;
  font:inherit !important;
  font-size:12.35px !important;
  font-weight:850 !important;
  line-height:1.64 !important;
  text-align:right !important;
  direction:rtl !important;
  opacity:0 !important;
  filter:blur(.55px) !important;
  transform:translate3d(0,-9px,0) scale(.985) !important;
  transition:opacity .38s ease,transform .44s cubic-bezier(.22,1,.36,1),filter .38s ease !important;
}
.globalToast:before,
.fc-global-toast:before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  background:linear-gradient(90deg,var(--fc-toast-accent) 0 4px,transparent 4px 100%) !important;
  opacity:.92 !important;
}
.globalToast:after,
.fc-global-toast:after{
  content:"" !important;
  position:absolute !important;
  inset:1px !important;
  border-radius:15px !important;
  pointer-events:none !important;
  border:1px solid rgba(255,255,255,.48) !important;
}
.globalToast.is-visible,
.fc-global-toast.is-visible{
  opacity:1 !important;
  filter:blur(0) !important;
  transform:translate3d(0,0,0) scale(1) !important;
}
.globalToast.is-leaving,
.fc-global-toast.is-leaving{
  opacity:0 !important;
  filter:blur(.55px) !important;
  transform:translate3d(0,-6px,0) scale(.985) !important;
}
.globalToast__body,
.fc-global-toast__body{
  position:relative !important;
  z-index:1 !important;
  min-width:0 !important;
  flex:1 1 auto !important;
  display:flex !important;
  align-items:flex-start !important;
  gap:8px !important;
}
.globalToast__body:before,
.fc-global-toast__body:before{
  content:"" !important;
  flex:0 0 auto !important;
  width:8px !important;
  height:8px !important;
  margin-top:7px !important;
  border-radius:999px !important;
  background:var(--fc-toast-accent) !important;
  box-shadow:0 0 0 4px var(--fc-toast-ring) !important;
}
.globalToast__message,
.fc-global-toast__message{
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-height:3.28em !important;
  color:inherit !important;
  text-shadow:0 1px 0 rgba(255,255,255,.45) !important;
}
.globalToast__close,
.fc-global-toast__close{
  position:relative !important;
  z-index:1 !important;
  flex:0 0 auto !important;
  width:22px !important;
  height:22px !important;
  border:0 !important;
  background:rgba(255,255,255,.52) !important;
  border-radius:999px !important;
  color:currentColor !important;
  cursor:pointer !important;
  padding:0 !important;
  font:inherit !important;
  font-size:15px !important;
  line-height:22px !important;
  opacity:.72 !important;
  box-shadow:0 2px 8px rgba(15,43,70,.05) !important;
}
.globalToast__close:hover,
.fc-global-toast__close:hover{opacity:1 !important;background:rgba(255,255,255,.78) !important;}

.globalToast--success,.fc-global-toast--success{
  --fc-toast-accent:#16a34a;
  --fc-toast-border:rgba(34,197,94,.32);
  --fc-toast-bg-a:rgba(240,253,244,.97);
  --fc-toast-bg-b:rgba(236,253,245,.95);
  --fc-toast-text:#166534;
  --fc-toast-ring:rgba(22,163,74,.13);
}
.globalToast--error,.fc-global-toast--error{
  --fc-toast-accent:#dc2626;
  --fc-toast-border:rgba(248,113,113,.34);
  --fc-toast-bg-a:rgba(254,242,242,.97);
  --fc-toast-bg-b:rgba(255,241,242,.95);
  --fc-toast-text:#991b1b;
  --fc-toast-ring:rgba(220,38,38,.13);
}
.globalToast--warn,.fc-global-toast--warn{
  --fc-toast-accent:#ea580c;
  --fc-toast-border:rgba(251,146,60,.36);
  --fc-toast-bg-a:rgba(255,247,237,.97);
  --fc-toast-bg-b:rgba(255,251,235,.95);
  --fc-toast-text:#9a3412;
  --fc-toast-ring:rgba(234,88,12,.13);
}
.globalToast--info,.fc-global-toast--info{
  --fc-toast-accent:#0284c7;
  --fc-toast-border:rgba(56,189,248,.32);
  --fc-toast-bg-a:rgba(240,249,255,.97);
  --fc-toast-bg-b:rgba(239,246,255,.95);
  --fc-toast-text:#075985;
  --fc-toast-ring:rgba(2,132,199,.13);
}

@media (max-width:640px){
  .globalToastHost,.fc-global-toast-stack{
    top:12px !important;
    right:12px !important;
    bottom:auto !important;
    left:auto !important;
    transform:none !important;
    width:calc(100vw - 24px) !important;
    max-width:calc(100vw - 24px) !important;
  }
  .globalToast,.fc-global-toast{
    width:fit-content !important;
    min-width:min(260px,calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    min-height:44px !important;
    padding:8px 10px 8px 8px !important;
    border-radius:16px !important;
    font-size:12px !important;
  }
}

/* Every legacy/local transient notification is suppressed and forwarded
   by app.js to the single standard top-right toast lane. */
.proposal-toast,.pd-inv-toast,.rvx-toast,.chatToastHost,.chatToast,
.pc-toast,.pc-toast-root,.pcs-toast,.asf-toast,.sf-toast,.wqa-toast,.cbp-toast,
.admin-operational-toast,.admin-operational-center__toast,.admin-help-live-toast,
.admin-help-request-alert__toast,.od-urgent-toast,.wallet-local-toast,.ft-contact .toast{
  max-width:0 !important;
  max-height:0 !important;
  overflow:hidden !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.toast-seeds{display:none !important;}
.flash{display:none !important;}


/* === Header dropdown parent labels: not clickable links === */
.nav-dropdown-trigger {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit !important;
    cursor: default;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.nav-dropdown.active > .nav-dropdown-trigger {
    border-bottom: 2px solid #fbbf24;
    color: #fbbf24;
}

.nav-dropdown:hover > .nav-dropdown-trigger,
.nav-dropdown:focus-within > .nav-dropdown-trigger {
    color: inherit;
}

.nav-dropdown:focus-within .nav-dropdown-menu {
    display: block;
}

/* === Header spacing/link fix: keep top menu readable and dropdown titles non-clickable === */
@media (min-width: 901px) {
    header .topbar .nav-links {
        gap: 24px !important;
        column-gap: 24px !important;
        row-gap: 10px !important;
    }

    header .topbar .nav-links > a,
    header .topbar .nav-links > .nav-item {
        margin-inline: 2px !important;
    }
}

header .topbar .nav-dropdown-trigger {
    font-family: inherit !important;
    font: inherit !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    padding: 9px 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #4B5563 !important;
    cursor: default !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

header .topbar .nav-dropdown:hover > .nav-dropdown-trigger,
header .topbar .nav-dropdown:focus-within > .nav-dropdown-trigger {
    color: #111827 !important;
    background: rgba(0,0,0,.04) !important;
}


/* === Header dropdown spacing refinement v210 === */
@media (min-width: 901px) {
    header .topbar .nav-links > .nav-dropdown + .nav-dropdown {
        margin-inline-start: 18px !important;
    }
}

/* === Header nav spacing refinement v211 === */
@media (min-width: 901px) {
    header .topbar .nav-links {
        gap: 30px !important;
        column-gap: 30px !important;
    }

    header .topbar .nav-links > .nav-dropdown + .nav-dropdown {
        margin-inline-start: 36px !important;
    }
}

/* === Header dropdown title typography fix v213 === */
header .topbar .nav-links > .nav-dropdown > .nav-dropdown-trigger {
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

/* SEO Phase 5 — Crawl UX & Accessibility foundation */
.skip-to-content {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 100000;
    transform: translateY(-160%);
    opacity: 0;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #0f766e;
    color: #ffffff !important;
    font-family: inherit !important;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 18px 45px rgba(15, 118, 110, 0.26);
    transition: transform .18s ease, opacity .18s ease;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    outline: 3px solid rgba(20, 184, 166, .35);
    outline-offset: 3px;
}
#main-content:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(20, 184, 166, .38);
    outline-offset: 3px;
}
.site-footer .footer-bottom-links {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.site-footer .footer-bottom-link {
    color: rgba(226, 232, 240, 0.78);
    text-decoration: none;
    font-size: 12.5px;
    line-height: 1.8;
}
.site-footer .footer-bottom-link:hover,
.site-footer .footer-bottom-link:focus-visible { color: #ffffff; }

/* SEO Phase 6: Human-readable sitemap / crawl discovery page */
.seo-sitemap-page,
.seo-sitemap-page * {
    font-family: inherit !important;
    box-sizing: border-box;
}

.seo-sitemap-page {
    width: min(1180px, 100%);
    margin: 34px auto 56px;
    padding: 0 14px;
    color: #132f3a;
}

.seo-sitemap-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(19, 88, 97, 0.13);
    border-radius: 30px;
    padding: clamp(26px, 4vw, 46px);
    background:
        radial-gradient(circle at 14% 18%, rgba(48, 205, 148, 0.18), transparent 30%),
        linear-gradient(135deg, #f6fffb 0%, #f7fbff 48%, #ffffff 100%);
    box-shadow: 0 24px 70px rgba(13, 55, 71, 0.10);
}

.seo-sitemap-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 8px 14px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: rgba(19, 88, 97, 0.09);
    color: #135861;
    font-weight: 850;
    font-size: 13px;
}

.seo-sitemap-hero h1 {
    margin: 0 0 14px;
    max-width: 760px;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.45;
    letter-spacing: -0.03em;
    color: #0f2b46;
}

.seo-sitemap-hero p {
    margin: 0;
    max-width: 790px;
    color: #4f6670;
    font-size: 16px;
    line-height: 2.05;
}

.seo-sitemap-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.seo-sitemap-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(19, 88, 97, 0.12);
    background: rgba(255, 255, 255, 0.76);
    color: #244d59;
    font-size: 13px;
    font-weight: 780;
    box-shadow: 0 10px 26px rgba(13, 55, 71, 0.06);
}

.seo-sitemap-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.seo-sitemap-card {
    border: 1px solid rgba(19, 88, 97, 0.11);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(13, 55, 71, 0.08);
    padding: 22px;
}

.seo-sitemap-card__head h2 {
    margin: 0 0 8px;
    color: #0f2b46;
    font-size: 20px;
    line-height: 1.55;
}

.seo-sitemap-card__head p {
    margin: 0 0 16px;
    color: #647982;
    font-size: 14px;
    line-height: 1.9;
}

.seo-sitemap-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.seo-sitemap-list li a {
    display: grid;
    gap: 4px;
    text-decoration: none;
    padding: 13px 14px;
    border-radius: 18px;
    border: 1px solid rgba(19, 88, 97, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #f9fdfc 100%);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.seo-sitemap-list li a:hover,
.seo-sitemap-list li a:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(19, 88, 97, 0.24);
    box-shadow: 0 14px 30px rgba(13, 55, 71, 0.08);
    outline: none;
}

.seo-sitemap-link-title {
    color: #135861;
    font-weight: 880;
    font-size: 15px;
    line-height: 1.65;
}

.seo-sitemap-link-desc {
    color: #6b7d84;
    font-size: 13px;
    line-height: 1.8;
}

@media (max-width: 760px) {
    .seo-sitemap-page {
        margin-top: 20px;
        padding: 0 10px;
    }
    .seo-sitemap-grid {
        grid-template-columns: 1fr;
    }
    .seo-sitemap-card {
        padding: 18px;
    }
    .seo-sitemap-hero {
        border-radius: 24px;
    }
}

/* === SEO Phase 7: Public Categories Directory (/categories) === */
.category-directory-page,
.category-directory-page * {
    font-family: inherit !important;
    box-sizing: border-box;
}

.category-directory-page {
    --cat-green: #0f766e;
    --cat-green-dark: #115e59;
    --cat-navy: #0f2b46;
    --cat-ink: #102a43;
    --cat-muted: #64748b;
    --cat-line: rgba(15, 118, 110, 0.14);
    --cat-soft: #f4fbf8;
    --cat-card: rgba(255, 255, 255, 0.88);
    direction: rtl;
    color: var(--cat-ink);
    padding: 28px 0 60px;
}

.category-directory-page a {
    color: inherit;
    text-decoration: none;
}

.category-directory-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(310px, 0.94fr);
    gap: 30px;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(15, 118, 110, 0.12);
    border-radius: 36px;
    padding: clamp(26px, 4vw, 50px);
    background:
        radial-gradient(circle at 11% 18%, rgba(20, 184, 166, 0.17), transparent 30%),
        radial-gradient(circle at 86% 12%, rgba(59, 130, 246, 0.10), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #f5fbf8 54%, #eef8f5 100%);
    box-shadow: 0 28px 80px rgba(15, 76, 89, 0.10);
}

.category-directory-hero::after {
    content: "";
    position: absolute;
    inset: auto -8% -24% 42%;
    height: 240px;
    border-radius: 999px;
    background: rgba(20, 184, 166, .10);
    filter: blur(18px);
}

.category-directory-hero__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 350px;
}

.category-directory-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #476276;
    font-size: 13px;
    margin-bottom: 18px;
}

.category-directory-breadcrumb a:hover,
.category-directory-breadcrumb a:focus-visible {
    color: var(--cat-green-dark);
}

.category-directory-eyebrow,
.category-directory-section-kicker {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--cat-green-dark);
    background: rgba(15, 118, 110, 0.08);
    border: 1px solid rgba(15, 118, 110, 0.12);
    border-radius: 999px;
    padding: 8px 13px;
    font-weight: 900;
    font-size: 13px;
}

.category-directory-hero h1 {
    margin: 0;
    max-width: 800px;
    font-size: clamp(31px, 4.5vw, 54px);
    line-height: 1.34;
    letter-spacing: -0.035em;
    color: #0b2637;
}

.category-directory-lead {
    margin: 18px 0 0;
    max-width: 790px;
    color: #43566b;
    font-size: 17px;
    line-height: 2.08;
}

.category-directory-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.category-directory-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    border-radius: 17px;
    padding: 0 19px;
    font-weight: 950;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.category-directory-btn:hover,
.category-directory-btn:focus-visible {
    transform: translateY(-2px);
}

.category-directory-btn--primary {
    color: #fff !important;
    background: linear-gradient(135deg, #0f766e, #12846f);
    box-shadow: 0 16px 34px rgba(15, 118, 110, 0.24);
}

.category-directory-btn--ghost {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(15, 118, 110, 0.16);
    color: #134e4a;
}

.category-directory-hero__visual {
    position: relative;
    min-height: 370px;
    border-radius: 30px;
    overflow: hidden;
    background:
        radial-gradient(circle at 52% 34%, rgba(20, 184, 166, .22), transparent 36%),
        linear-gradient(145deg, rgba(255,255,255,0.74), rgba(234, 248, 244, 0.82));
    border: 1px solid rgba(15, 118, 110, 0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 22px 52px rgba(15, 76, 89, .10);
}

.category-directory-hero__visual::before,
.category-directory-hero__visual::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    border: 1px dashed rgba(15, 118, 110, .20);
    inset: 14% 10%;
    transform: rotate(-10deg);
}

.category-directory-hero__visual::after {
    inset: 28% 16%;
    transform: rotate(22deg);
    border-color: rgba(59, 130, 246, .18);
}

.category-directory-visual-panel,
.category-directory-visual-card {
    position: absolute;
    z-index: 2;
    border: 1px solid rgba(255,255,255,.78);
    background: rgba(255,255,255,.86);
    box-shadow: 0 18px 44px rgba(15, 76, 89, .13);
    backdrop-filter: blur(12px);
}

.category-directory-visual-panel--main {
    left: 50%;
    top: 51%;
    transform: translate(-50%, -50%);
    width: min(270px, 68%);
    border-radius: 28px;
    padding: 22px;
    text-align: center;
}

.category-directory-visual-badge {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 21px;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    box-shadow: 0 16px 28px rgba(15, 118, 110, .26);
    font-size: 24px;
    margin-bottom: 12px;
}

.category-directory-visual-panel strong {
    display: block;
    font-size: 20px;
    line-height: 1.65;
    color: #0f2b46;
}

.category-directory-visual-panel p {
    margin: 8px 0 14px;
    color: #52677a;
    line-height: 1.9;
    font-size: 13px;
}

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

.category-directory-visual-row span {
    display: block;
    height: 9px;
    border-radius: 999px;
    background: rgba(15, 118, 110, .13);
}

.category-directory-visual-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 20px;
    padding: 13px 15px;
    color: #164e63;
    font-weight: 950;
}

.category-directory-visual-card i { color: #0f766e; }
.category-directory-visual-card--client { top: 30px; right: 26px; }
.category-directory-visual-card--freelancer { left: 24px; top: 86px; }
.category-directory-visual-card--trust { right: 44px; bottom: 38px; }

.category-directory-role-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.category-directory-role-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 18px;
    align-items: flex-start;
    border: 1px solid rgba(15, 118, 110, .11);
    border-radius: 28px;
    padding: 24px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(15, 76, 89, .06);
}

.category-directory-role-card h2 {
    margin: 0 0 10px;
    font-size: clamp(21px, 2.4vw, 30px);
    line-height: 1.55;
    color: #0b2637;
}

.category-directory-role-card p:last-child {
    margin: 0;
    color: #52677a;
    line-height: 2;
}

.category-directory-role-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: rgba(15, 118, 110, .09);
    color: #0f766e;
    font-size: 22px;
}

.category-directory-role-card--freelancer .category-directory-role-icon {
    background: rgba(37, 99, 235, .08);
    color: #2563eb;
}

.category-directory-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0 0;
}

.category-directory-stats article {
    border: 1px solid rgba(15, 118, 110, .12);
    border-radius: 22px;
    padding: 18px 20px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 76, 89, .06);
}

.category-directory-stats strong {
    display: block;
    color: #0f766e;
    font-size: 28px;
    line-height: 1;
    margin-bottom: 8px;
}

.category-directory-stats span {
    color: #64748b;
    font-size: 14px;
    font-weight: 850;
}

.category-directory-intro,
.category-directory-featured,
.category-directory-grid-section,
.category-directory-decision,
.category-directory-collab {
    margin-top: 34px;
}

.category-directory-intro {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    gap: 28px;
    align-items: center;
    padding: 30px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(15, 118, 110, .10);
    box-shadow: 0 14px 40px rgba(15, 76, 89, .05);
}

.category-directory-intro h2,
.category-directory-section-head h2,
.category-directory-decision h2,
.category-directory-collab h2 {
    margin: 0;
    color: #0b2637;
    font-size: clamp(23px, 3vw, 35px);
    line-height: 1.55;
}

.category-directory-intro p:last-child,
.category-directory-section-head p,
.category-directory-collab__copy p:last-child {
    margin: 0;
    color: #43566b;
    line-height: 2.05;
    font-size: 16px;
}

.category-directory-section-head {
    max-width: 820px;
    margin: 0 auto 20px;
    text-align: center;
}

.category-directory-section-head--split {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 24px;
    max-width: none;
    text-align: right;
    align-items: end;
}

.category-directory-featured {
    padding: 28px;
    border-radius: 30px;
    background: linear-gradient(135deg, #f7fcfa, #eef8f5);
    border: 1px solid rgba(15, 118, 110, .10);
}

.category-directory-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.category-directory-featured-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100%;
    border-radius: 24px;
    padding: 20px;
    overflow: hidden;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(15, 118, 110, .10);
    box-shadow: 0 14px 34px rgba(15, 76, 89, .06);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.category-directory-featured-card:hover,
.category-directory-featured-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(15, 118, 110, .24);
    box-shadow: 0 22px 52px rgba(15, 76, 89, .11);
}

.category-directory-featured-card strong {
    color: #0b2637;
    font-size: 18px;
    line-height: 1.5;
}

.category-directory-featured-card > span:last-child {
    color: #52677a;
    line-height: 1.95;
    font-size: 14px;
}

.category-directory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.category-directory-card {
    position: relative;
    min-height: 100%;
    border-radius: 27px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(15, 118, 110, .12);
    box-shadow: 0 16px 42px rgba(15, 76, 89, .07);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.category-directory-card:hover,
.category-directory-card:focus-within {
    transform: translateY(-4px);
    border-color: rgba(15, 118, 110, .25);
    box-shadow: 0 22px 56px rgba(15, 76, 89, .12);
}

.category-directory-card::before,
.category-directory-featured-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, #0f766e, #14b8a6);
}

.category-directory-card--blue::before { background: linear-gradient(90deg, #2563eb, #38bdf8); }
.category-directory-card--violet::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.category-directory-card--amber::before { background: linear-gradient(90deg, #d97706, #fbbf24); }
.category-directory-card--rose::before { background: linear-gradient(90deg, #e11d48, #fb7185); }
.category-directory-card--slate::before { background: linear-gradient(90deg, #334155, #64748b); }
.category-directory-card--cyan::before { background: linear-gradient(90deg, #0891b2, #22d3ee); }
.category-directory-card--indigo::before { background: linear-gradient(90deg, #4f46e5, #818cf8); }
.category-directory-card--green::before,
.category-directory-card--mint::before,
.category-directory-card--emerald::before,
.category-directory-card--teal::before { background: linear-gradient(90deg, #0f766e, #34d399); }

.category-directory-card__link {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 22px;
}

.category-directory-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.category-directory-card__icon {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #0f766e;
    background: rgba(15, 118, 110, .09);
    font-size: 20px;
    flex: 0 0 auto;
}

.category-directory-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.category-directory-card__meta span {
    border: 1px solid rgba(15, 118, 110, .11);
    color: #52677a;
    background: #f8fbfa;
    border-radius: 999px;
    padding: 6px 9px;
    font-size: 12px;
    font-weight: 850;
}

.category-directory-card strong {
    display: block;
    margin: 0 0 10px;
    color: #0b2637;
    font-size: 20px;
    line-height: 1.5;
}

.category-directory-card__summary {
    display: block;
    color: #53687c;
    font-size: 14.5px;
    line-height: 1.95;
    min-height: 86px;
}

.category-directory-skill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 16px;
}

.category-directory-skill-list span {
    display: inline-flex;
    max-width: 100%;
    border-radius: 999px;
    padding: 7px 10px;
    color: #134e4a;
    background: rgba(15, 118, 110, .08);
    border: 1px solid rgba(15, 118, 110, .10);
    font-size: 12.5px;
    font-weight: 850;
}

.category-directory-card__empty {
    display: block;
    margin-top: 16px;
    color: #64748b;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    padding: 12px;
    line-height: 1.8;
    font-size: 13px;
}

.category-directory-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
    color: #0f766e;
    font-size: 14px;
    font-weight: 950;
}

.category-directory-decision {
    padding: 30px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(15, 118, 110, .10);
    box-shadow: 0 14px 40px rgba(15, 76, 89, .05);
}

.category-directory-decision-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.category-directory-decision-grid article {
    border: 1px solid rgba(15, 118, 110, .12);
    border-radius: 24px;
    padding: 20px;
    background: #f8fcfa;
}

.category-directory-decision-grid span {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #0f3f3d;
    background: #d1fae5;
    font-weight: 950;
    margin-bottom: 14px;
}

.category-directory-decision-grid strong {
    display: block;
    margin-bottom: 10px;
    color: #0b2637;
    font-size: 17px;
}

.category-directory-decision-grid p {
    margin: 0;
    color: #52677a;
    line-height: 1.95;
    font-size: 14px;
}

.category-directory-collab {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 24px;
    align-items: stretch;
    padding: 30px;
    border-radius: 32px;
    color: #fff;
    background: linear-gradient(135deg, #0f2b46, #0f172a 60%, #14532d);
    box-shadow: 0 22px 58px rgba(2, 6, 23, .14);
}

.category-directory-collab .category-directory-section-kicker {
    color: #d1fae5;
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.16);
}

.category-directory-collab h2 { color: #fff; }
.category-directory-collab__copy p:last-child { color: rgba(255,255,255,.82); }

.category-directory-collab__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.category-directory-collab__cards a {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    padding: 16px;
    background: rgba(255,255,255,.08);
}

.category-directory-collab__cards i {
    grid-row: span 2;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #0f2b46;
    background: #d1fae5;
}

.category-directory-collab__cards b { color: #fff; font-size: 16px; }
.category-directory-collab__cards span { color: rgba(255,255,255,.78); line-height: 1.9; font-size: 14px; }

.category-directory-empty {
    margin-top: 22px;
    text-align: center;
    border: 1px dashed rgba(15, 118, 110, .22);
    border-radius: 28px;
    padding: 42px 22px;
    background: #fff;
    color: #52677a;
}

.category-directory-empty i {
    font-size: 38px;
    color: #0f766e;
    margin-bottom: 14px;
}

.category-directory-empty h2 {
    margin: 0 0 10px;
    color: #0b2637;
}

@media (max-width: 1100px) {
    .category-directory-grid,
    .category-directory-featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .category-directory-hero,
    .category-directory-intro,
    .category-directory-section-head--split,
    .category-directory-collab,
    .category-directory-role-strip {
        grid-template-columns: 1fr;
    }
    .category-directory-hero__copy {
        min-height: auto;
    }
    .category-directory-decision-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .category-directory-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .category-directory-page {
        padding-top: 16px;
    }
    .category-directory-hero,
    .category-directory-intro,
    .category-directory-featured,
    .category-directory-decision,
    .category-directory-collab {
        border-radius: 24px;
        padding: 22px;
    }
    .category-directory-grid,
    .category-directory-featured-grid,
    .category-directory-decision-grid,
    .category-directory-stats {
        grid-template-columns: 1fr;
    }
    .category-directory-hero__visual {
        min-height: 300px;
    }
    .category-directory-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .category-directory-btn {
        width: 100%;
    }
    .category-directory-role-card {
        grid-template-columns: 1fr;
    }
    .category-directory-section-head,
    .category-directory-section-head--split {
        text-align: right;
    }
}


/* === SEO Phase 10: Premium Categories Directory Redesign (/categories) === */
#category-directory-pro,
#category-directory-pro * {
    font-family: inherit !important;
    box-sizing: border-box;
}

#category-directory-pro {
    --cat-pro-ink: #102a43;
    --cat-pro-navy: #0f2b46;
    --cat-pro-muted: #5f7185;
    --cat-pro-green: #0f766e;
    --cat-pro-green-2: #14b8a6;
    --cat-pro-line: rgba(15, 118, 110, 0.14);
    --cat-pro-card: rgba(255, 255, 255, 0.92);
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: clamp(18px, 3vw, 34px) 0 74px;
    direction: rtl;
    color: var(--cat-pro-ink);
    background:
        radial-gradient(circle at 14% 7%, rgba(20, 184, 166, 0.12), transparent 28%),
        radial-gradient(circle at 88% 5%, rgba(59, 130, 246, 0.09), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #fbfefd 44%, #f7fbfa 100%);
}

#category-directory-pro a {
    color: inherit;
    text-decoration: none !important;
}

.category-directory-hero--pro {
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(360px, .97fr);
    gap: clamp(22px, 3vw, 38px);
    align-items: stretch;
    overflow: hidden;
    position: relative;
    padding: clamp(28px, 4vw, 56px);
    border: 1px solid rgba(15, 118, 110, 0.13);
    border-radius: 38px;
    background:
        radial-gradient(circle at 83% 18%, rgba(20, 184, 166, .20), transparent 30%),
        radial-gradient(circle at 16% 20%, rgba(15, 43, 70, .07), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f3fbf8 50%, #e9f7f4 100%);
    box-shadow: 0 30px 90px rgba(15, 76, 89, 0.11);
}

.category-directory-hero--pro::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 999px;
    left: -170px;
    bottom: -220px;
    background: rgba(20, 184, 166, .13);
    filter: blur(8px);
}

.category-directory-hero--pro .category-directory-hero__copy {
    position: relative;
    z-index: 2;
    min-height: 430px;
    justify-content: center;
}

#category-directory-pro .category-directory-breadcrumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    width: fit-content;
    gap: 9px;
    margin: 0 0 18px;
    padding: 8px 12px;
    border: 1px solid rgba(15, 118, 110, .12);
    border-radius: 999px;
    color: #4b6378;
    background: rgba(255, 255, 255, .72);
    font-size: 13px;
    font-weight: 800;
}

#category-directory-pro .category-directory-eyebrow,
#category-directory-pro .category-directory-section-kicker {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(15, 118, 110, 0.14);
    color: #0f766e;
    background: rgba(15, 118, 110, 0.08);
    font-size: 13px;
    font-weight: 950;
}

.category-directory-hero--pro h1 {
    margin: 0;
    max-width: 820px;
    color: #0b2637;
    font-size: clamp(34px, 4.6vw, 58px);
    line-height: 1.34;
    letter-spacing: -0.045em;
    font-weight: 1000;
}

.category-directory-hero--pro .category-directory-lead {
    margin: 20px 0 0;
    max-width: 780px;
    color: #42596d;
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 2.12;
    font-weight: 650;
}

#category-directory-pro .category-directory-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

#category-directory-pro .category-directory-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 21px;
    border-radius: 18px;
    font-weight: 950;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

#category-directory-pro .category-directory-btn:hover,
#category-directory-pro .category-directory-btn:focus-visible,
#category-directory-pro .category-directory-role-card a:hover,
#category-directory-pro .category-directory-role-card a:focus-visible {
    transform: translateY(-2px);
}

#category-directory-pro .category-directory-btn--primary {
    color: #fff !important;
    background: linear-gradient(135deg, #0f766e 0%, #12967f 100%);
    box-shadow: 0 18px 36px rgba(15, 118, 110, 0.24);
}

#category-directory-pro .category-directory-btn--ghost {
    color: #0f4f4a !important;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(15, 118, 110, .18);
}

.category-directory-hero--pro .category-directory-hero__visual {
    position: relative;
    z-index: 2;
    min-height: 430px;
    overflow: hidden;
    border-radius: 34px;
    border: 1px solid rgba(255,255,255,.78);
    background:
        radial-gradient(circle at 46% 24%, rgba(20, 184, 166, .22), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.76), rgba(235, 248, 244, .86));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 26px 58px rgba(15, 76, 89, .12);
}

.category-directory-hero--pro .category-directory-hero__visual > img {
    position: absolute;
    inset: 10% auto auto 50%;
    width: min(88%, 520px);
    height: auto;
    transform: translateX(-50%);
    filter: drop-shadow(0 24px 35px rgba(15, 76, 89, .12));
}

.category-directory-floating-card {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.84);
    background: rgba(255,255,255,.84);
    box-shadow: 0 18px 44px rgba(15, 76, 89, .13);
    color: #124e4a;
    font-size: 13px;
    font-weight: 950;
    backdrop-filter: blur(12px);
}
.category-directory-floating-card i { color: #0f766e; }
.category-directory-floating-card--brief { top: 34px; right: 28px; }
.category-directory-floating-card--talent { top: 110px; left: 26px; }
.category-directory-floating-card--trust { right: 42px; bottom: 38px; }

.category-directory-role-strip--pro,
.category-directory-stats--pro,
.category-directory-featured--pro,
.category-directory-intro--pro,
.category-directory-grid-section--pro,
.category-directory-decision--pro,
.category-directory-collab--pro {
    margin-top: 24px;
}

.category-directory-role-strip--pro {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.category-directory-role-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 24px;
    border: 1px solid rgba(15, 118, 110, .12);
    border-radius: 28px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 48px rgba(15, 76, 89, .08);
}
.category-directory-role-card--client { background: linear-gradient(135deg, #ffffff, #f5fbf8); }
.category-directory-role-card--freelancer { background: linear-gradient(135deg, #ffffff, #f3f8ff); }
.category-directory-role-icon {
    width: 58px;
    height: 58px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    box-shadow: 0 16px 30px rgba(15,118,110,.20);
}
.category-directory-role-card--freelancer .category-directory-role-icon { background: linear-gradient(135deg, #1d4ed8, #38bdf8); }
.category-directory-role-card h2 {
    margin: 0 0 10px;
    color: #0f2b46;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.55;
    font-weight: 1000;
}
.category-directory-role-card p:not(.category-directory-section-kicker) {
    margin: 0;
    color: #4f6478;
    line-height: 2;
    font-weight: 650;
}
.category-directory-role-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 14px;
    color: #0f766e !important;
    background: rgba(15,118,110,.08);
    font-weight: 950;
    transition: transform .2s ease, background .2s ease;
}

.category-directory-stats--pro {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.category-directory-stats--pro article {
    padding: 18px;
    border: 1px solid rgba(15,118,110,.12);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 76, 89, .06);
}
.category-directory-stats--pro strong {
    display: block;
    color: #0f766e;
    font-size: clamp(26px, 2.8vw, 38px);
    line-height: 1.2;
    font-weight: 1000;
}
.category-directory-stats--pro span { color: #5e7082; font-weight: 850; }

.category-directory-featured--pro,
.category-directory-intro--pro,
.category-directory-grid-section--pro,
.category-directory-decision--pro,
.category-directory-collab--pro,
.category-directory-empty {
    padding: clamp(24px, 3vw, 34px);
    border: 1px solid rgba(15, 118, 110, .11);
    border-radius: 32px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 20px 54px rgba(15, 76, 89, .075);
}

.category-directory-section-head {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}
.category-directory-section-head--split {
    grid-template-columns: minmax(0, .9fr) minmax(280px, .75fr);
    align-items: end;
    gap: 20px;
}
.category-directory-section-head h2,
.category-directory-intro--pro h2,
.category-directory-collab--pro h2 {
    margin: 0;
    color: #0f2b46;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.55;
    font-weight: 1000;
    letter-spacing: -0.02em;
}
.category-directory-section-head p:not(.category-directory-section-kicker),
.category-directory-intro--pro > p,
.category-directory-collab__copy p:last-child {
    margin: 0;
    color: #53677b;
    line-height: 2.05;
    font-weight: 650;
    font-size: 15px;
}

.category-directory-featured-grid--image {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.category-directory-featured-card {
    position: relative;
    overflow: hidden;
    display: grid;
    min-height: 265px;
    align-content: start;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(15,118,110,.12);
    border-radius: 28px;
    background:
        radial-gradient(circle at 14% 16%, rgba(20,184,166,.12), transparent 36%),
        #fff;
    box-shadow: 0 18px 44px rgba(15, 76, 89, .075);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.category-directory-featured-card:hover,
.category-directory-featured-card:focus-visible,
.category-directory-card:hover,
.category-directory-card:focus-within {
    transform: translateY(-4px);
    border-color: rgba(15,118,110,.24);
    box-shadow: 0 24px 62px rgba(15, 76, 89, .12);
}
.category-directory-featured-card__media {
    display: inline-flex;
    width: 88px;
    height: 88px;
    border-radius: 28px;
    overflow: hidden;
    background: #f4fbf8;
}
.category-directory-featured-card__media img,
.category-directory-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.category-directory-featured-card__body { display: grid; gap: 9px; }
.category-directory-featured-card strong {
    color: #0f2b46;
    font-size: 20px;
    line-height: 1.55;
    font-weight: 1000;
}
.category-directory-featured-card__body > span {
    color: #5a6e82;
    line-height: 1.9;
    font-size: 14px;
    font-weight: 650;
}

.category-directory-intro--pro {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(280px, 1fr);
    gap: 22px;
    align-items: center;
    background:
        linear-gradient(135deg, rgba(15,118,110,.07), rgba(59,130,246,.05)),
        #fff;
}

.category-directory-grid--pro {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.category-directory-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(15,118,110,.12);
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 76, 89, .07);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.category-directory-card::before,
.category-directory-featured-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #0f766e, #14b8a6);
}
.category-directory-card--blue::before { background: linear-gradient(90deg, #2563eb, #38bdf8); }
.category-directory-card--violet::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.category-directory-card--amber::before { background: linear-gradient(90deg, #d97706, #fbbf24); }
.category-directory-card--rose::before { background: linear-gradient(90deg, #e11d48, #fb7185); }
.category-directory-card--slate::before { background: linear-gradient(90deg, #334155, #94a3b8); }
.category-directory-card--indigo::before { background: linear-gradient(90deg, #4f46e5, #818cf8); }
.category-directory-card--cyan::before { background: linear-gradient(90deg, #0891b2, #22d3ee); }
.category-directory-card--green::before { background: linear-gradient(90deg, #16a34a, #86efac); }
.category-directory-card--teal::before { background: linear-gradient(90deg, #0ea5a4, #22c55e); }
.category-directory-card--mint::before { background: linear-gradient(90deg, #0f766e, #99f6e4); }
.category-directory-card__link {
    display: grid;
    grid-template-columns: 98px minmax(0, 1fr);
    gap: 16px;
    min-height: 100%;
    padding: 22px;
}
.category-directory-card__media {
    display: inline-flex;
    width: 86px;
    height: 86px;
    border-radius: 28px;
    overflow: hidden;
    background: #f4fbf8;
}
.category-directory-card__content { display: grid; gap: 12px; }
.category-directory-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.category-directory-card__top strong {
    color: #0f2b46;
    font-size: 22px;
    line-height: 1.45;
    font-weight: 1000;
}
.category-directory-card__meta {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}
.category-directory-card__meta span {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    color: #0f766e;
    background: rgba(15,118,110,.08);
    font-size: 12px;
    font-weight: 900;
}
.category-directory-card__summary {
    color: #53677a;
    line-height: 1.95;
    font-size: 14px;
    font-weight: 650;
}
.category-directory-card__audience {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}
.category-directory-card__audience span {
    display: block;
    min-height: 76px;
    padding: 11px 12px;
    border-radius: 17px;
    background: #f8fbfa;
    border: 1px solid rgba(15,118,110,.09);
    color: #53677a;
    line-height: 1.85;
    font-size: 13px;
    font-weight: 650;
}
.category-directory-card__audience b { color: #0f2b46; }
.category-directory-skill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.category-directory-skill-list span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #31506a;
    background: #f1f7f5;
    border: 1px solid rgba(15,118,110,.10);
    font-size: 12px;
    font-weight: 850;
}
.category-directory-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: 2px;
    color: #0f766e;
    font-weight: 1000;
}

.category-directory-decision-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.category-directory-decision-grid article {
    padding: 21px;
    border: 1px solid rgba(15,118,110,.10);
    border-radius: 24px;
    background: linear-gradient(180deg, #fff, #f8fcfb);
}
.category-directory-decision-grid article > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
    border-radius: 15px;
    color: #fff;
    background: #0f766e;
    font-weight: 1000;
}
.category-directory-decision-grid strong {
    display: block;
    color: #0f2b46;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 1000;
}
.category-directory-decision-grid p {
    margin: 8px 0 0;
    color: #5b7083;
    line-height: 1.95;
    font-weight: 650;
}

.category-directory-collab--pro {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(320px, 1.15fr);
    gap: 22px;
    align-items: center;
    background:
        radial-gradient(circle at 18% 24%, rgba(15,118,110,.10), transparent 30%),
        linear-gradient(135deg, #ffffff, #f6fbf9);
}
.category-directory-collab__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.category-directory-collab__cards a {
    display: grid;
    gap: 9px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(15,118,110,.11);
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 76, 89, .06);
}
.category-directory-collab__cards i {
    color: #0f766e;
    font-size: 22px;
}
.category-directory-collab__cards b {
    color: #0f2b46;
    font-size: 16px;
    font-weight: 1000;
}
.category-directory-collab__cards span {
    color: #607487;
    line-height: 1.85;
    font-size: 13px;
    font-weight: 650;
}

@media (max-width: 1100px) {
    .category-directory-hero--pro,
    .category-directory-intro--pro,
    .category-directory-collab--pro,
    .category-directory-section-head--split {
        grid-template-columns: 1fr;
    }
    .category-directory-featured-grid--image { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .category-directory-grid--pro { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    #category-directory-pro { padding: 12px 0 46px; }
    .category-directory-hero--pro,
    .category-directory-featured--pro,
    .category-directory-intro--pro,
    .category-directory-grid-section--pro,
    .category-directory-decision--pro,
    .category-directory-collab--pro { border-radius: 24px; }
    .category-directory-role-strip--pro,
    .category-directory-stats--pro,
    .category-directory-featured-grid--image,
    .category-directory-card__audience,
    .category-directory-decision-grid,
    .category-directory-collab__cards { grid-template-columns: 1fr; }
    .category-directory-card__link { grid-template-columns: 1fr; }
    .category-directory-card__top { display: grid; }
    .category-directory-card__meta { justify-content: flex-start; }
    .category-directory-hero--pro .category-directory-hero__visual { min-height: 320px; }
    .category-directory-floating-card { display: none; }
}

/* === SEO Phase 11: Audience-first premium Categories Directory (/categories) === */
#category-directory-pro.category-directory-page--premium,
#category-directory-pro.category-directory-page--premium * {
    font-family: inherit !important;
    box-sizing: border-box;
}

#category-directory-pro.category-directory-page--premium {
    --cat-ink: #102a43;
    --cat-navy: #0f2b46;
    --cat-muted: #5f7185;
    --cat-green: #0f766e;
    --cat-green-2: #14b8a6;
    --cat-blue: #2563eb;
    --cat-line: rgba(15, 118, 110, .14);
    --cat-shadow: 0 24px 70px rgba(15, 76, 89, .095);
    width: min(100%, 1288px);
    margin: 0 auto;
    padding: clamp(18px, 3vw, 34px) clamp(10px, 1.5vw, 18px) 76px;
    direction: rtl;
    color: var(--cat-ink);
    background:
        radial-gradient(circle at 11% 3%, rgba(20,184,166,.10), transparent 24%),
        radial-gradient(circle at 88% 1%, rgba(37,99,235,.075), transparent 22%),
        linear-gradient(180deg, #fff 0%, #fbfefd 45%, #f7fbfa 100%);
}

#category-directory-pro.category-directory-page--premium a {
    color: inherit;
    text-decoration: none !important;
}

#category-directory-pro .category-directory-hero--premium {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(380px, .96fr);
    gap: clamp(24px, 3.2vw, 42px);
    align-items: stretch;
    overflow: hidden;
    position: relative;
    padding: clamp(30px, 4.6vw, 62px);
    border: 1px solid rgba(15, 118, 110, .14);
    border-radius: 42px;
    background:
        radial-gradient(circle at 82% 18%, rgba(20,184,166,.20), transparent 28%),
        radial-gradient(circle at 16% 22%, rgba(15,43,70,.075), transparent 28%),
        linear-gradient(135deg, #fff 0%, #f4fbf8 53%, #eaf8f4 100%);
    box-shadow: 0 34px 96px rgba(15, 76, 89, .12);
}

#category-directory-pro .category-directory-hero--premium::before {
    content: "";
    position: absolute;
    inset: auto -8% -28% 44%;
    height: 280px;
    border-radius: 999px;
    background: rgba(20,184,166,.12);
    filter: blur(16px);
}

#category-directory-pro .category-directory-hero__copy {
    position: relative;
    z-index: 2;
    min-height: 438px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#category-directory-pro .category-directory-breadcrumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    width: fit-content;
    gap: 9px;
    margin: 0 0 18px;
    padding: 8px 12px;
    border: 1px solid rgba(15,118,110,.12);
    border-radius: 999px;
    color: #4b6378;
    background: rgba(255,255,255,.76);
    font-size: 13px;
    font-weight: 850;
}

#category-directory-pro .category-directory-eyebrow,
#category-directory-pro .category-directory-section-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(15,118,110,.14);
    color: var(--cat-green);
    background: rgba(15,118,110,.08);
    font-size: 13px;
    font-weight: 950;
}

#category-directory-pro .category-directory-hero--premium h1 {
    margin: 0;
    max-width: 820px;
    color: #0b2637;
    font-size: clamp(34px, 4.3vw, 56px);
    line-height: 1.35;
    letter-spacing: -0.035em;
    font-weight: 1000;
}

#category-directory-pro .category-directory-lead {
    margin: 20px 0 0;
    max-width: 800px;
    color: #42596d;
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 2.12;
    font-weight: 650;
}

#category-directory-pro .category-directory-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

#category-directory-pro .category-directory-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 21px;
    border-radius: 18px;
    font-weight: 950;
    border: 1px solid transparent;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

#category-directory-pro .category-directory-btn:hover,
#category-directory-pro .category-directory-btn:focus-visible,
#category-directory-pro .category-directory-role-card a:hover,
#category-directory-pro .category-directory-role-card a:focus-visible,
#category-directory-pro .category-directory-collab__cards a:hover,
#category-directory-pro .category-directory-collab__cards a:focus-visible {
    transform: translateY(-2px);
}

#category-directory-pro .category-directory-btn--primary {
    color: #fff !important;
    background: linear-gradient(135deg, #0f766e 0%, #12967f 100%);
    box-shadow: 0 18px 36px rgba(15,118,110,.24);
}
#category-directory-pro .category-directory-btn--ghost {
    color: #0f4f4a !important;
    background: rgba(255,255,255,.82);
    border-color: rgba(15,118,110,.18);
}
#category-directory-pro .category-directory-btn--light {
    color: #0f2b46 !important;
    background: rgba(15,43,70,.06);
    border-color: rgba(15,43,70,.08);
}

#category-directory-pro .category-directory-hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}
#category-directory-pro .category-directory-hero__proof span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(15,118,110,.12);
    color: #31566a;
    font-size: 13px;
    font-weight: 850;
}
#category-directory-pro .category-directory-hero__proof i { color: var(--cat-green); }

#category-directory-pro .category-directory-hero--premium .category-directory-hero__visual {
    position: relative;
    z-index: 2;
    min-height: 438px;
    overflow: hidden;
    border-radius: 36px;
    border: 1px solid rgba(255,255,255,.82);
    background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(235,248,244,.88));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 28px 64px rgba(15,76,89,.13);
}
#category-directory-pro .category-directory-hero--premium .category-directory-hero__visual > img {
    position: absolute;
    inset: 50% auto auto 50%;
    width: min(94%, 660px);
    height: auto;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 26px 38px rgba(15,76,89,.12));
}
#category-directory-pro .category-directory-floating-card {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.86);
    background: rgba(255,255,255,.86);
    box-shadow: 0 18px 44px rgba(15,76,89,.13);
    color: #124e4a;
    font-size: 13px;
    font-weight: 950;
    backdrop-filter: blur(12px);
}
#category-directory-pro .category-directory-floating-card i { color: var(--cat-green); }
#category-directory-pro .category-directory-floating-card--brief { top: 34px; right: 28px; }
#category-directory-pro .category-directory-floating-card--talent { top: 112px; left: 28px; }
#category-directory-pro .category-directory-floating-card--trust { right: 42px; bottom: 38px; }

#category-directory-pro .category-directory-role-strip--premium,
#category-directory-pro .category-directory-stats--premium,
#category-directory-pro .category-directory-journey--premium,
#category-directory-pro .category-directory-featured--premium,
#category-directory-pro .category-directory-grid-section--premium,
#category-directory-pro .category-directory-decision--premium,
#category-directory-pro .category-directory-collab--premium {
    margin-top: 24px;
}

#category-directory-pro .category-directory-role-strip--premium {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
#category-directory-pro .category-directory-role-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 26px;
    border: 1px solid rgba(15,118,110,.12);
    border-radius: 30px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 20px 54px rgba(15,76,89,.075);
}
#category-directory-pro .category-directory-role-card--client { background: linear-gradient(135deg, #fff, #f5fbf8); }
#category-directory-pro .category-directory-role-card--freelancer { background: linear-gradient(135deg, #fff, #f3f8ff); }
#category-directory-pro .category-directory-role-icon {
    width: 60px;
    height: 60px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    box-shadow: 0 16px 30px rgba(15,118,110,.20);
}
#category-directory-pro .category-directory-role-card--freelancer .category-directory-role-icon { background: linear-gradient(135deg, #1d4ed8, #38bdf8); }
#category-directory-pro .category-directory-role-card h2 {
    margin: 0 0 10px;
    color: var(--cat-navy);
    font-size: clamp(22px, 2vw, 29px);
    line-height: 1.55;
    font-weight: 1000;
}
#category-directory-pro .category-directory-role-card p:not(.category-directory-section-kicker) {
    margin: 0;
    color: #4f6478;
    line-height: 2;
    font-weight: 650;
}
#category-directory-pro .category-directory-role-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 14px;
    color: var(--cat-green) !important;
    background: rgba(15,118,110,.08);
    font-weight: 950;
    transition: transform .2s ease, background .2s ease;
}

#category-directory-pro .category-directory-stats--premium {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
#category-directory-pro .category-directory-stats--premium article {
    padding: 19px 20px;
    border: 1px solid rgba(15,118,110,.12);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15,76,89,.06);
}
#category-directory-pro .category-directory-stats--premium strong {
    display: block;
    color: var(--cat-green);
    font-size: clamp(26px, 2.8vw, 38px);
    line-height: 1.2;
    font-weight: 1000;
}
#category-directory-pro .category-directory-stats--premium span { color: #5e7082; font-weight: 850; }

#category-directory-pro .category-directory-journey--premium,
#category-directory-pro .category-directory-featured--premium,
#category-directory-pro .category-directory-grid-section--premium,
#category-directory-pro .category-directory-decision--premium,
#category-directory-pro .category-directory-collab--premium {
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid rgba(15,118,110,.11);
    border-radius: 34px;
    background: rgba(255,255,255,.95);
    box-shadow: var(--cat-shadow);
}
#category-directory-pro .category-directory-section-head {
    display: grid;
    gap: 10px;
    margin: 0 0 22px;
    max-width: 860px;
}
#category-directory-pro .category-directory-section-head--split {
    grid-template-columns: minmax(0, .95fr) minmax(280px, .82fr);
    align-items: end;
    gap: 22px;
    max-width: none;
}
#category-directory-pro .category-directory-section-head h2,
#category-directory-pro .category-directory-decision--premium h2,
#category-directory-pro .category-directory-collab--premium h2 {
    margin: 0;
    color: var(--cat-navy);
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.55;
    font-weight: 1000;
    letter-spacing: -0.02em;
}
#category-directory-pro .category-directory-section-head p:not(.category-directory-section-kicker),
#category-directory-pro .category-directory-collab__copy p:last-child {
    margin: 0;
    color: #53677b;
    line-height: 2.05;
    font-weight: 650;
    font-size: 15px;
}

#category-directory-pro .category-directory-journey--premium {
    background: linear-gradient(135deg, rgba(15,118,110,.065), rgba(37,99,235,.045)), #fff;
}
#category-directory-pro .category-directory-journey-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
#category-directory-pro .category-directory-journey-grid article {
    min-height: 188px;
    padding: 20px;
    border: 1px solid rgba(15,118,110,.10);
    border-radius: 24px;
    background: rgba(255,255,255,.84);
    box-shadow: 0 14px 34px rgba(15,76,89,.055);
}
#category-directory-pro .category-directory-journey-grid i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}
#category-directory-pro .category-directory-journey-grid strong {
    display: block;
    color: var(--cat-navy);
    font-size: 17px;
    line-height: 1.75;
    font-weight: 1000;
}
#category-directory-pro .category-directory-journey-grid span {
    display: block;
    margin-top: 6px;
    color: #5b7083;
    line-height: 1.9;
    font-size: 14px;
    font-weight: 650;
}

#category-directory-pro .category-directory-featured-grid--premium {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
#category-directory-pro .category-directory-featured-card {
    position: relative;
    overflow: hidden;
    display: grid;
    min-height: 292px;
    align-content: start;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(15,118,110,.12);
    border-radius: 29px;
    background: radial-gradient(circle at 14% 16%, rgba(20,184,166,.12), transparent 36%), #fff;
    box-shadow: 0 18px 44px rgba(15,76,89,.075);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
#category-directory-pro .category-directory-featured-card:hover,
#category-directory-pro .category-directory-featured-card:focus-visible,
#category-directory-pro .category-directory-card:hover,
#category-directory-pro .category-directory-card:focus-within {
    transform: translateY(-4px);
    border-color: rgba(15,118,110,.24);
    box-shadow: 0 24px 62px rgba(15,76,89,.12);
}
#category-directory-pro .category-directory-featured-card::before,
#category-directory-pro .category-directory-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #0f766e, #14b8a6);
}
#category-directory-pro .category-directory-card--blue::before { background: linear-gradient(90deg, #2563eb, #38bdf8); }
#category-directory-pro .category-directory-card--violet::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
#category-directory-pro .category-directory-card--amber::before { background: linear-gradient(90deg, #d97706, #fbbf24); }
#category-directory-pro .category-directory-card--rose::before { background: linear-gradient(90deg, #e11d48, #fb7185); }
#category-directory-pro .category-directory-card--slate::before { background: linear-gradient(90deg, #334155, #94a3b8); }
#category-directory-pro .category-directory-card--indigo::before { background: linear-gradient(90deg, #4f46e5, #818cf8); }
#category-directory-pro .category-directory-card--cyan::before { background: linear-gradient(90deg, #0891b2, #22d3ee); }
#category-directory-pro .category-directory-card--green::before { background: linear-gradient(90deg, #16a34a, #86efac); }
#category-directory-pro .category-directory-card--teal::before { background: linear-gradient(90deg, #0ea5a4, #22c55e); }
#category-directory-pro .category-directory-card--mint::before,
#category-directory-pro .category-directory-card--emerald::before { background: linear-gradient(90deg, #0f766e, #99f6e4); }
#category-directory-pro .category-directory-featured-card__media,
#category-directory-pro .category-directory-card__media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 30px;
    overflow: hidden;
    background: #f4fbf8;
    border: 1px solid rgba(15,118,110,.08);
}
#category-directory-pro .category-directory-featured-card__media img,
#category-directory-pro .category-directory-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#category-directory-pro .category-directory-featured-card__body {
    display: grid;
    gap: 9px;
}
#category-directory-pro .category-directory-featured-card strong {
    color: var(--cat-navy);
    font-size: 20px;
    line-height: 1.55;
    font-weight: 1000;
}
#category-directory-pro .category-directory-featured-card__body > span {
    color: #5a6e82;
    line-height: 1.9;
    font-size: 14px;
    font-weight: 650;
}
#category-directory-pro .category-directory-featured-card em {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin-top: auto;
    color: var(--cat-green);
    font-style: normal;
    font-weight: 1000;
    font-size: 13px;
}

#category-directory-pro .category-directory-grid--premium {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
#category-directory-pro .category-directory-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(15,118,110,.12);
    border-radius: 31px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15,76,89,.07);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
#category-directory-pro .category-directory-card__link {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 17px;
    min-height: 100%;
    padding: 23px;
}
#category-directory-pro .category-directory-card__content { display: grid; gap: 12px; }
#category-directory-pro .category-directory-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
#category-directory-pro .category-directory-card__top strong {
    color: var(--cat-navy);
    font-size: 22px;
    line-height: 1.45;
    font-weight: 1000;
}
#category-directory-pro .category-directory-card__meta {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}
#category-directory-pro .category-directory-card__meta span {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--cat-green);
    background: rgba(15,118,110,.08);
    font-size: 12px;
    font-weight: 900;
}
#category-directory-pro .category-directory-card__summary {
    color: #53677a;
    line-height: 1.95;
    font-size: 14px;
    font-weight: 650;
}
#category-directory-pro .category-directory-card__audience {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}
#category-directory-pro .category-directory-card__audience span {
    display: block;
    min-height: 82px;
    padding: 12px;
    border-radius: 18px;
    background: #f8fbfa;
    border: 1px solid rgba(15,118,110,.09);
    color: #53677a;
    line-height: 1.85;
    font-size: 13px;
    font-weight: 650;
}
#category-directory-pro .category-directory-card__audience b {
    display: block;
    margin-bottom: 5px;
    color: var(--cat-navy);
    font-weight: 1000;
}
#category-directory-pro .category-directory-skill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
#category-directory-pro .category-directory-skill-list span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #31506a;
    background: #f1f7f5;
    border: 1px solid rgba(15,118,110,.10);
    font-size: 12px;
    font-weight: 850;
}
#category-directory-pro .category-directory-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: 2px;
    color: var(--cat-green);
    font-weight: 1000;
}

#category-directory-pro .category-directory-decision-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
#category-directory-pro .category-directory-decision-grid article {
    padding: 22px;
    border: 1px solid rgba(15,118,110,.10);
    border-radius: 24px;
    background: linear-gradient(180deg, #fff, #f8fcfb);
}
#category-directory-pro .category-directory-decision-grid article > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
    border-radius: 15px;
    color: #fff;
    background: var(--cat-green);
    font-weight: 1000;
}
#category-directory-pro .category-directory-decision-grid strong {
    display: block;
    color: var(--cat-navy);
    font-size: 18px;
    line-height: 1.7;
    font-weight: 1000;
}
#category-directory-pro .category-directory-decision-grid p {
    margin: 8px 0 0;
    color: #5b7083;
    line-height: 1.95;
    font-weight: 650;
}

#category-directory-pro .category-directory-collab--premium {
    display: grid;
    grid-template-columns: minmax(0, .84fr) minmax(320px, 1.16fr);
    gap: 22px;
    align-items: center;
    background: radial-gradient(circle at 18% 24%, rgba(15,118,110,.10), transparent 30%), linear-gradient(135deg, #fff, #f6fbf9);
}
#category-directory-pro .category-directory-collab__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
#category-directory-pro .category-directory-collab__cards a {
    display: grid;
    gap: 9px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(15,118,110,.11);
    background: #fff;
    box-shadow: 0 14px 34px rgba(15,76,89,.06);
    transition: transform .2s ease, box-shadow .2s ease;
}
#category-directory-pro .category-directory-collab__cards i {
    color: var(--cat-green);
    font-size: 22px;
}
#category-directory-pro .category-directory-collab__cards b {
    color: var(--cat-navy);
    font-size: 16px;
    font-weight: 1000;
}
#category-directory-pro .category-directory-collab__cards span {
    color: #607487;
    line-height: 1.85;
    font-size: 13px;
    font-weight: 650;
}

@media (max-width: 1120px) {
    #category-directory-pro .category-directory-hero--premium,
    #category-directory-pro .category-directory-collab--premium,
    #category-directory-pro .category-directory-section-head--split {
        grid-template-columns: 1fr;
    }
    #category-directory-pro .category-directory-featured-grid--premium,
    #category-directory-pro .category-directory-journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #category-directory-pro .category-directory-grid--premium { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    #category-directory-pro.category-directory-page--premium { padding: 12px 10px 48px; }
    #category-directory-pro .category-directory-hero--premium,
    #category-directory-pro .category-directory-journey--premium,
    #category-directory-pro .category-directory-featured--premium,
    #category-directory-pro .category-directory-grid-section--premium,
    #category-directory-pro .category-directory-decision--premium,
    #category-directory-pro .category-directory-collab--premium { border-radius: 24px; padding: 22px; }
    #category-directory-pro .category-directory-role-strip--premium,
    #category-directory-pro .category-directory-stats--premium,
    #category-directory-pro .category-directory-featured-grid--premium,
    #category-directory-pro .category-directory-journey-grid,
    #category-directory-pro .category-directory-card__audience,
    #category-directory-pro .category-directory-decision-grid,
    #category-directory-pro .category-directory-collab__cards { grid-template-columns: 1fr; }
    #category-directory-pro .category-directory-card__link { grid-template-columns: 1fr; }
    #category-directory-pro .category-directory-card__top { display: grid; }
    #category-directory-pro .category-directory-card__meta { justify-content: flex-start; }
    #category-directory-pro .category-directory-hero--premium .category-directory-hero__visual { min-height: 320px; }
    #category-directory-pro .category-directory-floating-card { display: none; }
    #category-directory-pro .category-directory-actions { align-items: stretch; flex-direction: column; }
    #category-directory-pro .category-directory-btn { width: 100%; }
}

/* =====================================================================
   Categories Directory Premium v2 (scoped rewrite)
   ===================================================================== */
#categories-premium-directory,
#categories-premium-directory * {
    box-sizing: border-box;
}

#categories-premium-directory {
    --cpd-green: #0f766e;
    --cpd-green-2: #22c55e;
    --cpd-blue: #2563eb;
    --cpd-text: #0f2b46;
    --cpd-muted: #5f7388;
    --cpd-line: #deeaef;
    --cpd-bg: #f7fbfd;
    width: min(1240px, calc(100% - 32px));
    margin: 24px auto 54px;
    display: grid;
    gap: 28px;
    direction: rtl;
    color: var(--cpd-text);
}

#categories-premium-directory a,
#categories-premium-directory button,
#categories-premium-directory input,
#categories-premium-directory select,
#categories-premium-directory textarea,
#categories-premium-directory label,
#categories-premium-directory strong,
#categories-premium-directory span,
#categories-premium-directory p,
#categories-premium-directory li,
#categories-premium-directory h1,
#categories-premium-directory h2,
#categories-premium-directory h3 {
    font-family: inherit !important;
}

#categories-premium-directory a {
    text-decoration: none;
    color: inherit;
}

#categories-premium-directory img {
    max-width: 100%;
    height: auto;
    display: block;
}

#categories-premium-directory .cpd-hero,
#categories-premium-directory .cpd-finder,
#categories-premium-directory .cpd-audience__card,
#categories-premium-directory .cpd-popular,
#categories-premium-directory .cpd-all,
#categories-premium-directory .cpd-steps,
#categories-premium-directory .cpd-bottom-cta,
#categories-premium-directory .cpd-benefits {
    border: 1px solid var(--cpd-line);
    border-radius: 32px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 43, 70, 0.06);
}

#categories-premium-directory .cpd-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(380px, .97fr);
    align-items: center;
    gap: 32px;
    padding: 38px;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, .08), transparent 34%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, .08), transparent 40%),
        linear-gradient(135deg, #ffffff 0%, #f9fcff 100%);
}

#categories-premium-directory .cpd-hero__copy {
    display: grid;
    gap: 18px;
}

#categories-premium-directory .cpd-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #708396;
    font-size: 13px;
    font-weight: 700;
}

#categories-premium-directory .cpd-breadcrumb a:hover,
#categories-premium-directory .cpd-breadcrumb a:focus-visible {
    color: var(--cpd-green);
}

#categories-premium-directory .cpd-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--cpd-green);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .02em;
}

#categories-premium-directory .cpd-kicker::before {
    content: "";
    width: 36px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cpd-green-2), var(--cpd-green));
}

#categories-premium-directory h1,
#categories-premium-directory h2,
#categories-premium-directory h3,
#categories-premium-directory p {
    margin: 0;
}

#categories-premium-directory .cpd-hero h1 {
    font-size: clamp(31px, 4vw, 56px);
    line-height: 1.28;
    font-weight: 950;
    letter-spacing: -.03em;
}

#categories-premium-directory .cpd-lead {
    color: var(--cpd-muted);
    line-height: 2.05;
    font-size: 16px;
}

#categories-premium-directory .cpd-hero__actions,
#categories-premium-directory .cpd-bottom-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

#categories-premium-directory .cpd-btn,
#categories-premium-directory .cpd-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 16px;
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 900;
    transition: .2s ease;
}

#categories-premium-directory .cpd-btn:hover,
#categories-premium-directory .cpd-btn:focus-visible,
#categories-premium-directory .cpd-link-btn:hover,
#categories-premium-directory .cpd-link-btn:focus-visible,
#categories-premium-directory .cpd-finder__item:hover,
#categories-premium-directory .cpd-finder__item:focus-visible,
#categories-premium-directory .cpd-popular__card-link:hover,
#categories-premium-directory .cpd-popular__card-link:focus-visible,
#categories-premium-directory .cpd-all__item:hover,
#categories-premium-directory .cpd-all__item:focus-visible {
    transform: translateY(-2px);
}

#categories-premium-directory .cpd-btn--primary {
    background: linear-gradient(135deg, var(--cpd-green), #089981);
    color: #fff;
    box-shadow: 0 16px 32px rgba(15, 118, 110, .22);
}

#categories-premium-directory .cpd-btn--ghost {
    background: #fff;
    color: var(--cpd-text);
    border-color: var(--cpd-line);
}

#categories-premium-directory .cpd-btn--white {
    background: #fff;
    color: var(--cpd-green);
}

#categories-premium-directory .cpd-btn--outline-white {
    background: transparent;
    border-color: rgba(255,255,255,.35);
    color: #fff;
}

#categories-premium-directory .cpd-proof {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
    color: #4f657b;
    font-size: 14px;
    font-weight: 750;
}

#categories-premium-directory .cpd-proof li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

#categories-premium-directory .cpd-proof i,
#categories-premium-directory .cpd-benefit__icon,
#categories-premium-directory .cpd-step__icon,
#categories-premium-directory .cpd-finder__icon,
#categories-premium-directory .cpd-all__icon {
    color: var(--cpd-green);
}

#categories-premium-directory .cpd-hero__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

#categories-premium-directory .cpd-hero__visual img {
    width: min(100%, 760px);
}

#categories-premium-directory .cpd-finder {
    padding: 24px 28px;
    display: grid;
    gap: 22px;
    background: linear-gradient(135deg, #ffffff 0%, #fbfffd 100%);
}

#categories-premium-directory .cpd-finder__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

#categories-premium-directory .cpd-finder__head h2,
#categories-premium-directory .cpd-section-head h2,
#categories-premium-directory .cpd-bottom-cta h2 {
    font-size: clamp(22px, 2.7vw, 35px);
    line-height: 1.45;
    font-weight: 930;
    letter-spacing: -.02em;
}

#categories-premium-directory .cpd-finder__head p,
#categories-premium-directory .cpd-section-head > p,
#categories-premium-directory .cpd-section-head div + p,
#categories-premium-directory .cpd-bottom-cta__copy > p:last-of-type {
    color: var(--cpd-muted);
    font-size: 15px;
    line-height: 1.95;
    max-width: 720px;
}

#categories-premium-directory .cpd-finder__grid,
#categories-premium-directory .cpd-popular__grid,
#categories-premium-directory .cpd-steps__grid,
#categories-premium-directory .cpd-benefits__grid {
    display: grid;
    gap: 18px;
}

#categories-premium-directory .cpd-finder__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#categories-premium-directory .cpd-finder__item {
    display: grid;
    gap: 8px;
    padding: 20px;
    border: 1px solid var(--cpd-line);
    border-radius: 20px;
    background: #fdfefe;
    transition: .2s ease;
}

#categories-premium-directory .cpd-finder__icon {
    width: 48px;
    height: 48px;
    display: inline-grid;
    place-items: center;
    border-radius: 16px;
    background: #ecfaf3;
    font-size: 18px;
}

#categories-premium-directory .cpd-finder__item strong {
    font-size: 17px;
    font-weight: 900;
}

#categories-premium-directory .cpd-finder__item span:last-child {
    color: var(--cpd-muted);
    font-size: 14px;
    line-height: 1.8;
}

#categories-premium-directory .cpd-audience {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

#categories-premium-directory .cpd-audience__card {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 24px;
    padding: 26px;
}

#categories-premium-directory .cpd-audience__card--client {
    background: linear-gradient(135deg, #ffffff 0%, #f4f9ff 100%);
}

#categories-premium-directory .cpd-audience__card--freelancer {
    background: linear-gradient(135deg, #ffffff 0%, #f4fdf7 100%);
}

#categories-premium-directory .cpd-audience__media {
    display: flex;
    align-items: center;
    justify-content: center;
}

#categories-premium-directory .cpd-audience__copy {
    display: grid;
    gap: 14px;
    align-content: center;
}

#categories-premium-directory .cpd-audience__copy h2 {
    font-size: 25px;
    line-height: 1.55;
    font-weight: 920;
}

#categories-premium-directory .cpd-audience__copy ul {
    margin: 0;
    padding: 0 18px 0 0;
    color: var(--cpd-muted);
    display: grid;
    gap: 10px;
    line-height: 1.9;
}

#categories-premium-directory .cpd-link-btn {
    width: fit-content;
    margin-top: 2px;
}

#categories-premium-directory .cpd-link-btn--blue {
    color: var(--cpd-blue);
    border-color: rgba(37, 99, 235, .22);
    background: rgba(37, 99, 235, .05);
}

#categories-premium-directory .cpd-link-btn--green {
    color: var(--cpd-green);
    border-color: rgba(15, 118, 110, .18);
    background: rgba(15, 118, 110, .05);
}

#categories-premium-directory .cpd-popular,
#categories-premium-directory .cpd-all,
#categories-premium-directory .cpd-steps,
#categories-premium-directory .cpd-benefits {
    padding: 30px;
}

#categories-premium-directory .cpd-section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 22px;
}

#categories-premium-directory .cpd-popular__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#categories-premium-directory .cpd-popular__card-link {
    height: 100%;
    display: grid;
    gap: 14px;
    padding: 24px;
    border: 1px solid var(--cpd-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 26px rgba(15, 43, 70, 0.04);
    position: relative;
    overflow: hidden;
    transition: .2s ease;
}

#categories-premium-directory .cpd-popular__card-link::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--cpd-green), var(--cpd-green-2));
}

#categories-premium-directory .cpd-tone--violet .cpd-popular__card-link::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
#categories-premium-directory .cpd-tone--blue .cpd-popular__card-link::before { background: linear-gradient(90deg, #2563eb, #60a5fa); }
#categories-premium-directory .cpd-tone--amber .cpd-popular__card-link::before { background: linear-gradient(90deg, #d97706, #fbbf24); }
#categories-premium-directory .cpd-tone--rose .cpd-popular__card-link::before { background: linear-gradient(90deg, #e11d48, #fb7185); }
#categories-premium-directory .cpd-tone--cyan .cpd-popular__card-link::before { background: linear-gradient(90deg, #0891b2, #67e8f9); }
#categories-premium-directory .cpd-tone--green .cpd-popular__card-link::before { background: linear-gradient(90deg, #16a34a, #86efac); }
#categories-premium-directory .cpd-tone--teal .cpd-popular__card-link::before { background: linear-gradient(90deg, #0f766e, #34d399); }
#categories-premium-directory .cpd-tone--indigo .cpd-popular__card-link::before { background: linear-gradient(90deg, #4f46e5, #818cf8); }
#categories-premium-directory .cpd-tone--slate .cpd-popular__card-link::before { background: linear-gradient(90deg, #475569, #94a3b8); }
#categories-premium-directory .cpd-tone--mint .cpd-popular__card-link::before { background: linear-gradient(90deg, #0ea5a4, #5eead4); }

#categories-premium-directory .cpd-popular__media {
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: linear-gradient(135deg, #f7fbfd 0%, #edf7f3 100%);
}

#categories-premium-directory .cpd-popular__card strong {
    font-size: 21px;
    font-weight: 920;
    line-height: 1.45;
}

#categories-premium-directory .cpd-popular__card p,
#categories-premium-directory .cpd-step p,
#categories-premium-directory .cpd-benefit p,
#categories-premium-directory .cpd-all__item span {
    color: var(--cpd-muted);
    font-size: 14px;
    line-height: 1.95;
}

#categories-premium-directory .cpd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#categories-premium-directory .cpd-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f2f7fa;
    color: #507187;
    font-size: 12px;
    font-weight: 800;
}

#categories-premium-directory .cpd-popular__card em {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: var(--cpd-green);
    font-style: normal;
    font-size: 14px;
    font-weight: 900;
}

#categories-premium-directory .cpd-all__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

#categories-premium-directory .cpd-all__item {
    min-height: 146px;
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 18px;
    border: 1px solid var(--cpd-line);
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    transition: .2s ease;
}

#categories-premium-directory .cpd-all__icon,
#categories-premium-directory .cpd-benefit__icon,
#categories-premium-directory .cpd-step__icon {
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    border-radius: 16px;
    background: #ecfaf3;
    font-size: 18px;
}

#categories-premium-directory .cpd-all__item strong,
#categories-premium-directory .cpd-step strong,
#categories-premium-directory .cpd-benefit strong {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.55;
}

#categories-premium-directory .cpd-summary-strip {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

#categories-premium-directory .cpd-summary-strip article {
    min-height: 108px;
    display: grid;
    place-items: center;
    padding: 18px;
    text-align: center;
    border: 1px solid var(--cpd-line);
    border-radius: 22px;
    background: linear-gradient(135deg, #ffffff 0%, #f7fbfd 100%);
}

#categories-premium-directory .cpd-summary-strip strong {
    font-size: 28px;
    font-weight: 950;
    color: var(--cpd-green);
}

#categories-premium-directory .cpd-summary-strip span {
    color: var(--cpd-muted);
    font-size: 14px;
    font-weight: 800;
}

#categories-premium-directory .cpd-steps__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#categories-premium-directory .cpd-step {
    min-height: 100%;
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 22px;
    border: 1px solid var(--cpd-line);
    border-radius: 24px;
    background: linear-gradient(135deg, #ffffff 0%, #fbfffd 100%);
    position: relative;
}

#categories-premium-directory .cpd-step__no {
    position: absolute;
    inset: 16px 16px auto auto;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--cpd-green), var(--cpd-green-2));
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}

#categories-premium-directory .cpd-bottom-cta {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 28px;
    background: linear-gradient(135deg, #0f766e 0%, #0e9b87 50%, #13a66b 100%);
    color: #fff;
}

#categories-premium-directory .cpd-bottom-cta__copy {
    display: grid;
    gap: 16px;
}

#categories-premium-directory .cpd-bottom-cta__copy .cpd-kicker,
#categories-premium-directory .cpd-bottom-cta__copy .cpd-kicker::before {
    color: #d8fff2;
    background: linear-gradient(90deg, #d8fff2, rgba(216,255,242,.4));
}

#categories-premium-directory .cpd-benefits__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#categories-premium-directory .cpd-benefit {
    display: grid;
    gap: 12px;
    padding: 22px;
    border: 1px solid var(--cpd-line);
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
}

#categories-premium-directory .cpd-audience__card:hover,
#categories-premium-directory .cpd-popular__card-link:hover,
#categories-premium-directory .cpd-all__item:hover,
#categories-premium-directory .cpd-step:hover,
#categories-premium-directory .cpd-benefit:hover,
#categories-premium-directory .cpd-finder__item:hover {
    box-shadow: 0 16px 32px rgba(15, 43, 70, 0.08);
}

@media (max-width: 1180px) {
    #categories-premium-directory .cpd-hero,
    #categories-premium-directory .cpd-audience__card,
    #categories-premium-directory .cpd-bottom-cta {
        grid-template-columns: 1fr;
    }
    #categories-premium-directory .cpd-popular__grid,
    #categories-premium-directory .cpd-all__grid,
    #categories-premium-directory .cpd-steps__grid,
    #categories-premium-directory .cpd-benefits__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #categories-premium-directory .cpd-finder__grid,
    #categories-premium-directory .cpd-summary-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    #categories-premium-directory .cpd-section-head,
    #categories-premium-directory .cpd-finder__head {
        align-items: start;
        flex-direction: column;
    }
}

@media (max-width: 820px) {
    #categories-premium-directory {
        width: min(100% - 18px, 100%);
        margin-top: 14px;
        gap: 18px;
    }
    #categories-premium-directory .cpd-hero,
    #categories-premium-directory .cpd-finder,
    #categories-premium-directory .cpd-popular,
    #categories-premium-directory .cpd-all,
    #categories-premium-directory .cpd-steps,
    #categories-premium-directory .cpd-bottom-cta,
    #categories-premium-directory .cpd-benefits,
    #categories-premium-directory .cpd-audience__card {
        padding: 20px;
        border-radius: 24px;
    }
    #categories-premium-directory .cpd-finder__grid,
    #categories-premium-directory .cpd-popular__grid,
    #categories-premium-directory .cpd-all__grid,
    #categories-premium-directory .cpd-steps__grid,
    #categories-premium-directory .cpd-summary-strip,
    #categories-premium-directory .cpd-benefits__grid,
    #categories-premium-directory .cpd-audience {
        grid-template-columns: 1fr;
    }
    #categories-premium-directory .cpd-audience__card {
        gap: 18px;
    }
    #categories-premium-directory .cpd-audience__copy h2 {
        font-size: 22px;
    }
    #categories-premium-directory .cpd-btn,
    #categories-premium-directory .cpd-link-btn {
        width: 100%;
    }
}

/* =====================================================================
   Categories Directory Phase 19 - visual polish, spacing, search strip
   ===================================================================== */
#categories-premium-directory {
    --cpd-shadow-soft: 0 18px 44px rgba(15, 43, 70, .07);
    --cpd-shadow-lift: 0 24px 54px rgba(15, 43, 70, .11);
    --cpd-radius-xl: 34px;
    gap: 30px;
}

#categories-premium-directory .cpd-hero {
    min-height: 620px;
    padding: clamp(30px, 4vw, 54px);
    border-radius: 38px;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

#categories-premium-directory .cpd-hero::before,
#categories-premium-directory .cpd-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    pointer-events: none;
}

#categories-premium-directory .cpd-hero::before {
    width: 360px;
    height: 360px;
    inset: -120px auto auto -110px;
    background: rgba(34, 197, 94, .10);
    filter: blur(10px);
}

#categories-premium-directory .cpd-hero::after {
    width: 280px;
    height: 280px;
    inset: auto 48% -150px auto;
    background: rgba(37, 99, 235, .08);
    filter: blur(8px);
}

#categories-premium-directory .cpd-hero h1 {
    max-width: 720px;
}

#categories-premium-directory .cpd-lead {
    max-width: 760px;
}

#categories-premium-directory .cpd-hero__visual {
    padding: 10px;
}

#categories-premium-directory .cpd-hero__visual img {
    filter: drop-shadow(0 24px 32px rgba(15, 43, 70, .10));
}

#categories-premium-directory .cpd-proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 4px;
}

#categories-premium-directory .cpd-proof li {
    min-height: 58px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(15, 118, 110, .11);
    border-radius: 18px;
    background: rgba(255, 255, 255, .78);
}

#categories-premium-directory .cpd-searchbar {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr);
    gap: 22px;
    align-items: center;
    padding: 22px;
    border: 1px solid var(--cpd-line);
    border-radius: 30px;
    background: rgba(255,255,255,.94);
    box-shadow: var(--cpd-shadow-soft);
}

#categories-premium-directory .cpd-searchbar__copy {
    display: grid;
    gap: 8px;
}

#categories-premium-directory .cpd-searchbar__copy h2 {
    font-size: 23px;
    line-height: 1.45;
    font-weight: 930;
}

#categories-premium-directory .cpd-searchbar__copy p:last-child {
    margin: 0;
    color: var(--cpd-muted);
    line-height: 1.85;
    font-size: 14px;
}

#categories-premium-directory .cpd-searchbar__form {
    min-height: 66px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 12px;
    padding: 8px;
    border: 1px solid #dce9ef;
    border-radius: 22px;
    background: #f8fbfd;
}

#categories-premium-directory .cpd-searchbar__form input,
#categories-premium-directory .cpd-searchbar__form button {
    height: 50px;
    border: 0;
    border-radius: 16px;
    font-family: inherit !important;
    font-size: 14px;
}

#categories-premium-directory .cpd-searchbar__form input {
    width: 100%;
    padding: 0 16px;
    background: #fff;
    color: var(--cpd-text);
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(221,234,239,.9);
}

#categories-premium-directory .cpd-searchbar__form input::placeholder {
    color: #8a9aaa;
}

#categories-premium-directory .cpd-searchbar__form input:focus {
    box-shadow: inset 0 0 0 2px rgba(15,118,110,.32), 0 0 0 4px rgba(15,118,110,.08);
}

#categories-premium-directory .cpd-searchbar__form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(135deg, var(--cpd-green), #0b927e);
    cursor: pointer;
    box-shadow: 0 14px 25px rgba(15,118,110,.20);
}

#categories-premium-directory .cpd-finder,
#categories-premium-directory .cpd-popular,
#categories-premium-directory .cpd-all,
#categories-premium-directory .cpd-steps,
#categories-premium-directory .cpd-benefits {
    border-radius: var(--cpd-radius-xl);
}

#categories-premium-directory .cpd-finder__item,
#categories-premium-directory .cpd-all__item,
#categories-premium-directory .cpd-step,
#categories-premium-directory .cpd-benefit,
#categories-premium-directory .cpd-popular__card-link {
    border-color: #dce8ee;
}

#categories-premium-directory .cpd-finder__item:hover,
#categories-premium-directory .cpd-all__item:hover,
#categories-premium-directory .cpd-step:hover,
#categories-premium-directory .cpd-benefit:hover,
#categories-premium-directory .cpd-popular__card-link:hover {
    box-shadow: var(--cpd-shadow-lift);
    border-color: rgba(15,118,110,.22);
}

#categories-premium-directory .cpd-popular__grid {
    gap: 20px;
}

#categories-premium-directory .cpd-popular__card-link {
    min-height: 390px;
    grid-template-rows: auto auto 1fr auto auto;
}

#categories-premium-directory .cpd-popular__media {
    width: 96px;
    height: 96px;
    border: 1px solid #e1edf1;
}

#categories-premium-directory .cpd-popular__card p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#categories-premium-directory .cpd-tags {
    min-height: 76px;
    align-content: start;
}

#categories-premium-directory .cpd-all__grid {
    gap: 18px;
}

#categories-premium-directory .cpd-all__item {
    min-height: 162px;
}

#categories-premium-directory .cpd-all__item:hover .cpd-all__icon,
#categories-premium-directory .cpd-finder__item:hover .cpd-finder__icon,
#categories-premium-directory .cpd-benefit:hover .cpd-benefit__icon,
#categories-premium-directory .cpd-step:hover .cpd-step__icon {
    background: linear-gradient(135deg, #0f766e, #22c55e);
    color: #fff;
}

#categories-premium-directory .cpd-audience__card {
    min-height: 420px;
    align-items: center;
    border-radius: 34px;
}

#categories-premium-directory .cpd-audience__media img,
#categories-premium-directory .cpd-bottom-cta__visual img {
    filter: drop-shadow(0 18px 24px rgba(15, 43, 70, .09));
}

#categories-premium-directory .cpd-bottom-cta {
    border-radius: 34px;
    min-height: 300px;
    background:
        radial-gradient(circle at 18% 16%, rgba(255,255,255,.22), transparent 28%),
        linear-gradient(135deg, #0b625d 0%, #087c70 45%, #109b65 100%);
}

#categories-premium-directory .cpd-benefit {
    min-height: 190px;
}

@media (max-width: 1180px) {
    #categories-premium-directory .cpd-searchbar {
        grid-template-columns: 1fr;
    }
    #categories-premium-directory .cpd-proof {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    #categories-premium-directory .cpd-hero {
        min-height: auto;
    }
    #categories-premium-directory .cpd-searchbar__form {
        grid-template-columns: 1fr;
    }
    #categories-premium-directory .cpd-searchbar__form button {
        width: 100%;
    }
    #categories-premium-directory .cpd-popular__card-link,
    #categories-premium-directory .cpd-all__item,
    #categories-premium-directory .cpd-benefit {
        min-height: auto;
    }
    #categories-premium-directory .cpd-tags {
        min-height: auto;
    }
}

/* Categories Directory Phase 20: SEO links + FAQ polish */
#categories-premium-directory .cpd-guide-links,
#categories-premium-directory .cpd-faq {
    padding: 30px;
    border: 1px solid var(--cpd-line);
    border-radius: 32px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 43, 70, 0.06);
}

#categories-premium-directory .cpd-guide-links {
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, .07), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #fbfffd 100%);
}

#categories-premium-directory .cpd-guide-links__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

#categories-premium-directory .cpd-guide-link {
    min-height: 176px;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 22px;
    border: 1px solid var(--cpd-line);
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
    transition: .2s ease;
}

#categories-premium-directory .cpd-guide-link:hover,
#categories-premium-directory .cpd-guide-link:focus-visible,
#categories-premium-directory .cpd-faq__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(15, 43, 70, .08);
}

#categories-premium-directory .cpd-guide-link__icon {
    width: 48px;
    height: 48px;
    display: inline-grid;
    place-items: center;
    border-radius: 16px;
    background: #ecfaf3;
    color: var(--cpd-green);
    font-size: 18px;
}

#categories-premium-directory .cpd-guide-link strong {
    font-size: 18px;
    font-weight: 920;
    line-height: 1.5;
}

#categories-premium-directory .cpd-guide-link span:last-child {
    color: var(--cpd-muted);
    font-size: 14px;
    line-height: 1.9;
}

#categories-premium-directory .cpd-faq__list {
    display: grid;
    gap: 12px;
}

#categories-premium-directory .cpd-faq__item {
    border: 1px solid var(--cpd-line);
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    overflow: hidden;
    transition: .2s ease;
}

#categories-premium-directory .cpd-faq__item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    color: var(--cpd-text);
    font-size: 16px;
    font-weight: 920;
    line-height: 1.7;
}

#categories-premium-directory .cpd-faq__item summary::-webkit-details-marker { display: none; }
#categories-premium-directory .cpd-faq__item summary::after {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: #ecfaf3;
    color: var(--cpd-green);
    transition: .2s ease;
}

#categories-premium-directory .cpd-faq__item[open] summary::after {
    transform: rotate(180deg);
}

#categories-premium-directory .cpd-faq__item p {
    margin: 0;
    padding: 0 22px 22px;
    color: var(--cpd-muted);
    font-size: 15px;
    line-height: 2;
}

@media (max-width: 1180px) {
    #categories-premium-directory .cpd-guide-links__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    #categories-premium-directory .cpd-guide-links,
    #categories-premium-directory .cpd-faq {
        padding: 20px;
        border-radius: 24px;
    }
    #categories-premium-directory .cpd-guide-links__grid {
        grid-template-columns: 1fr;
    }
    #categories-premium-directory .cpd-faq__item summary {
        align-items: flex-start;
    }
}

/* =====================================================================
   Categories Directory Premium Rows v22 — scoped, RTL, audience-first
   ===================================================================== */
#categories-directory-redesign,
#categories-directory-redesign * { box-sizing: border-box; }

#main-content.container:has(#categories-directory-redesign) {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    background: #f6fbf8 !important;
}

#categories-directory-redesign {
    --cdr-ink: #10243c;
    --cdr-muted: #5d7185;
    --cdr-soft: #f5fbf8;
    --cdr-card: #ffffff;
    --cdr-line: rgba(16, 36, 60, .105);
    --cdr-green: #0f766e;
    --cdr-green-2: #18a66d;
    --cdr-blue: #2563eb;
    --cdr-shadow: 0 24px 70px rgba(16, 36, 60, .095);
    --cdr-shadow-soft: 0 14px 42px rgba(16, 36, 60, .07);
    direction: rtl;
    font-family: inherit !important;
    color: var(--cdr-ink);
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    background:
        radial-gradient(circle at 12% 4%, rgba(15,118,110,.08), transparent 28%),
        radial-gradient(circle at 92% 18%, rgba(37,99,235,.055), transparent 30%),
        linear-gradient(180deg, #fbfefd 0%, #f6fbf8 44%, #ffffff 100%);
    padding: 26px 16px 70px;
}

#categories-directory-redesign a,
#categories-directory-redesign button,
#categories-directory-redesign input,
#categories-directory-redesign select,
#categories-directory-redesign textarea,
#categories-directory-redesign label,
#categories-directory-redesign summary,
#categories-directory-redesign small,
#categories-directory-redesign strong,
#categories-directory-redesign em,
#categories-directory-redesign span,
#categories-directory-redesign p,
#categories-directory-redesign li,
#categories-directory-redesign h1,
#categories-directory-redesign h2,
#categories-directory-redesign h3 { font-family: inherit !important; }

#categories-directory-redesign a { color: inherit; text-decoration: none; }
#categories-directory-redesign img { display: block; max-width: 100%; height: auto; }
#categories-directory-redesign :focus-visible { outline: 3px solid rgba(15,118,110,.28); outline-offset: 3px; }
#categories-directory-redesign h1,
#categories-directory-redesign h2,
#categories-directory-redesign h3,
#categories-directory-redesign p,
#categories-directory-redesign ul { margin: 0; }

#categories-directory-redesign .cdr-shell {
    width: min(1240px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 24px;
}

#categories-directory-redesign .cdr-hero,
#categories-directory-redesign .cdr-role-card,
#categories-directory-redesign .cdr-guide,
#categories-directory-redesign .cdr-board,
#categories-directory-redesign .cdr-faq,
#categories-directory-redesign .cdr-final {
    border: 1px solid var(--cdr-line);
    border-radius: 34px;
    background: rgba(255,255,255,.94);
    box-shadow: var(--cdr-shadow-soft);
}

#categories-directory-redesign .cdr-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 540px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr);
    gap: clamp(24px, 4vw, 50px);
    align-items: center;
    padding: clamp(30px, 5vw, 58px);
    background:
        linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(245,252,249,.96) 58%, rgba(239,247,255,.94) 100%);
}
#categories-directory-redesign .cdr-hero::before,
#categories-directory-redesign .cdr-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    pointer-events: none;
}
#categories-directory-redesign .cdr-hero::before { width: 330px; height: 330px; inset: -120px auto auto -95px; background: rgba(24,166,109,.14); filter: blur(6px); }
#categories-directory-redesign .cdr-hero::after { width: 285px; height: 285px; inset: auto 42% -145px auto; background: rgba(37,99,235,.10); filter: blur(10px); }

#categories-directory-redesign .cdr-hero__copy,
#categories-directory-redesign .cdr-role-card__body,
#categories-directory-redesign .cdr-final__copy { display: grid; gap: 16px; }

#categories-directory-redesign .cdr-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #7b8da0;
    font-size: 13px;
    font-weight: 850;
}
#categories-directory-redesign .cdr-breadcrumb a:hover { color: var(--cdr-green); }

#categories-directory-redesign .cdr-eyebrow {
    width: fit-content;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid rgba(15,118,110,.16);
    background: rgba(236,253,245,.86);
    color: var(--cdr-green);
    font-size: 13px;
    font-weight: 950;
    line-height: 1;
}

#categories-directory-redesign h1 {
    max-width: 780px;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.29;
    letter-spacing: -.035em;
    font-weight: 950;
}
#categories-directory-redesign .cdr-lead {
    max-width: 800px;
    color: var(--cdr-muted);
    font-size: 16.5px;
    line-height: 2.05;
    font-weight: 650;
}

#categories-directory-redesign .cdr-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
#categories-directory-redesign .cdr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 16px;
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 950;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
#categories-directory-redesign .cdr-btn:hover,
#categories-directory-redesign .cdr-role-card:hover,
#categories-directory-redesign .cdr-guide-card:hover,
#categories-directory-redesign .cdr-category-row:hover,
#categories-directory-redesign .cdr-faq__item:hover { transform: translateY(-3px); }
#categories-directory-redesign .cdr-btn--primary { background: linear-gradient(135deg, var(--cdr-green) 0%, var(--cdr-green-2) 100%); color: #fff; box-shadow: 0 16px 30px rgba(15,118,110,.24); }
#categories-directory-redesign .cdr-btn--soft { background: #fff; color: var(--cdr-ink); border-color: var(--cdr-line); }
#categories-directory-redesign .cdr-btn--ghost { background: #f6fbf8; color: var(--cdr-green); border-color: rgba(15,118,110,.16); }
#categories-directory-redesign .cdr-btn--light { background: #fff; color: var(--cdr-green); }
#categories-directory-redesign .cdr-btn--outline { color: #fff; border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.08); }

#categories-directory-redesign .cdr-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; }
#categories-directory-redesign .cdr-hero__chips span,
#categories-directory-redesign .cdr-output-row span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f2f8f7;
    color: #587083;
    font-size: 12.5px;
    font-weight: 850;
}
#categories-directory-redesign .cdr-hero__visual {
    display: grid;
    place-items: center;
    min-height: 360px;
    border-radius: 32px;
    border: 1px solid rgba(15,118,110,.10);
    background: radial-gradient(circle at 52% 42%, rgba(255,255,255,.94), transparent 43%), linear-gradient(135deg, rgba(236,253,245,.90), rgba(239,246,255,.88));
}
#categories-directory-redesign .cdr-hero__visual img { width: min(100%, 680px); filter: drop-shadow(0 26px 34px rgba(16,36,60,.12)); }

#categories-directory-redesign .cdr-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
#categories-directory-redesign .cdr-role-card {
    display: grid;
    grid-template-columns: 255px minmax(0, 1fr);
    align-items: center;
    gap: 23px;
    padding: 26px;
    transition: transform .2s ease, box-shadow .2s ease;
}
#categories-directory-redesign .cdr-role-card--client { background: linear-gradient(135deg, #fff 0%, #f3f8ff 100%); }
#categories-directory-redesign .cdr-role-card--freelancer { background: linear-gradient(135deg, #fff 0%, #f2fbf6 100%); }
#categories-directory-redesign .cdr-role-card__media {
    min-height: 210px;
    display: grid;
    place-items: center;
    border-radius: 26px;
    border: 1px solid rgba(220,233,231,.70);
    background: rgba(255,255,255,.72);
}
#categories-directory-redesign .cdr-role-card h2,
#categories-directory-redesign .cdr-section-head h2,
#categories-directory-redesign .cdr-final h2 {
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.45;
    font-weight: 950;
    letter-spacing: -.02em;
}
#categories-directory-redesign .cdr-role-card p,
#categories-directory-redesign .cdr-section-head p,
#categories-directory-redesign .cdr-final p,
#categories-directory-redesign .cdr-guide-card p,
#categories-directory-redesign .cdr-category-row__summary,
#categories-directory-redesign .cdr-faq__item p {
    color: var(--cdr-muted);
    font-size: 15px;
    line-height: 1.95;
}
#categories-directory-redesign .cdr-role-card ul { list-style: none; padding: 0; display: grid; gap: 9px; }
#categories-directory-redesign .cdr-role-card li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #40586b;
    font-size: 14px;
    font-weight: 850;
}
#categories-directory-redesign .cdr-role-card li::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 999px;
    background: var(--cdr-green);
}
#categories-directory-redesign .cdr-inline-link,
#categories-directory-redesign .cdr-card-cta,
#categories-directory-redesign .cdr-card-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 950;
    font-size: 14px;
}
#categories-directory-redesign .cdr-inline-link,
#categories-directory-redesign .cdr-card-cta { color: var(--cdr-green); }

#categories-directory-redesign .cdr-guide,
#categories-directory-redesign .cdr-board,
#categories-directory-redesign .cdr-faq { padding: clamp(26px, 4vw, 42px); }
#categories-directory-redesign .cdr-section-head { display: grid; gap: 12px; margin-bottom: 22px; }
#categories-directory-redesign .cdr-section-head--center { text-align: center; justify-items: center; max-width: 820px; margin-inline: auto; }

#categories-directory-redesign .cdr-guide { background: radial-gradient(circle at 14% 10%, rgba(15,118,110,.08), transparent 28%), #fff; }
#categories-directory-redesign .cdr-guide__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
#categories-directory-redesign .cdr-guide-card {
    min-height: 218px;
    display: grid;
    gap: 13px;
    align-content: start;
    padding: 24px;
    border: 1px solid var(--cdr-line);
    border-radius: 26px;
    background: linear-gradient(180deg, #fff 0%, #f8fcfb 100%);
    transition: transform .2s ease, box-shadow .2s ease;
}
#categories-directory-redesign .cdr-guide-card:hover,
#categories-directory-redesign .cdr-category-row:hover,
#categories-directory-redesign .cdr-faq__item:hover { box-shadow: var(--cdr-shadow-soft); }
#categories-directory-redesign .cdr-guide-card > span,
#categories-directory-redesign .cdr-category-row__icon {
    width: 52px;
    height: 52px;
    display: inline-grid;
    place-items: center;
    border-radius: 18px;
    color: var(--cdr-green);
    background: #ecfaf3;
    font-size: 19px;
    flex: 0 0 52px;
}
#categories-directory-redesign .cdr-guide-card h3 { font-size: 19px; line-height: 1.55; font-weight: 950; }

#categories-directory-redesign .cdr-category-list { display: grid; gap: 18px; }
#categories-directory-redesign .cdr-category-row {
    display: grid;
    grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
    min-height: 300px;
    padding: 20px;
    border: 1px solid var(--cdr-line);
    border-radius: 32px;
    background: linear-gradient(135deg, #ffffff 0%, #fbfefd 100%);
    box-shadow: 0 12px 32px rgba(16,36,60,.055);
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#categories-directory-redesign .cdr-category-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 7px;
    background: linear-gradient(180deg, var(--cdr-green), var(--cdr-green-2));
}
#categories-directory-redesign .cdr-category-row:hover { border-color: rgba(15,118,110,.25); }
#categories-directory-redesign .cdr-category-row__media {
    order: -1;
    min-height: 260px;
    display: grid;
    place-items: center;
    border-radius: 26px;
    border: 1px solid rgba(16,36,60,.09);
    background: linear-gradient(135deg, #f7fcfa 0%, #eef8f4 100%);
    overflow: hidden;
}
#categories-directory-redesign .cdr-category-row__media img { width: 100%; height: 100%; max-height: 320px; object-fit: cover; object-position: center; }
#categories-directory-redesign .cdr-category-row__body { display: grid; gap: 14px; align-content: center; min-width: 0; }
#categories-directory-redesign .cdr-category-row__top { display: flex; align-items: center; gap: 13px; min-width: 0; }
#categories-directory-redesign .cdr-category-row__meta {
    display: inline-flex;
    color: var(--cdr-green);
    font-size: 12.5px;
    font-weight: 900;
    line-height: 1.7;
    margin-bottom: 4px;
}
#categories-directory-redesign .cdr-category-row h3 { font-size: clamp(22px, 2.5vw, 31px); line-height: 1.42; font-weight: 950; letter-spacing: -.02em; }
#categories-directory-redesign .cdr-category-row h3 a:hover { color: var(--cdr-green); }
#categories-directory-redesign .cdr-category-row__summary { max-width: 820px; }

#categories-directory-redesign .cdr-role-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
#categories-directory-redesign .cdr-role-notes div {
    display: grid;
    gap: 6px;
    border: 1px solid rgba(16,36,60,.08);
    border-radius: 18px;
    background: #f8fcfb;
    padding: 13px 14px;
}
#categories-directory-redesign .cdr-role-notes strong { font-size: 13px; font-weight: 950; color: var(--cdr-ink); }
#categories-directory-redesign .cdr-role-notes span { color: var(--cdr-muted); font-size: 13.3px; line-height: 1.75; font-weight: 650; }
#categories-directory-redesign .cdr-output-row,
#categories-directory-redesign .cdr-skill-row,
#categories-directory-redesign .cdr-card-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#categories-directory-redesign .cdr-output-row span { background: #f3f8ff; color: #435d78; }
#categories-directory-redesign .cdr-skill-row a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(15,118,110,.14);
    background: #f7fcfa;
    color: #234050;
    font-size: 12.8px;
    font-weight: 850;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
#categories-directory-redesign .cdr-skill-row a:hover { background: #fff; border-color: rgba(15,118,110,.34); transform: translateY(-1px); }
#categories-directory-redesign .cdr-card-actions { padding-top: 4px; }
#categories-directory-redesign .cdr-card-cta {
    min-height: 44px;
    padding: 0 15px;
    border-radius: 15px;
    color: #fff;
    background: var(--cdr-green);
    border: 1px solid var(--cdr-green);
}
#categories-directory-redesign .cdr-card-secondary {
    min-height: 44px;
    padding: 0 15px;
    border-radius: 15px;
    color: var(--cdr-ink);
    background: #fff;
    border: 1px solid var(--cdr-line);
}

#categories-directory-redesign .cdr-tone--violet::before { background: linear-gradient(180deg, #7c3aed, #c084fc); }
#categories-directory-redesign .cdr-tone--blue::before { background: linear-gradient(180deg, #2563eb, #93c5fd); }
#categories-directory-redesign .cdr-tone--teal::before { background: linear-gradient(180deg, #0f766e, #5eead4); }
#categories-directory-redesign .cdr-tone--cyan::before { background: linear-gradient(180deg, #0891b2, #67e8f9); }
#categories-directory-redesign .cdr-tone--indigo::before { background: linear-gradient(180deg, #4f46e5, #818cf8); }
#categories-directory-redesign .cdr-tone--amber::before { background: linear-gradient(180deg, #d97706, #fbbf24); }
#categories-directory-redesign .cdr-tone--rose::before { background: linear-gradient(180deg, #e11d48, #fb7185); }
#categories-directory-redesign .cdr-tone--slate::before { background: linear-gradient(180deg, #475569, #94a3b8); }
#categories-directory-redesign .cdr-tone--mint::before { background: linear-gradient(180deg, #0ea5a4, #5eead4); }
#categories-directory-redesign .cdr-tone--green::before,
#categories-directory-redesign .cdr-tone--emerald::before { background: linear-gradient(180deg, #0f766e, #18a66d); }

#categories-directory-redesign .cdr-faq__list { display: grid; gap: 12px; }
#categories-directory-redesign .cdr-faq__item {
    border: 1px solid var(--cdr-line);
    border-radius: 22px;
    background: #fff;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
#categories-directory-redesign .cdr-faq__item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 19px 22px;
    font-size: 16px;
    line-height: 1.75;
    font-weight: 950;
}
#categories-directory-redesign .cdr-faq__item summary::-webkit-details-marker { display: none; }
#categories-directory-redesign .cdr-faq__item summary::after {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    color: var(--cdr-green);
    background: #ecfaf3;
    transition: transform .2s ease;
}
#categories-directory-redesign .cdr-faq__item[open] summary::after { transform: rotate(180deg); }
#categories-directory-redesign .cdr-faq__item p { padding: 0 22px 22px; }

#categories-directory-redesign .cdr-final {
    position: relative;
    display: grid;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    gap: 30px;
    align-items: center;
    padding: 32px;
    color: #fff;
    background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.24), transparent 27%), radial-gradient(circle at 88% 82%, rgba(255,255,255,.14), transparent 31%), linear-gradient(135deg, #093f3d 0%, #0f766e 50%, #18a66d 100%);
    overflow: hidden;
}
#categories-directory-redesign .cdr-final .cdr-eyebrow { color: #d8fff2; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); }
#categories-directory-redesign .cdr-final p { color: rgba(255,255,255,.88); }
#categories-directory-redesign .cdr-final__media {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 270px;
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 24px 48px rgba(0,0,0,.16);
    overflow: hidden;
}
#categories-directory-redesign .cdr-final__media::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.22);
    pointer-events: none;
}
#categories-directory-redesign .cdr-final__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.015);
}

@media (max-width: 1180px) {
    #categories-directory-redesign .cdr-hero,
    #categories-directory-redesign .cdr-role-card,
    #categories-directory-redesign .cdr-final { grid-template-columns: 1fr; }
    #categories-directory-redesign .cdr-role-grid { grid-template-columns: 1fr; }
    #categories-directory-redesign .cdr-category-row { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
}
@media (max-width: 880px) {
    #categories-directory-redesign .cdr-guide__grid,
    #categories-directory-redesign .cdr-role-notes,
    #categories-directory-redesign .cdr-category-row { grid-template-columns: 1fr; }
    #categories-directory-redesign .cdr-category-row__media { min-height: 230px; }
}
@media (max-width: 680px) {
    #categories-directory-redesign { padding: 14px 10px 44px; }
    #categories-directory-redesign .cdr-shell { gap: 18px; }
    #categories-directory-redesign .cdr-hero,
    #categories-directory-redesign .cdr-role-card,
    #categories-directory-redesign .cdr-guide,
    #categories-directory-redesign .cdr-board,
    #categories-directory-redesign .cdr-faq,
    #categories-directory-redesign .cdr-final { border-radius: 24px; padding: 20px; }
    #categories-directory-redesign .cdr-hero { min-height: auto; }
    #categories-directory-redesign .cdr-actions,
    #categories-directory-redesign .cdr-btn,
    #categories-directory-redesign .cdr-card-cta,
    #categories-directory-redesign .cdr-card-secondary { width: 100%; }
    #categories-directory-redesign .cdr-hero__visual,
    #categories-directory-redesign .cdr-role-card__media,
    #categories-directory-redesign .cdr-final__media { min-height: 210px; }
    #categories-directory-redesign .cdr-category-row { padding: 14px; border-radius: 24px; }
    #categories-directory-redesign .cdr-category-row__media { border-radius: 20px; }
    #categories-directory-redesign .cdr-category-row::before { width: 5px; }
}

/* Help Center admin overview */
.admin-help-center,
.admin-help-center * {
    font-family: inherit !important;
}
.admin-help-center .admin-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 18px 0 22px;
}
.admin-help-center .admin-page-header h1 {
    margin: 0 0 8px;
    font-size: 24px;
    color: #102a43;
}
.admin-help-center .admin-page-header p,
.admin-help-panel > p {
    margin: 0;
    color: #64748b;
    line-height: 1.9;
}
.admin-help-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.admin-help-kpis article,
.admin-help-panel,
.admin-help-category-card {
    background: #fff;
    border: 1px solid rgba(15, 43, 70, .10);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(15, 43, 70, .07);
}
.admin-help-kpis article {
    padding: 16px;
}
.admin-help-kpis strong {
    display: block;
    font-size: 24px;
    color: #0f766e;
    margin-bottom: 4px;
}
.admin-help-kpis span {
    color: #475569;
}
.admin-help-panel {
    padding: 18px;
    margin-bottom: 16px;
}
.admin-help-panel h2 {
    margin: 0 0 8px;
    font-size: 19px;
    color: #0f2b46;
}
.admin-help-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.admin-help-category-card {
    padding: 14px;
}
.admin-help-category-card strong,
.admin-help-category-card span {
    display: block;
}
.admin-help-category-card strong {
    color: #0f2b46;
    margin-bottom: 4px;
}
.admin-help-category-card span {
    color: #0f766e;
    font-size: 13px;
    margin-bottom: 8px;
}
.admin-help-category-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.8;
    font-size: 13px;
}
.admin-help-table th,
.admin-help-table td {
    vertical-align: top;
}
.admin-help-table td:nth-child(3) {
    max-width: 420px;
    color: #64748b;
    line-height: 1.8;
}
@media (max-width: 900px) {
    .admin-help-center .admin-page-header,
    .admin-help-kpis,
    .admin-help-category-grid {
        display: block;
    }
    .admin-help-kpis article,
    .admin-help-category-card {
        margin-bottom: 10px;
    }
}

/* Help Center admin article review - phase 22 */
.admin-help-review__header {
    align-items: flex-start;
    gap: 16px;
}
.admin-help-review__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.admin-help-review-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    gap: 16px;
    margin: 16px 0;
}
.admin-help-review-card {
    min-height: 100%;
}
.admin-help-checklist {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}
.admin-help-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(15, 43, 70, .10);
    background: #f8faf9;
    color: #244057;
}
.admin-help-check span {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    font-weight: 900;
    font-family: inherit !important;
}
.admin-help-check.is-ok span {
    background: rgba(32, 151, 105, .12);
    color: #159466;
}
.admin-help-check.needs-work span {
    background: rgba(245, 158, 11, .14);
    color: #b7791f;
}
.admin-help-review-badge {
    display: inline-flex;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(32, 151, 105, .11);
    color: #126c4d;
    font-size: 13px;
}
.admin-help-path-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.admin-help-path-item {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 11px 13px;
    border-radius: 16px;
    border: 1px solid rgba(15, 43, 70, .10);
    background: #fff;
    color: #244057;
    text-decoration: none;
    font-family: inherit !important;
}
.admin-help-path-item:hover,
.admin-help-path-item.is-current {
    border-color: rgba(32, 151, 105, .32);
    background: linear-gradient(180deg, rgba(32, 151, 105, .09), rgba(255, 255, 255, .96));
    color: #126c4d;
}
.admin-help-link-list {
    display: grid;
    gap: 9px;
    padding: 0;
    margin: 14px 0 0;
    list-style: none;
}
.admin-help-link-list li,
.admin-help-link-list a {
    font-family: inherit !important;
}
.admin-help-link-list li {
    padding: 10px 12px;
    border-radius: 14px;
    background: #f8faf9;
    color: #244057;
}
.admin-help-link-list a {
    color: #126c4d;
    text-decoration: none;
    font-weight: 800;
}
@media (max-width: 860px) {
    .admin-help-review-grid {
        grid-template-columns: 1fr;
    }
    .admin-help-review__actions {
        justify-content: flex-start;
    }
}

/* Admin access guard page */
.admin-access-page,
.admin-access-page * {
    font-family: inherit !important;
    box-sizing: border-box;
}
.admin-access-page {
    min-height: 58vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 16px;
    direction: rtl;
}
.admin-access-card {
    width: min(100%, 620px);
    padding: 30px;
    border-radius: 28px;
    border: 1px solid rgba(15, 43, 70, 0.10);
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 43, 70, 0.13);
    text-align: right;
}
.admin-access-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(40, 167, 69, 0.10);
    color: #14823a;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 14px;
}
.admin-access-card h1 {
    margin: 0 0 12px;
    color: #0f2b46;
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.55;
    font-weight: 900;
}
.admin-access-card p {
    margin: 0;
    color: #526273;
    font-size: 15px;
    line-height: 2;
}
.admin-access-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}
.admin-access-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px;
    border-radius: 14px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 850;
    border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.admin-access-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}
.admin-access-btn--primary {
    background: #0f2b46;
    color: #fff;
    box-shadow: 0 14px 28px rgba(15, 43, 70, 0.18);
}
.admin-access-btn--ghost {
    background: #f5f8fb;
    color: #0f2b46;
    border-color: rgba(15, 43, 70, 0.10);
}
@media (max-width: 560px) {
    .admin-access-card { padding: 22px; border-radius: 22px; }
    .admin-access-actions { flex-direction: column; }
    .admin-access-btn { width: 100%; }
}


.admin-help-security-panel {
    border-color: rgba(15, 43, 70, 0.12);
}
.admin-help-security-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.admin-help-security-head h2 {
    margin: 0 0 8px;
}
.admin-help-security-head p,
.admin-help-security-form p {
    color: #64748b;
    margin: 0;
    line-height: 1.9;
}
.admin-help-security-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    font-family: inherit !important;
}
.admin-help-security-badge.is-on {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #86efac;
}
.admin-help-security-badge.is-off {
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #dbe3ea;
}
.admin-help-security-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 16px 0;
}
.admin-help-security-meta span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 13px;
}
.admin-help-security-form {
    display: grid;
    gap: 10px;
}
.admin-help-security-form label {
    font-weight: 800;
    color: #0f2b46;
    font-family: inherit !important;
}
.admin-help-security-form textarea {
    width: 100%;
    max-width: 760px;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    padding: 12px 14px;
    line-height: 1.8;
    direction: ltr;
    text-align: left;
    font-family: inherit !important;
    resize: vertical;
    background: #ffffff;
}
.admin-help-security-form textarea:focus {
    outline: 3px solid rgba(31, 179, 123, 0.18);
    border-color: #1fb37b;
}

/* Admin Security Center */
.admin-security-center,
.admin-security-center * {
    font-family: inherit !important;
    box-sizing: border-box;
}
.admin-security-center .admin-page-header {
    align-items: center;
}
.admin-security-kpis article strong {
    font-size: clamp(18px, 2vw, 26px);
    word-break: break-word;
}
.admin-security-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 6px;
}
.admin-security-route-card h2 {
    margin-top: 0;
}
.admin-security-route-list span {
    direction: ltr;
    text-align: left;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.admin-security-checks {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-security-checks span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    line-height: 1.8;
}
.admin-security-checks span::before {
    content: "✓";
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dcfce7;
    color: #166534;
    font-weight: 900;
}
@media (max-width: 760px) {
    .admin-security-checks { grid-template-columns: 1fr; }
    .admin-security-actions .btn { width: 100%; justify-content: center; }
}

/* Admin Security Center - event trail */
.admin-security-events{display:grid;gap:10px;margin-top:14px}.admin-security-event{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border:1px solid #e5edf5;background:#fbfdff;border-radius:16px;padding:12px 14px;font-family:inherit!important}.admin-security-event strong{display:block;color:#0f2b46;font-size:13px;font-weight:950;margin-bottom:4px}.admin-security-event span{display:block;color:#64748b;font-size:12px;line-height:1.8}.admin-security-event small{display:block;margin-top:5px;color:#475569;background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:5px 8px;direction:ltr;text-align:left;font-size:11px;word-break:break-all}.admin-security-status{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:950;white-space:nowrap}.admin-security-status.is-blocked{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}.admin-security-status.is-updated{background:#ecfdf5;color:#166534;border:1px solid #bbf7d0}.admin-security-status.is-allowed{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}.admin-security-status.is-notice{background:#f8fafc;color:#475569;border:1px solid #e2e8f0}.admin-security-empty{border:1px dashed #cbd5e1;background:#f8fafc;border-radius:16px;padding:14px;color:#64748b;font-size:13px;line-height:1.9;margin-top:12px}@media(max-width:720px){.admin-security-event{flex-direction:column}.admin-security-status{align-self:flex-start}}

/* Admin Gate health checklist (Phase 31) */
.admin-security-health{display:grid;gap:10px;margin-top:14px}.admin-security-health-item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-radius:16px;padding:13px 14px;border:1px solid #e2e8f0;background:#fff;font-family:inherit!important}.admin-security-health-item strong{display:block;color:#0f2b46;font-size:13px;font-weight:950;margin-bottom:4px}.admin-security-health-item span{display:block;color:#64748b;font-size:12px;line-height:1.9}.admin-security-health-item b{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:950;white-space:nowrap}.admin-security-health-item.is-ready{background:#fbfffd;border-color:#bbf7d0}.admin-security-health-item.is-ready b{background:#ecfdf5;color:#166534;border:1px solid #bbf7d0}.admin-security-health-item.is-review{background:#fffdf5;border-color:#fde68a}.admin-security-health-item.is-review b{background:#fffbeb;color:#92400e;border:1px solid #fde68a}@media(max-width:720px){.admin-security-health-item{flex-direction:column}.admin-security-health-item b{align-self:flex-start}}

/* Admin Gate permission matrix (Phase 32) */
.admin-permission-matrix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.admin-permission-item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border:1px solid #e2e8f0;background:#fff;border-radius:18px;padding:14px;font-family:inherit!important}.admin-permission-item strong{display:block;color:#0f2b46;font-size:13px;font-weight:950;margin-bottom:5px}.admin-permission-item span{display:block;color:#475569;font-size:12px;line-height:1.9}.admin-permission-item small{display:block;color:#64748b;font-size:11px;margin-top:7px;direction:ltr;text-align:left}.admin-permission-item b{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:950}.admin-permission-item.is-active{background:#fbfffd;border-color:#bbf7d0}.admin-permission-item.is-active b{background:#ecfdf5;color:#166534;border:1px solid #bbf7d0}.admin-permission-item.is-next{background:#f8fafc;border-color:#cbd5e1}.admin-permission-item.is-next b{background:#f1f5f9;color:#334155;border:1px solid #cbd5e1}@media(max-width:820px){.admin-permission-matrix{grid-template-columns:1fr}.admin-permission-item{flex-direction:column}.admin-permission-item b{align-self:flex-start}}

/* Admin Gate secure logout controls */
.admin-security-header-actions,
.admin-security-logout-form,
.admin-security-inline-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: inherit !important;
}
.admin-security-logout-form,
.admin-security-inline-logout {
    margin: 0;
}
.admin-security-inline-logout {
    margin-top: 12px;
    justify-content: flex-start;
}
.admin-security-center button,
.admin-security-center input,
.admin-security-center textarea,
.admin-security-center label,
.admin-security-center a {
    font-family: inherit !important;
}
@media (max-width: 720px) {
    .admin-security-header-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }
    .admin-security-header-actions .btn,
    .admin-security-logout-form,
    .admin-security-logout-form .btn,
    .admin-security-inline-logout .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Admin Gate roadmap polish - phase 39 */
.admin-security-roadmap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px;font-family:inherit!important}
.admin-security-roadmap-group{border:1px solid #e2e8f0;background:#fbfdff;border-radius:18px;padding:14px;font-family:inherit!important}
.admin-security-roadmap-group h3{margin:0 0 12px;color:#0f2b46;font-size:15px;font-weight:950;line-height:1.8;font-family:inherit!important}
.admin-security-roadmap-items{display:grid;gap:10px}
.admin-security-roadmap-item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border:1px solid #e5edf5;background:#fff;border-radius:15px;padding:12px;font-family:inherit!important}
.admin-security-roadmap-item strong{display:block;color:#0f2b46;font-size:13px;font-weight:950;margin-bottom:5px;line-height:1.8;font-family:inherit!important}
.admin-security-roadmap-item span{display:block;color:#64748b;font-size:12px;line-height:1.9;font-family:inherit!important}
.admin-security-roadmap-item b{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:950;white-space:nowrap;font-family:inherit!important}
.admin-security-roadmap-item.is-progress b{background:#ecfdf5;color:#166534;border:1px solid #bbf7d0}
.admin-security-roadmap-item.is-next b{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.admin-security-roadmap-item.is-later b{background:#f8fafc;color:#475569;border:1px solid #e2e8f0}
@media(max-width:860px){.admin-security-roadmap{grid-template-columns:1fr}.admin-security-roadmap-item{flex-direction:column}.admin-security-roadmap-item b{align-self:flex-start}}

/* Admin Gate two-factor controls - phase 42 */
.admin-security-twofactor-key{
    display:grid;
    gap:8px;
    margin:14px 0;
    padding:14px;
    border:1px solid #bbf7d0;
    background:#f0fdf4;
    border-radius:16px;
    color:#14532d;
    font-family:inherit!important;
}
.admin-security-twofactor-key strong{font-size:13px;font-weight:950;color:#166534;font-family:inherit!important}
.admin-security-twofactor-key code{
    direction:ltr;
    text-align:left;
    display:block;
    width:100%;
    overflow-wrap:anywhere;
    background:#ffffff;
    border:1px solid #bbf7d0;
    border-radius:12px;
    padding:10px 12px;
    color:#0f172a;
    font-size:13px;
    letter-spacing:.08em;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace!important;
}
.admin-security-twofactor-key span{font-size:12px;line-height:1.9;color:#166534;font-family:inherit!important}
.admin-security-twofactor-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;font-family:inherit!important}
.admin-security-twofactor-actions .btn{font-family:inherit!important}
@media(max-width:720px){.admin-security-twofactor-actions{align-items:stretch;flex-direction:column}.admin-security-twofactor-actions .btn{width:100%;justify-content:center}}

/* Help Center admin article editing */
.admin-help-edit-form {
    display: grid;
    gap: 16px;
}
.admin-help-form-row {
    display: grid;
    gap: 8px;
    font-family: inherit !important;
}
.admin-help-form-row span {
    font-weight: 800;
    color: #0f172a;
    font-family: inherit !important;
}
.admin-help-form-row input,
.admin-help-form-row textarea {
    width: 100%;
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: 16px;
    background: #fff;
    color: #0f172a;
    padding: 12px 14px;
    line-height: 1.9;
    font: inherit !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, .05);
    resize: vertical;
}
.admin-help-form-row input:focus,
.admin-help-form-row textarea:focus {
    outline: none;
    border-color: rgba(16, 185, 129, .55);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
}
.admin-help-original-box {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    background: #f8fafc;
    padding: 16px;
}
.admin-help-original-box > strong {
    display: block;
    margin-bottom: 8px;
    color: #0f172a;
}

/* Help Center admin article controls */
.admin-help-edit-options {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(180px, auto));
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
}
.admin-help-edit-options select,
.admin-help-edit-options input,
.admin-help-edit-options textarea,
.admin-help-toggle-row,
.admin-help-status,
.admin-help-muted {
    font-family: inherit !important;
}
.admin-help-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(15, 43, 70, 0.12);
    border-radius: 14px;
    background: #f8fbfa;
    color: #263238;
    font-size: 13px;
    font-weight: 700;
}
.admin-help-toggle-row input {
    width: 18px;
    height: 18px;
    accent-color: #169b62;
}
.admin-help-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.admin-help-status.is-active {
    background: rgba(22, 155, 98, 0.12);
    color: #087246;
}
.admin-help-status.is-muted {
    background: rgba(100, 116, 139, 0.14);
    color: #475569;
}
.admin-help-muted {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}
@media (max-width: 900px) {
    .admin-help-edit-options {
        grid-template-columns: 1fr;
    }
}

/* Help Center admin article related content controls */
.admin-help-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.admin-help-form-row small {
    color: #64748b;
    font-size: 12px;
    line-height: 1.8;
    font-family: inherit !important;
}
.admin-help-original-divider {
    border: 0;
    border-top: 1px solid rgba(15, 23, 42, .1);
    margin: 14px 0;
}
@media (max-width: 860px) {
    .admin-help-edit-grid {
        grid-template-columns: 1fr;
    }
}

/* Help Center admin category management */
.admin-help-category-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 12px;
}
.admin-help-category-meta small {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #eef7f1;
    color: #25603b;
    font: inherit !important;
    font-size: 12px;
}
.admin-help-category-card .btn {
    margin-top: 4px;
}
.admin-help-category-edit input,
.admin-help-category-edit textarea,
.admin-help-category-edit select,
.admin-help-category-edit button,
.admin-help-category-edit label,
.admin-help-category-edit a {
    font-family: inherit !important;
}

/* Help Center admin filters - phase 48 */
.admin-help-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.admin-help-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(15, 118, 110, .10);
    color: #0f766e;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}
.admin-help-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) repeat(4, minmax(140px, .8fr)) auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    margin: 14px 0 16px;
    border: 1px solid rgba(15, 43, 70, .10);
    border-radius: 16px;
    background: #f8fafc;
}
.admin-help-filter label,
.admin-help-filter input,
.admin-help-filter select,
.admin-help-filter button,
.admin-help-filter a {
    font-family: inherit !important;
}
.admin-help-filter label {
    display: grid;
    gap: 6px;
    margin: 0;
}
.admin-help-filter label span {
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}
.admin-help-filter input,
.admin-help-filter select {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(15, 43, 70, .16);
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    padding: 8px 10px;
    outline: none;
}
.admin-help-filter input:focus,
.admin-help-filter select:focus {
    border-color: rgba(15, 118, 110, .55);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}
.admin-help-filter__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.admin-help-empty {
    text-align: center;
    padding: 22px !important;
    color: #64748b;
    background: #f8fafc;
    border-radius: 12px;
}
@media (max-width: 1200px) {
    .admin-help-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .admin-help-filter__actions {
        justify-content: flex-start;
    }
}
@media (max-width: 700px) {
    .admin-help-list-head,
    .admin-help-filter {
        display: block;
    }
    .admin-help-count-badge,
    .admin-help-filter label,
    .admin-help-filter__actions {
        margin-top: 10px;
    }
}

/* Help Center admin live article preview - phase 49 */
.admin-help-edit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
}
.admin-help-live-preview {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 14px;
    border-color: rgba(22, 155, 98, .18) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fffb 100%) !important;
    box-shadow: 0 18px 42px rgba(15, 43, 70, .08) !important;
    font-family: inherit !important;
}
.admin-help-live-preview__head {
    display: grid;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(15, 43, 70, .08);
    font-family: inherit !important;
}
.admin-help-live-preview__head span {
    color: #0f2b46;
    font-weight: 950;
    font-size: 16px;
    font-family: inherit !important;
}
.admin-help-live-preview__head small {
    color: #64748b;
    font-size: 12px;
    line-height: 1.8;
    font-family: inherit !important;
}
.admin-help-live-preview__body {
    display: grid;
    gap: 12px;
    font-family: inherit !important;
}
.admin-help-live-preview__body h2 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.8;
    font-weight: 950;
    font-family: inherit !important;
}
.admin-help-live-preview__body p {
    margin: 0;
    color: #475569;
    line-height: 2;
    font-size: 13px;
    font-family: inherit !important;
}
.admin-help-live-preview__body ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: inherit !important;
}
.admin-help-live-preview__body li {
    position: relative;
    padding: 9px 14px 9px 10px;
    border-radius: 14px;
    background: #f1f8f5;
    color: #173b2f;
    line-height: 1.9;
    font-size: 13px;
    font-family: inherit !important;
}
.admin-help-live-preview__related,
.admin-help-live-preview__questions {
    display: grid;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 43, 70, .08);
    font-family: inherit !important;
}
.admin-help-live-preview__related strong,
.admin-help-live-preview__questions strong {
    color: #0f2b46;
    font-size: 13px;
    font-weight: 950;
    font-family: inherit !important;
}
.admin-help-live-preview__pill {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border-radius: 13px;
    border: 1px solid rgba(22, 155, 98, .14);
    background: #ffffff;
    font-family: inherit !important;
}
.admin-help-live-preview__pill b {
    color: #123a2b;
    font-size: 12px;
    font-weight: 900;
    font-family: inherit !important;
}
.admin-help-live-preview__pill small,
.admin-help-live-preview__empty {
    color: #64748b;
    font-size: 12px;
    line-height: 1.8;
    font-family: inherit !important;
}
@media (max-width: 1100px) {
    .admin-help-edit-layout {
        grid-template-columns: 1fr;
    }
    .admin-help-live-preview {
        position: static;
    }
}

/* Help Center admin quality roadmap - phase 50 */
.admin-help-quality-panel {
    border: 1px solid rgba(22, 163, 74, 0.18);
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.72), rgba(255, 255, 255, 0.96));
}
.admin-help-roadmap-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.admin-help-roadmap-card {
    border: 1px solid rgba(15, 43, 70, 0.1);
    border-radius: 16px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 28px rgba(15, 43, 70, 0.06);
    min-height: 132px;
}
.admin-help-roadmap-card strong,
.admin-help-roadmap-card span,
.admin-help-roadmap-card p,
.admin-help-quality {
    font-family: inherit !important;
}
.admin-help-roadmap-card strong {
    display: block;
    color: #0f2b46;
    font-size: 14px;
    line-height: 1.8;
}
.admin-help-roadmap-card span {
    display: inline-flex;
    margin: 8px 0;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.1);
    color: #15803d;
    font-size: 12px;
    font-weight: 800;
}
.admin-help-roadmap-card p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.9;
}
.admin-help-quality {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}
.admin-help-quality.is-ready {
    background: rgba(22, 163, 74, 0.1);
    color: #15803d;
}
.admin-help-quality.needs-work {
    background: rgba(245, 158, 11, 0.14);
    color: #92400e;
}
@media (max-width: 1100px) {
    .admin-help-roadmap-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .admin-help-roadmap-grid {
        grid-template-columns: 1fr;
    }
}

/* Help Center admin request dashboard */
.admin-help-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.admin-help-requests-table td:first-child strong {
    display: block;
    color: #10243f;
    margin-bottom: 6px;
    line-height: 1.8;
}
.admin-help-requests-table .admin-help-muted {
    display: block;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.7;
}
.admin-help-requests .admin-help-filter input,
.admin-help-requests .admin-help-filter select,
.admin-help-requests .admin-help-filter button,
.admin-help-requests .admin-help-filter a {
    font-family: inherit !important;
}
@media (max-width: 760px) {
    .admin-help-header-actions {
        width: 100%;
    }
    .admin-help-header-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Help Center admin request review - phase 52 */
.admin-help-review-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.75fr);
    gap: 18px;
    align-items: start;
}
.admin-help-request-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}
.admin-help-request-summary div,
.admin-help-request-userbox,
.admin-help-message-card {
    border: 1px solid rgba(15, 43, 70, 0.09);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.86);
    padding: 13px 14px;
}
.admin-help-request-summary span,
.admin-help-request-userbox small,
.admin-help-message-card header span {
    display: block;
    color: #64748b;
    font-size: 12px;
    line-height: 1.8;
    font-family: inherit !important;
}
.admin-help-request-summary strong,
.admin-help-request-userbox p,
.admin-help-message-card p,
.admin-help-review-steps li {
    color: #0f2b46;
    font-family: inherit !important;
}
.admin-help-request-userbox h3,
.admin-help-request-messages h3,
.admin-help-review-side h2 {
    margin: 0 0 10px;
    color: #0f2b46;
    font-size: 16px;
    line-height: 1.8;
    font-family: inherit !important;
}
.admin-help-request-userbox p {
    margin: 0;
    font-weight: 900;
}
.admin-help-request-messages {
    margin-top: 18px;
}
.admin-help-message-card {
    margin-top: 10px;
    background: #fff;
}
.admin-help-message-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.admin-help-message-card header strong {
    color: #0f2b46;
    font-family: inherit !important;
}
.admin-help-message-card p {
    margin: 0;
    line-height: 2;
    color: #334155;
}
.admin-help-review-side {
    position: sticky;
    top: 18px;
}
.admin-help-review-steps {
    display: grid;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}
.admin-help-review-steps li {
    position: relative;
    padding: 10px 34px 10px 12px;
    border-radius: 14px;
    background: rgba(22, 163, 74, 0.08);
    color: #14532d;
    line-height: 1.8;
}
.admin-help-review-steps li::before {
    content: "✓";
    position: absolute;
    right: 12px;
    top: 10px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
}
.admin-help-review-actions {
    display: grid;
    gap: 10px;
}
.admin-help-review-actions .btn {
    justify-content: center;
}
@media (max-width: 980px) {
    .admin-help-review-grid,
    .admin-help-request-summary {
        grid-template-columns: 1fr;
    }
    .admin-help-review-side {
        position: static;
    }
}

/* Help Center admin request quick reply - phase 53 */
.admin-help-reply-form {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid rgba(22, 163, 74, 0.18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.88), rgba(255, 255, 255, 0.96));
    box-shadow: 0 16px 34px rgba(15, 43, 70, 0.06);
}
.admin-help-reply-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.admin-help-reply-form h3 {
    margin: 0 0 4px;
    color: #0f2b46;
    font-size: 16px;
    line-height: 1.8;
    font-family: inherit !important;
}
.admin-help-reply-form p {
    margin: 0;
    color: #64748b;
    line-height: 1.9;
    font-family: inherit !important;
}
.admin-help-reply-form label {
    display: block;
    margin: 10px 0 6px;
    color: #0f2b46;
    font-weight: 900;
    line-height: 1.8;
    font-family: inherit !important;
}
.admin-help-reply-form textarea,
.admin-help-reply-form select,
.admin-help-reply-form button {
    font-family: inherit !important;
}
.admin-help-reply-form textarea {
    width: 100%;
    min-height: 132px;
    resize: vertical;
    border: 1px solid rgba(15, 43, 70, 0.14);
    border-radius: 16px;
    background: #fff;
    color: #0f2b46;
    padding: 12px 14px;
    line-height: 2;
    outline: none;
}
.admin-help-reply-form textarea:focus,
.admin-help-reply-form select:focus {
    border-color: rgba(22, 163, 74, 0.52);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.1);
}
.admin-help-reply-row {
    display: grid;
    grid-template-columns: auto minmax(170px, 240px) auto;
    gap: 10px;
    align-items: end;
    margin-top: 10px;
}
.admin-help-reply-row label {
    margin: 0 0 8px;
}
.admin-help-reply-row select {
    min-height: 44px;
    border: 1px solid rgba(15, 43, 70, 0.14);
    border-radius: 14px;
    background: #fff;
    color: #0f2b46;
    padding: 0 12px;
}
.admin-help-reply-row .btn {
    min-height: 44px;
    justify-content: center;
}
@media (max-width: 760px) {
    .admin-help-reply-row {
        grid-template-columns: 1fr;
    }
    .admin-help-reply-row .btn {
        width: 100%;
    }
}

/* Admin Gate recovery codes - phase 54 */
.admin-security-recovery-codes{border-color:#fed7aa;background:#fff7ed;color:#7c2d12}
.admin-security-recovery-codes strong,.admin-security-recovery-codes span{color:#7c2d12!important}
.admin-security-recovery-code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px;font-family:inherit!important}
.admin-security-recovery-code-grid code{margin:0;text-align:center;font-size:12px;letter-spacing:.06em;border-color:#fdba74;background:#fffaf5;color:#7c2d12}
@media(max-width:640px){.admin-security-recovery-code-grid{grid-template-columns:1fr}}

/* Phase 56: Admin security event reporting */
.admin-security-event-filter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:18px;padding:14px;font-family:inherit!important}
.admin-security-event-filter label{display:grid;gap:6px;font-family:inherit!important}
.admin-security-event-filter label span{font-size:12px;font-weight:900;color:#475569;font-family:inherit!important}
.admin-security-event-filter select,.admin-security-event-filter input{width:100%;border:1px solid #dbe5ef;border-radius:12px;background:#fff;padding:10px 12px;font-size:13px;color:#0f2b46;font-family:inherit!important;outline:none}
.admin-security-event-filter select:focus,.admin-security-event-filter input:focus{border-color:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.12)}
.admin-security-event-filter-actions{display:flex;align-items:end;gap:8px;flex-wrap:wrap;font-family:inherit!important}
.admin-security-event-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:#64748b;font-family:inherit!important}
.admin-security-event-summary span{display:inline-flex;align-items:center;gap:5px;border:1px solid #e2e8f0;background:#fff;border-radius:999px;padding:7px 10px;font-family:inherit!important}.admin-security-event-summary strong{color:#0f2b46}.admin-security-event-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.admin-security-event-actions .btn-sm{padding:6px 10px;font-size:11px;border-radius:999px}.admin-security-event-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px;font-family:inherit!important}.admin-security-event-detail-grid article{border:1px solid #e2e8f0;background:#fbfdff;border-radius:16px;padding:14px;font-family:inherit!important}.admin-security-event-detail-grid span,.admin-security-event-detail-block span{display:block;color:#64748b;font-size:12px;font-weight:900;margin-bottom:6px;font-family:inherit!important}.admin-security-event-detail-grid strong{display:block;color:#0f2b46;font-size:14px;font-weight:950;word-break:break-word;font-family:inherit!important}.admin-security-event-detail-block{margin-top:12px;border:1px solid #e2e8f0;background:#fff;border-radius:16px;padding:14px;font-family:inherit!important}.admin-security-event-detail-block code{display:block;direction:ltr;text-align:left;white-space:pre-wrap;word-break:break-word;border:1px solid #e5e7eb;background:#f8fafc;border-radius:12px;padding:10px;color:#334155;font-size:12px}.admin-security-event-detail-block p{margin:0;color:#334155;line-height:1.9;font-size:13px;font-family:inherit!important}@media(max-width:980px){.admin-security-event-filter,.admin-security-event-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.admin-security-event-filter,.admin-security-event-detail-grid{grid-template-columns:1fr}.admin-security-event-filter-actions{align-items:stretch;flex-direction:column}.admin-security-event-filter-actions .btn{width:100%;justify-content:center}.admin-security-event-actions{justify-content:flex-start}}

/* Admin recovery guidance - phase 57 */
.admin-security-twofactor-note{
    display:grid;
    gap:8px;
    margin:14px 0;
    padding:14px;
    border:1px solid #fed7aa;
    background:#fff7ed;
    border-radius:16px;
    color:#7c2d12;
    font-family:inherit!important;
}
.admin-security-twofactor-note strong{font-size:13px;font-weight:950;color:#9a3412;font-family:inherit!important}
.admin-security-twofactor-note p{margin:0;color:#7c2d12;font-size:12px;line-height:1.95;font-family:inherit!important}

/* Phase 59 — Help article feedback report */
.admin-help-feedback-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 18px}
.admin-help-feedback-summary article{border:1px solid rgba(15,43,70,.09);background:#f8fafc;border-radius:18px;padding:14px 16px;font-family:inherit!important}
.admin-help-feedback-summary strong{display:block;color:#0f2b46;font-size:22px;font-weight:1000;line-height:1.2;font-family:inherit!important}
.admin-help-feedback-summary span{display:block;color:#64748b;font-size:12.5px;font-weight:800;margin-top:5px;font-family:inherit!important}
.admin-help-feedback-table td small{display:block;color:#94a3b8;font-size:11.5px;margin-top:4px;font-family:inherit!important;direction:ltr;text-align:right}
.admin-help-feedback-table tr.is-weak-feedback td{background:rgba(254,242,242,.42)}
.admin-help-feedback-panel input,.admin-help-feedback-panel select,.admin-help-feedback-panel textarea,.admin-help-feedback-panel button,.admin-help-feedback-panel a,.admin-help-feedback-panel label,.admin-help-feedback-panel span,.admin-help-feedback-panel small{font-family:inherit!important}
@media (max-width:760px){.admin-help-feedback-summary{grid-template-columns:1fr}.admin-help-feedback-table td small{text-align:right}}

/* Phase 62: Help request dashboard depth */
.admin-help-center .admin-help-kpis--six {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.admin-help-filter--wide {
    display: grid;
    grid-template-columns: minmax(220px, 1.35fr) repeat(5, minmax(145px, 1fr));
    gap: 12px;
    align-items: end;
}
.admin-help-filter--wide label,
.admin-help-meta-form label {
    display: grid;
    gap: 6px;
    color: #334155;
    font-weight: 800;
}
.admin-help-filter--wide input,
.admin-help-filter--wide select,
.admin-help-meta-form textarea,
.admin-help-meta-form select,
.admin-help-reply-form textarea,
.admin-help-reply-form select,
.admin-help-reply-form button,
.admin-help-filter--wide button,
.admin-help-filter--wide a {
    font-family: inherit !important;
}
.admin-help-filter--wide input,
.admin-help-filter--wide select,
.admin-help-meta-form textarea,
.admin-help-meta-form select {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(15, 43, 70, .13);
    border-radius: 13px;
    background: #fff;
    color: #0f172a;
    padding: 9px 11px;
    outline: none;
}
.admin-help-filter--wide input:focus,
.admin-help-filter--wide select:focus,
.admin-help-meta-form textarea:focus,
.admin-help-meta-form select:focus {
    border-color: rgba(22, 163, 74, .42);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .10);
}
.admin-help-filter--wide .admin-help-filter__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.admin-help-request-summary--extended {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-help-reply-row--three {
    display: grid;
    grid-template-columns: auto minmax(130px, 1fr) auto minmax(130px, 1fr) auto minmax(150px, 1fr);
    gap: 10px;
    align-items: center;
}
.admin-help-meta-form {
    margin: 16px 0;
}
.admin-help-footnote {
    margin-top: 12px !important;
    font-size: 13px;
}
@media (max-width: 1180px) {
    .admin-help-center .admin-help-kpis--six,
    .admin-help-filter--wide,
    .admin-help-request-summary--extended,
    .admin-help-reply-row--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 720px) {
    .admin-help-center .admin-help-kpis--six,
    .admin-help-filter--wide,
    .admin-help-request-summary--extended,
    .admin-help-reply-row--three {
        display: block;
    }
    .admin-help-filter--wide label,
    .admin-help-meta-form label,
    .admin-help-filter__actions,
    .admin-help-reply-row--three select {
        margin-bottom: 10px;
    }
}

/* Help Center operators — phase 64 */
.admin-help-kpis--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.admin-help-operators-table td,
.admin-help-operators-table th,
.admin-help-inline-form input,
.admin-help-inline-form select,
.admin-help-inline-form button,
.admin-help-operator-strip,
.admin-help-operator-strip * {
    font-family: inherit !important;
}
.admin-help-inline-form {
    display: grid;
    grid-template-columns: minmax(105px, 1fr) 82px minmax(150px, 1.4fr) auto;
    gap: 8px;
    align-items: center;
}
.admin-help-inline-form input,
.admin-help-inline-form select {
    width: 100%;
    min-height: 36px;
    border: 1px solid rgba(15, 43, 70, .14);
    border-radius: 12px;
    padding: 7px 10px;
    background: #fff;
    color: #14324a;
}
.admin-help-status.is-warning {
    background: rgba(245, 158, 11, .12);
    color: #92400e;
    border-color: rgba(245, 158, 11, .28);
}
.admin-help-operator-strip {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: #486275;
    font-size: 13px;
}
.admin-help-operator-strip strong,
.admin-help-operator-strip span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border-radius: 999px;
    padding: 5px 10px;
    background: rgba(20, 50, 74, .06);
}
.admin-help-operator-strip strong {
    background: rgba(16, 185, 129, .12);
    color: #047857;
}
@media (max-width: 980px) {
    .admin-help-kpis--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .admin-help-inline-form {
        grid-template-columns: 1fr;
    }
}

/* Phase 73: admin session audit table */
.admin-security-center .admin-security-table-wrap{width:100%;overflow-x:auto;margin-top:14px;border:1px solid #e2e8f0;border-radius:18px;background:#fff;font-family:inherit!important}
.admin-security-center .admin-table{width:100%;border-collapse:separate;border-spacing:0;font-family:inherit!important;min-width:760px}
.admin-security-center .admin-table th,.admin-security-center .admin-table td{padding:12px 14px;border-bottom:1px solid #eef2f7;text-align:right;vertical-align:middle;font-family:inherit!important;font-size:13px;line-height:1.8;color:#334155}
.admin-security-center .admin-table th{background:#f8fafc;color:#0f2b46;font-weight:950;white-space:nowrap}
.admin-security-center .admin-table td strong{display:block;color:#0f2b46;font-weight:950;font-family:inherit!important}
.admin-security-center .admin-table td small{display:block;color:#64748b;font-size:11px;font-family:inherit!important}
.admin-security-center .admin-table code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace!important;background:#f8fafc;border:1px solid #e5e7eb;border-radius:9px;padding:4px 7px;color:#334155;direction:ltr;display:inline-block}
.admin-security-center .admin-security-row-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;font-family:inherit!important}
.admin-security-center .admin-security-row-actions .btn-sm{padding:7px 11px;border-radius:999px;font-size:11px;font-family:inherit!important}

/* Admin recovery preparedness kit - phase 74 */
.admin-security-recovery-kit{display:grid;gap:8px;margin-top:12px;font-family:inherit!important}
.admin-security-recovery-kit span{font-size:13px;font-weight:900;color:#7c2d12}
.admin-security-recovery-kit textarea{width:100%;min-height:220px;resize:vertical;border:1px solid #fdba74;border-radius:16px;background:#fffaf5;color:#431407;padding:12px 14px;line-height:1.75;font-family:inherit!important;font-size:12px;direction:ltr;text-align:left;white-space:pre;overflow:auto}


.admin-security-final-qa{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px}
.admin-security-next-list{margin-top:16px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:16px;padding:14px;font-family:inherit!important}
.admin-security-next-list h3{margin:0 0 10px;color:#0f2b46;font-size:14px;font-weight:950;font-family:inherit!important}
.admin-security-next-list p{margin:8px 0;color:#475569;font-size:12px;line-height:2;font-family:inherit!important}
.admin-security-next-list strong{color:#0f2b46;font-family:inherit!important}
@media(max-width:860px){.admin-security-final-qa{grid-template-columns:1fr}}

/* Phase 81: Admin security browser scenario matrix */
.admin-browser-scenario-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px;font-family:inherit!important}
.admin-browser-scenario{border:1px solid #e5edf5;background:#fff;border-radius:16px;padding:13px 14px;font-family:inherit!important;box-shadow:0 10px 22px rgba(15,43,70,.04)}
.admin-browser-scenario,.admin-browser-scenario *{font-family:inherit!important}
.admin-browser-scenario__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.admin-browser-scenario__head strong{display:inline-flex;align-items:center;justify-content:center;background:#f8fafc;border:1px solid #e2e8f0;color:#0f2b46;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:950;direction:ltr;white-space:nowrap}
.admin-browser-scenario__head b{display:inline-flex;align-items:center;justify-content:center;background:#ecfdf5;border:1px solid #bbf7d0;color:#166534;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:950;white-space:nowrap}
.admin-browser-scenario p{margin:0;color:#475569;font-size:12px;line-height:1.9}
.admin-browser-scenario small{display:block;margin-top:8px;border-top:1px dashed #e2e8f0;padding-top:7px;color:#64748b;font-size:11px;direction:ltr;text-align:left;word-break:break-all}
@media(max-width:820px){.admin-browser-scenario-grid{grid-template-columns:1fr}.admin-browser-scenario__head{flex-direction:column;align-items:flex-start}}

/* Help Center feedback analytics (Phase 82) */
.admin-help-insight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.admin-help-insight-card,
.admin-help-category-feedback__grid article {
    font-family: inherit !important;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 12px 24px rgba(15, 43, 70, 0.04);
}
.admin-help-insight-card div,
.admin-help-insight-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.admin-help-insight-card strong,
.admin-help-category-feedback__grid strong {
    display: block;
    color: #0f2b46;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.8;
}
.admin-help-insight-card small,
.admin-help-category-feedback__grid small {
    color: #64748b;
    font-size: 12px;
    line-height: 1.8;
}
.admin-help-insight-card > span {
    display: inline-flex;
    width: fit-content;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}
.admin-help-insight-card p {
    margin: 10px 0 12px;
    color: #475569;
    font-size: 13px;
    line-height: 1.95;
}
.admin-help-insight-card b {
    color: #0f2b46;
    font-size: 12px;
    font-weight: 900;
}
.admin-help-insight-card.is-critical { border-color: #fecaca; background: #fffafa; }
.admin-help-insight-card.is-critical > span { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.admin-help-insight-card.is-warning { border-color: #fde68a; background: #fffdf5; }
.admin-help-insight-card.is-warning > span { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.admin-help-insight-card.is-good { border-color: #bbf7d0; background: #fbfffd; }
.admin-help-insight-card.is-good > span { background: #ecfdf5; color: #166534; border: 1px solid #bbf7d0; }
.admin-help-insight-card.is-neutral > span { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.admin-help-category-feedback {
    margin: 18px 0 8px;
}
.admin-help-category-feedback h3 {
    margin: 0 0 12px;
    color: #0f2b46;
    font-size: 16px;
    font-weight: 950;
}
.admin-help-category-feedback__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.admin-help-category-feedback__grid span {
    display: inline-flex;
    width: fit-content;
    margin: 8px 0;
    padding: 5px 9px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 12px;
    font-weight: 850;
}
@media (max-width: 900px) {
    .admin-help-insight-grid,
    .admin-help-category-feedback__grid { grid-template-columns: 1fr; }
}

/* Help Search Gap Actions (Phase 89) */
.admin-help-inline-action,
.admin-help-inline-action * {
    font-family: inherit !important;
}
.admin-help-inline-action {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.admin-help-inline-action .btn {
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 12px;
}

/* Help live operator console - Phase 105 */
.admin-help-live-console,
.admin-help-live-console *{font-family:inherit!important;}
.admin-help-live-kpis article strong{font-size:22px!important;line-height:1.2!important;}
.admin-help-live-grid{display:grid!important;grid-template-columns:minmax(230px,.85fr) minmax(360px,1.35fr) minmax(240px,.8fr)!important;gap:14px!important;align-items:stretch!important;margin-top:14px!important;}
.admin-help-live-list,.admin-help-live-chat,.admin-help-live-context{border:1px solid rgba(15,43,70,.08)!important;border-radius:18px!important;background:#fff!important;box-shadow:0 12px 30px rgba(15,43,70,.05)!important;min-width:0!important;}
.admin-help-live-list{padding:12px!important;}
.admin-help-live-list__head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin-bottom:10px!important;}
.admin-help-live-list__head strong{font-size:13px!important;font-weight:1000!important;color:#0f172a!important;}
.admin-help-live-items{display:flex!important;flex-direction:column!important;gap:8px!important;max-height:520px!important;overflow:auto!important;padding-left:2px!important;}
.admin-help-live-item{appearance:none!important;border:1px solid rgba(15,43,70,.08)!important;background:#f8fafc!important;border-radius:15px!important;padding:10px 11px!important;text-align:right!important;display:grid!important;grid-template-columns:1fr auto!important;gap:3px 8px!important;cursor:pointer!important;color:#0f172a!important;transition:.18s ease!important;}
.admin-help-live-item:hover,.admin-help-live-item.is-selected{background:#eef7f2!important;border-color:rgba(22,163,74,.28)!important;box-shadow:0 10px 22px rgba(22,163,74,.08)!important;}
.admin-help-live-item strong{font-size:13px!important;font-weight:1000!important;line-height:1.6!important;}
.admin-help-live-item span{font-size:11px!important;font-weight:900!important;color:#166534!important;align-self:center!important;}
.admin-help-live-item small{grid-column:1 / -1!important;font-size:11.6px!important;font-weight:750!important;color:#64748b!important;line-height:1.7!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.admin-help-live-unread{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:20px!important;height:20px!important;border-radius:999px!important;background:#16a34a!important;color:#fff!important;font-size:11px!important;font-weight:1000!important;}
.admin-help-live-chat{display:flex!important;flex-direction:column!important;min-height:560px!important;overflow:hidden!important;}
.admin-help-live-chat__empty{margin:auto!important;text-align:center!important;padding:24px!important;color:#64748b!important;display:flex!important;flex-direction:column!important;gap:8px!important;}
.admin-help-live-chat__empty strong{color:#0f172a!important;font-size:15px!important;font-weight:1000!important;}
.admin-help-live-chat__empty span{font-size:12.5px!important;font-weight:750!important;line-height:1.9!important;}
.admin-help-live-chat__active{display:flex!important;flex-direction:column!important;min-height:560px!important;height:100%!important;}
.admin-help-live-chat__head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:12px 14px!important;border-bottom:1px solid rgba(15,43,70,.08)!important;background:#fbfdfc!important;}
.admin-help-live-chat__head strong{display:block!important;font-size:14px!important;font-weight:1000!important;color:#0f172a!important;}
.admin-help-live-chat__head span{display:block!important;margin-top:2px!important;font-size:11.5px!important;font-weight:850!important;color:#166534!important;}
.admin-help-live-messages{flex:1!important;display:flex!important;flex-direction:column!important;gap:8px!important;padding:14px!important;overflow:auto!important;background:linear-gradient(180deg,#fff,#fbfdff)!important;}
.admin-help-live-message{max-width:82%!important;border-radius:18px!important;padding:8px 11px!important;border:1px solid rgba(15,43,70,.08)!important;background:#f8fafc!important;color:#0f172a!important;box-shadow:0 8px 20px rgba(15,43,70,.05)!important;}
.admin-help-live-message.is-user{align-self:flex-start!important;background:#0f2b46!important;color:#fff!important;border-bottom-right-radius:7px!important;}
.admin-help-live-message.is-operator{align-self:flex-end!important;background:#ecfdf5!important;color:#14532d!important;border-color:rgba(22,163,74,.18)!important;border-bottom-left-radius:7px!important;}
.admin-help-live-message.is-system{align-self:center!important;background:#fff7ed!important;color:#9a3412!important;border-color:rgba(245,158,11,.2)!important;}
.admin-help-live-message span{display:block!important;margin-bottom:2px!important;font-size:10.5px!important;font-weight:1000!important;opacity:.78!important;}
.admin-help-live-message p{margin:0!important;font-size:12.7px!important;font-weight:800!important;line-height:1.9!important;white-space:pre-wrap!important;word-break:break-word!important;}
.admin-help-live-typing{padding:0 14px 8px!important;color:#166534!important;font-size:11.8px!important;font-weight:900!important;}
.admin-help-live-reply{display:flex!important;gap:8px!important;align-items:flex-end!important;padding:12px 14px!important;border-top:1px solid rgba(15,43,70,.08)!important;background:#fff!important;}
.admin-help-live-reply textarea{flex:1!important;resize:none!important;border:1px solid rgba(15,43,70,.12)!important;border-radius:14px!important;padding:10px 12px!important;font-size:13px!important;font-weight:800!important;line-height:1.8!important;min-height:48px!important;outline:none!important;}
.admin-help-live-reply textarea:focus{border-color:rgba(22,163,74,.38)!important;box-shadow:0 0 0 3px rgba(22,163,74,.08)!important;}
.admin-help-live-context{padding:14px!important;}
.admin-help-live-context h3{margin:0 0 12px!important;font-size:14px!important;font-weight:1000!important;color:#0f172a!important;}
.admin-help-live-context dl{margin:0!important;display:grid!important;gap:10px!important;}
.admin-help-live-context dt{font-size:11.2px!important;font-weight:1000!important;color:#64748b!important;}
.admin-help-live-context dd{margin:0!important;font-size:12.4px!important;font-weight:850!important;line-height:1.9!important;color:#0f172a!important;word-break:break-word!important;}
.admin-help-live-console .btn,.admin-help-live-console button,.admin-help-live-console textarea{font-family:inherit!important;}
@media(max-width:1100px){.admin-help-live-grid{grid-template-columns:1fr!important}.admin-help-live-chat,.admin-help-live-chat__active{min-height:440px!important}.admin-help-live-items{max-height:300px!important}}


/* Phase 106: hidden safety for admin live console and modal/backdrop layers. */
[hidden]{display:none!important;}
.admin-help-operators [hidden],
.admin-help-live-console [hidden]{display:none!important;visibility:hidden!important;pointer-events:none!important;}
.admin-help-operators .admin-help-live-console{position:relative!important;z-index:1!important;isolation:isolate!important;}

/* Phase 107 — Help live chat close / ticket handoff controls */
.admin-help-live-actions{display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:wrap!important;justify-content:flex-end!important;}
.admin-help-live-actions .btn{font-family:inherit!important;font-size:11.5px!important;padding:7px 10px!important;white-space:nowrap!important;}
.admin-help-live-handoff{padding:8px 14px 0!important;background:#fff!important;}
.admin-help-live-handoff textarea{width:100%!important;resize:none!important;border:1px solid rgba(15,43,70,.12)!important;border-radius:14px!important;padding:9px 11px!important;font-family:inherit!important;font-size:12.5px!important;font-weight:800!important;line-height:1.8!important;outline:none!important;background:#fbfdff!important;color:#0f172a!important;}
.admin-help-live-handoff textarea:focus{border-color:rgba(22,163,74,.38)!important;box-shadow:0 0 0 3px rgba(22,163,74,.08)!important;}
.admin-help-live-reply[hidden],.admin-help-live-actions [hidden],.admin-help-live-handoff[hidden]{display:none!important;visibility:hidden!important;pointer-events:none!important;}


/* Phase 108 — Help operator console overlay guard.
   This page must stay clickable even if a stale admin/editor backdrop is left in DOM. */
body.is-help-operators-page .modal-backdrop,
body.is-help-operators-page .modal-backdrop.show,
body.is-help-operators-page .lb_modal:not(.is-open),
body.is-help-operators-page .sec-media-modal:not(.is-open),
body.is-help-operators-page .sec-icon-modal:not(.is-open),
body.is-help-operators-page .fc-confirm-modal:not(.is-open),
body.is-help-operators-page .chatModalOverlay:not(.is-open),
body.is-help-operators-page .cke_dialog_background_cover,
body.is-help-operators-page .cke_notifications_area,
body.is-help-operators-page .cke_notification{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
body.is-help-operators-page,
body.is-help-operators-page .admin-help-operators,
body.is-help-operators-page .admin-help-live-console{
  pointer-events:auto!important;
}

/* Phase 109: Help operator console practical filters + lighter inactive polling UI */
.admin-help-live-tools{display:grid!important;grid-template-columns:1fr minmax(115px,145px)!important;gap:8px!important;margin:0 0 10px!important;align-items:center!important;}
.admin-help-live-tools input,.admin-help-live-tools select{width:100%!important;min-height:38px!important;border:1px solid rgba(15,43,70,.12)!important;border-radius:13px!important;background:#fff!important;color:#0f172a!important;font-family:inherit!important;font-size:12px!important;font-weight:800!important;line-height:1.6!important;padding:8px 10px!important;outline:none!important;}
.admin-help-live-tools input:focus,.admin-help-live-tools select:focus{border-color:rgba(22,163,74,.38)!important;box-shadow:0 0 0 3px rgba(22,163,74,.08)!important;}
@media(max-width:560px){.admin-help-live-tools{grid-template-columns:1fr!important;}}


/* Phase 110 — Definitive route-scoped guard for Help Operators.
   The operator console does not use editor/lightbox/confirm layers; any stale global layer must not cover the page. */
body.admin-help-operators-route::before,
body.admin-help-operators-route::after,
body.admin-help-operators-route .modal-backdrop,
body.admin-help-operators-route .modal-backdrop.show,
body.admin-help-operators-route .fc-confirm-modal,
body.admin-help-operators-route .fc-confirm-modal.is-open,
body.admin-help-operators-route .chatModalOverlay,
body.admin-help-operators-route .chatModalOverlay.is-open,
body.admin-help-operators-route .lb_modal,
body.admin-help-operators-route .lb_modal.is-open,
body.admin-help-operators-route .sec-media-modal,
body.admin-help-operators-route .sec-icon-modal,
body.admin-help-operators-route .sec-media-backdrop,
body.admin-help-operators-route .sec-icon-backdrop,
body.admin-help-operators-route .cke_dialog,
body.admin-help-operators-route .cke_dialog_background_cover,
body.admin-help-operators-route .cke_notifications_area,
body.admin-help-operators-route .cke_notification{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
body.admin-help-operators-route,
body.admin-help-operators-route .container,
body.admin-help-operators-route .admin-help-operators,
body.admin-help-operators-route .admin-help-operators *{
  pointer-events:auto!important;
}
body.admin-help-operators-route .admin-help-operators{
  position:relative!important;
  z-index:2147483000!important;
  isolation:isolate!important;
}

/* Phase 112: operator console unread and read-state polish. */
.admin-help-live-console.has-unread-live-messages .admin-help-live-list__head strong::after{content:'پیام تازه';display:inline-flex;margin-right:8px;padding:2px 8px;border-radius:999px;background:#16a34a;color:#fff;font:inherit;font-size:10.5px;font-weight:1000;vertical-align:middle;}
.admin-help-live-item.has-unread{background:#ecfdf5!important;border-color:rgba(22,163,74,.32)!important;box-shadow:0 10px 22px rgba(22,163,74,.10)!important;}
.admin-help-live-message small{display:block!important;margin-top:3px!important;color:#64748b!important;font:inherit!important;font-size:10.5px!important;font-weight:850!important;line-height:1.5!important;}

/* Light theme bridge. Dark previews are owned by page-scoped stylesheets. */
html[data-theme="light"] body.site-shell{background:var(--fc-page-bg)!important;color:var(--fc-text);}

/* Phase391 — Identity verified badge (shared user trust marker) */
.fc-identity-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  vertical-align:middle;
  width:max-content;
  max-width:100%;
  min-height:20px;
  padding:3px 7px;
  border:1px solid rgba(22,163,74,.26);
  border-radius:999px;
  background:linear-gradient(180deg,#ecfdf5,#f8fffb);
  color:#047857;
  font-family:inherit!important;
  font-size:10.8px;
  font-weight:900;
  line-height:1.45;
  letter-spacing:-.01em;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(16,185,129,.08);
}
.fc-identity-badge__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:13px;
  height:13px;
  border-radius:999px;
  background:#10b981;
  color:#fff;
  font-family:inherit!important;
  font-size:8px;
  font-weight:950;
  line-height:1;
  flex:0 0 auto;
}
.fc-identity-badge__text{font-family:inherit!important;line-height:1.45;}
.fc-identity-badge--compact{min-height:18px;padding:2px 6px;font-size:10.2px;gap:3px;}
.fc-identity-badge--compact .fc-identity-badge__icon{width:12px;height:12px;font-size:7.5px;}
.fc-identity-badge--chat{min-height:18px;padding:2px 6px;font-size:10px;gap:3px;}
.fc-identity-badge--chat .fc-identity-badge__icon{width:12px;height:12px;font-size:7.5px;}
@media(max-width:520px){.fc-identity-badge{font-size:10px;padding-inline:6px}.fc-identity-badge__text{max-width:92px;overflow:hidden;text-overflow:ellipsis}}

/* Admin notification dropdown readability/viewport fix (v789)
   The admin bell is placed near the left edge; aligning the dropdown by `right:0`
   can push it outside the viewport. Also admin nav hover color must not make
   dropdown text white on a white hover background. */
.admin-nav .admin-notif-bell .notif-dropdown {
    right: auto;
    left: 0;
    top: 100%;
    margin-top: 8px;
    width: min(340px, calc(100vw - 24px));
    min-width: min(300px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.22);
}

.admin-nav .admin-notif-bell .notif-dropdown,
.admin-nav .admin-notif-bell .notif-dropdown a,
.admin-nav .admin-notif-bell .notif-dropdown a:visited,
.admin-nav .admin-notif-bell .notif-dropdown a:hover,
.admin-nav .admin-notif-bell .notif-dropdown a:focus-visible {
    color: #111827;
}

.admin-nav .admin-notif-bell .notif-dropdown li a {
    color: #111827 !important;
    background: transparent;
    line-height: 1.75;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.admin-nav .admin-notif-bell .notif-dropdown li a:hover,
.admin-nav .admin-notif-bell .notif-dropdown li a:focus-visible {
    color: #0f172a !important;
    background: #f8fafc;
    outline: none;
}

.admin-nav .admin-notif-bell .notif-dropdown .notif-msg {
    color: #111827;
    font-weight: 750;
}

.admin-nav .admin-notif-bell .notif-dropdown .notif-date {
    color: #64748b;
    font-weight: 600;
}

.admin-nav .admin-notif-bell .notif-dropdown-footer a,
.admin-nav .admin-notif-bell .notif-dropdown-footer a:visited,
.admin-nav .admin-notif-bell .notif-dropdown-footer a:hover,
.admin-nav .admin-notif-bell .notif-dropdown-footer a:focus-visible,
.admin-nav .admin-notif-bell .notif-dropdown-footer .notif-mark-all-link,
.admin-nav .admin-notif-bell .notif-dropdown-footer .notif-mark-all-link:hover,
.admin-nav .admin-notif-bell .notif-dropdown-footer .notif-mark-all-link:focus-visible {
    color: #2563eb !important;
}

@media (max-width: 640px) {
    .admin-nav .admin-notif-bell .notif-dropdown {
        position: fixed;
        left: 12px;
        right: 12px;
        top: 52px;
        width: auto;
        min-width: 0;
        max-width: none;
        margin-top: 0;
    }
}

/* v790: admin triage disabled-link clarity */
.btn.is-disabled,
.btn.is-disabled:hover,
.btn.is-disabled:focus-visible {
    opacity: .58;
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: none !important;
}
/* === Freelancito Brand Master v812: selected flowing-F identity === */
.brand .brand-link--freelancito,
.topbar .brand-link--freelancito{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:0;
    color:#0f172a !important;
    text-decoration:none !important;
    min-width:0;
    isolation:isolate;
}
.brand .brand-link--freelancito:hover,
.topbar .brand-link--freelancito:hover{
    color:#064e3b !important;
}
.brand-lockup--freelancito{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:4px 5px;
    border-radius:18px;
    direction:rtl;
    white-space:nowrap;
}
.brand-symbol{
    width:40px;
    height:40px;
    display:inline-grid;
    place-items:center;
    flex:0 0 40px;
    filter:drop-shadow(0 8px 14px rgba(6,78,59,.15));
    transform:translateY(-1px);
}
.brand-symbol svg{
    width:100%;
    height:100%;
    display:block;
    overflow:visible;
}
.brand-name--freelancito{
    font-family:Vazirmatn,Tahoma,Arial,sans-serif;
    font-weight:950;
    font-size:21px;
    line-height:1;
    letter-spacing:-.75px;
    color:#0f172a;
    background:linear-gradient(92deg,#0f172a 0%,#063f3a 52%,#0f766e 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    text-rendering:geometricPrecision;
    font-synthesis-weight:none;
}
.brand .brand-logo--freelancito{
    width:auto;
    height:42px;
    max-height:42px;
    max-width:206px;
    display:block;
    object-fit:contain;
}
.site-footer .footer-logo img{
    max-width:318px;
    height:auto;
}
@media (prefers-reduced-motion: no-preference){
    .brand .brand-link--freelancito .brand-symbol{transition:transform .18s ease,filter .18s ease;}
    .brand .brand-link--freelancito:hover .brand-symbol{transform:translateY(-2px);filter:drop-shadow(0 10px 18px rgba(6,78,59,.18));}
}
@media (max-width: 720px){
    .brand-lockup--freelancito{gap:8px;}
    .brand-symbol{width:34px;height:34px;flex-basis:34px;}
    .brand-name--freelancito{font-size:19px;letter-spacing:-.58px;}
    .brand .brand-logo--freelancito{height:38px;max-height:38px;max-width:184px;}
}
@media (max-width: 420px){
    .brand-lockup--freelancito{gap:7px;padding:3px 4px;}
    .brand-symbol{width:32px;height:32px;flex-basis:32px;}
    .brand-name--freelancito{font-size:18px;}
    .brand .brand-logo--freelancito{height:34px;max-height:34px;max-width:164px;}
}

/* === v815: Footer brand lockup — no clipped logo in dark footer === */
.site-footer .footer-logo--freelancito{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
    direction:rtl;
    max-width:100%;
    width:auto;
    min-width:0;
    overflow:visible;
    color:#f8fafc !important;
    text-decoration:none !important;
}
.site-footer .footer-logo--freelancito .footer-logo-mark{
    width:54px;
    height:54px;
    flex:0 0 54px;
    display:inline-grid;
    place-items:center;
    filter:drop-shadow(0 14px 28px rgba(16,185,129,.28));
    overflow:visible;
}
.site-footer .footer-logo--freelancito .footer-logo-mark svg{
    width:100%;
    height:100%;
    display:block;
    overflow:visible;
}
.site-footer .footer-logo--freelancito .footer-logo-copy{
    display:grid;
    gap:7px;
    min-width:0;
    text-align:right;
    line-height:1;
}
.site-footer .footer-logo--freelancito .footer-logo-copy strong{
    display:block;
    font-family:Vazirmatn,Tahoma,Arial,sans-serif;
    font-size:27px;
    font-weight:950;
    line-height:1;
    letter-spacing:-.72px;
    color:#f8fafc;
    white-space:nowrap;
    text-rendering:geometricPrecision;
}
.site-footer .footer-logo--freelancito .footer-logo-copy small{
    display:block;
    font-family:Vazirmatn,Tahoma,Arial,sans-serif;
    font-size:12.5px;
    font-weight:800;
    line-height:1.45;
    color:#a7f3d0;
    white-space:nowrap;
    letter-spacing:-.1px;
}
.site-footer .footer-logo--freelancito:hover .footer-logo-copy strong,
.site-footer .footer-logo--freelancito:focus-visible .footer-logo-copy strong{
    color:#ffffff;
}
@media (max-width: 720px){
    .site-footer .footer-logo--freelancito{gap:10px !important;}
    .site-footer .footer-logo--freelancito .footer-logo-mark{width:48px;height:48px;flex-basis:48px;}
    .site-footer .footer-logo--freelancito .footer-logo-copy strong{font-size:24px;}
    .site-footer .footer-logo--freelancito .footer-logo-copy small{font-size:12px;white-space:normal;}
}
@media (max-width: 420px){
    .site-footer .footer-logo--freelancito .footer-logo-mark{width:42px;height:42px;flex-basis:42px;}
    .site-footer .footer-logo--freelancito .footer-logo-copy strong{font-size:22px;}
}


/* v979: official eNamad badge visible in footer badge slot */
.site-footer .footer-badges{min-height:0!important}
.site-footer .footer-enamad-trustseal{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:96px!important;
  min-height:56px!important;
  padding:5px 7px!important;
  border-radius:12px!important;
  border:1px solid rgba(191,219,254,.22)!important;
  background:rgba(255,255,255,.08)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)!important;
  overflow:hidden!important;
}
.site-footer .footer-enamad-trustseal a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
}
.site-footer .footer-enamad-trustseal img{
  display:block!important;
  max-width:92px!important;
  max-height:70px!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
}


/* v980 HARD FIX: eNamad trust seal placed visibly in footer badge slot */
.site-footer .footer-badges{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  min-height:72px!important;
  padding:8px 0!important;
  opacity:1!important;
  visibility:visible!important;
}
.site-footer .footer-enamad-trustseal.footer-enamad-trustseal--v980,
.site-footer .footer-enamad-trustseal{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:104px!important;
  min-width:104px!important;
  height:72px!important;
  min-height:72px!important;
  padding:5px!important;
  border-radius:14px!important;
  border:1px solid rgba(191,219,254,.28)!important;
  background:rgba(255,255,255,.10)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)!important;
  overflow:hidden!important;
  opacity:1!important;
  visibility:visible!important;
}
.site-footer .footer-enamad-trustseal.footer-enamad-trustseal--v980 a,
.site-footer .footer-enamad-trustseal a{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  line-height:1!important;
}
.site-footer .footer-enamad-trustseal.footer-enamad-trustseal--v980 img,
.site-footer .footer-enamad-trustseal img{
  display:block!important;
  max-width:94px!important;
  max-height:66px!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
}


/* v981 project-details compact active feature strip */


/* v981 REAL FIX: isolated compact active-project feature strip; no legacy card classes */
.pd-feature-strip-v981{
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  margin:0 0 10px!important;
  padding:7px 10px!important;
  border:1px solid #bfdbfe!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,#eff6ff 0%,#f8fbff 52%,#e0f2fe 100%)!important;
  box-shadow:0 8px 22px rgba(37,99,235,.055)!important;
  overflow:visible!important;
}
.pd-feature-strip-title-v981{
  box-sizing:border-box!important;
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  margin:0!important;
  padding:0 10px!important;
  height:26px!important;
  min-height:0!important;
  border-radius:999px!important;
  color:#0f3b63!important;
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(147,197,253,.72)!important;
  font-size:11.4px!important;
  line-height:1!important;
  font-weight:950!important;
  white-space:nowrap!important;
}
.pd-feature-strip-title-v981:before{
  content:""!important;
  display:inline-block!important;
  width:7px!important;
  height:7px!important;
  border-radius:999px!important;
  background:#38bdf8!important;
  box-shadow:0 0 0 4px rgba(56,189,248,.14)!important;
}
.pd-feature-strip-list-v981{
  box-sizing:border-box!important;
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
.pd-feature-chip-v981,
.pd-feature-chip-v981.is-job-ad,
.pd-feature-chip-v981.is-noindex{
  box-sizing:border-box!important;
  flex:0 0 auto!important;
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:0!important;
  height:26px!important;
  margin:0!important;
  padding:0 9px!important;
  border-radius:999px!important;
  border:1px solid #bfdbfe!important;
  background:#fff!important;
  box-shadow:none!important;
  color:#334155!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
.pd-feature-chip-v981 b,
.pd-feature-chip-v981.is-job-ad b,
.pd-feature-chip-v981.is-noindex b{
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
  margin:0!important;
  padding:0!important;
  color:#0f3b63!important;
  font-size:10.9px!important;
  line-height:1!important;
  font-weight:950!important;
  white-space:nowrap!important;
}
.pd-feature-chip-v981 span,
.pd-feature-chip-v981 small,
.pd-feature-chip-v981.is-noindex span,
.pd-feature-chip-v981.is-noindex small{
  display:inline-flex!important;
  align-items:center!important;
  margin:0!important;
  padding:0!important;
  color:#2563eb!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
.pd-feature-chip-v981.is-job-ad{border-color:#93c5fd!important;background:#fff!important;}
.pd-feature-chip-v981.is-job-ad b{color:#1d4ed8!important;}
.pd-feature-chip-v981.is-noindex{border-color:#bfdbfe!important;background:#f8fbff!important;}
.pd-feature-chip-v981 .fc-noindex-icon,
.pd-feature-chip-v981 .fc-noindex-icon svg{width:12px!important;height:12px!important;min-width:12px!important;}
@media(max-width:760px){
  .pd-feature-strip-v981{display:block!important;padding:7px!important;border-radius:14px!important;}
  .pd-feature-strip-title-v981{margin-bottom:6px!important;height:25px!important;font-size:11.2px!important;}
  .pd-feature-strip-list-v981{gap:5px!important;}
  .pd-feature-chip-v981{height:25px!important;padding:0 8px!important;}
}

/* =====================================================
   v996 — Mobile header and crawl-width responsive hardening
   Scope: public shell/header. Goal: remove mobile horizontal overflow and
   make the first-screen header/menu usable on crawler mobile viewports.
===================================================== */
html,
body,
.site-shell {
  max-width: 100% !important;
  overflow-x: clip !important;
}
@supports not (overflow-x: clip) {
  html,
  body,
  .site-shell { overflow-x: hidden !important; }
}
img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}
body.is-home #main-content.container {
  width: 100% !important;
  max-width: none !important;
  padding-inline: clamp(10px, 3.4vw, 24px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

@media (max-width: 820px) {
  header {
    position: relative !important;
    z-index: 60 !important;
    background: #ffffff !important;
  }
  .topbar {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 58px !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: visible !important;
    background: #ffffff !important;
    box-shadow: 0 1px 0 rgba(15,23,42,.07) !important;
  }
  .topbar::before {
    display: none !important;
    content: none !important;
  }
  .topbar > * {
    min-width: 0 !important;
  }
  .brand {
    order: 1 !important;
    flex: 0 1 auto !important;
    max-width: 164px !important;
    min-width: 0 !important;
  }
  .topbar .brand-link,
  .topbar .brand-link--freelancito {
    max-width: 164px !important;
    min-width: 0 !important;
    height: auto !important;
    display: inline-flex !important;
  }
  .topbar .brand-name--freelancito {
    font-size: 18px !important;
    white-space: nowrap !important;
  }
  .topbar .brand-symbol {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
  }
  .nav-toggle {
    order: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #0f172a !important;
    background: #ffffff !important;
    border: 1px solid rgba(148,163,184,.42) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.07) !important;
    line-height: 1 !important;
  }
  .header-search-menu {
    order: 3 !important;
    flex: 1 1 132px !important;
    max-width: calc(100% - 98px) !important;
    margin: 0 !important;
    position: relative !important;
  }
  .header-search-toggle {
    width: 100% !important;
    min-height: 40px !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border-radius: 14px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  .header-search-dropdown {
    left: 0 !important;
    right: auto !important;
    width: min(320px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    z-index: 90 !important;
  }
  .nav-actions {
    order: 4 !important;
    display: flex !important;
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
  }
  .nav-actions .btn-ux {
    flex: 1 1 118px !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
  .auth-links {
    order: 5 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
  .auth-user {
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    gap: 6px !important;
  }
  .auth-username {
    max-width: 118px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .notif-bell-wrapper{position:relative!important;max-width:100%!important}
  .notif-bell-link{position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:38px!important;min-height:38px!important}
  .notif-dropdown {
    position: fixed !important;
    top: var(--notif-dropdown-top, 64px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100dvh - var(--notif-dropdown-top, 64px) - 12px) !important;
    margin: 0 !important;
    overflow: hidden !important;
    z-index: 10050 !important;
    box-sizing: border-box !important;
  }
  .notif-dropdown ul{max-height:calc(100dvh - var(--notif-dropdown-top,64px) - 92px)!important;overscroll-behavior:contain}
  .notif-dropdown-footer{gap:8px!important;justify-content:space-between!important;flex-wrap:wrap!important}
  .notif-dropdown-footer a,.notif-dropdown-footer button{flex:1 1 130px!important;text-align:center!important}
  .notif-badge{top:-4px!important;right:-4px!important}
  .notif-bell-wrapper:hover:not(.is-open) .notif-dropdown{display:none}
  .notif-bell-wrapper.is-open .notif-dropdown{display:block!important}
  .nav-links {
    order: 6 !important;
    flex: 1 0 100% !important;
    display: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 0 !important;
    padding: 10px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    background: #ffffff !important;
    border: 1px solid rgba(148,163,184,.28) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 46px rgba(15,23,42,.10) !important;
    max-height: 72vh !important;
    overflow: auto !important;
    box-sizing: border-box !important;
  }
  .nav-links.open {
    display: flex !important;
  }
  .nav-links > a,
  .nav-links > .nav-item,
  .nav-dropdown,
  .nav-dropdown-trigger {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .topbar .nav-links a,
  .topbar .nav-dropdown-trigger {
    color: #0f172a !important;
    justify-content: flex-start !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    white-space: normal !important;
    border-bottom: 0 !important;
    background: transparent !important;
  }
  .topbar .nav-links a:hover,
  .topbar .nav-dropdown-trigger:hover {
    background: #f8fafc !important;
  }
  .nav-dropdown-menu {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 3px 0 0 !important;
    padding: 4px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    box-shadow: none !important;
  }
  .nav-dropdown-menu .nav-dropdown-item {
    min-height: 38px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 420px) {
  .header-search-menu {
    flex: 1 0 100% !important;
    max-width: 100% !important;
  }
  .nav-actions .btn-ux {
    flex: 1 0 100% !important;
  }
  .auth-username {
    max-width: 96px !important;
  }
}

/* v1299 — unified Persian/Jalali date controls (Gregorian storage remains hidden). */
.fc-jdate{position:relative;display:block;width:100%;max-width:100%;box-sizing:border-box;direction:rtl}
.fc-jdate__field{position:relative;width:100%}
.fc-jdate__input{display:block;width:100%;min-width:0;min-height:48px;border:1px solid #d8e1ea;border-radius:12px;background:#fff;color:#102a43;padding:10px 48px 10px 14px;font:inherit;line-height:1.5;box-sizing:border-box;outline:0;direction:ltr;text-align:right}
.fc-jdate__input::placeholder{direction:rtl;text-align:right;color:#94a3b8}
.fc-jdate__input:focus{border-color:#0f9f6e;box-shadow:0 0 0 3px rgba(15,159,110,.12)}
.fc-jdate__button{position:absolute;inset-inline-start:8px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:9px;background:transparent;color:#0f9f6e;cursor:pointer;padding:0}
.fc-jdate__button:hover,.fc-jdate__button:focus-visible{background:#ecfdf5;outline:0}
.fc-jdate__button svg{width:21px;height:21px}
.fc-jdate__popup{position:absolute;z-index:1200;top:calc(100% + 8px);inset-inline:0;width:min(420px,100%);margin-inline-start:auto;border:1px solid #dbe4ec;border-radius:16px;background:#fff;box-shadow:0 18px 45px rgba(15,23,42,.18);padding:14px;box-sizing:border-box}
.fc-jdate__popup[hidden]{display:none!important}
.fc-jdate__popup-title{font-size:14px;font-weight:900;color:#16324a;margin-bottom:10px}
.fc-jdate__picker-selects{display:grid;grid-template-columns:minmax(72px,.85fr) minmax(120px,1.35fr) minmax(88px,1fr);gap:8px;direction:rtl}
.fc-jdate__picker-select{width:100%;min-width:0;min-height:42px;border:1px solid #d8e1ea;border-radius:10px;background:#fff;color:#102a43;padding:7px 9px;font:inherit;line-height:1.5;box-sizing:border-box;outline:0}
.fc-jdate__picker-select:focus{border-color:#0f9f6e;box-shadow:0 0 0 3px rgba(15,159,110,.1)}
.fc-jdate__actions{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.fc-jdate__action{min-height:38px;border-radius:10px;padding:7px 14px;font:inherit;font-weight:800;cursor:pointer}
.fc-jdate__action--primary{border:1px solid #0f9f6e;background:#0f9f6e;color:#fff;margin-inline-start:auto}
.fc-jdate__action--ghost{border:1px solid #d8e1ea;background:#fff;color:#334155}
.fc-jdate.is-invalid .fc-jdate__input{border-color:#dc2626;background:#fff7f7}
.fc-jdate.is-disabled,.fc-jdate.pc-deadline-locked{opacity:.58}
.fc-jdate.is-disabled .fc-jdate__button,.fc-jdate.pc-deadline-locked .fc-jdate__button{cursor:not-allowed}
.fc-jdate-error{color:#b91c1c;font-size:12px;font-weight:700;line-height:1.7;margin-top:5px}
@media(max-width:520px){.fc-jdate__popup{width:100%;padding:12px}.fc-jdate__picker-selects{grid-template-columns:.8fr 1.25fr 1fr;gap:6px}.fc-jdate__picker-select{padding:7px 5px;font-size:12.5px}.fc-jdate__input{min-height:46px}}

/* v1299 — durable mobile/tablet containment for forms, project files and long Persian/Latin values. */
@media (max-width: 900px) {
  body.site-shell,
  body.site-shell .site-page,
  body.site-shell main,
  body.site-shell .container,
  body.site-shell .content,
  body.site-shell form,
  body.site-shell fieldset,
  body.site-shell .card,
  body.site-shell .pc-card,
  body.site-shell .pf-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.site-shell input,
  body.site-shell select,
  body.site-shell textarea,
  body.site-shell .input-group,
  body.site-shell .form-control {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.site-shell .pd-files-block,
  body.site-shell .pd-files,
  body.site-shell .pd-file,
  body.site-shell .pd-file-left,
  body.site-shell .pd-file-right,
  body.site-shell .attachment-list,
  body.site-shell .attachment-item,
  body.site-shell [data-attachment-item] {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.site-shell .pd-file-name,
  body.site-shell .pd-file-name a,
  body.site-shell .attachment-name,
  body.site-shell [data-attachment-name] {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  body.site-shell .pc-field-error,
  body.site-shell .pf-error,
  body.site-shell .field-error,
  body.site-shell .invalid-feedback {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* v1324 — stable mobile header controls, compact help launcher and eNamad fallback. */
.notif-bell-wrapper{
  flex:0 0 38px!important;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  margin-left:10px!important;
  align-self:center!important;
  overflow:visible!important;
}
.notif-bell-link,
.notif-bell-link.has-unread{
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 38px!important;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  padding:0!important;
  margin:0!important;
  border-radius:999px!important;
  line-height:1!important;
  overflow:visible!important;
}
.notif-bell-link i{
  display:block!important;
  flex:0 0 18px!important;
  width:18px!important;
  min-width:18px!important;
  max-width:18px!important;
  height:18px!important;
  line-height:18px!important;
  font-size:17px!important;
  text-align:center!important;
}
.notif-badge,
.auth-links .notif-badge{
  box-sizing:border-box!important;
  top:-7px!important;
  right:-7px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:20px!important;
  width:auto!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  padding:0 5px!important;
  border:2px solid #fff!important;
  border-radius:999px!important;
  font-size:10.5px!important;
  font-weight:900!important;
  line-height:16px!important;
  white-space:nowrap!important;
  z-index:3!important;
}
.auth-user-avatar{
  box-sizing:border-box!important;
  flex:0 0 28px!important;
  width:28px!important;
  min-width:28px!important;
  max-width:28px!important;
  height:28px!important;
  min-height:28px!important;
  max-height:28px!important;
  padding:0!important;
  overflow:hidden!important;
}
.auth-user-avatar i{
  display:block!important;
  width:15px!important;
  height:15px!important;
  line-height:15px!important;
  font-size:14px!important;
  text-align:center!important;
  color:#475569!important;
}
.site-footer .footer-enamad-fallback{
  display:flex;
  width:100%;
  height:100%;
  min-height:56px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:2px;
  padding:7px;
  color:#e2e8f0;
  text-align:center;
  line-height:1.45;
  font-family:inherit;
}
.site-footer .footer-enamad-fallback[hidden]{display:none!important}
.site-footer .footer-enamad-fallback strong{font-size:12px;font-weight:950;color:#fff}
.site-footer .footer-enamad-fallback small{font-size:10.5px;font-weight:800;color:#a7f3d0}
@media (max-width:640px){
  .auth-links{align-items:center!important;overflow:visible!important}
  .notif-bell-wrapper{
    flex-basis:36px!important;
    width:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    margin-left:4px!important;
  }
  .notif-bell-link,
  .notif-bell-link.has-unread{
    flex-basis:36px!important;
    width:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
  }
  .notif-badge,.auth-links .notif-badge{top:-6px!important;right:-6px!important}
  .auth-user{align-items:center!important;overflow:visible!important}
  .auth-user-avatar{flex-basis:28px!important}
}
.notif-bell-icon{display:block!important;flex:0 0 18px!important;width:18px!important;height:18px!important;min-width:18px!important;max-width:18px!important;color:currentColor!important;overflow:visible!important}
.auth-user-icon{display:block!important;width:16px!important;height:16px!important;min-width:16px!important;max-width:16px!important;color:#475569!important;overflow:visible!important}


/* =========================================================
   Freelancito — Ultra SaaS Shell (Header + Footer)
   Scope: global shell UI only (no page layout overrides)
   ========================================================= */

:root{
  --fx-green: var(--fc-accent, #14a86b);
  --fx-green-2: #19c98a;
  --fx-ink: var(--fc-text, #0b0f14);
  --fx-muted: var(--fc-text-muted, rgba(0,0,0,.62));
  --fx-line: var(--fc-border, rgba(0,0,0,.08));
  --fx-card: var(--fc-surface, #ffffff);
  --fx-soft: rgba(20,168,107,.08);
}

body .site-shell,
body .site-shell *{
  font-family: inherit !important;
}

/* ---------- Header (Topbar) ---------- */
body.site-shell > header[role="banner"]{
  position: sticky;
  top: 0;
  /* keep dropdowns above the page */
  z-index: 200;
  /* Flat SaaS header (clean + premium, no glows/mesh)
     We keep layout intact and only restyle the background/skin.
     main.css already forces header background to be transparent and paints
     full-bleed background via .topbar::before — we override that layer below.
  */
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(17,24,39,.08) !important;
  /* ultra subtle separation (flat SaaS) */
  box-shadow: 0 6px 18px rgba(16,24,40,.04) !important;
  /* IMPORTANT: dropdown menus must not be clipped */
  overflow: visible !important;
}

/* soft glow layer */
body.site-shell > header[role="banner"]::before,
body.site-shell > header[role="banner"]::after{
  content: none !important;
}

/* keep header content above overlays */
body.site-shell > header[role="banner"] > *{
  position: relative;
  z-index: 1;
}

body.site-shell > header[role="banner"] .topbar{
  max-width: 1360px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* main.css adds a pastel purple full-bleed background via .topbar::before.
   For the premium header skin we disable that layer so header gradients/glows show. */
body.site-shell > header[role="banner"] .topbar::before{
  content: "" !important;
  background: var(--fc-header-bg, #ffffff) !important;
}

/* Dropdown menus must render above the sticky header */
body.site-shell > header[role="banner"] .nav-dropdown-menu,
body.site-shell > header[role="banner"] .notif-dropdown,
body.site-shell > header[role="banner"] .header-search-dropdown{
  z-index: 300 !important;
}

body.site-shell > header[role="banner"] .brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 160px;
}

body.site-shell > header[role="banner"] .brand-link{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: var(--fx-ink) !important;
}

body.site-shell > header[role="banner"] .brand-logo{
  height: 34px;
  width: auto;
  display:block;
}

body.site-shell > header[role="banner"] .brand-name{
  font-weight: 800;
  letter-spacing: -0.3px;
  font-size: 18px;
}

/* nav area */
body.site-shell > header[role="banner"] .nav-links{
  flex: 1;
  display:flex;
  align-items:center;
  gap: 6px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

body.site-shell > header[role="banner"] .nav-links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration:none;
  color: rgba(0,0,0,.72);
  font-family: inherit !important;
  font-size: 14px;
  line-height: 1;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}

body.site-shell > header[role="banner"] .nav-links a:hover{
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.92);
  transform: translateY(-1px);
}

body.site-shell > header[role="banner"] .nav-links a.is-active{
  background: var(--fx-soft);
  color: rgba(0,0,0,.92);
  border: 1px solid rgba(20,168,107,.16);
}

/* right action cluster (auth buttons) */
body.site-shell > header[role="banner"] .nav-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

body.site-shell > header[role="banner"] .btn-ux{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  color: rgba(0,0,0,.82);
  text-decoration:none;
  font-family: inherit !important;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  white-space: nowrap;
}

body.site-shell > header[role="banner"] .btn-ux:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.16);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

body.site-shell > header[role="banner"] .btn-ux--primary{
  background: linear-gradient(135deg, var(--fx-green), var(--fx-green-2));
  color: #fff;
  border-color: rgba(20,168,107,.40);
}

body.site-shell > header[role="banner"] .btn-ux--ghost{
  background: rgba(255,255,255,.65);
}

/* mobile */
body.site-shell > header[role="banner"] .nav-toggle{
  display:none;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.75);
  border-radius: 10px;
  padding: 8px 10px;
}

@media (max-width: 960px){
  body.site-shell > header[role="banner"] .nav-toggle{ display:inline-flex; }
  body.site-shell > header[role="banner"] .nav-links{ display:none; width:100%; padding-top:10px; }
  body.site-shell > header[role="banner"] .topbar{ flex-wrap: wrap; }
  body.site-shell > header[role="banner"] .nav-actions{ margin-right: auto; }
  body.site-shell > header[role="banner"].is-open .nav-links, body.site-shell > header[role="banner"] .nav-links.open{ display:flex; }
}

/* ---------- Footer: canonical styles are defined in Premium Velvet Footer block below. ---------- */

/* ---------- Header Search (Top placement) ---------- */
.header-search-menu.header-search-menu--top{
  margin: 0;
}

body.site-shell > header[role="banner"] .topbar .header-search-toggle{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.70);
  /* Typography: keep consistent across ALL pages */
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

/* Ensure inner label matches button typography (fix: some pages were overriding span styles) */
body.site-shell > header[role="banner"] .topbar .header-search-toggle span{
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1 !important;
}

body.site-shell > header[role="banner"] .topbar .header-search-toggle:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.16);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  background: #fff;
}

body.site-shell > header[role="banner"] .topbar .header-search-dropdown{
  right: 0;
  border: 1px solid rgba(0,0,0,.10);
}

@media (max-width: 960px){
  body.site-shell > header[role="banner"] .topbar .header-search-menu--top{ order: 3; width: 100%; }
  body.site-shell > header[role="banner"] .topbar .header-search-toggle{ width: 100%; justify-content: space-between; }
  body.site-shell > header[role="banner"] .topbar .header-search-dropdown{ width: 100%; }
}

/* ---------- Header Dropdown (No Wrap) ---------- */
/* جلوگیری از افتادن متن آیتم‌های زیرمنو (مثل «راهنمای شروع») به خط بعد */
.nav-dropdown-menu{
  min-width: 260px;
}
.nav-dropdown-item,
.nav-dropdown-item .nav-dropdown-label{
  white-space: nowrap;
}

/* ---------- Premium dropdown UI (Home header only icons) ---------- */
/* Cards */
.nav-dropdown-menu{
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .10);
}

/* Items */
.nav-dropdown-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #0f172a;
  font-weight: 700;
  text-decoration: none;
  transition: background .14s ease, transform .14s ease, box-shadow .14s ease;
}

.nav-dropdown-item:hover{
  background: rgba(16, 185, 129, .08);
  transform: translateY(-1px);
}

.nav-dropdown-item.active{
  background: rgba(16, 185, 129, .10);
}

/* Icon chip (inline SVG) */
.nav-dd-ico{
  width: 30px;
  height: 30px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  background: rgba(16, 185, 129, .10);
  color: #0f766e;
}

.nav-dd-ico svg{
  width: 16px;
  height: 16px;
  display: block;
}

.nav-dropdown-label{
  display: inline-block;
  font-family: inherit !important;
  font-size: 14px;
  line-height: 1.2;
}

/* Header Search dropdown options (with icons) */
body.site-shell > header[role="banner"] .topbar .header-search-dropdown{
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .10);
}

body.site-shell > header[role="banner"] .topbar .header-search-option{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  transition: background .14s ease, transform .14s ease;
}

body.site-shell > header[role="banner"] .topbar .header-search-option:hover{
  background: rgba(16, 185, 129, .06);
  transform: translateY(-1px);
}

body.site-shell > header[role="banner"] .topbar .header-search-option-text{
  display: block;
}

body.site-shell > header[role="banner"] .topbar .header-search-option-title{
  font-family: inherit !important;
  font-weight: 800;
  font-size: 14px;
  color: #0f172a;
}

body.site-shell > header[role="banner"] .topbar .header-search-option-desc{
  font-family: inherit !important;
  font-size: 12px;
  color: rgba(15, 23, 42, .70);
  margin-top: 4px;
  line-height: 1.5;
}

/* =====================================================================
   Premium Velvet Footer — dark solid rebuild, no gradients
   Scope: .site-footer only; SEO-visible links preserved
====================================================================== */
.site-footer,
.site-footer *{
  font-family: inherit !important;
  box-sizing: border-box !important;
}

.site-footer{
  --footer-bg: #0F2B46;
  --footer-panel: #132F4B;
  --footer-card: #183653;
  --footer-card-soft: #112A43;
  --footer-card-strong: #0C2238;
  --footer-border: rgba(226, 238, 240, .14);
  --footer-border-strong: rgba(226, 238, 240, .22);
  --footer-title: #FFFFFF;
  --footer-text: #D9E7EA;
  --footer-muted: #AFC4CA;
  --footer-accent: #68E0BA;
  --footer-accent-2: #9FE8D1;
  --footer-link: #EAF4F6;
  --footer-shell-width: 1520px;
  background: var(--footer-bg) !important;
  color: var(--footer-text) !important;
  border-top: 1px solid var(--footer-border-strong) !important;
  padding: 44px 0 30px !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: initial !important;
}

.site-footer::before,
.site-footer::after{
  content: none !important;
  display: none !important;
}

.site-footer .footer-inner{
  box-sizing: border-box !important;
  width: min(100% - 32px, var(--footer-shell-width)) !important;
  max-width: var(--footer-shell-width) !important;
  margin: 0 auto !important;
  padding: clamp(24px, 2vw, 34px) !important;
  border: 1px solid var(--footer-border-strong) !important;
  border-radius: 34px !important;
  background: var(--footer-panel) !important;
  box-shadow: 0 26px 70px rgba(3, 13, 24, .34), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.site-footer .footer-grid{
  direction: rtl !important;
  display: grid !important;
  grid-template-columns: minmax(520px, 1.55fr) repeat(3, minmax(210px, .72fr)) !important;
  gap: clamp(18px, 1.6vw, 24px) !important;
  align-items: stretch !important;
}

.site-footer .footer-brand,
.site-footer .footer-col{
  min-width: 0 !important;
  border: 1px solid var(--footer-border) !important;
  background: var(--footer-card) !important;
  border-radius: 26px !important;
  box-shadow: 0 18px 36px rgba(2, 10, 20, .20), inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.site-footer .footer-brand{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: clamp(24px, 1.9vw, 32px) !important;
}

.site-footer .footer-logo{
  width: fit-content !important;
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.site-footer .footer-logo img,
.site-footer .footer-brand img{
  display: block !important;
  width: auto !important;
  max-width: 260px !important;
  height: auto !important;
  max-height: 66px !important;
  object-fit: contain !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  filter: none !important;
}

.site-footer .footer-desc{
  margin: 0 !important;
  max-width: 66ch !important;
  color: var(--footer-text) !important;
  font-size: 14px !important;
  line-height: 2.1 !important;
  font-weight: 600 !important;
  text-align: right !important;
  word-spacing: 1px !important;
}

.site-footer .footer-trust-strip{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 2px !important;
}

.site-footer .footer-trust-strip span{
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  background: rgba(104, 224, 186, .10) !important;
  border: 1px solid rgba(104, 224, 186, .22) !important;
  color: #CFF7EA !important;
  font-size: 12.5px !important;
  font-weight: 850 !important;
  line-height: 1.7 !important;
  white-space: nowrap !important;
}

.site-footer .footer-col{
  padding: clamp(22px, 1.55vw, 28px) clamp(20px, 1.45vw, 26px) !important;
  display: flex !important;
  flex-direction: column !important;
}

.site-footer .footer-col h4{
  margin: 0 0 14px !important;
  color: var(--footer-title) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.7 !important;
  text-align: right !important;
  letter-spacing: 0 !important;
}

.site-footer .footer-col h4::after{
  content: "" !important;
  display: block !important;
  width: 34px !important;
  height: 3px !important;
  margin-top: 8px !important;
  border-radius: 999px !important;
  background: var(--footer-accent) !important;
}

.site-footer .footer-col ul,
.site-footer .footer-legal{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  gap: 8px !important;
}

.site-footer .footer-col li{
  margin: 0 !important;
  padding: 0 !important;
}

.site-footer .footer-col a{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 36px !important;
  padding: 7px 0 !important;
  color: var(--footer-link) !important;
  text-decoration: none !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.9 !important;
  transition: color .16s ease, transform .16s ease !important;
  word-spacing: 1px !important;
}

.site-footer .footer-col a::before{
  content: "" !important;
  flex: 0 0 auto !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(104, 224, 186, .68) !important;
  border: 2px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 0 0 1px rgba(104,224,186,.18) !important;
  transition: background .16s ease, transform .16s ease !important;
}

.site-footer .footer-col a:hover,
.site-footer .footer-col a:focus-visible{
  color: var(--footer-accent-2) !important;
  transform: translateX(-3px) !important;
  outline: none !important;
}

.site-footer .footer-col a:hover::before,
.site-footer .footer-col a:focus-visible::before{
  background: var(--footer-accent-2) !important;
  transform: scale(1.08) !important;
}

.site-footer .footer-badges{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: 2px !important;
}


.site-footer .footer-enamad-trustseal{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 112px !important;
  min-height: 58px !important;
  padding: 8px 10px !important;
  border-radius: 18px !important;
  border: 1px solid var(--footer-border) !important;
  background: var(--footer-card-soft) !important;
  box-shadow: 0 12px 24px rgba(2, 10, 20, .18) !important;
}

.site-footer .footer-enamad-trustseal a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.site-footer .footer-badge-link{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 112px !important;
  min-height: 58px !important;
  padding: 8px 10px !important;
  border-radius: 18px !important;
  border: 1px solid var(--footer-border) !important;
  background: var(--footer-card-soft) !important;
  box-shadow: 0 12px 24px rgba(2, 10, 20, .18) !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.site-footer .footer-badge-link:hover,
.site-footer .footer-badge-link:focus-visible{
  transform: translateY(-1px) !important;
  border-color: rgba(104, 224, 186, .36) !important;
  box-shadow: 0 16px 30px rgba(2, 10, 20, .24) !important;
  outline: none !important;
}

.site-footer .footer-badge-link img{
  width: 92px !important;
  height: 44px !important;
  object-fit: contain !important;
  display: block !important;
}

.site-footer .footer-bottom{
  direction: rtl !important;
  margin-top: clamp(18px, 1.6vw, 24px) !important;
  padding: 18px clamp(20px, 1.8vw, 28px) !important;
  border: 1px solid var(--footer-border) !important;
  border-radius: 24px !important;
  background: var(--footer-card-soft) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.site-footer .footer-bottom-right{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

.site-footer .footer-copy,
.site-footer .footer-mini{
  margin: 0 !important;
  color: var(--footer-muted) !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  line-height: 1.9 !important;
  white-space: normal !important;
}

.site-footer .footer-bottom-links,
.site-footer .footer-mini-links{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.site-footer .footer-bottom-link,
.site-footer .footer-mini-links a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(104, 224, 186, .18) !important;
  background: rgba(255,255,255,.05) !important;
  color: #DFF7F0 !important;
  font-size: 12.5px !important;
  font-weight: 850 !important;
  line-height: 1.8 !important;
  text-decoration: none !important;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease !important;
  word-spacing: 1px !important;
}

.site-footer .footer-bottom-link:hover,
.site-footer .footer-mini-links a:hover,
.site-footer .footer-bottom-link:focus-visible,
.site-footer .footer-mini-links a:focus-visible{
  background: rgba(104, 224, 186, .12) !important;
  color: var(--footer-accent-2) !important;
  border-color: rgba(104, 224, 186, .34) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

.site-footer .footer-mini-links .sep{
  color: rgba(226, 238, 240, .28) !important;
}

.site-footer .footer-social{
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 !important;
}

.site-footer .footer-social-link,
.site-footer .footer-social a{
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(104, 224, 186, .20) !important;
  background: rgba(255,255,255,.055) !important;
  color: #DFF7F0 !important;
  text-decoration: none !important;
  overflow: hidden !important;
  transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.site-footer .footer-social-link svg,
.site-footer .footer-social a svg{
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  fill: currentColor !important;
  stroke: none !important;
  flex: 0 0 auto !important;
}

.site-footer .footer-social-link i,
.site-footer .footer-social a i,
.site-footer .footer-social-fallback{
  display: none !important;
}

.site-footer .footer-social-link:hover,
.site-footer .footer-social a:hover,
.site-footer .footer-social-link:focus-visible,
.site-footer .footer-social a:focus-visible{
  transform: translateY(-1px) !important;
  background: rgba(104, 224, 186, .13) !important;
  color: #FFFFFF !important;
  border-color: rgba(104, 224, 186, .38) !important;
  box-shadow: 0 12px 24px rgba(2, 10, 20, .22), inset 0 1px 0 rgba(255,255,255,.06) !important;
  outline: none !important;
}

@media (max-width: 1100px){
  .site-footer .footer-grid{
    grid-template-columns: 1fr 1fr !important;
  }
  .site-footer .footer-brand{
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px){
  .site-footer{
    padding: 28px 0 20px !important;
  }
  .site-footer .footer-inner{
    width: min(100% - 24px, var(--footer-shell-width)) !important;
    border-radius: 26px !important;
    padding: 18px !important;
  }
  .site-footer .footer-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .site-footer .footer-brand,
  .site-footer .footer-col{
    border-radius: 22px !important;
  }
  .site-footer .footer-brand{
    padding: 20px 18px !important;
  }
  .site-footer .footer-col{
    padding: 18px 16px !important;
  }
  .site-footer .footer-logo img,
  .site-footer .footer-brand img{
    max-width: 224px !important;
  }
  .site-footer .footer-trust-strip span{
    white-space: normal !important;
  }
  .site-footer .footer-bottom,
  .site-footer .footer-bottom-right,
  .site-footer .footer-bottom-links{
    width: 100% !important;
  }
  .site-footer .footer-bottom{
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
}

/* === Header dropdown parent labels: semantic non-link trigger === */
.nav-dropdown-trigger{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit !important;
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

/* === Header dropdown title size final fix v214 ===
   Match dropdown parent labels (برای کارفرمایان / برای متخصصان)
   with regular top-level header links such as «روش کار ما».
   This lives in ultra_saas_shell.css because it is loaded after main.css. */
body.site-shell > header[role="banner"] .topbar .nav-links > a,
body.site-shell > header[role="banner"] .topbar .nav-links > .nav-dropdown > .nav-dropdown-trigger {
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

body.site-shell > header[role="banner"] .topbar .nav-links > .nav-dropdown > .nav-dropdown-trigger {
  min-height: 38px !important;
  padding: 9px 12px !important;
}

/* === v816: Footer responsive width guard — prevent horizontal clipping ===
   Keeps the footer premium/dark design, but removes fixed-width grid pressure
   so extra footer menu columns wrap safely instead of being clipped from left/right. */
.site-footer{
  overflow-x: clip !important;
  max-width: 100% !important;
}
.site-footer .footer-inner{
  width: min(calc(100% - clamp(24px, 4vw, 56px)), var(--footer-shell-width, 1320px)) !important;
  max-width: min(calc(100% - clamp(24px, 4vw, 56px)), var(--footer-shell-width, 1320px)) !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  overflow: visible !important;
}
.site-footer .footer-grid{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 218px), 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  overflow: visible !important;
}
.site-footer .footer-brand{
  grid-column: span 2 !important;
  min-width: 0 !important;
}
.site-footer .footer-col{
  min-width: 0 !important;
  max-width: 100% !important;
}
.site-footer .footer-desc,
.site-footer .footer-col a,
.site-footer .footer-col h4,
.site-footer .footer-trust-strip span,
.site-footer .footer-copy,
.site-footer .footer-bottom-link,
.site-footer .footer-mini-links a{
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.site-footer .footer-trust-strip{
  max-width: 100% !important;
  overflow: visible !important;
}
.site-footer .footer-logo--freelancito{
  max-width: 100% !important;
}
.site-footer .footer-logo--freelancito .footer-logo-copy{
  max-width: min(100%, 320px) !important;
}
.site-footer .footer-logo--freelancito .footer-logo-copy strong,
.site-footer .footer-logo--freelancito .footer-logo-copy small{
  max-width: 100% !important;
  overflow-wrap: normal !important;
}
@media (max-width: 980px){
  .site-footer .footer-brand{
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 640px){
  .site-footer .footer-inner{
    width: min(calc(100% - 20px), var(--footer-shell-width, 1320px)) !important;
    max-width: min(calc(100% - 20px), var(--footer-shell-width, 1320px)) !important;
    padding: 16px !important;
    border-radius: 24px !important;
  }
  .site-footer .footer-grid{
    grid-template-columns: 1fr !important;
  }
  .site-footer .footer-brand{
    grid-column: 1 / -1 !important;
  }
}

/* === v817: Footer brand vertical alignment fix ===
   Keep the premium footer lockup, but anchor the brand card content closer
   to the top edge so it aligns visually with the neighboring footer columns. */
.site-footer .footer-brand{
  justify-content: flex-start !important;
  align-items: stretch !important;
  padding-block-start: clamp(20px, 1.5vw, 26px) !important;
  padding-block-end: clamp(22px, 1.7vw, 30px) !important;
  gap: clamp(10px, 1vw, 12px) !important;
}
.site-footer .footer-logo--freelancito{
  margin-block-start: 0 !important;
  align-self: flex-start !important;
}
.site-footer .footer-desc{
  margin-block-start: 2px !important;
}
.site-footer .footer-trust-strip{
  margin-block-start: 2px !important;
}
@media (max-width: 760px){
  .site-footer .footer-brand{
    padding-block-start: 18px !important;
    padding-block-end: 20px !important;
    gap: 10px !important;
  }
}


/* v1048: keep premium footer service column in the first row on desktop.
   Five visible blocks (brand + 4 link columns) must fit without creating a second row. */
@media (min-width: 1180px){
  .site-footer .footer-grid{
    grid-template-columns: minmax(330px, 1.22fr) repeat(4, minmax(148px, .72fr)) !important;
    grid-auto-flow: column !important;
    gap: clamp(12px, 1.1vw, 18px) !important;
  }
  .site-footer .footer-brand{
    grid-column: auto !important;
  }
  .site-footer .footer-col{
    padding: clamp(18px, 1.25vw, 24px) clamp(15px, 1.05vw, 20px) !important;
  }
  .site-footer .footer-col a{
    min-height: 32px !important;
    font-size: 12.8px !important;
    line-height: 1.75 !important;
  }
}
@media (min-width: 1180px) and (max-width: 1360px){
  .site-footer .footer-grid{
    grid-template-columns: minmax(300px, 1.05fr) repeat(4, minmax(136px, .68fr)) !important;
    gap: 12px !important;
  }
  .site-footer .footer-brand,
  .site-footer .footer-col{
    border-radius: 22px !important;
  }
  .site-footer .footer-brand{
    padding: 18px !important;
  }
  .site-footer .footer-desc{
    font-size: 13px !important;
    line-height: 2 !important;
  }
}

/* =====================================================================
   v1154 — Sticky header occlusion hardening
   Keep the public sticky header fully opaque and in its own stacking
   context so page headings/actions cannot paint through it while scrolling.
   ===================================================================== */
body.site-shell > header[role="banner"][role="banner"]{
  background:#ffffff !important;
  background-color:#ffffff !important;
  isolation:isolate;
}
body.site-shell > header[role="banner"][role="banner"] .topbar{
  position:relative;
  isolation:isolate;
  background:#ffffff !important;
}
body.site-shell > header[role="banner"][role="banner"] .topbar::before{
  z-index:0 !important;
  opacity:1 !important;
  background:#ffffff !important;
}
body.site-shell > header[role="banner"][role="banner"] .topbar > *{
  position:relative;
  z-index:1;
}

/* =====================================================================
   v1155 — Semantic page-header sticky isolation
   Only the direct public banner may be sticky. Semantic <header> blocks
   inside pages must remain in normal document flow.
   ===================================================================== */
body.site-shell > header[role="banner"]{
  position:sticky;
  top:0;
  z-index:200;
}
body.site-shell #main-content header:not([role="banner"]){
  position:relative;
  top:auto;
  inset:auto;
  z-index:auto;
}


/* =====================================================================
   v1236 — Mobile header search visibility and touch-layer hardening
   Scope: public header/search at <= 960px only.
   Purpose: keep the opened search panel fully opaque, above the page and
   clickable; prevent sticky-header stacking/isolation from trapping it.
   ===================================================================== */
@media (max-width: 960px) {
  body.site-shell > header[role="banner"] {
    z-index: 10000 !important;
    overflow: visible !important;
    isolation: auto !important;
  }

  body.site-shell > header[role="banner"] .topbar {
    overflow: visible !important;
    isolation: auto !important;
  }

  body.site-shell > header[role="banner"] .topbar::before {
    pointer-events: none !important;
  }

  body.site-shell > header[role="banner"] .topbar .header-search-menu--top {
    position: relative !important;
    z-index: 10010 !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    contain: none !important;
  }

  body.site-shell > header[role="banner"] .topbar .header-search-menu--top.is-open {
    z-index: 10030 !important;
  }

  body.site-shell > header[role="banner"] .topbar .header-search-toggle {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    min-height: 44px !important;
    touch-action: manipulation !important;
  }

  body.site-shell > header[role="banner"] .topbar .header-search-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: 0 !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(62vh, 430px) !important;
    margin: 0 !important;
    padding: 7px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border: 1px solid rgba(15, 43, 70, .14) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 22px 58px rgba(15, 43, 70, .22) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0, 6px, 0) !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 10040 !important;
  }

  body.site-shell > header[role="banner"] .topbar .header-search-menu--top.is-open .header-search-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
  }

  body.site-shell > header[role="banner"] .topbar .header-search-option {
    position: relative !important;
    z-index: 1 !important;
    min-height: 66px !important;
    background: #ffffff !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  body.site-shell > header[role="banner"] .topbar .header-search-option + .header-search-option {
    border-top: 1px solid rgba(15, 43, 70, .08) !important;
  }

  body.site-shell > header[role="banner"].has-search-open {
    overflow: visible !important;
  }

  body.site-shell > header[role="banner"].has-search-open + #main-content,
  body.site-shell > header[role="banner"].has-search-open ~ #main-content {
    position: relative !important;
    z-index: 0 !important;
  }
}


/* =====================================================================
   v1237 — Production mobile header-search hard override
   Scope: public header at <= 820px. Loaded late and paired with the inline
   layout fallback so the dropdown cannot be trapped beneath action buttons.
   ===================================================================== */
@media (max-width: 820px) {
  body.site-shell > header[role="banner"] {
    overflow: visible !important;
    isolation: auto !important;
    z-index: 2147482000 !important;
  }
  body.site-shell > header[role="banner"] .topbar {
    overflow: visible !important;
    isolation: auto !important;
  }
  body.site-shell > header[role="banner"] .topbar::before {
    pointer-events: none !important;
  }
  body.site-shell > header[role="banner"] .topbar > .header-search-menu--top {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
    contain: none !important;
    z-index: 2147482100 !important;
  }
  body.site-shell > header[role="banner"] .topbar > .header-search-menu--top.is-open {
    z-index: 2147482200 !important;
  }
  body.site-shell > header[role="banner"] .header-search-toggle {
    position: relative !important;
    z-index: 2 !important;
    touch-action: manipulation !important;
  }
  body.site-shell > header[role="banner"] .header-search-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(62vh,430px) !important;
    margin: 0 !important;
    padding: 7px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid rgba(15,43,70,.14) !important;
    border-radius: 16px !important;
    background: #fff !important;
    background-color: #fff !important;
    box-shadow: 0 22px 58px rgba(15,43,70,.25) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
    z-index: 2147482300 !important;
    box-sizing: border-box !important;
  }
  body.site-shell > header[role="banner"] .header-search-menu--top.is-open > .header-search-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body.site-shell > header[role="banner"] .header-search-option {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 66px !important;
    padding: 12px !important;
    background: #fff !important;
    color: #0f172a !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
  }
  body.site-shell > header[role="banner"] .header-search-option + .header-search-option {
    border-top: 1px solid rgba(15,43,70,.08) !important;
  }
  body.site-shell > header[role="banner"].has-search-open .nav-actions,
  body.site-shell > header[role="banner"].has-search-open .nav-links,
  body.site-shell > header[role="banner"].has-search-open .auth-links {
    position: relative !important;
    z-index: 1 !important;
  }
}

/*
  Freelancito — Ultra Global Homepage (Freelance Marketplace)
  Style: Stripe × Upwork × Linear (clean, minimal, SaaS)
  Scope: only .home-ultra namespace
*/

.home-ultra,
.home-ultra * {
  box-sizing: border-box;
}

.home-ultra {
  --home-radius: 18px;
  --home-radius-sm: 14px;
  --home-border: rgba(18, 24, 40, 0.10);
  --home-border-strong: rgba(18, 24, 40, 0.16);
  --home-bg-soft: rgba(19, 88, 97, 0.06);
  --home-shadow: 0 18px 60px rgba(15, 23, 42, 0.10);
  --home-shadow-soft: 0 10px 34px rgba(15, 23, 42, 0.08);
  --home-text: rgba(17, 24, 39, 0.92);
  --home-muted: rgba(17, 24, 39, 0.64);
  --home-muted2: rgba(17, 24, 39, 0.52);
  --home-green: #135861; /* brand */
  --home-green-2: rgba(19, 88, 97, 0.12);
  --home-white: #fff;
  --home-focus: 0 0 0 3px rgba(19, 88, 97, 0.18);

  color: var(--home-text);
}

/* Font law — ensure no browser default fonts */
.home-ultra input,
.home-ultra select,
.home-ultra textarea,
.home-ultra button,
.home-ultra a,
.home-ultra label {
  font: inherit !important;
  font-family: inherit !important;
}

.home-ultra a {
  color: inherit;
  text-decoration: none;
}

.home-ultra a:focus,
.home-ultra button:focus,
.home-ultra input:focus {
  outline: none;
  box-shadow: var(--home-focus);
}

/* ====== Buttons ====== */
.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--home-border);
  background: var(--home-white);
  color: var(--home-text);
  line-height: 1;
  font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  user-select: none;
}

.home-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  border-color: var(--home-border-strong);
}

.home-btn--primary {
  /* more alive (premium SaaS) */
  background: linear-gradient(135deg, #0f6f67 0%, #13886a 35%, #0a5b84 100%);
  border-color: rgba(19, 88, 97, 0.28);
  color: #fff;
  box-shadow: 0 14px 34px rgba(19, 88, 97, 0.18);
}

.home-btn--primary:hover {
  background: linear-gradient(135deg, #0d625b 0%, #117a60 40%, #084f72 100%);
}

.home-btn--secondary {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(19, 88, 97, 0.18);
  color: rgba(17, 24, 39, 0.84);
}

.home-btn--ghost {
  background: transparent;
  border-color: rgba(19, 88, 97, 0.18);
  color: var(--home-green);
}

/* ====== Hero ====== */
.home-hero {
  position: relative;
  padding: 26px 0 12px;
  /* Rounded hero like the approved mock (match left radius on the right too). */
  border-radius: var(--home-radius);
  overflow: hidden; /* keeps hero background clean (does not affect header dropdown) */
}

/* Version B (luxury/artistic): explicit DOM graphics layer so it cannot sit under the BG (no cache/selector surprises). */
/* Disable old pseudo layers (kept here to avoid future conflicts). */
.home-hero::before,
.home-hero::after{ content: none !important; }

.home-hero__gfx{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* sits above .home-hero__bg (z=0) and below content (z=3) */
  /* Version B (luxury/artistic): richer, more "designed" layer (green dominant + subtle purple) */
  isolation: isolate;
}

/* Main artistic field (kept mostly on the RIGHT so the photo stays sharp & alive) */
.home-hero__gfx::before{
  content:"";
  position:absolute;
  inset:-220px;
  pointer-events:none;
  /*
    Version B — luxury/artistic (refined):
    - No harsh mint block
    - Mesh-like soft glows (green dominant + subtle purple)
    - Clean blend into white on the copy side
    - Keeps the photo sharp (no grey wash)
  */
  background:
    /* subtle highlight sweep (premium sheen) */
    linear-gradient(125deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.00) 44%),
    /* mesh glows (RIGHT side) */
    radial-gradient(1200px 820px at 88% 44%, rgba(16,185,129,0.22) 0%, rgba(16,185,129,0) 64%),
    radial-gradient(980px 740px at 78% 80%, rgba(20,184,166,0.16) 0%, rgba(20,184,166,0) 66%),
    radial-gradient(980px 740px at 94% 20%, rgba(168,85,247,0.12) 0%, rgba(168,85,247,0) 72%),
    radial-gradient(820px 620px at 70% 34%, rgba(59,130,246,0.10) 0%, rgba(59,130,246,0) 72%),
    /* blend into clean white (NO card) */
    linear-gradient(90deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.08) 46%,
      rgba(255,255,255,0.28) 64%,
      rgba(255,255,255,0.62) 82%,
      rgba(255,255,255,0.94) 100%
    );
  mix-blend-mode: normal;
  opacity: 1;
  filter: saturate(1.05) contrast(1.01);
  transform: translateZ(0);
  /* concentrate the field on the right half (match approved mock) */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    transparent 28%,
    rgba(0,0,0,.18) 44%,
    rgba(0,0,0,.62) 62%,
    rgba(0,0,0,.92) 78%,
    #000 100%
  );
          mask-image: linear-gradient(90deg,
    transparent 0%,
    transparent 28%,
    rgba(0,0,0,.18) 44%,
    rgba(0,0,0,.62) 62%,
    rgba(0,0,0,.92) 78%,
    #000 100%
  );
}

/* Film grain / noise (subtle but premium; only on the right) */
.home-hero__gfx::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  /* Neural / dotted network pattern (RIGHT only) + ultra subtle grain */
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22640%22%20viewBox%3D%220%200%20640%20640%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22rgb%2815%2C23%2C42%29%22%20stroke-opacity%3D%220.16%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M90%20140%20L210%2090%20L310%20160%20L430%20120%20L540%20190%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M140%20300%20L250%20250%20L360%20310%20L470%20270%20L580%20330%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M110%20470%20L230%20420%20L320%20490%20L440%20450%20L560%20520%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M210%2090%20L250%20250%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M310%20160%20L360%20310%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M430%20120%20L470%20270%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M230%20420%20L250%20250%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M320%20490%20L360%20310%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2290%22%20cy%3D%22140%22%20r%3D%223.2%22%20fill%3D%22rgb%2816%2C185%2C129%29%22%20fill-opacity%3D%220.38%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22210%22%20cy%3D%2290%22%20r%3D%223.2%22%20fill%3D%22rgb%28255%2C255%2C255%29%22%20fill-opacity%3D%220.42%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22310%22%20cy%3D%22160%22%20r%3D%223.2%22%20fill%3D%22rgb%28255%2C255%2C255%29%22%20fill-opacity%3D%220.42%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22430%22%20cy%3D%22120%22%20r%3D%223.2%22%20fill%3D%22rgb%28168%2C85%2C247%29%22%20fill-opacity%3D%220.26%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22540%22%20cy%3D%22190%22%20r%3D%223.2%22%20fill%3D%22rgb%28255%2C255%2C255%29%22%20fill-opacity%3D%220.38%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22140%22%20cy%3D%22300%22%20r%3D%223.0%22%20fill%3D%22rgb%28255%2C255%2C255%29%22%20fill-opacity%3D%220.34%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22250%22%20cy%3D%22250%22%20r%3D%223.0%22%20fill%3D%22rgb%2816%2C185%2C129%29%22%20fill-opacity%3D%220.28%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22360%22%20cy%3D%22310%22%20r%3D%223.0%22%20fill%3D%22rgb%28255%2C255%2C255%29%22%20fill-opacity%3D%220.34%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22470%22%20cy%3D%22270%22%20r%3D%223.0%22%20fill%3D%22rgb%28168%2C85%2C247%29%22%20fill-opacity%3D%220.22%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22580%22%20cy%3D%22330%22%20r%3D%223.0%22%20fill%3D%22rgb%28255%2C255%2C255%29%22%20fill-opacity%3D%220.30%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22110%22%20cy%3D%22470%22%20r%3D%223.1%22%20fill%3D%22rgb%28255%2C255%2C255%29%22%20fill-opacity%3D%220.32%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22230%22%20cy%3D%22420%22%20r%3D%223.1%22%20fill%3D%22rgb%2816%2C185%2C129%29%22%20fill-opacity%3D%220.24%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22320%22%20cy%3D%22490%22%20r%3D%223.1%22%20fill%3D%22rgb%28255%2C255%2C255%29%22%20fill-opacity%3D%220.32%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22440%22%20cy%3D%22450%22%20r%3D%223.1%22%20fill%3D%22rgb%28168%2C85%2C247%29%22%20fill-opacity%3D%220.18%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22560%22%20cy%3D%22520%22%20r%3D%223.1%22%20fill%3D%22rgb%28255%2C255%2C255%29%22%20fill-opacity%3D%220.28%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27220%27%20height%3D%27220%27%20filter%3D%27url(%23n)%27%20opacity%3D%27.30%27%2F%3E%3C%2Fsvg%3E");
  background-size: 640px 640px, 240px 240px;
  background-repeat: repeat, repeat;
  background-position: 92% 18%, 0 0;

  /* Visible on light backgrounds (slightly stronger per feedback), but still soft */
  opacity: .48;
  mix-blend-mode: normal;
  filter: blur(0.75px) saturate(1.06) contrast(1.14);

  /* keep it only on the RIGHT graphic field */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, rgba(0,0,0,.25) 58%, rgba(0,0,0,.85) 78%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, rgba(0,0,0,.25) 58%, rgba(0,0,0,.85) 78%, #000 100%);
}
.home-heroGfx__glow{
  position: absolute;
  inset: -180px;
  opacity: 1;
  filter: blur(6px);
  transform: translateZ(0);
  mix-blend-mode: soft-light;
  /* keep glows on the RIGHT side so the photo stays natural */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, rgba(0,0,0,.45) 56%, rgba(0,0,0,.85) 74%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, rgba(0,0,0,.45) 56%, rgba(0,0,0,.85) 74%, #000 100%);
}

/* Dominant green glow (right side) */
.home-heroGfx__glow--green{
  background:
    radial-gradient(980px 640px at 78% 38%, rgba(16,185,129,0.30), transparent 62%),
    radial-gradient(760px 560px at 64% 78%, rgba(34,211,238,0.14), transparent 66%);
  opacity: .78;
}

/* Very gentle purple accent (luxury) */
.home-heroGfx__glow--purple{
  background:
    radial-gradient(860px 540px at 90% 24%, rgba(168,85,247,0.18), transparent 64%),
    radial-gradient(740px 520px at 84% 60%, rgba(124,58,237,0.10), transparent 68%);
  opacity: .58;
}

/* Warm depth hint (kept subtle so it won't look "orange") */
.home-heroGfx__glow--cyan{
  background:
    radial-gradient(820px 520px at 56% 18%, rgba(245,158,11,0.10), transparent 72%),
    radial-gradient(720px 520px at 72% 86%, rgba(20,184,166,0.10), transparent 70%);
  opacity: .46;
  mix-blend-mode: overlay;
}

/* Film grain / micro texture (extremely subtle) */
.home-heroGfx__grain{
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(15,23,42,0.030) 0, rgba(15,23,42,0.030) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(15,23,42,0.020) 0, rgba(15,23,42,0.020) 1px, transparent 1px, transparent 4px);
  opacity: .14;
  mix-blend-mode: overlay;
  /* concentrate the texture more on the right half */
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 45%, #000 100%);
}

.home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* premium colorful background (no flat blue bar) */
  background:
    radial-gradient(900px 520px at 14% 12%, rgba(16, 185, 129, 0.18), transparent 55%),
    radial-gradient(820px 520px at 86% 18%, rgba(59, 130, 246, 0.14), transparent 56%),
    radial-gradient(720px 520px at 64% 92%, rgba(20, 184, 166, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.00) 0%, rgba(248, 250, 252, 0.92) 72%, rgba(248, 250, 252, 1) 100%);
  pointer-events: none;
}

/* Hide the "colored strip" just under the header: keep top area clean/white */
.home-hero__bg::before{
  content: "";
  position: absolute;
  inset: 0;
  /* keep the very top clean under the header, but DO NOT wash the whole hero */
  background: linear-gradient(180deg,
    rgba(255,255,255,0.96) 0%,
    rgba(255,255,255,0.72) 18%,
    rgba(255,255,255,0.35) 34%,
    rgba(255,255,255,0.00) 56%
  );
  opacity: 1;
  pointer-events: none;
}

.home-hero__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  /* subtle grid/noise to avoid "flat" feel */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(17, 24, 39, 0.05) 1px, transparent 0);
  background-size: 22px 22px;
  opacity: .35;
  mask-image: radial-gradient(60% 60% at 40% 30%, #000 0%, transparent 72%);
}

.home-hero__inner {
  position: relative;
  z-index: 3;
  /* IMPORTANT: the inner container must be fully transparent so text sits directly on the hero photo */
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Some themes apply background to `.container`. Force transparency only for the hero container (scope-safe). */
.home-hero__inner.container{
  background: transparent !important;
}

.home-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 26px;
  align-items: start;
}

.home-hero__copy {
  padding-top: 10px;
  /* Keep content away from the RIGHT edge (RTL-safe) */
  padding-inline-end: 56px;
}


/*
  v74 (Hero tuning)
  User request:
  - Increase right-side breathing room for ALL hero copy/CTA/trust blocks.
  - Make the kicker text slightly smaller and nudge it a bit to the LEFT.
  NOTE: use !important to win against theme/container overrides.
*/
.home-hero__copy{
  padding-inline-end: 92px !important;
}

.home-hero__trustcards{
  padding-inline-end: 92px !important;
}

.home-hero__kickerText{
  font-size: 12px !important;
}

/* Nudge kicker slightly to the LEFT (visual alignment like the approved reference) */
.home-hero__kicker{
  transform: translateX(-14px);
}

.home-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 2px; /* gradient stroke wrapper */
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(16,185,129,0.45), rgba(6,182,212,0.35), rgba(59,130,246,0.22));
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.home-hero__kicker::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #10b981, #06b6d4);
  box-shadow: 0 0 0 4px rgba(16,185,129,0.12);
}

.home-hero__kickerText{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.08);
  color: rgba(15, 118, 110, 0.98);
  font-weight: 900;
  font-size: 12.75px;
  letter-spacing: -0.1px;
  position: relative;
  overflow: hidden;
}

.home-hero__kickerText::after{
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(90deg, transparent, rgba(16,185,129,0.16), transparent);
  transform: translateX(-70%);
  animation: homeKickerShine 6.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes homeKickerShine{
  0%, 35% { transform: translateX(-70%); opacity: 0; }
  45% { opacity: 1; }
  70% { transform: translateX(70%); opacity: 0; }
  100% { transform: translateX(70%); opacity: 0; }
}

.home-hero__title {
  margin: 14px 0 10px;
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.3px;
}

.home-hero__subtitle {
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  color: var(--home-muted);
  max-width: 54ch;
}

.home-hero__cta {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.home-hero__micro {
  margin-top: 14px;
  color: var(--home-muted2);
  font-size: 13.5px;
  line-height: 1.7;
}

.home-hero__trustcards{
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  max-width: 100%;
  /* Keep trust row away from the RIGHT edge too (match copy column inset) */
  padding-inline-end: 56px;
}

.home-trustCard{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(17,24,39,0.10);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
  color: rgba(17, 24, 39, 0.84);
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  white-space: nowrap;
}

.home-trustCard:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.10);
  border-color: rgba(19, 88, 97, 0.22);
}

.home-trustCard__text{
  font-size: 12.25px;
  font-weight: 800;
}

.home-trustCard__icon{
  width: 28px;
  height: 28px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--home-green);
  background: rgba(16,185,129,0.10);
  border: 1px solid rgba(17,24,39,0.10);
}

/* Color variants (avoid "all blue") */
.home-trustCard--secure .home-trustCard__icon{
  color: #059669;
  background: rgba(16,185,129,0.12);
}
.home-trustCard--terms .home-trustCard__icon{
  color: #7c3aed;
  background: rgba(124,58,237,0.10);
}
.home-trustCard--privacy .home-trustCard__icon{
  color: #db2777;
  background: rgba(219,39,119,0.10);
}
.home-trustCard--about .home-trustCard__icon{
  color: #d97706;
  background: rgba(217,119,6,0.10);
}

/* Make primary hero CTA wider + fresher green */
.home-hero .home-btn--primary{
  padding: 12px 26px;
  min-width: 178px;
  border-radius: 14px;
  background: linear-gradient(135deg, #16a34a 0%, #10b981 42%, #06b6d4 100%);
  border-color: rgba(16,185,129,0.28);
  box-shadow: 0 16px 38px rgba(16,185,129,0.18);
}
.home-hero .home-btn--primary:hover{
  background: linear-gradient(135deg, #148a40 0%, #0ea371 45%, #0891b2 100%);
}

/* ====== Hero visual (editorial slider) ====== */
.home-hero__visual{
  position: relative;
  border-radius: var(--home-radius);
  border: 1px solid var(--home-border);
  background: rgba(255, 255, 255, 0.60);
  box-shadow: var(--home-shadow);
  overflow: hidden;
  min-height: 390px;
}

.home-heroVisual{ position: relative; min-height: 390px; }

/* Animated gradient mesh layers behind the illustration */
.home-heroVisual__fx{
  position: absolute;
  inset: -30px -40px -40px -40px;
  pointer-events: none;
  z-index: 0;
}

.home-heroVisual__fxLayer{
  position: absolute;
  inset: 0;
  border-radius: 28px;
  opacity: 0;
  /* Version B: richer, more cinematic glow (kept subtle to avoid washing the photo) */
  filter: blur(10px) saturate(1.22) contrast(1.02);
  transform: scale(1.02);
  mix-blend-mode: soft-light;
  animation: homeHeroFx 18s infinite;
}

.home-heroVisual__fxLayer.is-1{
  background:
    radial-gradient(520px 320px at 18% 20%, rgba(16,185,129,0.34), transparent 60%),
    radial-gradient(620px 360px at 82% 18%, rgba(59,130,246,0.28), transparent 62%),
    radial-gradient(700px 420px at 70% 86%, rgba(6,182,212,0.22), transparent 62%),
    radial-gradient(820px 520px at 92% 34%, rgba(168,85,247,0.12), transparent 64%),
    linear-gradient(135deg, rgba(248,251,255,0.68), rgba(240,253,250,0.64));
}

.home-heroVisual__fxLayer.is-2{
  background:
    radial-gradient(560px 340px at 76% 22%, rgba(34,197,94,0.26), transparent 62%),
    radial-gradient(680px 420px at 18% 76%, rgba(168,85,247,0.14), transparent 64%),
    radial-gradient(720px 420px at 88% 88%, rgba(14,165,233,0.20), transparent 62%),
    radial-gradient(760px 520px at 64% 18%, rgba(245,158,11,0.08), transparent 68%),
    linear-gradient(135deg, rgba(250,250,255,0.70), rgba(236,254,255,0.62));
  animation-delay: 6s;
}

.home-heroVisual__fxLayer.is-3{
  background:
    radial-gradient(620px 360px at 22% 18%, rgba(245,158,11,0.16), transparent 64%),
    radial-gradient(740px 440px at 86% 30%, rgba(16,185,129,0.22), transparent 64%),
    radial-gradient(760px 480px at 40% 92%, rgba(99,102,241,0.16), transparent 66%),
    radial-gradient(720px 520px at 92% 24%, rgba(168,85,247,0.10), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,0.68), rgba(240,253,250,0.62));
  animation-delay: 12s;
}

.home-heroVisual__bg{
  position: absolute;
  inset: -30px -40px -40px -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  opacity: 0.18;
  filter: saturate(0.95);
  pointer-events: none;
  z-index: 1;
}

.home-heroVisual__slides{ position: absolute; inset: 0; z-index: 1; }
.home-heroVisual__slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.01);
  animation: homeHeroSlide 18s infinite;
}
.home-heroVisual__slide.is-2{ animation-delay: 6s; }
.home-heroVisual__slide.is-3{ animation-delay: 12s; }

@keyframes homeHeroSlide{
  0%{ opacity: 0; }
  6%{ opacity: 1; }
  33%{ opacity: 1; }
  39%{ opacity: 0; }
  100%{ opacity: 0; }
}

@keyframes homeHeroFx{
  0%{ opacity: 0; }
  6%{ opacity: 1; }
  33%{ opacity: 1; }
  39%{ opacity: 0; }
  100%{ opacity: 0; }
}

.home-heroVisual::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 16% 12%, rgba(16,185,129,0.14), transparent 62%),
    radial-gradient(820px 420px at 84% 14%, rgba(59,130,246,0.12), transparent 62%),
    radial-gradient(820px 420px at 74% 84%, rgba(6,182,212,0.10), transparent 64%),
    radial-gradient(820px 520px at 92% 22%, rgba(168,85,247,0.08), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.home-heroVisual__cards{
  position: absolute;
  inset: 0;
  padding: 18px;
  display: grid;
  align-content: end;
  gap: 12px;
  z-index: 2;
}

.hv-card{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--home-border);
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(10px);
}

.hv-card__ico{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.16), rgba(99, 102, 241, 0.12));
  color: rgba(19, 88, 97, 0.95);
  flex: 0 0 auto;
}

/* Add subtle variety (more "alive" than a single tone) */
.hv-card--proposal .hv-card__ico{ background: rgba(59,130,246,0.10); color: #1d4ed8; }
.hv-card--escrow .hv-card__ico{ background: rgba(16,185,129,0.10); color: #059669; }
.hv-card--chat .hv-card__ico{ background: rgba(245,158,11,0.12); color: #b45309; }

.hv-card__t{ font-weight: 900; font-size: 13px; color: rgba(17, 24, 39, 0.86); }
.hv-card__s{ margin-top: 3px; font-size: 12px; color: rgba(17, 24, 39, 0.60); }

@media (min-width: 1020px){
  .home-heroVisual__cards{ padding: 22px; gap: 14px; }
  .hv-card{ width: min(420px, 92%); }
  .hv-card--proposal{ justify-self: start; }
  .hv-card--escrow{ justify-self: end; }
  .hv-card--chat{ justify-self: start; }
}

@media (max-width: 740px){
  .home-hero__visual,
  .home-heroVisual{ min-height: 380px; }
  .hv-card{ padding: 10px; border-radius: 14px; }
}

/* Inline links (used in FAQ area) */
.home-inlineLinks{
  display:flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: 13px;
}
.home-inlineLinks a{
  color: rgba(17,24,39,0.70);
  text-decoration: none;
  border-bottom: 1px dashed rgba(17,24,39,0.22);
}
.home-inlineLinks a:hover{ color: rgba(19, 88, 97, 0.95); border-bottom-color: rgba(19, 88, 97, 0.55); }

/* ====== Proof strip ====== */
.home-proof {
  padding: 10px 0 0;
}

.home-proof__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--home-radius);
  border: 1px solid var(--home-border);
  background: rgba(255,255,255,0.70);
  box-shadow: var(--home-shadow-soft);
}

.home-proof__left {
  font-weight: 900;
  color: rgba(17, 24, 39, 0.82);
}

.home-proof__right {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: rgba(17, 24, 39, 0.64);
  font-weight: 800;
  font-size: 12.5px;
}

.home-proof__right i { color: var(--home-green); }

/* ====== Sections ====== */
.home-section {
  padding: 44px 0;
}

.home-section--soft {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(620px 320px at 12% 18%, rgba(20, 184, 166, 0.11), rgba(20, 184, 166, 0) 66%),
    radial-gradient(620px 320px at 88% 78%, rgba(59, 130, 246, 0.09), rgba(59, 130, 246, 0) 68%),
    linear-gradient(180deg, #ffffff 0%, #f7fbfa 100%);
  border-top: 1px solid rgba(17, 24, 39, 0.06);
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}

.home-section--soft::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(19, 88, 97, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(19, 88, 97, 0.04) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: 0.42;
}

.home-section--soft > .container {
  position: relative;
  z-index: 1;
}

.home-h2 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.2px;
}

.home-p {
  margin: 10px 0 0;
  color: var(--home-muted);
  font-size: 15px;
  line-height: 1.9;
  max-width: 72ch;
}

.home-headRow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.home-softIntro {
  max-width: 820px;
  margin: 0 auto 20px;
  text-align: center;
}

.home-softIntro__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(19, 88, 97, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(19, 88, 97, 0.92);
  font-size: 12px;
  font-weight: 950;
}

.home-softIntro .home-p {
  margin-left: auto;
  margin-right: auto;
}

.home-ecosystem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  margin-top: 18px;
}

.home-ecoCard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 18px;
  border-radius: calc(var(--home-radius) + 4px);
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.055);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.home-ecoCard:hover {
  transform: translateY(-2px);
  border-color: rgba(19, 88, 97, 0.20);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.075);
}

.home-ecoCard::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.10), rgba(255,255,255,0) 48%);
  opacity: .62;
}

.home-ecoCard--talent::after {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.10), rgba(255,255,255,0) 48%);
}

.home-ecoCard > * {
  position: relative;
  z-index: 1;
}

.home-ecoCard__top {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.home-ecoCard__icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: rgba(19, 88, 97, 1);
  background: linear-gradient(180deg, rgba(20, 184, 166, 0.16), rgba(19, 88, 97, 0.08));
  border: 1px solid rgba(19, 88, 97, 0.14);
}

.home-ecoCard--talent .home-ecoCard__icon {
  color: rgba(37, 99, 235, 1);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.14), rgba(124, 58, 237, 0.06));
  border-color: rgba(59, 130, 246, 0.14);
}

.home-ecoCard h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 950;
  color: rgba(15, 23, 42, 0.94);
}

.home-ecoCard p {
  margin: 7px 0 0;
  color: rgba(17, 24, 39, 0.64);
  font-size: 13.5px;
  line-height: 1.85;
}

.home-ecoList {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.home-ecoList li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: rgba(17, 24, 39, 0.76);
  font-size: 13.5px;
  line-height: 1.8;
}

.home-ecoList i {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: grid;
  place-items: center;
  margin-top: 2px;
  border-radius: 999px;
  color: rgba(19, 88, 97, 1);
  background: rgba(16, 185, 129, 0.12);
  font-size: 10px;
}

.home-ecoCard--talent .home-ecoList i {
  color: rgba(37, 99, 235, 1);
  background: rgba(59, 130, 246, 0.11);
}

.home-ecoCard__link {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: rgba(19, 88, 97, 1);
  font-size: 13.5px;
  font-weight: 950;
}

.home-ecoCard--talent .home-ecoCard__link {
  color: rgba(37, 99, 235, 1);
}

.home-ecoCard__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.home-ecoBridge {
  min-width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(19, 88, 97, 0.82);
}

.home-ecoBridge__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(19, 88, 97, 0.80);
  box-shadow: 0 0 0 7px rgba(19, 88, 97, 0.08);
}

.home-ecoBridge__line {
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, rgba(19, 88, 97, 0), rgba(19, 88, 97, 0.34), rgba(37, 99, 235, 0));
}

.home-ecoBridge__label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 10px 7px;
  border-radius: 999px;
  border: 1px solid rgba(19, 88, 97, 0.13);
  background: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.home-softBadges {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
}

.home-softBadges span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(17, 24, 39, 0.68);
  font-size: 12.5px;
  font-weight: 900;
}

.home-softBadges i {
  color: rgba(19, 88, 97, 0.90);
}

.home-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  color: rgba(19, 88, 97, 1);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(19, 88, 97, 0.16);
  background: rgba(19, 88, 97, 0.06);
}

.home-link:hover {
  border-color: rgba(19, 88, 97, 0.28);
  background: rgba(19, 88, 97, 0.10);
}

.home-inlineLinks {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.home-inlineLinks a {
  font-weight: 800;
  color: rgba(17, 24, 39, 0.72);
  border-bottom: 1px dashed rgba(17, 24, 39, 0.22);
  padding-bottom: 2px;
}

.home-inlineLinks a:hover {
  color: rgba(17, 24, 39, 0.92);
  border-bottom-color: rgba(19, 88, 97, 0.55);
}

/* ====== Categories — lightweight discovery hub ====== */
.home-categoryHub {
  position: relative;
  isolation: isolate;
}

.home-categoryHub__shell {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 3vw, 28px);
  border-radius: calc(var(--home-radius) + 10px);
  border: 1px solid rgba(19, 88, 97, 0.13);
  background:
    radial-gradient(circle at 10% 16%, rgba(20, 184, 166, 0.120), transparent 28%),
    radial-gradient(circle at 91% 9%, rgba(96, 165, 250, 0.112), transparent 27%),
    radial-gradient(circle at 84% 88%, rgba(168, 85, 247, 0.074), transparent 28%),
    radial-gradient(circle at 18% 88%, rgba(245, 158, 11, 0.058), transparent 24%),
    linear-gradient(135deg, rgba(248, 253, 251, 0.985) 0%, rgba(241, 250, 255, 0.900) 49%, rgba(255, 255, 255, 0.975) 100%);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.050);
}

.home-categoryHub__shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg width='920' height='420' viewBox='0 0 920 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M42 86 C142 28 221 54 311 119 S497 210 624 135 822 56 892 112' stroke='%23135861' stroke-opacity='.105' stroke-width='1.35'/%3E%3Cpath d='M73 306 C176 250 282 279 368 218 S546 95 663 183 765 301 884 245' stroke='%233B82F6' stroke-opacity='.092' stroke-width='1.2'/%3E%3Cpath d='M152 145 L254 96 L361 148 L476 102 L603 154 L731 106 L850 166' stroke='%2314B8A6' stroke-opacity='.108' stroke-width='1'/%3E%3Cpath d='M118 246 L248 286 L372 238 L498 292 L629 242 L768 286' stroke='%238B5CF6' stroke-opacity='.068' stroke-width='1'/%3E%3Cg fill='%23FFFFFF' stroke='%23135861' stroke-opacity='.145' stroke-width='1'%3E%3Ccircle cx='152' cy='145' r='4.5'/%3E%3Ccircle cx='254' cy='96' r='3.5'/%3E%3Ccircle cx='361' cy='148' r='4'/%3E%3Ccircle cx='476' cy='102' r='3.5'/%3E%3Ccircle cx='603' cy='154' r='4'/%3E%3Ccircle cx='731' cy='106' r='3.5'/%3E%3Ccircle cx='850' cy='166' r='4.5'/%3E%3Ccircle cx='118' cy='246' r='3.5'/%3E%3Ccircle cx='248' cy='286' r='4'/%3E%3Ccircle cx='372' cy='238' r='3.5'/%3E%3Ccircle cx='498' cy='292' r='4'/%3E%3Ccircle cx='629' cy='242' r='3.5'/%3E%3Ccircle cx='768' cy='286' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(90deg, rgba(19, 88, 97, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(59, 130, 246, 0.030) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.64), transparent 34%);
  background-repeat: no-repeat, repeat, repeat, no-repeat;
  background-position: center 58%, center, center, center top;
  background-size: min(920px, 100%) auto, 44px 44px, 44px 44px, 100% 100%;
  opacity: 0.88;
}

.home-categoryHub__shell::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--home-radius) + 9px);
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 22%, rgba(255, 255, 255, 0.72) 0 5%, transparent 15%),
    radial-gradient(circle at 84% 22%, rgba(255, 255, 255, 0.62) 0 4%, transparent 14%),
    radial-gradient(ellipse at 72% 88%, rgba(20, 184, 166, 0.072), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), transparent 31%);
  opacity: 0.92;
}

.home-categoryHub__header,
.home-categoryPaths,
.home-catSearch,
.home-catGrid,
.home-categoryHub__footer {
  position: relative;
  z-index: 1;
}

.home-categoryHub__header {
  max-width: 760px;
}

.home-categoryPaths {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.home-categoryPath {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: rgba(255,255,255,0.78);
  color: rgba(17, 24, 39, 0.86);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.home-categoryPath:hover {
  transform: translateY(-1px);
  border-color: rgba(19, 88, 97, 0.18);
  background: rgba(255,255,255,0.94);
}

.home-categoryPath__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(19, 88, 97, 0.95);
  background: rgba(19, 88, 97, 0.10);
}

.home-categoryPath--freelancer .home-categoryPath__icon {
  color: rgba(59, 130, 246, 0.95);
  background: rgba(59, 130, 246, 0.10);
}

.home-categoryPath strong {
  display: block;
  font-size: 14.5px;
  font-weight: 950;
}

.home-categoryPath small {
  display: block;
  margin-top: 5px;
  color: rgba(17, 24, 39, 0.58);
  font-size: 12.5px;
  line-height: 1.8;
}

.home-catSearch {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(19, 88, 97, 0.13);
  background: rgba(255,255,255,0.88);
}

.home-catSearch i { color: rgba(19, 88, 97, 0.70); }

.home-catSearch__input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  color: rgba(17, 24, 39, 0.86);
  font-family: inherit !important;
  font-size: 14px;
}

.home-catGrid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.home-cat {
  position: relative;
  min-height: 154px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: rgba(255,255,255,0.84);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: rgba(17, 24, 39, 0.86);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.home-cat:hover {
  transform: translateY(-2px);
  border-color: rgba(19, 88, 97, 0.20);
  background: rgba(255,255,255,0.97);
}

.home-cat__icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(19, 88, 97, 0.95);
  background: rgba(19, 88, 97, 0.10);
}

.home-cat--design .home-cat__icon { color: rgba(79, 70, 229, 0.92); background: rgba(79, 70, 229, 0.10); }
.home-cat--brand .home-cat__icon { color: rgba(168, 85, 247, 0.92); background: rgba(168, 85, 247, 0.10); }
.home-cat--content .home-cat__icon { color: rgba(234, 88, 12, 0.92); background: rgba(234, 88, 12, 0.10); }
.home-cat--growth .home-cat__icon { color: rgba(5, 150, 105, 0.92); background: rgba(5, 150, 105, 0.10); }
.home-cat--seo .home-cat__icon { color: rgba(37, 99, 235, 0.92); background: rgba(37, 99, 235, 0.10); }
.home-cat--motion .home-cat__icon { color: rgba(219, 39, 119, 0.88); background: rgba(219, 39, 119, 0.09); }
.home-cat--biz .home-cat__icon { color: rgba(15, 23, 42, 0.80); background: rgba(15, 23, 42, 0.08); }

.home-cat__body {
  display: block;
  min-width: 0;
}

.home-cat__t {
  margin: 0;
  display: block;
  font-weight: 950;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(17, 24, 39, 0.90);
}

.home-cat__s {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.75;
  color: rgba(17, 24, 39, 0.58);
}

.home-cat__meta {
  margin-top: auto;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 850;
  color: rgba(19, 88, 97, 0.92);
  background: rgba(19, 88, 97, 0.08);
  border: 1px solid rgba(19, 88, 97, 0.10);
}

.home-categoryHub__footer {
  margin-top: 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.home-categoryHub__footer span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(17, 24, 39, 0.07);
  color: rgba(17, 24, 39, 0.66);
  font-size: 12.5px;
  font-weight: 800;
}

.home-categoryHub__footer span i {
  color: rgba(19, 88, 97, 0.85);
}

.home-categoryHub__footer .home-link {
  margin-right: auto;
}

/* ====== FAQ ====== */

.home-faqSection {
  padding-top: 34px;
  padding-bottom: 34px;
}

.home-faqSection__head {
  max-width: 760px;
  margin-bottom: 16px;
}

.home-faqSection__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(19, 88, 97, 0.08);
  border: 1px solid rgba(19, 88, 97, 0.12);
  color: #135861;
  font-size: 12px;
  font-weight: 950;
}
.home-faq {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.home-faq__item {
  border-radius: var(--home-radius);
  border: 1px solid var(--home-border);
  background: rgba(255,255,255,0.88);
  box-shadow: 0 14px 34px rgba(15, 43, 70, 0.055);
  overflow: hidden;
}

.home-faq__q {
  width: 100%;
  text-align: start;
  background: transparent;
  border: none;
  padding: 15px 16px;
  cursor: pointer;
  font-family: inherit !important;
  color: rgba(17, 24, 39, 0.88);
  font-weight: 950;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.home-faq__q::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: rgba(17, 24, 39, 0.50);
  transition: transform .14s ease;
}

.home-faq__a {
  display: none;
  padding: 0 16px 16px;
  color: rgba(17, 24, 39, 0.66);
  line-height: 1.85;
}

.home-faq__item.is-open .home-faq__a { display: block; }
.home-faq__item.is-open .home-faq__q::after { transform: rotate(180deg); }


/* ====== SEO Foundation Block ====== */
.home-seoFoundation {
  padding: 28px 0 34px;
}

.home-seoFoundation__box {
  padding: clamp(22px, 3vw, 34px);
  border-radius: calc(var(--home-radius) + 8px);
  border: 1px solid rgba(19, 88, 97, 0.12);
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(15, 43, 70, 0.07);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(245px, 0.34fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
}

.home-seoFoundation__intro {
  min-width: 0;
}

.home-seoFoundation__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  color: rgba(19, 88, 97, 0.94);
  background: rgba(223, 241, 229, 0.62);
  border: 1px solid rgba(19, 88, 97, 0.11);
  font-size: 12.5px;
  font-weight: 950;
}

.home-seoFoundation h2 {
  margin: 13px 0 0;
  color: #102a43;
  font-size: clamp(24px, 2.7vw, 36px);
  line-height: 1.55;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.home-seoFoundation p {
  margin: 13px 0 0;
  color: rgba(17, 24, 39, 0.68);
  font-size: 15px;
  line-height: 2.12;
}

.home-seoFoundation__aside {
  padding: 16px;
  border-radius: 24px;
  background: rgba(241, 248, 244, 0.74);
  border: 1px solid rgba(19, 88, 97, 0.11);
  display: grid;
  gap: 10px;
}

.home-seoFoundation__aside a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 13px;
  border-radius: 16px;
  color: rgba(19, 88, 97, 0.96);
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(19, 88, 97, 0.09);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 900;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.home-seoFoundation__aside a::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-inline-start: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.72;
}

.home-seoFoundation__aside a:hover {
  transform: translateY(-1px);
  border-color: rgba(19, 88, 97, 0.18);
  background: #ffffff;
}

/* ====== Final SEO footer section ====== */
.home-final {
  padding: 34px 0 70px;
}

.home-final__box {
  padding: 24px;
  border-radius: calc(var(--home-radius) + 6px);
  border: 1px solid rgba(19, 88, 97, 0.14);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--home-shadow-soft);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
}

.home-final__content {
  min-width: 0;
}

.home-final__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(19, 88, 97, 0.08);
  color: rgba(19, 88, 97, 0.92);
  border: 1px solid rgba(19, 88, 97, 0.10);
  font-size: 12.5px;
  font-weight: 900;
}

.home-final h2 {
  margin: 12px 0 0;
  font-size: clamp(22px, 2.4vw, 31px);
  line-height: 1.55;
  font-weight: 950;
  color: #102a43;
}

.home-final p {
  max-width: 860px;
  margin: 10px 0 0;
  color: rgba(17, 24, 39, 0.68);
  line-height: 2;
  font-size: 14.5px;
}

.home-final__links {
  margin-top: 15px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.home-final__links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(19, 88, 97, 0.06);
  border: 1px solid rgba(19, 88, 97, 0.10);
  color: rgba(19, 88, 97, 0.94);
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.home-final__links a:hover {
  transform: translateY(-1px);
  background: rgba(19, 88, 97, 0.10);
  border-color: rgba(19, 88, 97, 0.18);
}

.home-final__action {
  min-width: 220px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(241, 248, 244, 0.82);
  border: 1px solid rgba(19, 88, 97, 0.12);
  display: grid;
  justify-items: start;
  gap: 10px;
}

.home-final__action span {
  color: rgba(17, 24, 39, 0.58);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.8;
}

/* ====== Responsive ====== */
@media (max-width: 1100px) {
  .home-hero__grid { grid-template-columns: 1fr; }
  .home-hero__title { font-size: 34px; }
}

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

  .home-seoFoundation__box { grid-template-columns: 1fr; }
  .home-seoFoundation__aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-grid4 { grid-template-columns: repeat(2, 1fr); }
  .home-catGrid { grid-template-columns: repeat(2, 1fr); }
  .home-ecosystem { grid-template-columns: 1fr; }
  .home-ecoBridge { min-width: 0; flex-direction: row; padding: 2px 0; }
  .home-ecoBridge__line { width: 54px; height: 1px; background: linear-gradient(90deg, rgba(19, 88, 97, 0), rgba(19, 88, 97, 0.34), rgba(37, 99, 235, 0)); }
  .home-ecoBridge__label { writing-mode: horizontal-tb; }
  .home-final__box { grid-template-columns: 1fr; }
  .home-final__action { min-width: 0; justify-items: stretch; }
}

@media (max-width: 560px) {

  .home-seoFoundation { padding: 22px 0 28px; }
  .home-seoFoundation__box { padding: 18px; border-radius: 24px; }
  .home-seoFoundation__aside { grid-template-columns: 1fr; padding: 12px; border-radius: 20px; }
  .home-hero { padding-top: 34px; }
  .home-hero__title { font-size: 28px; }
  .home-hero__trustcards{ flex-wrap: wrap; }
  .home-proof__inner { flex-direction: column; align-items: flex-start; }
  .home-softIntro { text-align: right; }
  .home-ecoCard { padding: 15px; }
  .home-ecoCard__top { gap: 10px; }
  .home-ecoCard__icon { width: 42px; height: 42px; flex-basis: 42px; }
  .home-categoryHub__shell { padding: 16px; border-radius: 22px; }
  .home-categoryPath { align-items: flex-start; min-height: auto; }
  .home-catGrid { grid-template-columns: 1fr; }
  .home-cat { min-height: auto; }
  .home-categoryHub__footer .home-link { margin-right: 0; width: 100%; justify-content: center; }
}

/* ================================
   HERO (Phase – photo background slideshow)
   Scope: home page only (.home-ultra)
   ================================ */

.home-ultra .home-hero{
  position: relative;
  overflow: hidden;
  padding: 38px 0 26px;
}

/* Neutralize older generic hero background overlays (they were washing out the photo) */
.home-ultra .home-hero__bg::before,
.home-ultra .home-hero__bg::after{
  content: none !important;
  display: none !important;
}

/* Full-width photo background with soft wash (two slides cross-fade) */
.home-ultra .home-hero__bg{
  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* IMPORTANT (User report): the approved mock has a compact photo collage on the LEFT,
     NOT a full-width background photo. So we clip the photo background to a fixed
     visual width that stays "جمع‌وجور" on large screens. */
  width: clamp(520px, 52vw, 780px);
  right: auto;
  z-index:0;
  overflow: hidden;
  border-radius: 28px;
  /* HARD EDGE FIX: fully dissolve the photo block into the graphic side (no visible right frame) */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 68%, rgba(0,0,0,.78) 76%, rgba(0,0,0,.28) 86%, transparent 98%);
          mask-image: linear-gradient(90deg, #000 0%, #000 68%, rgba(0,0,0,.78) 76%, rgba(0,0,0,.28) 86%, transparent 98%);

}

/* Right-side multi-layer haze (green dominant + very mild purple) must span the FULL hero,
   even though the photo is clipped to the left. This creates the clean blend into white
   behind the copy – matching the approved reference. */
.home-ultra .home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;
  pointer-events:none;
  background:
    radial-gradient(980px 560px at 18% 78%, rgba(16, 185, 129, .14) 0%, rgba(16, 185, 129, 0) 62%),
    radial-gradient(900px 520px at 86% 20%, rgba(124, 58, 237, .10) 0%, rgba(124, 58, 237, 0) 64%),
    radial-gradient(820px 500px at 76% 64%, rgba(59, 130, 246, .06) 0%, rgba(59, 130, 246, 0) 66%),
    /* blend into white on the copy side (NO "big white card") */
    linear-gradient(90deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.06) 48%,
      rgba(255,255,255,0.22) 66%,
      rgba(255,255,255,0.44) 82%,
      rgba(255,255,255,0.60) 100%
    );
  /* Keep haze mainly on the right side while still feathering the photo edge */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 34%, rgba(0,0,0,.30) 48%, #000 64%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 34%, rgba(0,0,0,.30) 48%, #000 64%, #000 100%);
}

/*
  IMPORTANT:
  The hero "haze" is now driven by the explicit `.home-hero__gfx` layer (Version B).
  Disable the legacy pseudo haze to prevent double-tint and to keep the photo edge clean.
*/
.home-ultra .home-hero::before{ content: none !important; }
.home-ultra .home-heroBg__slide{
  position:absolute;
  /* IMPORTANT (Root cause D): prevent the photo from looking "wide/zoomed" */
  inset: 0;
  /* Frame like the approved mock (avoid the "wide" look) */
  background-position: 18% center;
  background-size: cover;
  background-repeat: no-repeat;
  /* keep the photo sharp & alive (approved mock: NO gray wash) */
  filter: saturate(1.14) contrast(1.06);
  transform: none;
  opacity: 0;
  /* feather the photo into the right-side readable area (approved mock look) */
  /* IMPORTANT (Root cause E): mask only the RIGHT edge, keep most of the photo intact */
  /* Refined feather (no visible hard edge / frame on the right). */
  -webkit-mask-image: linear-gradient(90deg,
    #000 0%,
    #000 62%,
    rgba(0,0,0,.96) 70%,
    rgba(0,0,0,.68) 78%,
    rgba(0,0,0,.30) 88%,
    rgba(0,0,0,.10) 94%,
    transparent 100%
  );
          mask-image: linear-gradient(90deg,
    #000 0%,
    #000 62%,
    rgba(0,0,0,.96) 70%,
    rgba(0,0,0,.68) 78%,
    rgba(0,0,0,.30) 88%,
    rgba(0,0,0,.10) 94%,
    transparent 100%
  );
}
.home-ultra .home-heroBg__slide.is-1{
  background-image: url('../images/home/hero_slide_1.jpg');
  background-image: image-set(
    url('../images/home/hero_slide_1.webp') type('image/webp'),
    url('../images/home/hero_slide_1.jpg') type('image/jpeg')
  );
}

/* Single-image hero (approved for now): keep only slide #1 and prevent fade-out */
.home-ultra .home-heroBg__slide.is-1{ opacity: 1; animation: none !important; }

/* Wash that makes the right side readable + subtle brand tint */
/* The wash is now handled by .home-hero::before so it can cover the full hero.
   Keep this element as a no-op to preserve DOM (Demo/compat) without affecting visuals. */
.home-ultra .home-heroBg__wash{ display:none !important; }


/* Gentle noise to avoid a "flat" look */
.home-ultra .home-heroBg__noise{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
  background-size: 5px 5px;
  opacity: .05;
  mix-blend-mode: overlay;
}

.home-ultra .home-hero__inner{ position:relative; z-index:2; padding: 34px 0 34px; }
/* Trust row must stay above haze layers */
.home-ultra .home-hero__trustcards{ position:relative; z-index:2; }

/* On smaller screens the hero becomes single-column; the photo can become full width. */
@media (max-width: 980px){
  .home-ultra .home-hero__bg{
    width: 100%;
    border-radius: 22px;
  }
}

/* Kicker overlay (no box) – sits on the photo side like the approved mock */
.home-ultra .home-hero__kickerOverlay{
  position:absolute;
  /* Slightly more to the left + smaller like the approved mock */
  left: 12px;
  top: 22px;
  z-index: 3;
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  font-size: 14px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 18px 40px rgba(0,0,0,.24), 0 2px 8px rgba(0,0,0,.18);
}
.home-ultra .home-hero__kickerOverlay::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 26px rgba(0,0,0,.18);
}

/* Layout: photo left, copy right (matching the approved mock) */
.home-ultra .home-hero__grid{
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

.home-ultra .home-hero__copy{
  direction: rtl;
  text-align: right;
  max-width: 640px;
  margin-left: auto;
}
.home-ultra .home-hero__copy{ direction:rtl; text-align:right; }

/* ============================================================
   RIGHT EDGE INSET (RTL)
   The user needs the copy + CTA + trust cards to sit further away
   from the RIGHT edge of the hero. In RTL, this is padding-right.
   We do it on the blocks themselves to avoid container overrides.
   ============================================================ */
.home-ultra .home-hero__copy,
.home-ultra .home-hero__trustcards{
  box-sizing: border-box;
  padding-right: clamp(36px, 4vw, 88px) !important;
}

/* =====================================================================
   HERO SPACING (FINAL) — make vertical rhythm SaaS-standard
   The user reported elements looked "stuck together" and subtitle needed
   to sit a bit higher. We:
   - slightly reduce hero top padding (above)
   - turn the copy column into a controlled flex stack
   - remove scattered margins (override with !important)
   ===================================================================== */
.home-ultra .home-hero__copy{
  display: flex !important;
  flex-direction: column !important;
  /* IMPORTANT (Root cause B): one stable spacing system (no scattered margins) */
  gap: 18px !important;
  padding-top: 0 !important;
}

.home-ultra .home-hero__title,
.home-ultra .home-hero__subtitle,
.home-ultra .home-hero__cta,
.home-ultra .home-hero__micro{
  margin: 0 !important;
}

/* A touch more breathing room before CTAs (still controlled by flex gap) */
.home-ultra .home-hero__cta{ padding-top: 4px !important; }

/* Micro line: keep it naturally close via gap (avoid negative margins) */
.home-ultra .home-hero__micro{ opacity: .92; }

/* Visual column should NOT be a blank white card – let the hero photo show through */
.home-ultra .home-hero__visual{
  min-height: 520px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Kicker – NO box (as requested) */
.home-ultra .home-hero__kicker{
  display:inline-block;
  font-weight: 800;
  font-size: 18px;
  color: rgba(2, 44, 46, .86);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.home-ultra .home-hero__kicker::before{ display:none; }

.home-ultra .home-hero__title{
  margin-top: 14px;
  font-size: 44px;
  line-height: 1.25;
  letter-spacing: -0.2px;
}

.home-ultra .home-hero__subtitle{
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(17, 24, 39, .76);
}

/* CTA: primary solid (no gradient) */
.home-ultra .home-btn--primary{
  background: #16A34A;
  border-color: rgba(0,0,0,0);
  box-shadow: 0 16px 34px rgba(22,163,74,.26);
}
.home-ultra .home-btn--primary:hover{ background:#128A3F; }

/* Trust cards row – compact & premium */
.home-ultra .home-hero__trustcards{
  margin-top: 26px;
  display:flex;
  flex-wrap: nowrap;
  gap: 14px;
}

.home-ultra .home-trustCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 18px 40px rgba(2, 6, 23, .08);
  min-width: 210px;
}

.home-ultra .home-trustCard__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.home-ultra .home-trustCard__meta{ display:flex; flex-direction:column; gap: 3px; }
.home-ultra .home-trustCard__text{ font-weight: 800; font-size: 14px; color: rgba(2, 44, 46, .92); }
.home-ultra .home-trustCard__sub{ font-size: 12px; color: rgba(17, 24, 39, .62); white-space: nowrap; }

/* Keep it responsive */
@media (max-width: 1200px){
  .home-ultra .home-hero__grid{ grid-template-columns: 1fr; }
  .home-ultra .home-hero__visual{ display:none; }
  .home-ultra .home-hero__trustcards{ flex-wrap: wrap; }
  .home-ultra .home-trustCard{ min-width: 240px; }
}


/* ==== v88: Hero title/subtitle hierarchy (spacing + color) ==== */
.home-ultra .home-hero__title{
  color:#0F2B46 !important; /* Navy Deep SaaS */
  margin:0 !important;
  margin-bottom: 18px !important; /* subtle separation from subtitle */
}
.home-ultra .home-hero__subtitle{
  color:#4F6B85 !important; /* Soft Steel Blue */
  margin:0 !important;
}
@media (max-width: 560px){
}


/* Hero typography hierarchy (scoped) */
.home-ultra .home-hero__title, .home-ultra .home-hero__title *{color:#0F2B46 !important;}
.home-ultra .home-hero__subtitle, .home-ultra .home-hero__subtitle *{color:#4F6B85 !important;}

/* =====================================================
   Trust Operating System — Homepage scoped section
   Scope: .home-ultra .home-trust-os only
   Performance note: lightweight gradients, no blur/filter/backdrop-filter
===================================================== */
.home-ultra .home-trust-os{
  position: relative;
  overflow: hidden;
  padding: 56px 0;
  background:
    linear-gradient(180deg, #fbfdfc 0%, #f3fbf8 48%, #f8fbff 100%);
}

.home-ultra .home-trust-os::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(28, 174, 135, 0.12), transparent 28%),
    radial-gradient(circle at 84% 24%, rgba(96, 165, 250, 0.11), transparent 30%),
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 48%, transparent 100%);
  opacity: .9;
}

.home-ultra .home-trust-os .container{
  position: relative;
  z-index: 1;
}

.home-ultra .home-trust-os__shell{
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 24px;
  align-items: stretch;
  padding: 24px;
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(244, 251, 248, 0.94));
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.07);
}

.home-ultra .home-trust-os__content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: 10px 6px 10px 12px;
}

.home-ultra .home-trust-os__eyebrow{
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(20, 184, 166, 0.20);
  background: #ecfdf7;
  color: #0f766e;
  font-size: 12.5px;
  font-weight: 900;
}

.home-ultra .home-trust-os__eyebrow::before{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.12);
}

.home-ultra .home-trust-os__title{
  margin-top: 16px;
  max-width: 13ch;
  font-size: clamp(25px, 3.2vw, 38px);
  line-height: 1.35;
  color: #0f2b46;
}

.home-ultra .home-trust-os__lead{
  max-width: 62ch;
  margin-top: 14px;
  color: rgba(30, 41, 59, 0.70);
}

.home-ultra .home-trust-os__links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.home-ultra .home-trust-os__links a{
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 13px;
  border-radius: 13px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  background: rgba(255,255,255,0.92);
  color: #334155;
  font-size: 13px;
  font-weight: 900;
  font-family: inherit !important;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.home-ultra .home-trust-os__links a:hover{
  transform: translateY(-1px);
  border-color: rgba(15, 118, 110, 0.28);
  background: #f0fdfa;
  color: #0f766e;
}

.home-ultra .home-trust-os__panel{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(14, 116, 144, 0.12);
  background: linear-gradient(135deg, #ffffff 0%, #f7fffb 56%, #f3f8ff 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 14px 34px rgba(15, 23, 42, 0.055);
  padding: 18px;
}

.home-ultra .home-trust-os__panel::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #10b981, #38bdf8, #a78bfa);
  pointer-events: none;
}

.home-ultra .home-trust-os__status{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: 100%;
  margin-bottom: 14px;
  padding: 9px 12px;
  border-radius: 999px;
  background: #effef8;
  color: #0f766e;
  font-size: 12.5px;
  font-weight: 950;
}

.home-ultra .home-trust-os__pulse{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 0 6px rgba(16, 185, 129, .11);
}

.home-ultra .home-trust-os__grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.home-ultra .home-trust-os__item{
  display: flex;
  gap: 12px;
  min-height: 132px;
  padding: 15px;
  border-radius: 18px;
  border: 1px solid rgba(15, 118, 110, 0.10);
  background: rgba(255,255,255,0.94);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.home-ultra .home-trust-os__item:hover{
  border-color: rgba(15, 118, 110, 0.22);
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
}

.home-ultra .home-trust-os__icon{
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  border: 1px solid rgba(16, 185, 129, 0.20);
  background: #ecfdf5;
  color: #059669;
}

.home-ultra .home-trust-os__item:nth-child(2) .home-trust-os__icon{
  border-color: rgba(56, 189, 248, 0.24);
  background: #eef9ff;
  color: #0284c7;
}

.home-ultra .home-trust-os__item:nth-child(3) .home-trust-os__icon{
  border-color: rgba(167, 139, 250, 0.25);
  background: #f5f3ff;
  color: #7c3aed;
}

.home-ultra .home-trust-os__item:nth-child(4) .home-trust-os__icon{
  border-color: rgba(251, 146, 60, 0.25);
  background: #fff7ed;
  color: #ea580c;
}

.home-ultra .home-trust-os__item h3{
  margin: 0 0 7px;
  color: #102a43;
  font-size: 14.5px;
  font-weight: 950;
  line-height: 1.55;
}

.home-ultra .home-trust-os__item p{
  margin: 0;
  color: rgba(51, 65, 85, 0.66);
  font-size: 13px;
  line-height: 1.9;
}

@media (max-width: 900px){
  .home-ultra .home-trust-os__shell{
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .home-ultra .home-trust-os__title{
    max-width: none;
  }
}

@media (max-width: 560px){
  .home-ultra .home-trust-os{
    padding: 42px 0;
  }
  .home-ultra .home-trust-os__grid{
    grid-template-columns: 1fr;
  }
  .home-ultra .home-trust-os__item{
    min-height: auto;
  }
}


/* ====== Category Hub no-gradient illustrated folder background — v139 REAL ======
   Scope: ONLY .home-section.home-categoryHub. No gradients. Uses one lightweight SVG image + solid colors. */
.home-section.home-categoryHub {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: clamp(46px, 6.5vw, 82px) !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: #cfeedd !important;
}

.home-section.home-categoryHub::before,
.home-section.home-categoryHub::after {
  content: none !important;
  display: none !important;
}

.home-section.home-categoryHub > .container {
  position: relative !important;
  z-index: 1 !important;
}

.home-section.home-categoryHub .home-categoryHub__shell {
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: rgba(19, 88, 97, 0.16) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.055) !important;
}

.home-section.home-categoryHub .home-categoryHub__shell::before,
.home-section.home-categoryHub .home-categoryHub__shell::after {
  opacity: 0 !important;
  background: none !important;
}

@media (max-width: 768px) {
  .home-section.home-categoryHub {
    padding-top: 0 !important;
    padding-bottom: 42px !important;
  }
  .home-section.home-categoryHub::before {
    inset-inline: 0 !important;
    background-size: 1040px auto !important;
    background-position: center top !important;
    opacity: .78 !important;
  }
  .home-section.home-categoryHub::after {
    background: rgba(255, 255, 255, 0.42) !important;
  }
}



/* =====================================================
   v202 — Short freelance illustration banner before workflow
   Scope: Homepage only; same container width as home-motion-studio.
===================================================== */
.home-ultra .home-motion-prelude{
  position: relative;
  padding: 18px 0 0;
  isolation: isolate;
}
.home-ultra .home-motion-prelude__frame{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 114px;
  min-height: 108px;
  margin: 0;
  border-radius: 28px;
  border: 1px solid rgba(19, 88, 97, .12);
  background: #f7fffb;
  box-shadow: 0 18px 54px rgba(15, 23, 42, .075);
}
.home-ultra .home-motion-prelude__frame::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), inset 0 -18px 34px rgba(255,255,255,.12);
}
.home-ultra .home-motion-prelude__frame img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  transform: scale(1.01);
  font-family: inherit !important;
}
@media (max-width: 991px){
  .home-ultra .home-motion-prelude{ padding-top: 14px; }
  .home-ultra .home-motion-prelude__frame{ height: 104px; min-height: 100px; border-radius: 24px; }
}
@media (max-width: 640px){
  .home-ultra .home-motion-prelude{ padding-top: 10px; }
  .home-ultra .home-motion-prelude__frame{ height: 92px; min-height: 92px; border-radius: 20px; }
  .home-ultra .home-motion-prelude__frame img{ object-position: center center; }
}

/* =====================================================
   Phase 2 REAL — Visible premium motion & graphics for Home
   Scope: Homepage only. Performance-safe, no backend changes.
===================================================== */
.home-ultra .home-motion-studio{
  position: relative;
  padding: 34px 0 42px;
  isolation: isolate;
}
.home-ultra .home-motion-studio__shell{
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: 28px;
  align-items: center;
  border: 1px solid rgba(19, 88, 97, .14);
  border-radius: 34px;
  padding: 32px;
  background:
    radial-gradient(circle at 78% 18%, rgba(137, 92, 246, .10), transparent 36%),
    radial-gradient(circle at 16% 88%, rgba(20, 184, 166, .10), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.985), rgba(246, 255, 252, .94));
  box-shadow: 0 24px 72px rgba(15, 23, 42, .07);
}
.home-ultra .home-motion-studio__shell::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.45;
  background-image:
    linear-gradient(rgba(19,88,97,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19,88,97,.07) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 70% 50%, #000 0%, transparent 68%);
}
.home-ultra .home-motion-studio__copy{ position:relative; z-index:2; }
.home-ultra .home-motion-studio__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding:8px 13px;
  border-radius:999px;
  color:#135861;
  background:rgba(19,88,97,.09);
  border:1px solid rgba(19,88,97,.12);
  font-weight:800;
  font-size:13px;
}
.home-ultra .home-motion-studio__eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#16a34a;
  box-shadow:0 0 0 6px rgba(22,163,74,.12);
}

.home-ultra .home-motion-studio__visual{
  position:relative;
  z-index:2;
  min-height: 462px;
  border-radius: 34px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.96) 0 13%, rgba(236,253,245,.70) 14% 31%, transparent 56%),
    linear-gradient(145deg, #f8fffc 0%, #eefaf5 48%, #f8fbff 100%);
  border:1px solid rgba(19,88,97,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 28px 78px rgba(15,23,42,.09);
}
.home-ultra .home-motion-studio__visual::before,
.home-ultra .home-motion-studio__visual::after{
  content:"";
  position:absolute;
  border-radius:999px;
  pointer-events:none;
  z-index:0;
  filter:blur(2px);
}
.home-ultra .home-motion-studio__visual::before{
  width:260px;
  height:260px;
  right:-112px;
  top:-92px;
  background:rgba(19,88,97,.10);
}
.home-ultra .home-motion-studio__visual::after{
  width:230px;
  height:230px;
  left:-88px;
  bottom:-92px;
  background:rgba(20,184,166,.10);
}
.home-ultra .home-motion-studio__mesh{
  position:absolute;
  inset:18px;
  border-radius:30px;
  z-index:1;
  opacity:.42;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(19,88,97,.22) 1.15px, transparent 0),
    linear-gradient(rgba(19,88,97,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19,88,97,.055) 1px, transparent 1px);
  background-size: 26px 26px, 42px 42px, 42px 42px;
  mask-image: radial-gradient(circle at 50% 50%, #000 0 54%, transparent 76%);
  animation: homeMotionMeshDrift 14s ease-in-out infinite alternate;
}
.home-ultra .home-motion-studio__route{
  position:absolute;
  z-index:2;
  pointer-events:none;
  border-radius:999px;
  border:1.5px dashed rgba(19,88,97,.18);
  box-shadow:0 0 0 1px rgba(255,255,255,.58) inset;
}
.home-ultra .home-motion-studio__route--main{
  inset:72px 56px 74px 56px;
  transform:rotate(-7deg);
  animation: homeMotionRouteBreath 7.5s ease-in-out infinite alternate;
}
.home-ultra .home-motion-studio__route--soft{
  inset:122px 134px 118px 134px;
  border-color:rgba(20,184,166,.22);
  border-style:solid;
  transform:rotate(10deg);
  opacity:.65;
}
.home-ultra .home-motion-stage{
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  width:184px;
  min-height:184px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  text-align:center;
}
.home-ultra .home-motion-stage__badge{
  position:absolute;
  top:-48px;
  left:50%;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  padding:8px 12px;
  border-radius:999px;
  color:#135861;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(19,88,97,.13);
  box-shadow:0 14px 34px rgba(15,23,42,.08);
  font-size:12px;
  font-weight:900;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.home-ultra .home-motion-stage__center{
  position:relative;
  width:176px;
  height:176px;
  border-radius:42px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:18px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(19,88,97,.14);
  box-shadow:0 28px 76px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  animation: homeMotionCenterFloat 6s ease-in-out infinite alternate;
}
.home-ultra .home-motion-stage__center i{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:20px;
  color:#fff;
  background:linear-gradient(135deg, #135861, #10b981);
  box-shadow:0 18px 38px rgba(19,88,97,.22);
  font-size:20px;
}
.home-ultra .home-motion-stage__center strong{font-size:17px;line-height:1.7;color:#0f172a;font-weight:950;}
.home-ultra .home-motion-stage__center small{max-width:130px;font-size:11.5px;line-height:1.75;color:#64748b;}
.home-ultra .home-motion-stage__pulse{
  position:absolute;
  inset:-22px;
  border-radius:52px;
  z-index:-1;
  background:linear-gradient(135deg, rgba(19,88,97,.16), rgba(16,185,129,.14), rgba(245,158,11,.08));
  filter:blur(18px);
  opacity:.82;
  animation: homeMotionPulse 3.8s ease-in-out infinite alternate;
}
.home-ultra .home-flow-card{
  position:absolute;
  z-index:4;
  width:178px;
  min-height:118px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:14px 15px 13px;
  border-radius:24px;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(19,88,97,.13);
  box-shadow:0 20px 54px rgba(15,23,42,.10);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  animation: homeFlowCardFloat 6.2s ease-in-out infinite alternate;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.home-ultra .home-flow-card::after{
  content:"";
  position:absolute;
  inset:auto 16px 12px 16px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(19,88,97,.78), rgba(16,185,129,.62), rgba(19,88,97,.12));
  opacity:.72;
}
.home-ultra .home-flow-card__num{
  position:absolute;
  left:13px;
  top:12px;
  font-size:13px;
  line-height:1;
  font-weight:950;
  color:rgba(19,88,97,.42);
  letter-spacing:-.02em;
}
.home-ultra .home-flow-card__icon{
  width:42px;
  height:42px;
  border-radius:17px;
  display:grid;
  place-items:center;
  color:#135861;
  background:rgba(19,88,97,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
  font-size:17px;
}
.home-ultra .home-flow-card strong{font-size:13.5px;color:#0f172a;line-height:1.65;font-weight:950;}
.home-ultra .home-flow-card small{max-width:145px;font-size:11.2px;color:#64748b;line-height:1.65;}
.home-ultra .home-flow-card--brief{right:28px;top:34px;animation-delay:0s;}
.home-ultra .home-flow-card--proposal{left:28px;top:66px;animation-delay:.55s;}
.home-ultra .home-flow-card--escrow{right:42px;bottom:42px;animation-delay:1.05s;}
.home-ultra .home-flow-card--delivery{left:46px;bottom:34px;animation-delay:1.55s;}
.home-ultra .home-flow-card--proposal .home-flow-card__icon{color:#6d28d9;background:rgba(139,92,246,.10);}
.home-ultra .home-flow-card--escrow .home-flow-card__icon{color:#047857;background:rgba(16,185,129,.12);}
.home-ultra .home-flow-card--delivery .home-flow-card__icon{color:#b45309;background:rgba(245,158,11,.14);}
.home-ultra .home-flow-dot{
  position:absolute;
  z-index:7;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#10b981;
  box-shadow:0 0 0 7px rgba(16,185,129,.10), 0 0 26px rgba(16,185,129,.38);
  pointer-events:none;
}
.home-ultra .home-flow-dot--a{right:32%;top:31%;animation:homeFlowDotA 6.8s ease-in-out infinite;}
.home-ultra .home-flow-dot--b{left:32%;top:39%;background:#8b5cf6;box-shadow:0 0 0 7px rgba(139,92,246,.10),0 0 26px rgba(139,92,246,.32);animation:homeFlowDotB 7.2s ease-in-out infinite .7s;}
.home-ultra .home-flow-dot--c{left:44%;bottom:24%;background:#f59e0b;box-shadow:0 0 0 7px rgba(245,158,11,.11),0 0 26px rgba(245,158,11,.32);animation:homeFlowDotC 7.5s ease-in-out infinite 1.1s;}
.home-ultra .home-motion-studio__visual:hover .home-flow-card{transform:translateY(-5px);box-shadow:0 26px 66px rgba(15,23,42,.13);border-color:rgba(19,88,97,.19);}
.home-ultra .home-motion-studio__visual:hover .home-motion-stage__center{box-shadow:0 34px 86px rgba(15,23,42,.15), inset 0 1px 0 rgba(255,255,255,.92);}
@keyframes homeMotionMeshDrift{
  0%{transform:translate3d(0,0,0);opacity:.34;}
  100%{transform:translate3d(-10px,8px,0);opacity:.52;}
}
@keyframes homeMotionRouteBreath{
  0%{opacity:.38;transform:rotate(-7deg) scale(.985);}
  100%{opacity:.78;transform:rotate(-4deg) scale(1.015);}
}
@keyframes homeMotionCenterFloat{
  0%{transform:translate3d(0,0,0) rotate(-.35deg);}
  100%{transform:translate3d(0,-9px,0) rotate(.45deg);}
}
@keyframes homeMotionPulse{
  0%{opacity:.56;transform:scale(.96);}
  100%{opacity:.92;transform:scale(1.04);}
}
@keyframes homeFlowCardFloat{
  0%{transform:translate3d(0,0,0) rotate(-.25deg);}
  100%{transform:translate3d(0,-10px,0) rotate(.35deg);}
}
@keyframes homeFlowDotA{
  0%,100%{transform:translate3d(0,0,0) scale(.72);opacity:.28;}
  40%{transform:translate3d(-58px,42px,0) scale(1);opacity:1;}
  76%{transform:translate3d(-118px,94px,0) scale(.82);opacity:.52;}
}
@keyframes homeFlowDotB{
  0%,100%{transform:translate3d(0,0,0) scale(.72);opacity:.28;}
  45%{transform:translate3d(68px,34px,0) scale(1);opacity:1;}
  78%{transform:translate3d(124px,88px,0) scale(.82);opacity:.52;}
}
@keyframes homeFlowDotC{
  0%,100%{transform:translate3d(0,0,0) scale(.72);opacity:.24;}
  46%{transform:translate3d(62px,-52px,0) scale(1);opacity:1;}
  82%{transform:translate3d(112px,-108px,0) scale(.82);opacity:.50;}
}
@media (max-width: 780px){
  .home-ultra .home-motion-studio__visual{min-height:640px;border-radius:28px;}
  .home-ultra .home-motion-stage{top:47%;}
  .home-ultra .home-motion-stage__badge{top:-44px;}
  .home-ultra .home-flow-card{width:calc(50% - 34px);min-height:112px;}
  .home-ultra .home-flow-card--brief{right:18px;top:24px;}
  .home-ultra .home-flow-card--proposal{left:18px;top:92px;}
  .home-ultra .home-flow-card--escrow{right:18px;bottom:92px;}
  .home-ultra .home-flow-card--delivery{left:18px;bottom:24px;}
  .home-ultra .home-motion-studio__route--main{inset:94px 28px;}
  .home-ultra .home-motion-studio__route--soft{display:none;}
}
.home-ultra .home-hero__gfx::after{
  content:"";
  position:absolute;
  inset: 11% 7% 8% 38%;
  pointer-events:none;
  opacity:.28;
  background:
    linear-gradient(120deg, transparent 0 42%, rgba(19,88,97,.42) 42% 43%, transparent 44% 100%),
    radial-gradient(circle at 28% 32%, rgba(19,88,97,.50) 0 4px, transparent 5px),
    radial-gradient(circle at 58% 20%, rgba(139,92,246,.42) 0 4px, transparent 5px),
    radial-gradient(circle at 75% 58%, rgba(20,184,166,.45) 0 4px, transparent 5px),
    radial-gradient(circle at 45% 78%, rgba(245,158,11,.36) 0 4px, transparent 5px);
  filter: blur(.05px);
  animation: homeNeuralBreath 7s ease-in-out infinite alternate;
}
.home-ultra .home-cat:hover .home-cat__icon,
.home-ultra .home-ecoCard:hover .home-ecoCard__icon,
.home-ultra .home-trust-os__item:hover .home-trust-os__icon{
  transform: translateY(-2px) scale(1.04);
  box-shadow:0 16px 34px rgba(19,88,97,.14);
}
.home-ultra .home-cat__icon,
.home-ultra .home-ecoCard__icon,
.home-ultra .home-trust-os__icon{
  transition: transform .25s ease, box-shadow .25s ease;
}
@keyframes homeMotionAurora{
  0%{opacity:.72;transform:translate3d(0,0,0) scale(.98);}
  100%{opacity:.95;transform:translate3d(-10px,8px,0) scale(1.03);}
}
@keyframes homeMotionOrbit{
  0%{transform:rotate(-8deg) scale(.99);opacity:.48;}
  100%{transform:rotate(352deg) scale(1.01);opacity:.82;}
}
@keyframes homeMotionOrbitReverse{
  0%{transform:rotate(12deg) scale(1);opacity:.40;}
  100%{transform:rotate(-348deg) scale(1.02);opacity:.72;}
}
@keyframes homeMotionCoreFloat{
  0%{transform:translate(-50%,-50%) translateY(0) rotate(-.4deg);}
  100%{transform:translate(-50%,-50%) translateY(-10px) rotate(.5deg);}
}
@keyframes homeFlowStepFloat{
  0%{transform:translate3d(0,0,0) rotate(-.35deg);}
  100%{transform:translate3d(0,-12px,0) rotate(.45deg);}
}
@keyframes homeParticleOne{
  0%,100%{transform:translate3d(0,0,0) scale(.75);opacity:.35;}
  38%{transform:translate3d(-60px,44px,0) scale(1);opacity:1;}
  72%{transform:translate3d(-118px,104px,0) scale(.82);opacity:.55;}
}
@keyframes homeParticleTwo{
  0%,100%{transform:translate3d(0,0,0) scale(.75);opacity:.32;}
  44%{transform:translate3d(70px,32px,0) scale(1);opacity:1;}
  78%{transform:translate3d(128px,94px,0) scale(.82);opacity:.55;}
}
@keyframes homeParticleThree{
  0%,100%{transform:translate3d(0,0,0) scale(.72);opacity:.28;}
  45%{transform:translate3d(66px,-54px,0) scale(1);opacity:1;}
  80%{transform:translate3d(118px,-116px,0) scale(.84);opacity:.55;}
}
@keyframes homeNeuralBreath{
  0%{ opacity:.18; transform: translate3d(0,0,0) scale(.98); }
  100%{ opacity:.36; transform: translate3d(-8px,-6px,0) scale(1.02); }
}
@media (max-width: 980px){
  .home-ultra .home-motion-studio__shell{ grid-template-columns:1fr; padding:24px; }
  .home-ultra .home-motion-studio__visual{ min-height: 440px; }
}
@media (max-width: 620px){
  .home-ultra .home-motion-studio{ padding:24px 0 30px; }
  .home-ultra .home-motion-studio__shell{ border-radius:26px; padding:18px; }
  .home-ultra .home-motion-studio__visual{ min-height: 650px; border-radius:28px; }
  .home-ultra .home-motion-stage{ top:48%; }
  .home-ultra .home-motion-stage__center{ width:150px; height:150px; border-radius:36px; }
  .home-ultra .home-motion-stage__center i{ width:46px; height:46px; border-radius:17px; }
  .home-ultra .home-motion-stage__badge{ font-size:11px; padding:7px 10px; }
  .home-ultra .home-flow-card{ width:calc(50% - 28px); min-height:116px; padding:13px 12px; border-radius:22px; }
  .home-ultra .home-flow-card--brief{ right:14px; top:22px; }
  .home-ultra .home-flow-card--proposal{ left:14px; top:108px; }
  .home-ultra .home-flow-card--escrow{ right:14px; bottom:106px; }
  .home-ultra .home-flow-card--delivery{ left:14px; bottom:22px; }
  .home-ultra .home-flow-card small{ font-size:10.6px; }
  .home-ultra .home-motion-studio__route--main{ inset:120px 24px; }
}
@media (prefers-reduced-motion: reduce){
  .home-ultra .home-flow-card,
  .home-ultra .home-motion-stage__center,
  .home-ultra .home-motion-stage__pulse,
  .home-ultra .home-motion-studio__mesh,
  .home-ultra .home-motion-studio__route,
  .home-ultra .home-flow-dot,
  .home-ultra .home-hero__gfx::after{
    animation:none !important;
  }
}


/* v152 — Home Motion Studio: replace moving dots with premium workflow ribbon */
.home-ultra .home-motion-studio__visual{
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0 15%, rgba(237,252,246,.82) 16% 38%, rgba(248,251,255,.88) 62%, rgba(255,255,255,.96) 100%),
    linear-gradient(145deg, #fbfffd 0%, #eefaf5 52%, #f9fbff 100%);
}
.home-ultra .home-motion-studio__mesh{
  opacity:.20;
  background-image:
    linear-gradient(rgba(19,88,97,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19,88,97,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  animation: homeRibbonGridBreath 16s ease-in-out infinite alternate;
}
.home-ultra .home-motion-studio__route{
  display:none;
}
.home-ultra .home-flow-dot{
  display:none !important;
}
.home-ultra .home-workflow-ribbon{
  position:absolute;
  z-index:3;
  inset:42px 42px;
  border-radius:34px;
  pointer-events:none;
}
.home-ultra .home-workflow-ribbon__rail{
  position:absolute;
  inset:50px 42px;
  border-radius:999px;
  border:1px solid rgba(19,88,97,.16);
  background:
    linear-gradient(90deg, transparent, rgba(19,88,97,.08), transparent),
    rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 16px 44px rgba(15,23,42,.055);
  transform:rotate(-6deg);
}
.home-ultra .home-workflow-ribbon__rail::before,
.home-ultra .home-workflow-ribbon__rail::after{
  content:"";
  position:absolute;
  inset:18px 24px;
  border-radius:999px;
  border:1px solid rgba(16,185,129,.18);
}
.home-ultra .home-workflow-ribbon__rail::after{
  inset:42px 74px;
  border-color:rgba(139,92,246,.11);
}
.home-ultra .home-workflow-ribbon__glow{
  position:absolute;
  top:50%;
  right:12%;
  width:118px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(16,185,129,.86), rgba(255,255,255,.98), transparent);
  box-shadow:0 0 22px rgba(16,185,129,.34);
  transform:translateY(-50%) rotate(-6deg);
  animation: homeRibbonLight 5.8s cubic-bezier(.55,.08,.25,.99) infinite;
}
.home-ultra .home-workflow-ribbon__mark{
  position:absolute;
  width:36px;
  height:36px;
  border-radius:15px;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:950;
  color:#135861;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(19,88,97,.15);
  box-shadow:0 14px 34px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  animation: homeRibbonMarkFloat 6.4s ease-in-out infinite alternate;
}
.home-ultra .home-workflow-ribbon__mark::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:19px;
  border:1px solid rgba(19,88,97,.06);
}
.home-ultra .home-workflow-ribbon__mark--brief{right:21%;top:18%;animation-delay:0s;}
.home-ultra .home-workflow-ribbon__mark--proposal{left:24%;top:26%;color:#6d28d9;animation-delay:.45s;}
.home-ultra .home-workflow-ribbon__mark--escrow{right:28%;bottom:22%;color:#047857;animation-delay:.9s;}
.home-ultra .home-workflow-ribbon__mark--delivery{left:28%;bottom:17%;color:#b45309;animation-delay:1.35s;}
.home-ultra .home-flow-card{
  animation: homeRibbonCardFloat 7.2s ease-in-out infinite alternate;
}
.home-ultra .home-flow-card::before{
  content:"";
  position:absolute;
  width:28px;
  height:1px;
  top:50%;
  background:linear-gradient(90deg, rgba(19,88,97,.18), transparent);
}
.home-ultra .home-flow-card--brief::before,
.home-ultra .home-flow-card--escrow::before{left:-28px;}
.home-ultra .home-flow-card--proposal::before,
.home-ultra .home-flow-card--delivery::before{right:-28px;transform:rotate(180deg);}
.home-ultra .home-flow-card::after{
  height:2px;
  opacity:.54;
  background:linear-gradient(90deg, rgba(19,88,97,.58), rgba(16,185,129,.42), transparent);
}
.home-ultra .home-motion-stage__pulse{
  background:linear-gradient(135deg, rgba(19,88,97,.12), rgba(16,185,129,.11), rgba(139,92,246,.06));
  animation: homeRibbonCoreGlow 4.8s ease-in-out infinite alternate;
}
@keyframes homeRibbonLight{
  0%{right:12%;opacity:0;filter:blur(.2px);}
  12%{opacity:.82;}
  50%{opacity:.98;}
  88%{opacity:.82;}
  100%{right:72%;opacity:0;filter:blur(.6px);}
}
@keyframes homeRibbonMarkFloat{
  0%{transform:translate3d(0,0,0) scale(.98);opacity:.86;}
  100%{transform:translate3d(0,-6px,0) scale(1);opacity:1;}
}
@keyframes homeRibbonCardFloat{
  0%{transform:translate3d(0,0,0) rotate(-.18deg);}
  100%{transform:translate3d(0,-7px,0) rotate(.22deg);}
}
@keyframes homeRibbonCoreGlow{
  0%{opacity:.48;transform:scale(.96);}
  100%{opacity:.76;transform:scale(1.025);}
}
@keyframes homeRibbonGridBreath{
  0%{transform:translate3d(0,0,0);opacity:.16;}
  100%{transform:translate3d(-8px,6px,0);opacity:.26;}
}
@media (max-width:780px){
  .home-ultra .home-workflow-ribbon{inset:26px 20px;}
  .home-ultra .home-workflow-ribbon__rail{inset:118px 18px;transform:rotate(-4deg);}
  .home-ultra .home-workflow-ribbon__glow{top:49%;animation-duration:6.4s;}
  .home-ultra .home-workflow-ribbon__mark--brief{right:18%;top:12%;}
  .home-ultra .home-workflow-ribbon__mark--proposal{left:18%;top:24%;}
  .home-ultra .home-workflow-ribbon__mark--escrow{right:20%;bottom:24%;}
  .home-ultra .home-workflow-ribbon__mark--delivery{left:20%;bottom:11%;}
}
@media (max-width:620px){
  .home-ultra .home-workflow-ribbon{inset:20px 14px;}
  .home-ultra .home-workflow-ribbon__rail{inset:158px 12px;}
  .home-ultra .home-workflow-ribbon__mark{width:32px;height:32px;border-radius:13px;font-size:11px;}
}
@media (prefers-reduced-motion: reduce){
  .home-ultra .home-workflow-ribbon__glow,
  .home-ultra .home-workflow-ribbon__mark,
  .home-ultra .home-flow-card,
  .home-ultra .home-motion-stage__pulse,
  .home-ultra .home-motion-studio__mesh{
    animation:none !important;
  }
}


/* v153 — Glass Orbit Workflow redesign for home-motion-studio__visual
   Scope: Home motion visual only. Removes step numbers and replaces moving dots/ribbon
   with a lightweight animated collaboration flow. */
.home-ultra .home-motion-studio__visual{
  min-height: 520px;
  padding: 0;
  background:
    radial-gradient(circle at 52% 44%, rgba(255,255,255,.97) 0 12%, rgba(236,253,245,.66) 13% 34%, transparent 58%),
    radial-gradient(circle at 14% 18%, rgba(109,93,252,.13), transparent 34%),
    radial-gradient(circle at 86% 84%, rgba(16,185,129,.14), transparent 38%),
    linear-gradient(145deg, #fbfffd 0%, #f1fbf6 46%, #f8fbff 100%);
  border:1px solid rgba(19,88,97,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 30px 82px rgba(15,23,42,.10);
}
.home-ultra .home-motion-studio__visual::before{
  width: 330px;
  height: 330px;
  right: -150px;
  top: -130px;
  background: radial-gradient(circle, rgba(19,88,97,.13), transparent 68%);
  filter: blur(1px);
}
.home-ultra .home-motion-studio__visual::after{
  width: 300px;
  height: 300px;
  left: -120px;
  bottom: -118px;
  background: radial-gradient(circle, rgba(109,93,252,.12), transparent 66%);
  filter: blur(1px);
}
.home-ultra .home-motion-studio__mesh{
  inset: 18px;
  border-radius: 30px;
  opacity: .20;
  background-image:
    linear-gradient(rgba(19,88,97,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19,88,97,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 50%, #000 0 58%, transparent 78%);
  animation: homeOrbitGrid 18s ease-in-out infinite alternate;
}
.home-ultra .home-motion-studio__route,
.home-ultra .home-workflow-ribbon,
.home-ultra .home-flow-dot,
.home-ultra .home-flow-card,
.home-ultra .home-motion-stage{
  display:none !important;
}
.home-ultra .home-orbit-workflow{
  position:absolute;
  inset: 18px;
  z-index: 4;
  border-radius: 30px;
  overflow:hidden;
  isolation:isolate;
}
.home-ultra .home-orbit-workflow__halo{
  position:absolute;
  pointer-events:none;
  z-index:1;
  border-radius:999px;
  opacity:.72;
}
.home-ultra .home-orbit-workflow__halo--primary{
  width: 290px;
  height: 290px;
  right: 26%;
  top: 16%;
  background: radial-gradient(circle, rgba(16,185,129,.14), transparent 67%);
  animation: homeOrbitHalo 7.4s ease-in-out infinite alternate;
}
.home-ultra .home-orbit-workflow__halo--soft{
  width: 230px;
  height: 230px;
  left: 12%;
  bottom: 10%;
  background: radial-gradient(circle, rgba(109,93,252,.12), transparent 68%);
  animation: homeOrbitHalo 8.8s ease-in-out infinite alternate-reverse;
}
.home-ultra .home-orbit-workflow__svg{
  position:absolute;
  inset: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  z-index:1;
  overflow:visible;
}
.home-ultra .home-orbit-workflow__path{
  fill:none;
  stroke:url(#homeOrbitPathGradient);
  stroke-width: 3.2;
  stroke-linecap:round;
  stroke-dasharray: 10 12;
  filter: drop-shadow(0 12px 20px rgba(19,88,97,.10));
  animation: homeOrbitPathMove 16s linear infinite;
}
.home-ultra .home-orbit-workflow__path--secondary{
  stroke-width:1.6;
  opacity:.42;
  stroke-dasharray: 8 16;
  animation-duration: 22s;
  animation-direction: reverse;
}
.home-ultra .home-orbit-workflow__light{
  fill:none;
  stroke:url(#homeOrbitLightGradient);
  stroke-width: 5;
  stroke-linecap:round;
  stroke-dasharray: 76 760;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 16px rgba(16,185,129,.34));
  animation: homeOrbitLight 5.6s cubic-bezier(.48,.02,.22,.98) infinite;
}
.home-ultra .home-orbit-workflow__brand{
  position:absolute;
  z-index:6;
  left:50%;
  top:50%;
  width: 178px;
  min-height: 178px;
  transform: translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-align:center;
  padding: 18px;
  border-radius: 46px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.80));
  border:1px solid rgba(19,88,97,.14);
  box-shadow:
    0 30px 78px rgba(15,23,42,.13),
    inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: homeOrbitBrandFloat 6.2s ease-in-out infinite alternate;
}
.home-ultra .home-orbit-workflow__brand-glow{
  position:absolute;
  inset:-22px;
  z-index:-1;
  border-radius:56px;
  background:conic-gradient(from 120deg, rgba(19,88,97,.18), rgba(16,185,129,.20), rgba(109,93,252,.12), rgba(245,158,11,.10), rgba(19,88,97,.18));
  filter:blur(22px);
  opacity:.58;
  animation: homeOrbitGlowTurn 9s linear infinite;
}
.home-ultra .home-orbit-workflow__brand i{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:21px;
  color:#fff;
  background:linear-gradient(135deg, #135861, #10b981);
  box-shadow: 0 18px 36px rgba(19,88,97,.24);
  font-size:20px;
}
.home-ultra .home-orbit-workflow__brand strong{
  font-size:17px;
  line-height:1.75;
  color:#0f172a;
  font-weight:950;
}
.home-ultra .home-orbit-workflow__brand small{
  max-width:132px;
  color:#64748b;
  font-size:11.3px;
  line-height:1.75;
}
.home-ultra .home-orbit-card{
  position:absolute;
  z-index:5;
  width: 188px;
  min-height: 128px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  padding: 16px 16px 15px;
  border-radius: 27px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
  border:1px solid rgba(19,88,97,.13);
  box-shadow:
    0 22px 58px rgba(15,23,42,.105),
    inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease;
  animation: homeOrbitCardFloat 7.4s ease-in-out infinite alternate;
}
.home-ultra .home-orbit-card::before{
  content:"";
  position:absolute;
  inset: -1px;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(135deg, rgba(19,88,97,.18), rgba(16,185,129,.10), rgba(109,93,252,.10));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.82;
}
.home-ultra .home-orbit-card::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:13px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(19,88,97,.56), rgba(16,185,129,.42), transparent);
  opacity:.46;
}
.home-ultra .home-orbit-card:hover{
  transform: translate3d(0,-8px,0);
  border-color: rgba(19,88,97,.22);
  box-shadow:
    0 30px 72px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.96);
}
.home-ultra .home-orbit-card__icon{
  width:44px;
  height:44px;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#135861;
  background:rgba(19,88,97,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
  font-size:17px;
}
.home-ultra .home-orbit-card strong{
  color:#0f172a;
  font-size:14px;
  line-height:1.7;
  font-weight:950;
}
.home-ultra .home-orbit-card small{
  color:#64748b;
  font-size:11.3px;
  line-height:1.72;
}
.home-ultra .home-orbit-card--project{right: 8%; top: 9%; animation-delay:0s;}
.home-ultra .home-orbit-card--talent{left: 7%; top: 18%; animation-delay:.55s;}
.home-ultra .home-orbit-card--escrow{right: 10%; bottom: 12%; animation-delay:1.05s;}
.home-ultra .home-orbit-card--delivery{left: 10%; bottom: 8%; animation-delay:1.55s;}
.home-ultra .home-orbit-card--talent .home-orbit-card__icon{
  color:#6d28d9;
  background:rgba(109,93,252,.10);
}
.home-ultra .home-orbit-card--escrow .home-orbit-card__icon{
  color:#047857;
  background:rgba(16,185,129,.12);
}
.home-ultra .home-orbit-card--delivery .home-orbit-card__icon{
  color:#b45309;
  background:rgba(245,158,11,.14);
}
.home-ultra .home-orbit-signal{
  position:absolute;
  z-index:7;
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width: 186px;
  padding:10px 12px;
  border-radius:18px;
  color:#334155;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(19,88,97,.12);
  box-shadow:0 16px 42px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-size:11.7px;
  font-weight:850;
  line-height:1.6;
  animation: homeOrbitSignalFloat 6.8s ease-in-out infinite alternate;
}
.home-ultra .home-orbit-signal i{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#16a34a;
  background:rgba(22,163,74,.10);
  flex:0 0 auto;
}
.home-ultra .home-orbit-signal--approved{right: 5%; top: 45%; animation-delay:.2s;}
.home-ultra .home-orbit-signal--online{left: 5%; top: 46%; animation-delay:.85s;}
.home-ultra .home-orbit-signal--secure{left: 33%; bottom: 2.5%; animation-delay:1.25s;}
.home-ultra .home-orbit-signal--secure i{color:#6d28d9;background:rgba(109,93,252,.10);}
.home-ultra .home-orbit-signal__avatars{
  display:flex;
  flex-direction:row-reverse;
  margin-inline-start:3px;
}
.home-ultra .home-orbit-signal__avatars i{
  width:24px;
  height:24px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.95);
  margin-inline-start:-7px;
  background:
    radial-gradient(circle at 45% 35%, #fff 0 12%, transparent 13%),
    linear-gradient(135deg, #135861, #10b981);
  box-shadow:0 7px 16px rgba(15,23,42,.12);
}
.home-ultra .home-orbit-signal__avatars i:nth-child(2){background:linear-gradient(135deg, #6d5dfc, #10b981);}
.home-ultra .home-orbit-signal__avatars i:nth-child(3){background:linear-gradient(135deg, #f59e0b, #135861);}
@keyframes homeOrbitGrid{
  0%{transform:translate3d(0,0,0);opacity:.16;}
  100%{transform:translate3d(-8px,6px,0);opacity:.25;}
}
@keyframes homeOrbitPathMove{
  to{stroke-dashoffset:-260;}
}
@keyframes homeOrbitLight{
  0%{stroke-dashoffset: 180; opacity:0;}
  14%{opacity:.88;}
  52%{opacity:1;}
  88%{opacity:.78;}
  100%{stroke-dashoffset:-760; opacity:0;}
}
@keyframes homeOrbitBrandFloat{
  0%{transform:translate(-50%,-50%) translate3d(0,0,0);}
  100%{transform:translate(-50%,-50%) translate3d(0,-8px,0);}
}
@keyframes homeOrbitGlowTurn{
  to{transform:rotate(360deg);}
}
@keyframes homeOrbitCardFloat{
  0%{transform:translate3d(0,0,0) rotate(-.22deg);}
  100%{transform:translate3d(0,-8px,0) rotate(.18deg);}
}
@keyframes homeOrbitSignalFloat{
  0%{transform:translate3d(0,0,0);opacity:.88;}
  100%{transform:translate3d(0,-7px,0);opacity:1;}
}
@keyframes homeOrbitHalo{
  0%{transform:scale(.96);opacity:.42;}
  100%{transform:scale(1.08);opacity:.78;}
}
@media (max-width: 980px){
  .home-ultra .home-motion-studio__visual{min-height: 610px;}
  .home-ultra .home-orbit-card{width: 176px;}
  .home-ultra .home-orbit-card--project{right: 6%; top: 7%;}
  .home-ultra .home-orbit-card--talent{left: 5%; top: 19%;}
  .home-ultra .home-orbit-card--escrow{right: 6%; bottom: 15%;}
  .home-ultra .home-orbit-card--delivery{left: 6%; bottom: 9%;}
  .home-ultra .home-orbit-signal--secure{left: 25%; bottom: 2%;}
}
@media (max-width: 720px){
  .home-ultra .home-motion-studio__visual{
    min-height: 760px;
    border-radius: 28px;
  }
  .home-ultra .home-orbit-workflow{
    inset: 14px;
    border-radius: 24px;
  }
  .home-ultra .home-orbit-workflow__svg{
    inset: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    opacity:.62;
  }
  .home-ultra .home-orbit-workflow__brand{
    top: 47%;
    width: 164px;
    min-height: 164px;
    border-radius: 38px;
  }
  .home-ultra .home-orbit-card{
    width: calc(50% - 22px);
    min-height: 128px;
    padding: 14px 14px 15px;
    border-radius: 23px;
  }
  .home-ultra .home-orbit-card--project{right: 10px; top: 18px;}
  .home-ultra .home-orbit-card--talent{left: 10px; top: 106px;}
  .home-ultra .home-orbit-card--escrow{right: 10px; bottom: 112px;}
  .home-ultra .home-orbit-card--delivery{left: 10px; bottom: 24px;}
  .home-ultra .home-orbit-signal{
    max-width: 160px;
    font-size: 10.8px;
    padding: 8px 10px;
  }
  .home-ultra .home-orbit-signal--approved{right: 12px; top: 270px;}
  .home-ultra .home-orbit-signal--online{left: 12px; top: 342px;}
  .home-ultra .home-orbit-signal--secure{left: 50%; bottom: 286px; transform: translateX(-50%);}
}
@media (max-width: 480px){

  .home-ultra .home-orbit-card{
    width: calc(100% - 26px);
    min-height: auto;
  }
  .home-ultra .home-orbit-card--project{right: 13px; left: 13px; top: 16px;}
  .home-ultra .home-orbit-card--talent{right: 13px; left: 13px; top: 144px;}
  .home-ultra .home-orbit-workflow__brand{top: 50%; width: 156px; min-height: 156px;}
  .home-ultra .home-orbit-card--escrow{right: 13px; left: 13px; bottom: 154px;}
  .home-ultra .home-orbit-card--delivery{right: 13px; left: 13px; bottom: 22px;}
  .home-ultra .home-orbit-signal--approved,
  .home-ultra .home-orbit-signal--online,
  .home-ultra .home-orbit-signal--secure{
    display:none;
  }
}
@media (prefers-reduced-motion: reduce){
  .home-ultra .home-orbit-workflow__path,
  .home-ultra .home-orbit-workflow__light,
  .home-ultra .home-orbit-workflow__brand,
  .home-ultra .home-orbit-workflow__brand-glow,
  .home-ultra .home-orbit-card,
  .home-ultra .home-orbit-signal,
  .home-ultra .home-motion-studio__mesh,
  .home-ultra .home-orbit-workflow__halo{
    animation:none !important;
  }
}


/* v154 — Phase 3A: Popular Services + SEO Link Architecture */
.home-ultra .home-popular-services{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 16% 14%, rgba(109,93,252,.08), transparent 34%),
    radial-gradient(circle at 88% 80%, rgba(16,185,129,.10), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,253,251,.94));
}
.home-ultra .home-popular-services::before{
  content:"";
  position:absolute;
  inset:34px auto auto -80px;
  width:250px;
  height:250px;
  border-radius:999px;
  background:rgba(19,88,97,.08);
  filter:blur(10px);
  pointer-events:none;
}
.home-ultra .home-popular-services::after{
  content:"";
  position:absolute;
  inset:auto -96px 46px auto;
  width:280px;
  height:280px;
  border-radius:999px;
  background:rgba(109,93,252,.07);
  filter:blur(12px);
  pointer-events:none;
}
.home-ultra .home-popular-services__head{
  position:relative;
  z-index:2;
  max-width:760px;
  margin:0 auto 28px;
  text-align:center;
}
.home-ultra .home-popular-services__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding:8px 13px;
  border-radius:999px;
  color:#135861;
  background:rgba(19,88,97,.08);
  border:1px solid rgba(19,88,97,.12);
  font-weight:900;
  font-size:13px;
}
.home-ultra .home-popular-services__eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#10b981;
  box-shadow:0 0 0 6px rgba(16,185,129,.12);
}
.home-ultra .home-popular-services__grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}
.home-ultra .home-service-card{
  position:relative;
  min-height:198px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:20px 19px 18px;
  border-radius:28px;
  text-decoration:none !important;
  color:#0f172a;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.76));
  border:1px solid rgba(19,88,97,.12);
  box-shadow:0 20px 58px rgba(15,23,42,.075), inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  overflow:hidden;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.home-ultra .home-service-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(19,88,97,.18), rgba(16,185,129,.10), rgba(109,93,252,.10));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.80;
  pointer-events:none;
}
.home-ultra .home-service-card::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:14px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(19,88,97,.56), rgba(16,185,129,.42), transparent);
  opacity:.36;
  transform:scaleX(.72);
  transform-origin:right;
  transition:transform .28s ease, opacity .28s ease;
}
.home-ultra .home-service-card:hover{
  transform:translate3d(0,-7px,0);
  border-color:rgba(19,88,97,.22);
  box-shadow:0 30px 76px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.96);
}
.home-ultra .home-service-card:hover::after{
  transform:scaleX(1);
  opacity:.68;
}
.home-ultra .home-service-card__icon{
  width:48px;
  height:48px;
  border-radius:20px;
  display:grid;
  place-items:center;
  color:#135861;
  background:rgba(19,88,97,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 14px 28px rgba(15,23,42,.055);
  font-size:18px;
}
.home-ultra .home-service-card strong{
  font-size:15.5px;
  line-height:1.7;
  font-weight:950;
  color:#0f172a;
}
.home-ultra .home-service-card small{
  color:#64748b;
  font-size:12.2px;
  line-height:1.85;
}
.home-ultra .home-service-card__cta{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#135861;
  font-size:12.5px;
  line-height:1.6;
  font-weight:900;
}
.home-ultra .home-service-card__cta i{
  transition:transform .24s ease;
}
.home-ultra .home-service-card:hover .home-service-card__cta i{
  transform:translateX(-4px);
}
.home-ultra .home-service-card--dev .home-service-card__icon,
.home-ultra .home-service-card--ui .home-service-card__icon{color:#6d28d9;background:rgba(109,93,252,.10);}
.home-ultra .home-service-card--seo .home-service-card__icon,
.home-ultra .home-service-card--marketing .home-service-card__icon{color:#047857;background:rgba(16,185,129,.12);}
.home-ultra .home-service-card--content .home-service-card__icon,
.home-ultra .home-service-card--social .home-service-card__icon{color:#b45309;background:rgba(245,158,11,.13);}
.home-ultra .home-popular-services__footer{
  position:relative;
  z-index:2;
  margin-top:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border-radius:26px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(19,88,97,.11);
  box-shadow:0 18px 48px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.home-ultra .home-popular-services__footer p{
  margin:0;
  color:#475569;
  font-size:13px;
  line-height:1.9;
}
.home-ultra .home-popular-services__button{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  color:#fff !important;
  text-decoration:none !important;
  background:linear-gradient(135deg, #135861, #10b981);
  box-shadow:0 18px 34px rgba(19,88,97,.20);
  font-size:13px;
  font-weight:950;
}
.home-ultra .home-popular-services__button i{transition:transform .24s ease;}
.home-ultra .home-popular-services__button:hover i{transform:translateX(-4px);}
@media (max-width:1100px){
  .home-ultra .home-popular-services__grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:680px){
  .home-ultra .home-popular-services__grid{grid-template-columns:1fr;}
  .home-ultra .home-service-card{min-height:170px;border-radius:24px;}
  .home-ultra .home-popular-services__footer{flex-direction:column;align-items:flex-start;}
  .home-ultra .home-popular-services__button{width:100%;}
}
@media (prefers-reduced-motion: reduce){
  .home-ultra .home-service-card,
  .home-ultra .home-service-card__cta i,
  .home-ultra .home-popular-services__button i{transition:none !important;}
}


/* v155 — Phase 3B: How it works + conversion flow */
.home-ultra .home-how-flow{
  position:relative;
  overflow:hidden;
}
.home-ultra .home-how-flow::before{
  content:"";
  position:absolute;
  inset:7% -12% auto auto;
  width:360px;
  height:360px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(16,185,129,.12), transparent 68%);
  pointer-events:none;
}
.home-ultra .home-how-flow::after{
  content:"";
  position:absolute;
  left:-12%;
  bottom:2%;
  width:300px;
  height:300px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(109,93,252,.10), transparent 66%);
  pointer-events:none;
}
.home-ultra .home-how-flow__shell{
  position:relative;
  z-index:1;
  padding:34px;
  border-radius:36px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78)),
    radial-gradient(circle at 80% 12%, rgba(16,185,129,.08), transparent 34%),
    radial-gradient(circle at 16% 88%, rgba(109,93,252,.08), transparent 32%);
  border:1px solid rgba(19,88,97,.12);
  box-shadow:0 24px 72px rgba(15,23,42,.075), inset 0 1px 0 rgba(255,255,255,.92);
}
.home-ultra .home-how-flow__head{
  max-width:820px;
  margin:0 auto 26px;
  text-align:center;
}
.home-ultra .home-how-flow__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding:8px 13px;
  border-radius:999px;
  color:#135861;
  background:rgba(19,88,97,.08);
  border:1px solid rgba(19,88,97,.12);
  font-size:13px;
  font-weight:900;
}
.home-ultra .home-how-flow__eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#10b981;
  box-shadow:0 0 0 6px rgba(16,185,129,.13);
}
.home-ultra .home-how-flow__tracks{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}
.home-ultra .home-how-track{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:22px;
  border-radius:30px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(19,88,97,.13);
  box-shadow:0 22px 58px rgba(15,23,42,.075), inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.home-ultra .home-how-track::before{
  content:"";
  position:absolute;
  inset:auto 22px 0 22px;
  height:3px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg, rgba(19,88,97,.64), rgba(16,185,129,.46), transparent);
  opacity:.65;
}
.home-ultra .home-how-track--freelancer::before{
  background:linear-gradient(90deg, rgba(109,93,252,.58), rgba(16,185,129,.40), transparent);
}
.home-ultra .home-how-track__top{
  display:flex;
  align-items:flex-start;
  gap:13px;
  margin-bottom:18px;
}
.home-ultra .home-how-track__icon{
  width:54px;
  height:54px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:20px;
  color:#135861;
  background:rgba(19,88,97,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  font-size:20px;
}
.home-ultra .home-how-track--freelancer .home-how-track__icon{
  color:#6d28d9;
  background:rgba(109,93,252,.10);
}
.home-ultra .home-how-track__top h3{
  margin:0 0 4px;
  color:#0f172a;
  font-size:18px;
  line-height:1.75;
  font-weight:950;
}
.home-ultra .home-how-track__top p{
  margin:0;
  color:#64748b;
  font-size:13px;
  line-height:1.9;
}
.home-ultra .home-how-track__steps{
  display:grid;
  gap:12px;
  margin-bottom:20px;
}
.home-ultra .home-how-step{
  position:relative;
  display:grid;
  grid-template-columns:42px 1fr;
  grid-template-areas:
    "icon title"
    "icon text";
  column-gap:12px;
  padding:14px;
  border-radius:22px;
  background:rgba(248,250,252,.74);
  border:1px solid rgba(19,88,97,.08);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.home-ultra .home-how-step:hover{
  transform:translateY(-4px);
  border-color:rgba(19,88,97,.16);
  background:rgba(255,255,255,.92);
  box-shadow:0 18px 42px rgba(15,23,42,.07);
}
.home-ultra .home-how-step > span{
  grid-area:icon;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:#135861;
  background:#fff;
  border:1px solid rgba(19,88,97,.09);
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.home-ultra .home-how-track--freelancer .home-how-step > span{
  color:#6d28d9;
}
.home-ultra .home-how-step strong{
  grid-area:title;
  color:#0f172a;
  font-size:13.5px;
  line-height:1.75;
  font-weight:950;
}
.home-ultra .home-how-step small{
  grid-area:text;
  color:#64748b;
  font-size:11.7px;
  line-height:1.8;
}
.home-ultra .home-how-track__cta{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  padding:12px 16px;
  border-radius:17px;
  color:#fff;
  background:linear-gradient(135deg,#135861,#10b981);
  box-shadow:0 15px 34px rgba(19,88,97,.18);
  text-decoration:none;
  font-size:13px;
  font-weight:950;
  transition:transform .25s ease, box-shadow .25s ease;
}
.home-ultra .home-how-track__cta:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 42px rgba(19,88,97,.24);
}
.home-ultra .home-how-track__cta--ghost{
  color:#135861;
  background:#fff;
  border:1px solid rgba(19,88,97,.14);
  box-shadow:0 14px 32px rgba(15,23,42,.07);
}
.home-ultra .home-how-flow__conversion{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border-radius:26px;
  background:linear-gradient(135deg, rgba(19,88,97,.08), rgba(16,185,129,.08), rgba(109,93,252,.055));
  border:1px solid rgba(19,88,97,.11);
}
.home-ultra .home-how-flow__conversion strong{
  display:block;
  margin-bottom:4px;
  color:#0f172a;
  font-size:15px;
  line-height:1.8;
  font-weight:950;
}
.home-ultra .home-how-flow__conversion p{
  margin:0;
  color:#64748b;
  font-size:12.5px;
  line-height:1.9;
}
.home-ultra .home-how-flow__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.home-ultra .home-how-flow__actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  border-radius:15px;
  background:#fff;
  border:1px solid rgba(19,88,97,.12);
  color:#135861;
  text-decoration:none;
  font-size:12.5px;
  font-weight:950;
  box-shadow:0 12px 28px rgba(15,23,42,.055);
  transition:transform .25s ease, border-color .25s ease;
}
.home-ultra .home-how-flow__actions a:first-child{
  color:#fff;
  background:linear-gradient(135deg,#135861,#10b981);
}
.home-ultra .home-how-flow__actions a:hover{
  transform:translateY(-3px);
  border-color:rgba(19,88,97,.20);
}
@media (max-width:900px){
  .home-ultra .home-how-flow__shell{padding:24px;}
  .home-ultra .home-how-flow__tracks{grid-template-columns:1fr;}
  .home-ultra .home-how-flow__conversion{align-items:flex-start;flex-direction:column;}
  .home-ultra .home-how-flow__actions{justify-content:flex-start;}
}
@media (max-width:560px){
  .home-ultra .home-how-flow__shell{padding:18px;border-radius:28px;}
  .home-ultra .home-how-track{padding:18px;border-radius:24px;}
  .home-ultra .home-how-step{grid-template-columns:38px 1fr;padding:12px;}
  .home-ultra .home-how-step > span{width:38px;height:38px;border-radius:14px;}
  .home-ultra .home-how-track__cta,
  .home-ultra .home-how-flow__actions,
  .home-ultra .home-how-flow__actions a{width:100%;}
}


/* v156 — Phase 3C: Trust advantages + CTA optimization */
.home-ultra .home-conversion-trust{
  position:relative;
  overflow:hidden;
}
.home-ultra .home-conversion-trust::before{
  content:"";
  position:absolute;
  right:-10%;
  top:10%;
  width:360px;
  height:360px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(19,88,97,.11), transparent 68%);
  pointer-events:none;
}
.home-ultra .home-conversion-trust::after{
  content:"";
  position:absolute;
  left:-9%;
  bottom:4%;
  width:310px;
  height:310px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(16,185,129,.12), transparent 66%);
  pointer-events:none;
}
.home-ultra .home-conversion-trust__shell{
  position:relative;
  z-index:1;
  overflow:hidden;
  padding:34px;
  border-radius:38px;
  background:
    linear-gradient(135deg, rgba(15,88,97,.075), rgba(16,185,129,.07), rgba(109,93,252,.045)),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82));
  border:1px solid rgba(19,88,97,.13);
  box-shadow:0 28px 78px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.94);
}
.home-ultra .home-conversion-trust__shell::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:30px;
  pointer-events:none;
  opacity:.25;
  background-image:
    linear-gradient(rgba(19,88,97,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19,88,97,.045) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 46%, #000 0 60%, transparent 82%);
}
.home-ultra .home-conversion-trust__content{
  position:relative;
  z-index:1;
  max-width:880px;
  margin:0 auto 24px;
  text-align:center;
}
.home-ultra .home-conversion-trust__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding:8px 13px;
  border-radius:999px;
  color:#135861;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(19,88,97,.13);
  font-size:13px;
  font-weight:900;
  box-shadow:0 12px 28px rgba(15,23,42,.055);
}
.home-ultra .home-conversion-trust__eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#10b981;
  box-shadow:0 0 0 6px rgba(16,185,129,.13);
}
.home-ultra .home-conversion-trust__actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.home-ultra .home-conversion-trust__actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:12px 17px;
  border-radius:17px;
  text-decoration:none;
  font-size:13px;
  font-weight:950;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.home-ultra .home-conversion-trust__primary{
  color:#fff;
  background:linear-gradient(135deg,#135861,#10b981);
  box-shadow:0 18px 42px rgba(19,88,97,.22);
}
.home-ultra .home-conversion-trust__secondary{
  color:#135861;
  background:#fff;
  border:1px solid rgba(19,88,97,.14);
  box-shadow:0 14px 32px rgba(15,23,42,.07);
}
.home-ultra .home-conversion-trust__actions a:hover{
  transform:translateY(-3px);
}
.home-ultra .home-conversion-trust__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.home-ultra .home-conversion-card{
  position:relative;
  overflow:hidden;
  min-height:210px;
  padding:20px;
  border-radius:28px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(19,88,97,.12);
  box-shadow:0 20px 55px rgba(15,23,42,.075), inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.home-ultra .home-conversion-card::before{
  content:"";
  position:absolute;
  inset:auto 18px 0 18px;
  height:3px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg, rgba(19,88,97,.62), rgba(16,185,129,.46), transparent);
  opacity:.65;
}
.home-ultra .home-conversion-card:hover{
  transform:translateY(-7px);
  border-color:rgba(19,88,97,.20);
  box-shadow:0 28px 68px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.96);
}
.home-ultra .home-conversion-card__icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  border-radius:19px;
  color:#135861;
  background:rgba(19,88,97,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  font-size:19px;
}
.home-ultra .home-conversion-card--milestone .home-conversion-card__icon{color:#047857;background:rgba(16,185,129,.11);}
.home-ultra .home-conversion-card--talent .home-conversion-card__icon{color:#6d28d9;background:rgba(109,93,252,.10);}
.home-ultra .home-conversion-card--support .home-conversion-card__icon{color:#b45309;background:rgba(245,158,11,.13);}
.home-ultra .home-conversion-card h3{
  margin:0 0 8px;
  color:#0f172a;
  font-size:16px;
  line-height:1.75;
  font-weight:950;
}
.home-ultra .home-conversion-card p{
  margin:0;
  color:#64748b;
  font-size:12.5px;
  line-height:1.9;
}
.home-ultra .home-conversion-trust__bar{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
  padding:14px;
  border-radius:24px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(19,88,97,.10);
}
.home-ultra .home-conversion-trust__bar a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:9px 12px;
  border-radius:14px;
  color:#334155;
  background:rgba(248,250,252,.9);
  border:1px solid rgba(19,88,97,.08);
  text-decoration:none;
  font-size:12px;
  font-weight:850;
  transition:transform .25s ease, color .25s ease, border-color .25s ease;
}
.home-ultra .home-conversion-trust__bar a i{
  color:#135861;
}
.home-ultra .home-conversion-trust__bar a:hover{
  transform:translateY(-3px);
  color:#135861;
  border-color:rgba(19,88,97,.16);
}
@media (max-width:1020px){
  .home-ultra .home-conversion-trust__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:680px){
  .home-ultra .home-conversion-trust__shell{
    padding:22px;
    border-radius:30px;
  }
  .home-ultra .home-conversion-trust__grid{
    grid-template-columns:1fr;
  }
  .home-ultra .home-conversion-card{
    min-height:auto;
  }
  .home-ultra .home-conversion-trust__actions a,
  .home-ultra .home-conversion-trust__bar a{
    width:100%;
  }
}


/* v157 — Phase 3D: Trust merge cleanup
   The older home-trust-os section was removed from home.php to avoid duplicate trust content.
   home-conversion-trust is now the single trust + CTA section on the homepage. */
.home-ultra .home-conversion-trust{
  margin-top: clamp(18px, 2.2vw, 28px);
}


/* v158 — Home FAQ boundary cleanup after trust merge */
.home-ultra .home-conversion-trust + .home-faq,
.home-ultra .home-conversion-trust + .home-section{
  margin-top: clamp(42px, 5vw, 72px);
}
.home-ultra .home-faq{
  position: relative;
  z-index: 1;
}


/* v159 — Phase 4: SEO deep optimization link hub */
.home-ultra .home-seo-link-hub{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:9px;
  margin:16px auto 0;
  max-width:920px;
}
.home-ultra .home-seo-link-hub a{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:8px 12px;
  border-radius:999px;
  color:#135861;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(19,88,97,.12);
  text-decoration:none;
  font-size:12px;
  font-weight:850;
  box-shadow:0 10px 24px rgba(15,23,42,.045);
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
}
.home-ultra .home-seo-link-hub a:hover{
  transform:translateY(-2px);
  border-color:rgba(19,88,97,.20);
  background:#fff;
}


/* v160 — Phase 5: Performance + Core Web Vitals + motion optimization
   Scope: Home page only. Keeps the visual design, but makes rendering lighter and more stable. */
.home-ultra{
  content-visibility: visible;
  text-rendering: optimizeLegibility;
}
.home-ultra .home-section{
  content-visibility: auto;
  contain-intrinsic-size: 1px 760px;
}
.home-ultra .home-hero,
.home-ultra .home-motion-studio{
  content-visibility: visible;
}
.home-ultra .home-motion-studio__visual,
.home-ultra .home-popular-services__grid,
.home-ultra .home-how-flow__shell,
.home-ultra .home-conversion-trust__shell,
.home-ultra .home-faqSection{
  contain: layout paint style;
}
.home-ultra .home-orbit-workflow__path,
.home-ultra .home-orbit-workflow__light,
.home-ultra .home-orbit-workflow__brand,
.home-ultra .home-orbit-card,
.home-ultra .home-orbit-signal,
.home-ultra .home-service-card,
.home-ultra .home-how-step,
.home-ultra .home-conversion-card{
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.home-ultra .home-orbit-workflow__brand-glow,
.home-ultra .home-orbit-workflow__halo,
.home-ultra .home-motion-studio__mesh{
  will-change: transform, opacity;
  pointer-events:none;
}
.home-ultra .home-motion-studio__visual{
  min-height: clamp(520px, 48vw, 620px);
}
.home-ultra .home-popular-services__grid{
  min-height: 340px;
}
.home-ultra .home-how-flow__tracks{
  min-height: 430px;
}
.home-ultra .home-conversion-trust__grid{
  min-height: 210px;
}
.home-ultra .home-faqSection{
  min-height: 430px;
}
.home-ultra .home-service-card,
.home-ultra .home-how-track,
.home-ultra .home-conversion-card,
.home-ultra .home-orbit-card{
  transition-property: transform, box-shadow, border-color, background;
  transition-duration: .24s;
  transition-timing-function: ease;
}
@media (min-width: 781px){
  .home-ultra .home-orbit-card:hover,
  .home-ultra .home-service-card:hover,
  .home-ultra .home-how-step:hover,
  .home-ultra .home-conversion-card:hover{
    will-change: transform;
  }
}
@media (max-width: 720px){
  .home-ultra .home-section{
    contain-intrinsic-size: 1px 920px;
  }
  .home-ultra .home-motion-studio__visual{
    min-height: 760px;
  }
  .home-ultra .home-popular-services__grid,
  .home-ultra .home-how-flow__tracks,
  .home-ultra .home-conversion-trust__grid,
  .home-ultra .home-faqSection{
    min-height: auto;
  }
  .home-ultra .home-orbit-card,
  .home-ultra .home-service-card,
  .home-ultra .home-how-track,
  .home-ultra .home-conversion-card,
  .home-ultra .home-how-flow__shell,
  .home-ultra .home-conversion-trust__shell{
    box-shadow: 0 14px 34px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.92) !important;
  }
  .home-ultra .home-orbit-workflow__brand,
  .home-ultra .home-orbit-card,
  .home-ultra .home-orbit-signal{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}
@media (max-width: 480px){
  .home-ultra .home-motion-studio__visual{
    min-height: 860px;
  }
  .home-ultra .home-section{
    contain-intrinsic-size: 1px 1040px;
  }
}
@media (prefers-reduced-motion: reduce){
  .home-ultra *,
  .home-ultra *::before,
  .home-ultra *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

.home-ultra .is-home-motion-paused *,
.home-ultra .is-home-motion-paused *::before,
.home-ultra .is-home-motion-paused *::after{
  animation-play-state: paused !important;
}


/* v161 — Phase 6: Mobile UX polish for Homepage
   Scope: Home only. Improves responsive spacing, CTA stacking, Persian readability,
   and prevents horizontal overflow in new rich sections. */
.home-ultra,
.home-ultra *{
  box-sizing:border-box;
}
.home-ultra{
  overflow-x:hidden;
}
/* v162: desktop/laptop container width restored; mobile width is handled only in media queries. */
.home-ultra .home-h2,
.home-ultra .home-p,
.home-ultra h1,
.home-ultra h2,
.home-ultra h3,
.home-ultra p,
.home-ultra a,
.home-ultra button,
.home-ultra input,
.home-ultra select,
.home-ultra textarea,
.home-ultra label{
  font-family: inherit !important;
}
.home-ultra .home-h2,
.home-ultra .home-hero__title{
  text-wrap: balance;
}
.home-ultra .home-p,
.home-ultra .home-service-card small,
.home-ultra .home-how-step small,
.home-ultra .home-conversion-card p{
  text-wrap: pretty;
}
.home-ultra .home-service-card,
.home-ultra .home-how-track,
.home-ultra .home-conversion-card,
.home-ultra .home-orbit-card{
  overflow-wrap:anywhere;
}
@media (max-width: 900px){
  .home-ultra .container{
    max-width: min(100% - 24px, 720px);
  }
  .home-ultra .home-section{
    padding-block: clamp(34px, 8vw, 58px);
  }
  .home-ultra .home-h2{
    font-size: clamp(24px, 6.4vw, 36px);
    line-height: 1.55;
  }
  .home-ultra .home-p{
    font-size: 14px;
    line-height: 2;
  }
  .home-ultra .home-hero__cta,
  .home-ultra .home-conversion-trust__actions,
  .home-ultra .home-how-flow__actions{
    gap:10px;
  }
  .home-ultra .home-btn,
  .home-ultra .home-popular-services__button,
  .home-ultra .home-how-track__cta,
  .home-ultra .home-how-flow__actions a,
  .home-ultra .home-conversion-trust__actions a{
    min-height: 48px;
    border-radius: 16px;
  }
}
@media (max-width: 720px){
  .home-ultra .container{
    max-width: calc(100% - 20px);
  }
  .home-ultra .home-hero__title{
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.45;
  }
  .home-ultra .home-hero__subtitle{
    font-size: clamp(16px, 4.8vw, 21px);
    line-height: 1.9;
  }
  .home-ultra .home-hero__micro{
    line-height: 2;
  }
  .home-ultra .home-hero__cta{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }
  .home-ultra .home-hero__cta .home-btn{
    width:100%;
    justify-content:center;
  }

  .home-ultra .home-motion-studio__shell,
  .home-ultra .home-popular-services__head,
  .home-ultra .home-how-flow__head,
  .home-ultra .home-conversion-trust__content{
    text-align:right;
  }
  .home-ultra .home-popular-services__head,
  .home-ultra .home-how-flow__head,
  .home-ultra .home-conversion-trust__content{
    margin-inline:0;
  }

  .home-ultra .home-service-card{
    min-height:auto;
    padding:18px;
  }
  .home-ultra .home-service-card__cta{
    margin-top:4px;
  }
  .home-ultra .home-popular-services__footer{
    align-items:stretch;
    text-align:right;
  }
  .home-ultra .home-popular-services__button{
    width:100%;
    justify-content:center;
  }
  .home-ultra .home-seo-link-hub{
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:6px;
    scrollbar-width:none;
  }
  .home-ultra .home-seo-link-hub::-webkit-scrollbar{
    display:none;
  }
  .home-ultra .home-seo-link-hub a{
    flex:0 0 auto;
    white-space:nowrap;
  }

  .home-ultra .home-how-track__top{
    align-items:center;
  }
  .home-ultra .home-how-track__cta{
    width:100%;
    justify-content:center;
  }
  .home-ultra .home-how-flow__actions{
    width:100%;
  }

  .home-ultra .home-conversion-trust__content{
    max-width:100%;
  }
  .home-ultra .home-conversion-trust__bar{
    justify-content:stretch;
  }
  .home-ultra .home-conversion-trust__bar a{
    justify-content:center;
  }
}
@media (max-width: 560px){
  .home-ultra .container{
    max-width: calc(100% - 16px);
  }
  .home-ultra .home-section{
    padding-block: 34px;
  }
  .home-ultra .home-h2{
    font-size: clamp(22px, 7.2vw, 30px);
  }
  .home-ultra .home-hero__title{
    font-size: clamp(28px, 8.6vw, 38px);
  }
  .home-ultra .home-motion-studio__visual{
    border-radius:24px;
  }
  .home-ultra .home-orbit-workflow__brand small{
    display:none;
  }
  .home-ultra .home-orbit-workflow__brand{
    min-height:128px;
    width:128px;
    border-radius:32px;
  }
  .home-ultra .home-orbit-workflow__brand i{
    width:46px;
    height:46px;
    border-radius:18px;
  }

  .home-ultra .home-popular-services__grid{
    gap:12px;
  }
  .home-ultra .home-how-track__top{
    gap:10px;
  }
  .home-ultra .home-how-track__icon,
  .home-ultra .home-conversion-card__icon{
    width:46px;
    height:46px;
    border-radius:17px;
  }
  .home-ultra .home-conversion-trust__actions{
    width:100%;
  }
  .home-ultra .home-conversion-trust__actions a{
    width:100%;
  }
}
@media (max-width: 420px){
  .home-ultra .home-hero__micro{
    font-size:12px;
  }
  .home-ultra .home-service-card strong,
  .home-ultra .home-how-track__top h3,
  .home-ultra .home-conversion-card h3{
    font-size:15px;
  }
  .home-ultra .home-service-card small,
  .home-ultra .home-how-step small,
  .home-ultra .home-conversion-card p{
    font-size:11.5px;
  }
  .home-ultra .home-orbit-card{
    padding:13px;
    border-radius:20px;
  }
}




/* v163 — Real desktop/laptop width restore
   Project default container in main.css is 1360px; Home must not be capped to 1180px. */
@media (min-width: 901px){
  .home-ultra .container{
    width: min(1360px, calc(100% - 32px)) !important;
    max-width: 1360px !important;
    margin-inline: auto !important;
    padding-inline: 16px !important;
  }
  .home-ultra .home-motion-studio__shell,
  .home-ultra .home-popular-services__shell,
  .home-ultra .home-how-flow__shell,
  .home-ultra .home-conversion-trust__shell{
    width: 100%;
  }
}
@media (min-width: 1400px){
  .home-ultra .container{
    width: 1360px !important;
    max-width: 1360px !important;
  }
}

/* v164 — Phase 7: Conversion + Trust Psychology + Launch Readiness
   Scope: Home page only. Adds trust cues, marketplace activity feeling, and CTA polish without fake data. */
.home-ultra .home-hero__micro--phase7{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  color:#24424a;
  font-weight:850;
}
.home-ultra .home-hero__micro--phase7 span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(19,88,97,.12);
  box-shadow:0 10px 26px rgba(15,23,42,.055);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.home-ultra .home-hero__micro--phase7 i{
  color:#128A3F;
  font-size:12px;
}
.home-ultra .home-btn,
.home-ultra .home-conversion-trust__actions a,
.home-ultra .home-conversion-trust__bar a,
.home-ultra .home-service-card__cta,
.home-ultra .home-how-track__cta{
  font-family:inherit !important;
  isolation:isolate;
}
.home-ultra .home-btn--primary,
.home-ultra .home-conversion-trust__primary{
  position:relative;
  overflow:hidden;
}
.home-ultra .home-btn--primary::after,
.home-ultra .home-conversion-trust__primary::after{
  content:"";
  position:absolute;
  inset:-2px auto -2px -42%;
  width:38%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  opacity:.0;
  transition:opacity .26s ease, transform .7s ease;
  pointer-events:none;
  z-index:-1;
}
.home-ultra .home-btn--primary:hover::after,
.home-ultra .home-conversion-trust__primary:hover::after{
  opacity:.85;
  transform:translateX(360%) skewX(-18deg);
}
.home-ultra .home-conversion-trust__decision{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
  margin-top:14px;
}
.home-ultra .home-conversion-trust__decision span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:8px 11px;
  border-radius:999px;
  color:#334155;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(19,88,97,.11);
  box-shadow:0 10px 24px rgba(15,23,42,.045);
  font-size:12px;
  font-weight:850;
}
.home-ultra .home-conversion-trust__decision i{
  color:#135861;
}
.home-ultra .home-live-marketplace{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(220px,.95fr) minmax(0,1.35fr);
  gap:14px;
  align-items:center;
  margin:0 0 16px;
  padding:16px;
  border-radius:28px;
  background:linear-gradient(135deg, rgba(255,255,255,.86), rgba(240,253,244,.78));
  border:1px solid rgba(19,88,97,.12);
  box-shadow:0 18px 44px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.92);
}
.home-ultra .home-live-marketplace__head{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:5px 10px;
  align-items:center;
  min-width:0;
}
.home-ultra .home-live-marketplace__head strong{
  color:#0f172a;
  font-size:14px;
  font-weight:950;
  line-height:1.8;
}
.home-ultra .home-live-marketplace__head small{
  grid-column:2;
  color:#64748b;
  font-size:12px;
  font-weight:750;
  line-height:1.9;
}
.home-ultra .home-live-marketplace__pulse{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#10b981;
  box-shadow:0 0 0 8px rgba(16,185,129,.13), 0 0 20px rgba(16,185,129,.32);
  animation:homePhase7Pulse 2.6s ease-in-out infinite;
}
.home-ultra .home-live-marketplace__rail{
  display:flex;
  align-items:center;
  gap:9px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.home-ultra .home-live-marketplace__rail span{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:9px 12px;
  border-radius:999px;
  color:#135861;
  background:#fff;
  border:1px solid rgba(19,88,97,.11);
  box-shadow:0 12px 28px rgba(15,23,42,.055);
  font-size:12px;
  font-weight:900;
  animation:homePhase7Float 7s ease-in-out infinite;
}
.home-ultra .home-live-marketplace__rail span:nth-child(2){animation-delay:.35s;}
.home-ultra .home-live-marketplace__rail span:nth-child(3){animation-delay:.7s;}
.home-ultra .home-live-marketplace__rail span:nth-child(4){animation-delay:1.05s;}
.home-ultra .home-live-marketplace__rail span:nth-child(5){animation-delay:1.4s;}
.home-ultra .home-live-marketplace__rail i{
  color:#10b981;
  font-size:12px;
}
.home-ultra .home-conversion-card:focus-within,
.home-ultra .home-service-card:focus-within,
.home-ultra .home-how-track:focus-within,
.home-ultra .home-conversion-trust__bar a:focus-visible,
.home-ultra .home-conversion-trust__actions a:focus-visible,
.home-ultra .home-btn:focus-visible{
  outline:3px solid rgba(16,185,129,.32);
  outline-offset:4px;
}
@keyframes homePhase7Pulse{
  0%,100%{transform:scale(1); box-shadow:0 0 0 7px rgba(16,185,129,.12), 0 0 20px rgba(16,185,129,.28);}
  50%{transform:scale(.86); box-shadow:0 0 0 12px rgba(16,185,129,.08), 0 0 26px rgba(16,185,129,.36);}
}
@keyframes homePhase7Float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}
@media (prefers-reduced-motion: reduce){
  .home-ultra .home-live-marketplace__pulse,
  .home-ultra .home-live-marketplace__rail span,
  .home-ultra .home-btn--primary::after,
  .home-ultra .home-conversion-trust__primary::after{
    animation:none !important;
    transition:none !important;
  }
}
@media (max-width: 900px){
  .home-ultra .home-live-marketplace{
    grid-template-columns:1fr;
  }
  .home-ultra .home-live-marketplace__rail{
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-mask-image:none;
    mask-image:none;
    padding-bottom:2px;
  }
  .home-ultra .home-live-marketplace__rail::-webkit-scrollbar{display:none;}
}
@media (max-width: 720px){
  .home-ultra .home-hero__micro--phase7{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }
  .home-ultra .home-hero__micro--phase7 span,
  .home-ultra .home-conversion-trust__decision span{
    justify-content:center;
  }
  .home-ultra .home-conversion-trust__decision{
    justify-content:stretch;
  }
  .home-ultra .home-live-marketplace{
    padding:14px;
    border-radius:24px;
  }
}


/* =====================================================
   PHASE 8 — Premium Hero Finalization
   Scope: Home hero only. Adds cinematic visual depth, refined hierarchy,
   premium micro-motion and launch-level interaction polish without fake data.
====================================================== */
.home-hero--phase8{
  --phase8-ink: #0f2b46;
  --phase8-green: #135861;
  --phase8-mint: #10b981;
  --phase8-violet: #7c3aed;
  padding-top: 24px;
  padding-bottom: 18px;
  box-shadow: 0 28px 90px rgba(15, 43, 70, 0.08);
}

.home-hero--phase8 .home-hero__inner{
  min-height: clamp(390px, 42vw, 520px);
  display: grid;
  align-items: center;
}

.home-hero--phase8 .home-hero__grid{
  align-items: center;
}

.home-hero--phase8 .home-hero__copy{
  position: relative;
  z-index: 4;
  padding-top: 0;
  padding-bottom: 0;
}

.home-hero__launchMark{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(19, 88, 97, 0.15);
  background: rgba(255,255,255,0.72);
  color: rgba(15, 43, 70, 0.76);
  box-shadow: 0 12px 36px rgba(15, 43, 70, 0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.65;
  margin-bottom: 2px;
}

.home-hero__launchDot{
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--phase8-mint);
  box-shadow: 0 0 0 6px rgba(16,185,129,0.10), 0 0 20px rgba(16,185,129,0.42);
  flex: 0 0 auto;
}
.home-hero__launchDot::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:inherit;
  border:1px solid rgba(16,185,129,.30);
  animation: homePhase8Pulse 2.6s ease-out infinite;
}

.home-hero--phase8 .home-hero__title{
  color: var(--phase8-ink);
  font-size: clamp(36px, 3.35vw, 54px);
  line-height: 1.12;
  letter-spacing: -0.55px;
  max-width: 14ch;
  text-wrap: balance;
}

.home-hero--phase8 .home-hero__subtitle{
  max-width: 58ch;
  color: rgba(15, 43, 70, 0.70);
  font-size: 16.5px;
}

.home-hero--phase8 .home-hero__cta{
  margin-top: 20px;
  gap: 12px;
}

.home-hero--phase8 .home-btn{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
  will-change: transform;
}
.home-hero--phase8 .home-btn:hover{
  transform: translateY(-2px);
}
.home-hero--phase8 .home-btn--primary{
  box-shadow: 0 18px 44px rgba(19, 88, 97, 0.22), inset 0 1px 0 rgba(255,255,255,0.18);
}
.home-hero--phase8 .home-btn--primary:hover{
  box-shadow: 0 24px 58px rgba(19, 88, 97, 0.30), inset 0 1px 0 rgba(255,255,255,0.22);
}
.home-hero--phase8 .home-btn--secondary{
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.home-heroCinema__beam,
.home-heroCinema__node{
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.home-heroCinema__beam{
  height: 1px;
  width: min(36vw, 460px);
  right: 7%;
  background: linear-gradient(90deg, transparent, rgba(16,185,129,.52), rgba(124,58,237,.24), transparent);
  filter: drop-shadow(0 0 12px rgba(16,185,129,.18));
  opacity: .58;
  transform-origin: 100% 50%;
  animation: homePhase8Beam 9s ease-in-out infinite;
}
.home-heroCinema__beam--one{ top: 31%; transform: rotate(-13deg); }
.home-heroCinema__beam--two{ top: 61%; transform: rotate(11deg); animation-delay: -4.5s; opacity: .42; }

.home-heroCinema__node{
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(19, 88, 97, 0.92);
  border: 1px solid rgba(255,255,255,0.64);
  background: rgba(255,255,255,0.54);
  box-shadow: 0 20px 55px rgba(15, 43, 70, 0.12), inset 0 1px 0 rgba(255,255,255,0.76);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: homePhase8Float 7.5s ease-in-out infinite;
}
.home-heroCinema__node--project{ top: 25%; right: 13%; }
.home-heroCinema__node--talent{ top: 47%; right: 31%; color: #6d28d9; animation-delay: -2.2s; }
.home-heroCinema__node--safe{ top: 68%; right: 18%; color: #059669; animation-delay: -4.1s; }

.home-hero--phase8 .home-hero__gfx::before{
  background:
    linear-gradient(122deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.00) 42%),
    radial-gradient(980px 660px at 88% 22%, rgba(16,185,129,0.26) 0%, rgba(16,185,129,0) 63%),
    radial-gradient(880px 640px at 78% 84%, rgba(20,184,166,0.18) 0%, rgba(20,184,166,0) 66%),
    radial-gradient(760px 560px at 94% 44%, rgba(124,58,237,0.14) 0%, rgba(124,58,237,0) 72%),
    radial-gradient(680px 500px at 67% 28%, rgba(59,130,246,0.11) 0%, rgba(59,130,246,0) 72%),
    linear-gradient(90deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.06) 42%,
      rgba(255,255,255,0.25) 60%,
      rgba(255,255,255,0.64) 82%,
      rgba(255,255,255,0.96) 100%
    );
  animation: homePhase8Mesh 14s ease-in-out infinite alternate;
}

.home-hero--phase8 .home-hero__gfx::after{
  opacity: .54;
  animation: homePhase8Network 16s ease-in-out infinite alternate;
}

.home-hero--phase8 .home-hero__micro--phase7{
  margin-top: 16px;
}
.home-hero--phase8 .home-hero__micro--phase7 span{
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.home-hero--phase8 .home-hero__micro--phase7 span:hover{
  transform: translateY(-1px);
  border-color: rgba(19, 88, 97, 0.22);
  box-shadow: 0 16px 38px rgba(15, 43, 70, 0.08);
  background: rgba(255,255,255,0.86);
}

@keyframes homePhase8Pulse{
  0%{ transform: scale(.76); opacity: .72; }
  70%{ transform: scale(1.55); opacity: 0; }
  100%{ transform: scale(1.55); opacity: 0; }
}
@keyframes homePhase8Float{
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,-11px,0); }
}
@keyframes homePhase8Beam{
  0%,100%{ opacity: .34; filter: drop-shadow(0 0 8px rgba(16,185,129,.10)); }
  50%{ opacity: .68; filter: drop-shadow(0 0 18px rgba(16,185,129,.24)); }
}
@keyframes homePhase8Mesh{
  0%{ filter: saturate(1.04) contrast(1.01); transform: translate3d(0,0,0); }
  100%{ filter: saturate(1.16) contrast(1.03); transform: translate3d(10px,-8px,0); }
}
@keyframes homePhase8Network{
  0%{ background-position: 92% 18%, 0 0; }
  100%{ background-position: 86% 24%, 18px -12px; }
}

@media (max-width: 980px){
  .home-hero--phase8{ padding-top: 38px; }
  .home-hero--phase8 .home-hero__inner{ min-height: auto; }
  .home-hero--phase8 .home-hero__title{ max-width: 100%; }
  .home-heroCinema__beam,
  .home-heroCinema__node{ display:none; }
  .home-hero__launchMark{ font-size: 12px; }
}

@media (prefers-reduced-motion: reduce){
  .home-hero--phase8 *,
  .home-hero--phase8 *::before,
  .home-hero--phase8 *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .home-hero--phase8 .home-btn:hover,
  .home-hero--phase8 .home-hero__micro--phase7 span:hover{ transform: none; }
}

/* =====================================================
   Phase 8B — Mature premium Hero CTA redesign
   Scope: Home hero only. Removes noisy floating icon nodes and upgrades CTA/link hierarchy.
===================================================== */
.home-ultra .home-heroCinema__node{
  display:none !important;
}
.home-ultra .home-heroCinema__beam{
  opacity:.22 !important;
  filter:blur(.15px) drop-shadow(0 0 10px rgba(16,185,129,.10)) !important;
  animation-duration:14s !important;
}
.home-ultra .home-hero__cta--premium{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  margin-top:22px !important;
}
.home-ultra .home-btn--heroPrimary,
.home-ultra .home-btn--heroSecondary{
  font-family:inherit !important;
  min-height:54px !important;
  border-radius:18px !important;
  padding:0 20px !important;
  letter-spacing:-.01em !important;
  line-height:1 !important;
  transform:translateZ(0) !important;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, background .22s ease, color .22s ease !important;
}
.home-ultra .home-btn--heroPrimary{
  min-width:206px !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.24) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 36%),
    linear-gradient(135deg, #0f766e 0%, #10b981 52%, #128a3f 100%) !important;
  box-shadow:
    0 18px 42px rgba(16,185,129,.22),
    0 7px 18px rgba(15,43,70,.10),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.home-ultra .home-btn--heroPrimary:hover{
  transform:translateY(-3px) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 34%),
    linear-gradient(135deg, #0e6f67 0%, #0fb27d 50%, #0f7c38 100%) !important;
  box-shadow:
    0 26px 58px rgba(16,185,129,.30),
    0 10px 24px rgba(15,43,70,.12),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
}
.home-ultra .home-btn--heroSecondary{
  min-width:178px !important;
  color:#0f2b46 !important;
  background:rgba(255,255,255,.74) !important;
  border:1px solid rgba(15,43,70,.13) !important;
  box-shadow:0 14px 34px rgba(15,43,70,.075), inset 0 1px 0 rgba(255,255,255,.70) !important;
  backdrop-filter:blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.08) !important;
}
.home-ultra .home-btn--heroSecondary:hover{
  transform:translateY(-3px) !important;
  color:#135861 !important;
  border-color:rgba(19,88,97,.24) !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:0 22px 48px rgba(15,43,70,.10), inset 0 1px 0 rgba(255,255,255,.78) !important;
}
.home-ultra .home-btn__icon{
  width:28px !important;
  height:28px !important;
  border-radius:11px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(255,255,255,.18) !important;
  color:inherit !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.home-ultra .home-btn__text,
.home-ultra .home-btn__arrow{
  position:relative !important;
  z-index:1 !important;
}
.home-ultra .home-btn__arrow{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:12px !important;
  opacity:.86 !important;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease !important;
}
.home-ultra .home-btn:hover .home-btn__arrow{
  transform:translateX(-3px) !important;
  opacity:1 !important;
}
.home-ultra .home-hero__quickLinks{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  margin-top:8px !important;
  color:rgba(15,43,70,.62) !important;
  font-size:13px !important;
  font-weight:800 !important;
}
.home-ultra .home-hero__quickLinks a{
  font-family:inherit !important;
  display:inline-flex !important;
  align-items:center !important;
  min-height:30px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  color:rgba(15,43,70,.68) !important;
  background:rgba(255,255,255,.46) !important;
  border:1px solid rgba(15,43,70,.08) !important;
  box-shadow:0 8px 22px rgba(15,43,70,.045) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
  transition:transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease !important;
}
.home-ultra .home-hero__quickLinks a:hover{
  transform:translateY(-1px) !important;
  color:#135861 !important;
  background:rgba(255,255,255,.74) !important;
  border-color:rgba(19,88,97,.18) !important;
}
@media (max-width: 720px){
  .home-ultra .home-hero__cta--premium{gap:10px !important;}
  .home-ultra .home-btn--heroPrimary,
  .home-ultra .home-btn--heroSecondary{width:100% !important; min-width:0 !important; justify-content:center !important;}
  .home-ultra .home-hero__quickLinks{justify-content:center !important; font-size:12.5px !important;}
}
@media (prefers-reduced-motion: reduce){
  .home-ultra .home-heroCinema__beam{animation:none !important;}
  .home-ultra .home-btn--heroPrimary,
  .home-ultra .home-btn--heroSecondary,
  .home-ultra .home-hero__quickLinks a{transition:none !important;}
}


/* =====================================================
   v172 — Premium Trust + Conversion Polish
   Scope: Homepage only. Adds trustboard, improves hero spacing/CTA hierarchy,
   desktop/laptop alignment, SaaS micro-interactions and font inheritance.
===================================================== */
.home-ultra .home-hero{
  min-height: clamp(430px, 72vh, 560px);
  display:flex;
  align-items:center;
  padding-top: clamp(18px, 2.6vw, 34px) !important;
  padding-bottom: clamp(18px, 2.4vw, 32px) !important;
}
.home-ultra .home-hero__inner{
  width:100%;
}
.home-ultra .home-hero__grid{
  align-items:center !important;
  min-height:0;
}
.home-ultra .home-hero__copy{
  padding-top:0 !important;
  padding-inline-end:clamp(56px, 7.4vw, 104px) !important;
  max-width:680px;
}
.home-ultra .home-hero__launchMark{
  margin-bottom:4px !important;
  font-family:inherit !important;
}
.home-ultra .home-hero__title{
  margin:4px 0 5px !important;
  max-width:15.5ch;
  font-size:clamp(30px, 3.05vw, 44px) !important;
  line-height:1.16 !important;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.home-ultra .home-hero__subtitle{
  max-width:54ch !important;
  font-size:clamp(14px, 1.02vw, 16px) !important;
  line-height:1.75 !important;
}
.home-ultra .home-hero__cta{
  margin-top:10px !important;
  gap:10px !important;
}
.home-ultra .home-hero .home-btn{
  min-height:46px;
  border-radius:18px;
  font-family:inherit !important;
  will-change:transform;
}
.home-ultra .home-hero .home-btn--heroPrimary{
  min-width:206px;
  box-shadow:0 20px 48px rgba(19,88,97,.24);
}
.home-ultra .home-hero .home-btn--heroSecondary{
  min-width:174px;
  background:rgba(255,255,255,.86);
  border-color:rgba(19,88,97,.16);
}
.home-ultra .home-hero .home-btn:hover{
  transform:translateY(-3px);
}
.home-ultra .home-hero__quickLinks{
  margin-top:8px !important;
}
.home-ultra .home-hero__micro--phase7{
  margin-top:8px !important;
  gap:7px !important;
}
.home-ultra .home-proof__left,
.home-ultra .home-proof__right span{
  font-family:inherit !important;
}

.home-ultra .home-premium-trustboard{
  position:relative;
  z-index:1;
  margin:0 auto 18px;
  display:grid;
  grid-template-columns:minmax(260px,.82fr) minmax(0,1.18fr);
  gap:16px;
  align-items:stretch;
  padding:16px;
  border-radius:30px;
  background:linear-gradient(135deg, rgba(255,255,255,.88), rgba(240,253,244,.72));
  border:1px solid rgba(19,88,97,.13);
  box-shadow:0 24px 64px rgba(15,23,42,.075), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.home-ultra .home-premium-trustboard::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.55);
  pointer-events:none;
}
.home-ultra .home-premium-trustboard__head{
  position:relative;
  z-index:1;
  padding:16px;
  border-radius:24px;
  background:linear-gradient(145deg, rgba(19,88,97,.09), rgba(16,185,129,.075));
  border:1px solid rgba(19,88,97,.10);
}
.home-ultra .home-premium-trustboard__badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:fit-content;
  min-height:30px;
  padding:7px 11px;
  border-radius:999px;
  color:#135861;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(19,88,97,.12);
  font-size:12px;
  font-weight:950;
  font-family:inherit !important;
}
.home-ultra .home-premium-trustboard__head strong{
  display:block;
  margin-top:12px;
  color:#0f2b46;
  font-size:20px;
  line-height:1.75;
  font-weight:950;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.home-ultra .home-premium-trustboard__head p{
  margin:8px 0 0;
  color:rgba(17,24,39,.66);
  font-size:13.5px;
  line-height:2;
}
.home-ultra .home-premium-trustboard__stats{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.home-ultra .home-premium-stat{
  min-height:150px;
  padding:16px;
  border-radius:24px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(19,88,97,.105);
  box-shadow:0 16px 38px rgba(15,23,42,.055);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.home-ultra .home-premium-stat:hover{
  transform:translateY(-4px);
  border-color:rgba(19,88,97,.20);
  box-shadow:0 24px 54px rgba(15,23,42,.095);
}
.home-ultra .home-premium-stat span{
  display:inline-flex;
  width:fit-content;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(19,88,97,.075);
  color:#135861;
  font-size:11.5px;
  font-weight:950;
  font-family:inherit !important;
}
.home-ultra .home-premium-stat strong{
  display:block;
  margin-top:12px;
  color:#0f172a;
  font-size:17px;
  line-height:1.55;
  font-weight:950;
}
.home-ultra .home-premium-stat small{
  display:block;
  margin-top:7px;
  color:rgba(17,24,39,.58);
  font-size:12.5px;
  line-height:1.85;
}
.home-ultra .home-premium-trustboard__logos{
  position:relative;
  z-index:1;
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
  padding-top:2px;
}
.home-ultra .home-premium-trustboard__logos span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(19,88,97,.10);
  color:rgba(15,43,70,.84);
  font-size:12.5px;
  font-weight:900;
  font-family:inherit !important;
}
.home-ultra .home-premium-trustboard__logos i{
  color:#128a3f;
}
.home-ultra .home-live-marketplace{
  box-shadow:0 18px 44px rgba(15,23,42,.06);
}
.home-ultra .home-conversion-card{
  min-height:196px;
}
.home-ultra .home-conversion-trust__bar{
  margin-top:18px;
}
.home-ultra .home-conversion-trust__bar a,
.home-ultra .home-conversion-trust__actions a,
.home-ultra .home-premium-trustboard *{
  font-family:inherit !important;
}

@media (min-width:1021px) and (max-width:1366px){
  .home-ultra .home-hero{
    min-height:clamp(410px, 70vh, 535px);
  }
  .home-ultra .home-hero__copy{
    padding-inline-end:clamp(44px, 5.6vw, 78px) !important;
  }
  .home-ultra .home-hero__title{
    font-size:clamp(30px, 2.9vw, 40px) !important;
  }
}
@media (max-width:1020px){
  .home-ultra .home-hero{
    min-height:auto;
    align-items:flex-start;
  }
  .home-ultra .home-hero__copy{
    padding-inline-end:0 !important;
    max-width:760px;
  }
  .home-ultra .home-hero__title{
    max-width:100%;
  }
  .home-ultra .home-premium-trustboard{
    grid-template-columns:1fr;
  }
  .home-ultra .home-premium-trustboard__stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:760px){
  .home-ultra .home-premium-trustboard__stats{
    grid-template-columns:1fr;
  }
  .home-ultra .home-premium-stat{
    min-height:auto;
  }
}
@media (max-width:560px){
  .home-ultra .home-hero{
    padding-top:28px !important;
    padding-bottom:30px !important;
  }
  .home-ultra .home-hero__cta,
  .home-ultra .home-hero .home-btn{
    width:100%;
  }
  .home-ultra .home-premium-trustboard{
    padding:12px;
    border-radius:24px;
  }
  .home-ultra .home-premium-trustboard__head,
  .home-ultra .home-premium-stat{
    border-radius:20px;
  }
}
@media (prefers-reduced-motion: reduce){
  .home-ultra .home-premium-stat,
  .home-ultra .home-hero .home-btn{
    transition:none !important;
  }
}

/* =====================================================
   v173 — Premium Trust + Conversion Polish final pass
   Scope: Homepage only. Trust-first conversion clarity, laptop/desktop rhythm,
   richer proof chips, SaaS micro motion and safer mobile stacking.
===================================================== */
.home-ultra .home-conversion-trust__shell{
  padding:clamp(28px, 3.2vw, 42px) !important;
  border-radius:40px !important;
  background:
    radial-gradient(circle at 82% 12%, rgba(16,185,129,.13), transparent 32%),
    radial-gradient(circle at 12% 88%, rgba(19,88,97,.11), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(240,253,244,.82) 58%, rgba(237,250,246,.72)) !important;
  box-shadow:0 34px 92px rgba(15,43,70,.095), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
.home-ultra .home-conversion-trust__content{
  max-width:940px !important;
  margin-bottom:22px !important;
}
.home-ultra .home-conversion-trust__content .home-h2{
  max-width:820px;
  margin-inline:auto;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.home-ultra .home-conversion-trust__content .home-p{
  max-width:800px;
  margin-inline:auto;
  color:rgba(15,43,70,.68);
}
.home-ultra .home-conversion-trust__actions{
  margin-top:20px !important;
  gap:12px !important;
}
.home-ultra .home-conversion-trust__actions a{
  min-height:50px !important;
  padding:13px 19px !important;
  border-radius:18px !important;
  font-size:13.5px !important;
}
.home-ultra .home-conversion-trust__primary{
  background:linear-gradient(135deg,#0f766e 0%,#10b981 52%,#128a3f 100%) !important;
  box-shadow:0 22px 54px rgba(16,185,129,.25), 0 8px 20px rgba(15,43,70,.09) !important;
}
.home-ultra .home-conversion-trust__secondary{
  color:#0f2b46 !important;
  background:rgba(255,255,255,.86) !important;
}
.home-ultra .home-premium-proofline{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
  margin:14px auto 0;
  max-width:980px;
}
.home-ultra .home-premium-proofline span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:7px 11px;
  border-radius:999px;
  color:rgba(15,43,70,.74);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(19,88,97,.10);
  box-shadow:0 10px 24px rgba(15,23,42,.045);
  font-size:12px;
  font-weight:850;
  font-family:inherit !important;
}
.home-ultra .home-premium-proofline i{color:#10b981;}
.home-ultra .home-premium-trustboard{
  margin-top:4px !important;
  margin-bottom:18px !important;
  grid-template-columns:minmax(270px,.78fr) minmax(0,1.22fr) !important;
  gap:14px !important;
  padding:18px !important;
  border-radius:32px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(241,253,247,.82)),
    radial-gradient(circle at 20% 12%, rgba(109,93,252,.07), transparent 35%) !important;
}
.home-ultra .home-premium-trustboard__head{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:100%;
}
.home-ultra .home-premium-trustboard__head strong{
  font-size:clamp(18px, 1.55vw, 23px) !important;
  line-height:1.72 !important;
}
.home-ultra .home-premium-trustboard__stats{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
.home-ultra .home-premium-stat{
  position:relative;
  overflow:hidden;
  min-height:168px !important;
  padding:17px 15px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72)) !important;
}
.home-ultra .home-premium-stat::after{
  content:"";
  position:absolute;
  inset:auto 14px 0 14px;
  height:3px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg, rgba(19,88,97,.72), rgba(16,185,129,.48), rgba(109,93,252,.30));
  opacity:.72;
}
.home-ultra .home-premium-stat span{
  min-width:30px;
  min-height:30px;
  justify-content:center;
  padding:0 !important;
  color:#fff !important;
  background:linear-gradient(135deg,#135861,#10b981) !important;
  box-shadow:0 10px 20px rgba(16,185,129,.18);
}
.home-ultra .home-premium-stat strong{
  margin-top:13px !important;
  font-size:16px !important;
  line-height:1.65 !important;
}
.home-ultra .home-premium-trustboard__logos{
  justify-content:flex-start !important;
  padding:3px 2px 0 !important;
}
.home-ultra .home-premium-trustboard__logos span{
  min-height:38px !important;
  padding:8px 12px !important;
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
}
.home-ultra .home-premium-trustboard__logos span:hover{
  transform:translateY(-2px);
  border-color:rgba(19,88,97,.18);
  background:#fff;
}
.home-ultra .home-conversion-trust__grid{
  gap:16px !important;
}
.home-ultra .home-conversion-card{
  min-height:184px !important;
  padding:21px !important;
}
.home-ultra .home-conversion-card h3{
  letter-spacing:-.02em;
}
.home-ultra .home-conversion-trust__bar{
  gap:11px !important;
  padding:15px !important;
  background:rgba(255,255,255,.78) !important;
}
.home-ultra .home-conversion-trust__bar a{
  min-height:40px !important;
  padding:9px 13px !important;
  font-size:12.5px !important;
}
@media (min-width:1021px) and (max-width:1366px){
  .home-ultra .home-premium-trustboard{
    grid-template-columns:1fr !important;
  }
  .home-ultra .home-premium-trustboard__stats{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
  .home-ultra .home-premium-stat{
    min-height:150px !important;
  }
}
@media (max-width:1020px){
  .home-ultra .home-premium-trustboard{
    grid-template-columns:1fr !important;
  }
  .home-ultra .home-premium-trustboard__stats{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .home-ultra .home-premium-trustboard__logos{
    justify-content:center !important;
  }
}
@media (max-width:680px){
  .home-ultra .home-conversion-trust__shell{
    padding:22px 16px !important;
    border-radius:30px !important;
  }
  .home-ultra .home-premium-trustboard{
    padding:12px !important;
    border-radius:24px !important;
  }
  .home-ultra .home-premium-trustboard__stats{
    grid-template-columns:1fr !important;
  }
  .home-ultra .home-premium-stat{
    min-height:auto !important;
  }
  .home-ultra .home-premium-proofline span,
  .home-ultra .home-premium-trustboard__logos span{
    width:100%;
    justify-content:center;
    text-align:center;
  }
}
@media (prefers-reduced-motion: reduce){
  .home-ultra .home-premium-trustboard__logos span,
  .home-ultra .home-premium-stat,
  .home-ultra .home-premium-proofline span{
    transition:none !important;
  }
}

/* v174 — Service Categories Ultra UI + Conversion Hierarchy
   Scope: Home popular-services section only. */
.home-ultra .home-popular-services{
  isolation:isolate;
  padding-block:clamp(54px, 7vw, 86px);
}
.home-ultra .home-popular-services__head{
  max-width:860px;
  margin-bottom:32px;
}
.home-ultra .home-popular-services__head .home-h2{
  letter-spacing:-.02em;
}
.home-ultra .home-popular-services__proof{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:18px;
}
.home-ultra .home-popular-services__proof span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:7px 12px;
  border-radius:999px;
  color:#17434a;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(19,88,97,.12);
  box-shadow:0 10px 26px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.92);
  font-size:12.5px;
  font-weight:900;
  font-family:inherit !important;
}
.home-ultra .home-popular-services__proof i{
  color:#10b981;
  font-size:13px;
}
.home-ultra .home-popular-services__grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
}
.home-ultra .home-service-card{
  min-height:222px;
  padding:22px 20px 19px;
  border-radius:30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.82)),
    radial-gradient(circle at 18% 14%, rgba(16,185,129,.08), transparent 36%);
  border-color:rgba(19,88,97,.14);
  box-shadow:0 22px 64px rgba(15,23,42,.085), inset 0 1px 0 rgba(255,255,255,.96);
}
.home-ultra .home-service-card::before{
  background:linear-gradient(135deg, rgba(19,88,97,.24), rgba(16,185,129,.16), rgba(109,93,252,.13));
  opacity:.9;
}
.home-ultra .home-service-card::after{
  left:20px;
  right:20px;
  bottom:16px;
  height:3px;
  opacity:.42;
}
.home-ultra .home-service-card:hover{
  transform:translate3d(0,-8px,0) scale(1.01);
  border-color:rgba(19,88,97,.28);
  box-shadow:0 34px 84px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.98);
}
.home-ultra .home-service-card__icon{
  width:52px;
  height:52px;
  border-radius:22px;
  font-size:19px;
}
.home-ultra .home-service-card strong{
  font-size:16px;
  line-height:1.65;
  letter-spacing:-.01em;
  color:#0f2b46;
}
.home-ultra .home-service-card small{
  min-height:70px;
  color:#526173;
  font-size:12.6px;
  line-height:1.9;
}
.home-ultra .home-service-card__meta{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  max-width:100%;
  min-height:30px;
  padding:4px 10px;
  border-radius:999px;
  color:#135861;
  background:rgba(19,88,97,.07);
  border:1px solid rgba(19,88,97,.10);
  font-size:11.5px;
  line-height:1.6;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:inherit !important;
}
.home-ultra .home-service-card__cta{
  min-height:34px;
  padding:5px 0;
  font-size:12.8px;
}
.home-ultra .home-popular-services__footer{
  margin-top:22px;
  align-items:center;
  background:linear-gradient(135deg, rgba(255,255,255,.88), rgba(239,253,248,.82));
}
.home-ultra .home-popular-services__footer strong{
  display:block;
  margin-bottom:3px;
  color:#0f2b46;
  font-size:14px;
  line-height:1.7;
  font-weight:950;
  font-family:inherit !important;
}
.home-ultra .home-popular-services__button{
  min-height:48px;
  padding-inline:22px;
  white-space:nowrap;
}
@media (min-width: 901px) and (max-width: 1180px){
  .home-ultra .home-popular-services__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .home-ultra .home-service-card{
    min-height:204px;
  }
  .home-ultra .home-service-card small{
    min-height:46px;
  }
}
@media (max-width: 900px){
  .home-ultra .home-popular-services__proof{
    justify-content:flex-start;
  }
  .home-ultra .home-popular-services__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .home-ultra .home-service-card{
    min-height:auto;
  }
  .home-ultra .home-service-card small{
    min-height:auto;
  }
}
@media (max-width: 620px){
  .home-ultra .home-popular-services__grid{
    grid-template-columns:1fr;
  }
  .home-ultra .home-popular-services__proof span{
    width:100%;
    justify-content:flex-start;
  }
  .home-ultra .home-service-card__meta{
    white-space:normal;
  }
  .home-ultra .home-popular-services__footer{
    align-items:stretch;
  }
  .home-ultra .home-popular-services__button{
    white-space:normal;
  }
}
@media (prefers-reduced-motion: reduce){
  .home-ultra .home-service-card:hover{
    transform:none !important;
  }
}

/* v175 — Why Freelancito Storytelling + SEO Semantic Polish */
.home-ultra .home-how-flow__shell{
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82)),
    radial-gradient(circle at 86% 10%, rgba(16,185,129,.12), transparent 34%),
    radial-gradient(circle at 14% 84%, rgba(59,130,246,.075), transparent 30%);
}
.home-ultra .home-how-flow__head .home-p{max-width:760px;margin-inline:auto;}
.home-ultra .home-how-track{
  isolation:isolate;
  transform:translateZ(0);
}
.home-ultra .home-how-track::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(145deg, rgba(19,88,97,.045), transparent 45%, rgba(16,185,129,.045));
  opacity:.9;
  pointer-events:none;
}
.home-ultra .home-how-step strong,
.home-ultra .home-how-insight strong{letter-spacing:-.01em;}
.home-ultra .home-how-flow__insights{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
.home-ultra .home-how-insight{
  display:grid;
  grid-template-columns:42px 1fr;
  grid-template-areas:"icon title" "icon text";
  column-gap:12px;
  padding:15px;
  border-radius:22px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(19,88,97,.105);
  box-shadow:0 16px 38px rgba(15,23,42,.052), inset 0 1px 0 rgba(255,255,255,.9);
}
.home-ultra .home-how-insight span{
  grid-area:icon;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:#135861;
  background:rgba(19,88,97,.075);
  border:1px solid rgba(19,88,97,.08);
}
.home-ultra .home-how-flow__insights .home-how-insight:nth-child(1) span{color:#0f766e;background:linear-gradient(145deg,#f7fffd,#ebfbf7);border-color:rgba(15,118,110,.12);}
.home-ultra .home-how-flow__insights .home-how-insight:nth-child(2) span{color:#2563eb;background:linear-gradient(145deg,#fbfdff,#eef5ff);border-color:rgba(37,99,235,.12);}
.home-ultra .home-how-flow__insights .home-how-insight:nth-child(3) span{color:#b45309;background:linear-gradient(145deg,#fffdf8,#fff5e8);border-color:rgba(180,83,9,.12);}
.home-ultra .home-how-insight strong{
  grid-area:title;
  color:#0f172a;
  font-size:13.5px;
  line-height:1.8;
  font-weight:950;
}
.home-ultra .home-how-insight small{
  grid-area:text;
  color:#64748b;
  font-size:11.7px;
  line-height:1.85;
}


/* v1348 — How Flow now uses real Font Awesome icons; CSS-drawn glyph generation removed. */
.home-ultra .home-how-flow__conversion{
  margin-top:16px;
  background:
    linear-gradient(135deg, rgba(19,88,97,.095), rgba(16,185,129,.095)),
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.72), transparent 36%);
}
.home-ultra .home-how-track__cta,
.home-ultra .home-how-flow__actions a,
.home-ultra .home-how-insight,
.home-ultra .home-how-step{font-family:inherit !important;}
@media (min-width:901px) and (max-width:1240px){
  .home-ultra .home-how-flow__shell{padding:28px;}
  .home-ultra .home-how-track{padding:20px;}
  .home-ultra .home-how-step small,.home-ultra .home-how-insight small{font-size:11.5px;}
}
@media (max-width:900px){
  .home-ultra .home-how-flow__insights{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .home-ultra .home-how-flow__insights{gap:10px;}
  .home-ultra .home-how-insight{grid-template-columns:38px 1fr;padding:13px;border-radius:20px;}
  .home-ultra .home-how-insight span{width:38px;height:38px;border-radius:14px;}
}
@media (prefers-reduced-motion: reduce){
  .home-ultra .home-how-step,
  .home-ultra .home-how-track__cta,
  .home-ultra .home-how-flow__actions a{transition:none !important;}
}

/* v180 — Home FAQ final consolidated design
   Cleanup phase: consolidates previous layered FAQ styles into one scoped contract.
   Goals: compact homepage footprint, relevant marketplace copy, no divider between question and answer, mobile-first readable accordion. */
.home-ultra .home-faqSection--premium{
  padding: clamp(22px, 3.2vw, 44px) 0 clamp(24px, 3.4vw, 48px) !important;
  min-height: auto !important;
  contain: layout paint style;
}
.home-ultra .home-faqSection__shell{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(18px, 2.7vw, 30px) !important;
  border-radius: 30px !important;
  border: 1px solid rgba(19, 88, 97, .13) !important;
  background: linear-gradient(135deg, #f7fffb 0%, #ffffff 54%, #f0faf5 100%) !important;
  box-shadow: 0 22px 64px rgba(15, 43, 70, .08), inset 0 1px 0 rgba(255,255,255,.94) !important;
}
.home-ultra .home-faqSection__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.home-ultra .home-faqSection__orb{ position:absolute; width:210px; height:210px; border-radius:999px; filter:blur(10px); opacity:.24; background:rgba(19,88,97,.14); }
.home-ultra .home-faqSection__orb--one{ top:-110px; right:-70px; }
.home-ultra .home-faqSection__orb--two{ left:-90px; bottom:-122px; background:rgba(46,204,113,.16); }
.home-ultra .home-faqSection__gridline{ position:absolute; inset:0; opacity:.24; background-image:linear-gradient(rgba(19,88,97,.055) 1px, transparent 1px),linear-gradient(90deg, rgba(19,88,97,.045) 1px, transparent 1px); background-size:38px 38px; mask-image:radial-gradient(circle at center,#000 0%,transparent 74%); }
.home-ultra .home-faqSection__head{ max-width:820px !important; margin:0 auto clamp(14px,2vw,22px) !important; text-align:center !important; }
.home-ultra .home-faqSection__eyebrow{ gap:8px !important; margin-inline:auto !important; padding:8px 14px !important; background:rgba(255,255,255,.78) !important; border-color:rgba(19,88,97,.16) !important; box-shadow:0 10px 24px rgba(15,43,70,.06) !important; }
.home-ultra .home-faqSection__head .home-h2{ margin-bottom:8px !important; line-height:1.45 !important; }
.home-ultra .home-faqSection__head .home-p{ max-width:760px !important; margin-inline:auto !important; line-height:2 !important; text-align:justify !important; text-align-last:center !important; }
.home-ultra .home-faqSection__layout{ display:grid !important; grid-template-columns:minmax(220px,.28fr) minmax(0,1fr) !important; gap:clamp(14px,2vw,22px) !important; align-items:start !important; }
.home-ultra .home-faqSection__aside{ position:relative !important; top:auto !important; padding:18px !important; border-radius:24px !important; border:1px solid rgba(19,88,97,.13) !important; background:rgba(255,255,255,.72) !important; box-shadow:0 18px 44px rgba(15,43,70,.07), inset 0 1px 0 rgba(255,255,255,.92) !important; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.home-ultra .home-faqSection__asideIcon{ width:44px !important; height:44px !important; display:inline-flex; align-items:center; justify-content:center; border-radius:15px !important; color:#fff; background:linear-gradient(135deg,#135861,#2fbf71); box-shadow:0 14px 28px rgba(19,88,97,.20); margin-bottom:4px !important; }
.home-ultra .home-faqSection__asideIcon svg{ width:24px !important; height:24px !important; display:block !important; overflow:visible; }
.home-ultra .home-faqSection__aside h3{ margin:0 0 6px !important; font:inherit !important; font-size:clamp(16px,1.25vw,19px) !important; font-weight:950 !important; color:#0f2b46 !important; line-height:1.65 !important; }
.home-ultra .home-faqSection__aside p{ margin:0 !important; color:rgba(17,24,39,.68) !important; font-size:13px !important; line-height:1.9 !important; text-align:justify !important; text-align-last:right !important; }
.home-ultra .home-faqSection__trustChips{ display:flex !important; flex-wrap:wrap !important; gap:7px !important; margin-top:12px !important; }
.home-ultra .home-faqSection__trustChips span{ display:inline-flex !important; align-items:center !important; gap:6px !important; padding:6px 9px !important; border-radius:999px !important; background:rgba(19,88,97,.08) !important; color:#135861 !important; border:1px solid rgba(19,88,97,.11) !important; font-size:11.5px !important; font-weight:900 !important; font-family:inherit !important; }
.home-ultra .home-faq{ margin-top:0 !important; display:grid !important; grid-template-columns:1fr !important; gap:9px !important; }
.home-ultra .home-faq__item{ position:relative !important; border-radius:18px !important; border:1px solid rgba(19,88,97,.13) !important; background:rgba(255,255,255,.90) !important; box-shadow:0 12px 30px rgba(15,43,70,.055), inset 0 1px 0 rgba(255,255,255,.92) !important; overflow:hidden !important; transition:border-color .18s ease, background .18s ease, box-shadow .18s ease !important; }
.home-ultra .home-faq__item::before{ content:""; position:absolute; inset-inline-start:0; top:13px; bottom:13px; width:3px; border-radius:999px; background:linear-gradient(180deg,#135861,#2fbf71); opacity:.28; transition:opacity .18s ease; }
.home-ultra .home-faq__item:hover,.home-ultra .home-faq__item.is-open{ transform:none !important; border-color:rgba(19,88,97,.23) !important; background:rgba(255,255,255,.97) !important; box-shadow:0 16px 38px rgba(15,43,70,.075), inset 0 1px 0 rgba(255,255,255,.96) !important; }
.home-ultra .home-faq__item.is-open::before{ opacity:1 !important; }
.home-ultra .home-faq__q{ width:100% !important; min-height:52px !important; padding:12px 18px 12px 14px !important; border:0 !important; border-bottom:0 !important; box-shadow:none !important; background:transparent !important; color:#0f2b46 !important; font:inherit !important; font-size:clamp(13.5px,1vw,15.5px) !important; font-weight:900 !important; letter-spacing:-.02em !important; line-height:1.75 !important; }
.home-ultra .home-faq__qText{ display:inline-flex !important; align-items:center !important; gap:10px !important; line-height:1.85 !important; }
.home-ultra .home-faq__qText::before{ content:"FAQ"; direction:ltr; min-width:38px !important; height:21px !important; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:rgba(19,88,97,.08); color:#135861; border:1px solid rgba(19,88,97,.10); font-size:9px !important; font-weight:950; letter-spacing:.04em; }
.home-ultra .home-faq__q::before,.home-ultra .home-faq__q::after{ border:0 !important; box-shadow:none !important; }
.home-ultra .home-faq__q::after{ flex:0 0 auto; width:30px !important; height:30px !important; display:inline-flex; align-items:center; justify-content:center; border-radius:10px !important; background:rgba(19,88,97,.08); color:#135861 !important; transition:transform .18s ease,background .18s ease,color .18s ease !important; }
.home-ultra .home-faq__item.is-open .home-faq__q::after{ background:#135861 !important; color:#fff !important; transform:rotate(180deg); }
.home-ultra .home-faq__a{ display:block !important; padding:0 18px 14px 18px !important; border:0 !important; border-top:0 !important; box-shadow:none !important; background:transparent !important; color:rgba(17,24,39,.70) !important; font:inherit !important; font-size:13.5px !important; line-height:1.9 !important; animation:homeFaqReveal .20s ease both; }
.home-ultra .home-faq__a[hidden]{ display:none !important; }
.home-ultra .home-faq__a::before,.home-ultra .home-faq__a::after,.home-ultra .home-faq__a p::before,.home-ultra .home-faq__a p::after{ content:none !important; display:none !important; border:0 !important; box-shadow:none !important; }
.home-ultra .home-faq__a p{ margin:0 !important; padding-top:0 !important; border:0 !important; box-shadow:none !important; text-align:justify !important; text-align-last:right !important; }
.home-ultra .home-faqSection input,.home-ultra .home-faqSection select,.home-ultra .home-faqSection textarea,.home-ultra .home-faqSection button,.home-ultra .home-faqSection label,.home-ultra .home-faqSection a,.home-ultra .home-faqSection span{ font-family:inherit !important; }
@keyframes homeFaqReveal{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
@media (max-width:980px){
  .home-ultra .home-faqSection__layout{ grid-template-columns:1fr !important; }
  .home-ultra .home-faqSection__aside{ display:grid !important; grid-template-columns:auto 1fr; align-items:start; column-gap:12px; }
  .home-ultra .home-faqSection__trustChips{ grid-column:1 / -1; }
}
@media (max-width:640px){
  .home-ultra .home-faqSection--premium{ padding:20px 0 24px !important; }
  .home-ultra .home-faqSection__shell{ padding:16px !important; border-radius:24px !important; }
  .home-ultra .home-faqSection__head{ text-align:center !important; }
  .home-ultra .home-faqSection__head .home-p{ text-align:justify !important; text-align-last:center !important; }
  .home-ultra .home-faqSection__aside{ display:block !important; padding:15px !important; }
  .home-ultra .home-faq__q{ min-height:48px !important; padding:11px 14px !important; }
  .home-ultra .home-faq__qText{ flex-direction:row !important; align-items:center !important; gap:8px !important; }
  .home-ultra .home-faq__a{ padding:0 14px 13px 14px !important; }
}
@media (prefers-reduced-motion:reduce){
  .home-ultra .home-faq__item,.home-ultra .home-faq__q::after,.home-ultra .home-faq__a{ transition:none !important; animation:none !important; }
}


/* =====================================================
   Phase 182 — Homepage Bottom Rewrite
   Clean, role-based sections: Safety Hub + FAQ + SEO Discovery + Final Choice.
   No old trust patch classes are required for the new Home structure.
====================================================== */
.home-ultra .home-safetyHub,
.home-ultra .home-seoFoundation,
.home-ultra .home-final{
  font-family:inherit !important;
}
.home-ultra .home-safetyHub{
  padding:clamp(28px, 4vw, 48px) 0 clamp(22px, 3vw, 34px);
  position:relative;
}
.home-ultra .home-safetyHub__shell{
  position:relative;
  display:grid;
  grid-template-columns:minmax(260px, .82fr) minmax(0, 1.18fr);
  gap:clamp(16px, 2.4vw, 28px);
  align-items:stretch;
  padding:clamp(18px, 2.4vw, 28px);
  border-radius:30px;
  border:1px solid rgba(19,88,97,.12);
  background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(242,252,248,.88));
  box-shadow:0 24px 70px rgba(15,43,70,.075);
  overflow:hidden;
}
.home-ultra .home-safetyHub__shell::before{
  content:"";
  position:absolute;
  inset:-130px auto auto -90px;
  width:280px;
  height:280px;
  border-radius:999px;
  background:rgba(47,191,113,.13);
  filter:blur(10px);
  pointer-events:none;
}
.home-ultra .home-safetyHub__intro{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
}
.home-ultra .home-safetyHub__eyebrow{
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 13px;
  border-radius:999px;
  background:#ecfdf5;
  border:1px solid rgba(19,88,97,.13);
  color:#135861;
  font-size:13px;
  font-weight:950;
}
.home-ultra .home-safetyHub__intro .home-h2{
  margin:0;
  color:#0f2b46;
  font-size:clamp(23px, 2.8vw, 34px);
  line-height:1.58;
  letter-spacing:-.025em;
  text-align:right;
}
.home-ultra .home-safetyHub__intro .home-p{
  margin:0;
  color:rgba(17,24,39,.68);
  font-size:15px;
  line-height:2;
  text-align:justify;
  text-align-last:right;
}
.home-ultra .home-safetyHub__cards{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.home-ultra .home-safetyHub__cards article{
  min-height:190px;
  padding:17px;
  border-radius:23px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(19,88,97,.11);
  box-shadow:0 14px 34px rgba(15,43,70,.055);
}
.home-ultra .home-safetyHub__cards span{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  background:rgba(19,88,97,.08);
  color:#135861;
  margin-bottom:12px;
}
.home-ultra .home-safetyHub__cards h3{
  margin:0 0 8px;
  font-size:16px;
  font-weight:950;
  color:#0f2b46;
}
.home-ultra .home-safetyHub__cards p{
  margin:0;
  color:rgba(17,24,39,.66);
  font-size:13.5px;
  line-height:1.9;
  text-align:justify;
  text-align-last:right;
}
.home-ultra .home-safetyHub__links{
  grid-column:1 / -1;
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  padding-top:4px;
}
.home-ultra .home-safetyHub__links a{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 12px;
  border-radius:15px;
  background:#fff;
  border:1px solid rgba(19,88,97,.12);
  color:#135861;
  text-decoration:none;
  font-size:13.5px;
  font-weight:900;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.home-ultra .home-safetyHub__links a:hover{
  transform:translateY(-2px);
  border-color:rgba(19,88,97,.25);
  box-shadow:0 12px 28px rgba(15,43,70,.06);
}

.home-ultra .home-faqSection--premium{
  padding:clamp(24px, 3.4vw, 40px) 0 !important;
}
.home-ultra .home-faqSection__shell{
  padding:clamp(16px, 2.4vw, 24px) !important;
}
.home-ultra .home-faqSection__head .home-p{
  max-width:720px !important;
}
.home-ultra .home-faq__item,
.home-ultra .home-faq__q,
.home-ultra .home-faq__a,
.home-ultra .home-faq__a p{
  border-top:0 !important;
  border-bottom:0 !important;
  box-shadow:none;
}
.home-ultra .home-faq__qText::before{
  content:"" !important;
  display:none !important;
}
.home-ultra .home-faq__a{
  padding-top:0 !important;
}

.home-ultra .home-seoFoundation{
  padding:clamp(24px, 3.5vw, 44px) 0 !important;
}
.home-ultra .home-seoFoundation__box{
  grid-template-columns:minmax(0, 1.25fr) minmax(230px, .75fr) !important;
  gap:clamp(16px, 2.2vw, 26px) !important;
  padding:clamp(18px, 2.4vw, 28px) !important;
  border-radius:30px !important;
  background:linear-gradient(135deg, #ffffff, #f8fffb) !important;
  border:1px solid rgba(19,88,97,.11) !important;
}
.home-ultra .home-seoFoundation__intro p{
  text-align:justify !important;
  text-align-last:right !important;
}
.home-ultra .home-seoFoundation__aside{
  align-self:stretch;
  align-content:center;
}

.home-ultra .home-final{
  padding:clamp(24px, 3.5vw, 44px) 0 clamp(34px, 5vw, 60px) !important;
}
.home-ultra .home-final__box{
  grid-template-columns:minmax(0, 1fr) minmax(240px, .36fr) !important;
  gap:clamp(16px, 2vw, 24px) !important;
  padding:clamp(18px, 2.4vw, 28px) !important;
  border-radius:30px !important;
  background:#0f2b46 !important;
  color:#fff !important;
  border:0 !important;
}
.home-ultra .home-final__eyebrow,
.home-ultra .home-final h2,
.home-ultra .home-final p{
  color:#fff !important;
}
.home-ultra .home-final p{
  opacity:.82;
  text-align:justify !important;
  text-align-last:right !important;
}
.home-ultra .home-final__links{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
.home-ultra .home-final__links a{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.13) !important;
  color:#fff !important;
}
.home-ultra .home-final__action{
  justify-items:stretch !important;
  align-content:center;
  text-align:center;
  min-width:0 !important;
  padding:16px;
  border-radius:24px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.home-ultra .home-final__action strong{
  display:block;
  color:#fff;
  font-size:16px;
  font-weight:950;
  line-height:1.7;
  margin-bottom:10px;
}
.home-ultra .home-final__action .home-btn{
  width:100%;
}
.home-ultra .home-final__action span{
  color:rgba(255,255,255,.74) !important;
  margin-top:10px;
}

@media (max-width: 980px){
  .home-ultra .home-safetyHub__shell,
  .home-ultra .home-seoFoundation__box,
  .home-ultra .home-final__box{
    grid-template-columns:1fr !important;
  }
  .home-ultra .home-safetyHub__cards{
    grid-template-columns:1fr;
  }
  .home-ultra .home-safetyHub__cards article{
    min-height:0;
  }
  .home-ultra .home-safetyHub__links{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px){
  .home-ultra .home-safetyHub{padding:22px 0 18px;}
  .home-ultra .home-safetyHub__shell,
  .home-ultra .home-seoFoundation__box,
  .home-ultra .home-final__box{
    border-radius:24px !important;
    padding:16px !important;
  }
  .home-ultra .home-safetyHub__intro,
  .home-ultra .home-safetyHub__intro .home-h2{
    text-align:center;
  }
  .home-ultra .home-safetyHub__eyebrow{
    margin-inline:auto;
  }
  .home-ultra .home-safetyHub__intro .home-p{
    text-align:justify;
    text-align-last:center;
  }
  .home-ultra .home-safetyHub__links,
  .home-ultra .home-final__links{
    grid-template-columns:1fr !important;
  }
  .home-ultra .home-faqSection--premium{
    padding:20px 0 22px !important;
  }
}


/* Phase 183 FIX — FAQ initial state, no answer divider, broader content copy support */
.home-ultra .home-faq__item:not(.is-open) .home-faq__a{
  display:none !important;
}
.home-ultra .home-faq__item.is-open .home-faq__a{
  display:block !important;
}
.home-ultra .home-faq__q,
.home-ultra .home-faq__a,
.home-ultra .home-faq__a p{
  border:0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}
.home-ultra .home-faq__q::before,
.home-ultra .home-faq__a::before,
.home-ultra .home-faq__a::after,
.home-ultra .home-faq__a p::before,
.home-ultra .home-faq__a p::after{
  content:none !important;
  display:none !important;
}


/* =====================================================
   PHASE 1 — Hero Final Polish (v185)
   Scope: Home hero only. Final alignment, rhythm, CTA hierarchy,
   responsive typography and subtle visual composition refinement.
===================================================== */
.home-ultra .home-hero--phase8,
.home-ultra .home-hero--phase8 *{
  font-family: inherit !important;
}
.home-ultra .home-hero--phase8{
  min-height: clamp(420px, 66vh, 535px) !important;
  padding-block: clamp(18px, 2.2vw, 30px) !important;
  border-radius: clamp(24px, 3vw, 38px) !important;
  isolation: isolate;
}
.home-ultra .home-hero--phase8 .home-hero__inner{
  min-height: clamp(360px, 39vw, 480px) !important;
  padding-block: clamp(18px, 2vw, 28px) !important;
}
.home-ultra .home-hero--phase8 .home-hero__grid{
  grid-template-columns: minmax(0, .98fr) minmax(300px, 1.02fr) !important;
  min-height: 0 !important;
  align-items: center !important;
}
.home-ultra .home-hero--phase8 .home-hero__copy{
  max-width: 665px !important;
  padding-inline-end: clamp(46px, 6.4vw, 92px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}
.home-ultra .home-hero--phase8 .home-hero__launchMark{
  margin-bottom: 7px !important;
  padding: 7px 12px !important;
  color: rgba(15,43,70,.78) !important;
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(19,88,97,.16) !important;
}
.home-ultra .home-hero--phase8 .home-hero__title{
  max-width: 16.25ch !important;
  margin: 0 0 7px !important;
  font-size: clamp(31px, 3.12vw, 46px) !important;
  line-height: 1.19 !important;
  letter-spacing: -.042em !important;
  color: #0f2b46 !important;
}
.home-ultra .home-hero--phase8 .home-hero__subtitle{
  max-width: 57ch !important;
  margin: 0 !important;
  font-size: clamp(14.5px, 1.06vw, 16.25px) !important;
  line-height: 1.82 !important;
  color: rgba(15,43,70,.72) !important;
}
.home-ultra .home-hero--phase8 .home-hero__cta--premium{
  margin-top: 16px !important;
  gap: 11px !important;
}
.home-ultra .home-hero--phase8 .home-btn--heroPrimary,
.home-ultra .home-hero--phase8 .home-btn--heroSecondary{
  min-height: 50px !important;
  border-radius: 17px !important;
  padding-inline: 18px !important;
}
.home-ultra .home-hero--phase8 .home-btn--heroPrimary{
  min-width: 214px !important;
}
.home-ultra .home-hero--phase8 .home-btn--heroSecondary{
  min-width: 176px !important;
}
.home-ultra .home-hero--phase8 .home-hero__quickLinks{
  margin-top: 10px !important;
  gap: 7px !important;
}
.home-ultra .home-hero--phase8 .home-hero__micro--phase7{
  margin-top: 10px !important;
  gap: 8px !important;
  max-width: none !important;
}
.home-ultra .home-hero--phase8 .home-hero__micro--phase7 span{
  min-height: 34px !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  line-height: 1.45 !important;
}
@media (min-width: 981px){
  .home-ultra .home-hero--phase8 .home-hero__micro--phase7{
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__micro--phase7 span{
    flex: 0 0 auto !important;
    padding-inline: 9px !important;
    white-space: nowrap !important;
  }
}
.home-ultra .home-hero--phase8 .home-hero__bg{
  background-position: 48% center !important;
  transform: scale(1.005) !important;
}
.home-ultra .home-hero--phase8 .home-hero__gfx::before{
  opacity: .95 !important;
  background:
    linear-gradient(112deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 36%),
    radial-gradient(780px 520px at 86% 26%, rgba(16,185,129,.24) 0%, rgba(16,185,129,0) 62%),
    radial-gradient(720px 520px at 80% 78%, rgba(124,58,237,.13) 0%, rgba(124,58,237,0) 70%),
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 42%, rgba(255,255,255,.52) 77%, rgba(255,255,255,.97) 100%) !important;
}
.home-ultra .home-hero--phase8 .home-heroCinema__beam{
  display: block !important;
  width: min(32vw, 405px) !important;
  right: 8.4% !important;
  opacity: .32 !important;
}
.home-ultra .home-hero--phase8 .home-heroCinema__node{
  display: inline-flex !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 16px !important;
  opacity: .82 !important;
}
.home-ultra .home-hero--phase8 .home-heroCinema__node i{
  font-size: 15px !important;
}
.home-ultra .home-hero--phase8 .home-heroCinema__node--project{ top: 27% !important; right: 11.5% !important; }
.home-ultra .home-hero--phase8 .home-heroCinema__node--talent{ top: 48% !important; right: 28% !important; }
.home-ultra .home-hero--phase8 .home-heroCinema__node--safe{ top: 68% !important; right: 15% !important; }

@media (min-width: 1280px){
  .home-ultra .home-hero--phase8 .home-hero__copy{ padding-inline-end: clamp(64px, 7vw, 112px) !important; }
}
@media (max-width: 1180px){
  .home-ultra .home-hero--phase8{ min-height: clamp(410px, 60vh, 510px) !important; }
  .home-ultra .home-hero--phase8 .home-hero__copy{ padding-inline-end: clamp(28px, 4.6vw, 64px) !important; }
  .home-ultra .home-hero--phase8 .home-hero__title{ font-size: clamp(29px, 3.3vw, 40px) !important; }
}
@media (max-width: 980px){
  .home-ultra .home-hero--phase8{
    min-height: auto !important;
    padding-block: 30px !important;
    border-radius: 28px !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__grid{ grid-template-columns: 1fr !important; }
  .home-ultra .home-hero--phase8 .home-hero__copy{
    max-width: 100% !important;
    padding-inline: 22px !important;
    align-items: flex-start !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__title{ max-width: 100% !important; }
  .home-ultra .home-hero--phase8 .home-heroCinema__beam,
  .home-ultra .home-hero--phase8 .home-heroCinema__node{ display:none !important; }
}
@media (max-width: 720px){
  .home-ultra .home-hero--phase8{ padding-block: 24px !important; border-radius: 24px !important; }
  .home-ultra .home-hero--phase8 .home-hero__copy{ padding-inline: 14px !important; }
  .home-ultra .home-hero--phase8 .home-hero__launchMark{ font-size: 11.75px !important; line-height: 1.75 !important; }
  .home-ultra .home-hero--phase8 .home-hero__title{
    font-size: clamp(27px, 7.2vw, 36px) !important;
    line-height: 1.38 !important;
    letter-spacing: -.025em !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__subtitle{
    font-size: clamp(14.5px, 4.2vw, 17px) !important;
    line-height: 1.92 !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__cta--premium{ width: 100% !important; margin-top: 14px !important; }
  .home-ultra .home-hero--phase8 .home-hero__quickLinks{ justify-content: flex-start !important; }
  .home-ultra .home-hero--phase8 .home-hero__micro--phase7{ gap: 7px !important; }
  .home-ultra .home-hero--phase8 .home-hero__micro--phase7 span{ width: 100% !important; justify-content: flex-start !important; }
}

/* =====================================================
   Phase 2 — Premium Trust Layer
   Scope: Home only (.home-ultra)
   ===================================================== */
.home-ultra .home-proof--premium{
  padding:clamp(10px, 1.4vw, 16px) 0 0 !important;
}
.home-ultra .home-proof--premium .home-proof__inner{
  align-items:center !important;
  padding:clamp(13px, 1.5vw, 18px) clamp(14px, 1.8vw, 22px) !important;
  border-radius:22px !important;
  border:1px solid rgba(19,88,97,.13) !important;
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(241,252,248,.86)) !important;
  box-shadow:0 18px 48px rgba(15,43,70,.075) !important;
}
.home-ultra .home-proof--premium .home-proof__left{
  display:flex;
  flex-direction:column;
  gap:5px;
  color:#0f2b46 !important;
  line-height:1.7;
}
.home-ultra .home-proof__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  max-width:100%;
  color:#135861;
  font-size:12px;
  font-weight:950;
}
.home-ultra .home-proof--premium .home-proof__left strong{
  font-size:14.5px;
  font-weight:950;
}
.home-ultra .home-proof--premium .home-proof__right span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(19,88,97,.10);
  color:rgba(15,43,70,.76);
  box-shadow:0 8px 22px rgba(15,43,70,.045);
}
.home-ultra .home-proof--premium .home-proof__right i{
  color:#2fbf71 !important;
}
.home-ultra .home-premiumTrust,
.home-ultra .home-premiumTrust *{
  font-family:inherit !important;
}
.home-ultra .home-premiumTrust{
  padding:clamp(22px, 3vw, 34px) 0 !important;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#dcecea;
  border-block:1px solid rgba(19,88,97,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(15,43,70,.06);
}
.home-ultra .home-premiumTrust::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-250px;
  top:-250px;
  border-radius:50%;
  border:74px solid rgba(20,184,166,.09);
  box-shadow:0 0 0 48px rgba(255,255,255,.15);
  pointer-events:none;
}
.home-ultra .home-premiumTrust__shell{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  gap:clamp(12px, 1.2vw, 14px);
  padding:clamp(20px, 2vw, 24px) clamp(18px, 3.4vw, 42px);
  border-radius:30px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.92);
  background:#f9fffd;
  box-shadow:0 24px 70px rgba(8,51,68,.13), inset 0 1px 0 #fff;
}
.home-ultra .home-premiumTrust__shell::before{
  content:"";
  position:absolute;
  inset:10px;
  z-index:-1;
  border:1px solid rgba(19,88,97,.07);
  border-radius:22px;
  pointer-events:none;
}
.home-ultra .home-premiumTrust__content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  max-width:900px;
  margin-inline:auto;
  text-align:center;
}
.home-ultra .home-premiumTrust .home-h2{
  margin:0;
  color:#0f2b46;
  font-size:clamp(23px, 2.35vw, 30px);
  line-height:1.48;
  letter-spacing:-.025em;
  text-align:center;
}
.home-ultra .home-premiumTrust .home-p{
  margin:0;
  max-width:1000px;
  color:#405d69;
  font-size:clamp(14.5px,1.18vw,16px);
  font-weight:700;
  line-height:1.95;
  text-align:center;
  text-align-last:center;
}
.home-ultra .home-premiumTrust__glow{
  position:absolute;
  z-index:-1;
  width:220px;
  height:220px;
  border-radius:50%;
  opacity:.22;
  filter:blur(48px);
  pointer-events:none;
  will-change:transform,opacity;
}
.home-ultra .home-premiumTrust__glow--emerald{
  right:-74px;
  bottom:-115px;
  background:#34d399;
  animation:homeTrustGlowEmerald 14s ease-in-out infinite alternate;
}
.home-ultra .home-premiumTrust__glow--blue{
  left:-72px;
  top:-118px;
  background:#60a5fa;
  animation:homeTrustGlowBlue 17s ease-in-out infinite alternate;
}
.home-ultra .home-premiumTrust__orbit{
  position:absolute;
  z-index:-1;
  width:190px;
  height:190px;
  left:7%;
  bottom:-148px;
  border:1px solid rgba(59,130,246,.16);
  border-radius:50%;
  box-shadow:0 0 0 23px rgba(59,130,246,.035),0 0 0 48px rgba(16,185,129,.025);
  pointer-events:none;
}
.home-ultra .home-premiumTrust__promises{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.home-ultra .home-premiumTrust__promise{
  --trust-accent:#10b981;
  --trust-soft:#e9fbf4;
  position:relative;
  min-height:138px;
  display:grid;
  grid-template-columns:70px minmax(0,1fr) 38px;
  align-items:center;
  gap:18px;
  padding:20px 22px;
  overflow:hidden;
  border-radius:22px;
  background:rgba(255,255,255,.96);
  border:1px solid color-mix(in srgb,var(--trust-accent) 20%,#dbe7e5);
  box-shadow:0 17px 38px rgba(15,43,70,.09),0 0 26px color-mix(in srgb,var(--trust-accent) 7%,transparent),inset 0 1px 0 #fff;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.home-ultra .home-premiumTrust__promise::before{
  content:"";
  position:absolute;
  top:0;
  right:18px;
  left:18px;
  height:4px;
  border-radius:0 0 999px 999px;
  background:var(--trust-accent);
  opacity:.72;
}
.home-ultra .home-premiumTrust__promise:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--trust-accent) 42%,#dbe7e5);
  box-shadow:0 23px 48px rgba(15,43,70,.13),0 0 30px color-mix(in srgb,var(--trust-accent) 12%,transparent),inset 0 1px 0 #fff;
}
.home-ultra .home-premiumTrust__promise--violet{--trust-accent:#8b5cf6;--trust-soft:#f3efff;}
.home-ultra .home-premiumTrust__promise--blue{--trust-accent:#2f80ed;--trust-soft:#eef6ff;}
.home-ultra .home-premiumTrust__promiseIcon{
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  border-radius:23px;
  color:var(--trust-accent);
  background:var(--trust-soft);
  border:1px solid color-mix(in srgb,var(--trust-accent) 18%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 14px 30px color-mix(in srgb,var(--trust-accent) 22%,transparent),0 0 26px color-mix(in srgb,var(--trust-accent) 13%,transparent);
  font-size:29px;
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
}
.home-ultra .home-premiumTrust__promise:hover .home-premiumTrust__promiseIcon{
  transform:scale(1.07);
  filter:saturate(1.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 13px 30px color-mix(in srgb,var(--trust-accent) 24%,transparent),0 0 22px color-mix(in srgb,var(--trust-accent) 17%,transparent);
}
.home-ultra .home-premiumTrust__promiseCopy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  min-width:0;
  text-align:right;
}
.home-ultra .home-premiumTrust__promiseCopy strong{
  color:#16364d;
  font-size:clamp(16px,1.28vw,18px);
  font-weight:700;
  line-height:1.75;
}
.home-ultra .home-premiumTrust__promiseCopy small{
  display:block;
  color:#59717b;
  font-size:clamp(12.5px,.96vw,13.5px);
  font-weight:500;
  line-height:1.85;
}
.home-ultra .home-premiumTrust__promiseMark{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--trust-accent);
  box-shadow:0 10px 22px color-mix(in srgb,var(--trust-accent) 32%,transparent),0 0 18px color-mix(in srgb,var(--trust-accent) 18%,transparent);
  font-size:14px;
}
.home-ultra .home-safetyHub__cards article{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.home-ultra .home-safetyHub__cards article:hover{
  transform:translateY(-3px);
  border-color:rgba(47,191,113,.22) !important;
  box-shadow:0 20px 48px rgba(15,43,70,.085) !important;
}
/* Unified trust navigation: real legal/support routes, no decorative-only controls. */
.home-ultra .home-premiumTrust__links,
.home-ultra .home-premiumTrust__links *{
  font-family: inherit !important;
}
.home-ultra .home-premiumTrust__links{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  width:100%;
  margin-inline:auto;
}
.home-ultra .home-premiumTrust__links a{
  --trust-link-accent:#10a879;
  --trust-link-soft:#e9fbf4;
  display:grid;
  grid-template-columns:56px minmax(0,1fr) 31px;
  align-items:center;
  gap:13px;
  min-height:104px;
  padding:16px 17px;
  border-radius:22px;
  text-decoration:none;
  color:#16464d;
  background:color-mix(in srgb,var(--trust-link-soft) 38%,#ffffff);
  border:1px solid color-mix(in srgb,var(--trust-link-accent) 27%,#dbe7e5);
  box-shadow:0 15px 34px rgba(12,44,49,.09),0 0 28px color-mix(in srgb,var(--trust-link-accent) 10%,transparent),inset 0 1px 0 #fff;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease;
}
.home-ultra .home-premiumTrust__links a:nth-child(1){--trust-link-accent:#10a879;--trust-link-soft:#e9fbf4;}
.home-ultra .home-premiumTrust__links a:nth-child(2){--trust-link-accent:#2f80ed;--trust-link-soft:#eef6ff;}
.home-ultra .home-premiumTrust__links a:nth-child(3){--trust-link-accent:#8b5cf6;--trust-link-soft:#f3efff;}
.home-ultra .home-premiumTrust__links a:nth-child(4){--trust-link-accent:#14b8a6;--trust-link-soft:#e9fbf8;}
.home-ultra .home-premiumTrust__links a:hover{
  transform:translateY(-4px);
  background:#ffffff;
  border-color:color-mix(in srgb,var(--trust-link-accent) 42%,#dbe7e5);
  box-shadow:0 19px 38px rgba(12,44,49,.12),0 0 28px color-mix(in srgb,var(--trust-link-accent) 15%,transparent),inset 0 1px 0 #fff;
}
.home-ultra .home-premiumTrust__linkIcon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:19px;
  color:var(--trust-link-accent);
  background:var(--trust-link-soft);
  border:1px solid color-mix(in srgb,var(--trust-link-accent) 23%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 28px color-mix(in srgb,var(--trust-link-accent) 18%,transparent),0 0 22px color-mix(in srgb,var(--trust-link-accent) 12%,transparent);
  transition:transform .25s ease,box-shadow .25s ease;
}
.home-ultra .home-premiumTrust__linkIcon i{
  color:var(--trust-link-accent);
  font-size:24px;
  filter:drop-shadow(0 5px 9px color-mix(in srgb,var(--trust-link-accent) 24%,transparent));
}
.home-ultra .home-premiumTrust__linkCopy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-width:0;
  text-align:right;
}
.home-ultra .home-premiumTrust__linkCopy strong{
  color:#14384b;
  font-size:clamp(15px,1.15vw,16.5px);
  font-weight:700;
  line-height:1.7;
}
.home-ultra .home-premiumTrust__linkCopy small{
  color:#607781;
  font-size:clamp(11.5px,.86vw,12.5px);
  font-weight:500;
  line-height:1.7;
}
.home-ultra .home-premiumTrust__links .home-premiumTrust__linkArrow{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--trust-link-accent);
  background:#fff;
  border:1px solid color-mix(in srgb,var(--trust-link-accent) 22%,transparent);
  box-shadow:0 8px 18px color-mix(in srgb,var(--trust-link-accent) 13%,transparent);
  transition:transform .22s ease,color .22s ease;
}
.home-ultra .home-premiumTrust__linkArrow i{font-size:12px;color:inherit;filter:none;}
.home-ultra .home-premiumTrust__links a:hover .home-premiumTrust__linkArrow{
  transform:translateX(-3px);
}
.home-ultra .home-premiumTrust__links a:hover .home-premiumTrust__linkIcon{
  transform:scale(1.07) rotate(-2deg);
  box-shadow:inset 0 1px 0 #fff,0 16px 34px color-mix(in srgb,var(--trust-link-accent) 27%,transparent),0 0 30px color-mix(in srgb,var(--trust-link-accent) 19%,transparent);
}
/* Progressive enhancement: content stays visible unless JavaScript explicitly arms motion. */
.home-ultra .home-premiumTrust.is-motion-ready:not(.is-revealed) .home-premiumTrust__promise{
  opacity:0;
  transform:translateX(58px) translateY(10px) scale(.95);
}
.home-ultra .home-premiumTrust.is-motion-ready:not(.is-revealed) .home-premiumTrust__links,
.home-ultra .home-premiumTrust.is-motion-ready:not(.is-revealed) .home-premiumTrust__links a{
  opacity:0;
  transform:translateY(38px) scale(.97);
}
.home-ultra .home-premiumTrust.is-motion-ready.is-revealed .home-premiumTrust__promise{
  animation:homeTrustPromiseEnter 1.84s cubic-bezier(.16,.82,.22,1) both;
  animation-delay:calc(var(--trust-enter-index,0) * 440ms);
}
.home-ultra .home-premiumTrust.is-motion-ready.is-revealed .home-premiumTrust__links{
  animation:homeTrustLinksTrayEnter 1.44s cubic-bezier(.16,.82,.22,1) 2100ms both;
}
.home-ultra .home-premiumTrust.is-motion-ready.is-revealed .home-premiumTrust__links a{
  animation:homeTrustLinkEnter 1.52s cubic-bezier(.16,.82,.22,1) both;
  animation-delay:calc(2240ms + (var(--trust-link-index,0) * 280ms));
}
.home-ultra .home-premiumTrust.is-home-motion-paused .home-premiumTrust__glow{
  animation-play-state:paused !important;
}
@keyframes homeTrustPromiseEnter{
  0%{opacity:0;transform:translateX(58px) translateY(10px) scale(.95);filter:blur(5px);}
  68%{opacity:1;transform:translateX(-5px) translateY(-2px) scale(1.012);filter:blur(0);}
  100%{opacity:1;transform:translateX(0) translateY(0) scale(1);filter:blur(0);}
}
@keyframes homeTrustLinksTrayEnter{
  0%{opacity:0;transform:translateY(38px) scale(.97);}
  100%{opacity:1;transform:translateY(0);}
}
@keyframes homeTrustLinkEnter{
  0%{opacity:0;transform:translateY(28px) scale(.94);filter:blur(4px);}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
}
@keyframes homeTrustGlowEmerald{
  0%{transform:translate3d(0,0,0) scale(.92);opacity:.16;}
  100%{transform:translate3d(-36px,-22px,0) scale(1.14);opacity:.31;}
}
@keyframes homeTrustGlowBlue{
  0%{transform:translate3d(0,0,0) scale(.94);opacity:.14;}
  100%{transform:translate3d(42px,28px,0) scale(1.12);opacity:.28;}
}
@media (max-width: 820px){
  .home-ultra .home-premiumTrust__promises{gap:8px;}
  .home-ultra .home-premiumTrust__promise{
    grid-template-columns:60px minmax(0,1fr) 32px;
    gap:12px;
    padding:16px;
  }
  .home-ultra .home-premiumTrust__promiseIcon{width:60px;height:60px;border-radius:19px;font-size:24px;}
  .home-ultra .home-premiumTrust__promiseMark{width:32px;height:32px;}
  .home-ultra .home-premiumTrust__links{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 640px){
  .home-ultra .home-premiumTrust{padding:18px 0 22px !important;}
  .home-ultra .home-premiumTrust__shell{padding:20px 14px;border-radius:24px;gap:16px;}
  .home-ultra .home-premiumTrust__shell::before{inset:7px;border-radius:18px;}
  .home-ultra .home-premiumTrust__content{align-items:flex-start;text-align:right;gap:7px;}
  .home-ultra .home-premiumTrust .home-h2{text-align:right;font-size:22px;line-height:1.65;}
  .home-ultra .home-premiumTrust .home-p{text-align:justify;text-align-last:right;font-size:14.5px;line-height:2;font-weight:700;}
  .home-ultra .home-premiumTrust__promises{grid-template-columns:1fr;}
  .home-ultra .home-premiumTrust__promise{min-height:128px;}
  .home-ultra .home-premiumTrust__promiseCopy strong{font-size:16px;}
  .home-ultra .home-premiumTrust__promiseCopy small{font-size:12.5px;}
  .home-ultra .home-premiumTrust__links{grid-template-columns:1fr;width:100%;}
  .home-ultra .home-premiumTrust__links a{width:100%;min-height:96px;grid-template-columns:54px minmax(0,1fr) 30px;padding:14px 15px;}
  .home-ultra .home-premiumTrust__linkIcon{width:54px;height:54px;border-radius:18px;}
  .home-ultra .home-premiumTrust__linkCopy strong{font-size:15.5px;}
  .home-ultra .home-premiumTrust__linkCopy small{font-size:12.5px;}
}
@media (max-width: 420px){
  .home-ultra .home-premiumTrust__promise{grid-template-columns:56px minmax(0,1fr) 30px;gap:10px;padding:14px 12px;}
  .home-ultra .home-premiumTrust__promiseIcon{width:56px;height:56px;}
  .home-ultra .home-premiumTrust__promiseMark{width:30px;height:30px;}
}
@media (prefers-reduced-motion: reduce){
  .home-ultra .home-premiumTrust__glow,
  .home-ultra .home-premiumTrust.is-motion-ready .home-premiumTrust__promise,
  .home-ultra .home-premiumTrust.is-motion-ready .home-premiumTrust__links,
  .home-ultra .home-premiumTrust.is-motion-ready .home-premiumTrust__links a{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  .home-ultra .home-premiumTrust__promise,
  .home-ultra .home-premiumTrust__promiseIcon,
  .home-ultra .home-premiumTrust__links a,
  .home-ultra .home-premiumTrust__linkIcon,
  .home-ultra .home-premiumTrust__linkArrow{transition:none !important;}
  .home-ultra .home-premiumTrust__promise:hover,
  .home-ultra .home-premiumTrust__links a:hover{transform:none !important;}
}

/* HOME PREMIUM TRUST — image-free showcase with solid surfaces and lightweight CSS effects. */

/* v193 — Motion Studio light solid color tuning: no gradients, layout untouched. */

/* =====================================================
   v191 — Process Board rewrite for home-motion-studio
   Scope: homepage process section only. Replaces old orbit/process graphic.
===================================================== */
.home-ultra .home-motion-studio{
  padding:26px 0 32px !important;
}
.home-ultra .home-motion-studio__shell{
  display:block !important;
  padding:0 !important;
  border:0 !important;
  border-radius:28px !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.home-ultra .home-motion-studio__shell::before,
.home-ultra .home-motion-studio__copy{
  display:none !important;
}
.home-ultra .home-motion-studio__visual.home-process-board{
  position:relative !important;
  direction:rtl;
  min-height:0 !important;
  overflow:hidden !important;
  isolation:isolate;
  border-radius:28px !important;
  padding:34px 38px 36px !important;
  color:#0f2b46;
  border:1px solid rgba(19,88,97,.14) !important;
  background:#eaf8f4 !important;
  box-shadow:0 24px 62px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.72) !important;
  font-family:inherit !important;
}
.home-ultra .home-motion-studio__visual.home-process-board::before,
.home-ultra .home-motion-studio__visual.home-process-board::after,
.home-ultra .home-motion-studio__mesh,
.home-ultra .home-orbit-workflow,
.home-ultra .home-orbit-workflow__halo,
.home-ultra .home-motion-studio__route{
  display:none !important;
}
.home-ultra .home-process-board__shade{
  position:absolute;
  z-index:-1;
  border-radius:999px;
  pointer-events:none;
  filter:none;
  opacity:.18;
}
.home-ultra .home-process-board__shade--one{width:310px;height:310px;right:-155px;top:-150px;background:#67e8c9;}
.home-ultra .home-process-board__shade--two{width:360px;height:360px;left:-175px;bottom:-165px;background:#bfdbfe;}
.home-ultra .home-process-board__badge{
  display:flex;
  width:max-content;
  margin:0 auto 16px;
  padding:9px 28px;
  border-radius:999px;
  background:#135861;
  color:#f0fdfa;
  font-size:14px;
  font-weight:900;
  box-shadow:0 14px 30px rgba(19,88,97,.16), inset 0 1px 0 rgba(255,255,255,.18);
}
.home-ultra .home-process-board__head{text-align:center;margin:0 auto 30px;max-width:720px;}
.home-ultra .home-process-board__head h3{margin:0;color:#0f2b46;font-size:clamp(30px,4vw,46px);line-height:1.45;font-weight:950;letter-spacing:-.03em;}
.home-ultra .home-process-board__head p{margin:6px 0 14px;color:#42606b;font-size:18px;font-weight:750;}
.home-ultra .home-process-board__head span{display:block;width:58px;height:5px;margin:0 auto;border-radius:999px;background:#d89511;box-shadow:0 0 0 1px rgba(216,149,17,.18);}
.home-ultra .home-process-board__steps{
  display:grid;
  grid-template-columns:1fr 26px 1fr 26px 1fr 26px 1fr;
  gap:18px;
  align-items:center;
  margin-bottom:28px;
}
.home-ultra .home-process-board__arrow{
  display:grid;
  place-items:center;
  color:#135861;
  line-height:1;
  margin-top:12px;
  direction:ltr;
}
.home-ultra .home-process-board__arrow::before{
  content:"";
  width:13px;
  height:13px;
  border-left:3px solid currentColor;
  border-bottom:3px solid currentColor;
  border-radius:1px;
  transform:rotate(45deg);
}
.home-ultra .home-process-card{
  position:relative;
  min-height:250px;
  padding:30px 18px 22px;
  border-radius:24px;
  text-align:center;
  background:#ffffff;
  border:1px solid rgba(19,88,97,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88), 0 18px 42px rgba(15,23,42,.07);
  font-family:inherit !important;
}
.home-ultra .home-process-card--green{border-color:rgba(22,163,122,.30);box-shadow:inset 0 1px 0 rgba(255,255,255,.88), 0 18px 42px rgba(22,163,122,.10);}
.home-ultra .home-process-card--blue{border-color:rgba(47,128,237,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.88), 0 18px 42px rgba(47,128,237,.10);}
.home-ultra .home-process-card--purple{border-color:rgba(139,92,246,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.88), 0 18px 42px rgba(139,92,246,.10);}
.home-ultra .home-process-card--gold{border-color:rgba(216,149,17,.30);box-shadow:inset 0 1px 0 rgba(255,255,255,.88), 0 18px 42px rgba(216,149,17,.10);}
.home-ultra .home-process-card__num{
  position:absolute;top:10px;right:10px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:24px;font-weight:950;
}
.home-ultra .home-process-card--green .home-process-card__num,.home-ultra .home-process-card--green .home-process-card__icon{background:#16a37a;box-shadow:0 14px 32px rgba(22,163,122,.24);}
.home-ultra .home-process-card--blue .home-process-card__num,.home-ultra .home-process-card--blue .home-process-card__icon{background:#2f80ed;box-shadow:0 14px 32px rgba(47,128,237,.24);}
.home-ultra .home-process-card--purple .home-process-card__num,.home-ultra .home-process-card--purple .home-process-card__icon{background:#8b5cf6;box-shadow:0 14px 32px rgba(139,92,246,.24);}
.home-ultra .home-process-card--gold .home-process-card__num,.home-ultra .home-process-card--gold .home-process-card__icon{background:#d89511;box-shadow:0 14px 32px rgba(216,149,17,.25);}
.home-ultra .home-process-card__icon{width:108px;height:108px;border-radius:50%;display:grid;place-items:center;margin:10px auto 22px;font-size:45px;color:#fff;}
.home-ultra .home-process-card strong{display:block;margin:0 0 10px;font-size:19px;font-weight:950;line-height:1.6;}
.home-ultra .home-process-card--green strong{color:#0d8f68;}.home-ultra .home-process-card--blue strong{color:#1f6fd0;}.home-ultra .home-process-card--purple strong{color:#7c3fe6;}.home-ultra .home-process-card--gold strong{color:#b77700;}
.home-ultra .home-process-card small{display:block;color:#536a73;font-size:14px;line-height:2;max-width:230px;margin:0 auto;}
.home-ultra .home-process-card__line{display:block;width:58px;height:4px;border-radius:999px;margin:20px auto 0;background:currentColor;position:relative;}
.home-ultra .home-process-card__line::after{content:"";position:absolute;left:-10px;top:50%;width:9px;height:9px;transform:translateY(-50%);border-radius:50%;background:currentColor;}
.home-ultra .home-process-board__trust{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-radius:18px;
  padding:22px 10px;
  background:#f7fcfa;
  border:1px solid rgba(19,88,97,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86), 0 16px 34px rgba(15,23,42,.05);
}
.home-ultra .home-process-board__trust article{padding:0 22px;text-align:center;border-left:1px solid rgba(19,88,97,.12);font-family:inherit !important;}
.home-ultra .home-process-board__trust article:last-child{border-left:0;}
.home-ultra .home-process-trust__icon{--trust-accent:#2563eb;width:72px;height:72px;border-radius:24px;display:grid;place-items:center;margin:0 auto 12px;color:var(--trust-accent);background:linear-gradient(145deg,#ffffff,#f4fbff);border:1px solid color-mix(in srgb, var(--trust-accent) 22%, transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.92), inset 0 -14px 26px color-mix(in srgb, var(--trust-accent) 8%, transparent), 0 16px 28px rgba(15,23,42,.07);}
.home-ultra .home-process-board__trust article:nth-child(1) .home-process-trust__icon{--trust-accent:#8b5cf6;background:linear-gradient(145deg,#ffffff,#f6f1ff);}
.home-ultra .home-process-board__trust article:nth-child(2) .home-process-trust__icon{--trust-accent:#237bf0;background:linear-gradient(145deg,#ffffff,#eef6ff);}
.home-ultra .home-process-board__trust article:nth-child(3) .home-process-trust__icon{--trust-accent:#10b981;background:linear-gradient(145deg,#ffffff,#ecfdf7);}
.home-ultra .home-process-board__trust article:nth-child(4) .home-process-trust__icon{--trust-accent:#d89511;background:linear-gradient(145deg,#ffffff,#fff8e8);}
.home-ultra .home-process-board__trust strong{display:block;color:#0f2b46;font-size:17px;font-weight:950;margin-bottom:8px;line-height:1.7;}
.home-ultra .home-process-board__trust small{display:block;color:#536a73;font-size:13px;line-height:1.95;max-width:230px;margin:0 auto;}
@media (max-width: 1180px){
  .home-ultra .home-motion-studio__visual.home-process-board{padding:30px 24px 32px !important;}
  .home-ultra .home-process-board__steps{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .home-ultra .home-process-board__arrow{display:none;}
  .home-ultra .home-process-board__trust{grid-template-columns:repeat(2,1fr);row-gap:22px;}
  .home-ultra .home-process-board__trust article:nth-child(2n){border-left:0;}
}
@media (max-width: 640px){
  .home-ultra .home-motion-studio{padding:18px 0 24px !important;}
  .home-ultra .home-motion-studio__visual.home-process-board{border-radius:22px !important;padding:24px 14px !important;}
  .home-ultra .home-process-board__badge{font-size:12px;padding:8px 18px;}
  .home-ultra .home-process-board__head{margin-bottom:20px;}
  .home-ultra .home-process-board__head p{font-size:14px;}
  .home-ultra .home-process-board__steps,.home-ultra .home-process-board__trust{grid-template-columns:1fr;gap:14px;}
  .home-ultra .home-process-card{min-height:226px;padding:26px 14px 20px;}
  .home-ultra .home-process-card__icon{width:92px;height:92px;font-size:38px;}
  .home-ultra .home-process-board__trust{padding:14px;}
  .home-ultra .home-process-board__trust article{border-left:0;border-bottom:1px solid rgba(19,88,97,.12);padding:0 10px 16px;}
  .home-ultra .home-process-board__trust article:last-child{border-bottom:0;padding-bottom:0;}
}

/* v194 — Popular services heading copy alignment
   Scope: Home popular-services heading text only. */
.home-ultra .home-popular-services__head{
  text-align:center;
}
.home-ultra .home-popular-services__head .home-p{
  max-width:760px;
  margin-inline:auto;
  text-align:center;
  text-align-last:center;
  line-height:2;
}
@media (max-width: 900px){
  .home-ultra .home-popular-services__head{
    text-align:center;
    margin-inline:auto;
  }
  .home-ultra .home-popular-services__head .home-p{
    text-align:center;
    text-align-last:center;
  }
}

/* v1348 — obsolete v688/v691 CSS-only icon generations removed. */
/* =====================================================
   v996 — Homepage mobile hero responsive repair
   Scope: .home-ultra home hero only. Fixes crawler mobile overflow,
   separates the photo from text on small screens, and keeps CTAs readable.
===================================================== */
.home-ultra {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}
@supports not (overflow-x: clip) {
  .home-ultra { overflow-x: hidden !important; }
}
.home-ultra .container {
  max-width: min(100%, 1360px) !important;
  box-sizing: border-box !important;
}
.home-ultra [class*="__grid"],
.home-ultra [class*="__shell"],
.home-ultra [class*="__content"] {
  min-width: 0 !important;
}

@media (max-width: 720px) {
  .home-ultra .home-hero--phase8 {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 8px auto 0 !important;
    padding: 12px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #f8fffc 0%, #ffffff 100%) !important;
    box-shadow: 0 14px 36px rgba(15,43,70,.08) !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__inner {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__bg {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(150px, 44vw, 190px) !important;
    margin: 0 0 12px !important;
    border-radius: 18px !important;
    z-index: 1 !important;
    overflow: hidden !important;
    transform: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .home-ultra .home-hero--phase8 .home-heroBg__slide {
    -webkit-mask-image: none !important;
            mask-image: none !important;
    background-position: center center !important;
    background-size: cover !important;
    filter: saturate(1.08) contrast(1.02) !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__gfx,
  .home-ultra .home-hero--phase8 .home-heroGfx__glow,
  .home-ultra .home-hero--phase8 .home-heroGfx__grain,
  .home-ultra .home-hero--phase8 .home-heroCinema__beam,
  .home-ultra .home-hero--phase8 .home-heroCinema__node {
    display: none !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__kickerOverlay {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    margin: 0 0 8px !important;
    width: fit-content !important;
    max-width: 100% !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    color: #135861 !important;
    background: rgba(19,88,97,.07) !important;
    border: 1px solid rgba(19,88,97,.12) !important;
    text-shadow: none !important;
    font-size: 11.5px !important;
    line-height: 1.6 !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__kickerOverlay::before {
    width: 7px !important;
    height: 7px !important;
    background: #16a34a !important;
    box-shadow: 0 0 0 4px rgba(22,163,74,.12) !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__copy {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    align-items: stretch !important;
    text-align: right !important;
    border-radius: 18px !important;
    border: 1px solid rgba(19,88,97,.10) !important;
    background: rgba(255,255,255,.90) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    gap: 0 !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__launchMark {
    align-self: flex-start !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
    padding: 6px 9px !important;
    font-size: 11.5px !important;
    line-height: 1.75 !important;
    white-space: normal !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__title {
    max-width: 100% !important;
    margin: 0 0 8px !important;
    font-size: clamp(22px, 6.15vw, 28px) !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    text-wrap: initial !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__subtitle {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(13.2px, 3.75vw, 15px) !important;
    line-height: 1.95 !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__cta--premium {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
  .home-ultra .home-hero--phase8 .home-btn--heroPrimary,
  .home-ultra .home-hero--phase8 .home-btn--heroSecondary {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    justify-content: center !important;
    font-size: 13px !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__quickLinks {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__quickLinks a {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding-inline: 8px !important;
    font-size: 11.5px !important;
    line-height: 1.55 !important;
    text-align: center !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__micro--phase7 {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 9px !important;
    gap: 6px !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__micro--phase7 span {
    width: 100% !important;
    min-height: 32px !important;
    padding: 7px 9px !important;
    justify-content: flex-start !important;
    font-size: 11.8px !important;
    white-space: normal !important;
  }
}

@media (max-width: 420px) {
  .home-ultra .home-hero--phase8 {
    padding: 10px !important;
    border-radius: 20px !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__bg {
    height: 148px !important;
    border-radius: 16px !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__copy {
    padding: 12px !important;
    border-radius: 16px !important;
  }
  .home-ultra .home-hero--phase8 .home-hero__quickLinks a {
    flex-basis: 100% !important;
  }
}

/* =====================================================
   v1195 — Homepage shared desktop content rail
   Scope: homepage layout only; no content, SEO, database or business logic.

   The Hero previously used the available desktop width while direct section
   containers remained capped at 1360px. This produced three different visual
   widths at 100% zoom: the Hero, the full-width section background and the
   boxed content inside the section.

   From ordinary desktop upward, the Hero and every direct homepage content
   container now share one responsive rail:
   - maximum rail: 1760px;
   - desktop side gutter: 20px per side;
   - full-width section backgrounds remain full width;
   - tablet and mobile below 901px remain unchanged.
===================================================== */
@media (min-width: 901px) {
  body.site-shell.is-home .home-ultra {
    --home-desktop-content-rail: 1760px;
    --home-desktop-side-gutter: 40px;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8,
  body.site-shell.is-home .home-ultra > .home-section > .container,
  body.site-shell.is-home .home-ultra > .home-seo-intro {
    width: min(
      var(--home-desktop-content-rail),
      calc(100% - var(--home-desktop-side-gutter))
    ) !important;
    max-width: var(--home-desktop-content-rail) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  /* The direct container must not subtract another 16px from each edge.
     Its boxed child now owns exactly the same outer edges as the Hero. */
  body.site-shell.is-home .home-ultra > .home-section > .container {
    padding-inline: 0 !important;
  }

  body.site-shell.is-home .home-ultra > .home-seo-intro > article {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }
}


/* =====================================================================
   v1236 — Mobile hero composition rebuild
   Scope: homepage hero at <= 720px only.
   Purpose: remove the stacked/double-card mobile layout, keep the photo
   readable, simplify hierarchy and make CTAs/chips fit cleanly.
   ===================================================================== */
@media (max-width: 720px) {
  body.site-shell.is-home .home-ultra > .home-hero--phase8 {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 12px auto 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(19, 88, 97, .11) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 16px 42px rgba(15, 43, 70, .09) !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__bg {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(182px, 52vw, 224px) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    z-index: 1 !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-heroBg__slide {
    inset: 0 !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    background-size: cover !important;
    background-position: center 42% !important;
    filter: saturate(1.06) contrast(1.02) !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-heroBg__noise {
    opacity: .025 !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__inner {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 15px 16px !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__kickerOverlay {
    position: relative !important;
    inset: auto !important;
    z-index: 4 !important;
    width: fit-content !important;
    max-width: calc(100% - 16px) !important;
    margin: -17px 0 0 auto !important;
    padding: 7px 11px !important;
    border: 1px solid rgba(19, 88, 97, .13) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .96) !important;
    color: #135861 !important;
    box-shadow: 0 10px 28px rgba(15, 43, 70, .12) !important;
    text-shadow: none !important;
    font-size: 11.5px !important;
    line-height: 1.55 !important;
    white-space: normal !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__kickerOverlay::before {
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
    background: #16a34a !important;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .11) !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__copy {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    align-items: stretch !important;
    text-align: right !important;
  }

  /* Two eyebrow rows made the phone layout visually noisy. Keep the dynamic
     kicker above and remove the duplicate fixed launch line on mobile. */
  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__launchMark {
    display: none !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__title {
    max-width: 100% !important;
    margin: 0 0 7px !important;
    font-size: clamp(24px, 6.45vw, 30px) !important;
    line-height: 1.48 !important;
    letter-spacing: 0 !important;
    text-wrap: balance !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__subtitle {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(13.2px, 3.75vw, 15px) !important;
    line-height: 1.92 !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__cta--premium {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
    margin-top: 13px !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-btn--heroPrimary,
  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-btn--heroSecondary {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 10px 10px !important;
    border-radius: 14px !important;
    justify-content: center !important;
    font-size: 12.5px !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__quickLinks {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__quickLinks a {
    min-width: 0 !important;
    width: 100% !important;
    padding: 7px 5px !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 10.75px !important;
    line-height: 1.55 !important;
    white-space: normal !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__micro--phase7 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
    margin-top: 9px !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__micro--phase7 span {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 7px 9px !important;
    justify-content: flex-start !important;
    font-size: 11.7px !important;
    white-space: normal !important;
  }
}

@media (max-width: 420px) {
  body.site-shell.is-home .home-ultra > .home-hero--phase8 {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    border-radius: 20px !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__bg {
    height: 168px !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__inner {
    padding-inline: 12px !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__cta--premium {
    grid-template-columns: 1fr !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__quickLinks {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__quickLinks a:last-child {
    grid-column: 1 / -1 !important;
  }
}

/* v1236 QA correction: the legacy hero is flex on small screens; force the
   rebuilt mobile composition into true vertical flow (image, then content). */
@media (max-width: 720px) {
  body.site-shell.is-home .home-ultra > .home-hero--phase8 {
    display: block !important;
  }
  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__bg,
  body.site-shell.is-home .home-ultra > .home-hero--phase8 .home-hero__inner {
    flex: none !important;
  }
}


/* =====================================================================
   v1237 — Production mobile hero hard override
   Scope: the current homepage hero at <= 820px.
   This block deliberately does not depend on body.is-home so the responsive
   composition still works when route/body-class detection differs on hosting.
   ===================================================================== */
@media (max-width: 820px) {
  .home-ultra > .home-hero--phase8 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 10px auto 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(19,88,97,.11) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 14px 38px rgba(15,43,70,.09) !important;
  }
  .home-ultra > .home-hero--phase8 > .home-hero__bg {
    position: relative !important;
    inset: auto !important;
    order: 1 !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: clamp(174px, 50vw, 236px) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-mask: none !important;
            mask: none !important;
    z-index: 1 !important;
  }
  .home-ultra > .home-hero--phase8 > .home-hero__bg .home-heroBg__slide {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-mask: none !important;
            mask: none !important;
    background-size: cover !important;
    background-position: center 42% !important;
    filter: saturate(1.05) contrast(1.02) !important;
  }
  .home-ultra > .home-hero--phase8 > .home-hero__gfx {
    display: none !important;
  }
  .home-ultra > .home-hero--phase8 > .home-hero__inner {
    position: relative !important;
    inset: auto !important;
    order: 2 !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 14px 16px !important;
    transform: none !important;
    box-sizing: border-box !important;
    z-index: 3 !important;
  }
  .home-ultra > .home-hero--phase8 .home-hero__kickerOverlay {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    display: inline-flex !important;
    width: fit-content !important;
    max-width: calc(100% - 8px) !important;
    min-width: 0 !important;
    margin: -17px 0 0 auto !important;
    padding: 7px 11px !important;
    border: 1px solid rgba(19,88,97,.14) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #135861 !important;
    box-shadow: 0 10px 28px rgba(15,43,70,.12) !important;
    text-shadow: none !important;
    font-size: 11.5px !important;
    line-height: 1.65 !important;
    white-space: normal !important;
    transform: none !important;
    z-index: 4 !important;
  }
  .home-ultra > .home-hero--phase8 .home-hero__grid {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
  .home-ultra > .home-hero--phase8 .home-hero__copy {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 14px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-align: right !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
  .home-ultra > .home-hero--phase8 .home-hero__launchMark {
    display: none !important;
  }
  .home-ultra > .home-hero--phase8 .home-hero__title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    font-size: clamp(23px, 6.1vw, 30px) !important;
    line-height: 1.48 !important;
    letter-spacing: 0 !important;
    text-align: right !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-wrap: balance !important;
  }
  .home-ultra > .home-hero--phase8 .home-hero__subtitle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.9 !important;
    text-align: right !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .home-ultra > .home-hero--phase8 .home-hero__cta--premium {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    margin: 13px 0 0 !important;
  }
  .home-ultra > .home-hero--phase8 .home-btn--heroPrimary,
  .home-ultra > .home-hero--phase8 .home-btn--heroSecondary {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 10px !important;
    border-radius: 14px !important;
    justify-content: center !important;
    font-size: 12.5px !important;
    box-sizing: border-box !important;
  }
  .home-ultra > .home-hero--phase8 .home-hero__quickLinks {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
    margin: 10px 0 0 !important;
  }
  .home-ultra > .home-hero--phase8 .home-hero__quickLinks a {
    width: 100% !important;
    min-width: 0 !important;
    padding: 7px 5px !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 10.75px !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }
  .home-ultra > .home-hero--phase8 .home-hero__micro--phase7 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
    margin: 9px 0 0 !important;
  }
  .home-ultra > .home-hero--phase8 .home-hero__micro--phase7 span {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 7px 9px !important;
    justify-content: flex-start !important;
    font-size: 11.7px !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 480px) {
  .home-ultra > .home-hero--phase8 .home-hero__cta--premium {
    grid-template-columns: 1fr !important;
  }
  .home-ultra > .home-hero--phase8 .home-hero__quickLinks {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  .home-ultra > .home-hero--phase8 .home-hero__quickLinks a:last-child {
    grid-column: 1 / -1 !important;
  }
}


/* =====================================================
   v1348 — Canonical Homepage Icon System
   Real Font Awesome glyphs only; no pseudo-element icon drawing.
===================================================== */
.home-ultra .home-process-card__icon,
.home-ultra .home-process-trust__icon,
.home-ultra .home-service-card__icon,
.home-ultra .home-how-track__icon,
.home-ultra .home-how-step > span,
.home-ultra .home-how-insight > span{
  font-family:inherit !important;
  overflow:visible;
}
.home-ultra .home-process-card__icon::before,
.home-ultra .home-process-card__icon::after,
.home-ultra .home-process-trust__icon::before,
.home-ultra .home-process-trust__icon::after,
.home-ultra .home-service-card__icon::before,
.home-ultra .home-service-card__icon::after{
  display:none !important;
  content:none !important;
}
.home-ultra .home-process-card__icon > i{display:block;color:#fff;font-size:43px;line-height:1;filter:drop-shadow(0 4px 8px rgba(15,23,42,.12));}
.home-ultra .home-process-trust__icon > i{display:block;color:currentColor;font-size:30px;line-height:1;}
.home-ultra .home-process-board__trust article:nth-child(1) .home-process-trust__icon{color:#8b5cf6;}
.home-ultra .home-process-board__trust article:nth-child(2) .home-process-trust__icon{color:#237bf0;}
.home-ultra .home-process-board__trust article:nth-child(3) .home-process-trust__icon{color:#10b981;}
.home-ultra .home-process-board__trust article:nth-child(4) .home-process-trust__icon{color:#d89511;}
.home-ultra .home-service-card__icon > i{display:block;color:currentColor;font-size:25px;line-height:1;}
.home-ultra .home-service-card--web .home-service-card__icon{color:#2563eb;background:#eef6ff;}
.home-ultra .home-service-card--mobile .home-service-card__icon{color:#0891b2;background:#ecfeff;}
.home-ultra .home-service-card--content .home-service-card__icon{color:#b45309;background:#fff7ed;}
.home-ultra .home-service-card--design .home-service-card__icon{color:#7c3aed;background:#f5f3ff;}
.home-ultra .home-service-card--data .home-service-card__icon{color:#0f766e;background:#ecfdf5;}
.home-ultra .home-service-card--science .home-service-card__icon{color:#0b74d1;background:#eff6ff;}
.home-ultra .home-service-card--product .home-service-card__icon{color:#c26a00;background:#fffbeb;}
.home-ultra .home-service-card--marketing .home-service-card__icon{color:#059669;background:#ecfdf5;}
.home-ultra .home-service-card--business .home-service-card__icon{color:#4f46e5;background:#eef2ff;}
.home-ultra .home-service-card--language .home-service-card__icon{color:#db2777;background:#fdf2f8;}
.home-ultra .home-service-card--other .home-service-card__icon{color:#135861;background:#effaf8;}
.home-ultra .home-how-track__icon > i{position:relative;z-index:1;display:block;color:currentColor;font-size:23px;line-height:1;}
.home-ultra .home-how-step > span > i,
.home-ultra .home-how-insight > span > i{position:relative;z-index:1;display:block;color:currentColor;font-size:18px;line-height:1;}
@media(max-width:640px){
  .home-ultra .home-process-card__icon > i{font-size:36px;}
  .home-ultra .home-process-trust__icon > i{font-size:26px;}
  .home-ultra .home-service-card__icon > i{font-size:23px;}
}

/*
 * Freelancito v1192 — Global icon-font integrity guard
 * Prevent page-wide Persian typography rules from replacing Font Awesome glyph fonts.
 * This file intentionally contains no visual redesign; it only restores icon font families.
 */

/* Free solid / classic icons. Repeated class selectors raise specificity above scoped `*` font laws. */
html body .fa.fa,
html body .fa-classic.fa-classic,
html body .fa-sharp.fa-sharp,
html body .fas.fas,
html body .fa-solid.fa-solid,
html body .fa.fa::before,
html body .fa-classic.fa-classic::before,
html body .fa-sharp.fa-sharp::before,
html body .fas.fas::before,
html body .fa-solid.fa-solid::before {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal !important;
    font-variant: normal !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Free regular icons. */
html body .far.far,
html body .fa-regular.fa-regular,
html body .far.far::before,
html body .fa-regular.fa-regular::before {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal !important;
    font-variant: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Brand icons. */
html body .fab.fab,
html body .fa-brands.fa-brands,
html body .fab.fab::before,
html body .fa-brands.fa-brands::before {
    font-family: "Font Awesome 6 Brands" !important;
    font-style: normal !important;
    font-variant: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/*
 * ID-scoped builders/directories use selectors such as `#... * {font-family:inherit!important}`.
 * These targeted guards carry matching ID specificity so their icons remain intact in frontend,
 * admin preview and embedded CMS rendering.
 */
html body #main-content :is(.fa,.fa-classic,.fa-sharp,.fas,.fa-solid),
html body #category-directory-pro :is(.fa,.fa-classic,.fa-sharp,.fas,.fa-solid),
html body #categories-directory-redesign :is(.fa,.fa-classic,.fa-sharp,.fas,.fa-solid),
html body #categories-premium-directory :is(.fa,.fa-classic,.fa-sharp,.fas,.fa-solid) {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}
html body #main-content :is(.far,.fa-regular),
html body #category-directory-pro :is(.far,.fa-regular),
html body #categories-directory-redesign :is(.far,.fa-regular),
html body #categories-premium-directory :is(.far,.fa-regular) {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}
html body #main-content :is(.fab,.fa-brands),
html body #category-directory-pro :is(.fab,.fa-brands),
html body #categories-directory-redesign :is(.fab,.fa-brands),
html body #categories-premium-directory :is(.fab,.fa-brands) {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* Legacy/pro-only names found in existing CMS/default data: map them to free glyphs. */
html body .fa-sparkles.fa-sparkles { --fa: "\e2ca" !important; }
html body .fa-badge-check.fa-badge-check { --fa: "\f058" !important; }
html body .fa-shield-check.fa-shield-check { --fa: "\f3ed" !important; }