```css
/* =========================================================
   SHYAM WORKEDGE
   COMPLETE WEBSITE STYLESHEET
   ---------------------------------------------------------
   Brand: Recruitment / Staffing / HR Solutions
   Style: Clean, Modern, Premium
   Theme: Purple + Pink
   Responsive: Desktop / Tablet / Mobile
   ========================================================= */


/* =========================================================
   1. RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    font-family:
        Poppins,
        Inter,
        Arial,
        sans-serif;

    color: #171327;

    background: #ffffff;

    line-height: 1.6;
}

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

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

button,
input,
select,
textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
}


/* =========================================================
   2. BRAND VARIABLES
   ========================================================= */

:root {

    /* Main brand colors */
    --purple-dark: #24134f;
    --purple: #5c45aa;
    --purple-light: #7d3fc0;
    --pink: #a02bb9;

    /* Navigation */
    --navy: #24134f;

    /* Text */
    --text: #171327;
    --muted: #6d687c;
    --light-text: #8a8498;

    /* Backgrounds */
    --soft-bg: #faf9ff;
    --purple-bg: #f7f3ff;

    /* White */
    --white: #ffffff;

    /* Borders */
    --line: #e9e5f1;
    --border: #e9e5f1;

    /* Status */
    --green: #087d5a;
    --red: #b72c47;
    --orange: #c77700;

    /* Shadows */
    --shadow-sm:
        0 8px 25px rgba(45, 20, 100, 0.06);

    --shadow:
        0 18px 55px rgba(45, 20, 100, 0.10);

    --shadow-lg:
        0 25px 75px rgba(45, 20, 100, 0.15);

    /* Radius */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
}


/* =========================================================
   3. CONTAINER
   ========================================================= */

.container {
    width: min(1180px, 92%);

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   4. HEADER
   ========================================================= */

.header {
    position: sticky;

    top: 0;

    z-index: 100;

    background:
        rgba(255, 255, 255, 0.96);

    border-bottom:
        1px solid var(--line);

    backdrop-filter:
        blur(14px);
}

.nav {
    min-height: 68px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    position: relative;
}


/* =========================================================
   5. LOGO
   ========================================================= */

.brand {
    display: flex;

    align-items: center;

    flex-shrink: 0;
}

.brand img {
    width: 90px;

    height: 44px;

    object-fit: contain;
}


/* =========================================================
   6. DESKTOP NAVIGATION
   ========================================================= */

.main-nav,
.nav nav {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 22px;
}

.main-nav > a,
.nav nav > a {
    position: relative;

    font-size: 12px;

    font-weight: 650;

    color: #302c3c;

    padding: 8px 0;

    transition:
        color 0.2s ease;
}

.main-nav > a:hover,
.nav nav > a:hover {
    color: var(--purple);
}


/* =========================================================
   7. NAVIGATION UNDERLINE
   ========================================================= */

.main-nav > a:not(.nav-cta):not(.login-link)::after,
.nav nav > a:not(.nav-cta):not(.login-link)::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 2px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--purple),
            var(--pink)
        );

    transition:
        width 0.25s ease;
}

.main-nav > a:not(.nav-cta):not(.login-link):hover::after,
.nav nav > a:not(.nav-cta):not(.login-link):hover::after {
    width: 100%;
}


/* =========================================================
   8. CANDIDATE LOGIN BUTTON
   ========================================================= */

.login-link {
    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    padding: 10px 15px !important;

    border:
        1px solid #ddd6ee;

    border-radius: 10px;

    color: var(--purple) !important;

    background: #ffffff;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.login-link:hover {
    background: #faf7ff;

    border-color: #bca9df;

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 20px rgba(92, 69, 170, 0.10);
}


/* =========================================================
   9. HIRE TALENT NAV BUTTON
   ========================================================= */

.nav-cta {
    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 11px 18px !important;

    border-radius: 12px;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #5c45aa 0%,
            #7d3fc0 55%,
            #a02bb9 100%
        );

    box-shadow:
        0 8px 22px rgba(92, 69, 170, 0.22);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.nav-cta:hover {
    color: #ffffff !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 13px 30px rgba(92, 69, 170, 0.32);
}

.nav-cta span {
    transition:
        transform 0.2s ease;
}

.nav-cta:hover span {
    transform:
        translateX(3px);
}


/* =========================================================
   10. MOBILE MENU BUTTON
   ========================================================= */

.menu {
    display: none;

    width: 44px;

    height: 44px;

    padding: 0;

    border: 1px solid var(--line);

    border-radius: 12px;

    background: #ffffff;

    color: var(--navy);

    font-size: 22px;

    line-height: 1;
}

.menu:hover {
    background: var(--purple-bg);
}


/* =========================================================
   11. FLASH MESSAGES
   ========================================================= */

.flash {
    position: fixed;

    top: 95px;

    right: 22px;

    z-index: 200;

    max-width: 380px;

    padding: 13px 18px;

    border-radius: 12px;

    background: var(--purple-dark);

    color: #ffffff;

    font-size: 13px;

    box-shadow:
        var(--shadow);
}

.flash.error {
    background: var(--red);
}

.flash.success {
    background: var(--green);
}


/* =========================================================
   12. GENERAL BUTTON SYSTEM
   ========================================================= */

/*
   BUTTON USAGE

   Main action:
   class="btn primary"

   Secondary:
   class="btn outline"

   Full width:
   class="btn primary full"

   New preferred names also work:
   class="btn btn-primary"
   class="btn btn-outline"
   class="btn btn-full"
*/


.btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 50px;

    padding: 0 22px;

    border: 0;

    border-radius: 12px;

    font-size: 13px;

    font-weight: 800;

    line-height: 1;

    cursor: pointer;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}


/* =========================================================
   13. PRIMARY BUTTON
   ========================================================= */

.btn.primary,
.btn-primary,
.primary {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #5c45aa,
            #7d3fc0 55%,
            #a02bb9
        );

    box-shadow:
        0 8px 24px rgba(92, 69, 170, 0.22);
}

.btn.primary:hover,
.btn-primary:hover,
.primary:hover {

    color: #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 32px rgba(92, 69, 170, 0.32);
}


/* =========================================================
   14. OUTLINE BUTTON
   ========================================================= */

.btn.outline,
.btn-outline,
.outline {

    color: var(--navy);

    background: #ffffff;

    border:
        1px solid #dcd5ea;

    box-shadow: none;
}

.btn.outline:hover,
.btn-outline:hover,
.outline:hover {

    color: var(--purple);

    background: #faf8ff;

    border-color:
        #bca9df;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 22px rgba(92, 69, 170, 0.08);
}


/* =========================================================
   15. FULL WIDTH BUTTON
   ========================================================= */

.btn.full,
.btn-full,
.full {
    width: 100%;
}


/* =========================================================
   16. BUTTON ARROW
   ========================================================= */

.button-arrow {
    display: inline-block;

    font-size: 17px;

    transition:
        transform 0.2s ease;
}

.btn:hover .button-arrow {
    transform:
        translateX(4px);
}


/* =========================================================
   17. SIGN IN BUTTON
   ========================================================= */

.sign-in-btn {
    min-height: 56px;

    margin-top: 8px;

    border-radius: 14px;

    font-size: 14px;

    letter-spacing: 0.1px;
}

.sign-in-btn .button-arrow {
    font-size: 18px;
}


/* =========================================================
   18. HERO SECTION
   ========================================================= */

.sw-hero {
    position: relative;
    overflow: hidden;

    min-height: 680px;

    padding:
        35px 0 70px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(155, 139, 231, 0.65),
            transparent 27%
        ),

        radial-gradient(
            circle at 98% 0%,
            rgba(37, 16, 94, 0.70),
            transparent 35%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(195, 35, 181, 0.55),
            transparent 30%
        ),

        linear-gradient(
            125deg,
            #5748ba 0%,
            #6441bf 38%,
            #7938c2 66%,
            #982bb7 100%
        );
}

.sw-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.05),
            transparent 30%,
            rgba(36,19,79,0.08)
        );

    pointer-events: none;
}

.sw-hero-inner {

    position: relative;

    z-index: 1;

    text-align: center;
}


/* =========================================================
   19. HERO EYEBROW
   ========================================================= */

.sw-eyebrow {

    margin-bottom: 18px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;

    opacity: 0.85;
}


/* =========================================================
   20. HERO TITLE
   ========================================================= */

.sw-hero h1 {

    max-width: 1000px;

    margin:
        0 auto;

    font-size:
        clamp(45px, 6vw, 78px);

    line-height: 1.06;

    font-weight: 700;

    letter-spacing: -2.5px;
}

.sw-hero h1 span {
    font-weight: 500;
}


/* =========================================================
   21. HERO DESCRIPTION
   ========================================================= */

.sw-hero-sub {

    max-width: 820px;

    margin:
        30px auto 0;

    font-size:
        clamp(17px, 2vw, 24px);

    line-height: 1.55;

    font-weight: 400;

    color:
        rgba(255,255,255,0.91);
}


/* =========================================================
   22. HERO BUTTONS
   ========================================================= */

.sw-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 36px;
}

.sw-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 54px;

    padding:
        0 28px;

    border-radius: 16px;

    font-size: 14px;

    font-weight: 700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.sw-btn:hover {
    transform:
        translateY(-2px);
}


/* White hero button */

.sw-btn-white {

    min-width: 190px;

    background: #ffffff;

    color: var(--text);

    box-shadow:
        0 14px 34px rgba(29,10,70,0.20);
}

.sw-btn-white:hover {
    color: var(--text);

    box-shadow:
        0 18px 40px rgba(29,10,70,0.26);
}


/* Ghost hero button */

.sw-btn-ghost {

    border:
        1px solid rgba(255,255,255,0.42);

    background:
        rgba(255,255,255,0.08);

    color: #ffffff;

    backdrop-filter:
        blur(8px);
}

.sw-btn-ghost:hover {
    color: #ffffff;

    background:
        rgba(255,255,255,0.14);
}


/* Purple hero button */

.sw-btn-purple {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--pink)
        );

    box-shadow:
        0 12px 30px rgba(93,53,180,0.25);
}


/* Purple outline */

.sw-btn-outline-purple {

    color: var(--purple);

    background: #ffffff;

    border:
        1px solid #d9d0ef;
}


/* =========================================================
   23. HERO PROOF BADGES
   ========================================================= */

.sw-proof {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 25px;

    font-size: 11px;

    opacity: 0.92;
}

.sw-proof span {

    padding:
        7px 12px;

    border:
        1px solid rgba(255,255,255,0.18);

    border-radius: 999px;

    background:
        rgba(255,255,255,0.07);
}


/* =========================================================
   24. SERVICE CARDS
   ========================================================= */

.sw-service-wrap {

    position: relative;

    z-index: 2;

    margin-top: 65px;
}

.sw-service-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 16px;
}

.sw-service-card {

    min-height: 260px;

    padding: 28px 24px;

    border:
        1px solid rgba(255,255,255,0.17);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.17),
            rgba(255,255,255,0.07)
        );

    box-shadow:
        0 20px 50px rgba(42,12,91,0.16);

    backdrop-filter:
        blur(12px);

    color: #ffffff;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.sw-service-card:hover {

    transform:
        translateY(-7px);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.23),
            rgba(255,255,255,0.10)
        );

    box-shadow:
        0 25px 60px rgba(42,12,91,0.22);
}


/* Service icon */

.sw-service-icon {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    border-radius: 13px;

    background:
        rgba(255,255,255,0.15);

    font-size: 11px;

    font-weight: 800;
}

.sw-service-card h2 {

    margin:
        0 0 12px;

    font-size: 19px;

    line-height: 1.35;
}

.sw-service-card p {

    margin: 0;

    font-size: 12px;

    line-height: 1.75;

    color:
        rgba(255,255,255,0.85);
}

.sw-card-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 20px;

    font-size: 12px;

    font-weight: 700;
}

.sw-card-link b {
    font-size: 16px;

    transition:
        transform 0.2s ease;
}

.sw-card-link:hover b {
    transform:
        translateX(4px);
}


/* =========================================================
   25. WHITE SECTION
   ========================================================= */

.sw-white-section {

    padding:
        95px 0;

    background:
        #ffffff;
}


/* =========================================================
   26. SECTION INTRO
   ========================================================= */

.sw-section-intro {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 45px;
}

.sw-section-intro > div {
    max-width: 700px;
}

.sw-label {

    margin-bottom: 11px;

    color: var(--purple);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}

.sw-section-intro h2 {

    margin: 0;

    font-size:
        clamp(31px, 4vw, 50px);

    line-height: 1.12;

    letter-spacing: -1.5px;
}

.sw-section-intro > p {

    max-width: 420px;

    margin: 0;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   27. FEATURE GRID
   ========================================================= */

.sw-feature-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;
}

.sw-feature-grid article {

    min-height: 220px;

    padding: 27px;

    border:
        1px solid var(--border);

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        var(--shadow-sm);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.sw-feature-grid article:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 16px 40px rgba(52,31,104,0.09);
}

.sw-feature-num {

    margin-bottom: 30px;

    color: var(--purple);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;
}

.sw-feature-grid h3 {

    margin:
        0 0 9px;

    font-size: 19px;

    line-height: 1.35;
}

.sw-feature-grid p {

    margin: 0;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.75;
}


/* =========================================================
   28. DARK TECHNOLOGY SECTION
   ========================================================= */

.sw-dark-section {

    padding:
        95px 0;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #211147,
            #35156d 52%,
            #4b1c76
        );
}

.sw-light .sw-label {
    color: #c9b9ff;
}

.sw-light > p {
    color: #d7d0e4;
}

.sw-tech-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;
}

.sw-tech-grid div {

    padding: 23px;

    border:
        1px solid rgba(255,255,255,0.11);

    border-radius: 18px;

    background:
        rgba(255,255,255,0.07);

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.sw-tech-grid div:hover {

    transform:
        translateY(-3px);

    background:
        rgba(255,255,255,0.10);
}

.sw-tech-grid strong {

    display: block;

    font-size: 14px;
}

.sw-tech-grid span {

    display: block;

    margin-top: 7px;

    color: #c8bfd8;

    font-size: 11px;
}


/* =========================================================
   29. CTA SECTION
   ========================================================= */

.sw-cta-section {

    padding:
        90px 0;

    background:
        #fbfaff;
}

.sw-cta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;
}

.sw-cta h2 {

    max-width: 720px;

    margin: 0;

    font-size:
        clamp(30px, 4vw, 46px);

    line-height: 1.15;

    letter-spacing: -1px;
}

.sw-cta .sw-actions {

    margin: 0;

    justify-content: flex-start;
}


/* =========================================================
   30. PAGE HEADER
   ========================================================= */

.page-head {

    padding:
        70px 0 45px;

    border-bottom:
        1px solid var(--border);

    background:
        linear-gradient(
            135deg,
            #f6f2ff,
            #ffffff
        );
}

.page-head h1 {

    margin:
        0 0 10px;

    font-size:
        clamp(36px, 5vw, 58px);

    line-height: 1.1;

    letter-spacing: -1.5px;
}

.page-head p {

    margin: 0;

    color: var(--muted);

    font-size: 14px;
}

.eyebrow {

    margin-bottom: 10px;

    color: var(--purple);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* =========================================================
   31. SEARCH BAR
   ========================================================= */

.searchbar {

    display: grid;

    grid-template-columns:
        1.5fr 1fr 1fr auto;

    gap: 10px;

    margin-bottom: 28px;
}

.searchbar input,
.searchbar select,
.form input,
.form textarea {

    width: 100%;

    padding:
        13px 14px;

    border:
        1px solid #dfd9ec;

    border-radius: 12px;

    outline: none;

    background:
        #ffffff;

    color:
        var(--text);

    font-size: 13px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.searchbar input:focus,
.searchbar select:focus,
.form input:focus,
.form textarea:focus {

    border-color:
        #8a6cdb;

    box-shadow:
        0 0 0 4px
        rgba(104,66,196,0.09);
}


/* =========================================================
   32. JOB LIST
   ========================================================= */

.job-list {

    display: flex;

    flex-direction: column;

    gap: 14px;
}

.job-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 22px;

    padding: 24px;

    border:
        1px solid var(--border);

    border-radius: 18px;

    background:
        #ffffff;

    box-shadow:
        var(--shadow-sm);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.job-card:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 14px 35px rgba(48,27,98,0.08);
}

.job-card h2 {

    margin:
        8px 0;

    font-size: 20px;

    line-height: 1.35;
}

.job-card p {

    margin: 0;

    color: var(--muted);

    font-size: 12px;
}


/* =========================================================
   33. TAGS
   ========================================================= */

.tag {

    display: inline-block;

    margin-right: 6px;

    padding:
        5px 10px;

    border-radius: 999px;

    background:
        #f0eaff;

    color:
        var(--purple);

    font-size: 9px;

    font-weight: 800;
}

.muted {

    color:
        var(--muted);

    font-size:
        11px;
}

.skills {

    color:
        #5c566a;

    font-size:
        11px;
}


/* =========================================================
   34. JOB DETAIL
   ========================================================= */

.job-detail {

    display: grid;

    grid-template-columns:
        1.6fr 0.8fr;

    gap: 28px;
}

.job-detail article {

    padding:
        30px;

    border:
        1px solid var(--border);

    border-radius:
        20px;

    background:
        #ffffff;
}

.job-detail article h2 {

    margin-top: 0;

    font-size: 22px;

    line-height: 1.35;
}

.job-detail article h2:not(:first-child) {
    margin-top: 35px;
}


/* =========================================================
   35. APPLY BOX
   ========================================================= */

.apply-box,
.profile-card {

    height:
        max-content;

    padding:
        28px;

    border-radius:
        20px;

    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            #2a1558,
            #51209a
        );

    box-shadow:
        var(--shadow);
}

.apply-box p,
.profile-card p {

    color:
        #d6cce6;

    font-size:
        12px;
}

.apply-box .primary {

    color:
        var(--purple-dark);

    background:
        #ffffff;

    box-shadow:
        none;
}

.apply-box .text-link,
.profile-card .text-link {

    color:
        #d4c6ff;

    font-size:
        12px;
}


/* =========================================================
   36. AUTHENTICATION PAGE
   ========================================================= */

.auth {

    display:
        flex;

    justify-content:
        center;

    padding:
        70px 0;

    background:
        linear-gradient(
            135deg,
            #f7f2ff,
            #ffffff
        );
}

.auth-box {

    width:
        min(760px, 100%);

    padding:
        38px;

    border:
        1px solid var(--border);

    border-radius:
        24px;

    background:
        #ffffff;

    box-shadow:
        0 20px 60px rgba(54,31,111,0.10);
}

.auth-box.wide {
    width:
        min(900px, 100%);
}

.auth-box h1 {

    margin:
        0 0 10px;

    font-size:
        36px;

    line-height:
        1.15;

    letter-spacing:
        -1px;
}

.auth-box > p {

    color:
        var(--muted);

    font-size:
        13px;
}


/* =========================================================
   37. FORM
   ========================================================= */

.form {

    padding:
        28px;

    border:
        1px solid var(--border);

    border-radius:
        20px;

    background:
        #ffffff;
}

.form.plain {

    padding:
        15px 0;

    border:
        0;
}

.form label {

    display:
        block;

    margin-bottom:
        17px;

    color:
        #393344;

    font-size:
        11px;

    font-weight:
        800;
}

.form input,
.form textarea {

    display:
        block;

    margin-top:
        7px;
}

.form textarea {

    min-height:
        130px;

    resize:
        vertical;
}

.two {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;
}


/* =========================================================
   38. DASHBOARD
   ========================================================= */

.dash-grid {

    display:
        grid;

    grid-template-columns:
        1.6fr 0.7fr;

    gap:
        28px;
}

.dash-head {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;
}

.dash-head h2 {

    margin:
        0;

    font-size:
        27px;
}

.application {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin:
        10px 0;

    padding:
        20px;

    border:
        1px solid var(--border);

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        var(--shadow-sm);
}

.application h3 {

    margin:
        8px 0 2px;

    font-size:
        16px;
}

.application p {

    margin:
        0;

    font-size:
        11px;
}

.empty {

    padding:
        50px;

    text-align:
        center;

    border:
        1px dashed #d6cdea;

    border-radius:
        18px;

    background:
        #fcfbff;
}

.small {

    color:
        var(--muted);

    font-size:
        11px;
}


/* =========================================================
   39. SPLIT CONTENT
   ========================================================= */

.prose {

    font-size:
        14px;

    line-height:
        1.8;
}

.split-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1.2fr;

    gap:
        50px;

    align-items:
        start;
}

.split-grid h2 {

    margin-top:
        0;

    font-size:
        38px;

    line-height:
        1.15;

    letter-spacing:
        -1px;
}

.split-grid li {

    margin:
        9px 0;

    color:
        #575064;

    font-size:
        13px;
}


/* =========================================================
   40. FOOTER
   ========================================================= */

.site-footer {

    padding:
        48px 0;

    background:
        #1b0d38;

    color:
        #c9c1d8;
}

.footer-grid {

    display:
        grid;

    grid-template-columns:
        1.4fr 1fr 1fr;

    gap:
        30px;

    align-items:
        end;
}

.footer-brand {

    color:
        #ffffff;

    font-size:
        20px;

    font-weight:
        800;
}

.footer-brand span {
    font-weight:
        400;
}

.site-footer p {

    margin:
        8px 0;

    font-size:
        11px;

    line-height:
        1.7;
}

.footer-links {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;

    font-size:
        11px;
}

.footer-links a {

    color:
        #c9c1d8;

    transition:
        color 0.2s ease;
}

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

.footer-copy {

    text-align:
        right;

    font-size:
        10px;
}


/* =========================================================
   41. GENERIC SECTION
   ========================================================= */

.section {
    padding:
        80px 0;
}

.section.compact {
    padding:
        60px 0;
}


/* =========================================================
   42. TEXT LINKS
   ========================================================= */

.text-link {

    color:
        var(--purple);

    font-weight:
        700;

    transition:
        color 0.2s ease;
}

.text-link:hover {
    color:
        var(--pink);
}


/* =========================================================
   43. SUCCESS / ERROR STATES
   ========================================================= */

.success {
    color:
        var(--green);
}

.error {
    color:
        var(--red);
}


/* =========================================================
   44. RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .main-nav,
    .nav nav {
        gap:
            14px;
    }

    .main-nav > a,
    .nav nav > a {
        font-size:
            11px;
    }

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

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

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


/* =========================================================
   45. RESPONSIVE - MOBILE NAV
   ========================================================= */

@media (max-width: 900px) {

    .nav {
        min-height:
            78px;
    }

    .brand img {
        width:
            130px;

        height:
            60px;
    }

    .menu {
        display:
            flex;

        align-items:
            center;

        justify-content:
            center;
    }

    /*
       IMPORTANT:
       Your existing JavaScript uses
       .mobile-open
    */

    .main-nav,
    .nav nav {

        display:
            none;

        position:
            absolute;

        top:
            78px;

        left:
            0;

        right:
            0;

        z-index:
            100;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            5px;

        padding:
            15px;

        border:
            1px solid var(--border);

        border-radius:
            0 0 18px 18px;

        background:
            #ffffff;

        box-shadow:
            0 20px 45px rgba(22,35,67,0.12);
    }

    .main-nav.mobile-open,
    .nav nav.mobile-open {
        display:
            flex;
    }

    .main-nav > a,
    .nav nav > a {

        padding:
            12px;

        font-size:
            13px;

        border-radius:
            10px;
    }

    .main-nav > a:hover,
    .nav nav > a:hover {
        background:
            #faf7ff;
    }

    .login-link,
    .nav-cta {

        width:
            100%;

        text-align:
            center;

        justify-content:
            center;
    }
}


/* =========================================================
   46. RESPONSIVE - TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 820px) {

    .sw-hero {

        min-height:
            auto;

        padding:
            60px 0 70px;
    }

    .sw-hero h1 {
        letter-spacing:
            -1.5px;
    }

    .sw-service-wrap {
        margin-top:
            50px;
    }

    .sw-section-intro {

        display:
            block;
    }

    .sw-section-intro > p {

        margin-top:
            18px;
    }

    .sw-cta {

        display:
            block;
    }

    .sw-cta .sw-actions {

        margin-top:
            25px;
    }

    .searchbar {

        grid-template-columns:
            1fr 1fr;
    }

    .job-detail,
    .dash-grid,
    .split-grid {

        grid-template-columns:
            1fr;
    }

    .footer-grid {

        grid-template-columns:
            1fr;
    }

    .footer-copy {

        text-align:
            left;
    }
}


/* =========================================================
   47. RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .container {

        width:
            92%;
    }

    .brand img {

        width:
            120px;

        height:
            58px;
    }


    /* Hero */

    .sw-hero {

        padding:
            45px 0 60px;
    }

    .sw-eyebrow {

        font-size:
            9px;

        letter-spacing:
            2px;
    }

    .sw-hero h1 {

        font-size:
            42px;

        letter-spacing:
            -1.2px;
    }

    .sw-hero-sub {

        margin-top:
            22px;

        font-size:
            16px;
    }


    /* Hero buttons */

    .sw-actions {

        width:
            100%;

        flex-direction:
            column;

        margin-top:
            27px;
    }

    .sw-btn {

        width:
            100%;

        min-height:
            52px;
    }


    /* Proof badges */

    .sw-proof {

        gap:
            7px;
    }

    .sw-proof span {

        font-size:
            9px;
    }


    /* Cards */

    .sw-service-grid,
    .sw-feature-grid,
    .sw-tech-grid {

        grid-template-columns:
            1fr;
    }

    .sw-service-card {

        min-height:
            220px;
    }


    /* Sections */

    .sw-white-section,
    .sw-dark-section {

        padding:
            65px 0;
    }

    .sw-section-intro h2,
    .sw-cta h2 {

        font-size:
            31px;
    }


    /* Page header */

    .page-head {

        padding:
            48px 0 32px;
    }


    /* Search */

    .searchbar {

        grid-template-columns:
            1fr;
    }


    /* Jobs */

    .job-card {

        display:
            block;
    }

    .job-card .btn,
    .job-card .primary,
    .job-card .outline {

        width:
            100%;

        margin-top:
            15px;
    }


    /* Forms */

    .auth {

        padding:
            45px 0;
    }

    .auth-box {

        padding:
            25px 20px;

        border-radius:
            18px;
    }

    .auth-box h1 {

        font-size:
            30px;
    }

    .form {

        padding:
            22px 18px;
    }

    .two {

        grid-template-columns:
            1fr;
    }


    /* Dashboard */

    .application {

        display:
            block;
    }


    /* Footer */

    .footer-links {

        margin:
            15px 0;
    }
}


/* =========================================================
   48. ACCESSIBILITY
   ========================================================= */

:focus-visible {

    outline:
        3px solid rgba(160,43,185,0.35);

    outline-offset:
        3px;
}


/* =========================================================
   49. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition:
            none !important;
            
            /* =========================================================
   CANDIDATE SIGN IN - FINAL DESIGN
   Put this at the VERY BOTTOM of style.css
   ========================================================= */

button.signin-btn {
    width: 100% !important;

    height: 58px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 12px !important;

    margin-top: 12px !important;

    padding: 0 24px !important;

    border: none !important;

    border-radius: 14px !important;

    outline: none !important;

    color: #ffffff !important;

    background: linear-gradient(
        135deg,
        #5c45aa 0%,
        #793fc1 50%,
        #b12bb7 100%
    ) !important;

    font-family: inherit !important;

    font-size: 15px !important;

    font-weight: 800 !important;

    letter-spacing: 0.2px !important;

    cursor: pointer !important;

    box-shadow:
        0 10px 25px rgba(92, 69, 170, 0.28) !important;

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

button.signin-btn:hover {
    transform:
        translateY(-3px) !important;

    filter:
        brightness(1.05) !important;

    box-shadow:
        0 16px 35px rgba(92, 69, 170, 0.38) !important;
}

button.signin-btn:active {
    transform:
        translateY(-1px) !important;

    box-shadow:
        0 8px 18px rgba(92, 69, 170, 0.25) !important;
}

.signin-text {
    display: inline-block;
}

.signin-arrow {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 27px;

    height: 27px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.18);

    font-size: 18px;

    line-height: 1;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

button.signin-btn:hover .signin-arrow {
    transform:
        translateX(5px);

    background:
        rgba(255, 255, 255, 0.25);
        
        
}
    }
}

/* =========================================================
   SIGN IN BUTTON
   Same design as Hire Talent
   ========================================================= */

.signin-btn {
    width: 100% !important;

    height: 52px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 0 24px !important;

    margin-top: 10px !important;

    border: none !important;

    border-radius: 14px !important;

    background: linear-gradient(
        135deg,
        #6546c7 0%,
        #a52bc0 100%
    ) !important;

    color: #ffffff !important;

    font-family: inherit !important;

    font-size: 15px !important;

    font-weight: 800 !important;

    cursor: pointer !important;

    box-shadow:
        0 10px 22px rgba(101, 70, 199, 0.22) !important;

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

.signin-btn:hover {
    color: #ffffff !important;

    transform: translateY(-2px) !important;

    filter: brightness(1.05) !important;

    box-shadow:
        0 14px 28px rgba(101, 70, 199, 0.30) !important;
}

.signin-btn:active {
    transform: translateY(0) !important;
}

.signin-text {
    color: #ffffff !important;
}

/* =========================================================
   SHYAM WORKEDGE - HEADER
   ========================================================= */

.site-header {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #eeeaf5;
    position: relative;
    z-index: 1000;
}

.header-inner {
    width: min(94%, 1280px);
    min-height: 106px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.site-logo img {
    width: 142px;
    height: auto;
    display: block;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.main-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.main-nav > a:not(.header-action-btn) {
    color: #302d3d;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.main-nav > a:not(.header-action-btn):hover {
    color: #7545c5;
    transform: translateY(-1px);
}


/* =========================================================
   HEADER BUTTONS
   Candidate + Hire Talent
   ========================================================= */

.header-action-btn {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    height: 53px;

    padding: 0 25px !important;

    border-radius: 14px !important;

    border: none !important;

    background:
        linear-gradient(
            135deg,
            #6546c7 0%,
            #a52bc0 100%
        ) !important;

    color: #ffffff !important;

    font-size: 14px !important;

    font-weight: 800 !important;

    text-decoration: none !important;

    box-shadow:
        0 10px 25px
        rgba(101, 70, 199, 0.22);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.header-action-btn:hover {
    color: #ffffff !important;

    transform:
        translateY(-2px);

    filter:
        brightness(1.04);

    box-shadow:
        0 15px 32px
        rgba(101, 70, 199, 0.30);
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.mobile-menu-btn {
    display: none;

    width: 44px;
    height: 44px;

    border: none;
    border-radius: 10px;

    background: #6546c7;

    color: #ffffff;

    font-size: 22px;

    cursor: pointer;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .header-inner {
        min-height: 82px;
    }

    .site-logo img {
        width: 125px;
    }

    .mobile-menu-btn {
        display: flex;

        align-items: center;
        justify-content: center;
    }

    .main-nav {
        display: none;

        position: absolute;

        top: 82px;

        left: 4%;
        right: 4%;

        padding: 20px;

        flex-direction: column;

        align-items: stretch;

        gap: 8px;

        background: #ffffff;

        border:
            1px solid #eeeaf5;

        border-radius: 18px;

        box-shadow:
            0 20px 50px
            rgba(45, 24, 90, 0.14);
    }

    .main-nav.open {
        display: flex;
    }

    .main-nav > a:not(.header-action-btn) {
        width: 100%;

        padding: 12px;

        text-align: center;
    }

    .header-action-btn {
        width: 100%;

        height: 50px;
    }
}


/* =========================================================
   GLOBAL BUTTON SYSTEM
   ========================================================= */

button,
.btn,
a.btn {
    font-family: inherit;
}


/* Primary buttons */

.btn.primary,
button.primary,
a.primary {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 0 24px;

    border: none !important;

    border-radius: 14px !important;

    background:
        linear-gradient(
            135deg,
            #6546c7,
            #a52bc0
        ) !important;

    color: #ffffff !important;

    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

    box-shadow:
        0 10px 25px
        rgba(101, 70, 199, 0.20);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.btn.primary:hover,
button.primary:hover,
a.primary:hover {
    color: #ffffff !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 32px
        rgba(101, 70, 199, 0.28);
}


/* =========================================================
   SIGN IN
   ========================================================= */

.signin-btn {
    width: 100% !important;

    height: 53px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 0 24px !important;

    margin-top: 10px !important;

    border: none !important;

    border-radius: 14px !important;

    background:
        linear-gradient(
            135deg,
            #6546c7 0%,
            #a52bc0 100%
        ) !important;

    color: #ffffff !important;

    font-family: inherit !important;

    font-size: 15px !important;

    font-weight: 800 !important;

    cursor: pointer !important;

    box-shadow:
        0 10px 25px
        rgba(101, 70, 199, 0.22) !important;

    appearance: none !important;

    -webkit-appearance: none !important;

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

.signin-btn:hover {
    background:
        linear-gradient(
            135deg,
            #6546c7 0%,
            #a52bc0 100%
        ) !important;

    color: #ffffff !important;

    transform:
        translateY(-2px) !important;

    filter:
        brightness(1.04) !important;

    box-shadow:
        0 15px 32px
        rgba(101, 70, 199, 0.30) !important;
}

.signin-btn:active {
    transform:
        translateY(0) !important;
}


/* =========================================================
   OTHER BUTTONS
   ========================================================= */

button[type="submit"]:not(.signin-btn),
button[type="button"],
input[type="submit"] {
    font-family: inherit;

    min-height: 50px;

    padding: 0 22px;

    border: none;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #6546c7,
            #a52bc0
        );

    color: #ffffff;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 9px 22px
        rgba(101, 70, 199, 0.20);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

button[type="submit"]:not(.signin-btn):hover,
button[type="button"]:hover,
input[type="submit"]:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 14px 30px
        rgba(101, 70, 199, 0.28);
        
}

.brand {
    display: flex;
    align-items: center;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.brand img {
    display: block;
    width: 150px;
    height: auto;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
}

/* ===== SMALLER HEADER ===== */

.header {
    padding: 8px 0 !important;
}

.header .nav {
    min-height: 60px !important;
}

.brand img {
    width: 105px !important;
    height: auto !important;
}


/* ===== REDUCE GAP BEFORE HERO ===== */

.sw-hero {
    margin-top: 0 !important;
    padding-top: 35px !important;
}
/* =========================================================
   END OF SHYAM WORKEDGE CSS
   ========================================================= */
```