/* ─────────────────────────────────────────────────────────
   TALENT PAGE - STENZO
   Inherits design language from global styles, About, and How We Work.
───────────────────────────────────────────────────────── */
.talent-page {
    background-color: #ebeff5;
    min-height: 100vh;
}

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.talent-hero {
    padding: 180px 24px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

.talent-hero-content {
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.talent-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color-peach);
    border: 1px solid var(--color-peach-border);
    color: var(--color-dark);
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
}

.talent-eyebrow-icon {
    width: 24px;
    height: 24px;
    background-color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.talent-eyebrow-icon svg {
    width: 16px;
    height: 16px;
}

.talent-hero-title {
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.1;
    font-weight: var(--text-title-weight);
    letter-spacing: -0.02em;
    color: var(--color-dark);
    margin: 0;
}

.talent-hero-desc {
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.6;
    color: var(--text-desc-color, rgba(33, 34, 47, 0.75));
    max-width: 650px;
    margin: 0;
}

.talent-hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Secondary CTA Button Style */
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    color: var(--color-dark);
    padding: 9px 20px;
    border-radius: var(--radius-pill, 100px);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    border: 1.5px solid var(--color-border-dark, rgba(33, 34, 47, 0.15));
    transition: all 0.2s ease;
}

.btn-outline:hover {
    background-color: var(--color-dark);
    color: #ffffff;
    border-color: var(--color-dark);
}

/* ══════════════════════════════════════════
   PROCESS SECTION (Overrides for Talent Page)
══════════════════════════════════════════ */
.talent-page .hww-process {
    padding: 60px 0;
}

.talent-page .hww-process-header {
    margin-bottom: 32px;
}

/* ══════════════════════════════════════════
   MORE THAN A JOB SEARCH — RICH VISUAL SECTION
══════════════════════════════════════════ */
.ts-section {
    padding: 100px 24px 120px;
    background: linear-gradient(135deg, #E9EFF8 0%, #EEF3FA 50%, #E6EDF7 100%);
}

.ts-section-header {
    text-align: center;
    margin-bottom: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.ts-section-heading {
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: var(--text-title-weight);
    letter-spacing: -0.025em;
    color: #14142d;
    margin: 0;
    line-height: 1.1;
}

.ts-section-desc {
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.65;
    color: rgba(33, 34, 47, 0.7);
    max-width: 620px;
    margin: 0;
}

/* ── Grid Layout ── */
.ts-grid {
    display: grid;
    max-width: 1200px;
    margin: 0 auto;
    grid-template-columns: 1fr 1.4fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
}

/* ── Base Card — default glass (overridden by modifiers below) ── */
.ts-card {
    background: rgba(248, 250, 253, 0.72);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow: 0 14px 40px rgba(62, 82, 120, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.90);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
    overflow: hidden;
}

.ts-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 50px rgba(62, 82, 120, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* ── DARK FEATURE CARDS (01, 03, 05) ── */
.ts-card-dark {
    background: url('../../images/feature-card-03-bg.png');
    background-size: cover;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 18px 40px rgba(62, 91, 160, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.ts-card-dark:hover {
    box-shadow: 0 24px 50px rgba(62, 91, 160, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ── LIGHT FROSTED CARDS (02/04/05/06) — explicit, same as base ── */
.ts-card-light {
    background: radial-gradient(92.09% 124.47% at 50% 99.24%, rgba(221, 226, 238, 0.4) 58.91%, rgba(187, 197, 221, 0.4) 100%);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow: 0 14px 40px rgba(62, 82, 120, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

.ts-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ts-card-num {
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

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

.ts-card-title {
    font-family: var(--font-primary, 'Inter', sans-serif);
    font-size: 20px;
    font-weight: 600;
    color: #14142d;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.ts-card-desc {
    font-size: clamp(12px, 1.5vw, 15px);
    line-height: 1.5;
    color: #6b7280;
    margin: 0;
}

/* ── Grid placement ── */
/* Rows 1-2: flanking cards + tall center anchor */
.ts-card-1 {
    grid-column: 1;
    grid-row: 1;
}

.ts-card-2 {
    grid-column: 1;
    grid-row: 2;
}

.ts-card-center {
    grid-column: 2;
    grid-row: 1 / 3;
}

.ts-card-3 {
    grid-column: 3;
    grid-row: 1;
}

.ts-card-4 {
    grid-column: 3;
    grid-row: 2;
}

/* Row 3: two dedicated non-overlapping columns */
.ts-card-5 {
    grid-column: 1 / 2;
    grid-row: 3;
}

.ts-card-6 {
    grid-column: 2 / 4;
    grid-row: 3;
}

/* ── Inner UI base elements ── */
.ts-ui-box {
    background: #f5f7fb;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 12px 14px;
    flex: 1;
}

.ts-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.ts-chip-blue {
    background: #e8f0fe;
    color: #3b5bdb;
}

.ts-chip-coral {
    background: #fff0eb;
    color: #e8622a;
}

.ts-chip-mint {
    background: #e6f7f2;
    color: #0d9488;
}

.ts-chip-lavender {
    background: #f0edff;
    color: #7c3aed;
}

.ts-chip-dark {
    background: #f3f4f6;
    color: #374151;
}

.ts-chip-green {
    background: #f0fdf4;
    color: #15803d;
}

/* STATUS DOT */
.ts-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.ts-dot-green {
    background: #22c55e;
}

.ts-dot-blue {
    background: #3b82f6;
}

.ts-dot-amber {
    background: #f59e0b;
}

.ts-dot-coral {
    background: #e8622a;
}

/* STEP ROW — base (neutral, overridden by .ts-card-dark / .ts-card-light) */
.ts-step-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(248, 249, 251, 0.80);
    border: 1px solid rgba(214, 224, 240, 0.60);
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: default;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.ts-step-row:hover {
    background: rgba(239, 243, 253, 0.90);
    border-color: rgba(59, 91, 219, 0.15);
}

.ts-step-row svg {
    color: #9ca3af;
    flex-shrink: 0;
}

.ts-step-row.ts-step-active {
    background: rgba(239, 243, 253, 0.90);
    border-color: rgba(59, 91, 219, 0.2);
    color: #1e3a8a;
}

/* ══════════════════════════════════════════
   BLUE CARD SCOPED OVERRIDES
   (01 Career Guidance + 03 Technical Training)
══════════════════════════════════════════ */

/* Icon container on blue surface */
.ts-icon-on-blue {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Text on blue cards */
.ts-card-dark .ts-card-num {
    color: rgba(255, 255, 255, 0.55);
}

.ts-card-dark .ts-card-title {
    color: #ffffff;
}

.ts-card-dark .ts-card-desc {
    color: rgba(255, 255, 255, 0.82);
}

/* Step rows on blue card (Career Guidance) */
.ts-card-dark .ts-step-row {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: rgba(255, 255, 255, 0.90);
    font-size: 13px;
    font-weight: 500;
}

.ts-card-dark .ts-step-row svg {
    color: rgba(255, 255, 255, 0.55);
}

.ts-card-dark .ts-step-row:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.30);
}

.ts-card-dark .ts-step-row.ts-step-active {
    background: rgba(255, 255, 255, 0.84) !important;
    border-color: rgba(255, 255, 255, 0.90) !important;
    color: #24324A !important;
}

.ts-card-dark .ts-step-row.ts-step-active svg {
    color: currentColor;
}

/* Compass widget on blue card */
.ts-card-dark .ts-guidance-compass {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

/* Training tabs on blue card */
.ts-card-dark .ts-train-tabs {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.20);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.ts-card-dark .ts-train-tab {
    color: rgba(255, 255, 255, 0.88);
}

.ts-card-dark .ts-train-tab.active {
    background: rgba(255, 255, 255, 0.86);
    color: #24324A;
    box-shadow: 0 1px 4px rgba(50, 70, 110, 0.14);
}

/* Chips on blue card */
.ts-card-dark .ts-chip {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
}

/* Training icon on colored cards */
.ts-card-dark .ts-train-icon {
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.90);
}

/* Opportunity Matching on blue card (Card 05) */
.ts-card-dark .ts-search-bar {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: rgba(255, 255, 255, 0.85);
}

.ts-card-dark .ts-search-bar svg {
    color: rgba(255, 255, 255, 0.60);
}

.ts-card-dark .ts-search-bar input::placeholder {
    color: rgba(255, 255, 255, 0.50);
}

.ts-card-dark .ts-opp-row {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.20);
}

.ts-card-dark .ts-opp-row:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.30);
}

.ts-card-dark .ts-opp-title {
    color: #ffffff;
}

.ts-card-dark .ts-opp-meta {
    color: rgba(255, 255, 255, 0.70);
}

.ts-card-dark .ts-opp-arrow {
    color: rgba(255, 255, 255, 0.50);
}

.ts-card-dark .ts-opp-icon {
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.90);
}

/* ══════════════════════════════════════════
   LIGHT CARD SCOPED OVERRIDES
   (02 Resume & Profile, 04 Interview, 05 Opportunity, 06 Recruiter)
══════════════════════════════════════════ */

/* Inner panels inside light cards get slightly whiter surface */
.ts-card-light .ts-resume-file,
.ts-card-light .ts-profile-row,
.ts-card-light .ts-opp-row,
.ts-card-light .ts-recruiter-header,
.ts-card-light .ts-search-bar {
    background: rgba(255, 255, 255, 0.60);
    border: 1px solid rgba(214, 224, 240, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* Light card step rows */
.ts-card-light .ts-step-row {
    background: rgba(255, 255, 255, 0.60);
    border: 1px solid rgba(214, 224, 240, 0.72);
}

.ts-card-light .ts-step-row.ts-step-active {
    background: rgba(238, 231, 255, 0.80);
    border-color: rgba(112, 71, 232, 0.20);
    color: #5b21b6;
}

/* Interview active practice item */
.ts-card-light .ts-practice-item {
    background: rgba(255, 255, 255, 0.60);
    border: 1px solid rgba(214, 224, 240, 0.60);
}

.ts-card-light .ts-practice-item.ts-practice-active {
    background: #EEE7FF;
    color: #7047E8;
    border-color: rgba(112, 71, 232, 0.18);
}

.ts-card-light .ts-practice-item.ts-practice-active .ts-play-btn {
    background: #7047E8;
    color: #ffffff;
}

/* Search bar on opportunity card */
.ts-card-light .ts-search-bar {
    background: rgba(255, 255, 255, 0.70);
    border: 1px solid rgba(214, 224, 240, 0.70);
}

/* Opp rows */
.ts-card-light .ts-opp-row {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(214, 224, 240, 0.60);
}

.ts-card-light .ts-opp-row:hover {
    background: rgba(255, 247, 244, 0.85);
    border-color: rgba(232, 98, 42, 0.15);
}

/* Recruiter header */
.ts-card-light .ts-recruiter-header {
    background: rgba(255, 255, 255, 0.64);
    border: 1px solid rgba(214, 224, 240, 0.72);
}

/* Message bubble */
.ts-card-light .ts-message-bubble {
    background: rgba(240, 249, 255, 0.75);
    border: 1px solid rgba(59, 130, 246, 0.10);
}

/* Checklist items */
.ts-card-light .ts-checklist-item {
    background: rgba(255, 255, 255, 0.50);
    border-radius: 8px;
    padding: 6px 8px;
}

/* ══════════════════════════════════════════
   RECRUITER SUPPORT PROGRESS STEPS
══════════════════════════════════════════ */
.ts-support-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.ts-support-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(214, 224, 240, 0.55);
    font-size: 13px;
    font-weight: 500;
    color: #9ca3af;
    transition: background 0.2s ease;
}

.ts-support-step.ts-support-done {
    background: rgba(255, 255, 255, 0.60);
    border-color: rgba(214, 224, 240, 0.65);
    color: #374151;
}

.ts-support-step.ts-support-active {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(112, 71, 232, 0.22);
    color: #14142d;
    font-weight: 600;
}

.ts-support-status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ts-support-check {
    background: #dcfce7;
    color: #15803d;
}

.ts-support-arrow {
    background: transparent;
    color: #d1d5db;
}

.ts-support-step.ts-support-active .ts-support-arrow {
    color: #7047E8;
}

.ts-support-label {
    font-size: 13px;
    line-height: 1;
}


/* ══════════════════════════════════════════
   CARD 1 — CAREER GUIDANCE
══════════════════════════════════════════ */
.ts-guidance-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ts-guidance-compass {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff4f0, #ffe8de);
    border: 1px solid rgba(232, 98, 42, 0.15);
    align-self: flex-end;
    margin-top: auto;
}

/* ══════════════════════════════════════════
   CARD 2 — RESUME & PROFILE
══════════════════════════════════════════ */
.ts-resume-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8f9fb;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.ts-resume-file-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #fee2e2;
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ts-resume-filename {
    font-size: 14px;
    font-weight: 500;
    color: #14142d;
}

.ts-resume-filesize {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}

.ts-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 8px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 600;
    margin-left: auto;
    flex-shrink: 0;
}

.ts-checklist {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ts-checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    font-weight: 500;
}

.ts-check-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #dcfce7;
    color: #15803d;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   CENTRAL PROFILE CARD — premium neutral glass anchor
══════════════════════════════════════════ */
.ts-card-center {
    background: rgba(250, 252, 255, 0.76);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.90);
    box-shadow: 0 18px 45px rgba(58, 78, 116, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    padding: 32px;
}

.ts-profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.ts-profile-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: #6b7280;
}

.ts-profile-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #374151;
    font-weight: 500;
}

.ts-profile-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 20px;
}

.ts-profile-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ts-profile-role {
    font-family: var(--font-primary, 'Inter', sans-serif);
    font-size: 18px;
    font-weight: 600;
    color: #14142d;
    letter-spacing: -0.01em;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.ts-profile-exp {
    font-size: 13px;
    color: #6b7280;
}

/* Tabs */
.ts-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 0;
}

.ts-tab {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.ts-tab.active,
.ts-tab:hover {
    color: #14142d;
    border-bottom-color: #e8622a;
}

/* Tab content panels */
.ts-tab-panel {
    display: none;
}

.ts-tab-panel.active {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ts-profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f8f9fb;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: background 0.2s ease;
}

.ts-profile-row:hover {
    background: #eff3fd;
}

.ts-profile-row-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.ts-profile-row-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ts-profile-row-value {
    font-size: 13px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

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

/* ══════════════════════════════════════════
   CARD 3 — TECHNICAL TRAINING
══════════════════════════════════════════ */
.ts-train-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    padding: 4px;
}

.ts-train-tab {
    text-align: center;
    /* Fixed height so tabs look uniform */
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: #6b7280;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
    word-break: break-word;
}

.ts-train-tab:nth-child(3) {
    grid-column: 1 / -1;
}

.ts-train-tab.active {
    background: rgba(255, 255, 255, 0.88);
    color: #14142d;
    box-shadow: 0 1px 4px rgba(50, 70, 110, 0.10);
}

.ts-skills-panel {
    display: none;
}

.ts-skills-panel.active {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ts-train-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #e8f0fe;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    margin-top: auto;
}

/* ══════════════════════════════════════════
   CARD 4 — INTERVIEW PREPARATION
══════════════════════════════════════════ */
.ts-practice-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ts-practice-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    background: #f8f9fb;
    transition: background 0.2s ease, color 0.2s ease;
}

.ts-practice-item.ts-practice-active {
    background: #f0edff;
    color: #5b21b6;
}

.ts-play-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.ts-practice-item.ts-practice-active .ts-play-btn {
    background: #7c3aed;
    color: #ffffff;
}

.ts-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 10px;
    background: #f0edff;
    color: #5b21b6;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(124, 58, 237, 0.2);
    cursor: pointer;
    transition: background 0.2s ease;
}

.ts-start-btn:hover {
    background: #e0d7ff;
}

.ts-interview-cam {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    margin-top: auto;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   CARD 5 — OPPORTUNITY MATCHING
══════════════════════════════════════════ */
.ts-card-5 {
    grid-column: 1 / 2;
    grid-row: 3;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
}

.ts-opp-left {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ts-opp-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ts-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f3f4f6;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 13px;
    color: #6b7280;
}

.ts-search-bar svg {
    flex-shrink: 0;
    color: #9ca3af;
}

.ts-filter-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ts-opp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f8f9fb;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: background 0.2s ease;
    cursor: pointer;
}

.ts-opp-row:hover {
    background: #fff7f4;
    border-color: rgba(232, 98, 42, 0.15);
}

.ts-opp-role {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ts-opp-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff0eb;
    color: #e8622a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ts-opp-title {
    font-size: 14px;
    font-weight: 500;
    color: #14142d;
}

.ts-opp-meta {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.ts-opp-arrow {
    color: #d1d5db;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   CARD 6 — RECRUITER & CANDIDATE SUPPORT
══════════════════════════════════════════ */
.ts-card-6 {
    grid-column: 2 / 4;
    grid-row: 3;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
}

.ts-recruiter-left {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ts-recruiter-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ts-recruiter-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f8f9fb;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.ts-recruiter-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #1d4ed8;
}

.ts-recruiter-name {
    font-size: 13px;
    font-weight: 500;
    color: #14142d;
}

.ts-recruiter-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #22c55e;
    margin-top: 2px;
    font-weight: 500;
}

.ts-message-bubble {
    padding: 12px 14px;
    background: #f0f9ff;
    border-radius: 12px 12px 12px 4px;
    border: 1px solid rgba(59, 130, 246, 0.12);
    font-size: 12px;
    line-height: 1.55;
    color: #374151;
    font-style: italic;
}

.ts-message-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ts-msg-dots {
    font-size: 18px;
    color: #9ca3af;
    letter-spacing: 2px;
    line-height: 1;
}

.ts-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    background: #e8f4fd;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(29, 78, 216, 0.15);
    cursor: pointer;
    transition: background 0.2s ease;
}

.ts-reply-btn:hover {
    background: #dbeafe;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .ts-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .ts-card-1 {
        grid-column: 1;
        grid-row: 1;
    }

    .ts-card-2 {
        grid-column: 2;
        grid-row: 1;
    }

    .ts-card-center {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    .ts-card-3 {
        grid-column: 1;
        grid-row: 3;
    }

    .ts-card-4 {
        grid-column: 2;
        grid-row: 3;
    }

    .ts-card-5 {
        grid-column: 1;
        grid-row: 4;
        flex-direction: column;
    }

    .ts-card-6 {
        grid-column: 2;
        grid-row: 4;
        flex-direction: column;
    }

    .ts-opp-left,
    .ts-recruiter-left {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .ts-section {
        padding: 60px 16px 80px;
    }

    .ts-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .ts-card {
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .ts-card-1 {
        grid-column: 1;
        grid-row: 1;
    }

    .ts-card-2 {
        grid-column: 1;
        grid-row: 2;
    }

    .ts-card-center {
        grid-column: 1;
        grid-row: 3;
    }

    .ts-card-3 {
        grid-column: 1;
        grid-row: 4;
    }

    .ts-card-4 {
        grid-column: 1;
        grid-row: 5;
    }

    .ts-card-5 {
        grid-column: 1;
        grid-row: 6;
        flex-direction: column;
    }

    .ts-card-6 {
        grid-column: 1;
        grid-row: 7;
        flex-direction: column;
    }

    .btn-outline {
        padding: 6px 12px;
        font-size: 13px;
        white-space: nowrap;
    }

    .ts-tabs {
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .ts-tabs::-webkit-scrollbar {
        display: none;
    }

    .ts-tab {
        white-space: nowrap;
    }
}

/* ══════════════════════════════════════════
   WHO WE SUPPORT (Audience Blocks)
══════════════════════════════════════════ */
.talent-audience {
    padding: 80px 24px 120px;
    max-width: 1200px;
    margin: 0 auto;
}

.talent-audience-container {
    background: #ffffff;
    border-radius: 32px;
    padding: 64px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.talent-audience-header {
    text-align: left;
}

.talent-audience-heading {
    font-size: clamp(36px, 5vw, 48px);
    font-weight: var(--text-title-weight, 500);
    color: var(--text-title-color, var(--color-dark));
    letter-spacing: var(--text-title-spacing, -0.02em);
    margin: 24px 0 16px 0;
    line-height: 1.1;
}

.talent-audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.talent-audience-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.talent-audience-num {
    font-size: 14px;
    font-weight: 600;
    color: rgb(219, 74, 43);
    font-family: var(--font-mono);
}

.talent-audience-title {
    font-size: 20px;
    font-weight: var(--text-title-weight, 600);
    color: var(--color-dark);
    margin: 0;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.talent-audience-desc {
    color: var(--text-desc-color, rgba(33, 34, 47, 0.75));
    font-weight: var(--text-desc-weight, 400);
    letter-spacing: var(--text-desc-spacing, 0);
    font-size: 16px;
    line-height: var(--text-desc-line-height, 1.6);
    margin: 0;
}

@media (max-width: 991px) {
    .talent-audience-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .talent-audience-container {
        padding: 40px 24px;
    }
}

/* ── LIQUID GLASS INNER DIVS ── */
.ts-card-dark .ts-step-row,
.ts-card-dark .ts-guidance-compass,
.ts-card-dark .ts-train-tabs,
.ts-card-dark .ts-chip,
.ts-card-dark .ts-train-icon,
.ts-card-dark .ts-search-bar,
.ts-card-dark .ts-opp-row,
.ts-card-dark .ts-opp-icon {
    background: rgba(255, 255, 255, 0.01) !important;
    background-blend-mode: luminosity;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
    position: relative;
    border: none !important;
}

.ts-card-dark .ts-step-row::before,
.ts-card-dark .ts-guidance-compass::before,
.ts-card-dark .ts-train-tabs::before,
.ts-card-dark .ts-chip::before,
.ts-card-dark .ts-train-icon::before,
.ts-card-dark .ts-search-bar::before,
.ts-card-dark .ts-opp-row::before,
.ts-card-dark .ts-opp-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.4px;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.45) 0%,
            rgba(255, 255, 255, 0.15) 20%,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0) 60%,
            rgba(255, 255, 255, 0.15) 80%,
            rgba(255, 255, 255, 0.45) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}