:root {
    --brand-indigo: #3B5BFF;
    --brand-indigo-dark: #2A45E0;
    --brand-violet: #7B61FF;
    --ink: #1A1A2E;
    --ink-soft: #6B6B80;
    --bg-lav: #F4F5FC;
    --bg-panel: #EEF0FB;
    --line: #E6E8F2;
    --coral: #FF5A5A;
    --amber: #FFB020;
    --mint: #1EBE8E;
    --card-shadow: 0 12px 40px rgba(59, 91, 255, 0.10);
    --card-shadow-sm: 0 4px 16px rgba(26, 26, 46, 0.06);
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
.font-head {
    font-family: 'Outfit', sans-serif;
}

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

a:hover {
    color: var(--brand-indigo);
}

.btn-primary {
    --bs-btn-bg: var(--brand-indigo);
    --bs-btn-border-color: var(--brand-indigo);
    --bs-btn-hover-bg: var(--brand-indigo-dark);
    --bs-btn-hover-border-color: var(--brand-indigo-dark);
    --bs-btn-active-bg: var(--brand-indigo-dark);
    --bs-btn-active-border-color: var(--brand-indigo-dark);
    font-weight: 600;
    border-radius: 10px;
}

/* ========== TOP BAR ========== */
/* ========== TOP BAR ========== */
.top-bar {
    background: linear-gradient(90deg, #151530 0%, #1E1E3A 50%, #151530 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0;
    font-size: 12.5px;
}

.top-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 40px;
    flex-wrap: wrap;
}

.top-bar-left,
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 0;
}

.top-bar-link {
    font-family: 'Outfit', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.72);
    padding: 8px 14px;
    position: relative;
    transition: color 0.2s ease;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.top-bar-link:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.14);
}

.top-bar-link:hover {
    color: #fff;
}

.top-bar-ico {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    overflow: hidden;
    transition: background 0.2s ease;
}

.top-bar-link:hover .top-bar-ico {
    background: rgba(59, 91, 255, 0.35);
}

.top-bar-ico svg,
.top-bar-ico i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px !important;
    height: 12px !important;
    stroke: currentColor !important;
    fill: none;
    margin: 0;
    padding: 0;
}

.top-bar-link-accent {
    color: #A5B4FF;
}

.top-bar-link-accent:hover {
    color: #fff;
}

.top-bar-link-accent .top-bar-ico {
    background: rgba(59, 91, 255, 0.28);
    color: #C7D2FE;
}

/* ========== MAIN HEADER ========== */
.main-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(231, 231, 243, 0.7);
    box-shadow: 0 4px 24px rgba(26, 26, 46, 0.04);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.main-nav {
    min-height: 56px;
    gap: 12px;
}

.brand-logo img {
    height: 52px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* Header search */
.header-search {
    align-items: center;
    gap: 8px;
    background: #F5F6FB;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 4px 4px 4px 14px;
    max-width: 480px;
    min-width: 0;
    margin: 0 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.header-search:focus-within {
    border-color: rgba(59, 91, 255, 0.45);
    box-shadow: 0 0 0 3px rgba(59, 91, 255, 0.1);
    background: #fff;
}

.header-search-icon {
    width: 16px;
    height: 16px;
    color: var(--ink-soft);
    flex-shrink: 0;
}

.header-search-input {
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    min-width: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    color: var(--ink);
}

.header-search-input::placeholder {
    color: #9A9AB0;
}

.header-search-divider {
    width: 1px;
    height: 22px;
    background: var(--line);
    flex-shrink: 0;
}

.header-search-cat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 0;
}

.header-cat-icon {
    width: 15px;
    height: 15px;
    color: var(--ink-soft);
    flex-shrink: 0;
}

.header-search-select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    outline: none;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
    padding-right: 16px;
    max-width: 130px;
}

.header-cat-arrow {
    position: absolute;
    right: 0;
    width: 14px;
    height: 14px;
    color: var(--ink-soft);
    pointer-events: none;
}

.header-search-btn {
    font-family: 'Outfit', sans-serif;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 9px;
    white-space: nowrap;
}

.header-search-mobile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 10px;
    padding: 10px;
    background: #F5F6FB;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.mobile-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 12px;
    min-width: 0;
}

.mobile-search-row .header-search-input {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    padding: 0;
}

.mobile-search-row-actions {
    padding: 4px 4px 4px 12px;
    gap: 8px;
}

.mobile-search-row-actions .header-search-cat {
    flex: 1;
    min-width: 0;
}

.mobile-search-row-actions .header-search-select {
    max-width: none;
    width: 100%;
    font-size: 13px;
}

.mobile-search-row-actions .header-cat-icon {
    display: inline-flex;
    width: 15px;
    height: 15px;
}

.mobile-search-row-actions .header-search-btn {
    flex-shrink: 0;
    padding: 9px 16px;
    font-size: 13px;
}

.nav-actions {
    flex-shrink: 0;
}

@media (min-width: 992px) {
    .nav-actions.ms-auto {
        margin-left: 12px !important;
    }
}

@media (max-width: 1199.98px) {
    .header-search {
        max-width: 420px;
        margin: 0 8px;
    }

    .header-search-select {
        max-width: 110px;
    }

    .header-search-btn {
        padding: 8px 12px;
    }
}

@media (max-width: 991.98px) {
    .header-search {
        max-width: 340px;
    }

    .header-cat-icon {
        display: none;
    }

    .header-search-select {
        max-width: 100px;
        font-size: 12px;
    }

    .header-search-btn {
        font-size: 12px;
        padding: 7px 10px;
    }
}

/* Auth buttons — desktop only */
.btn-login {
    font-family: 'Outfit', sans-serif;
    padding: 9px 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--brand-indigo);
    background: transparent;
    border: 1.5px solid var(--brand-indigo);
    border-radius: 10px;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.btn-login:hover {
    background: rgba(59, 91, 255, 0.08);
    color: var(--brand-indigo-dark);
    border-color: var(--brand-indigo-dark);
}

.btn-join {
    font-family: 'Outfit', sans-serif;
    padding: 9px 22px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #3B5BFF 0%, #5B7CFF 100%);
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(59, 91, 255, 0.35);
    transition: all 0.25s ease;
    white-space: nowrap;
}

.btn-join:hover {
    color: #fff;
    background: linear-gradient(135deg, #2A45E0 0%, #3B5BFF 100%);
    box-shadow: 0 6px 18px rgba(59, 91, 255, 0.45);
    transform: translateY(-1px);
}

/* Menu links */
.menu-link {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}

.menu-link:hover,
.menu-link.active {
    background: var(--bg-panel);
    color: var(--brand-indigo);
}

.menu-link-jobs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.menu-link-jobs .badge-dot {
    position: static;
    min-width: 28px;
    height: 18px;
    padding: 0 6px;
    font-size: 10px;
    border: none;
}

/* Icon buttons */
.icon-btn {
    position: relative;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    background: #F7F8FC;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.25s ease;
}

.icon-btn:hover {
    background: rgba(59, 91, 255, 0.08);
    border-color: rgba(59, 91, 255, 0.25);
    color: var(--brand-indigo);
    box-shadow: 0 4px 12px rgba(59, 91, 255, 0.12);
}

.icon-btn svg {
    width: 18px;
    height: 18px;
}

.badge-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--coral);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid #fff;
}

/* Profile */
.profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 99px;
    padding: 4px 12px 4px 4px;
    cursor: pointer;
    font-family: inherit;
}

.profile-btn::after {
    margin-left: 2px;
    color: var(--ink-soft);
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

/* ========== MOBILE DRAWER ========== */
.mobile-drawer {
    width: min(100%, 340px) !important;
    border: none;
    box-shadow: -12px 0 40px rgba(26, 26, 46, 0.12);
}

.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #F7F8FF 0%, #fff 100%);
}

.offcanvas-logo {
    height: 44px;
    width: auto;
    flex-shrink: 0;
}

.drawer-close {
    width: 40px;
    height: 40px;
    margin-left: auto;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.drawer-close:hover {
    color: var(--brand-indigo);
    border-color: rgba(59, 91, 255, 0.3);
    background: rgba(59, 91, 255, 0.06);
}

.drawer-close svg {
    width: 18px;
    height: 18px;
}

.mobile-drawer-body {
    padding: 10px 12px 20px;
    background: #fff;
}

.mobile-nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-nav-link {
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink);
    transition: all 0.2s ease;
    line-height: 1.3;
}

.mobile-nav-link span:first-of-type {
    flex: 1;
}

.mobile-nav-link > svg:last-child {
    width: 16px;
    height: 16px;
    color: #B0B0C4;
    flex-shrink: 0;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
    background: linear-gradient(135deg, rgba(59, 91, 255, 0.08) 0%, rgba(123, 97, 255, 0.06) 100%);
    color: var(--brand-indigo);
}

.mobile-nav-link.active {
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--brand-indigo);
}

.mobile-nav-link .badge-dot {
    position: static;
    min-width: 32px;
    height: 20px;
    padding: 0 7px;
    font-size: 10px;
    border: none;
    margin-right: 2px;
}

.mobile-nav-icon {
    width: 18px;
    height: 18px;
    color: var(--brand-indigo);
    flex-shrink: 0;
}

.mobile-nav-divider {
    height: 1px;
    background: var(--line);
    margin: 10px 8px;
}

.mobile-contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 6px;
}

.mobile-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #F7F8FC;
    border: 1px solid var(--line);
    transition: all 0.2s ease;
}

a.mobile-contact-item:hover {
    background: rgba(59, 91, 255, 0.06);
    border-color: rgba(59, 91, 255, 0.2);
    color: inherit;
}

.mobile-contact-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(59, 91, 255, 0.1);
    color: var(--brand-indigo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-contact-icon svg {
    width: 16px;
    height: 16px;
}

.mobile-contact-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mobile-contact-text small {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mobile-contact-text strong,
.mobile-contact-text h4 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.45;
    word-break: break-word;
}

.mobile-social {
    margin-top: 12px;
    padding: 14px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #F7F8FF 0%, #EEF0FB 100%);
    border: 1px solid var(--line);
}

.mobile-social-label {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    margin: 0 0 10px;
    letter-spacing: 0.02em;
}

.mobile-social-list {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ========== PREMIUM PROFILE SHEET ========== */
.profile-sheet.offcanvas-bottom {
    height: min(92vh, 820px);
    max-height: 92vh;
    border: 0;
    border-radius: 28px 28px 0 0;
    background: #F4F6FC;
    box-shadow: 0 -20px 60px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

.profile-sheet-handle {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.profile-sheet-handle span {
    width: 42px;
    height: 4px;
    border-radius: 99px;
    background: #CBD5E1;
}

.profile-sheet-close {
    position: absolute;
    top: 18px;
    right: 16px;
    z-index: 4;
    width: 36px;
    height: 36px;
    border: 1px solid #E2E8F0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
    cursor: pointer;
}

.profile-sheet-close svg {
    width: 16px;
    height: 16px;
}

.profile-sheet-body {
    padding: 0 0 calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.psheet-hero {
    position: relative;
    padding: 28px 20px 18px;
    color: #0F172A;
    overflow: hidden;
}

.psheet-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 70% at 0% 0%, rgba(59, 91, 255, 0.16) 0%, transparent 55%),
        radial-gradient(ellipse 70% 60% at 100% 5%, rgba(14, 165, 233, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 55% 45% at 50% 110%, rgba(99, 102, 241, 0.1) 0%, transparent 55%),
        linear-gradient(180deg, #FFFFFF 0%, #F3F6FF 42%, #EEF2FF 72%, #F4F6FC 100%);
}

.psheet-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 75%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 75%);
    opacity: 0.45;
    pointer-events: none;
}

.psheet-hero-bg::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 32px;
    background: linear-gradient(180deg, transparent, #F4F6FC);
}

.psheet-avatar-wrap {
    position: relative;
    z-index: 1;
    width: 84px;
    margin: 0 auto 12px;
}

.psheet-ring {
    position: relative;
    width: 84px;
    height: 84px;
}

.psheet-ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.psheet-ring-track,
.psheet-ring-val {
    fill: none;
    stroke-width: 3.5;
}

.psheet-ring-track {
    stroke: rgba(59, 91, 255, 0.14);
}

.psheet-ring-val {
    stroke: #3B5BFF;
    stroke-linecap: round;
    stroke-dasharray: 226.08;
    stroke-dashoffset: calc(226.08 - (226.08 * var(--pct, 78) / 100));
    filter: drop-shadow(0 0 6px rgba(59, 91, 255, 0.28));
}

.psheet-avatar {
    position: absolute;
    inset: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    background: #EEF0FB;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.psheet-cam {
    position: absolute;
    right: -2px;
    bottom: 2px;
    z-index: 2;
    width: 28px;
    height: 28px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: linear-gradient(145deg, #3B5BFF, #7B61FF);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(30, 43, 111, 0.3);
    cursor: pointer;
}

.psheet-cam svg {
    width: 12px;
    height: 12px;
}

.psheet-identity {
    position: relative;
    z-index: 1;
    text-align: center;
}

.psheet-identity h2 {
    margin: 0 0 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0F172A;
}

.psheet-identity > p {
    margin: 0 0 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    color: #64748B;
}

.psheet-chips {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.psheet-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    background: #fff;
    border: 1px solid #E2E8F0;
    color: #334155;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.psheet-chip svg {
    width: 13px;
    height: 13px;
}

.psheet-chip.is-verified {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.22);
    color: #15803D;
}

.psheet-chip.is-plan {
    background: rgba(59, 91, 255, 0.08);
    border-color: rgba(59, 91, 255, 0.18);
    color: #3B5BFF;
}

.psheet-complete {
    position: relative;
    z-index: 1;
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #E8ECF6;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.psheet-complete-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #64748B;
}

.psheet-complete-top strong {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #3B5BFF;
}

.psheet-bar {
    height: 6px;
    border-radius: 99px;
    background: #EEF2FF;
    overflow: hidden;
    margin-bottom: 8px;
}

.psheet-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #60A5FA, #3B5BFF, #6366F1);
}

.psheet-complete-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #3B5BFF;
}

.psheet-complete-link svg {
    width: 14px;
    height: 14px;
}

.psheet-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: -2px 16px 18px;
    padding: 6px;
    position: relative;
    z-index: 2;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.07),
        0 2px 6px rgba(59, 91, 255, 0.04);
    overflow: hidden;
}

.psheet-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 8px 16px;
    text-decoration: none;
    color: inherit;
    border-radius: 16px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.psheet-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18%;
    right: 0;
    width: 1px;
    height: 64%;
    background: linear-gradient(180deg, transparent, #E8ECF6 20%, #E8ECF6 80%, transparent);
}

.psheet-stat:hover {
    background: #F7F8FF;
    color: inherit;
}

.psheet-stat-ico {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.psheet-stat-ico svg {
    width: 16px;
    height: 16px;
}

.psheet-stat.is-applied .psheet-stat-ico {
    background: linear-gradient(145deg, rgba(59, 91, 255, 0.16), rgba(99, 102, 241, 0.1));
    color: #3B5BFF;
}

.psheet-stat.is-saved .psheet-stat-ico {
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.18), rgba(251, 191, 36, 0.1));
    color: #D97706;
}

.psheet-stat.is-views .psheet-stat-ico {
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.16), rgba(52, 211, 153, 0.1));
    color: #059669;
}

.psheet-stat-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.psheet-stat strong {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.psheet-stat.is-applied strong { color: #2A45E0; }
.psheet-stat.is-saved strong { color: #B45309; }
.psheet-stat.is-views strong { color: #047857; }

.psheet-stat-copy span {
    font-family: 'Poppins', sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #94A3B8;
}

.psheet-section {
    padding: 0 16px;
    margin-bottom: 14px;
}

.psheet-section h3 {
    margin: 0 0 12px;
    padding: 0 2px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 10px;
}

.psheet-section h3::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #E2E8F0, transparent);
}

.psheet-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #E8ECF6;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.psheet-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s ease;
}

.psheet-link:hover {
    background: #F5F7FF;
    color: inherit;
}

.psheet-link-ico {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.psheet-link-ico svg {
    width: 18px;
    height: 18px;
}

.psheet-link-ico.ico-jobs {
    background: rgba(59, 91, 255, 0.12);
    color: #3B5BFF;
}

.psheet-link-ico.ico-edit {
    background: rgba(59, 91, 255, 0.12);
    color: #3B5BFF;
}

.psheet-link-ico.ico-resume {
    background: rgba(99, 102, 241, 0.12);
    color: #4F46E5;
}

.psheet-link-ico.ico-alert {
    background: rgba(245, 158, 11, 0.14);
    color: #D97706;
}

.psheet-link-ico.ico-boost {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.psheet-link-ico.ico-set {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}

.psheet-link-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.psheet-link-text strong {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
}

.psheet-link-text small {
    font-family: 'Poppins', sans-serif;
    font-size: 11.5px;
    font-weight: 400;
    color: #94A3B8;
}

.psheet-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #EF4444;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.psheet-chev {
    width: 16px;
    height: 16px;
    color: #CBD5E1;
    flex-shrink: 0;
}

.psheet-promo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 16px 16px;
    padding: 16px;
    border-radius: 20px;
    text-decoration: none;
    color: #fff;
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(251, 191, 36, 0.35) 0%, transparent 45%),
        linear-gradient(135deg, #111827 0%, #1E293B 55%, #312E81 100%);
    box-shadow: 0 14px 32px rgba(17, 24, 39, 0.22);
    overflow: hidden;
    position: relative;
}

.psheet-promo:hover {
    color: #fff;
}

.psheet-promo-tag {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(251, 191, 36, 0.2);
    color: #FDE68A;
}

.psheet-promo-copy {
    flex: 1;
    min-width: 0;
}

.psheet-promo-copy strong {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.psheet-promo-copy p {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: rgba(226, 232, 240, 0.78);
}

.psheet-promo-go {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.psheet-promo-go svg {
    width: 18px;
    height: 18px;
}

.psheet-foot {
    padding: 4px 16px 8px;
    text-align: center;
}

.psheet-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    margin-bottom: 10px;
    border-radius: 14px;
    border: 1px solid rgba(239, 68, 68, 0.18);
    background: rgba(254, 242, 242, 0.9);
    color: #DC2626;
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.psheet-logout svg {
    width: 16px;
    height: 16px;
}

.psheet-logout:hover {
    color: #B91C1C;
    background: #FEF2F2;
}

.psheet-foot > p {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: #94A3B8;
}

@media (min-width: 992px) {
    .profile-sheet.offcanvas-bottom {
        display: none !important;
    }
}

.social-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(26, 26, 46, 0.04);
}

.social-btn svg {
    width: 18px;
    height: 18px;
}

.social-btn:hover {
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
}

.social-btn[aria-label="Facebook"]:hover {
    background: #1877F2;
    box-shadow: 0 6px 14px rgba(24, 119, 242, 0.35);
}

.social-btn[aria-label="Instagram"]:hover {
    background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF);
    box-shadow: 0 6px 14px rgba(221, 42, 123, 0.35);
}

.social-btn[aria-label="Twitter"]:hover {
    background: #1D9BF0;
    box-shadow: 0 6px 14px rgba(29, 155, 240, 0.35);
}

.social-btn[aria-label="LinkedIn"]:hover {
    background: #0A66C2;
    box-shadow: 0 6px 14px rgba(10, 102, 194, 0.35);
}

.social-btn[aria-label="YouTube"]:hover {
    background: #FF0000;
    box-shadow: 0 6px 14px rgba(255, 0, 0, 0.35);
}

/* ========== HERO ========== */
.hero-section {
    background:
        radial-gradient(ellipse 80% 60% at 70% 40%, rgba(123, 97, 255, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 20% 80%, rgba(59, 91, 255, 0.08) 0%, transparent 55%),
        linear-gradient(160deg, #F7F8FF 0%, #EEF0FB 45%, #F5F5FD 100%);
    padding: 24px 0 48px;
    overflow: hidden;
    position: relative;
}

.hero-title {
    font-size: clamp(1.85rem, 3.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
    margin-top: 0;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.hero-accent {
    font-family: 'Caveat', cursive;
    font-style: normal;
    font-weight: 700;
    color: var(--brand-indigo);
    font-size: 1.15em;
    position: relative;
    display: inline-block;
    line-height: 1;
    padding: 0 2px 4px;
}

.hero-accent-line {
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: -2px;
    width: 108%;
    height: 10px;
    color: var(--brand-indigo);
    opacity: 0.85;
    pointer-events: none;
    overflow: visible;
}

.hero-accent-line path {
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: accentDraw 0.9s ease forwards 0.35s;
}

@keyframes accentDraw {
    to {
        stroke-dashoffset: 0;
    }
}

.hero-sub {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.65;
    max-width: 440px;
    margin-bottom: 22px;
}

/* Tabs */
.hero-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--line);
}

.hero-tab {
    border: none;
    background: transparent;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
    position: relative;
    font-family: inherit;
    margin-bottom: -2px;
    transition: color 0.2s;
}

.hero-tab.active {
    color: var(--brand-indigo);
    font-weight: 600;
}

.hero-tab.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--brand-indigo);
    border-radius: 2px 2px 0 0;
}

.hero-tab:hover {
    color: var(--brand-indigo);
}

/* Search card */
.hero-search-card {
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(231, 231, 243, 0.8);
}

.hero-search-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 14px;
    flex-wrap: nowrap;
}

.hero-search-inline .search-field {
    margin-bottom: 0;
    border: none;
    background: transparent;
    padding: 8px 6px;
    border-radius: 0;
    min-width: 0;
}

.hero-search-inline .search-field-skill {
    flex: 1.4;
}

.hero-search-inline .search-field-loc {
    flex: 1;
    padding: 8px 6px;
}

.hero-search-inline .filter-inline {
    flex: 0.9;
    min-width: 0;
}

.hero-search-inline .filter-inline .select-wrap select {
    border: none;
    background: transparent;
    padding: 8px 28px 8px 6px;
    font-size: 13.5px;
}

.hero-search-inline .search-divider {
    width: 1px;
    height: 28px;
    background: var(--line);
    flex-shrink: 0;
}

.hero-search-inline .btn-search-jobs {
    flex: 0 0 auto;
    min-width: 0;
    padding: 11px 18px;
    font-size: 14px;
    font-family: 'Outfit', sans-serif;
    white-space: nowrap;
}

.search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F7F8FC;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 14px;
}

.search-field svg {
    width: 18px;
    height: 18px;
    color: var(--ink-soft);
    flex-shrink: 0;
}

.search-field input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
}

.search-field input::placeholder {
    color: #9A9AB0;
}

.search-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.search-filters-simple {
    grid-template-columns: 1fr 1fr;
}

.search-field-sm {
    margin-bottom: 0;
    padding: 11px 14px;
}

.search-field-sm svg {
    width: 16px;
    height: 16px;
}

.search-field-sm input {
    font-size: 13.5px;
}

.filter-field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
    margin-bottom: 6px;
}

.select-wrap {
    position: relative;
}

.select-wrap select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--line);
    background: #F7F8FC;
    border-radius: 10px;
    padding: 11px 36px 11px 14px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--ink);
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

.select-wrap select:focus {
    border-color: var(--brand-indigo);
}

.select-wrap svg {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--ink-soft);
    pointer-events: none;
}

.search-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-search-jobs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 15px;
    border-radius: 10px;
    flex: 1;
    justify-content: center;
    min-width: 160px;
}

.btn-search-jobs svg {
    width: 18px;
    height: 18px;
}

.advanced-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--brand-indigo);
    white-space: nowrap;
}

.advanced-link svg {
    width: 16px;
    height: 16px;
}

.advanced-link:hover {
    color: var(--brand-indigo-dark);
}

/* Popular */
.popular-searches {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.popular-label {
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 500;
}

.popular-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.popular-tags a {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-soft);
    background: #fff;
    border: 1px solid var(--line);
    padding: 6px 14px;
    border-radius: 99px;
    transition: all 0.2s;
}

.popular-tags a:hover {
    border-color: var(--brand-indigo);
    color: var(--brand-indigo);
    background: rgba(59, 91, 255, 0.06);
}

/* ========== HERO VISUAL / SLIDER ========== */
.hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    padding-bottom: 32px;
    background: linear-gradient(160deg, #EEF0FB 0%, #F7F8FF 100%);
}

.hero-slider .swiper-slide {
    height: auto;
}

.hero-slider-pagination {
    bottom: 8px !important;
}

.hero-slider-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #C5C9E0;
    opacity: 1;
}

.hero-slider-pagination .swiper-pagination-bullet-active {
    background: var(--brand-indigo);
    width: 22px;
    border-radius: 99px;
}

.hero-visual {
    position: relative;
    width: 100%;
    height: 280px;
    min-height: 280px;
    display: block;
    overflow: hidden;
    border-radius: 20px;
}

.hero-glow {
    position: absolute;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(123, 97, 255, 0.22) 0%, rgba(59, 91, 255, 0.06) 50%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.hero-person {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.hero-person img {
    width: 100%;
    height: 100%;
    max-height: none;
    display: block;
    object-fit: cover;
    object-position: center top;
    border-radius: 20px;
    mask-image: none;
    -webkit-mask-image: none;
}

/* Floating cards */
.float-card {
    position: absolute;
    z-index: 3;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(231, 231, 243, 0.9);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    animation: floatY 4s ease-in-out infinite;
    max-width: 200px;
}

.float-card strong {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

.float-card p {
    margin: 2px 0 0;
    font-size: 10px;
    color: var(--ink-soft);
    line-height: 1.3;
    max-width: 140px;
}

.float-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.float-icon svg {
    width: 15px;
    height: 15px;
}

.float-icon-blue {
    background: rgba(59, 91, 255, 0.12);
    color: var(--brand-indigo);
}

.float-icon-violet {
    background: rgba(123, 97, 255, 0.14);
    color: var(--brand-violet);
}

.float-icon-amber {
    background: rgba(255, 176, 32, 0.16);
    color: #E09000;
}

.float-icon-coral {
    background: rgba(255, 90, 90, 0.12);
    color: var(--coral);
}

.float-card-journey {
    top: 12%;
    left: 4%;
    max-width: 210px;
    animation-delay: 0s;
}

.float-card-jobs {
    top: 42%;
    left: 4%;
    animation-delay: 0.6s;
}

.float-card-companies {
    bottom: 12%;
    left: 4%;
    animation-delay: 1.2s;
}

.float-card-plane {
    top: 10%;
    right: 5%;
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #3B5BFF, #7B61FF);
    color: #fff;
    border: none;
    animation-delay: 0.3s;
    max-width: 40px;
}

.float-card-plane svg {
    width: 18px;
    height: 18px;
}

.float-card-alerts {
    bottom: 14%;
    right: 4%;
    animation-delay: 0.9s;
}

@keyframes floatY {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* ========== CATEGORY SECTION ========== */
.category-section {
    padding: 56px 0 64px;
    background: #fff;
}

.category-section-hero {
    padding: 36px 0 8px;
    background: transparent;
    margin-top: 28px;
    border-top: 1px solid rgba(231, 231, 243, 0.8);
}

.category-under-search {
    margin-top: 24px;
    padding: 18px;
    background: linear-gradient(145deg, #ffffff 0%, #F8F9FF 100%);
    border: 1px solid rgba(231, 231, 243, 0.95);
    border-radius: 20px;
    box-shadow:
        0 10px 32px rgba(59, 91, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.category-under-search .category-head {
    margin-bottom: 16px;
}

.category-under-search .category-head h2 {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.category-under-search .category-view-all {
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 99px;
    background: rgba(59, 91, 255, 0.08);
    transition: all 0.2s ease;
}

.category-under-search .category-view-all:hover {
    background: var(--brand-indigo);
    color: #fff;
}

.category-under-search .category-view-all:hover svg {
    transform: translateX(3px);
}

.category-grid-compact {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px;
}

.category-grid-compact .category-card {
    padding: 16px 10px 14px;
    gap: 8px;
    background: #fff;
    border: 1px solid rgba(231, 231, 243, 0.85);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(26, 26, 46, 0.03);
    transition: all 0.28s ease;
}

.category-grid-compact .category-card:hover {
    transform: translateY(-4px);
    border-color: rgba(59, 91, 255, 0.28);
    box-shadow: 0 12px 26px rgba(59, 91, 255, 0.12);
}

.category-grid-compact .category-card:hover .category-icon {
    transform: scale(1.06);
}

.category-grid-compact .category-card strong {
    font-size: 12.5px;
    font-weight: 600;
}

.category-grid-compact .category-count {
    font-size: 11px;
    color: #8A8A9E;
}

.category-grid-compact .category-icon {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    line-height: 0;
    overflow: hidden;
    transition: transform 0.28s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.category-grid-compact .category-icon svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    fill: none;
    margin: 0;
    padding: 0;
}

.cat-sales {
    background: linear-gradient(145deg, #E8F7FE, #D6F0FC);
    color: #0284C7 !important;
}

.cat-teach {
    background: linear-gradient(145deg, #F3E8FF, #E9D5FF);
    color: #9333EA !important;
}

.category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.category-head h2 {
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.02em;
}

.category-view-all {
    font-family: 'Outfit', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-indigo);
}

.category-view-all svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.category-view-all:hover {
    color: var(--brand-indigo-dark);
}

.category-view-all:hover svg {
    transform: translateX(3px);
}

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

.category-grid.category-grid-compact {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 22px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(26, 26, 46, 0.04);
    transition: all 0.25s ease;
}

.category-card:hover {
    transform: translateY(-4px);
    border-color: rgba(59, 91, 255, 0.25);
    box-shadow: 0 12px 28px rgba(59, 91, 255, 0.12);
    color: inherit;
}

.category-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.category-icon svg {
    width: 22px;
    height: 22px;
}

.cat-it {
    background: linear-gradient(145deg, #EEF1FF, #E0E6FF);
    color: #3B5BFF !important;
}

.cat-bank {
    background: linear-gradient(145deg, #E6F7F4, #D5F0EB);
    color: #0F766E !important;
}

.cat-eng {
    background: linear-gradient(145deg, #F1EDFF, #E5DEFF);
    color: #7B61FF !important;
}

.cat-health {
    background: linear-gradient(145deg, #E8F8EE, #D4F0DD);
    color: #16A34A !important;
}

.cat-mkt {
    background: linear-gradient(145deg, #FCE7F3, #F9D0E8);
    color: #DB2777 !important;
}

.cat-design {
    background: linear-gradient(145deg, #FFF0E6, #FFE0CC);
    color: #EA580C !important;
}

.cat-more {
    background: linear-gradient(145deg, #EEF1FF, #E0E6FF);
    color: #3B5BFF !important;
}

.category-card strong {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

.category-count {
    font-size: 12.5px;
    color: var(--ink-soft);
    font-weight: 500;
}

.category-card-more strong {
    color: var(--brand-indigo);
}

/* ========== POPULAR CATEGORIES (8 per row) ========== */
.popular-categories-section {
    position: relative;
    padding: 36px 0 48px;
    background:
        radial-gradient(ellipse 50% 40% at 90% 10%, rgba(59, 91, 255, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 40% 35% at 5% 20%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
        linear-gradient(180deg, #FFFFFF 0%, #F7F8FF 55%, #FFFFFF 100%);
    overflow: hidden;
}

.popular-cat-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 22px 24px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(230, 232, 242, 0.95);
    box-shadow:
        0 12px 32px rgba(26, 26, 46, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
}

.popular-cat-intro {
    max-width: 580px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.popular-cat-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 5px 12px 5px 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #059669;
    background: linear-gradient(135deg, #ECFDF5 0%, #F0FDF4 100%);
    border: 1px solid rgba(16, 185, 129, 0.18);
    border-radius: 999px;
}

.popular-cat-eyebrow svg {
    width: 14px;
    height: 14px;
}

.popular-cat-intro h2 {
    font-size: clamp(1.45rem, 2.4vw, 1.9rem);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
    letter-spacing: -0.03em;
    line-height: 1.2;
    position: relative;
    display: inline-block;
}

.popular-cat-intro h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 48px;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, #3B5BFF, #10B981);
}

.popular-cat-intro p {
    margin: 12px 0 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink-soft);
    font-weight: 400;
    max-width: 520px;
}

.popular-cat-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

.popular-cat-stats {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.popular-cat-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 96px;
    padding: 10px 14px;
    border-radius: 14px;
    background: linear-gradient(160deg, #F8F9FF 0%, #EEF1FF 100%);
    border: 1px solid rgba(59, 91, 255, 0.1);
    text-align: center;
}

.popular-cat-stat strong {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.popular-cat-stat span {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-soft);
}

.popular-cat-cta {
    font-family: 'Outfit', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #3B5BFF 0%, #5B7CFF 100%);
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(59, 91, 255, 0.3);
    transition: all 0.25s ease;
}

.popular-cat-cta svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.popular-cat-cta:hover {
    color: #fff;
    background: linear-gradient(135deg, #2A45E0 0%, #3B5BFF 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(59, 91, 255, 0.4);
}

.popular-cat-cta:hover svg {
    transform: translateX(3px);
}

.category-grid-8,
.category-grid.category-grid-8 {
    position: relative;
    z-index: 1;
    grid-template-columns: repeat(8, 1fr);
    gap: 14px;
}

.popular-categories-section .category-card {
    padding: 20px 10px 16px;
    gap: 8px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(230, 232, 242, 0.95);
    box-shadow:
        0 8px 22px rgba(26, 26, 46, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.popular-categories-section .category-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
}

.popular-categories-section .category-icon svg {
    width: 21px;
    height: 21px;
}

.popular-categories-section .category-card strong {
    font-size: 13.5px;
}

.popular-categories-section .category-count {
    font-size: 12px;
}

.cat-pen {
    background: linear-gradient(145deg, #EEF0F6, #E2E5EE);
    color: #334155 !important;
}

.cat-hr {
    background: linear-gradient(145deg, #EDE9FE, #DDD6FE);
    color: #7C3AED !important;
}

.cat-finance {
    background: linear-gradient(145deg, #ECFDF5, #D1FAE5);
    color: #059669 !important;
}

.cat-support {
    background: linear-gradient(145deg, #EFF6FF, #DBEAFE);
    color: #2563EB !important;
}

.cat-legal {
    background: linear-gradient(145deg, #FEF3C7, #FDE68A);
    color: #B45309 !important;
}

.cat-hospitality {
    background: linear-gradient(145deg, #FFF1F2, #FFE4E6);
    color: #E11D48 !important;
}

.cat-logistics {
    background: linear-gradient(145deg, #F0F9FF, #E0F2FE);
    color: #0284C7 !important;
}

.cat-media {
    background: linear-gradient(145deg, #FDF4FF, #FAE8FF);
    color: #C026D3 !important;
}

.cat-data {
    background: linear-gradient(145deg, #EEF2FF, #E0E7FF);
    color: #4F46E5 !important;
}

/* ========== JOB CARDS (2 per row) ========== */
.jobs-section {
    position: relative;
    padding: 40px 0 64px;
    background:
        radial-gradient(ellipse 55% 45% at 8% 12%, rgba(59, 91, 255, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse 45% 40% at 92% 8%, rgba(123, 97, 255, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, #F6F7FF 0%, #FFFFFF 42%, #FFFFFF 100%);
    overflow: hidden;
}

.jobs-section::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 91, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.jobs-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    padding: 22px 24px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(230, 232, 242, 0.95);
    box-shadow:
        0 12px 32px rgba(26, 26, 46, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
}

.jobs-intro {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.jobs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 5px 12px 5px 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-indigo);
    background: linear-gradient(135deg, #EEF1FF 0%, #F5F7FF 100%);
    border: 1px solid rgba(59, 91, 255, 0.14);
    border-radius: 999px;
}

.jobs-eyebrow svg {
    width: 14px;
    height: 14px;
}

.jobs-intro h2 {
    font-size: clamp(1.45rem, 2.4vw, 1.9rem);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
    letter-spacing: -0.03em;
    line-height: 1.2;
    position: relative;
    display: inline-block;
}

.jobs-intro h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 48px;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, #3B5BFF, #7B61FF);
}

.jobs-intro p {
    margin: 12px 0 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 520px;
}

.jobs-head-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

.jobs-pulse-stats {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.jobs-pulse-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 96px;
    padding: 10px 14px;
    border-radius: 14px;
    background: linear-gradient(160deg, #F8F9FF 0%, #EEF1FF 100%);
    border: 1px solid rgba(59, 91, 255, 0.1);
    text-align: center;
}

.jobs-pulse-item strong {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.jobs-pulse-item span {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-soft);
}

.jobs-head-cta {
    font-family: 'Outfit', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #3B5BFF 0%, #5B7CFF 100%);
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(59, 91, 255, 0.3);
    transition: all 0.25s ease;
}

.jobs-head-cta svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.jobs-head-cta:hover {
    color: #fff;
    background: linear-gradient(135deg, #2A45E0 0%, #3B5BFF 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(59, 91, 255, 0.4);
}

.jobs-head-cta:hover svg {
    transform: translateX(3px);
}

.jobs-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.job-card {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 16px;
    align-items: stretch;
    padding: 20px 18px;
    background: #fff;
    border: 1px solid rgba(230, 232, 242, 0.95);
    border-radius: 18px;
    box-shadow:
        0 8px 24px rgba(26, 26, 46, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    transition: all 0.25s ease;
}

.job-card:hover {
    border-color: rgba(59, 91, 255, 0.22);
    box-shadow: 0 14px 32px rgba(59, 91, 255, 0.12);
    transform: translateY(-2px);
}

.job-card-logo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    letter-spacing: -0.02em;
    align-self: start;
}

.logo-google { background: #FEF3C7; color: #EA4335; }
.logo-amazon { background: #FFF7ED; color: #111827; font-size: 22px; font-weight: 800; }
.logo-microsoft { background: #EFF6FF; color: #2563EB; }
.logo-flipkart { background: #EEF2FF; color: #3B5BFF; font-size: 13px; }
.logo-infosys { background: #ECFDF5; color: #047857; font-size: 13px; }
.logo-accenture { background: #FDF2F8; color: #A21CAF; font-size: 13px; }
.logo-tcs { background: #EFF6FF; color: #1D4ED8; }
.logo-wipro { background: #FEF2F2; color: #DC2626; }
.logo-ibm { background: #EEF2FF; color: #312E81; font-size: 11px; }
.logo-paytm { background: #ECFEFF; color: #0E7490; font-size: 13px; }
.logo-reliance { background: #FFF1F2; color: #BE123C; }
.logo-cognizant { background: #F0FDF4; color: #15803D; font-size: 13px; }

.job-card-body {
    min-width: 0;
}

.job-card-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 2px;
}

.job-card-title-row h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.job-badge-featured {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--brand-indigo);
    border-radius: 999px;
    line-height: 1.4;
}

.job-company {
    margin: 0 0 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-soft);
}

.job-desc {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.55;
    color: #8A8A9E;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.job-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.job-chip svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.chip-loc {
    background: #F3F0FF;
    color: #6D28D9;
}

.chip-type {
    background: #ECFDF5;
    color: #059669;
}

.chip-exp {
    background: #FFF7ED;
    color: #EA580C;
}

.job-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.job-skills span {
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 500;
    color: #5B5B70;
    background: #F4F5F9;
    border: 1px solid #EBEDF4;
    border-radius: 999px;
}

.job-card-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 148px;
    align-self: stretch;
}

.job-salary {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    white-space: nowrap;
    line-height: 1.3;
}

.job-posted {
    font-size: 12px;
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.4;
}

.job-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
}

.job-bookmark {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 0;
}

.job-bookmark svg {
    width: 18px;
    height: 18px;
}

.job-bookmark:hover {
    color: var(--brand-indigo);
    border-color: rgba(59, 91, 255, 0.35);
    background: #F5F7FF;
}

.job-apply-btn {
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #3B5BFF 0%, #5B7CFF 100%);
    border: none;
    border-radius: 10px;
    padding: 9px 16px;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(59, 91, 255, 0.28);
    transition: all 0.2s ease;
}

.job-apply-btn:hover {
    color: #fff;
    background: linear-gradient(135deg, #2A45E0 0%, #3B5BFF 100%);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(59, 91, 255, 0.38);
}

.jobs-view-all-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.jobs-view-all-btn {
    font-family: 'Outfit', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #3B5BFF 0%, #5B7CFF 100%);
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(59, 91, 255, 0.32);
    transition: all 0.25s ease;
}

.jobs-view-all-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.jobs-view-all-btn:hover {
    color: #fff;
    background: linear-gradient(135deg, #2A45E0 0%, #3B5BFF 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(59, 91, 255, 0.42);
}

.jobs-view-all-btn:hover svg {
    transform: translateX(3px);
}

/* ========== OPPORTUNITY / RESUME CTA ========== */
.opportunity-section {
    position: relative;
    padding: 64px 0 80px;
    background:
        radial-gradient(ellipse 42% 50% at 82% 40%, rgba(59, 91, 255, 0.14) 0%, transparent 62%),
        radial-gradient(ellipse 30% 40% at 12% 70%, rgba(16, 185, 129, 0.07) 0%, transparent 55%),
        linear-gradient(165deg, #FBFCFF 0%, #EEF0FF 42%, #F8F9FF 100%);
    overflow: hidden;
}

.opportunity-bg-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(40px);
    z-index: 0;
}

.opportunity-bg-orb.orb-1 {
    width: 320px;
    height: 320px;
    top: -80px;
    right: 8%;
    background: rgba(59, 91, 255, 0.18);
    animation: floatY 7s ease-in-out infinite;
}

.opportunity-bg-orb.orb-2 {
    width: 220px;
    height: 220px;
    bottom: 40px;
    left: 6%;
    background: rgba(123, 97, 255, 0.12);
    animation: floatY 6s ease-in-out infinite 0.8s;
}

.opportunity-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(460px, 1.4fr);
    gap: 40px;
    align-items: center;
}

.opportunity-copy {
    position: relative;
    z-index: 2;
    max-width: 480px;
}

.opportunity-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;
    padding: 6px 14px 6px 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-indigo);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(59, 91, 255, 0.16);
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(59, 91, 255, 0.08);
    backdrop-filter: blur(8px);
}

.opportunity-eyebrow svg {
    width: 14px;
    height: 14px;
}

.opportunity-copy h2 {
    font-size: clamp(1.85rem, 3.2vw, 2.55rem);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.035em;
    line-height: 1.15;
    margin: 0 0 16px;
}

.opportunity-grad {
    display: inline;
    background: linear-gradient(115deg, #2A45E0 0%, #3B5BFF 35%, #7B61FF 70%, #5B7CFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.opportunity-copy p {
    margin: 0 0 28px;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--ink-soft);
    max-width: 410px;
}

.opportunity-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-bottom: 42px;
}

.opportunity-upload-btn {
    font-family: 'Outfit', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 26px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #3B5BFF 0%, #5B7CFF 55%, #6B8AFF 100%);
    border: none;
    border-radius: 14px;
    box-shadow:
        0 14px 32px rgba(59, 91, 255, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition: all 0.28s ease;
    position: relative;
    overflow: hidden;
}

.opportunity-upload-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.55s ease;
}

.opportunity-upload-btn:hover::after {
    transform: translateX(120%);
}

.opportunity-upload-btn svg {
    width: 18px;
    height: 18px;
    position: relative;
    z-index: 1;
}

.opportunity-upload-btn:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow:
        0 18px 40px rgba(59, 91, 255, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #2A45E0 0%, #3B5BFF 100%);
}

.opportunity-profile-link {
    font-family: 'Outfit', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 600;
    color: var(--brand-indigo);
    padding: 8px 4px;
    transition: all 0.2s ease;
}

.opportunity-profile-link svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.opportunity-profile-link:hover {
    color: var(--brand-indigo-dark);
}

.opportunity-profile-link:hover svg {
    transform: translateX(4px);
}

.opportunity-decor {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 22px;
    min-height: 110px;
    padding: 12px 8px 4px;
}

.decor-avatar {
    position: absolute;
    top: 0;
    left: 58px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(145deg, #ffffff 0%, #F5F7FF 100%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow:
        0 12px 28px rgba(59, 91, 255, 0.16),
        0 2px 6px rgba(26, 26, 46, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    color: var(--brand-indigo);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: floatY 3.5s ease-in-out infinite;
    z-index: 2;
}

.decor-avatar svg {
    width: 22px;
    height: 22px;
}

.decor-plant {
    position: relative;
    width: 62px;
    height: 84px;
    filter: drop-shadow(0 10px 16px rgba(22, 163, 74, 0.22));
}

.plant-leaf {
    position: absolute;
    bottom: 26px;
    width: 24px;
    height: 38px;
    border-radius: 70% 70% 40% 40%;
    background: linear-gradient(160deg, #86EFAC 0%, #16A34A 100%);
    box-shadow: inset -3px -4px 8px rgba(0, 0, 0, 0.12);
}

.plant-leaf.l1 {
    left: 4px;
    transform: rotate(-22deg);
}

.plant-leaf.l2 {
    right: 4px;
    transform: rotate(22deg);
    background: linear-gradient(160deg, #4ADE80, #15803D);
}

.plant-leaf.l3 {
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    width: 20px;
    height: 42px;
    bottom: 28px;
    background: linear-gradient(180deg, #BBF7D0, #22C55E);
    z-index: 1;
}

.plant-pot {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 28px;
    border-radius: 5px 5px 12px 12px;
    background: linear-gradient(180deg, #FDBA74 0%, #EA580C 55%, #C2410C 100%);
    box-shadow:
        inset 0 3px 0 rgba(255, 255, 255, 0.4),
        0 6px 12px rgba(194, 65, 12, 0.25);
}

.decor-mug {
    position: relative;
    width: 56px;
    height: 52px;
    margin-bottom: 6px;
    filter: drop-shadow(0 10px 16px rgba(59, 91, 255, 0.28));
    animation: floatY 4.2s ease-in-out infinite 0.4s;
}

.mug-steam {
    position: absolute;
    top: -2px;
    width: 3px;
    height: 12px;
    border-radius: 99px;
    background: rgba(148, 163, 184, 0.55);
    animation: floatY 2s ease-in-out infinite;
}

.mug-steam.s1 { left: 14px; }
.mug-steam.s2 { left: 22px; animation-delay: 0.35s; height: 10px; }

.mug-body {
    display: block;
    width: 40px;
    height: 38px;
    margin-top: 10px;
    border-radius: 8px 8px 14px 14px;
    background: linear-gradient(160deg, #BFDBFE 0%, #3B5BFF 45%, #2A45E0 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45);
}

.mug-handle {
    position: absolute;
    right: 2px;
    top: 18px;
    width: 18px;
    height: 20px;
    border: 3.5px solid #3B5BFF;
    border-left: none;
    border-radius: 0 12px 12px 0;
}

.opportunity-stage {
    position: relative;
    padding: 18px;
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.72) 0%, rgba(238, 241, 255, 0.55) 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow:
        0 30px 70px rgba(59, 91, 255, 0.14),
        0 10px 28px rgba(26, 26, 46, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(14px);
}

.opportunity-stage::before {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 26px;
    background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(59, 91, 255, 0.08), transparent 70%);
    pointer-events: none;
}

.opportunity-dash {
    display: grid;
    grid-template-columns: 1.45fr 0.85fr;
    gap: 16px;
    align-items: stretch;
    position: relative;
    z-index: 1;
}

.dash-panel {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(230, 232, 242, 0.9);
    border-radius: 24px;
    box-shadow:
        0 18px 44px rgba(59, 91, 255, 0.1),
        0 4px 12px rgba(26, 26, 46, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    padding: 20px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dash-panel:hover {
    transform: translateY(-2px);
    box-shadow:
        0 22px 48px rgba(59, 91, 255, 0.14),
        0 6px 16px rgba(26, 26, 46, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.dash-jobs-panel {
    background:
        linear-gradient(165deg, #F3F5FF 0%, #FFFFFF 48%, #FBFCFF 100%);
}

.dash-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.dash-head-ico {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(145deg, #EEF1FF, #DDE4FF);
    color: var(--brand-indigo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(59, 91, 255, 0.15);
}

.dash-head-ico svg {
    width: 17px;
    height: 17px;
}

.dash-panel-head h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.02em;
    flex: 1;
}

.dash-more {
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    background: #F5F6FA;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    padding: 0;
    transition: all 0.2s ease;
}

.dash-more:hover {
    background: #EEF1FF;
    color: var(--brand-indigo);
    border-color: rgba(59, 91, 255, 0.15);
}

.dash-more svg {
    width: 18px;
    height: 18px;
}

.dash-job-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.dash-job-card {
    background: #fff;
    border: 1px solid rgba(230, 232, 242, 0.9);
    border-radius: 18px;
    padding: 15px 13px;
    box-shadow:
        0 8px 20px rgba(26, 26, 46, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    transition: all 0.28s ease;
}

.dash-job-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 18px 36px rgba(59, 91, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    border-color: rgba(59, 91, 255, 0.22);
}

.dash-job-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.dash-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 6px 14px rgba(26, 26, 46, 0.08);
}

.dash-save,
.dash-share {
    width: 30px;
    height: 30px;
    border: none;
    background: #F5F6FA;
    color: var(--ink-soft);
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
}

.dash-save svg,
.dash-share svg {
    width: 14px;
    height: 14px;
}

.dash-save:hover,
.dash-share:hover {
    color: var(--brand-indigo);
    background: #EEF1FF;
    transform: scale(1.06);
}

.dash-job-card h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}

.dash-salary {
    margin: 0 0 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
}

.dash-job-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.dash-job-foot > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--ink-soft);
    font-weight: 500;
}

.dash-job-foot svg {
    width: 12px;
    height: 12px;
}

.dash-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dash-gauges {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-gauge {
    position: relative;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    filter: drop-shadow(0 6px 12px rgba(59, 91, 255, 0.12));
}

.gauge-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.gauge-bg {
    fill: none;
    stroke: #E8EAF5;
    stroke-width: 3.4;
}

.gauge-fill {
    fill: none;
    stroke-width: 3.4;
    stroke-linecap: round;
}

.gauge-green {
    stroke: #22C55E;
    filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.35));
}

.gauge-blue {
    stroke: #3B5BFF;
    filter: drop-shadow(0 0 4px rgba(59, 91, 255, 0.35));
}

.gauge-val {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}

.dash-strength-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-left: 4px;
}

.dash-strength-lines span {
    display: block;
    height: 9px;
    border-radius: 99px;
    background: linear-gradient(90deg, #E4E7F5 0%, #F3F4FA 100%);
    box-shadow: inset 0 1px 2px rgba(26, 26, 46, 0.04);
}

.dash-strength-lines span:nth-child(1) { width: 100%; }
.dash-strength-lines span:nth-child(2) { width: 78%; }
.dash-strength-lines span:nth-child(3) { width: 56%; }

.dash-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center;
}

.dash-stat {
    padding: 10px 6px;
    border-radius: 14px;
    background: linear-gradient(160deg, #F8F9FF 0%, #FFFFFF 100%);
    border: 1px solid rgba(230, 232, 242, 0.85);
    transition: transform 0.2s ease;
}

.dash-stat:hover {
    transform: translateY(-2px);
}

.dash-stat strong {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 4px;
}

.dash-stat span {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-soft);
}

.stat-blue { color: #3B5BFF; }
.stat-green { color: #16A34A; }
.stat-coral { color: #E11D48; }

/* ========== TOP COMPANIES SLIDER ========== */
.companies-section {
    position: relative;
    padding: 48px 0 64px;
    background:
        radial-gradient(ellipse 45% 40% at 10% 20%, rgba(59, 91, 255, 0.06) 0%, transparent 55%),
        linear-gradient(180deg, #FFFFFF 0%, #F7F8FC 50%, #FFFFFF 100%);
}

.companies-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.companies-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 560px;
}

.companies-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 5px 12px 5px 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-indigo);
    background: #EEF1FF;
    border: 1px solid rgba(59, 91, 255, 0.14);
    border-radius: 999px;
}

.companies-eyebrow svg {
    width: 14px;
    height: 14px;
}

.companies-intro h2 {
    font-size: clamp(1.45rem, 2.4vw, 1.9rem);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
    letter-spacing: -0.03em;
    position: relative;
    display: inline-block;
}

.companies-intro h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 48px;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, #3B5BFF, #7B61FF);
}

.companies-intro p {
    margin: 12px 0 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink-soft);
}

.companies-cta {
    font-family: 'Outfit', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #3B5BFF 0%, #5B7CFF 100%);
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(59, 91, 255, 0.3);
    transition: all 0.25s ease;
}

.companies-cta svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.companies-cta:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(59, 91, 255, 0.4);
}

.companies-cta:hover svg {
    transform: translateX(3px);
}

.companies-slider {
    position: relative;
    padding: 6px 2px 18px;
    overflow: hidden;
}

.companies-slider .swiper-slide {
    height: auto;
}

.company-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    height: 100%;
    min-height: 148px;
    padding: 24px 16px 20px;
    background: #fff;
    /* border: 1px solid rgba(230, 232, 242, 0.95); */
    border-radius: 18px;
    box-shadow:
        0 10px 28px rgba(26, 26, 46, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    transition: all 0.28s ease;
    color: inherit;
}

.company-card:hover {
    transform: translateY(-6px);
    border-color: rgba(59, 91, 255, 0.22);
    box-shadow:
        0 18px 40px rgba(59, 91, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    color: inherit;
}

.company-logo {
    width: 78px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

.company-logo .logo-mark {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.logo-tcs .logo-mark {
    font-size: 22px;
    background: linear-gradient(90deg, #F97316, #3B5BFF, #22C55E);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.logo-infosys .logo-mark {
    font-size: 18px;
    color: #007CC3;
}

.logo-wipro .wm-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    background: conic-gradient(#3B5BFF, #22C55E, #F59E0B, #EC4899, #3B5BFF);
    box-shadow: 0 6px 14px rgba(59, 91, 255, 0.2);
}

.logo-hdfc .logo-mark {
    font-size: 16px;
    color: #fff;
    background: linear-gradient(135deg, #004C8F, #ED1C24);
    padding: 10px 12px;
    border-radius: 10px;
}

.logo-techm .logo-mark {
    font-size: 17px;
    color: #E31837;
}

.logo-accenture .logo-mark {
    font-size: 15px;
    color: #A100FF;
    font-weight: 600;
    letter-spacing: -0.04em;
}

.logo-deloitte .logo-mark {
    position: relative;
    font-size: 17px;
    color: #000;
    padding-right: 10px;
}

.logo-deloitte .dot-green {
    position: absolute;
    right: 0;
    top: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #86BC25;
}

.logo-amazon .logo-mark {
    position: relative;
    font-size: 20px;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.04em;
    padding-bottom: 8px;
}

.logo-amazon .amz-smile {
    position: absolute;
    left: 8px;
    right: 2px;
    bottom: 0;
    height: 8px;
    border-bottom: 2.5px solid #FF9900;
    border-radius: 0 0 50% 50%;
}

.logo-ibm .logo-mark {
    font-size: 22px;
    color: #054ADA;
    letter-spacing: 0.08em;
}

.logo-capgemini .logo-mark {
    font-size: 13px;
    color: #0070AD;
}

.logo-cognizant .logo-mark {
    font-size: 13px;
    color: #0033A0;
}

.logo-google .g-mark {
    display: inline-flex;
    gap: 0;
    font-size: 18px;
    font-weight: 700;
}

.logo-google .g-mark b:nth-child(1) { color: #4285F4; }
.logo-google .g-mark b:nth-child(2) { color: #EA4335; }
.logo-google .g-mark b:nth-child(3) { color: #FBBC05; }
.logo-google .g-mark b:nth-child(4) { color: #4285F4; }
.logo-google .g-mark b:nth-child(5) { color: #34A853; }
.logo-google .g-mark b:nth-child(6) { color: #EA4335; }

.company-card strong {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.companies-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.companies-prev,
.companies-next {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(230, 232, 242, 0.95);
    background: #fff;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(26, 26, 46, 0.06);
    transition: all 0.2s ease;
    padding: 0;
}

.companies-prev svg,
.companies-next svg {
    width: 18px;
    height: 18px;
}

.companies-prev:hover,
.companies-next:hover {
    color: #fff;
    background: linear-gradient(135deg, #3B5BFF, #5B7CFF);
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(59, 91, 255, 0.3);
}

/* ========== EMPLOYERS / HIRE SMARTER ========== */
.employers-section {
    position: relative;
    padding: 56px 0 64px;
    background:
        radial-gradient(ellipse 40% 45% at 50% 0%, rgba(124, 58, 237, 0.06) 0%, transparent 55%),
        #FFFFFF;
}

.employers-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 40px;
}

.employers-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7C3AED;
}

.employers-head h2 {
    font-size: clamp(1.55rem, 2.6vw, 2.1rem);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.employers-head p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-soft);
}

.employers-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.employer-card {
    text-align: center;
    padding: 28px 18px 24px;
    background: #fff;
    border: 1px solid rgba(230, 232, 242, 0.95);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(26, 26, 46, 0.04);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.employer-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
}

.employer-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform 0.28s ease;
}

.employer-icon svg {
    width: 28px;
    height: 28px;
    stroke-width: 2;
}

.employer-card:hover .employer-icon {
    transform: scale(1.06);
}

.employer-card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 10px;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.employer-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-soft);
}

.emp-purple .employer-icon {
    background: linear-gradient(145deg, #8B5CF6, #6D28D9);
    box-shadow: 0 12px 28px rgba(109, 40, 217, 0.35);
}

.emp-purple:hover {
    box-shadow: 0 18px 40px rgba(109, 40, 217, 0.14);
}

.emp-green .employer-icon {
    background: linear-gradient(145deg, #34D399, #059669);
    box-shadow: 0 12px 28px rgba(5, 150, 105, 0.32);
}

.emp-green:hover {
    box-shadow: 0 18px 40px rgba(5, 150, 105, 0.12);
}

.emp-orange .employer-icon {
    background: linear-gradient(145deg, #FB923C, #EA580C);
    box-shadow: 0 12px 28px rgba(234, 88, 12, 0.32);
}

.emp-orange:hover {
    box-shadow: 0 18px 40px rgba(234, 88, 12, 0.12);
}

.emp-blue .employer-icon {
    background: linear-gradient(145deg, #60A5FA, #2563EB);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.32);
}

.emp-blue:hover {
    box-shadow: 0 18px 40px rgba(37, 99, 235, 0.12);
}

.emp-pink .employer-icon {
    background: linear-gradient(145deg, #F472B6, #DB2777);
    box-shadow: 0 12px 28px rgba(219, 39, 119, 0.32);
}

.emp-pink:hover {
    box-shadow: 0 18px 40px rgba(219, 39, 119, 0.12);
}

/* ========== HIRE STATS BANNER ========== */
.hire-stats-section {
    padding: 8px 0 48px;
    background: #fff;
}

.hire-stats-banner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    align-items: stretch;
    padding: 28px 20px;
    border-radius: 24px;
    background:
        radial-gradient(ellipse 40% 80% at 20% 50%, rgba(123, 97, 255, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 35% 70% at 80% 40%, rgba(59, 91, 255, 0.16) 0%, transparent 50%),
        linear-gradient(115deg, #0B1138 0%, #12184A 45%, #0F1435 100%);
    box-shadow: 0 18px 48px rgba(11, 17, 56, 0.35);
    overflow: hidden;
}

.hire-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 18px;
    position: relative;
    min-width: 0;
}

.hire-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18%;
    right: 0;
    width: 1px;
    height: 64%;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.16) 20%, rgba(255, 255, 255, 0.16) 80%, transparent);
}

.hire-stat-ico {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(165, 180, 255, 0.22), rgba(123, 97, 255, 0.16));
    color: #C4B5FD;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.hire-stat-ico svg,
.hire-stat-ico i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    fill: none;
    margin: 0;
    padding: 0;
}

.hire-stat-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hire-stat-text strong {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.hire-stat-text span {
    font-size: 13px;
    font-weight: 500;
    color: rgba(199, 210, 254, 0.78);
    white-space: nowrap;
}

/* ========== HIRING STEPS ========== */
.hiring-steps-section {
    padding: 20px 0 56px;
    background: #fff;
}

.hiring-steps-head {
    text-align: center;
    margin-bottom: 42px;
}

.hiring-steps-head h2 {
    font-size: clamp(1.45rem, 2.5vw, 1.95rem);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.03em;
}

.hiring-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

.hiring-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
}

.hiring-step-icon-wrap {
    position: relative;
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hiring-step-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0.35;
}

.hiring-step-icon {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform 0.25s ease;
}

.hiring-step-icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 2;
}

.hiring-step:hover .hiring-step-icon {
    transform: scale(1.06);
}

.hiring-step-text {
    min-width: 0;
    padding-top: 8px;
    text-align: left;
}

.hiring-step-label {
    display: inline-block;
    margin-bottom: 6px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7C3AED;
}

.hiring-step-text h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}

.hiring-step-text p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-soft);
}

.hs-purple .hiring-step-ring {
    background: radial-gradient(circle, rgba(124, 58, 237, 0.22) 0%, transparent 70%);
    border: 8px solid rgba(124, 58, 237, 0.12);
}

.hs-purple .hiring-step-icon {
    background: linear-gradient(145deg, #8B5CF6, #6D28D9);
    box-shadow: 0 10px 24px rgba(109, 40, 217, 0.35);
}

.hs-blue .hiring-step-ring {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.2) 0%, transparent 70%);
    border: 8px solid rgba(37, 99, 235, 0.12);
}

.hs-blue .hiring-step-icon {
    background: linear-gradient(145deg, #3B82F6, #1D4ED8);
    box-shadow: 0 10px 24px rgba(29, 78, 216, 0.35);
}

.hs-green .hiring-step-ring {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, transparent 70%);
    border: 8px solid rgba(16, 185, 129, 0.12);
}

.hs-green .hiring-step-icon {
    background: linear-gradient(145deg, #34D399, #059669);
    box-shadow: 0 10px 24px rgba(5, 150, 105, 0.32);
}

/* ========== HIRING TOOLS ========== */
.tools-section {
    padding: 48px 0 64px;
    background:
        radial-gradient(ellipse 40% 45% at 20% 30%, rgba(59, 91, 255, 0.05) 0%, transparent 55%),
        #FFFFFF;
}

.tools-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 40px;
}

.tools-head h2 {
    font-size: clamp(1.5rem, 2.6vw, 2.05rem);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 10px;
    letter-spacing: -0.03em;
}

.tools-head p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-soft);
}

.tools-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
}

.tools-media {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(145deg, #EEF1FF, #F5F6FA);
    box-shadow:
        0 20px 50px rgba(59, 91, 255, 0.12),
        0 6px 18px rgba(26, 26, 46, 0.05);
    min-height: 360px;
}

.tools-image {
    display: block;
    width: 100%;
    height: auto;
    min-height: 360px;
    object-fit: cover;
    object-position: top left;
}

.tools-features {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.tools-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.tools-feature-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.tools-feature-icon svg {
    width: 22px;
    height: 22px;
}

.tfi-blue {
    background: linear-gradient(145deg, #60A5FA, #3B5BFF);
    box-shadow: 0 8px 20px rgba(59, 91, 255, 0.28);
}

.tfi-green {
    background: linear-gradient(145deg, #34D399, #059669);
    box-shadow: 0 8px 20px rgba(5, 150, 105, 0.28);
}

.tfi-orange {
    background: linear-gradient(145deg, #FB923C, #EA580C);
    box-shadow: 0 8px 20px rgba(234, 88, 12, 0.28);
}

.tfi-pink {
    background: linear-gradient(145deg, #F472B6, #DB2777);
    box-shadow: 0 8px 20px rgba(219, 39, 119, 0.28);
}

.tools-feature h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}

.tools-feature p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
}

.tools-explore {
    font-family: 'Outfit', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--brand-indigo);
    transition: all 0.2s ease;
}

.tools-explore svg {
    width: 17px;
    height: 17px;
    transition: transform 0.2s ease;
}

.tools-explore:hover {
    color: var(--brand-indigo-dark);
}

.tools-explore:hover svg {
    transform: translateX(4px);
}

/* ========== PLATFORM FEATURES ========== */
.features-section {
    position: relative;
    padding: 12px 0 56px;
    background: #fff;
}

.features-shell {
    position: relative;
    padding: 10px;
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(59, 91, 255, 0.08), rgba(16, 185, 129, 0.05) 45%, rgba(123, 97, 255, 0.07));
    box-shadow:
        0 24px 60px rgba(59, 91, 255, 0.08),
        0 4px 16px rgba(26, 26, 46, 0.04);
    overflow: hidden;
}

.features-glow {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    top: -120px;
    right: -60px;
    background: radial-gradient(circle, rgba(59, 91, 255, 0.18) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(10px);
}

.features-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: 8px 6px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
}

.feature-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 18px;
    border-radius: 18px;
    transition: all 0.28s ease;
    cursor: default;
}

.feature-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 22%;
    right: 0;
    width: 1px;
    height: 56%;
    background: linear-gradient(180deg, transparent, rgba(230, 232, 242, 0.95) 20%, rgba(230, 232, 242, 0.95) 80%, transparent);
}

.feature-item:hover {
    background: linear-gradient(160deg, #F8F9FF 0%, #FFFFFF 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(59, 91, 255, 0.08);
}

.feature-item:hover::after {
    opacity: 0;
}

.feature-icon {
    position: relative;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.28s ease;
    overflow: hidden;
}

.feature-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0.9;
    transition: opacity 0.28s ease;
}

.feature-icon svg,
.feature-icon i {
    position: relative;
    z-index: 1;
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2.1;
}

.feature-item:hover .feature-icon {
    transform: scale(1.06) translateY(-1px);
}

.feat-verified .feature-icon {
    color: #16A34A;
    background: linear-gradient(145deg, #ECFDF5, #D1FAE5);
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.18);
}

.feat-verified:hover .feature-icon {
    box-shadow: 0 12px 24px rgba(22, 163, 74, 0.28);
}

.feat-apply .feature-icon {
    color: #3B5BFF;
    background: linear-gradient(145deg, #EEF1FF, #DCE4FF);
    box-shadow: 0 8px 18px rgba(59, 91, 255, 0.18);
}

.feat-apply:hover .feature-icon {
    box-shadow: 0 12px 24px rgba(59, 91, 255, 0.28);
}

.feat-resume .feature-icon {
    color: #7C3AED;
    background: linear-gradient(145deg, #F5F3FF, #EDE9FE);
    box-shadow: 0 8px 18px rgba(124, 58, 237, 0.16);
}

.feat-resume:hover .feature-icon {
    box-shadow: 0 12px 24px rgba(124, 58, 237, 0.26);
}

.feat-alerts .feature-icon {
    color: #EA580C;
    background: linear-gradient(145deg, #FFF7ED, #FFEDD5);
    box-shadow: 0 8px 18px rgba(234, 88, 12, 0.16);
}

.feat-alerts:hover .feature-icon {
    box-shadow: 0 12px 24px rgba(234, 88, 12, 0.26);
}

.feat-career .feature-icon {
    color: #0D9488;
    background: linear-gradient(145deg, #F0FDFA, #CCFBF1);
    box-shadow: 0 8px 18px rgba(13, 148, 136, 0.16);
}

.feat-career:hover .feature-icon {
    box-shadow: 0 12px 24px rgba(13, 148, 136, 0.26);
}

.feature-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.feature-text strong {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.feature-text span {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink-soft);
    font-weight: 500;
}

/* ========== WHY CHOOSE US ========== */
.why-section {
    position: relative;
    padding: 40px 0 64px;
    background:
        radial-gradient(ellipse 50% 55% at 80% 30%, rgba(59, 91, 255, 0.12) 0%, transparent 58%),
        linear-gradient(180deg, #E8ECFF 0%, #EEF1FF 50%, #F2F4FF 100%);
    overflow: hidden;
}

.why-layout {
    display: grid;
    grid-template-columns: minmax(240px, 0.78fr) minmax(420px, 1.45fr);
    gap: 32px;
    align-items: center;
}

.why-copy {
    max-width: 360px;
}

.why-copy h2 {
    font-size: clamp(1.55rem, 2.6vw, 2.05rem);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0 0 12px;
}

.why-copy p {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-soft);
}

.why-btn {
    font-family: 'Outfit', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #3B5BFF 0%, #5B7CFF 100%);
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(59, 91, 255, 0.32);
    transition: all 0.25s ease;
}

.why-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(59, 91, 255, 0.42);
    background: linear-gradient(135deg, #2A45E0 0%, #3B5BFF 100%);
}

.why-slider-wrap {
    position: relative;
    min-width: 0;
}

.why-slider {
    overflow: hidden;
    padding: 8px 4px 12px;
}

.why-slider .swiper-slide {
    height: auto;
}

.why-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    min-height: 220px;
    padding: 24px 20px 20px;
    background: #fff;
    border: 1px solid rgba(230, 232, 242, 0.95);
    border-radius: 20px;
    box-shadow:
        0 12px 32px rgba(26, 26, 46, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    transition: all 0.28s ease;
}

.why-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 20px 44px rgba(59, 91, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.why-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    transition: transform 0.25s ease;
}

.why-icon svg {
    width: 22px;
    height: 22px;
}

.why-card:hover .why-icon {
    transform: scale(1.06);
}

.why-card-purple .why-icon {
    color: #7C3AED;
    background: linear-gradient(145deg, #F5F3FF, #EDE9FE);
    box-shadow: 0 8px 18px rgba(124, 58, 237, 0.16);
}

.why-card-blue .why-icon {
    color: #3B5BFF;
    background: linear-gradient(145deg, #EEF1FF, #DCE4FF);
    box-shadow: 0 8px 18px rgba(59, 91, 255, 0.16);
}

.why-card-green .why-icon {
    color: #16A34A;
    background: linear-gradient(145deg, #ECFDF5, #D1FAE5);
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.16);
}

.why-card-orange .why-icon {
    color: #EA580C;
    background: linear-gradient(145deg, #FFF7ED, #FFEDD5);
    box-shadow: 0 8px 18px rgba(234, 88, 12, 0.16);
}

.why-card-teal .why-icon {
    color: #0D9488;
    background: linear-gradient(145deg, #F0FDFA, #CCFBF1);
    box-shadow: 0 8px 18px rgba(13, 148, 136, 0.16);
}

.why-card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 10px;
    letter-spacing: -0.02em;
}

.why-card p {
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-soft);
    flex: 1;
}

.why-link {
    font-family: 'Outfit', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--brand-indigo);
    margin-top: auto;
    transition: all 0.2s ease;
}

.why-link svg {
    width: 15px;
    height: 15px;
    transition: transform 0.2s ease;
}

.why-link:hover {
    color: var(--brand-indigo-dark);
}

.why-link:hover svg {
    transform: translateX(3px);
}

.why-nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.why-prev,
.why-next {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(230, 232, 242, 0.95);
    background: #fff;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(26, 26, 46, 0.06);
    transition: all 0.2s ease;
    padding: 0;
}

.why-prev svg,
.why-next svg {
    width: 18px;
    height: 18px;
}

.why-prev:hover,
.why-next:hover {
    color: #fff;
    background: linear-gradient(135deg, #3B5BFF, #5B7CFF);
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(59, 91, 255, 0.3);
}

/* ========== SUCCESS STORIES ========== */
.stories-section {
    position: relative;
    padding: 52px 0 72px;
    background:
        radial-gradient(ellipse 40% 45% at 90% 25%, rgba(245, 158, 11, 0.08) 0%, transparent 55%),
        linear-gradient(180deg, #FFFFFF 0%, #FBFBFD 45%, #F7F8FA 100%);
    overflow: hidden;
}

.stories-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.stories-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 520px;
}

.stories-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 5px 12px 5px 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #B45309;
    background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 999px;
}

.stories-eyebrow svg {
    width: 14px;
    height: 14px;
}

.stories-intro h2 {
    font-size: clamp(1.55rem, 2.6vw, 2rem);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
    letter-spacing: -0.03em;
    position: relative;
    display: inline-block;
}

.stories-intro h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 48px;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, #3B5BFF, #F59E0B);
}

.stories-intro p {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
}

.stories-view-all {
    font-family: 'Outfit', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--brand-indigo);
    padding: 10px 4px;
    transition: all 0.2s ease;
}

.stories-view-all svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.stories-view-all:hover {
    color: var(--brand-indigo-dark);
}

.stories-view-all:hover svg {
    transform: translateX(3px);
}

.stories-slider-wrap {
    position: relative;
}

.stories-slider {
    overflow: hidden;
    padding: 12px 4px 16px;
}

.stories-slider .swiper-slide {
    height: auto;
    background: transparent;
}

.story-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 280px;
    padding: 26px 22px 20px;
    background: #fff;
    border: none;
    border-radius: 22px;
    box-shadow: 0 10px 28px rgba(26, 26, 46, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: visible;
    isolation: isolate;
}

.story-card::before {
    display: none;
}

.story-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(59, 91, 255, 0.12);
}

.story-card-featured {
    background: #fff;
    border: none;
}

.story-quote-mark {
    position: relative;
    z-index: 1;
    font-family: 'Outfit', sans-serif;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 0.7;
    margin-bottom: 12px;
    background: linear-gradient(160deg, #A5B4FF, #3B5BFF);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0.9;
}

.story-text {
    position: relative;
    z-index: 1;
    margin: 0 0 24px;
    font-size: 14.5px;
    line-height: 1.7;
    color: #3A3A52;
    font-weight: 500;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.story-footer {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(230, 232, 242, 0.9);
}

.story-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.story-user img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 6px 16px rgba(26, 26, 46, 0.12);
    flex-shrink: 0;
}

.story-user strong {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 2px;
}

.story-user span {
    font-size: 12px;
    color: var(--ink-soft);
    font-weight: 500;
}

.story-stars {
    display: flex;
    align-items: center;
    gap: 3px;
}

.story-stars svg {
    width: 14px;
    height: 14px;
    fill: #F59E0B;
    stroke: #F59E0B;
}

.stories-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.stories-prev,
.stories-next {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(230, 232, 242, 0.95);
    background: #fff;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(26, 26, 46, 0.06);
    transition: all 0.2s ease;
    padding: 0;
}

.stories-prev svg,
.stories-next svg {
    width: 18px;
    height: 18px;
}

.stories-prev:hover,
.stories-next:hover {
    color: #fff;
    background: linear-gradient(135deg, #3B5BFF, #5B7CFF);
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(59, 91, 255, 0.3);
}

/* ========== EMPLOYER CTA ========== */
.employer-cta-section {
    padding: 12px 0 56px;
    background: #fff;
}

.employer-cta-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 36px 40px;
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 45% 80% at 85% 50%, rgba(91, 124, 255, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse 30% 60% at 10% 80%, rgba(123, 97, 255, 0.25) 0%, transparent 50%),
        linear-gradient(115deg, #0B1248 0%, #151B6B 48%, #1A237E 100%);
    box-shadow: 0 20px 50px rgba(11, 18, 72, 0.35);
}

.employer-cta-content {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    z-index: 2;
    max-width: 480px;
}

.employer-cta-star {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(145deg, #8B5CF6, #6D28D9);
    box-shadow: 0 10px 24px rgba(109, 40, 217, 0.45);
}

.employer-cta-star svg {
    width: 22px;
    height: 22px;
    fill: #fff;
    stroke: #fff;
}

.employer-cta-copy h2 {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.employer-cta-copy p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(226, 232, 255, 0.82);
}

.employer-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.employer-cta-primary {
    font-family: 'Outfit', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 14.5px;
    font-weight: 600;
    color: #1A237E;
    background: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(255, 255, 255, 0.2);
    transition: all 0.25s ease;
}

.employer-cta-primary svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.employer-cta-primary:hover {
    color: #0B1248;
    background: #F5F7FF;
    transform: translateY(-2px);
}

.employer-cta-primary:hover svg {
    transform: translateX(3px);
}

.employer-cta-secondary {
    font-family: 'Outfit', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 12px;
    transition: all 0.25s ease;
}

.employer-cta-secondary svg {
    width: 16px;
    height: 16px;
}

.employer-cta-secondary:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

.employer-cta-visual {
    position: relative;
    width: 140px;
    height: 120px;
    flex-shrink: 0;
    z-index: 1;
}

.cta-rocket {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 54px;
    height: 78px;
    transform: rotate(28deg);
    animation: floatY 3.5s ease-in-out infinite;
}

.rocket-body {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 28px;
    height: 58px;
    border-radius: 50% 50% 40% 40%;
    background: linear-gradient(180deg, #EEF2FF 0%, #93C5FD 40%, #3B5BFF 100%);
    box-shadow: inset -4px 0 0 rgba(255, 255, 255, 0.35);
}

.rocket-window {
    position: absolute;
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #BFDBFE;
    border: 2px solid #fff;
}

.rocket-fin {
    position: absolute;
    bottom: 22px;
    width: 14px;
    height: 18px;
    background: #F97316;
    border-radius: 4px;
}

.rocket-fin.left {
    left: 2px;
    transform: skewY(20deg);
}

.rocket-fin.right {
    right: 2px;
    transform: skewY(-20deg);
}

.rocket-flame {
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    width: 12px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(180deg, #FDBA74, #F97316, #EF4444);
    animation: floatY 0.6s ease-in-out infinite alternate;
}

.cta-cloud {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    filter: blur(0.5px);
}

.cta-cloud.c1 {
    width: 36px;
    height: 20px;
    right: 8px;
    bottom: 8px;
    box-shadow: 14px 4px 0 -2px rgba(255, 255, 255, 0.7);
}

.cta-cloud.c2 {
    width: 24px;
    height: 14px;
    right: 42px;
    bottom: 4px;
    opacity: 0.7;
}

.cta-spark {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    opacity: 0.7;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.cta-spark.s1 { top: 18px; right: 30px; }
.cta-spark.s2 { top: 40px; right: 8px; width: 4px; height: 4px; }
.cta-spark.s3 { top: 10px; right: 70px; width: 5px; height: 5px; opacity: 0.5; }

/* ========== SITE FOOTER ========== */
.site-footer {
    background: linear-gradient(180deg, #0B1138 0%, #080D2A 100%);
    color: rgba(226, 232, 255, 0.78);
    padding: 56px 0 24px;
}

.footer-main {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 0.85fr) 1fr;
    gap: 28px 20px;
    padding-bottom: 36px;
}

.footer-logo img {
    height: 42px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

.footer-tagline {
    margin: 10px 0 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(199, 210, 254, 0.7);
    letter-spacing: 0.02em;
}

.footer-desc {
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(199, 210, 254, 0.72);
    max-width: 280px;
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-social-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.footer-social-btn svg {
    width: 15px;
    height: 15px;
}

.footer-social-btn:hover {
    color: #fff;
    background: var(--brand-indigo);
    border-color: transparent;
    transform: translateY(-2px);
}

.footer-col h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col a {
    font-size: 13.5px;
    color: rgba(199, 210, 254, 0.72);
    transition: color 0.2s ease;
}

.footer-acc-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    margin: 0 0 16px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: default;
    pointer-events: none;
    text-align: left;
}

.footer-acc-btn h4 {
    margin: 0;
}

.footer-acc-btn svg {
    display: none;
    width: 18px;
    height: 18px;
    color: rgba(199, 210, 254, 0.7);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.footer-col.is-open .footer-acc-btn svg {
    transform: rotate(180deg);
}

/* ========== MOBILE BOTTOM NAV ========== */
.mobile-bottom-nav {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 1040;
    display: none;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 2px;
    min-height: 68px;
    padding: 8px 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.96) 100%);
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 24px;
    box-shadow:
        0 12px 40px rgba(26, 26, 46, 0.14),
        0 2px 8px rgba(59, 91, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.mbn-item {
    appearance: none;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 2px;
    min-width: 0;
    font-family: 'Poppins', sans-serif;
    color: #8B90A8;
    text-decoration: none;
    cursor: pointer;
    border-radius: 16px;
    transition: color 0.22s ease, background 0.22s ease, transform 0.22s ease;
    position: relative;
}

.mbn-ico {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.mbn-ico svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.1;
}

.mbn-label {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    color: inherit;
}

.mbn-item:hover,
.mbn-item:focus-visible {
    color: #3B5BFF;
    outline: none;
}

.mbn-item:hover .mbn-ico,
.mbn-item:focus-visible .mbn-ico {
    background: rgba(59, 91, 255, 0.08);
}

.mbn-item.active {
    color: #2A45E0;
}

.mbn-item.active .mbn-ico {
    background: linear-gradient(145deg, #3B5BFF 0%, #6B5CFF 100%);
    color: #fff;
    box-shadow: 0 8px 16px rgba(59, 91, 255, 0.32);
    transform: translateY(-1px);
}

.mbn-item.active .mbn-label {
    font-weight: 600;
    color: #2A45E0;
}

.mbn-profile .mbn-avatar {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    background: linear-gradient(135deg, #3B5BFF, #A78BFA, #F472B6);
    box-shadow: 0 6px 14px rgba(59, 91, 255, 0.22);
}

.mbn-profile .mbn-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid #fff;
    background: #EEF0FB;
}

.mbn-online {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22C55E;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2);
}

.mbn-profile:hover .mbn-avatar,
.mbn-profile:focus-visible .mbn-avatar {
    transform: scale(1.04);
}

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

.footer-apps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    transition: all 0.2s ease;
}

.footer-store-btn img,
.footer-store-btn .store-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
}

.footer-store-btn span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.footer-store-btn small {
    font-size: 10px;
    color: rgba(199, 210, 254, 0.7);
    font-weight: 500;
}

.footer-store-btn strong,
.footer-store-btn h4 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
}

.footer-store-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    margin: 0;
    font-size: 13px;
    color: rgba(199, 210, 254, 0.65);
}

.footer-payments {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.pay-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    line-height: 0;
}

.pay-badge img {
    display: block;
    height: 18px;
    width: auto;
    max-width: 72px;
    object-fit: contain;
}

.pay-secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(199, 210, 254, 0.8);
}

.pay-secure svg {
    width: 15px;
    height: 15px;
    color: #34D399;
}

/* ========== TRUST BADGES ========== */
.trust-badges {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    flex-wrap: nowrap;
    margin-top: 20px;
    padding: 6px;
    background: linear-gradient(145deg, #ffffff 0%, #F7F8FF 100%);
    border: 1px solid rgba(231, 231, 243, 0.95);
    border-radius: 18px;
    box-shadow:
        0 10px 28px rgba(59, 91, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    overflow: hidden;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 14px;
    position: relative;
    transition: all 0.25s ease;
    cursor: default;
}

.trust-badge:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 28px;
    background: linear-gradient(180deg, transparent, rgba(231, 231, 243, 1), transparent);
}

.trust-badge:hover {
    background: #fff;
    box-shadow: 0 6px 16px rgba(59, 91, 255, 0.08);
}

.trust-badge:hover .trust-badge-icon {
    transform: scale(1.06);
}

.trust-badge-icon {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    overflow: hidden;
    transition: transform 0.25s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.trust-badge-icon svg,
.trust-badge-icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    fill: none;
    margin: 0;
    padding: 0;
}

.trust-verified {
    background: linear-gradient(145deg, #E8F8EE, #D4F0DD);
    color: #16A34A !important;
}

.trust-apply {
    background: linear-gradient(145deg, #EEF1FF, #E0E6FF);
    color: #3B5BFF !important;
}

.trust-free {
    background: linear-gradient(145deg, #FFE8EC, #FFD6DE);
    color: #E11D48 !important;
}

.trust-badge-text {
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #1A1A2E;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* ========== HERO STATS ========== */
.hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
    row-gap: 0;
    margin-top: 14px;
    padding: 4px;
    background: linear-gradient(145deg, #ffffff 0%, #F7F8FF 100%);
    border: 1px solid rgba(231, 231, 243, 0.95);
    border-radius: 20px;
    box-shadow:
        0 12px 36px rgba(59, 91, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    overflow: hidden;
}

.hero-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 18px;
    border: none;
    background: transparent;
    box-shadow: none;
    justify-content: flex-start;
    position: relative;
    transition: background 0.25s ease;
}

.hero-stat-item:nth-child(1),
.hero-stat-item:nth-child(2) {
    border-bottom: 1px solid rgba(231, 231, 243, 0.9);
}

.hero-stat-item:nth-child(odd) {
    border-right: 1px solid rgba(231, 231, 243, 0.9);
}

.hero-stat-item:not(:last-child)::after {
    display: none;
}

.hero-stat-item:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: none;
}

.hero-stat-icon {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.hero-stat-item:hover .hero-stat-icon {
    transform: none;
}

.hero-stat-icon svg,
.hero-stat-icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px !important;
    height: 18px !important;
    margin: 0;
    padding: 0;
    stroke: currentColor !important;
    stroke-width: 2;
    fill: none;
    color: inherit;
}

.stat-jobs {
    background: linear-gradient(145deg, #EEF1FF, #E0E6FF);
    color: #3B5BFF !important;
}

.stat-companies {
    background: linear-gradient(145deg, #F1EDFF, #E5DEFF);
    color: #7B61FF !important;
}

.stat-seekers {
    background: linear-gradient(145deg, #FFF0E6, #FFE0CC);
    color: #E86B2A !important;
}

.stat-rating {
    background: linear-gradient(145deg, #FFF8E6, #FEF0C7);
    color: #D97706 !important;
}

.hero-stat-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hero-stat-item strong {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1A1A2E;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.hero-stat-item span {
    display: block;
    margin-top: 0;
    font-size: 11.5px;
    color: #7A7A90;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========== PROFILE STEPS ========== */
.profile-steps {
    margin-top: 14px;
    padding: 18px 18px 16px;
    background: linear-gradient(145deg, #ffffff 0%, #F7F8FF 100%);
    border: 1px solid rgba(231, 231, 243, 0.95);
    border-radius: 18px;
    box-shadow:
        0 10px 30px rgba(59, 91, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.profile-steps-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.profile-steps h3 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
}

.profile-steps-cta {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-indigo);
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 99px;
    background: rgba(59, 91, 255, 0.08);
    transition: all 0.2s ease;
}

.profile-steps-cta:hover {
    background: var(--brand-indigo);
    color: #fff;
}

.profile-steps-list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.profile-step {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    position: relative;
    padding: 10px 6px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(231, 231, 243, 0.8);
    box-shadow: 0 2px 8px rgba(26, 26, 46, 0.03);
    transition: all 0.25s ease;
}

.profile-step:hover {
    border-color: rgba(59, 91, 255, 0.25);
    box-shadow: 0 8px 18px rgba(59, 91, 255, 0.1);
    transform: translateY(-2px);
}

.profile-step-num {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3B5BFF, #7B61FF);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(59, 91, 255, 0.35);
}

.profile-step-icon {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(145deg, #EEF1FF, #E0E6FF);
    color: var(--brand-indigo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    overflow: hidden;
    margin-top: 4px;
}

.profile-step-icon svg,
.profile-step-icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    fill: none;
    margin: 0;
    padding: 0;
}

.profile-step-text {
    font-family: 'Outfit', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    white-space: normal;
}

.profile-step-line {
    flex: 0 0 16px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(59, 91, 255, 0.35), rgba(123, 97, 255, 0.55));
    align-self: center;
    margin-top: 4px;
}

.profile-step-arrow {
    display: none;
}

/* ========== PLATFORM HIGHLIGHTS ========== */
.highlights-section {
    padding: 12px 0 40px;
    background: #fff;
}

.highlights-card {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: 8px;
    background: linear-gradient(145deg, #ffffff 0%, #F8F9FF 100%);
    border: 1px solid rgba(231, 231, 243, 0.95);
    border-radius: 22px;
    box-shadow:
        0 14px 40px rgba(59, 91, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    overflow: hidden;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 18px;
    position: relative;
    transition: background 0.25s ease;
    border-radius: 16px;
}

.highlight-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 44px;
    background: linear-gradient(180deg, transparent, rgba(231, 231, 243, 1), transparent);
}

.highlight-item:hover {
    background: #fff;
}

.highlight-item:hover .highlight-icon {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 18px rgba(59, 91, 255, 0.15);
}

.highlight-icon {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.highlight-icon svg,
.highlight-icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
    fill: none;
    margin: 0;
    padding: 0;
}

.hi-jobs {
    background: linear-gradient(145deg, #EEF1FF, #DCE3FF);
    color: #3B5BFF !important;
}

.hi-companies {
    background: linear-gradient(145deg, #E6F7F4, #D0EFE9);
    color: #0F766E !important;
}

.hi-seekers {
    background: linear-gradient(145deg, #FFF0E6, #FFE0CC);
    color: #EA580C !important;
}

.hi-verified {
    background: linear-gradient(145deg, #F1EDFF, #E5DEFF);
    color: #7B61FF !important;
}

.hi-support {
    background: linear-gradient(145deg, #E8F4FF, #D6EBFF);
    color: #2563EB !important;
}

.highlight-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.highlight-text strong {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #1A1A2E;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.highlight-text span {
    font-size: 13px;
    font-weight: 500;
    color: #6B6B80;
    white-space: nowrap;
}

/* ========== BATTLE BANNER ========== */
.battle-section {
    padding: 28px 0 20px;
    background: #fff;
}

.battle-banner {
    display: grid;
    grid-template-columns: 1.15fr 0.9fr 1.2fr;
    align-items: center;
    gap: 20px;
    padding: 36px 40px;
    border-radius: 24px;
    background:
        radial-gradient(ellipse 50% 80% at 55% 50%, rgba(123, 97, 255, 0.28) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at 80% 30%, rgba(59, 91, 255, 0.2) 0%, transparent 55%),
        linear-gradient(115deg, #0F1230 0%, #1A1F4D 45%, #151A3A 100%);
    box-shadow: 0 18px 48px rgba(15, 18, 48, 0.35);
    overflow: hidden;
    position: relative;
}

.battle-content {
    position: relative;
    z-index: 2;
    max-width: 360px;
}

.battle-content h2 {
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.battle-content p {
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 20px;
}

.battle-btn {
    font-family: 'Outfit', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #3B5BFF 0%, #5B7CFF 100%);
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(59, 91, 255, 0.4);
    transition: all 0.25s ease;
}

.battle-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(59, 91, 255, 0.5);
    background: linear-gradient(135deg, #2A45E0 0%, #3B5BFF 100%);
}

.battle-visual {
    position: relative;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.battle-glow {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 200, 60, 0.35) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.battle-trophy {
    position: relative;
    z-index: 2;
    width: 88px;
    height: 88px;
    border-radius: 24px;
    background: linear-gradient(145deg, #FFE08A, #F5B942);
    color: #8B5A00;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 14px 30px rgba(245, 185, 66, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    animation: floatY 3.5s ease-in-out infinite;
}

.battle-trophy svg {
    width: 42px;
    height: 42px;
    stroke-width: 1.8;
}

.battle-gamepad {
    position: absolute;
    right: 18%;
    bottom: 12%;
    z-index: 3;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(145deg, #2A2A3A, #15151F);
    color: #A5B4FF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
    animation: floatY 4s ease-in-out infinite 0.4s;
}

.battle-gamepad svg {
    width: 26px;
    height: 26px;
}

.battle-confetti {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    opacity: 0.9;
}

.battle-confetti.c1 {
    background: #F5B942;
    top: 18%;
    left: 22%;
    transform: rotate(20deg);
}

.battle-confetti.c2 {
    background: #7B61FF;
    top: 28%;
    right: 20%;
    width: 6px;
    height: 10px;
    border-radius: 99px;
}

.battle-confetti.c3 {
    background: #22C55E;
    bottom: 24%;
    left: 28%;
    border-radius: 50%;
}

.battle-confetti.c4 {
    background: #EC4899;
    bottom: 30%;
    right: 26%;
    transform: rotate(35deg);
}

.battle-confetti.c5 {
    background: #38BDF8;
    top: 12%;
    left: 48%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.battle-confetti.c6 {
    background: #F97316;
    top: 42%;
    left: 16%;
    width: 7px;
    height: 4px;
    border-radius: 99px;
    transform: rotate(-25deg);
}

.battle-stats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    position: relative;
    z-index: 2;
}

.battle-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    transition: transform 0.25s ease;
}

.battle-stat:hover {
    transform: translateY(-2px);
}

.battle-stat-ico {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(123, 97, 255, 0.35), rgba(59, 91, 255, 0.2));
    color: #C4B5FD;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(123, 97, 255, 0.25);
}

.battle-stat-ico svg,
.battle-stat-ico i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15px !important;
    height: 15px !important;
    stroke: currentColor !important;
    fill: none;
    margin: 0;
    padding: 0;
}

.battle-stat strong {
    font-family: 'Outfit', sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.battle-stat span:not(.battle-stat-ico) {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    white-space: nowrap;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1199.98px) {
    .hero-visual {
        min-height: 260px;
        height: 260px;
    }

    .float-card-journey {
        max-width: 220px;
    }

    .category-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .category-grid.category-grid-8 {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
}

@media (max-width: 991.98px) {
    .hero-section {
        padding: 20px 0 40px;
    }

    .hero-visual {
        min-height: 240px;
        height: 240px;
        margin-top: 12px;
    }

    .float-card-journey p,
    .float-card-alerts p {
        display: none;
    }

    .category-section {
        padding: 40px 0 48px;
    }

    .category-section-hero {
        padding: 28px 0 0;
        margin-top: 20px;
    }

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

    .category-grid.category-grid-8 {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .popular-categories-section {
        padding: 24px 0 36px;
    }

    .popular-cat-head {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 16px;
        gap: 18px;
        margin-bottom: 18px;
    }

    .popular-cat-side {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .popular-cat-stat {
        min-width: 84px;
        padding: 8px 12px;
    }

    .jobs-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .jobs-section {
        padding: 28px 0 48px;
    }

    .jobs-head {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 16px;
        gap: 18px;
        margin-bottom: 16px;
    }

    .jobs-head-side {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .jobs-pulse-stats {
        gap: 8px;
    }

    .jobs-pulse-item {
        min-width: 84px;
        padding: 8px 12px;
    }

    .job-card {
        grid-template-columns: 48px 1fr;
        gap: 12px;
    }

    .job-card-aside {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-width: 0;
        border-top: 1px solid rgba(230, 232, 242, 0.9);
        margin-top: 4px;
        padding-top: 12px;
    }

    .job-posted {
        margin-bottom: 0;
        margin-right: auto;
    }

    .job-actions {
        margin-top: 0;
        padding-top: 0;
        margin-left: auto;
    }

    .opportunity-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .opportunity-copy {
        max-width: none;
    }

    .opportunity-stage {
        padding: 14px;
        border-radius: 24px;
    }

    .opportunity-dash {
        grid-template-columns: 1fr 0.9fr;
    }

    .dash-job-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 8px;
    }

    .feature-item {
        justify-content: flex-start;
        width: 100%;
        padding: 16px 14px;
    }

    .feature-item:nth-child(5) {
        grid-column: auto;
        justify-content: flex-start;
    }

    .feature-item:not(:last-child)::after {
        top: auto;
        right: 14px;
        left: 14px;
        bottom: 0;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(230, 232, 242, 0.95) 15%, rgba(230, 232, 242, 0.95) 85%, transparent);
    }

    .why-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .why-copy {
        max-width: none;
        text-align: center;
    }

    .why-nav {
        justify-content: center;
    }

    .stories-head {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 22px;
        gap: 12px;
    }

    .employer-cta-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 22px;
        gap: 22px;
    }

    .employer-cta-visual {
        align-self: flex-end;
        width: 120px;
        height: 100px;
    }

    .footer-main {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 24px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .employers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .employer-card:last-child {
        grid-column: 1 / -1;
        max-width: 360px;
        justify-self: center;
        width: 100%;
    }

    .hire-stats-banner {
        grid-template-columns: 1fr;
        padding: 16px 14px;
        gap: 4px;
        border-radius: 20px;
    }

    .hire-stat {
        padding: 14px 12px;
    }

    .hire-stat:not(:last-child)::after {
        top: auto;
        right: 12px;
        left: 12px;
        bottom: 0;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14) 20%, rgba(255, 255, 255, 0.14) 80%, transparent);
    }

    .hire-stat-text span {
        white-space: normal;
    }

    .hiring-steps {
        grid-template-columns: 1fr;
        gap: 28px;
        max-width: 420px;
    }

    .hiring-step {
        align-items: flex-start;
        text-align: left;
    }

    .tools-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .tools-media,
    .tools-image {
        min-height: 280px;
    }
}

@media (max-width: 767.98px) {
    .top-bar {
        display: none;
    }

    .main-header {
        padding: 8px 0;
    }

    .main-nav {
        min-height: 52px;
    }

    .top-bar-left .top-bar-link span:last-child {
        display: none;
    }

    .top-bar-right .top-bar-link:nth-child(2) {
        display: none;
    }

    .top-bar-link {
        padding: 8px 10px;
    }

    .top-bar-inner {
        justify-content: space-between;
    }

    .brand-logo img {
        height: 42px;
    }

    .mobile-bottom-nav {
        display: grid;
    }

    body {
        padding-bottom: calc(92px + env(safe-area-inset-bottom));
    }

    .site-footer {
        padding-bottom: 28px;
    }

    .footer-acc-btn {
        pointer-events: auto;
        cursor: pointer;
        margin: 0;
        padding: 14px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .footer-acc-btn svg {
        display: block;
    }

    .footer-col[data-footer-acc] > ul {
        display: none;
        padding: 4px 0 14px;
        gap: 12px;
    }

    .footer-col[data-footer-acc].is-open > ul {
        display: flex;
    }

    .footer-col[data-footer-acc] .footer-acc-btn h4 {
        margin: 0;
        font-size: 14.5px;
    }

    .footer-apps h4 {
        margin-bottom: 14px;
    }

    .search-filters {
        grid-template-columns: 1fr;
    }

    .search-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .advanced-link {
        justify-content: center;
    }

    .hero-visual {
        min-height: 220px;
        height: 220px;
    }

    .hero-person img {
        max-height: none;
    }

    .float-card-companies {
        display: none;
    }

    .float-card-journey {
        top: 0;
        left: 0;
        max-width: 180px;
    }

    .float-card-jobs {
        top: auto;
        bottom: 8%;
        left: 0;
    }

    .float-card-companies {
        display: none;
    }

    .float-card-alerts {
        bottom: 8%;
        right: 0;
        max-width: 150px;
    }

    .float-card-plane {
        top: 4%;
        right: 4%;
        width: 44px;
        height: 44px;
    }

    .hero-person {
        width: 100%;
    }

    .hero-person img {
        max-height: none;
    }
}

@media (max-width: 991.98px) {
    .hero-search-inline {
        flex-wrap: wrap;
        padding: 12px;
        gap: 10px;
    }

    .hero-search-inline .search-divider {
        display: none;
    }

    .hero-search-inline .search-field-skill,
    .hero-search-inline .filter-inline,
    .hero-search-inline .search-field-loc {
        flex: 1 1 100%;
        background: #F7F8FC;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 10px 12px;
    }

    .hero-search-inline .filter-inline .select-wrap select {
        padding: 0 28px 0 0;
        width: 100%;
    }

    .hero-search-inline .btn-search-jobs {
        width: 100%;
        justify-content: center;
    }

    .category-under-search {
        margin-top: 18px;
        padding: 14px;
        border-radius: 16px;
    }

    .category-under-search .category-head {
        margin-bottom: 12px;
        gap: 10px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .category-under-search .category-head h2 {
        font-size: 1rem;
        flex: 1;
        min-width: 0;
    }

    .category-under-search .category-view-all {
        font-size: 11.5px;
        padding: 5px 10px;
        flex-shrink: 0;
        margin-left: auto;
    }

    .category-grid-compact,
    .category-grid.category-grid-compact {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    .category-grid-compact .category-card {
        padding: 14px 8px 12px;
        gap: 6px;
        border-radius: 12px;
    }

    .category-grid-compact .category-card strong {
        font-size: 12px;
        line-height: 1.25;
    }

    .category-grid-compact .category-count {
        font-size: 10.5px;
    }

    .category-grid-compact .category-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .category-grid-compact .category-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .trust-badges {
        flex-wrap: nowrap;
        gap: 0;
        padding: 4px;
    }

    .trust-badge {
        gap: 8px;
        padding: 10px 8px;
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }

    .trust-badge:not(:last-child)::after {
        height: 22px;
    }

    .trust-badge-text {
        font-size: 11.5px;
        white-space: normal;
        line-height: 1.25;
    }

    .hero-stats {
        grid-template-columns: 1fr 1fr;
        padding: 4px 0;
        column-gap: 0;
        row-gap: 0;
    }

    .hero-stat-item {
        justify-content: flex-start;
        padding: 14px 12px;
    }

    .profile-steps-list {
        gap: 4px;
    }

    .profile-step {
        padding: 10px 4px;
    }

    .profile-step-text {
        font-size: 10.5px;
    }

    .profile-step-line {
        flex: 0 0 10px;
    }

    .profile-steps-cta {
        font-size: 11px;
        padding: 5px 10px;
    }

    .profile-step-icon {
        width: 34px;
        height: 34px;
    }

    .highlights-section {
        padding: 20px 0 28px;
    }

    .highlights-card {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 6px;
    }

    .highlight-item {
        padding: 14px 14px;
    }

    .highlight-item:not(:last-child)::after {
        display: none;
    }

    .highlight-item:not(:last-child) {
        border-bottom: 1px solid rgba(231, 231, 243, 0.9);
        border-radius: 0;
    }

    .highlight-item:first-child {
        border-radius: 14px 14px 0 0;
    }

    .highlight-item:last-child {
        border-radius: 0 0 14px 14px;
    }

    .highlight-icon {
        width: 44px;
        height: 44px;
    }

    .highlight-text strong {
        font-size: 1.15rem;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .highlights-card {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .highlight-item:not(:last-child)::after {
        display: none;
    }

    .highlight-item {
        border-bottom: 1px solid rgba(231, 231, 243, 0.9);
    }

    .highlight-item:nth-child(odd) {
        border-right: 1px solid rgba(231, 231, 243, 0.9);
    }

    .highlight-item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .highlight-item:nth-child(5) {
        grid-column: 1 / -1;
        border-right: none;
        justify-content: center;
    }
}

@media (max-width: 1199.98px) and (min-width: 992px) {
    .battle-banner {
        grid-template-columns: 1.1fr 0.7fr 1.3fr;
        gap: 16px;
        padding: 30px 28px;
    }

    .battle-stats {
        gap: 18px;
    }

    .battle-stat strong {
        font-size: 1.35rem;
    }

    .opportunity-layout {
        grid-template-columns: 0.85fr 1.15fr;
        gap: 24px;
    }

    .dash-job-card h4 {
        font-size: 0.85rem;
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .feature-item:nth-child(4),
    .feature-item:nth-child(5) {
        justify-content: flex-start;
    }

    .feature-item:not(:last-child)::after {
        display: none;
    }

    .story-card {
        padding: 22px 18px 18px;
        min-height: 260px;
    }

    .employers-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .employer-card:nth-child(4),
    .employer-card:nth-child(5) {
        grid-column: auto;
    }

    .hire-stats-banner {
        grid-template-columns: repeat(3, 1fr);
        padding: 22px 14px;
    }

    .hire-stat:nth-child(4),
    .hire-stat:nth-child(5) {
        justify-content: center;
    }

    .hire-stat:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .battle-banner {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 28px 24px;
        gap: 20px;
    }

    .battle-content {
        max-width: none;
        margin: 0 auto;
    }

    .battle-content p {
        margin-left: auto;
        margin-right: auto;
        max-width: 420px;
    }

    .battle-visual {
        height: 140px;
    }

    .battle-stats {
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    .battle-stat {
        align-items: center;
        min-width: 90px;
    }
}

@media (max-width: 575.98px) {
    .hero-search-card {
        padding: 12px;
    }

    .category-under-search {
        margin-top: 14px;
        padding: 12px;
        border-radius: 14px;
    }

    .category-under-search .category-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
        flex-wrap: nowrap;
    }

    .category-under-search .category-head h2 {
        font-size: 0.95rem;
        flex: 1;
        min-width: 0;
    }

    .category-under-search .category-view-all {
        font-size: 11px;
        padding: 5px 10px;
        flex-shrink: 0;
        margin-left: auto;
    }

    .category-grid-compact,
    .category-grid.category-grid-compact {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    .category-grid-compact .category-card {
        padding: 12px 6px 10px;
        gap: 5px;
    }

    .category-grid-compact .category-card strong {
        font-size: 11px;
    }

    .category-grid-compact .category-count {
        font-size: 10px;
    }

    .category-grid-compact .category-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .category-grid-compact .category-icon svg {
        width: 15px !important;
        height: 15px !important;
    }

    .trust-badges {
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 0;
        padding: 4px;
        margin-top: 12px;
        border-radius: 14px;
    }

    .trust-badge {
        min-width: 0;
        width: auto;
        flex: 1;
        gap: 6px;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        padding: 10px 4px;
    }

    .trust-badge:not(:last-child)::after {
        height: 36px;
    }

    .trust-badge:hover {
        box-shadow: none;
        background: transparent;
    }

    .trust-badge-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .trust-badge-icon svg,
    .trust-badge-icon i {
        width: 15px !important;
        height: 15px !important;
    }

    .trust-badge-text {
        font-size: 10.5px;
        white-space: normal;
        line-height: 1.25;
    }

    .hero-stats {
        grid-template-columns: 1fr 1fr;
        padding: 4px 0;
    }

    .hero-stat-item {
        padding: 12px 10px;
    }

    .hero-stat-item strong {
        font-size: 0.95rem;
    }

    .hero-stat-icon {
        width: 38px;
        height: 38px;
    }

    .hero-stat-icon svg,
    .hero-stat-icon i {
        width: 15px !important;
        height: 15px !important;
    }

    .battle-section {
        padding: 4px 0 28px;
    }

    .battle-banner {
        padding: 24px 18px;
        border-radius: 18px;
        gap: 18px;
    }

    .battle-content h2 {
        font-size: 1.25rem;
    }

    .battle-content p {
        font-size: 12.5px;
        margin-bottom: 16px;
    }

    .battle-visual {
        height: 120px;
    }

    .battle-trophy {
        width: 72px;
        height: 72px;
        border-radius: 20px;
    }

    .battle-trophy svg {
        width: 34px;
        height: 34px;
    }

    .battle-gamepad {
        width: 46px;
        height: 46px;
        right: 22%;
    }

    .battle-stats {
        gap: 12px;
        width: 100%;
        justify-content: space-between;
    }

    .battle-stat {
        flex: 1;
        min-width: 0;
        align-items: center;
    }

    .battle-stat strong {
        font-size: 1.15rem;
    }

    .battle-stat span:not(.battle-stat-ico) {
        font-size: 11px;
    }

    .popular-categories-section {
        padding: 20px 0 28px;
    }

    .popular-cat-head {
        margin-bottom: 14px;
        padding: 16px 14px;
    }

    .popular-cat-intro h2 {
        font-size: 1.25rem;
    }

    .popular-cat-intro p {
        font-size: 13px;
        line-height: 1.55;
    }

    .popular-cat-side {
        flex-direction: column;
        align-items: stretch;
    }

    .popular-cat-stats {
        width: 100%;
    }

    .popular-cat-stat {
        flex: 1;
    }

    .popular-cat-cta {
        width: 100%;
        justify-content: center;
    }

    .category-grid.category-grid-8 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    .popular-categories-section .category-card {
        padding: 14px 8px 12px;
        gap: 6px;
        border-radius: 14px;
    }

    .popular-categories-section .category-icon {
        width: 40px;
        height: 40px;
    }

    .popular-categories-section .category-icon svg {
        width: 18px;
        height: 18px;
    }

    .popular-categories-section .category-card strong {
        font-size: 12px;
    }

    .popular-categories-section .category-count {
        font-size: 11px;
    }

    .jobs-section {
        padding: 20px 0 36px;
    }

    .jobs-intro h2 {
        font-size: 1.25rem;
    }

    .jobs-intro p {
        font-size: 13px;
    }

    .jobs-head-side {
        flex-direction: column;
        align-items: stretch;
    }

    .jobs-head-cta {
        width: 100%;
        justify-content: center;
    }

    .jobs-pulse-stats {
        width: 100%;
    }

    .jobs-pulse-item {
        flex: 1;
    }

    .job-card {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .job-card-logo {
        width: 44px;
        height: 44px;
        font-size: 13px;
    }

    .job-card-title-row h3 {
        font-size: 0.95rem;
    }

    .job-desc {
        font-size: 12.5px;
        -webkit-line-clamp: 2;
    }

    .job-salary {
        font-size: 0.95rem;
    }

    .job-apply-btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    .job-bookmark {
        width: 36px;
        height: 36px;
    }

    .opportunity-section {
        padding: 36px 0 48px;
    }

    .opportunity-eyebrow {
        margin-bottom: 12px;
        font-size: 11.5px;
    }

    .opportunity-copy h2 {
        font-size: 1.5rem;
    }

    .opportunity-copy p {
        font-size: 13.5px;
        margin-bottom: 18px;
    }

    .opportunity-actions {
        gap: 12px;
        margin-bottom: 24px;
    }

    .opportunity-upload-btn {
        width: 100%;
        justify-content: center;
        padding: 13px 20px;
    }

    .opportunity-stage {
        padding: 10px;
        border-radius: 20px;
    }

    .dash-job-row {
        grid-template-columns: 1fr;
    }

    .opportunity-dash {
        grid-template-columns: 1fr;
    }

    .dash-panel {
        padding: 14px;
        border-radius: 18px;
    }

    .dash-stat strong {
        font-size: 1.15rem;
    }

    .companies-section {
        padding: 28px 0 40px;
    }

    .companies-head {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 18px;
        gap: 16px;
    }

    .companies-intro h2 {
        font-size: 1.25rem;
    }

    .companies-intro p {
        font-size: 13px;
    }

    .companies-cta {
        width: 100%;
        justify-content: center;
    }

    .company-card {
        min-height: 150px;
        padding: 18px 12px 14px;
        border-radius: 16px;
    }

    .features-section {
        padding: 8px 0 36px;
    }

    .features-shell {
        padding: 8px;
        border-radius: 22px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 6px;
        border-radius: 18px;
    }

    .feature-item {
        justify-content: flex-start;
        width: 100%;
        padding: 15px 12px;
    }

    .feature-item:nth-child(4),
    .feature-item:nth-child(5) {
        grid-column: auto;
        justify-content: flex-start;
    }

    .feature-item:not(:last-child)::after {
        top: auto;
        right: 12px;
        left: 12px;
        bottom: 0;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(230, 232, 242, 0.95) 15%, rgba(230, 232, 242, 0.95) 85%, transparent);
    }

    .feature-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .feature-text strong {
        font-size: 14px;
    }

    .feature-text span {
        font-size: 12px;
    }

    .why-section {
        padding: 28px 0 40px;
    }

    .why-copy {
        text-align: left;
    }

    .why-copy h2 {
        font-size: 1.35rem;
    }

    .why-copy p {
        font-size: 13.5px;
        margin-bottom: 18px;
    }

    .why-btn {
        width: 100%;
    }

    .why-card {
        min-height: 200px;
        padding: 20px 16px 16px;
        border-radius: 16px;
    }

    .why-card h3 {
        font-size: 1rem;
    }

    .why-nav {
        justify-content: center;
    }

    .stories-section {
        padding: 32px 0 44px;
    }

    .stories-intro h2 {
        font-size: 1.35rem;
    }

    .stories-intro p {
        font-size: 13.5px;
    }

    .story-card {
        padding: 22px 18px 18px;
        border-radius: 18px;
    }

    .story-quote-mark {
        font-size: 3.2rem;
        margin-bottom: 10px;
    }

    .story-text {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .story-user img {
        width: 42px;
        height: 42px;
    }

    .employer-cta-section {
        padding: 8px 0 36px;
    }

    .employer-cta-banner {
        padding: 24px 16px;
        border-radius: 18px;
    }

    .employer-cta-content {
        flex-direction: column;
        gap: 12px;
    }

    .employer-cta-copy h2 {
        font-size: 1.25rem;
    }

    .employer-cta-copy p {
        font-size: 13px;
    }

    .employer-cta-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .employer-cta-primary,
    .employer-cta-secondary {
        justify-content: center;
        width: 100%;
    }

    .employer-cta-visual {
        display: none;
    }

    .site-footer {
        padding: 40px 0 20px;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-bottom: 28px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-desc {
        max-width: none;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .employers-section {
        padding: 36px 0 44px;
    }

    .employers-head {
        margin-bottom: 24px;
        text-align: left;
    }

    .employers-head h2 {
        font-size: 1.35rem;
    }

    .employers-head p {
        font-size: 13.5px;
    }

    .employers-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .employer-card:last-child {
        grid-column: auto;
        max-width: none;
        justify-self: stretch;
    }

    .employer-card {
        padding: 22px 16px 20px;
        border-radius: 16px;
    }

    .employer-icon {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        margin-bottom: 14px;
    }

    .employer-icon svg {
        width: 24px;
        height: 24px;
    }

    .employer-card h3 {
        font-size: 1rem;
    }

    .employer-card p {
        font-size: 13px;
    }

    .hire-stats-section {
        padding: 4px 0 32px;
    }

    .hire-stats-banner {
        grid-template-columns: 1fr;
        padding: 12px 10px;
        border-radius: 18px;
    }

    .hire-stat {
        padding: 12px 10px;
        justify-content: flex-start;
    }

    .hire-stat:nth-child(4),
    .hire-stat:nth-child(5) {
        justify-content: flex-start;
    }

    .hire-stat:not(:last-child)::after {
        display: block;
        top: auto;
        right: 10px;
        left: 10px;
        bottom: 0;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14) 20%, rgba(255, 255, 255, 0.14) 80%, transparent);
    }

    .hire-stat-ico {
        width: 42px;
        height: 42px;
    }

    .hire-stat-text strong {
        font-size: 1.15rem;
    }

    .hire-stat-text span {
        font-size: 12px;
        white-space: normal;
    }

    .hiring-steps-section {
        padding: 12px 0 36px;
    }

    .hiring-steps-head {
        margin-bottom: 28px;
        text-align: left;
    }

    .hiring-steps-head h2 {
        font-size: 1.3rem;
    }

    .hiring-steps {
        max-width: none;
        gap: 24px;
    }

    .hiring-step-icon-wrap {
        width: 72px;
        height: 72px;
    }

    .hiring-step-icon {
        width: 52px;
        height: 52px;
    }

    .hiring-step-icon svg {
        width: 22px;
        height: 22px;
    }

    .hiring-step-text h3 {
        font-size: 1.05rem;
    }

    .hiring-step-text p {
        font-size: 13px;
    }

    .tools-section {
        padding: 32px 0 44px;
    }

    .tools-head {
        margin-bottom: 24px;
        text-align: left;
    }

    .tools-head h2 {
        font-size: 1.35rem;
    }

    .tools-head p {
        font-size: 13.5px;
    }

    .tools-media,
    .tools-image {
        min-height: 220px;
        border-radius: 18px;
    }

    .tools-feature {
        gap: 12px;
    }

    .tools-feature-icon {
        width: 42px;
        height: 42px;
    }

    .tools-feature-icon svg {
        width: 18px;
        height: 18px;
    }

    .tools-feature h3 {
        font-size: 0.98rem;
    }

    .tools-feature p {
        font-size: 13px;
    }
}

/* ========== FIND JOBS PAGE ========== */
.find-jobs-page {
    background: #F8FAFC;
    overflow-x: hidden;
}

.fj-hero {
    position: relative;
    padding: 28px 0 36px;
    background:
        radial-gradient(ellipse 60% 80% at 90% 20%, rgba(59, 91, 255, 0.1), transparent 55%),
        linear-gradient(180deg, #EEF2FF 0%, #F8FAFC 100%);
    overflow: hidden;
}

.fj-hero-grid {
    display: block;
    max-width: 1240px;
    margin: 0 auto;
}

.fj-hero-content {
    max-width: 720px;
}

.fj-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13.5px;
    color: #94A3B8;
}

.fj-breadcrumb a {
    color: #64748B;
    text-decoration: none;
}

.fj-breadcrumb a:hover {
    color: #3B5BFF;
}

.fj-hero-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.03em;
    margin: 0 0 10px;
    line-height: 1.15;
}

.fj-hero-sub {
    margin: 0 0 22px;
    max-width: 52ch;
    font-size: 15px;
    line-height: 1.65;
    color: #64748B;
}

.fj-search {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 640px;
    padding: 8px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(59, 91, 255, 0.12);
    box-shadow: 0 12px 32px rgba(30, 58, 138, 0.08);
}

.fj-search-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    min-width: 0;
}

.fj-search-field svg {
    width: 18px;
    height: 18px;
    color: #94A3B8;
    flex-shrink: 0;
}

.fj-search-field input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #0F172A;
    font-family: 'Poppins', sans-serif;
}

.fj-search-btn {
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 12px;
    border: 0;
    background: linear-gradient(135deg, #3B5BFF 0%, #5B7CFF 100%);
    color: #fff;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
}

.fj-search-btn:hover {
    color: #fff;
    background: linear-gradient(135deg, #2A45E0 0%, #3B5BFF 100%);
}

.fj-popular {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 13px;
    color: #64748B;
}

.fj-popular a {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #E2E8F0;
    color: #475569;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.fj-popular a:hover {
    color: #3B5BFF;
    border-color: rgba(59, 91, 255, 0.35);
    background: rgba(59, 91, 255, 0.06);
}

.fj-hero-art {
    position: relative;
    min-height: 240px;
}

.fj-art-briefcase,
.fj-art-glass,
.fj-art-card,
.fj-art-plant {
    position: absolute;
}

.fj-art-briefcase {
    width: 120px;
    height: 120px;
    left: 18%;
    top: 28%;
    border-radius: 28px;
    background: linear-gradient(145deg, #3B5BFF, #5B7CFF);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 20px 40px rgba(59, 91, 255, 0.35);
    animation: fj-float 6s ease-in-out infinite;
}

.fj-art-briefcase svg {
    width: 48px;
    height: 48px;
}

.fj-art-glass {
    width: 150px;
    height: 150px;
    right: 8%;
    top: 8%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    border: 10px solid rgba(59, 91, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3B5BFF;
    backdrop-filter: blur(6px);
    animation: fj-float 7.5s ease-in-out infinite reverse;
}

.fj-art-glass svg {
    width: 42px;
    height: 42px;
}

.fj-art-card {
    left: 42%;
    bottom: 18%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #E2E8F0;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
    animation: fj-float 5.5s ease-in-out infinite;
}

.fj-art-card svg {
    width: 16px;
    height: 16px;
    color: #F59E0B;
    fill: #F59E0B;
}

.fj-art-plant {
    width: 28px;
    height: 48px;
    left: 12%;
    bottom: 12%;
    border-radius: 20px 20px 8px 8px;
    background: linear-gradient(180deg, #34D399, #059669);
    box-shadow: 0 8px 16px rgba(5, 150, 105, 0.25);
}

.fj-art-plant::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 36px;
    height: 14px;
    border-radius: 6px;
    background: #92400E;
}

@keyframes fj-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.fj-main {
    padding: 28px 0 64px;
}

.fj-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1240px;
    margin: 0 auto 18px;
    font-size: 14px;
}

.fj-bc-home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #94A3B8;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.fj-bc-home:hover {
    color: #3B5BFF;
}

.fj-bc-ico {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 91, 255, 0.1);
    color: #3B5BFF;
    flex-shrink: 0;
}

.fj-bc-ico svg {
    width: 16px;
    height: 16px;
}

.fj-bc-sep {
    width: 15px;
    height: 15px;
    color: #CBD5E1;
    flex-shrink: 0;
}

.fj-bc-current {
    font-weight: 700;
    color: #3B5BFF;
    font-family: 'Outfit', sans-serif;
}

.fj-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    max-width: 1240px;
    margin: 0 auto;
}

.fj-mobile-filter-btn {
    display: none;
}

.fj-filters-canvas {
    width: 280px;
    max-width: 100%;
}

.fj-filters-canvas-body {
    padding: 0;
    overflow: visible;
}

@media (min-width: 992px) {
    .fj-filters-canvas.offcanvas-lg {
        position: sticky;
        top: 90px;
        z-index: 1;
        height: auto !important;
        max-height: none;
        visibility: visible !important;
        transform: none !important;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .fj-filters-canvas .fj-filters-canvas-body {
        overflow: visible;
        display: block !important;
    }

    .fj-filters-canvas .fj-filters {
        position: static;
    }
}

.fj-results {
    min-width: 0;
}

.fj-filters {
    position: sticky;
    top: 90px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 16px 14px 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.fj-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 2px;
    border-bottom: 1px solid #E8EAF0;
}

.fj-filters-head h2 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}

.fj-applied {
    font-size: 13px;
    font-weight: 600;
    color: #3B5BFF;
    white-space: nowrap;
}

.fj-acc {
    border-bottom: 1px solid #EEF0F5;
}

.fj-acc:last-child {
    border-bottom: 0;
}

.fj-acc-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 0 10px;
    border: 0;
    background: transparent;
    font-family: 'Outfit', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: #111827;
    cursor: pointer;
    text-align: left;
}

.fj-acc-btn svg {
    width: 16px;
    height: 16px;
    color: #9CA3AF;
    transition: transform 0.2s ease;
}

.fj-acc:not(.is-open) .fj-acc-btn svg {
    transform: rotate(180deg);
}

.fj-acc-body {
    display: none;
    padding: 0 0 12px;
}

.fj-acc.is-open .fj-acc-body {
    display: block;
}

.fj-dept-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    user-select: none;
    width: 100%;
}

.fj-dept-item:last-child {
    margin-bottom: 0;
}

.fj-dept-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fj-box {
    width: 16px;
    height: 16px;
    margin-top: 0;
    border-radius: 3px;
    border: 1.5px solid #C5CAD3;
    background: #fff;
    flex-shrink: 0;
    position: relative;
}

.fj-dept-item.is-checked .fj-box,
.fj-dept-item input:checked + .fj-box {
    background: #1F2937;
    border-color: #1F2937;
}

.fj-dept-item.is-checked .fj-box::after,
.fj-dept-item input:checked + .fj-box::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.fj-dept-text {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    line-height: 1.35;
    color: #6B7280;
    font-weight: 400;
}

.fj-dept-item.is-checked .fj-dept-text,
.fj-dept-item:has(input:checked) .fj-dept-text {
    color: #111827;
    font-weight: 600;
}

.fj-dept-item.is-checked .fj-dept-text em,
.fj-dept-item:has(input:checked) .fj-dept-text em {
    color: #9CA3AF;
    font-weight: 400;
}

.fj-dept-text em {
    margin-left: auto;
    flex-shrink: 0;
    font-style: normal;
    font-weight: 400;
    color: #9CA3AF;
    text-align: right;
}

.fj-view-more {
    display: block;
    width: 100%;
    margin-top: 10px;
    border: 0;
    background: transparent;
    padding: 4px 0;
    color: #3B5BFF;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.fj-view-more:hover {
    text-decoration: underline;
}

.fj-exp-wrap {
    padding: 8px 4px 0;
}

.fj-exp-track-wrap {
    position: relative;
    padding-top: 28px;
}

.fj-exp-bubble {
    position: absolute;
    top: 0;
    left: 100%;
    transform: translateX(-50%);
    min-width: 40px;
    padding: 4px 8px;
    border-radius: 8px;
    background: #111827;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    pointer-events: none;
    white-space: nowrap;
}

.fj-exp-bubble::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #111827;
    border-bottom-width: 0;
}

.fj-exp-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 99px;
    background: #111827;
    outline: none;
    cursor: pointer;
}

.fj-exp-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #111827;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #111827;
    cursor: pointer;
}

.fj-exp-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #111827;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #111827;
    cursor: pointer;
}

.fj-exp-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: #9CA3AF;
}

.fj-control {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
}

.fj-control input,
.fj-control select {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 13.5px;
    color: #0F172A;
    font-family: 'Poppins', sans-serif;
}

.fj-control-select {
    position: relative;
}

.fj-control-select select {
    appearance: none;
    padding-right: 18px;
    cursor: pointer;
}

.fj-control-select > svg:first-child {
    width: 15px;
    height: 15px;
    color: #94A3B8;
    flex-shrink: 0;
}

.fj-select-arrow {
    width: 15px !important;
    height: 15px !important;
    color: #94A3B8;
    flex-shrink: 0;
    pointer-events: none;
}

/* Department modal */
.fj-modal[hidden] {
    display: none !important;
}

.fj-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.fj-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.fj-modal-panel {
    position: relative;
    z-index: 1;
    width: min(860px, 100%);
    max-height: min(86vh, 640px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

.fj-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 10px;
}

.fj-modal-head h3 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #111827;
}

.fj-modal-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #9CA3AF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.fj-modal-close:hover {
    background: #F3F4F6;
    color: #111827;
}

.fj-modal-close svg {
    width: 20px;
    height: 20px;
}

.fj-modal-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 20px 14px;
    padding: 0 14px;
    min-height: 44px;
    border-radius: 999px;
    border: 1.5px solid #BFDBFE;
    background: #fff;
}

.fj-modal-search svg {
    width: 18px;
    height: 18px;
    color: #9CA3AF;
    flex-shrink: 0;
}

.fj-modal-search input {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #111827;
    font-family: 'Poppins', sans-serif;
}

.fj-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 18px;
    padding: 4px 20px 10px;
    overflow-y: auto;
    flex: 1;
}

.fj-modal-grid .fj-dept-text {
    white-space: normal;
}

.fj-modal-grid .fj-dept-text {
    overflow: hidden;
}

.fj-modal-grid .fj-dept-item {
    min-width: 0;
}

.fj-modal-foot {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px 18px;
    border-top: 1px solid #F1F5F9;
}

.fj-modal-apply {
    min-height: 42px;
    padding: 0 28px;
    border: 0;
    border-radius: 999px;
    background: #3B5BFF;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.fj-modal-apply:hover {
    color: #fff;
    background: #2A45E0;
}

.fj-modal-grid .fj-dept-item.is-checked .fj-box,
.fj-modal-grid .fj-dept-item input:checked + .fj-box {
    background: #3B5BFF;
    border-color: #3B5BFF;
}
.fj-results-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.fj-results-top h2 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #0F172A;
}

.fj-results-top h2 span {
    font-size: 0.92rem;
    font-weight: 500;
    color: #64748B;
}

.fj-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748B;
}

.fj-sort-select {
    min-width: 160px;
    background: #fff;
}

.fj-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    margin-bottom: 14px;
    padding-bottom: 2px;
    border-bottom: 1px solid #E2E8F0;
}

.fj-tab {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: #64748B;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}

.fj-tab.is-active {
    color: #3B5BFF;
    font-weight: 600;
    border-bottom-color: #3B5BFF;
}

.fj-tab-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fj-tab-more svg {
    width: 14px;
    height: 14px;
}

.fj-resume-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(59, 91, 255, 0.08), rgba(91, 124, 255, 0.05));
    border: 1px solid rgba(59, 91, 255, 0.12);
}

.fj-resume-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fj-resume-left p {
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: #334155;
}

.fj-resume-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #3B5BFF;
    flex-shrink: 0;
}

.fj-resume-ico svg {
    width: 18px;
    height: 18px;
}

.fj-resume-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 18px;
    line-height: 1.2;
    border-radius: 10px;
    border: 0;
    background: #3B5BFF;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    text-decoration: none;
    white-space: nowrap;
}

.fj-resume-btn:hover {
    color: #fff;
    background: #2A45E0;
}

.fj-jobs {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fj-job-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: stretch;
    padding: 18px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.fj-job-card:hover {
    border-color: rgba(59, 91, 255, 0.28);
    box-shadow: 0 14px 32px rgba(30, 58, 138, 0.08);
    transform: translateY(-1px);
}

.fj-job-body {
    min-width: 0;
}

.fj-job-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 2px;
}

.fj-job-title-row h3 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0F172A;
}

.fj-job-company {
    margin: 0 0 10px;
    font-size: 13.5px;
    color: #64748B;
}

.fj-job-desc {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: #64748B;
}

.fj-job-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 4px;
    min-width: 148px;
    align-self: stretch;
}

.fj-job-aside .job-actions {
    margin-top: auto;
    padding-top: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
}

.fj-job-aside .job-bookmark {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.fj-job-aside .job-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 38px;
    padding: 8px 14px;
    line-height: 1.2;
    white-space: nowrap;
    font-size: 13px;
    border-radius: 10px;
}

.fj-badge-new,
.fj-badge-hot {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.fj-badge-new {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.fj-badge-hot {
    background: rgba(249, 115, 22, 0.14);
    color: #EA580C;
}

.fj-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 24px;
}

.fj-page-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #475569;
    font-size: 13.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fj-page-btn svg {
    width: 16px;
    height: 16px;
}

.fj-page-btn:hover {
    border-color: #3B5BFF;
    color: #3B5BFF;
}

.fj-page-btn.is-active {
    background: #3B5BFF;
    border-color: #3B5BFF;
    color: #fff;
}

.fj-page-dots {
    color: #94A3B8;
    padding: 0 4px;
}

@media (max-width: 1199.98px) {
    .fj-layout {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 16px;
    }
}

@media (max-width: 991.98px) {
    .find-jobs-page {
        overflow-x: hidden;
    }

    .fj-layout {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .fj-mobile-filter-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: auto;
        max-width: 100%;
        min-height: 42px;
        padding: 0 14px;
        border-radius: 12px;
        border: 1px solid #E2E8F0;
        background: #fff;
        color: #0F172A;
        font-family: 'Outfit', sans-serif;
        font-size: 14px;
        font-weight: 600;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
        order: -1;
        align-self: start;
        justify-self: start;
    }

    .fj-mobile-filter-btn svg {
        width: 18px;
        height: 18px;
        color: #3B5BFF;
    }

    .fj-mobile-filter-count {
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 999px;
        background: #3B5BFF;
        color: #fff;
        font-style: normal;
        font-size: 12px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .fj-filters-canvas {
        width: min(360px, 92vw);
    }

    .fj-filters-canvas-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 16px 12px;
        border-bottom: 1px solid #EEF0F5;
    }

    .fj-filters-canvas-head .offcanvas-title {
        margin: 0;
        font-family: 'Outfit', sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        color: #111827;
    }

    .fj-filters-close {
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 10px;
        background: #F3F4F6;
        color: #64748B;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .fj-filters-close svg {
        width: 18px;
        height: 18px;
    }

    .fj-filters-canvas-body {
        padding: 0 12px 20px;
        overflow-y: auto;
    }

    .fj-filters {
        position: static;
        border: 0;
        box-shadow: none;
        padding: 8px 0 0;
        border-radius: 0;
    }

    .fj-filters-head {
        display: none;
    }

    .fj-modal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fj-results-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .fj-sort {
        width: 100%;
    }

    .fj-sort-select {
        flex: 1;
        min-width: 0;
    }

    .fj-job-card {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }

    .fj-job-aside {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 12px;
        row-gap: 2px;
        min-width: 0;
        padding-top: 12px;
        margin-top: 4px;
        border-top: 1px solid #F1F5F9;
    }

    .fj-job-aside .job-salary {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        margin: 0;
        text-align: left;
    }

    .fj-job-aside .job-posted {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        margin: 0;
        text-align: left;
    }

    .fj-job-aside .job-actions {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: center;
        margin-top: 0;
        padding-top: 0;
        margin-left: 0;
    }

    .fj-job-card .job-meta,
    .fj-job-card .job-skills {
        flex-wrap: wrap;
    }
}

@media (max-width: 575.98px) {
    .fj-modal-grid {
        grid-template-columns: 1fr;
    }

    .fj-modal-panel {
        max-height: 90vh;
    }

    .fj-hero-title {
        font-size: 1.55rem;
    }

    .fj-hero-sub {
        font-size: 13.5px;
    }

    .fj-search {
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        border-radius: 14px;
    }

    .fj-search-btn {
        width: 100%;
    }

    .fj-popular {
        gap: 6px;
    }

    .fj-popular a {
        font-size: 12px;
        padding: 5px 10px;
    }

    .fj-resume-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .fj-resume-btn {
        width: 100%;
        text-align: center;
    }

    .fj-pagination {
        gap: 4px;
    }

    .fj-page-btn {
        width: 34px;
        height: 34px;
        font-size: 12.5px;
    }
}

/* ========== JOB DETAIL PAGE ========== */
.job-detail-page {
    background: #F8FAFC;
    overflow-x: hidden;
}

.jd-main {
    padding: 24px 0 64px;
}

.fj-breadcrumb a:not(.fj-bc-home) {
    color: #64748B;
    text-decoration: none;
    font-weight: 500;
}

.fj-breadcrumb a:not(.fj-bc-home):hover {
    color: #3B5BFF;
}

.jd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
    max-width: 1240px;
    margin: 0 auto;
}

.jd-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.jd-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 90px;
}

.jd-card,
.jd-hero-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.jd-card h2,
.jd-card h3 {
    margin: 0 0 12px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.02em;
}

.jd-card h2 {
    font-size: 1.2rem;
}

.jd-card h3 {
    font-size: 1.05rem;
}

.jd-card > p {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.65;
    color: #64748B;
}

.jd-hero-top {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.jd-hero-card .job-card-logo {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
}

.jd-hero-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.jd-hero-title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.02em;
}

.jd-hero-company {
    margin: 0 0 6px;
    font-size: 14px;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.jd-verified {
    display: inline-flex;
    color: #3B5BFF;
}

.jd-verified svg {
    width: 16px;
    height: 16px;
}

.jd-hero-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: #64748B;
}

.jd-star {
    width: 15px;
    height: 15px;
    color: #F59E0B;
    fill: #F59E0B;
}

.jd-hero-rating strong,
.jd-hero-rating .jd-rating-value {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #0F172A;
}

.jd-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.jd-btn-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 18px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, #3B5BFF 0%, #5B7CFF 100%);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 8px 20px rgba(59, 91, 255, 0.28);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.jd-btn-apply:hover {
    color: #fff;
    background: linear-gradient(135deg, #2A45E0 0%, #3B5BFF 100%);
}

.jd-btn-save,
.jd-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 16px;
    border-radius: 11px;
    border: 1.5px solid rgba(59, 91, 255, 0.35);
    background: #fff;
    color: #3B5BFF;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.jd-btn-save svg,
.jd-btn-outline svg {
    width: 16px;
    height: 16px;
}

.jd-btn-save:hover,
.jd-btn-outline:hover {
    background: rgba(59, 91, 255, 0.06);
    color: #3B5BFF;
}

.jd-btn-block {
    width: 100%;
}

.jd-btn-outline {
    width: 100%;
    margin-top: 12px;
}

.jd-hero-chips {
    margin-top: 16px;
    flex-wrap: wrap;
}

.chip-sal {
    background: #F3E8FF;
    color: #7C3AED;
}

.jd-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 14px;
    font-size: 13px;
    color: #64748B;
}

.jd-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
}

.jd-hero-meta svg {
    width: 14px;
    height: 14px;
}

.jd-tabs {
    display: flex;
    gap: 4px;
    overflow: hidden;
    border-bottom: 1px solid #E2E8F0;
    background: #fff;
    border-radius: 14px 14px 0 0;
    padding: 0 8px;
    border: 1px solid #E2E8F0;
    border-bottom-color: #E2E8F0;
}

.jd-tab {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    padding: 14px 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: #64748B;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}

.jd-tab.is-active {
    color: #3B5BFF;
    font-weight: 600;
    border-bottom-color: #3B5BFF;
}

.jd-panel[hidden] {
    display: none !important;
}

.jd-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.jd-overview-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 4px;
}

.jd-overview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 14px 10px;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1px solid #EEF2F7;
}

.jd-overview-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 91, 255, 0.1);
    color: #3B5BFF;
}

.jd-overview-ico svg {
    width: 18px;
    height: 18px;
}

.jd-overview-item small {
    display: block;
    font-size: 11.5px;
    color: #94A3B8;
    margin-bottom: 2px;
}

.jd-overview-item strong,
.jd-overview-item h4 {
    display: block;
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    color: #0F172A;
    font-weight: 600;
}

.jd-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.jd-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.55;
    color: #475569;
}

.jd-check-list li svg,
.jd-check-ico {
    width: 18px;
    height: 18px;
    color: #3B5BFF;
    flex-shrink: 0;
    margin-top: 2px;
}

.jd-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.jd-benefit-card,
.jd-benefit-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid #EEF2F7;
    background: #fff;
}

.jd-benefit-ico,
.jd-benefit-item span,
.jd-role-item span {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 91, 255, 0.1);
    color: #3B5BFF;
    flex-shrink: 0;
}

.jd-benefit-ico svg,
.jd-benefit-item span svg,
.jd-role-item span svg {
    width: 20px;
    height: 20px;
}

.jd-benefit-card > div {
    min-width: 0;
}

.jd-benefit-card strong,
.jd-benefit-card h4,
.jd-benefit-item strong,
.jd-role-item strong,
.jd-role-item h4 {
    display: block;
    margin: 0 0 2px;
    font-family: 'Outfit', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.3;
}

.jd-benefit-card small,
.jd-benefit-item small,
.jd-role-item small {
    display: block;
    font-size: 12.5px;
    color: #94A3B8;
    line-height: 1.35;
}

.jd-benefit-card p {
    margin: 0;
    font-size: 12.5px;
    color: #64748B;
}

.jd-benefit-blue .jd-benefit-ico {
    background: rgba(59, 91, 255, 0.12);
    color: #3B5BFF;
}

.jd-benefit-purple .jd-benefit-ico {
    background: rgba(139, 92, 246, 0.12);
    color: #7C3AED;
}

.jd-benefit-violet .jd-benefit-ico {
    background: rgba(168, 85, 247, 0.12);
    color: #9333EA;
}

.jd-benefit-rose .jd-benefit-ico {
    background: rgba(244, 63, 94, 0.12);
    color: #E11D48;
}

.jd-benefit-green .jd-benefit-ico {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.jd-benefit-orange .jd-benefit-ico {
    background: rgba(249, 115, 22, 0.12);
    color: #EA580C;
}

.jd-role-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.jd-role-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid #EEF2F7;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.jd-role-item:hover {
    border-color: rgba(59, 91, 255, 0.22);
    box-shadow: 0 10px 24px rgba(30, 58, 138, 0.08);
    transform: translateY(-1px);
}

.jd-role-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(59, 91, 255, 0.1);
    color: #3B5BFF;
}

.jd-role-ico svg {
    width: 20px;
    height: 20px;
}

.jd-role-item > div {
    min-width: 0;
}

.jd-role-item small {
    display: block;
    order: 0;
    margin-bottom: 3px;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
}

.jd-role-item h4,
.jd-role-item strong {
    display: block;
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.3;
}

.jd-role-blue .jd-role-ico {
    background: rgba(59, 91, 255, 0.12);
    color: #3B5BFF;
}

.jd-role-indigo .jd-role-ico {
    background: rgba(99, 102, 241, 0.12);
    color: #4F46E5;
}

.jd-role-violet .jd-role-ico {
    background: rgba(139, 92, 246, 0.12);
    color: #7C3AED;
}

.jd-role-green .jd-role-ico {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.jd-role-rose .jd-role-ico {
    background: rgba(244, 63, 94, 0.12);
    color: #E11D48;
}

.jd-role-orange .jd-role-ico {
    background: rgba(249, 115, 22, 0.12);
    color: #EA580C;
}

.jd-company-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.jd-company-stat,
.jd-stat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #EEF2F7;
    background: #F8FAFC;
}

.jd-stat-card small {
    font-size: 11.5px;
    color: #94A3B8;
}

.jd-stat-card strong,
.jd-stat-card h4 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #0F172A;
}

.jd-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.jd-gallery-item {
    aspect-ratio: 1.2;
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(59, 91, 255, 0.2), rgba(16, 185, 129, 0.15)),
        #E2E8F0;
    position: relative;
    overflow: hidden;
}

.jd-gallery-item:nth-child(2) {
    background: linear-gradient(145deg, #BFDBFE, #93C5FD);
}

.jd-gallery-item:nth-child(3) {
    background: linear-gradient(145deg, #C7D2FE, #A5B4FC);
}

.jd-gallery-item:nth-child(4),
.jd-gallery-item.jd-gallery-more {
    background: linear-gradient(145deg, #1E3A8A, #3B5BFF);
}

.jd-gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.4);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
}

.jd-side-company-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.jd-side-company-head .job-card-logo {
    width: 48px;
    height: 48px;
}

.jd-side-company-head strong,
.jd-side-company-head h4 {
    display: block;
    margin: 0 0 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
}

.jd-side-meta,
.jd-side-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.jd-side-meta li,
.jd-side-list li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}

.jd-side-meta span,
.jd-side-list span {
    color: #94A3B8;
    flex-shrink: 0;
}

.jd-side-meta strong,
.jd-side-meta a,
.jd-side-list strong,
.jd-side-list h4,
.jd-side-list a {
    text-align: right;
    color: #0F172A;
    font-weight: 600;
    font-size: 13px;
}

.jd-side-list h4 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
}

.jd-side-list a {
    color: #3B5BFF;
    text-decoration: none;
}

.jd-quick-apply small {
    display: block;
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    color: #94A3B8;
}

.jd-highlights-list,
.jd-highlight-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jd-highlights-list li,
.jd-highlight-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #F1F5F9;
    font-size: 13px;
}

.jd-highlights-list li:last-child,
.jd-highlight-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.jd-highlights-list span,
.jd-highlight-list span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #64748B;
}

.jd-highlights-list span svg,
.jd-highlight-list span svg {
    width: 15px;
    height: 15px;
    color: #3B5BFF;
}

.jd-highlights-list strong,
.jd-highlight-list strong,
.jd-highlight-list h4 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    color: #0F172A;
    font-weight: 600;
    font-size: 13px;
    text-align: right;
}

.jd-share-list,
.jd-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jd-share-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.jd-share-btn:hover {
    color: #3B5BFF;
    border-color: rgba(59, 91, 255, 0.35);
    background: rgba(59, 91, 255, 0.06);
}

.jd-share-btn svg {
    width: 18px;
    height: 18px;
}

.jd-refer {
    border-radius: 16px;
    padding: 22px;
    background: linear-gradient(145deg, #2A45E0 0%, #3B5BFF 50%, #5B7CFF 100%);
    color: #fff;
    box-shadow: 0 14px 32px rgba(59, 91, 255, 0.28);
}

.jd-refer p {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    font-family: 'Outfit', sans-serif;
}

.jd-btn-refer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 16px;
    width: auto;
    border-radius: 999px;
    background: #fff;
    color: #3B5BFF;
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
}

.jd-btn-refer:hover {
    color: #2A45E0;
}

.jd-similar-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jd-similar-item,
.jd-mini-job {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #EEF2F7;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.jd-similar-item:hover,
.jd-mini-job:hover {
    border-color: rgba(59, 91, 255, 0.3);
    box-shadow: 0 8px 20px rgba(30, 58, 138, 0.06);
}

.jd-mini-job-body {
    flex: 1;
    min-width: 0;
}

.jd-mini-job-body h3 {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
}

.jd-mini-job-body p {
    margin: 0 0 8px;
    font-size: 12.5px;
    color: #64748B;
}

.jd-similar-item strong,
.jd-mini-job > .job-salary,
.jd-mini-job > h4.job-salary {
    display: block;
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #0F172A;
    white-space: nowrap;
}

.jd-similar-item span {
    font-size: 12.5px;
    color: #64748B;
}

@media (max-width: 1199.98px) {
    .jd-overview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .jd-benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jd-company-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jd-role-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .jd-layout {
        grid-template-columns: 1fr;
    }

    .jd-sidebar {
        position: static;
    }

    .jd-hero-top {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .jd-hero-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .jd-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jd-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .jd-card,
    .jd-hero-card {
        padding: 16px;
        border-radius: 14px;
    }

    .jd-benefit-grid,
    .jd-role-grid,
    .jd-overview-grid,
    .jd-company-stats {
        grid-template-columns: 1fr;
    }

    .jd-hero-actions {
        width: 100%;
    }

    .jd-btn-apply,
    .jd-btn-save {
        flex: 1;
    }
}

/* ========== Apply Modal ========== */
.jd-apply-modal[hidden] {
    display: none !important;
}

.jd-apply-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.jd-apply-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.jd-apply-panel {
    position: relative;
    z-index: 1;
    width: min(480px, 100%);
    max-height: min(92vh, 820px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    animation: jdApplyIn 0.28s ease;
}

@keyframes jdApplyIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.jd-apply-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 24px 0;
    flex-shrink: 0;
}

.jd-apply-head h2 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.02em;
}

.jd-apply-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #F1F5F9;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.jd-apply-close:hover {
    background: #E2E8F0;
    color: #0F172A;
}

.jd-apply-close svg {
    width: 18px;
    height: 18px;
}

.jd-apply-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.jd-apply-body {
    padding: 18px 24px 8px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.jd-apply-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(59, 91, 255, 0.1) 0%, rgba(59, 91, 255, 0.04) 100%);
    border: 1px solid rgba(59, 91, 255, 0.14);
}

.jd-apply-banner-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    color: #3B5BFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(59, 91, 255, 0.12);
}

.jd-apply-banner-ico svg {
    width: 18px;
    height: 18px;
}

.jd-apply-banner p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #334155;
}

.jd-apply-banner strong {
    color: #1E3A8A;
    font-weight: 600;
}

.jd-apply-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.jd-apply-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.jd-apply-field > label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    font-family: 'Poppins', sans-serif;
}

.jd-apply-field > label span {
    color: #EF4444;
}

.jd-apply-field > label em {
    font-style: normal;
    font-weight: 500;
    color: #94A3B8;
}

.jd-apply-input {
    position: relative;
    display: flex;
    align-items: center;
}

.jd-apply-input > svg {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: #94A3B8;
    pointer-events: none;
    z-index: 1;
}

.jd-apply-input input,
.jd-apply-input select {
    width: 100%;
    height: 46px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #F8FAFC;
    padding: 0 14px 0 40px;
    font-size: 13.5px;
    font-family: 'Poppins', sans-serif;
    color: #0F172A;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    appearance: none;
}

.jd-apply-input select {
    cursor: pointer;
    color: #64748B;
}

.jd-apply-input select:valid,
.jd-apply-input select option:not([disabled]) {
    color: #0F172A;
}

.jd-apply-input input::placeholder {
    color: #94A3B8;
}

.jd-apply-input input:hover,
.jd-apply-input select:hover {
    border-color: #CBD5E1;
    background: #fff;
}

.jd-apply-input input:focus,
.jd-apply-input select:focus {
    border-color: #3B5BFF;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 91, 255, 0.14);
}

.jd-apply-select > svg {
    left: auto;
    right: 12px;
}

.jd-apply-select select {
    padding-right: 40px;
}

.jd-apply-dropzone {
    border: 1.5px dashed #CBD5E1;
    border-radius: 14px;
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
    padding: 22px 16px;
    text-align: center;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.jd-apply-dropzone.is-dragover {
    border-color: #3B5BFF;
    background: rgba(59, 91, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(59, 91, 255, 0.2);
}

.jd-apply-dropzone.has-file {
    border-style: solid;
    border-color: rgba(59, 91, 255, 0.28);
    background: #fff;
    padding: 14px 16px;
}

.jd-apply-drop-ico {
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
    border-radius: 14px;
    background: rgba(59, 91, 255, 0.1);
    color: #3B5BFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jd-apply-drop-ico svg {
    width: 24px;
    height: 24px;
}

.jd-apply-drop-inner p {
    margin: 0 0 12px;
    font-size: 13.5px;
    color: #475569;
    font-weight: 500;
}

.jd-apply-choose {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1.5px solid #3B5BFF;
    background: #fff;
    color: #3B5BFF;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.jd-apply-choose:hover {
    background: #3B5BFF;
    color: #fff;
    box-shadow: 0 6px 16px rgba(59, 91, 255, 0.28);
}

.jd-apply-drop-inner small {
    display: block;
    margin-top: 12px;
    font-size: 12px;
    color: #94A3B8;
}

.jd-apply-file {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.jd-apply-file[hidden] {
    display: none !important;
}

.jd-apply-file-ico {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(59, 91, 255, 0.1);
    color: #3B5BFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.jd-apply-file-ico svg {
    width: 20px;
    height: 20px;
}

.jd-apply-file-meta {
    flex: 1;
    min-width: 0;
}

.jd-apply-file-meta strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jd-apply-file-meta small {
    font-size: 12px;
    color: #64748B;
}

.jd-apply-file-remove {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: #FEF2F2;
    color: #EF4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.jd-apply-file-remove:hover {
    background: #FEE2E2;
}

.jd-apply-file-remove svg {
    width: 16px;
    height: 16px;
}

.jd-apply-textarea-wrap {
    position: relative;
}

.jd-apply-textarea-wrap textarea {
    width: 100%;
    min-height: 110px;
    resize: vertical;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #F8FAFC;
    padding: 12px 14px 28px;
    font-size: 13.5px;
    font-family: 'Poppins', sans-serif;
    color: #0F172A;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.jd-apply-textarea-wrap textarea::placeholder {
    color: #94A3B8;
}

.jd-apply-textarea-wrap textarea:focus {
    border-color: #3B5BFF;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 91, 255, 0.14);
}

.jd-apply-count {
    position: absolute;
    right: 12px;
    bottom: 10px;
    font-size: 11.5px;
    color: #94A3B8;
    pointer-events: none;
}

.jd-apply-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #475569;
    line-height: 1.45;
    margin: 2px 0 0;
}

.jd-apply-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.jd-apply-check-box {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid #CBD5E1;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    color: transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.jd-apply-check-box svg {
    width: 13px;
    height: 13px;
}

.jd-apply-check input:checked + .jd-apply-check-box {
    background: #3B5BFF;
    border-color: #3B5BFF;
    color: #fff;
}

.jd-apply-foot {
    flex-shrink: 0;
    padding: 16px 24px 20px;
    border-top: 1px solid #F1F5F9;
    background: #fff;
}

.jd-apply-actions {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 12px;
}

.jd-apply-btn-cancel,
.jd-apply-btn-submit {
    height: 48px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.jd-apply-btn-cancel {
    border: 1.5px solid #3B5BFF;
    background: #fff;
    color: #3B5BFF;
}

.jd-apply-btn-cancel:hover {
    background: rgba(59, 91, 255, 0.06);
}

.jd-apply-btn-submit {
    border: 0;
    background: linear-gradient(135deg, #3B5BFF 0%, #2A45E0 100%);
    color: #fff;
    box-shadow: 0 8px 20px rgba(59, 91, 255, 0.32);
}

.jd-apply-btn-submit:hover {
    box-shadow: 0 10px 26px rgba(59, 91, 255, 0.4);
    filter: brightness(1.04);
}

.jd-apply-btn-submit svg {
    width: 16px;
    height: 16px;
}

.jd-apply-secure {
    margin: 14px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: #94A3B8;
}

.jd-apply-secure svg {
    width: 13px;
    height: 13px;
}

body.jd-apply-open {
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .jd-apply-panel {
        width: 100%;
        max-height: 94vh;
        border-radius: 18px;
    }

    .jd-apply-head,
    .jd-apply-body,
    .jd-apply-foot {
        padding-left: 16px;
        padding-right: 16px;
    }

    .jd-apply-grid,
    .jd-apply-actions {
        grid-template-columns: 1fr;
    }

    .jd-apply-head h2 {
        font-size: 1.15rem;
    }
}

/* ========== Services / Plans Page ========== */
.services-page {
    --sv-ink: #0B1220;
    --sv-muted: #64748B;
    --sv-line: rgba(15, 23, 42, 0.08);
    --sv-blue: #3B5BFF;
    --sv-blue-deep: #243DE0;
    background:
        radial-gradient(1200px 420px at 12% -8%, rgba(59, 91, 255, 0.16), transparent 55%),
        radial-gradient(900px 380px at 88% 4%, rgba(14, 165, 233, 0.1), transparent 50%),
        linear-gradient(180deg, #EEF2FF 0%, #F7F8FC 42%, #F4F6FB 100%);
    min-height: 100vh;
}

.sv-main {
    position: relative;
    padding: 20px 0 80px;
    overflow: clip;
}

.sv-hero-bg {
    position: absolute;
    inset: 0 0 auto 0;
    height: 420px;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%),
        radial-gradient(circle at 70% 20%, rgba(59, 91, 255, 0.08), transparent 40%);
    mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
    animation: svShine 8s ease-in-out infinite;
}

@keyframes svShine {
    0%, 100% { opacity: 0.55; transform: translateX(-2%); }
    50% { opacity: 1; transform: translateX(2%); }
}

.sv-intro {
    position: relative;
    max-width: 760px;
    margin: 10px auto 36px;
    text-align: center;
    animation: svRise 0.7s ease both;
}

@keyframes svRise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

.sv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(59, 91, 255, 0.18);
    color: var(--sv-blue);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 24px rgba(59, 91, 255, 0.08);
    backdrop-filter: blur(8px);
}

.sv-eyebrow svg {
    width: 14px;
    height: 14px;
}

.sv-intro h1 {
    margin: 0 0 12px;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.85rem, 3.4vw, 2.75rem);
    font-weight: 700;
    color: var(--sv-ink);
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.sv-intro h1 span {
    background: linear-gradient(135deg, #3B5BFF 0%, #0EA5E9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sv-intro p {
    margin: 0 auto 18px;
    max-width: 560px;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--sv-muted);
}

.sv-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
}

.sv-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: #475569;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.sv-trust svg {
    width: 14px;
    height: 14px;
    color: var(--sv-blue);
}

.sv-layout {
    position: relative;
    display: block;
    max-width: 1280px;
    margin: 0 auto;
}

.sv-includes {
    position: sticky;
    top: 96px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 22px;
    padding: 22px 18px 18px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 18px 40px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: svRise 0.75s ease 0.08s both;
}

.sv-includes-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.sv-includes-badge {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #3B5BFF, #2A45E0);
    color: #fff;
    box-shadow: 0 8px 18px rgba(59, 91, 255, 0.28);
}

.sv-includes-badge svg {
    width: 17px;
    height: 17px;
}

.sv-includes h2 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--sv-ink);
}

.sv-include-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sv-include-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    line-height: 1.35;
    padding: 8px 10px;
    border-radius: 12px;
    transition: background 0.2s, transform 0.2s;
}

.sv-include-list li:hover {
    background: rgba(59, 91, 255, 0.05);
    transform: translateX(2px);
}

.sv-include-ico {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(180deg, #F8FAFF, #EEF2FF);
    color: var(--sv-blue);
    border: 1px solid rgba(59, 91, 255, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sv-include-ico svg {
    width: 15px;
    height: 15px;
}

.sv-secure-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(59, 91, 255, 0.12) 0%, rgba(14, 165, 233, 0.06) 100%);
    border: 1px solid rgba(59, 91, 255, 0.14);
}

.sv-secure-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #fff;
    color: var(--sv-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(59, 91, 255, 0.14);
}

.sv-secure-ico svg {
    width: 16px;
    height: 16px;
}

.sv-secure-box strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1E3A8A;
    margin-bottom: 2px;
}

.sv-secure-box span {
    font-size: 12px;
    color: #64748B;
    line-height: 1.4;
}

.sv-plans-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.sv-plans {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.sv-plan {
    --plan-accent: #3B5BFF;
    position: relative;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 22px;
    padding: 22px 18px 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 14px 36px rgba(15, 23, 42, 0.05);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s, border-color 0.28s;
    animation: svRise 0.7s ease both;
}

.sv-plan::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--plan-accent), transparent);
    opacity: 0.85;
}

.sv-plan:nth-child(1) { animation-delay: 0.12s; }
.sv-plan:nth-child(2) { animation-delay: 0.18s; }
.sv-plan:nth-child(3) { animation-delay: 0.24s; }
.sv-plan:nth-child(4) { animation-delay: 0.3s; }

.sv-plan:hover {
    transform: translateY(-6px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 22px 48px rgba(15, 23, 42, 0.1);
    border-color: color-mix(in srgb, var(--plan-accent) 35%, #E2E8F0);
}

.sv-plan-basic { --plan-accent: #7C3AED; }
.sv-plan-premium { --plan-accent: #3B5BFF; }
.sv-plan-pro { --plan-accent: #059669; }
.sv-plan-elite { --plan-accent: #D97706; }

.sv-plan.is-featured {
    border-color: rgba(59, 91, 255, 0.45);
    background:
        linear-gradient(180deg, rgba(59, 91, 255, 0.07) 0%, rgba(255, 255, 255, 0.96) 38%),
        #fff;
    box-shadow:
        0 0 0 1px rgba(59, 91, 255, 0.12),
        0 20px 50px rgba(59, 91, 255, 0.18);
    padding-top: 30px;
    transform: scale(1.02);
    z-index: 1;
}

.sv-plan.is-featured:hover {
    transform: scale(1.02) translateY(-6px);
}

.sv-plan.is-featured::before {
    height: 4px;
    background: linear-gradient(90deg, #2A45E0, #3B5BFF, #0EA5E9);
    opacity: 1;
}

.sv-plan-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #3B5BFF, #2A45E0);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 6px 14px;
    border-radius: 0 0 12px 12px;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(59, 91, 255, 0.35);
}

.sv-plan-badge svg {
    width: 12px;
    height: 12px;
}

.sv-plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.sv-plan-ico {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.sv-plan-ico::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.7), transparent 55%);
    pointer-events: none;
}

.sv-plan-ico svg {
    width: 22px;
    height: 22px;
    position: relative;
    z-index: 1;
}

.sv-save {
    font-size: 11px;
    font-weight: 700;
    color: #059669;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.18);
    padding: 4px 9px;
    border-radius: 999px;
}

.sv-plan-basic .sv-plan-ico {
    background: linear-gradient(145deg, #F3E8FF, #EDE9FE);
    color: #7C3AED;
}

.sv-plan-premium .sv-plan-ico {
    background: linear-gradient(145deg, #DBEAFE, #E0E7FF);
    color: #3B5BFF;
}

.sv-plan-pro .sv-plan-ico {
    background: linear-gradient(145deg, #D1FAE5, #ECFDF5);
    color: #059669;
}

.sv-plan-elite .sv-plan-ico {
    background: linear-gradient(145deg, #FFEDD5, #FEF3C7);
    color: #D97706;
}

.sv-plan h3 {
    margin: 0 0 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--sv-ink);
    letter-spacing: -0.02em;
}

.sv-plan-desc {
    margin: 0 0 16px;
    font-size: 12.5px;
    color: var(--sv-muted);
}

.sv-plan-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 16px;
    padding: 12px 0 14px;
    border-top: 1px dashed rgba(15, 23, 42, 0.08);
    border-bottom: 1px dashed rgba(15, 23, 42, 0.08);
}

.sv-plan-price strong {
    font-family: 'Outfit', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--sv-ink);
    letter-spacing: -0.04em;
    line-height: 1;
}

.sv-plan-premium .sv-plan-price strong {
    background: linear-gradient(135deg, #243DE0, #3B5BFF);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sv-plan-price s {
    font-size: 13px;
    color: #94A3B8;
    font-weight: 500;
}

.sv-plan-price span {
    font-size: 12.5px;
    color: var(--sv-muted);
    font-weight: 500;
}

.sv-plan-features {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
}

.sv-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: #334155;
    line-height: 1.4;
}

.sv-plan-features svg {
    width: 15px;
    height: 15px;
    color: #10B981;
    flex-shrink: 0;
    margin-top: 1px;
    stroke-width: 2.5;
}

.sv-plan-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 12px;
    border: 1.5px solid var(--sv-blue);
    background: #fff;
    color: var(--sv-blue);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.sv-plan-btn:hover {
    background: rgba(59, 91, 255, 0.06);
    color: var(--sv-blue-deep);
    transform: translateY(-1px);
}

.sv-plan-btn-solid {
    border: 0;
    background: linear-gradient(135deg, #4C6FFF 0%, #3B5BFF 45%, #2A45E0 100%);
    color: #fff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 10px 24px rgba(59, 91, 255, 0.35);
}

.sv-plan-btn-solid:hover {
    color: #fff;
    filter: brightness(1.05);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3) inset,
        0 14px 28px rgba(59, 91, 255, 0.42);
}

.sv-custom {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 18px;
    background:
        linear-gradient(120deg, rgba(59, 91, 255, 0.12) 0%, rgba(14, 165, 233, 0.08) 50%, rgba(59, 91, 255, 0.05) 100%),
        rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(59, 91, 255, 0.16);
    box-shadow: 0 12px 30px rgba(59, 91, 255, 0.06);
    backdrop-filter: blur(10px);
    animation: svRise 0.75s ease 0.35s both;
}

.sv-custom-ico {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(145deg, #3B5BFF, #2A45E0);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 22px rgba(59, 91, 255, 0.28);
}

.sv-custom-ico svg {
    width: 20px;
    height: 20px;
}

.sv-custom-text {
    flex: 1;
    min-width: 0;
}

.sv-custom-text h3 {
    margin: 0 0 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--sv-ink);
    letter-spacing: -0.02em;
}

.sv-custom-text p {
    margin: 0;
    font-size: 13px;
    color: var(--sv-muted);
    line-height: 1.45;
}

.sv-custom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1.5px solid var(--sv-blue);
    background: #fff;
    color: var(--sv-blue);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.sv-custom-btn:hover {
    background: var(--sv-blue);
    color: #fff;
    box-shadow: 0 10px 22px rgba(59, 91, 255, 0.28);
    transform: translateY(-1px);
}

.sv-custom-btn svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 1199.98px) {
    .sv-layout {
        grid-template-columns: 1fr;
    }

    .sv-includes {
        position: static;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 16px 24px;
        align-items: start;
    }

    .sv-includes-head {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .sv-include-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0;
    }

    .sv-secure-box {
        max-width: 280px;
        align-self: stretch;
    }

    .sv-plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sv-plan.is-featured {
        transform: none;
    }

    .sv-plan.is-featured:hover {
        transform: translateY(-6px);
    }
}

@media (max-width: 767.98px) {
    .sv-intro {
        text-align: left;
        margin-bottom: 28px;
    }

    .sv-trust {
        justify-content: flex-start;
    }

    .sv-includes {
        display: block;
    }

    .sv-include-list {
        grid-template-columns: 1fr;
        margin-bottom: 16px;
    }

    .sv-secure-box {
        max-width: none;
    }

    .sv-plans {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
        width: 100%;
    }

    .sv-custom {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .sv-custom-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sv-hero-bg,
    .sv-intro,
    .sv-includes,
    .sv-plan,
    .sv-custom {
        animation: none !important;
    }
}

/* ========== Service Flow Pages (Checkout / Success / Sales) ========== */
.flow-page {
    --fx-ink: #0B1220;
    --fx-muted: #64748B;
    --fx-blue: #3B5BFF;
    --fx-blue-deep: #243DE0;
    background:
        radial-gradient(1100px 420px at 10% -10%, rgba(59, 91, 255, 0.16), transparent 55%),
        radial-gradient(800px 360px at 90% 0%, rgba(14, 165, 233, 0.1), transparent 50%),
        linear-gradient(180deg, #EEF2FF 0%, #F7F8FC 45%, #F4F6FB 100%);
    min-height: 100vh;
}

.fx-main {
    position: relative;
    padding: 20px 0 72px;
    overflow: clip;
}

.fx-hero-bg {
    position: absolute;
    inset: 0 0 auto 0;
    height: 360px;
    pointer-events: none;
    background: radial-gradient(circle at 70% 20%, rgba(59, 91, 255, 0.08), transparent 42%);
    mask-image: linear-gradient(180deg, #000 20%, transparent 100%);
}

.fx-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 8px auto 28px;
    max-width: 560px;
}

.fx-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #94A3B8;
}

.fx-step span {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #E2E8F0;
    color: #64748B;
    font-size: 12px;
    font-weight: 700;
}

.fx-step.is-active,
.fx-step.is-done {
    color: var(--fx-ink);
}

.fx-step.is-active span,
.fx-step.is-done span {
    background: linear-gradient(145deg, #3B5BFF, #2A45E0);
    color: #fff;
    box-shadow: 0 6px 14px rgba(59, 91, 255, 0.3);
}

.fx-step-line {
    width: 42px;
    height: 2px;
    border-radius: 2px;
    background: #E2E8F0;
}

.fx-step-line.is-done {
    background: linear-gradient(90deg, #3B5BFF, #60A5FA);
}

.fx-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 22px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

.fx-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 22px;
    padding: 26px 24px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 18px 40px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(12px);
    animation: svRise 0.65s ease both;
}

.fx-card-head {
    margin-bottom: 20px;
}

.fx-card-head h2 {
    margin: 0 0 6px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--fx-ink);
    letter-spacing: -0.02em;
}

.fx-card-head p {
    margin: 0;
    font-size: 13.5px;
    color: var(--fx-muted);
}

.fx-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fx-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.fx-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.fx-field > label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.fx-field > label span {
    color: #EF4444;
}

.fx-input {
    position: relative;
    display: flex;
    align-items: center;
}

.fx-input > svg {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: #94A3B8;
    pointer-events: none;
    z-index: 1;
}

.fx-input input,
.fx-input select,
.fx-field textarea {
    width: 100%;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #F8FAFC;
    font-size: 13.5px;
    font-family: 'Poppins', sans-serif;
    color: var(--fx-ink);
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.fx-input input,
.fx-input select {
    height: 46px;
    padding: 0 14px 0 40px;
    appearance: none;
}

.fx-field textarea {
    min-height: 110px;
    resize: vertical;
    padding: 12px 14px;
}

.fx-input input:focus,
.fx-input select:focus,
.fx-field textarea:focus {
    border-color: #3B5BFF;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 91, 255, 0.14);
}

.fx-select > svg {
    left: auto;
    right: 12px;
}

.fx-select select {
    padding-right: 40px;
    cursor: pointer;
}

.fx-pay-block h3 {
    margin: 4px 0 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--fx-ink);
}

.fx-pay-options {
    display: grid;
    gap: 10px;
}

.fx-pay-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1.5px solid #E2E8F0;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.fx-pay-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fx-pay-option.is-active {
    border-color: #3B5BFF;
    background: rgba(59, 91, 255, 0.04);
    box-shadow: 0 0 0 3px rgba(59, 91, 255, 0.1);
}

.fx-pay-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #CBD5E1;
    flex-shrink: 0;
    position: relative;
}

.fx-pay-option.is-active .fx-pay-radio {
    border-color: #3B5BFF;
}

.fx-pay-option.is-active .fx-pay-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #3B5BFF;
}

.fx-pay-ico {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(180deg, #F8FAFF, #EEF2FF);
    color: #3B5BFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fx-pay-ico svg {
    width: 18px;
    height: 18px;
}

.fx-pay-option strong {
    display: block;
    font-size: 13.5px;
    color: var(--fx-ink);
}

.fx-pay-option small {
    font-size: 12px;
    color: var(--fx-muted);
}

.fx-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
}

.fx-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fx-check-box {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid #CBD5E1;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    flex-shrink: 0;
    margin-top: 1px;
}

.fx-check-box svg {
    width: 13px;
    height: 13px;
}

.fx-check input:checked + .fx-check-box {
    background: #3B5BFF;
    border-color: #3B5BFF;
    color: #fff;
}

.fx-check a {
    color: #3B5BFF;
    text-decoration: none;
    font-weight: 600;
}

.fx-submit {
    height: 50px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #4C6FFF 0%, #3B5BFF 45%, #2A45E0 100%);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 12px 28px rgba(59, 91, 255, 0.35);
    transition: filter 0.2s, transform 0.2s, box-shadow 0.2s;
}

.fx-submit:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3) inset,
        0 16px 32px rgba(59, 91, 255, 0.42);
}

.fx-submit em {
    font-style: normal;
    font-weight: 700;
}

.fx-submit svg {
    width: 16px;
    height: 16px;
}

.fx-secure-note {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: #94A3B8;
}

.fx-secure-note svg {
    width: 14px;
    height: 14px;
    color: #10B981;
}

.fx-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 96px;
    animation: svRise 0.7s ease 0.1s both;
}

.fx-summary-card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 24px 20px;
    background:
        linear-gradient(165deg, rgba(59, 91, 255, 0.12) 0%, rgba(255, 255, 255, 0.95) 42%),
        #fff;
    border: 1px solid rgba(59, 91, 255, 0.18);
    box-shadow: 0 18px 44px rgba(59, 91, 255, 0.12);
}

.fx-summary-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    right: -40px;
    top: -50px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 91, 255, 0.22), transparent 70%);
    pointer-events: none;
}

.fx-summary-plan {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.fx-summary-ico {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: linear-gradient(145deg, #DBEAFE, #E0E7FF);
    color: #3B5BFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(59, 91, 255, 0.18);
}

.fx-summary-ico svg {
    width: 22px;
    height: 22px;
}

.fx-summary-plan small {
    display: block;
    font-size: 11.5px;
    color: #64748B;
    font-weight: 500;
    margin-bottom: 2px;
}

.fx-summary-plan h3 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--fx-ink);
}

.fx-summary-desc {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--fx-muted);
}

.fx-summary-features {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fx-summary-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: #334155;
}

.fx-summary-features svg {
    width: 15px;
    height: 15px;
    color: #10B981;
    flex-shrink: 0;
    margin-top: 1px;
}

.fx-summary-price {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0;
    border-top: 1px dashed rgba(15, 23, 42, 0.1);
    border-bottom: 1px dashed rgba(15, 23, 42, 0.1);
    margin-bottom: 14px;
}

.fx-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #64748B;
}

.fx-row strong {
    color: var(--fx-ink);
    font-weight: 600;
}

.fx-row strong.is-green {
    color: #059669;
}

.fx-row.fx-total {
    font-size: 14px;
    color: var(--fx-ink);
    font-weight: 600;
}

.fx-row.fx-total strong {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    background: linear-gradient(135deg, #243DE0, #3B5BFF);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fx-change-plan {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #3B5BFF;
    text-decoration: none;
}

.fx-change-plan svg {
    width: 15px;
    height: 15px;
}

.fx-trust-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fx-trust-mini span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.fx-trust-mini svg {
    width: 13px;
    height: 13px;
    color: #3B5BFF;
}

/* Success */
.fx-success-main {
    padding-bottom: 80px;
}

.fx-success {
    max-width: 640px;
    margin: 0 auto;
}

.fx-success-card {
    text-align: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 28px;
    padding: 40px 28px 30px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
    animation: svRise 0.7s ease both;
}

.fx-success-ring {
    width: 88px;
    height: 88px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(16, 185, 129, 0.25), transparent 60%), rgba(16, 185, 129, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fxPulse 2s ease-in-out infinite;
}

@keyframes fxPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.25); }
    50% { box-shadow: 0 0 0 14px rgba(16, 185, 129, 0); }
}

.fx-success-check {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(145deg, #34D399, #059669);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(5, 150, 105, 0.35);
}

.fx-success-check svg {
    width: 28px;
    height: 28px;
}

.fx-success-card h1 {
    margin: 0 0 10px;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 700;
    color: var(--fx-ink);
    letter-spacing: -0.03em;
}

.fx-success-card > p {
    margin: 0 auto 22px;
    max-width: 420px;
    font-size: 14.5px;
    color: var(--fx-muted);
    line-height: 1.6;
}

.fx-success-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 22px;
}

.fx-success-meta > div {
    padding: 12px 10px;
    border-radius: 14px;
    background: linear-gradient(180deg, #F8FAFF, #F1F5F9);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

.fx-success-meta small {
    display: block;
    font-size: 11px;
    color: #94A3B8;
    margin-bottom: 4px;
}

.fx-success-meta strong {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--fx-ink);
}

.fx-success-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}

.fx-btn-primary,
.fx-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}

.fx-btn-primary {
    background: linear-gradient(135deg, #4C6FFF, #2A45E0);
    color: #fff;
    box-shadow: 0 12px 26px rgba(59, 91, 255, 0.32);
}

.fx-btn-primary:hover {
    color: #fff;
    transform: translateY(-1px);
}

.fx-btn-primary svg,
.fx-btn-ghost svg {
    width: 16px;
    height: 16px;
}

.fx-btn-ghost {
    border: 1.5px solid #3B5BFF;
    color: #3B5BFF;
    background: #fff;
}

.fx-btn-ghost:hover {
    background: rgba(59, 91, 255, 0.06);
    color: #2A45E0;
}

.fx-success-next {
    text-align: left;
    padding: 16px;
    border-radius: 16px;
    background: rgba(59, 91, 255, 0.05);
    border: 1px solid rgba(59, 91, 255, 0.1);
}

.fx-success-next h3 {
    margin: 0 0 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--fx-ink);
}

.fx-success-next ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fx-success-next li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #334155;
}

.fx-success-next svg {
    width: 16px;
    height: 16px;
    color: #3B5BFF;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Contact Sales */
.fx-sales {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 28px;
    align-items: start;
    max-width: 1140px;
    margin: 12px auto 0;
}

.fx-sales-copy {
    padding-top: 8px;
    animation: svRise 0.65s ease both;
}

.fx-sales-copy h1 {
    margin: 12px 0 12px;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--fx-ink);
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.fx-sales-copy > p {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--fx-muted);
    max-width: 480px;
}

.fx-sales-points {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.fx-sales-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
}

.fx-sales-points svg {
    width: 18px;
    height: 18px;
    color: #10B981;
}

.fx-sales-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fx-sales-contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: var(--fx-ink);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
}

.fx-sales-contact svg {
    width: 16px;
    height: 16px;
    color: #3B5BFF;
}

.fx-sales-form-card {
    animation: svRise 0.7s ease 0.08s both;
}

.fx-sales-done {
    text-align: center;
    padding: 28px 10px 10px;
}

.fx-sales-done .fx-success-check {
    margin-bottom: 14px;
}

.fx-sales-done h3 {
    margin: 0 0 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--fx-ink);
}

.fx-sales-done p {
    margin: 0 0 18px;
    color: var(--fx-muted);
    font-size: 14px;
}

@media (max-width: 991.98px) {
    .fx-checkout,
    .fx-sales {
        grid-template-columns: 1fr;
    }

    .fx-summary {
        position: static;
        order: -1;
    }
}

@media (max-width: 575.98px) {
    .fx-grid-2,
    .fx-success-meta {
        grid-template-columns: 1fr;
    }

    .fx-card {
        padding: 20px 16px;
    }

    .fx-success-card {
        padding: 30px 18px 22px;
    }

    .fx-success-actions {
        flex-direction: column;
    }

    .fx-btn-primary,
    .fx-btn-ghost {
        width: 100%;
    }
}

/* ========== Checkout Pro Enhancements ========== */
.checkout-page .fx-main {
    padding-bottom: 80px;
}

.fx-checkout-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 4px auto 28px;
    animation: svRise 0.6s ease both;
}

.fx-checkout-hero h1 {
    margin: 10px 0 8px;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.55rem, 2.8vw, 2.15rem);
    font-weight: 700;
    color: var(--fx-ink);
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.fx-checkout-hero h1 span {
    background: linear-gradient(135deg, #3B5BFF, #0EA5E9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fx-checkout-hero > div > p {
    margin: 0;
    max-width: 460px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--fx-muted);
}

.fx-steps-inline {
    margin: 0;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(8px);
}

.fx-card-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.fx-secure-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.18);
    color: #059669;
    font-size: 12px;
    font-weight: 600;
}

.fx-secure-pill svg {
    width: 13px;
    height: 13px;
}

.fx-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.fx-section-title h3 {
    margin: 0;
}

.fx-pay-logos {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fx-pay-logos img {
    height: 18px;
    width: auto;
    opacity: 0.85;
}

.fx-pay-option {
    position: relative;
}

.fx-pay-tag {
    margin-left: auto;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    color: #3B5BFF;
    background: rgba(59, 91, 255, 0.1);
    padding: 4px 8px;
    border-radius: 999px;
}

.fx-free-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(59, 91, 255, 0.06));
    border: 1px solid rgba(124, 58, 237, 0.16);
}

.fx-free-note[hidden] {
    display: none !important;
}

.fx-free-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fff;
    color: #7C3AED;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.14);
}

.fx-free-ico svg {
    width: 20px;
    height: 20px;
}

.fx-free-note strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #4C1D95;
    margin-bottom: 3px;
}

.fx-free-note p {
    margin: 0;
    font-size: 13px;
    color: #64748B;
    line-height: 1.45;
}

.fx-coupon label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.fx-coupon-row {
    display: flex;
    gap: 8px;
}

.fx-coupon-row input {
    flex: 1;
    height: 44px;
    border: 1px solid #E2E8F0;
    border-radius: 11px;
    background: #F8FAFC;
    padding: 0 14px;
    font-size: 13.5px;
    font-family: 'Poppins', sans-serif;
    outline: none;
}

.fx-coupon-row input:focus {
    border-color: #3B5BFF;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 91, 255, 0.12);
}

.fx-coupon-btn {
    height: 44px;
    padding: 0 16px;
    border-radius: 11px;
    border: 1.5px solid #3B5BFF;
    background: #fff;
    color: #3B5BFF;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.fx-coupon-btn:hover {
    background: #3B5BFF;
    color: #fff;
}

.fx-coupon-msg {
    display: block;
    margin-top: 8px;
    font-size: 12.5px;
}

.fx-coupon-msg.is-ok {
    color: #059669;
}

.fx-coupon-msg.is-error {
    color: #DC2626;
}

.fx-submit.is-loading {
    opacity: 0.85;
    pointer-events: none;
}

.fx-help-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.fx-help-strip > svg {
    width: 22px;
    height: 22px;
    color: #3B5BFF;
    flex-shrink: 0;
}

.fx-help-strip strong {
    display: block;
    font-size: 13px;
    color: var(--fx-ink);
    margin-bottom: 2px;
}

.fx-help-strip span {
    font-size: 12.5px;
    color: var(--fx-muted);
}

.fx-summary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.fx-summary-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(59, 91, 255, 0.12);
    color: #3B5BFF;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.fx-summary-card[data-plan="basic"] .fx-summary-badge {
    background: rgba(124, 58, 237, 0.12);
    color: #7C3AED;
}

.fx-summary-card[data-plan="pro"] .fx-summary-badge {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.fx-summary-card[data-plan="elite"] .fx-summary-badge {
    background: rgba(245, 158, 11, 0.14);
    color: #D97706;
}

.fx-summary-card[data-plan="basic"] .fx-summary-ico {
    background: linear-gradient(145deg, #F3E8FF, #EDE9FE);
    color: #7C3AED;
}

.fx-summary-card[data-plan="pro"] .fx-summary-ico {
    background: linear-gradient(145deg, #D1FAE5, #ECFDF5);
    color: #059669;
}

.fx-summary-card[data-plan="elite"] .fx-summary-ico {
    background: linear-gradient(145deg, #FFEDD5, #FEF3C7);
    color: #D97706;
}

.fx-summary-card .fx-change-plan {
    font-size: 12.5px;
}

.fx-summary-duration {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 14px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.03);
    font-size: 12.5px;
    font-weight: 500;
    color: #475569;
}

.fx-summary-duration svg {
    width: 14px;
    height: 14px;
    color: #3B5BFF;
}

.fx-summary-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 12.5px;
    font-weight: 500;
    color: #059669;
}

.fx-summary-foot svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

body[data-checkout-plan="basic"] .fx-submit {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 12px 28px rgba(124, 58, 237, 0.35);
}

@media (max-width: 767.98px) {
    .fx-checkout-hero {
        margin-bottom: 22px;
    }

    .fx-steps-inline {
        width: 100%;
        justify-content: center;
    }

    .fx-card-head-row {
        flex-direction: column;
    }
}

/* ========== New Checkout (Service Card Layout) ========== */
.co-page {
    --co-blue: #3B5BFF;
    --co-ink: #0F172A;
    --co-muted: #64748B;
    --co-line: #E2E8F0;
    background: #F5F7FB;
    min-height: 100vh;
}

.co-main {
    padding: 20px 0 64px;
}

.co-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 1180px;
    margin: 4px auto 20px;
}

.co-head h1 {
    margin: 0 0 6px;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.7rem, 2.8vw, 2.2rem);
    font-weight: 700;
    color: var(--co-ink);
    letter-spacing: -0.03em;
}

.co-head p {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--co-muted);
}

.co-head p svg {
    width: 14px;
    height: 14px;
}

.co-secure-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(59, 91, 255, 0.14);
    box-shadow: 0 8px 20px rgba(59, 91, 255, 0.06);
}

.co-secure-badge > svg {
    width: 22px;
    height: 22px;
    color: var(--co-blue);
    flex-shrink: 0;
}

.co-secure-badge strong {
    display: block;
    font-size: 13px;
    color: var(--co-ink);
}

.co-secure-badge span {
    font-size: 12px;
    color: var(--co-muted);
}

.co-progress {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    max-width: none;
    margin: 0 0 16px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: 0;
}

.co-progress-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #94A3B8;
}

.co-progress-item span {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #E2E8F0;
    color: #64748B;
    font-size: 12px;
}

.co-progress-item.is-active {
    color: var(--co-ink);
}

.co-progress-item.is-active span {
    background: var(--co-blue);
    color: #fff;
    box-shadow: 0 6px 14px rgba(59, 91, 255, 0.3);
}

.co-progress-line {
    width: 48px;
    height: 2px;
    background: #E2E8F0;
    border-radius: 2px;
}

.co-progress-line.is-active {
    background: linear-gradient(90deg, #3B5BFF, #93C5FD);
}

.co-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.7fr);
    gap: 22px;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
}

.co-block {
    background: #fff;
    border: 1px solid var(--co-line);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.03);
}

.co-block-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--co-ink);
}

.co-block-title span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(59, 91, 255, 0.1);
    color: var(--co-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

/* Service card (replaces job card) */
.co-service-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--co-line);
    background: linear-gradient(180deg, #FAFBFF, #fff);
}

.co-service-ico {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #DBEAFE, #E0E7FF);
    color: #3B5BFF;
    box-shadow: 0 8px 18px rgba(59, 91, 255, 0.12);
}

.co-service-card[data-plan="basic"] .co-service-ico {
    background: linear-gradient(145deg, #F3E8FF, #EDE9FE);
    color: #7C3AED;
}

.co-service-card[data-plan="pro"] .co-service-ico {
    background: linear-gradient(145deg, #D1FAE5, #ECFDF5);
    color: #059669;
}

.co-service-card[data-plan="elite"] .co-service-ico {
    background: linear-gradient(145deg, #FFEDD5, #FEF3C7);
    color: #D97706;
}

.co-service-ico svg {
    width: 26px;
    height: 26px;
}

.co-service-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.co-service-top h3 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--co-blue);
}

.co-service-tag {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.co-service-body > p {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--co-muted);
}

.co-service-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.co-service-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: #475569;
    font-weight: 500;
}

.co-service-meta svg {
    width: 13px;
    height: 13px;
    color: var(--co-blue);
}

.co-service-side {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.co-service-qty {
    font-size: 12px;
    color: var(--co-muted);
}

.co-service-price {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--co-ink);
}

.co-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1.5px solid var(--co-blue);
    background: #fff;
    color: var(--co-blue);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.co-edit-btn:hover {
    background: rgba(59, 91, 255, 0.06);
    color: #2A45E0;
}

.co-edit-btn svg {
    width: 13px;
    height: 13px;
}

/* Upsell */
.co-upsell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px dashed rgba(59, 91, 255, 0.28);
    background: rgba(59, 91, 255, 0.04);
    cursor: pointer;
}

.co-upsell[hidden] {
    display: none !important;
}

.co-upsell.is-on {
    border-style: solid;
    border-color: rgba(59, 91, 255, 0.4);
    background: rgba(59, 91, 255, 0.07);
}

.co-upsell-text strong {
    display: block;
    font-size: 13.5px;
    color: var(--co-ink);
    margin-bottom: 2px;
}

.co-upsell-text span {
    font-size: 12.5px;
    color: var(--co-muted);
}

.co-upsell-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.co-upsell-price {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--co-blue);
    white-space: nowrap;
}

.co-switch {
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: #CBD5E1;
    position: relative;
    transition: background 0.2s;
}

.co-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
    transition: transform 0.2s;
}

.co-upsell.is-on .co-switch {
    background: var(--co-blue);
}

.co-upsell.is-on .co-switch::after {
    transform: translateX(20px);
}

/* Payment */
.co-pay {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--co-line);
    border-radius: 14px;
    overflow: hidden;
    min-height: 280px;
}

.co-pay-tabs {
    display: flex;
    flex-direction: column;
    background: #F8FAFC;
    border-right: 1px solid var(--co-line);
}

.co-pay-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    padding: 14px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #64748B;
    text-align: left;
    cursor: pointer;
    border-left: 3px solid transparent;
    font-family: 'Poppins', sans-serif;
}

.co-pay-tab svg {
    width: 16px;
    height: 16px;
}

.co-pay-tab.is-active {
    background: #fff;
    color: var(--co-blue);
    border-left-color: var(--co-blue);
}

.co-pay-panels {
    padding: 18px;
    background: #fff;
}

.co-pay-panel h3 {
    margin: 0 0 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--co-ink);
}

.co-pay-panel[hidden] {
    display: none !important;
}

.co-upi-apps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.co-upi-apps span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 9px;
    border: 1px solid var(--co-line);
    background: #F8FAFC;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

.co-upi-apps img {
    height: 14px;
    width: auto;
}

.co-upi-apps svg {
    width: 14px;
    height: 14px;
    color: var(--co-blue);
}

.co-upi-box {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.co-qr {
    border: 1px solid var(--co-line);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    background: #fff;
}

.co-qr-grid {
    width: 110px;
    height: 110px;
    margin: 0 auto 8px;
    border-radius: 8px;
    background:
        linear-gradient(90deg, #0F172A 25%, transparent 25%) 0 0 / 10px 10px,
        linear-gradient(#0F172A 25%, transparent 25%) 0 0 / 10px 10px,
        #fff;
    background-blend-mode: multiply;
    opacity: 0.85;
}

.co-qr small {
    font-size: 11px;
    color: var(--co-muted);
}

.co-upi-info label,
.co-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
}

.co-field label em {
    font-style: normal;
    font-weight: 500;
    color: #94A3B8;
}

.co-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.co-input-row input,
.co-field input {
    width: 100%;
    height: 42px;
    border: 1px solid var(--co-line);
    border-radius: 10px;
    background: #F8FAFC;
    padding: 0 12px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    outline: none;
}

.co-input-row input:focus,
.co-field input:focus {
    border-color: var(--co-blue);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 91, 255, 0.12);
}

.co-verify-btn {
    height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    border: 0;
    background: var(--co-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.co-upi-amount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(59, 91, 255, 0.06);
    margin-bottom: 8px;
    font-size: 13px;
    color: #475569;
}

.co-upi-amount strong {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    color: var(--co-blue);
}

.co-timer {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #F59E0B;
}

.co-timer svg {
    width: 14px;
    height: 14px;
}

.co-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.co-field {
    margin-bottom: 12px;
}

.co-bank-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.co-bank {
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--co-line);
    background: #F8FAFC;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
}

.co-bank.is-active,
.co-bank:hover {
    border-color: var(--co-blue);
    color: var(--co-blue);
    background: rgba(59, 91, 255, 0.05);
}

.co-free-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(59, 91, 255, 0.05));
    border: 1px solid rgba(124, 58, 237, 0.16);
}

.co-free-banner[hidden] {
    display: none !important;
}

.co-free-banner > svg {
    width: 22px;
    height: 22px;
    color: #7C3AED;
    flex-shrink: 0;
}

.co-free-banner strong {
    display: block;
    font-size: 14px;
    color: #4C1D95;
    margin-bottom: 2px;
}

.co-free-banner span {
    font-size: 13px;
    color: var(--co-muted);
}

.co-billing {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

.co-invoice-box {
    padding: 14px;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1px solid var(--co-line);
}

.co-invoice-box strong {
    display: block;
    font-size: 13.5px;
    color: var(--co-ink);
    margin-bottom: 4px;
}

.co-invoice-box p {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: var(--co-muted);
}

.co-footer-note {
    text-align: center;
    padding: 8px 0 4px;
}

.co-footer-note p {
    margin: 0 0 6px;
    font-size: 12.5px;
    color: var(--co-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.co-footer-note svg {
    width: 14px;
    height: 14px;
    color: #10B981;
}

.co-footer-note a {
    color: var(--co-blue);
    text-decoration: none;
    font-weight: 600;
}

/* Sidebar */
.co-sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.co-summary {
    background: #fff;
    border: 1px solid var(--co-line);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}

.co-summary h3 {
    margin: 0 0 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--co-ink);
}

.co-sum-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dashed var(--co-line);
}

.co-sum-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: #475569;
}

.co-sum-row strong {
    color: var(--co-ink);
    font-weight: 600;
}

.co-sum-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}

.co-sum-total span {
    font-size: 14px;
    font-weight: 600;
    color: var(--co-ink);
}

.co-sum-total strong {
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--co-blue);
    letter-spacing: -0.03em;
}

.co-save-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border-radius: 10px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.18);
    color: #047857;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 10px;
}

.co-save-box svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.co-guarantee {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.14);
    margin-bottom: 14px;
}

.co-guarantee > svg {
    width: 18px;
    height: 18px;
    color: #7C3AED;
    flex-shrink: 0;
    margin-top: 1px;
}

.co-guarantee strong {
    display: block;
    font-size: 13px;
    color: #5B21B6;
    margin-bottom: 2px;
}

.co-guarantee span {
    font-size: 12px;
    color: #64748B;
    line-height: 1.4;
}

.co-pay-btn {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #4C6FFF, #3B5BFF 50%, #2A45E0);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(59, 91, 255, 0.32);
    transition: filter 0.2s, transform 0.2s;
}

.co-pay-btn:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.co-pay-btn.is-loading {
    opacity: 0.85;
    pointer-events: none;
}

.co-pay-btn svg {
    width: 16px;
    height: 16px;
}

.co-accept {
    margin-top: 16px;
    text-align: center;
}

.co-accept small {
    display: block;
    font-size: 11px;
    color: #94A3B8;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.co-accept-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.co-accept-logos img {
    height: 18px;
    width: auto;
    opacity: 0.85;
}

.co-trust-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.co-trust-row > div {
    background: #fff;
    border: 1px solid var(--co-line);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.co-trust-row svg {
    width: 16px;
    height: 16px;
    color: var(--co-blue);
}

.co-trust-row span {
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    line-height: 1.3;
}

@media (max-width: 991.98px) {
    .co-layout {
        grid-template-columns: 1fr;
    }

    .co-sidebar {
        position: static;
        order: -1;
    }

    .co-billing {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .co-service-card {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .co-service-side {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding-top: 8px;
        border-top: 1px dashed var(--co-line);
    }

    .co-pay {
        grid-template-columns: 1fr;
    }

    .co-pay-tabs {
        flex-direction: row;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--co-line);
    }

    .co-pay-tab {
        border-left: 0;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
    }

    .co-pay-tab.is-active {
        border-bottom-color: var(--co-blue);
    }

    .co-upi-box {
        grid-template-columns: 1fr;
    }

    .co-qr {
        max-width: 160px;
        margin: 0 auto;
    }

    .co-bank-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .co-upsell {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========== Payment Success Page ========== */
.ps-page {
    --ps-green: #10B981;
    --ps-green-dark: #059669;
    --ps-blue: #3B5BFF;
    --ps-ink: #0F172A;
    --ps-muted: #64748B;
    --ps-line: #E2E8F0;
    background: #F7F8FC;
    min-height: 100vh;
}

.ps-main {
    position: relative;
    padding: 28px 0 64px;
}

.ps-confetti-rain {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    overflow: hidden;
}

.ps-rain-piece {
    position: absolute;
    top: -20px;
    border-radius: 2px;
    opacity: 0.95;
    will-change: transform, opacity;
    animation-name: psRainFall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes psRainFall {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--drift, 40px), 110vh, 0) rotate(var(--spin, 520deg));
        opacity: 0;
    }
}

.ps-main > .container-fluid {
    position: relative;
    z-index: 2;
}

.ps-hero {
    position: relative;
    text-align: center;
    max-width: 640px;
    margin: 0 auto 32px;
    padding-top: 8px;
}

.ps-check-wrap {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 0 auto 22px;
}

.ps-burst {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.28), transparent 68%);
    animation: psBurst 1.1s ease-out both;
}

.ps-check {
    position: relative;
    z-index: 2;
    width: 88px;
    height: 88px;
    margin: 11px auto 0;
    border-radius: 50%;
    background: linear-gradient(145deg, #34D399 0%, #10B981 45%, #059669 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 16px 36px rgba(5, 150, 105, 0.38);
    animation: psCheckIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ps-check::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(16, 185, 129, 0.35);
    animation: psPulseRing 1.8s ease-out 0.4s infinite;
}

.ps-check svg {
    width: 42px;
    height: 42px;
    stroke-width: 3;
    animation: psTick 0.45s ease 0.35s both;
}

.ps-confetti {
    position: absolute;
    z-index: 1;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    opacity: 0;
    animation: psConfetti 1.1s ease-out 0.25s both;
}

.ps-confetti.c1 { top: 6px; left: 10px; background: #34D399; animation-delay: 0.28s; --dx: -10px; --dy: -16px; }
.ps-confetti.c2 { top: 2px; right: 16px; background: #3B5BFF; border-radius: 50%; width: 7px; height: 7px; animation-delay: 0.34s; --dx: 12px; --dy: -18px; }
.ps-confetti.c3 { bottom: 14px; left: 2px; background: #FBBF24; width: 6px; height: 10px; animation-delay: 0.4s; --dx: -14px; --dy: 8px; }
.ps-confetti.c4 { bottom: 8px; right: 6px; background: #A78BFA; border-radius: 50%; animation-delay: 0.32s; --dx: 14px; --dy: 10px; }
.ps-confetti.c5 { top: 34px; left: -8px; background: #60A5FA; width: 6px; height: 6px; animation-delay: 0.45s; --dx: -18px; --dy: -2px; }
.ps-confetti.c6 { top: 26px; right: -6px; background: #34D399; width: 5px; height: 11px; animation-delay: 0.38s; --dx: 18px; --dy: -4px; }
.ps-confetti.c7 { top: -2px; left: 48px; background: #F472B6; border-radius: 50%; width: 6px; height: 6px; animation-delay: 0.42s; --dx: 0; --dy: -20px; }
.ps-confetti.c8 { bottom: -2px; left: 52px; background: #38BDF8; width: 9px; height: 4px; animation-delay: 0.48s; --dx: 2px; --dy: 16px; }

.ps-hero-title {
    margin: 0 0 12px;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.85rem, 3.2vw, 2.4rem);
    font-weight: 700;
    color: var(--ps-ink);
    letter-spacing: -0.035em;
    animation: psFadeUp 0.55s ease 0.2s both;
}

.ps-hero-title span {
    background: linear-gradient(135deg, #10B981, #059669);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ps-hero-sub {
    margin: 0 auto 18px;
    max-width: 460px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--ps-muted);
    animation: psFadeUp 0.55s ease 0.32s both;
}

.ps-txn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0.06));
    border: 1px solid rgba(16, 185, 129, 0.22);
    color: #047857;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.1);
    animation: psFadeUp 0.55s ease 0.44s both;
}

.ps-txn svg {
    width: 14px;
    height: 14px;
}

.ps-txn strong {
    font-weight: 700;
    color: #065F46;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.01em;
}

@keyframes psCheckIn {
    0% { opacity: 0; transform: scale(0.4); }
    70% { transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes psTick {
    0% { opacity: 0; transform: scale(0.4) rotate(-12deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes psBurst {
    0% { opacity: 0; transform: scale(0.5); }
    60% { opacity: 1; }
    100% { opacity: 0.55; transform: scale(1.35); }
}

@keyframes psPulseRing {
    0% { transform: scale(0.92); opacity: 0.7; }
    100% { transform: scale(1.35); opacity: 0; }
}

@keyframes psConfetti {
    0% { opacity: 0; transform: translate(0, 10px) scale(0.4); }
    40% { opacity: 1; }
    100% { opacity: 0.9; transform: translate(var(--dx, 0), var(--dy, -12px)) scale(1); }
}

@keyframes psFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ps-burst,
    .ps-check,
    .ps-check svg,
    .ps-check::after,
    .ps-confetti,
    .ps-hero-title,
    .ps-hero-sub,
    .ps-txn,
    .ps-rain-piece {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .ps-confetti-rain {
        display: none !important;
    }
}

.ps-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.7fr);
    gap: 18px;
    max-width: 1100px;
    margin: 0 auto 36px;
    align-items: start;
    animation: psFadeUp 0.55s ease 0.5s both;
}

.ps-card {
    background: #fff;
    border: 1px solid #E8ECF4;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.ps-order {
    padding: 0;
    overflow: hidden;
}

.ps-order::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #3B5BFF, #60A5FA);
}

.ps-order-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 0;
}

.ps-order .ps-card-title {
    margin: 0;
}

.ps-order-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.18);
    color: #059669;
    font-size: 11.5px;
    font-weight: 700;
}

.ps-order-chip svg {
    width: 13px;
    height: 13px;
}

.ps-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ps-ink);
}

.ps-card-title svg {
    width: 18px;
    height: 18px;
    color: var(--ps-blue);
}

.ps-service {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin: 14px 20px 0;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(59, 91, 255, 0.14);
    background: linear-gradient(135deg, #F8FAFF 0%, #EEF2FF 100%);
}

.ps-service-ico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #3B5BFF, #2A45E0);
    color: #fff;
    box-shadow: 0 8px 18px rgba(59, 91, 255, 0.28);
}

.ps-service[data-plan="basic"] .ps-service-ico {
    background: linear-gradient(145deg, #8B5CF6, #7C3AED);
    box-shadow: 0 8px 18px rgba(124, 58, 237, 0.28);
}

.ps-service[data-plan="pro"] .ps-service-ico {
    background: linear-gradient(145deg, #34D399, #059669);
    box-shadow: 0 8px 18px rgba(5, 150, 105, 0.28);
}

.ps-service[data-plan="elite"] .ps-service-ico {
    background: linear-gradient(145deg, #FBBF24, #D97706);
    box-shadow: 0 8px 18px rgba(217, 119, 6, 0.28);
}

.ps-service-ico svg {
    width: 24px;
    height: 24px;
}

.ps-service-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.ps-service-top h3 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    color: #1E3A8A;
}

.ps-tag {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.ps-service-body > p {
    margin: 0 0 8px;
    font-size: 12.5px;
    color: var(--ps-muted);
}

.ps-service-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.ps-service-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #475569;
    font-weight: 500;
}

.ps-service-meta svg {
    width: 12px;
    height: 12px;
    color: var(--ps-blue);
}

.ps-service-side {
    text-align: right;
}

.ps-service-side strong {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ps-ink);
    letter-spacing: -0.02em;
}

.ps-service-side small {
    font-size: 11.5px;
    color: var(--ps-muted);
}

.ps-meta-list {
    list-style: none;
    margin: 0;
    padding: 16px 20px 8px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ps-meta-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--ps-muted);
    padding: 11px 0;
    border-bottom: 1px dashed #E2E8F0;
}

.ps-meta-list li:last-child {
    border-bottom: 0;
}

.ps-meta-list li.is-total {
    margin-top: 2px;
    padding: 12px 12px;
    border-radius: 10px;
    border-bottom: 0;
    background: #F8FAFC;
}

.ps-meta-list strong {
    color: var(--ps-ink);
    font-weight: 600;
    text-align: right;
}

.ps-meta-list strong.is-paid {
    color: #059669;
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
}

.ps-secure-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 20px 18px;
    padding: 12px 14px;
    border-radius: 11px;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.06));
    border: 1px solid rgba(16, 185, 129, 0.16);
    color: #047857;
    font-size: 12.5px;
    font-weight: 500;
}

.ps-secure-bar svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ps-receipt {
    position: relative;
    overflow: hidden;
    text-align: left;
    padding: 0;
    background: #fff;
    border: 1px solid #E8ECF4;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.ps-receipt::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #10B981, #3B5BFF);
}

.ps-receipt-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 22px 0;
}

.ps-receipt-ico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(160deg, #ECFDF5, #D1FAE5);
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.ps-receipt-ico svg {
    width: 24px;
    height: 24px;
}

.ps-receipt-head h2 {
    margin: 0 0 3px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ps-ink);
    letter-spacing: -0.02em;
}

.ps-receipt-head p {
    margin: 0;
    font-size: 12.5px;
    color: var(--ps-muted);
}

.ps-receipt-divider {
    padding: 16px 22px 0;
}

.ps-receipt-divider span {
    display: block;
    height: 1px;
    background: repeating-linear-gradient(
        90deg,
        #E2E8F0 0 8px,
        transparent 8px 14px
    );
}

.ps-receipt-rows {
    list-style: none;
    margin: 0;
    padding: 14px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ps-receipt-rows li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #64748B;
}

.ps-receipt-rows strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--ps-ink);
    text-align: right;
}

.ps-receipt-rows strong.is-ok {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #059669;
}

.ps-receipt-rows strong.is-ok svg {
    width: 14px;
    height: 14px;
}

.ps-receipt-rows strong.is-amt {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0F172A;
}

.ps-download-btn {
    width: calc(100% - 44px);
    margin: 0 22px 12px;
    height: 46px;
    border-radius: 11px;
    border: 0;
    background: #3B5BFF;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(59, 91, 255, 0.28);
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.ps-download-btn:hover {
    background: #2A45E0;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(59, 91, 255, 0.34);
}

.ps-download-btn svg {
    width: 16px;
    height: 16px;
}

.ps-help-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0 22px 20px;
    padding-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: #3B5BFF;
    text-decoration: none;
}

.ps-help-link svg {
    width: 13px;
    height: 13px;
}

.ps-help-link:hover {
    color: #2A45E0;
}
.ps-next {
    max-width: 1100px;
    margin: 0 auto 28px;
    text-align: center;
}

.ps-next > h2 {
    margin: 0 0 22px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ps-ink);
}

.ps-next-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ps-step {
    flex: 1 1 160px;
    max-width: 200px;
    text-align: center;
}

.ps-step-ico {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-step-ico svg {
    width: 22px;
    height: 22px;
}

.ps-step-ico.tone-green { background: rgba(16, 185, 129, 0.12); color: #059669; }
.ps-step-ico.tone-violet { background: rgba(124, 58, 237, 0.12); color: #7C3AED; }
.ps-step-ico.tone-amber { background: rgba(245, 158, 11, 0.14); color: #D97706; }
.ps-step-ico.tone-blue { background: rgba(59, 91, 255, 0.12); color: #3B5BFF; }

.ps-step h3 {
    margin: 0 0 6px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--ps-ink);
}

.ps-step p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ps-muted);
}

.ps-step-arrow {
    width: 18px;
    height: 18px;
    color: #CBD5E1;
    margin-top: 18px;
    flex-shrink: 0;
}

.ps-app {
    max-width: 1100px;
    margin: 0 auto 28px;
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 22px 24px;
    border-radius: 18px;
    background: linear-gradient(120deg, #EEF2FF 0%, #F5F3FF 50%, #EFF6FF 100%);
    border: 1px solid rgba(59, 91, 255, 0.12);
}

.ps-phone-frame {
    width: 112px;
    height: 180px;
    border-radius: 18px;
    padding: 8px;
    background: #0F172A;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.2);
}

.ps-phone-screen {
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(180deg, #3B5BFF, #6366F1);
    color: #fff;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ps-phone-screen strong {
    font-size: 11px;
}

.ps-phone-screen > span {
    font-size: 10px;
    opacity: 0.85;
}

.ps-phone-cards {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ps-phone-cards em {
    display: block;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    font-style: normal;
}

.ps-app-copy h2 {
    margin: 0 0 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ps-ink);
}

.ps-app-copy p {
    margin: 0 0 14px;
    font-size: 13.5px;
    color: var(--ps-muted);
    max-width: 420px;
    line-height: 1.55;
}

.ps-store-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ps-store-btns .footer-store-btn {
    background: #0F172A;
}

.ps-app-feats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ps-app-feats > div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

.ps-app-feats svg {
    width: 16px;
    height: 16px;
    color: var(--ps-blue);
    flex-shrink: 0;
}

.ps-cta-wrap {
    text-align: center;
    margin-bottom: 28px;
}

.ps-dashboard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    padding: 0 28px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4C6FFF, #2A45E0);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(59, 91, 255, 0.32);
    transition: transform 0.2s, filter 0.2s;
}

.ps-dashboard-btn:hover {
    color: #fff;
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.ps-dashboard-btn svg {
    width: 18px;
    height: 18px;
}

.ps-trust {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--ps-line);
}

.ps-trust > div {
    text-align: center;
    padding: 8px 6px;
}

.ps-trust svg {
    width: 22px;
    height: 22px;
    color: var(--ps-blue);
    margin-bottom: 8px;
}

.ps-trust strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ps-ink);
    margin-bottom: 3px;
}

.ps-trust span {
    font-size: 12px;
    color: var(--ps-muted);
}

@media (max-width: 991.98px) {
    .ps-grid {
        grid-template-columns: 1fr;
    }

    .ps-app {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ps-app-phone {
        display: flex;
        justify-content: center;
    }

    .ps-app-copy p {
        margin-left: auto;
        margin-right: auto;
    }

    .ps-store-btns {
        justify-content: center;
    }

    .ps-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ps-step-arrow {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .ps-service {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .ps-service-side {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding-top: 8px;
        border-top: 1px dashed var(--ps-line);
    }

    .ps-trust {
        grid-template-columns: 1fr;
    }

    .ps-app-feats {
        grid-template-columns: 1fr;
    }
}

/* ========== Payment Receipt Page ========== */
.rc-page {
    --rc-blue: #3B5BFF;
    --rc-green: #10B981;
    --rc-ink: #0F172A;
    --rc-muted: #64748B;
    background: #EEF3FB;
    min-height: 100vh;
}

.rc-main {
    padding: 20px 0 56px;
}

.rc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 920px;
    margin: 0 auto 18px;
}

.rc-toolbar .fj-breadcrumb {
    max-width: none;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.rc-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

.rc-btn-ghost,
.rc-btn-primary {
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.rc-btn-ghost {
    border: 1px solid #D0D7E6;
    background: #fff;
    color: #334155;
}

.rc-btn-primary {
    border: 0;
    background: #3B5BFF;
    color: #fff;
    box-shadow: 0 8px 18px rgba(59, 91, 255, 0.25);
}

.rc-btn-ghost svg,
.rc-btn-primary svg {
    width: 15px;
    height: 15px;
}

.rc-sheet {
    max-width: 920px;
    margin: 0 auto;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.rc-head {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: 16px;
    align-items: start;
    padding: 28px 28px 22px;
    border-bottom: 1px solid #EEF2F7;
}

.rc-logo {
    height: 42px;
    width: auto;
    display: block;
    margin-bottom: 8px;
}

.rc-tagline {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: #3B5BFF;
}

.rc-address {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: #64748B;
}

.rc-center {
    text-align: center;
}

.rc-check {
    width: 64px;
    height: 64px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: linear-gradient(145deg, #34D399, #059669);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(5, 150, 105, 0.3);
}

.rc-check svg {
    width: 30px;
    height: 30px;
    stroke-width: 3;
}

.rc-center h1 {
    margin: 0 0 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    color: #059669;
}

.rc-txn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.18);
    color: #047857;
    font-size: 12px;
    font-weight: 500;
}

.rc-txn strong {
    font-weight: 700;
    color: #065F46;
}

.rc-meta {
    text-align: right;
}

.rc-success-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 12px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    font-size: 12px;
    font-weight: 700;
}

.rc-success-pill svg {
    width: 14px;
    height: 14px;
}

.rc-meta-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 12.5px;
    color: #64748B;
}

.rc-meta-row strong {
    color: #0F172A;
    font-weight: 600;
}

.rc-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 22px 28px;
}

.rc-info-card {
    padding: 16px;
    border-radius: 14px;
    background: #F8FAFC;
    border: 1px solid #EEF2F7;
}

.rc-info-card h2 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748B;
}

.rc-info-card h2 svg {
    width: 14px;
    height: 14px;
    color: #3B5BFF;
}

.rc-info-card h3 {
    margin: 0 0 2px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0F172A;
}

.rc-info-card > p {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: #64748B;
}

.rc-info-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rc-info-card li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #334155;
}

.rc-info-card li svg {
    width: 14px;
    height: 14px;
    color: #3B5BFF;
    flex-shrink: 0;
}

.rc-pay-list li {
    justify-content: space-between;
}

.rc-pay-list span {
    color: #64748B;
    font-size: 12.5px;
}

.rc-pay-list strong {
    font-size: 12.5px;
    font-weight: 600;
    color: #0F172A;
    text-align: right;
}

.rc-pay-list strong.is-paid {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #059669;
}

.rc-pay-list strong.is-paid svg {
    width: 14px;
    height: 14px;
    color: #059669;
}

.rc-pay-list strong.is-amt {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #3B5BFF;
}

.rc-order {
    padding: 8px 28px 22px;
}

.rc-order > h2 {
    margin: 0 0 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0F172A;
}

.rc-table-wrap {
    border: 1px solid #EEF2F7;
    border-radius: 14px;
    overflow: hidden;
}

.rc-table {
    width: 100%;
    border-collapse: collapse;
}

.rc-table th {
    background: #F8FAFC;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #64748B;
    text-align: left;
    border-bottom: 1px solid #EEF2F7;
}

.rc-table th:last-child,
.rc-table td:last-child {
    text-align: right;
}

.rc-table td {
    padding: 16px 14px;
    font-size: 13px;
    color: #334155;
    vertical-align: middle;
    border-bottom: 1px solid #F1F5F9;
}

.rc-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.rc-item-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(145deg, #DBEAFE, #E0E7FF);
    color: #3B5BFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rc-item-ico svg {
    width: 20px;
    height: 20px;
}

.rc-item strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 4px;
}

.rc-item em {
    display: inline-block;
    margin: 0 0 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
}

.rc-item p {
    margin: 0;
    font-size: 12px;
    color: #64748B;
    line-height: 1.4;
}

.rc-totals {
    max-width: 320px;
    margin: 14px 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rc-total-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
    color: #64748B;
}

.rc-total-row strong {
    color: #0F172A;
    font-weight: 600;
}

.rc-total-row.is-grand {
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #F1F5F9;
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
}

.rc-total-row.is-grand strong {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #3B5BFF;
}

.rc-thanks {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 28px 18px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.16);
    color: #047857;
}

.rc-thanks svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.rc-thanks p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
}

.rc-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 28px;
    background: #EEF2FF;
    border-top: 1px solid #E0E7FF;
}

.rc-help strong {
    display: block;
    font-size: 13px;
    color: #0F172A;
    margin-bottom: 2px;
}

.rc-help span {
    font-size: 12px;
    color: #64748B;
}

.rc-help-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.rc-help-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #3B5BFF;
    text-decoration: none;
}

.rc-help-links svg {
    width: 14px;
    height: 14px;
}

@media screen and (max-width: 767.98px) {
    .rc-main {
        padding: 14px 0 40px;
    }

    .rc-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 14px;
    }

    .rc-toolbar .fj-breadcrumb {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .rc-toolbar-actions {
        margin-left: 0;
        width: 100%;
    }

    .rc-toolbar-actions .rc-btn-ghost,
    .rc-toolbar-actions .rc-btn-primary {
        flex: 1;
        justify-content: center;
    }

    .rc-sheet {
        border-radius: 14px;
    }

    .rc-head {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px 18px 18px;
        justify-items: center;
        text-align: center;
    }

    .rc-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        order: 1;
    }

    .rc-logo {
        margin-left: auto;
        margin-right: auto;
    }

    .rc-address {
        text-align: center;
    }

    .rc-center {
        order: 2;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .rc-center h1 {
        font-size: 1.3rem;
    }

    .rc-txn {
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        word-break: break-all;
    }

    .rc-meta {
        order: 3;
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 4px;
        border-top: 1px dashed #E2E8F0;
    }

    .rc-success-pill {
        margin-bottom: 10px;
    }

    .rc-meta-row {
        justify-content: center;
        width: 100%;
        gap: 8px;
        flex-wrap: wrap;
    }

    .rc-info {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px 16px 8px;
    }

    .rc-info-card {
        padding: 14px;
    }

    .rc-pay-list li {
        flex-wrap: wrap;
        gap: 4px 8px;
    }

    .rc-pay-list strong {
        text-align: left;
    }

    .rc-order {
        padding: 8px 16px 16px;
    }

    .rc-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .rc-table th:nth-child(2),
    .rc-table td:nth-child(2),
    .rc-table th:nth-child(3),
    .rc-table td:nth-child(3) {
        display: none;
    }

    .rc-table th,
    .rc-table td {
        padding: 12px 12px;
    }

    .rc-item {
        gap: 10px;
    }

    .rc-item-ico {
        width: 38px;
        height: 38px;
    }

    .rc-totals {
        max-width: none;
        width: 100%;
        margin-top: 12px;
    }

    .rc-thanks {
        margin: 0 16px 14px;
        padding: 12px 14px;
    }

    .rc-help {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
    }

    .rc-help-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media print {
    @page {
        size: A4;
        margin: 10mm;
    }

    html,
    body.rc-page {
        background: #fff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    .top-bar,
    .main-header,
    .rc-toolbar,
    .site-footer,
    .mobile-drawer,
    .profile-sheet,
    .offcanvas {
        display: none !important;
    }

    .rc-main {
        padding: 0 !important;
        margin: 0 !important;
    }

    .rc-main > .container-fluid {
        padding: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .rc-sheet {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        overflow: visible !important;
        break-inside: avoid;
        page-break-inside: avoid;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .rc-head {
        display: grid !important;
        grid-template-columns: 1fr 1.1fr 1fr !important;
        gap: 12px !important;
        align-items: start !important;
        padding: 18px 20px 14px !important;
        border-bottom: 1px solid #EEF2F7 !important;
    }

    .rc-logo {
        height: 34px !important;
        margin-bottom: 6px !important;
    }

    .rc-tagline {
        color: #3B5BFF !important;
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }

    .rc-address {
        font-size: 11px !important;
        line-height: 1.45 !important;
        color: #64748B !important;
    }

    .rc-center {
        text-align: center !important;
    }

    .rc-check {
        width: 48px !important;
        height: 48px !important;
        margin: 0 auto 8px !important;
        border-radius: 50% !important;
        background: linear-gradient(145deg, #34D399, #059669) !important;
        color: #fff !important;
        box-shadow: none !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .rc-check svg {
        width: 24px !important;
        height: 24px !important;
        stroke: #fff !important;
        color: #fff !important;
    }

    .rc-center h1 {
        margin: 0 0 8px !important;
        font-size: 1.2rem !important;
        color: #059669 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .rc-txn {
        background: rgba(16, 185, 129, 0.12) !important;
        border: 1px solid rgba(16, 185, 129, 0.2) !important;
        color: #047857 !important;
        font-size: 11px !important;
        padding: 5px 10px !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .rc-txn strong {
        color: #065F46 !important;
    }

    .rc-meta {
        text-align: right !important;
    }

    .rc-success-pill {
        background: rgba(16, 185, 129, 0.12) !important;
        color: #059669 !important;
        margin-bottom: 8px !important;
        font-size: 11px !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .rc-meta-row {
        justify-content: flex-end !important;
        font-size: 11px !important;
        margin-bottom: 4px !important;
        color: #64748B !important;
    }

    .rc-meta-row strong {
        color: #0F172A !important;
    }

    .rc-info {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 14px 20px !important;
    }

    .rc-info-card {
        padding: 12px !important;
        border-radius: 10px !important;
        background: #F8FAFC !important;
        border: 1px solid #EEF2F7 !important;
        break-inside: avoid;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .rc-info-card h2 {
        font-size: 11px !important;
        margin-bottom: 8px !important;
        color: #64748B !important;
    }

    .rc-info-card h2 svg,
    .rc-info-card li svg {
        color: #3B5BFF !important;
        stroke: #3B5BFF !important;
    }

    .rc-info-card h3 {
        font-size: 0.95rem !important;
        color: #0F172A !important;
    }

    .rc-info-card > p,
    .rc-info-card li,
    .rc-pay-list span,
    .rc-pay-list strong {
        font-size: 11.5px !important;
    }

    .rc-pay-list strong.is-paid {
        color: #059669 !important;
    }

    .rc-pay-list strong.is-paid svg {
        color: #059669 !important;
        stroke: #059669 !important;
    }

    .rc-pay-list strong.is-amt {
        font-size: 0.95rem !important;
        color: #3B5BFF !important;
    }

    .rc-order {
        padding: 4px 20px 14px !important;
    }

    .rc-order > h2 {
        font-size: 0.95rem !important;
        margin-bottom: 8px !important;
        color: #0F172A !important;
    }

    .rc-table-wrap {
        border: 1px solid #EEF2F7 !important;
        border-radius: 10px !important;
        overflow: visible !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .rc-table th {
        background: #F8FAFC !important;
        padding: 8px 12px !important;
        font-size: 11px !important;
        color: #64748B !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .rc-table th:nth-child(2),
    .rc-table td:nth-child(2),
    .rc-table th:nth-child(3),
    .rc-table td:nth-child(3) {
        display: table-cell !important;
    }

    .rc-table td {
        padding: 10px 12px !important;
        font-size: 12px !important;
        color: #334155 !important;
    }

    .rc-item-ico {
        width: 34px !important;
        height: 34px !important;
        background: linear-gradient(145deg, #DBEAFE, #E0E7FF) !important;
        color: #3B5BFF !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .rc-item-ico svg {
        width: 16px !important;
        height: 16px !important;
        color: #3B5BFF !important;
        stroke: #3B5BFF !important;
    }

    .rc-item strong {
        font-size: 13px !important;
        color: #0F172A !important;
    }

    .rc-item em {
        background: rgba(16, 185, 129, 0.12) !important;
        color: #059669 !important;
        font-size: 10px !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .rc-item p {
        font-size: 11px !important;
        color: #64748B !important;
    }

    .rc-totals {
        max-width: 280px !important;
        margin: 10px 0 0 auto !important;
        gap: 6px !important;
    }

    .rc-total-row {
        font-size: 12px !important;
        color: #64748B !important;
    }

    .rc-total-row strong {
        color: #0F172A !important;
    }

    .rc-total-row.is-grand {
        padding: 10px 12px !important;
        background: #F1F5F9 !important;
        color: #0F172A !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .rc-total-row.is-grand strong {
        font-size: 1.15rem !important;
        color: #3B5BFF !important;
    }

    .rc-thanks {
        margin: 0 20px 12px !important;
        padding: 10px 12px !important;
        background: rgba(16, 185, 129, 0.1) !important;
        border: 1px solid rgba(16, 185, 129, 0.16) !important;
        color: #047857 !important;
        break-inside: avoid;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .rc-thanks svg {
        color: #059669 !important;
        stroke: #059669 !important;
    }

    .rc-thanks p {
        font-size: 12px !important;
    }

    .rc-help {
        padding: 12px 20px !important;
        background: #EEF2FF !important;
        border-top: 1px solid #E0E7FF !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .rc-help strong {
        font-size: 12px !important;
        color: #0F172A !important;
    }

    .rc-help span {
        font-size: 11px !important;
        color: #64748B !important;
    }

    .rc-help-links a {
        font-size: 12px !important;
        color: #3B5BFF !important;
    }

    .rc-help-links svg {
        color: #3B5BFF !important;
        stroke: #3B5BFF !important;
    }
}