/* ── External Assets ───────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');


/* ══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS  (all values live here — nowhere else)
══════════════════════════════════════════════════════════════ */
:root {

    /* ── Brand Palette ────────────────────────────────────────── */

    /* Primary — deep navy/indigo: authority, trust, career */
    --color-primary-50: #EEF0FB;
    --color-primary-100: #CDD2F4;
    --color-primary-200: #9FA9EC;
    --color-primary-300: #6B7BE0;
    --color-primary-400: #3E50D1;
    /* interactive default   */
    --color-primary-500: #2D3DBF;
    /* hover                 */
    --color-primary-600: #2030A8;
    /* pressed / active      */
    --color-primary-700: #1A2890;
    --color-primary-800: #111D6E;
    --color-primary-900: #0B1252;

    /* Accent — vivid amber: energy, opportunity, CTA */
    --color-accent-50: #FFF8E8;
    --color-accent-100: #FDEAB8;
    --color-accent-200: #FAD47A;
    --color-accent-300: #F5BC3A;
    --color-accent-400: #ECA400;
    /* CTA default           */
    --color-accent-500: #D49200;
    /* CTA hover             */
    --color-accent-600: #B87E00;
    --color-accent-700: #8F6100;
    --color-accent-800: #664600;
    --color-accent-900: #3D2A00;

    /* Neutral — warm gray (not blue-gray, not cool) */
    --color-neutral-0: #FFFFFF;
    --color-neutral-50: #F8F7F5;
    --color-neutral-100: #F0EEE9;
    --color-neutral-200: #E4E2DC;
    --color-neutral-300: #CCC9C0;
    --color-neutral-400: #A8A59B;
    --color-neutral-500: #82807A;
    --color-neutral-600: #5E5C57;
    --color-neutral-700: #3E3D39;
    --color-neutral-800: #272624;
    --color-neutral-900: #141311;

    /* Semantic — status colors */
    --color-success-light: #E6F6EE;
    --color-success: #1A9E5C;
    --color-success-dark: #0F6B3D;

    --color-warning-light: #FFF4E0;
    --color-warning: #D48800;
    --color-warning-dark: #9A6300;

    --color-danger-light: #FDEAEA;
    --color-danger: #D63B3B;
    --color-danger-dark: #9E2020;

    --color-info-light: #E8F2FD;
    --color-info: #2B7FD4;
    --color-info-dark: #1A5BA0;

    /* ── Surface / Background ─────────────────────────────────── */
    --bg-page: var(--color-neutral-50);
    /* outermost page bg  */
    --bg-surface: var(--color-neutral-0);
    /* cards, panels      */
    --bg-sunken: var(--color-neutral-100);
    /* inputs, code       */
    --bg-overlay: rgba(20, 19, 17, 0.48);
    /* modals backdrop    */
    --bg-primary-subtle: var(--color-primary-50);
    /* tinted sections    */
    --bg-accent-subtle: var(--color-accent-50);

    /* ── Text ─────────────────────────────────────────────────── */
    --text-primary: var(--color-neutral-900);
    --text-secondary: var(--color-neutral-600);
    --text-tertiary: var(--color-neutral-500);
    --text-placeholder: var(--color-neutral-400);
    --text-disabled: var(--color-neutral-400);
    --text-inverse: var(--color-neutral-0);
    --text-on-accent: var(--color-accent-900);
    /* text on amber bg   */
    --text-link: var(--color-primary-400);
    --text-link-hover: var(--color-primary-600);

    /* ── Border ───────────────────────────────────────────────── */
    --border-subtle: var(--color-neutral-200);
    /* cards, dividers    */
    --border-default: var(--color-neutral-300);
    /* inputs normal      */
    --border-strong: var(--color-neutral-400);
    /* inputs focused     */
    --border-primary: var(--color-primary-400);
    /* brand borders      */
    --border-accent: var(--color-accent-400);

    /* ── Typography ───────────────────────────────────────────── */
    --font-display: 'DM Sans', sans-serif;
    /* headings, logo, labels */
    --font-body: 'DM Sans', sans-serif;
    /* body, UI text          */
    --font-mono: 'DM Mono', 'Fira Code', monospace;

    /* Scale — Major Third (1.25) */
    --text-xs: 0.75rem;
    /*  12px */
    --text-sm: 0.875rem;
    /*  14px */
    --text-base: 1rem;
    /*  16px */
    --text-md: 1.125rem;
    /*  18px */
    --text-lg: 1.25rem;
    /*  20px */
    --text-xl: 1.5rem;
    /*  24px */
    --text-2xl: 1.875rem;
    /*  30px */
    --text-3xl: 2.25rem;
    /*  36px */
    --text-4xl: 3rem;
    /*  48px */

    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    --tracking-tight: -0.03em;
    --tracking-normal: 0em;
    --tracking-wide: 0.04em;
    --tracking-wider: 0.08em;

    /* ── Spacing ──────────────────────────────────────────────── */
    /* 4-pt base grid */
    --space-1: 0.25rem;
    /*  4px */
    --space-2: 0.5rem;
    /*  8px */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.25rem;
    /* 20px */
    --space-6: 1.5rem;
    /* 24px */
    --space-8: 2rem;
    /* 32px */
    --space-10: 2.5rem;
    /* 40px */
    --space-12: 3rem;
    /* 48px */
    --space-16: 4rem;
    /* 64px */
    --space-20: 5rem;
    /* 80px */
    --space-24: 6rem;
    /* 96px */

    /* Named semantic aliases */
    --gap-xs: var(--space-1);
    --gap-sm: var(--space-2);
    --gap-md: var(--space-4);
    --gap-lg: var(--space-6);
    --gap-xl: var(--space-8);
    --gap-2xl: var(--space-12);

    --padding-card: var(--space-6);
    /* inside cards       */
    --padding-card-sm: var(--space-4);
    /* compact cards      */
    --padding-section: var(--space-16);
    /* section vertical   */
    --padding-page-x: var(--space-6);
    /* page horizontal    */

    /* ── Border Radius ────────────────────────────────────────── */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-pill: 9999px;
    --radius-full: 50%;

    /* ── Shadows ──────────────────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(20, 19, 17, 0.06);
    --shadow-sm: 0 2px 6px rgba(20, 19, 17, 0.08);
    --shadow-md: 0 4px 14px rgba(20, 19, 17, 0.10);
    --shadow-lg: 0 8px 28px rgba(20, 19, 17, 0.12);
    --shadow-xl: 0 16px 48px rgba(20, 19, 17, 0.14);
    --shadow-primary: 0 4px 16px rgba(62, 80, 209, 0.25);
    --shadow-accent: 0 4px 16px rgba(236, 164, 0, 0.30);

    /* ── Transitions ──────────────────────────────────────────── */
    --transition-fast: 100ms ease;
    --transition-base: 180ms ease;
    --transition-slow: 300ms ease;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-index layers ───────────────────────────────────────── */
    --z-below: -1;
    --z-base: 0;
    --z-raised: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;

    /* ── Layout ───────────────────────────────────────────────── */
    --container-max: 1200px;
    /* main content max-width    */
    --container-wide: 1440px;
    /* full-bleed sections       */
    --sidebar-width: 280px;
    /* filter sidebar            */

    /* ── Component-specific ───────────────────────────────────── */

    /* Job Card */
    --card-border: 1px solid var(--border-subtle);
    --card-border-hover: 1px solid var(--border-primary);
    --card-radius: var(--radius-xl);
    --card-padding: var(--padding-card);
    --card-bg: var(--bg-surface);
    --card-bg-hover: var(--bg-primary-subtle);
    --card-shadow: var(--shadow-sm);
    --card-shadow-hover: var(--shadow-md);

    /* Badge / Tag */
    --badge-radius: var(--radius-pill);
    --badge-padding-x: var(--space-3);
    --badge-padding-y: var(--space-1);
    --badge-font-size: var(--text-xs);

    /* Button */
    --btn-height-sm: 32px;
    --btn-height-md: 40px;
    --btn-height-lg: 48px;
    --btn-padding-x-sm: var(--space-4);
    --btn-padding-x-md: var(--space-5);
    --btn-padding-x-lg: var(--space-6);
    --btn-radius: var(--radius-lg);
    --btn-font: var(--font-body);
    --btn-font-weight: var(--font-semibold);
    --btn-font-size: var(--text-sm);

    /* Input / Select */
    --input-height: 44px;
    --input-padding-x: var(--space-4);
    --input-radius: var(--radius-lg);
    --input-bg: var(--bg-surface);
    --input-border: 1px solid var(--border-default);
    --input-border-focus: 1px solid var(--border-primary);
    --input-font-size: var(--text-sm);

    /* Sidebar filter */
    --sidebar-bg: var(--bg-surface);
    --sidebar-border: 1px solid var(--border-subtle);
    --sidebar-section-gap: var(--space-6);

    /* Nav */
    --nav-height: 64px;
    --nav-bg: var(--bg-surface);
    --nav-border: 1px solid var(--border-subtle);
    --nav-shadow: var(--shadow-xs);
}


/* ══════════════════════════════════════════════════════════════
   2. DARK MODE  (auto via OS preference)
══════════════════════════════════════════════════════════════ */
/* @media (prefers-color-scheme: dark) {
    :root {
        --bg-page: #0F0F0D;
        --bg-surface: #1A1915;
        --bg-sunken: #111110;
        --bg-overlay: rgba(0, 0, 0, 0.65);
        --bg-primary-subtle: #1B1F42;
        --bg-accent-subtle: #2A200A;

        --text-primary: #F2F0EA;
        --text-secondary: #A8A59B;
        --text-tertiary: #7A7872;
        --text-placeholder: #5A5855;
        --text-disabled: #4A4845;
        --text-inverse: #141311;
        --text-link: #7B90F0;
        --text-link-hover: #9DADF5;

        --border-subtle: #2A2925;
        --border-default: #3A3835;
        --border-strong: #4E4C48;

        --card-bg-hover: #1B1F42;

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
        --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
        --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.40);
        --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.45);
        --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.50);
    }
} */


/* ══════════════════════════════════════════════════════════════
   3. RESET  (opinionated minimal reset)
══════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background-color: var(--bg-page);
    overflow-x: hidden;
}

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

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

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--transition-base);
}

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

button {
    cursor: pointer;
    border: none;
    background: none;
}

ul,
ol {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-body);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

h1 {
    font-size: var(--text-4xl);
}

h2 {
    font-size: var(--text-3xl);
}

h3 {
    font-size: var(--text-2xl);
}

h4 {
    font-size: var(--text-xl);
}

h5 {
    font-size: var(--text-lg);
}

h6 {
    font-size: var(--text-md);
}

p {
    line-height: var(--leading-relaxed);
}


/* ══════════════════════════════════════════════════════════════
   4. UTILITY CLASSES  (composable, BEM-free helpers)
══════════════════════════════════════════════════════════════ */

/* Layout */
.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--padding-page-x);
    width: 100%;
}

.main-job-body {
    padding-top: 3%;
}

.container--wide {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--padding-page-x);
}

/* Flexbox */
.flex {
    display: flex;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

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

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

.flex-wrap {
    flex-wrap: wrap;
}

.flex-1 {
    flex: 1 1 0%;
}

.items-center {
    align-items: center;
}

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

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

/* Grid */
.grid {
    display: grid;
}

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

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

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

/* Gap shorthands */
.gap-xs {
    gap: var(--gap-xs);
}

.gap-sm {
    gap: var(--gap-sm);
}

.gap-md {
    gap: var(--gap-md);
}

.gap-lg {
    gap: var(--gap-lg);
}

.gap-xl {
    gap: var(--gap-xl);
}

.gap-2xl {
    gap: var(--gap-2xl);
}

/* Spacing */
.mt-auto {
    margin-top: auto;
}

.ml-auto {
    margin-left: auto;
}

.mx-auto {
    margin-inline: auto;
}

/* Text utilities */
.text-xs {
    font-size: var(--text-xs);
}

.text-sm {
    font-size: var(--text-sm);
}

.text-base {
    font-size: var(--text-base);
}

.text-lg {
    font-size: var(--text-lg);
}

.text-xl {
    font-size: var(--text-xl);
}

.text-primary {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-tertiary {
    color: var(--text-tertiary);
}

.text-inverse {
    color: var(--text-inverse);
}

.text-accent {
    color: var(--color-accent-400);
}

.text-brand {
    color: var(--color-primary-400);
}

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

.text-danger {
    color: var(--color-danger);
}

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

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

.font-light {
    font-weight: var(--font-light);
}

.font-regular {
    font-weight: var(--font-regular);
}

.font-medium {
    font-weight: var(--font-medium);
}

.font-semibold {
    font-weight: var(--font-semibold);
}

.font-bold {
    font-weight: var(--font-bold);
}

.tracking-tight {
    letter-spacing: var(--tracking-tight);
}

.tracking-wide {
    letter-spacing: var(--tracking-wide);
}

.tracking-wider {
    letter-spacing: var(--tracking-wider);
}

.uppercase {
    text-transform: uppercase;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Visibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Divider */
.divider {
    height: 1px;
    background: var(--border-subtle);
    border: none;
    margin-block: var(--space-4);
}

/* Rounded */
.rounded-sm {
    border-radius: var(--radius-sm);
}

.rounded-md {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

.rounded-pill {
    border-radius: var(--radius-pill);
}

.rounded-full {
    border-radius: var(--radius-full);
}


/* ══════════════════════════════════════════════════════════════
   5. REUSABLE COMPONENT CLASSES
══════════════════════════════════════════════════════════════ */

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--btn-height-md);
    padding-inline: var(--btn-padding-x-md);
    border-radius: var(--btn-radius);
    font-family: var(--btn-font);
    font-weight: var(--btn-font-weight);
    font-size: var(--btn-font-size);
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color var(--transition-base),
        color var(--transition-base),
        box-shadow var(--transition-base),
        transform var(--transition-fast);
    white-space: nowrap;
}

.btn:active {
    transform: scale(0.98);
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary — dark navy */
.btn--primary {
    background: var(--color-primary-400);
    color: var(--text-inverse);
    border: 1px solid transparent;
}

.btn--primary:hover {
    background: var(--color-primary-500);
    box-shadow: var(--shadow-primary);
}

/* CTA — amber */
.btn--cta {
    background: var(--color-accent-400);
    color: var(--text-on-accent);
    border: 1px solid transparent;
}

.btn--cta:hover {
    background: var(--color-accent-500);
    box-shadow: var(--shadow-accent);
}

/* Outline */
.btn--outline {
    background: transparent;
    color: var(--color-primary-400);
    border: 1px solid var(--color-primary-400);
}

.btn--outline:hover {
    background: var(--bg-primary-subtle);
}

/* Ghost */
.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
}

.btn--ghost:hover {
    background: var(--bg-sunken);
    color: var(--text-primary);
}

/* Sizes */
.btn--sm {
    height: var(--btn-height-sm);
    padding-inline: var(--btn-padding-x-sm);
    font-size: var(--text-xs);
}

.btn--lg {
    height: var(--btn-height-lg);
    padding-inline: var(--btn-padding-x-lg);
    font-size: var(--text-base);
}

/* ── Badges / Tags ────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--badge-padding-y) var(--badge-padding-x);
    border-radius: var(--badge-radius);
    font-size: var(--badge-font-size);
    font-weight: var(--font-medium);
    font-family: var(--font-body);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.badge--primary {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    border: 1px solid var(--color-primary-200);
}

.badge--accent {
    background: var(--color-accent-100);
    color: var(--color-accent-700);
    border: 1px solid var(--color-accent-200);
}

.badge--success {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.badge--warning {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.badge--danger {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
}

.badge--neutral {
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
    border: 1px solid var(--color-neutral-200);
}

/* Dot indicator inside badge */
.badge::before {
    content: '';
    display: none;
    width: 5px;
    height: 5px;
    border-radius: var(--radius-full);
    background: currentColor;
    opacity: 0.7;
}

.badge--dot::before {
    display: block;
}

/* ── Form Elements ────────────────────────────────────────── */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

.form-input,
.form-select,
.form-textarea {
    height: var(--input-height);
    padding-inline: var(--input-padding-x);
    border-radius: var(--input-radius);
    border: var(--input-border);
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: var(--input-font-size);
    transition:
        border-color var(--transition-base),
        box-shadow var(--transition-base);
    width: 100%;
    outline: none;
}

.form-textarea {
    height: auto;
    padding-block: var(--space-3);
    resize: vertical;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-placeholder);
}

.form-input:hover,
.form-select:hover {
    border-color: var(--border-strong);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border: var(--input-border-focus);
    box-shadow: 0 0 0 3px rgba(62, 80, 209, 0.12);
}

/* Search input wrapper with icon */
.input-search {
    position: relative;
}

.input-search .form-input {
    padding-left: calc(var(--input-padding-x) * 2.5);
}

.input-search .input-icon {
    position: absolute;
    left: var(--input-padding-x);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
    font-size: 18px;
    display: flex;
    align-items: center;
}

/* Checkbox */
.form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-default);
    accent-color: var(--color-primary-400);
    cursor: pointer;
}

.form-checkbox span {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.4;
}

/* ── Card ─────────────────────────────────────────────────── */
.card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    box-shadow: var(--card-shadow);
    transition:
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        background-color var(--transition-base),
        transform var(--transition-base);
}

.card--interactive:hover {
    border: var(--card-border-hover);
    box-shadow: var(--card-shadow-hover);
    background: var(--card-bg-hover);
    transform: translateY(-2px);
    cursor: pointer;
}

.card--flat {
    box-shadow: none;
}

/* ── Avatar / Company Logo Placeholder ───────────────────── */
.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--bg-sunken);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    flex-shrink: 0;
    font-family: var(--font-body);
    font-weight: var(--font-bold);
    color: var(--color-primary-400);
}

.avatar--sm {
    width: 36px;
    height: 36px;
    font-size: var(--text-xs);
    border-radius: var(--radius-md);
}

.avatar--md {
    width: 48px;
    height: 48px;
    font-size: var(--text-sm);
}

.avatar--lg {
    width: 64px;
    height: 64px;
    font-size: var(--text-md);
    border-radius: var(--radius-xl);
}

.avatar--xl {
    width: 80px;
    height: 80px;
    font-size: var(--text-xl);
    border-radius: var(--radius-xl);
}

/* ── Section Heading ──────────────────────────────────────── */
.section-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-primary-400);
}

/* ── Skeleton Loader ──────────────────────────────────────── */
@keyframes skeleton-shimmer {
    0% {
        background-position: -400px 0;
    }

    100% {
        background-position: 400px 0;
    }
}

.skeleton {
    border-radius: var(--radius-md);
    background: linear-gradient(90deg,
            var(--color-neutral-200) 25%,
            var(--color-neutral-100) 50%,
            var(--color-neutral-200) 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.4s infinite linear;
}

/* ── Tooltip ──────────────────────────────────────────────── */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-neutral-800);
    color: var(--text-inverse);
    font-size: var(--text-xs);
    white-space: nowrap;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: var(--z-tooltip, 999);
}

[data-tooltip]:hover::after {
    opacity: 1;
}


/* ══════════════════════════════════════════════════════════════
   6. FOCUS VISIBLE  (keyboard accessibility)
══════════════════════════════════════════════════════════════ */
:focus-visible {
    outline: 2px solid var(--color-primary-400);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
    outline: none;
}


/* ══════════════════════════════════════════════════════════════
   7. SCROLLBAR  (subtle, on-brand)
══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-neutral-300);
    border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-neutral-400);
}


/* ══════════════════════════════════════════════════════════════
   8. SELECTION
══════════════════════════════════════════════════════════════ */
::selection {
    background: var(--color-primary-100);
    color: var(--color-primary-800);
}


/* ══════════════════════════════════════════════════════════════
   9. ANIMATION UTILITIES
══════════════════════════════════════════════════════════════ */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(16px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in {
    animation: fade-in var(--transition-slow) both;
}

.animate-scale-in {
    animation: scale-in var(--transition-slow) both;
}

.stagger-1 {
    animation-delay: 60ms;
}

.stagger-2 {
    animation-delay: 120ms;
}

.stagger-3 {
    animation-delay: 180ms;
}

.stagger-4 {
    animation-delay: 240ms;
}


/* ══════════════════════════════════════════════════════════════
   10. RESPONSIVE BREAKPOINTS
       Use these custom media queries throughout the site
══════════════════════════════════════════════════════════════ */
/*
  --bp-sm:  640px   (large phone / small tablet)
  --bp-md:  768px   (tablet)
  --bp-lg:  1024px  (small desktop)
  --bp-xl:  1280px  (desktop)
  --bp-2xl: 1536px  (large desktop)

  Usage:
    @media (max-width: 1024px) { ... }
    @media (min-width: 768px)  { ... }
*/

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    h1 {
        font-size: var(--text-3xl);
    }

    h2 {
        font-size: var(--text-2xl);
    }

    h3 {
        font-size: var(--text-xl);
    }

    .container {
        padding-inline: var(--space-4);
    }

    /* --sidebar-width: 100%; */
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }

    .container {
        padding-inline: var(--space-3);
    }
}










.main-preloader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Slide-up class triggered by JS */
.main-preloader-container.main-preloader-loaded {
    transform: translateY(-100%);
}

.main-preloader-wrapper {
    position: relative;
}

/* The white central circle */
.main-preloader-circle {
    width: 180px;
    height: 180px;
    /* background-color: #ffffff; */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
    position: relative;
}

.main-preloader-logo {
    padding: 10px;
    color: #4351CC;
    z-index: 2;
}

/* The rotating line/loader */
.main-preloader-spinner {
    position: absolute;
    width: 250px;
    /* Slightly larger than the circle */
    height: 250px;
    border: 4px solid transparent;
    border-top: 4px solid #4351CC;
    border-radius: 50%;
    animation: rotate-preloader 1.2s linear infinite;
}

@keyframes rotate-preloader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--space-8);
    background: rgba(248, 247, 245, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-subtle);
    z-index: 200;
}

.main-logo {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 20rem;
    width: fit-content;
}


.main-logo img {
    width: 10%;
}

.main-links a {
    padding: 10px 30px;
    background-color: var(--color-primary-400);
    color: #fff;
    border-radius: var(--radius-md);
}

.contact-link {
    padding: 10px 30px;
    background-color: var(--color-primary-400);
    color: #fff;
    border-radius: var(--radius-md);
}

@media(max-width: 768px) {
    .main-nav {
        padding: var(--space-3);
    }

    .main-logo {
        width: 25%;
    }

    .main-logo img {
        width: 100%;
    }
}

.menu-filter-wrapper {
    display: flex;
    gap: 30px;
}




/* main-menu__toggle: fixed button that opens/closes the sidebar on both desktop and mobile */
.main-menu__toggle {
    /* position: absolute;
    top: 16px;
    left: 16px; */
    z-index: 500;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: var(--color-neutral-0);
    border: 1px solid var(--color-neutral-200);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    box-shadow: 0 2px 6px rgba(20, 19, 17, 0.08);
}

.main-menu__toggle-absoulute {
    position: fixed;
    top: 2%;
    left: 5%;
}

@media(max-width: 768px) {
    .main-menu__toggle-absoulute {
        left: 85%;
    }
}

.main-menu__toggle:hover {
    border-color: var(--color-primary-200);
    box-shadow: 0 4px 12px rgba(62, 80, 209, 0.12);
}

/* main-menu__toggle-bar: one of three horizontal lines forming the hamburger icon */
.main-menu__toggle-bar {
    width: 18px;
    height: 2px;
    background: var(--color-neutral-700);
    border-radius: 2px;
    transition: transform var(--transition-slow), opacity var(--transition-base), width var(--transition-base);
    transform-origin: center;
}

/* main-menu__toggle-bar states when menu is open — animate to X shape */
.main-menu__toggle.main-menu__toggle--open .main-menu__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.main-menu__toggle.main-menu__toggle--open .main-menu__toggle-bar:nth-child(2) {
    opacity: 0;
    width: 0;
}

.main-menu__toggle.main-menu__toggle--open .main-menu__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ────────────────────────────────────────────────
       OVERLAY
    ──────────────────────────────────────────────── */

/* main-menu__overlay: full-screen dark backdrop shown behind sidebar on mobile */
.main-menu__overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(20, 19, 17, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
}

.main-menu__overlay.main-menu__overlay--visible {
    opacity: 1;
    pointer-events: all;
}

/* ────────────────────────────────────────────────
       SIDEBAR PANEL
    ──────────────────────────────────────────────── */

/* main-menu__sidebar: sliding panel that holds the brand, nav links, and footer */
.main-menu__sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 99999;
    width: var(--sidebar-width);
    background: var(--color-neutral-0);
    border-right: 1px solid var(--color-neutral-200);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    overflow: hidden;
}

.main-menu__sidebar.main-menu__sidebar--open {
    transform: translateX(0);
}

/* ────────────────────────────────────────────────
       SIDEBAR HEADER
    ──────────────────────────────────────────────── */

/* main-menu__header: top area of sidebar containing brand name and close button */
.main-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--color-neutral-100);
}

/* main-menu__brand: Jobza logo/name displayed at the top of the open sidebar */
.main-menu__header img {
    width: 50%;
}

/* main-menu__close: X button inside the sidebar header to close the menu */
.main-menu__close {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-neutral-500);
    font-size: 18px;
    line-height: 1;
    transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.main-menu__close:hover {
    background: var(--color-neutral-100);
    border-color: var(--color-neutral-200);
    color: var(--color-neutral-900);
}

/* ────────────────────────────────────────────────
       NAV
    ──────────────────────────────────────────────── */

/* main-menu__nav: scrollable navigation area holding all link groups */
.main-menu__nav {
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* main-menu__group: a labelled group of related nav links */
.main-menu__group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* main-menu__group-label: small uppercase label above each group of links */
.main-menu__group-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-neutral-400);
    padding: 0 10px;
    margin-bottom: 4px;
}

/* main-menu__link: individual navigation anchor link inside the sidebar */
.main-menu__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-neutral-600);
    transition: background var(--transition-base), color var(--transition-base);
}

.main-menu__link:hover {
    background: var(--color-primary-50);
    color: var(--color-primary-500);
}

/* main-menu__link--active: highlights the currently active page link */
.main-menu__link--active {
    background: var(--color-primary-50);
    color: var(--color-primary-500);
    font-weight: 600;
}

.main-menu__link--active .main-menu__link-icon {
    color: var(--color-primary-400);
}

/* main-menu__link-icon: small svg icon displayed to the left of each link label */
.main-menu__link-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-neutral-400);
    transition: color var(--transition-base);
}

.main-menu__link:hover .main-menu__link-icon {
    color: var(--color-primary-400);
}

/* main-menu__link-label: visible text label of the navigation link */
.main-menu__link-label {
    flex: 1;
}

/* main-menu__divider: thin horizontal rule between nav groups */
.main-menu__divider {
    height: 1px;
    background: var(--color-neutral-100);
    margin: 0 10px;
}

/* ────────────────────────────────────────────────
       SIDEBAR FOOTER
    ──────────────────────────────────────────────── */

/* main-menu__footer: bottom area of sidebar with a small legal/platform note */
.main-menu__footer {
    padding: 14px 20px;
    border-top: 1px solid var(--color-neutral-100);
}

/* main-menu__footer-text: small muted note shown at the bottom of the sidebar */
.main-menu__footer-text {
    font-size: 11px;
    color: var(--color-neutral-400);
    line-height: 1.5;
}