/* =============================================================================
   AIAlchemyHub TalentCraft — Landing Page Styles (index.css)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Panel 2: Ecosystem Actor Overview Section
   ----------------------------------------------------------------------------- */
.tc-actor-section {
    background-color: var(--tc-colour-surface-subtle, #f8fafc);
    border-bottom: var(--tc-border-width, 1px) solid var(--tc-colour-border, #e2e8f0);
    transition: background-color var(--tc-transition-fast, 0.2s ease);
}

.tc-actor-section .tc-section-title {
    color: var(--tc-colour-heading, #0f172a);
    font-weight: 700;
}

.tc-actor-section .tc-section-subtitle {
    color: var(--tc-colour-text-muted, #475569);
}

/* Actor Feature Cards */
.tc-actor-card {
    background-color: var(--tc-colour-surface, #ffffff);
    border: 1px solid var(--tc-colour-border, #cbd5e1);
    border-radius: var(--tc-radius-lg, 0.75rem);
    padding: var(--tc-space-5, 1.5rem);
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform var(--tc-transition-fast, 0.2s ease), 
                box-shadow var(--tc-transition-fast, 0.2s ease), 
                border-color var(--tc-transition-fast, 0.2s ease);
}

.tc-actor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: var(--tc-colour-primary, #1e3a8a);
}

.tc-actor-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--tc-radius-md, 0.5rem);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.tc-actor-card__icon--candidate {
    background-color: rgba(30, 58, 138, 0.1);
    color: #1e3a8a;
}

.tc-actor-card__icon--employer {
    background-color: rgba(13, 148, 136, 0.1);
    color: #0d9488;
}

.tc-actor-card__icon--sprint {
    background-color: rgba(79, 70, 229, 0.1);
    color: #4f46e5;
}

.tc-actor-card__title {
    color: var(--tc-colour-heading, #0f172a);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.tc-actor-card__text {
    color: var(--tc-colour-text, #334155);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

/* Dark Theme Contrast Overrides for Panel 2 */
html[data-tc-theme="dark"] .tc-actor-section {
    background-color: #0f172a;
    border-color: #1e293b;
}

html[data-tc-theme="dark"] .tc-actor-card {
    background-color: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

html[data-tc-theme="dark"] .tc-actor-card:hover {
    border-color: #38bdf8;
    box-shadow: 0 10px 25px -5px rgba(56, 189, 248, 0.15);
}

html[data-tc-theme="dark"] .tc-actor-card__text {
    color: #cbd5e1;
}

html[data-tc-theme="dark"] .tc-actor-card__icon--candidate {
    background-color: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}

html[data-tc-theme="dark"] .tc-actor-card__icon--employer {
    background-color: rgba(45, 212, 191, 0.15);
    color: #2dd4bf;
}

html[data-tc-theme="dark"] .tc-actor-card__icon--sprint {
    background-color: rgba(129, 140, 248, 0.15);
    color: #818cf8;
}


/* Helper class ensuring custom SVGs fill their container */
.tc-svg-icon {
    width: 100%;
    height: 100%;
    display: block;
}


/* =============================================================================
   Panel 3: Zero-Document Architecture Philosophy
   ============================================================================= */

.tc-arch-section {
    background-color: var(--tc-colour-surface);
    border-bottom: var(--tc-border-width) solid var(--tc-colour-border);
}

.tc-arch-title {
    color: var(--tc-colour-heading);
    font-weight: 700;
}

.tc-arch-description {
    color: var(--tc-colour-text);
    font-size: var(--tc-font-size-base);
    line-height: 1.6;
}

/* Checklist Styling */
.tc-arch-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--tc-space-3);
}

.tc-arch-check-item {
    display: flex;
    align-items: flex-start;
    gap: var(--tc-space-3);
}

.tc-arch-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    border-radius: 50%;
    background-color: rgba(30, 58, 138, 0.1);
    color: var(--tc-colour-primary);
    padding: 0.25rem;
    margin-top: 0.2rem;
}

.tc-arch-check-title {
    color: var(--tc-colour-heading);
    font-size: var(--tc-font-size-sm);
}

.tc-arch-check-text {
    color: var(--tc-colour-text-muted);
    font-size: var(--tc-font-size-xs);
}

/* Terminal Console Card */
.tc-terminal-card {
    background-color: #0f172a;
    border: 1px solid #334155;
    border-radius: var(--tc-radius-lg);
    box-shadow: var(--tc-shadow-lg);
    overflow: hidden;
}

.tc-terminal-card__header {
    background-color: #1e293b;
    border-bottom: 1px solid #334155;
}

.tc-terminal-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    display: inline-block;
}
.tc-terminal-dot--red { background-color: #ef4444; }
.tc-terminal-dot--yellow { background-color: #f59e0b; }
.tc-terminal-dot--green { background-color: #10b981; }

.tc-terminal-tabs .nav-tabs .nav-link {
    color: #94a3b8;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.tc-terminal-tabs .nav-tabs .nav-link.active {
    color: #38bdf8;
    background-color: transparent;
    border-bottom-color: #38bdf8;
}

.tc-terminal-card__body pre {
    white-space: pre-wrap;
    word-break: break-all;
}

/* Dark Theme Overrides for Panel 3 */
html[data-tc-theme="dark"] .tc-arch-check-icon {
    background-color: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}

/* =============================================================================
   Panel 4: Sprint Recruitment Workflows
   ============================================================================= */

.tc-sprint-section {
    background-color: var(--tc-colour-surface-subtle, #f8fafc);
    border-top: var(--tc-border-width, 1px) solid var(--tc-colour-border, #e2e8f0);
    border-bottom: var(--tc-border-width, 1px) solid var(--tc-colour-border, #e2e8f0);
    transition: background-color var(--tc-transition-fast, 0.2s ease);
}

.tc-sprint-title {
    color: var(--tc-colour-heading, #0f172a);
    font-weight: 700;
}

.tc-sprint-subtitle {
    color: var(--tc-colour-text-muted, #475569);
}

/* Sprint Step Cards */
.tc-sprint-card {
    background-color: var(--tc-colour-surface, #ffffff);
    border: 1px solid var(--tc-colour-border, #cbd5e1);
    border-radius: var(--tc-radius-lg, 0.75rem);
    padding: var(--tc-space-5, 1.5rem);
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform var(--tc-transition-fast, 0.2s ease), 
                box-shadow var(--tc-transition-fast, 0.2s ease), 
                border-color var(--tc-transition-fast, 0.2s ease);
}

.tc-sprint-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: var(--tc-colour-primary, #1e3a8a);
}

.tc-sprint-number {
    font-family: var(--tc-font-family-monospace, monospace);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--tc-colour-border, #94a3b8);
    line-height: 1;
}

.tc-sprint-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--tc-radius-md, 0.5rem);
    padding: 0.5rem;
}

.tc-sprint-icon--planning {
    background-color: rgba(30, 58, 138, 0.1);
    color: #1e3a8a;
}

.tc-sprint-icon--active {
    background-color: rgba(13, 148, 136, 0.1);
    color: #0d9488;
}

.tc-sprint-icon--review {
    background-color: rgba(79, 70, 229, 0.1);
    color: #4f46e5;
}

.tc-sprint-card__title {
    color: var(--tc-colour-heading, #0f172a);
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.tc-sprint-card__text {
    color: var(--tc-colour-text, #334155);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.tc-sprint-kpi {
    border-color: var(--tc-colour-border, #e2e8f0) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Dark Theme Overrides for Panel 4 */
html[data-tc-theme="dark"] .tc-sprint-section {
    background-color: #0f172a;
    border-color: #1e293b;
}

html[data-tc-theme="dark"] .tc-sprint-card {
    background-color: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

html[data-tc-theme="dark"] .tc-sprint-card:hover {
    border-color: #38bdf8;
    box-shadow: 0 10px 25px -5px rgba(56, 189, 248, 0.15);
}

html[data-tc-theme="dark"] .tc-sprint-number {
    color: #475569;
}

html[data-tc-theme="dark"] .tc-sprint-card__title {
    color: #f8fafc;
}

html[data-tc-theme="dark"] .tc-sprint-card__text {
    color: #cbd5e1;
}

html[data-tc-theme="dark"] .tc-sprint-kpi {
    border-color: #334155 !important;
}

html[data-tc-theme="dark"] .tc-sprint-icon--planning {
    background-color: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}

html[data-tc-theme="dark"] .tc-sprint-icon--active {
    background-color: rgba(45, 212, 191, 0.15);
    color: #2dd4bf;
}

html[data-tc-theme="dark"] .tc-sprint-icon--review {
    background-color: rgba(129, 140, 248, 0.15);
    color: #818cf8;
}


/* =============================================================================
   Panel 5: Post-Application Interview Warm-up Engine
   ============================================================================= */

.tc-prep-section {
    background-color: var(--tc-colour-surface, #ffffff);
    border-bottom: var(--tc-border-width, 1px) solid var(--tc-colour-border, #e2e8f0);
}

.tc-prep-title {
    color: var(--tc-colour-heading, #0f172a);
    font-weight: 700;
}

.tc-prep-description {
    color: var(--tc-colour-text, #334155);
    font-size: var(--tc-font-size-base);
    line-height: 1.6;
}

/* Warm-Up Card Container */
.tc-warmup-card {
    background-color: var(--tc-colour-surface, #ffffff);
    border: 1px solid var(--tc-colour-border, #cbd5e1);
    border-radius: var(--tc-radius-lg, 0.75rem);
    padding: var(--tc-space-5, 1.5rem);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: background-color var(--tc-transition-fast, 0.2s ease), border-color var(--tc-transition-fast, 0.2s ease);
}

.tc-warmup-card__heading {
    color: var(--tc-colour-heading, #0f172a);
    font-weight: 700;
}

.tc-warmup-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--tc-radius-md, 0.5rem);
    background-color: rgba(13, 148, 136, 0.1);
    color: var(--tc-colour-accent, #0d9488);
    padding: 0.4rem;
}

/* Console Prompt Box */
.tc-warmup-console {
    background-color: var(--tc-colour-surface-subtle, #f8fafc);
    border: 1px solid var(--tc-colour-border, #e2e8f0);
    border-radius: var(--tc-radius-md, 0.5rem);
}

.tc-warmup-prompt {
    color: var(--tc-colour-heading, #0f172a);
}

.tc-prompt-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tc-colour-primary, #1e3a8a);
}

/* Dark Theme Overrides for Panel 5 */
html[data-tc-theme="dark"] .tc-prep-section {
    background-color: #0f172a;
    border-color: #1e293b;
}

html[data-tc-theme="dark"] .tc-warmup-card {
    background-color: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

html[data-tc-theme="dark"] .tc-warmup-card__heading {
    color: #f8fafc;
}

html[data-tc-theme="dark"] .tc-warmup-badge-icon {
    background-color: rgba(45, 212, 191, 0.15);
    color: #2dd4bf;
}

html[data-tc-theme="dark"] .tc-warmup-console {
    background-color: #0f172a;
    border-color: #334155;
}

html[data-tc-theme="dark"] .tc-warmup-prompt {
    color: #cbd5e1;
}

html[data-tc-theme="dark"] .tc-prompt-tag {
    color: #38bdf8;
}

/* =============================================================================
   Panel 6: Platform Metrics & 8 Core USPs
   ============================================================================= */

.tc-stats-section {
    background-color: var(--tc-colour-surface-subtle, #f8fafc);
    border-top: var(--tc-border-width, 1px) solid var(--tc-colour-border, #e2e8f0);
    border-bottom: var(--tc-border-width, 1px) solid var(--tc-colour-border, #e2e8f0);
}

.tc-stats-title {
    color: var(--tc-colour-heading, #0f172a);
    font-weight: 700;
}

.tc-stats-subtitle {
    color: var(--tc-colour-text-muted, #475569);
}

/* Stat USP Cards */
.tc-stat-card {
    background-color: var(--tc-colour-surface, #ffffff);
    border: 1px solid var(--tc-colour-border, #cbd5e1);
    border-radius: var(--tc-radius-lg, 0.75rem);
    padding: var(--tc-space-4, 1.25rem);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform var(--tc-transition-fast, 0.2s ease), 
                box-shadow var(--tc-transition-fast, 0.2s ease), 
                border-color var(--tc-transition-fast, 0.2s ease);
}

.tc-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: var(--tc-colour-primary, #1e3a8a);
}

.tc-stat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--tc-radius-md, 0.5rem);
    padding: 0.5rem;
    margin-bottom: 0.75rem;
}

.tc-stat-card__icon--primary {
    background-color: rgba(30, 58, 138, 0.1);
    color: var(--tc-colour-primary, #1e3a8a);
}

.tc-stat-card__icon--accent {
    background-color: rgba(13, 148, 136, 0.1);
    color: var(--tc-colour-accent, #0d9488);
}

.tc-stat-card__metric {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: var(--tc-font-family-monospace, monospace);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.tc-stat-card__title {
    color: var(--tc-colour-heading, #0f172a);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.tc-stat-card__text {
    color: var(--tc-colour-text, #334155);
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Dark Theme Overrides for Panel 6 */
html[data-tc-theme="dark"] .tc-stats-section {
    background-color: #0f172a;
    border-color: #1e293b;
}

html[data-tc-theme="dark"] .tc-stat-card {
    background-color: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

html[data-tc-theme="dark"] .tc-stat-card:hover {
    border-color: #38bdf8;
    box-shadow: 0 10px 25px -5px rgba(56, 189, 248, 0.15);
}

html[data-tc-theme="dark"] .tc-stat-card__title {
    color: #f8fafc;
}

html[data-tc-theme="dark"] .tc-stat-card__text {
    color: #cbd5e1;
}

html[data-tc-theme="dark"] .tc-stat-card__icon--primary {
    background-color: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}

html[data-tc-theme="dark"] .tc-stat-card__icon--accent {
    background-color: rgba(45, 212, 191, 0.15);
    color: #2dd4bf;
}


/* =============================================================================
   Panel 7: Final Call to Action & Ecosystem Gateway
   ============================================================================= */

.tc-cta-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #0f172a 100%);
    border-top: var(--tc-border-width, 1px) solid var(--tc-colour-border, #e2e8f0);
}

/* Background Glow Effects */
.tc-cta-glow {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    opacity: 0.35;
}

.tc-cta-glow--top-left {
    top: -100px;
    left: -100px;
    background-color: #38bdf8;
}

.tc-cta-glow--bottom-right {
    bottom: -100px;
    right: -100px;
    background-color: #2dd4bf;
}

/* Main Call to Action Frame */
.tc-cta-card {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--tc-radius-xl, 1rem);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}

.tc-eyebrow--light {
    color: #38bdf8 !important;
}

.tc-cta-title {
    color: #ffffff;
    font-weight: 800;
    font-size: 2.25rem;
    line-height: 1.2;
}

.tc-cta-subtitle {
    color: #94a3b8;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Dual Gateway Cards */
.tc-cta-role-card {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform var(--tc-transition-fast, 0.2s ease), 
                border-color var(--tc-transition-fast, 0.2s ease), 
                box-shadow var(--tc-transition-fast, 0.2s ease);
}

.tc-cta-role-card:hover {
    transform: translateY(-4px);
    border-color: #38bdf8;
    box-shadow: 0 10px 25px -5px rgba(56, 189, 248, 0.2);
}

.tc-cta-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--tc-radius-md, 0.5rem);
    padding: 0.55rem;
}

.tc-cta-icon-box--blue {
    background-color: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}

.tc-cta-icon-box--teal {
    background-color: rgba(45, 212, 191, 0.15);
    color: #2dd4bf;
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Dark Theme Adjustments for Panel 7 */
html[data-tc-theme="dark"] .tc-cta-section {
    background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #020617 100%);
    border-color: #1e293b;
}

html[data-tc-theme="dark"] .tc-cta-card {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
}

