/* ======================================================================== */
/* VeraCita Landing Page - Premium SaaS Redesign                           */
/* Bold, Clean, Enterprise-Grade                                            */
/* ======================================================================== */

/* ===== AMBIENT BACKGROUND EFFECTS ===== */
.landing-ambient-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.landing-ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.4;
    animation: orbFloat 20s ease-in-out infinite;
}

.landing-ambient-orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(67, 132, 255, 0.3) 0%, transparent 70%);
    top: -200px;
    left: -100px;
    animation-delay: 0s;
}

.landing-ambient-orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(123, 66, 255, 0.25) 0%, transparent 70%);
    bottom: -150px;
    right: -100px;
    animation-delay: -10s;
}

.landing-ambient-orb-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(67, 132, 255, 0.2) 0%, transparent 70%);
    top: 50%;
    right: 20%;
    animation-delay: -5s;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -20px) scale(1.05); }
    50% { transform: translate(-20px, 30px) scale(0.95); }
    75% { transform: translate(-30px, -10px) scale(1.02); }
}

/* ===== MAIN CONTAINER ===== */
.landing-main-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 120px 40px 80px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px);
}

/* ===== HERO SECTION ===== */
.landing-hero-section {
    text-align: center;
    margin-bottom: 56px;
    padding-top: 20px;
}

/* Screen 1's background is hardcoded #0F1117 in BOTH light and dark
   themes (see #screen1Container / body rules below), so the hero must
   stay light in both. The [data-theme="light"] override in main.css
   would otherwise darken the title and make it invisible on the dark
   screen-1 background. Using an explicit colour (not var(--text-primary))
   makes this independent of theme tokens. */
.landing-hero-title {
    font-size: 58px;
    font-weight: 300;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -0.03em;
    color: #E8EAED !important;
    /* Reset any inherited gradient styles. Must set an explicit
       -webkit-text-fill-color (not `initial`) — in WebKit contexts where
       an ancestor uses background-clip: text, `initial` computes to
       currentColor=transparent and the h1 renders blank. */
    background: none;
    -webkit-background-clip: border-box;
            background-clip: border-box;
    -webkit-text-fill-color: #E8EAED !important;
}

/* Override [data-theme="light"] .landing-hero-title from main.css:249.
   Screen 1 bg is dark in both themes; the title must stay light. */
[data-theme="light"] .landing-hero-title {
    color: #E8EAED !important;
    -webkit-text-fill-color: #E8EAED !important;
}

.landing-hero-title strong {
    font-weight: 600;
}

.landing-gradient-text {
    background: linear-gradient(135deg, #818CF8 0%, #a78bfa 40%, #c084fc 70%, #e879f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.landing-hero-emphasis {
    font-style: italic;
    font-weight: 600;
}

.landing-hero-subtitle {
    font-size: 22px;
    color: var(--text-secondary);
    max-width: 650px;
    margin: 24px auto 0;
    line-height: 1.6;
    font-weight: 400;
}

/* ===== UPLOAD CONTAINER - CLEAN & BOLD ===== */
.landing-upload-container {
    background: var(--vc-glass-bg);
    border: 1px solid var(--vc-border-default);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 40px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.landing-upload-container:hover {
    border-color: rgba(67, 132, 255, 0.2);
    background: var(--vc-bg-input);
}

/* ===== TABS - REFINED ===== */
.landing-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 28px;
    padding: 4px;
    background: var(--vc-bg-input);
    border-radius: 14px;
    border: 1px solid var(--vc-glass-border);
}

.landing-tab {
    flex: 1;
    padding: 16px 24px;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.landing-tab:hover:not(.active) {
    color: var(--text-primary);
    background: var(--vc-bg-input);
}

[data-theme="light"] .landing-tab:hover:not(.active) {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.04);
}

.landing-tab.active {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    color: white;
    box-shadow: 0 4px 16px rgba(67, 132, 255, 0.25);
}

.landing-tab-icon {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

.landing-tab.active .landing-tab-icon {
    stroke: white !important;
}

/* ===== HIDDEN UTILITIES - CRITICAL ===== */
.landing-hidden {
    display: none !important;
}

/* File input MUST be hidden - this was missing! */
.landing-file-input {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ===== DROP ZONE - PREMIUM FEEL ===== */
.landing-content-area {
    border: 2px dashed rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 56px 40px;
    text-align: center;
    background: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* Animated border glow on hover */
.landing-content-area::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, transparent 40%, rgba(67, 132, 255, 0.4), rgba(123, 66, 255, 0.4), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    background-size: 400% 400%;
    animation: borderShimmer 3s ease infinite paused;
    pointer-events: none; /* CRITICAL: Allow clicks to pass through to content */
}

.landing-content-area:hover::before {
    opacity: 1;
    animation-play-state: running;
}

@keyframes borderShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.landing-content-area:hover {
    border-color: transparent;
    background: rgba(67, 132, 255, 0.03);
}

/* Drag active state */
.landing-content-area.drag-active,
.landing-content-area.drag-over {
    border-color: transparent;
    background: rgba(67, 132, 255, 0.08);
    transform: scale(1.01);
}

.landing-content-area.drag-active::before,
.landing-content-area.drag-over::before {
    opacity: 1;
    animation-play-state: running;
}

/* Upload icon with gradient */
.landing-upload-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    stroke-width: 1.5;
    opacity: 0.9;
}

.landing-upload-text {
    font-size: 20px;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 10px;
}

.landing-upload-subtext {
    font-size: 15px;
    color: var(--text-muted);
}

/* ===== FILES SELECTED STATE ===== */
.landing-files-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--vc-border-default);
}

.landing-files-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.landing-files-count {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
}

.landing-files-count-icon {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-files-count-icon svg {
    width: 16px;
    height: 16px;
    stroke: var(--vc-status-supported);
}

.landing-files-total {
    font-size: 14px;
    color: var(--text-muted);
}

/* Compact file list */
.landing-file-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.landing-file-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--vc-glass-bg);
    border: 1px solid var(--vc-border-default);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.landing-file-item:hover {
    background: var(--vc-border-subtle);
    border-color: var(--vc-border-emphasis);
}

.landing-file-type-badge {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.landing-file-type-badge.pdf {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
    color: var(--vc-status-unsupported);
}

.landing-file-type-badge.docx {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.2), rgba(67, 132, 255, 0.1));
    color: #4384ff;
}

.landing-file-type-badge.txt {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.2), rgba(156, 163, 175, 0.1));
    color: var(--vc-text-tertiary);
}

.landing-file-info {
    flex: 1;
    min-width: 0;
}

.landing-file-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.landing-file-size {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 3px;
}

.landing-file-remove {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.landing-file-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--vc-status-unsupported);
}

/* Add more files mini zone */
.landing-add-more-zone {
    border: 2px dashed rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 18px;
}

.landing-add-more-zone:hover {
    border-color: rgba(67, 132, 255, 0.3);
    background: rgba(67, 132, 255, 0.03);
    color: var(--text-secondary);
}

.landing-add-more-zone svg {
    width: 20px;
    height: 20px;
}

/* ===== CTA BUTTON ===== */
.landing-cta-section {
    text-align: center;
    margin-top: 20px;
}

.landing-extract-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 48px;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.landing-extract-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.landing-extract-btn:hover:not(:disabled)::before {
    opacity: 1;
}

.landing-extract-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(67, 132, 255, 0.35);
}

.landing-extract-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.landing-extract-btn svg {
    width: 22px;
    height: 22px;
}

/* ===== TRUST SIGNALS ===== */
.landing-trust-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
}

.landing-trust-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.landing-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: var(--text-muted);
}

.landing-trust-item svg {
    width: 20px;
    height: 20px;
    opacity: 0.7;
}

.landing-trust-divider {
    width: 1px;
    height: 18px;
    background: var(--vc-border-emphasis);
}

/* Responsive - stack on mobile */
@media (max-width: 600px) {
    .landing-trust-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .landing-trust-row .landing-trust-divider {
        display: none;
    }
}

/* ===== TAB CONTENT ===== */
.landing-tab-content {
    display: none;
}

.landing-tab-content.active {
    display: block;
    animation: fadeSlideIn 0.3s ease;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== TEXT INPUT AREA (Paste Tab) ===== */
.landing-text-input-area.editing {
    cursor: text;
    padding: 0;
}

.landing-text-input {
    width: 100%;
    min-height: 220px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.7;
    font-family: inherit;
    resize: none;
    padding: 28px;
}

.landing-text-input:focus {
    outline: none;
}

.landing-text-input::placeholder {
    color: var(--text-muted);
}

.landing-text-input-area.editing .landing-upload-icon,
.landing-text-input-area.editing .landing-upload-text,
.landing-text-input-area.editing .landing-upload-subtext {
    display: none;
}

/* ===== URL INPUT AREA ===== */
.landing-url-management {
    width: 100%;
    text-align: left;
}

.landing-url-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.landing-url-add-section {
    display: flex;
    gap: 10px;
}

.landing-url-input {
    flex: 1;
    padding: 14px 18px;
    background: var(--vc-bg-input);
    border: 1px solid var(--vc-border-emphasis);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 15px;
}

.landing-url-input:focus {
    outline: none;
    border-color: var(--brand-blue);
}

.landing-btn-add-url {
    padding: 14px 24px;
    background: rgba(67, 132, 255, 0.1);
    border: 1px solid rgba(67, 132, 255, 0.3);
    border-radius: 10px;
    color: var(--brand-blue);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.landing-btn-add-url:hover {
    background: rgba(67, 132, 255, 0.15);
}

/* ===== RESUME SESSION AREA ===== */
.landing-resume-area {
    cursor: pointer;
}

.landing-resume-info {
    width: 100%;
    padding: 0 20px;
}

.landing-resume-file-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(67, 132, 255, 0.08);
    border: 1px solid rgba(67, 132, 255, 0.2);
    border-radius: 12px;
}

.landing-resume-file-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.2), rgba(123, 66, 255, 0.2));
    border-radius: 12px;
}

.landing-resume-file-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--brand-blue);
}

.landing-resume-file-details {
    flex: 1;
    min-width: 0;
}

.landing-resume-file-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.landing-resume-file-meta {
    font-size: 13px;
    color: var(--text-muted);
}

.landing-resume-remove-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vc-bg-input-hover);
    border: 1px solid var(--vc-border-emphasis);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.landing-resume-remove-btn svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-muted);
}

.landing-resume-remove-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.landing-resume-remove-btn:hover svg {
    stroke: var(--vc-status-unsupported);
}

/* ===== LEGACY SUPPORT - OLD HTML STRUCTURE ===== */
/* These styles support the old HTML structure for backwards compatibility */

.landing-upload-split-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.landing-upload-zone-compact {
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.landing-upload-zone-compact:hover,
.landing-upload-zone-compact.drag-over {
    border-color: rgba(67, 132, 255, 0.4);
    background: rgba(67, 132, 255, 0.05);
}

.landing-upload-zone-compact .landing-upload-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 0;
}

.landing-upload-zone-compact .landing-upload-text {
    font-size: 15px;
    margin-bottom: 0;
}

.landing-files-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
}

.landing-check-icon {
    width: 22px;
    height: 22px;
    color: var(--vc-status-supported);
}

.landing-files-size {
    font-size: 14px;
    color: var(--text-muted);
}

.landing-files-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
}

/* Legacy file item styles */
.landing-file-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.landing-file-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.2), rgba(67, 132, 255, 0.1));
    color: #4384ff;
    flex-shrink: 0;
}

.landing-file-details {
    flex: 1;
    min-width: 0;
}

.landing-file-details .landing-file-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.landing-file-details .landing-file-size {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 3px;
}

/* ===== SOCIAL PROOF SECTION ===== */
.landing-social-proof {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 8px;
    padding: 12px 0;
}

/* Credibility Markers */
/* Credibility Markers */
.landing-credibility-markers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}

.landing-credibility-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.landing-credibility-item svg {
    width: 20px;
    height: 20px;
    opacity: 0.6;
}

.landing-credibility-divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

[data-theme="light"] .landing-credibility-divider {
    background: rgba(15, 23, 42, 0.15);
}

/* Early Adopter Count */
.landing-adopter-count {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    background: rgba(67, 132, 255, 0.06);
    border: 1px solid rgba(67, 132, 255, 0.12);
    border-radius: 100px;
}

.landing-adopter-avatars {
    display: flex;
    align-items: center;
}

.landing-adopter-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--bg-dark, #0a0a0a);
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: white;
    margin-left: -8px;
}

.landing-adopter-avatar:first-child {
    margin-left: 0;
}

.landing-adopter-avatar:nth-child(1) {
    background: linear-gradient(135deg, #4384ff, #7b42ff);
}
.landing-adopter-avatar:nth-child(2) {
    background: linear-gradient(135deg, var(--vc-status-supported), #059669);
}
.landing-adopter-avatar:nth-child(3) {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}
.landing-adopter-avatar:nth-child(4) {
    background: linear-gradient(135deg, #ec4899, #be185d);
}

.landing-adopter-text {
    font-size: 15px;
    color: var(--text-secondary);
}

.landing-adopter-text strong {
    color: var(--text-primary);
    font-weight: 600;
}

[data-theme="light"] .landing-adopter-avatar {
    border-color: #f0f4f8;
}

[data-theme="light"] .landing-adopter-count {
    background: rgba(67, 132, 255, 0.08);
    border-color: rgba(67, 132, 255, 0.15);
}

/* Testimonial Card */
.landing-testimonial {
    max-width: 550px;
    text-align: center;
    padding: 28px 36px;
    background: var(--vc-glass-bg);
    border: 1px solid var(--vc-border-default);
    border-radius: 18px;
    position: relative;
}

.landing-testimonial::before {
    content: '"';
    position: absolute;
    top: 14px;
    left: 24px;
    font-size: 52px;
    font-family: Georgia, serif;
    color: var(--brand-blue);
    opacity: 0.3;
    line-height: 1;
}

.landing-testimonial-text {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 18px;
}

.landing-testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.landing-testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: white;
}

.landing-testimonial-info {
    text-align: left;
}

.landing-testimonial-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.landing-testimonial-role {
    font-size: 13px;
    color: var(--text-muted);
}

[data-theme="light"] .landing-testimonial {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(15, 23, 42, 0.08);
}

/* Logo Bar */
.landing-logo-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.landing-logo-bar-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.landing-logo-bar-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    flex-wrap: wrap;
    opacity: 0.5;
}

.landing-logo-bar-logos img {
    height: 28px;
    filter: grayscale(100%) brightness(2);
}

[data-theme="light"] .landing-logo-bar-logos img {
    filter: grayscale(100%) brightness(0.5);
}

/* ===== LIGHT THEME ADJUSTMENTS ===== */
[data-theme="light"] .landing-upload-container {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .landing-upload-container:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(67, 132, 255, 0.2);
}

[data-theme="light"] .landing-tabs {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .landing-tab:hover:not(.active) {
    background: rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .landing-content-area {
    border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .landing-content-area:hover {
    background: rgba(67, 132, 255, 0.03);
}

[data-theme="light"] .landing-file-item {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .landing-ambient-orb {
    opacity: 0.15;
}

[data-theme="light"] .landing-add-more-zone {
    border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .landing-upload-zone-compact {
    border-color: rgba(15, 23, 42, 0.12);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .landing-main-container {
        padding: 70px 20px 40px;
    }
    
    .landing-hero-title {
        font-size: 36px;
    }
    
    .landing-hero-subtitle {
        font-size: 18px;
    }
    
    .landing-upload-container {
        padding: 24px;
    }
    
    .landing-tabs {
        flex-direction: column;
    }
    
    .landing-trust-section {
        flex-direction: column;
        gap: 14px;
    }
    
    .landing-trust-divider {
        display: none;
    }
    
    .landing-credibility-markers {
        flex-direction: column;
        gap: 14px;
    }
    
    .landing-credibility-divider {
        display: none;
    }
    
    .landing-adopter-count {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* ===== INFO BANNER ===== */
.vc-info-banner-container {
    margin-bottom: 28px;
}

.vc-info-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: rgba(67, 132, 255, 0.06);
    border: 1px solid rgba(67, 132, 255, 0.15);
    border-radius: 14px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.5;
}

.vc-info-icon-circle {
    width: 26px;
    height: 26px;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

/* Gradient border */
.vc-info-icon-circle::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.vc-info-letter {
    color: var(--brand-blue);
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    position: relative;
    z-index: 1;
}

.vc-info-banner-text {
    flex: 1;
}

.vc-info-dismiss-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.vc-info-dismiss-btn:hover {
    background: var(--vc-bg-input-hover);
    color: var(--text-secondary);
}

/* ===== NAV INFO BUTTON - Match banner icon style ===== */
.vc-nav-info-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

/* Gradient border */
.vc-nav-info-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.vc-nav-info-btn .vc-info-letter {
    color: var(--brand-blue);
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    position: relative;
    z-index: 1;
}

.vc-nav-info-btn:hover {
    transform: scale(1.05);
}

.vc-nav-info-btn:hover::before {
    box-shadow: 0 0 12px rgba(67, 132, 255, 0.4);
}

/* ===== PRIVACY MODAL STYLES ===== */
.privacy-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.privacy-modal-overlay.privacy-modal-active {
    opacity: 1;
    visibility: visible;
}

.privacy-modal-content {
    background: linear-gradient(145deg, var(--vc-bg-surface), var(--vc-bg-body));
    border: 1px solid var(--vc-border-emphasis);
    border-radius: 22px;
    padding: 36px;
    max-width: 560px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.privacy-modal-active .privacy-modal-content {
    transform: translateY(0);
}

.privacy-modal-header {
    text-align: center;
    margin-bottom: 28px;
}

.privacy-lock-icon {
    color: var(--vc-status-supported);
    margin-bottom: 18px;
}

.privacy-modal-header h2 {
    font-size: 26px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.privacy-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.privacy-features-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 28px;
}

.privacy-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    background: var(--vc-glass-bg);
    border-radius: 12px;
}

.privacy-feature-icon {
    width: 40px;
    height: 40px;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vc-status-supported);
    flex-shrink: 0;
}

.privacy-feature-icon.icon-key {
    background: rgba(67, 132, 255, 0.15);
    color: #4384ff;
}

.privacy-feature-icon.icon-trash {
    background: rgba(156, 163, 175, 0.15);
    color: var(--vc-text-tertiary);
}

/* ===== GRADIENT ICONS FOR PRIVACY MODAL ===== */
.privacy-lock-icon-wrapper {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.12), rgba(123, 66, 255, 0.12));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.privacy-feature-icon.privacy-icon-gradient {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.12), rgba(123, 66, 255, 0.12));
    color: #4384ff;
}

/* ===== IMPROVED FONT SIZES FOR READABILITY ===== */
.privacy-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.privacy-feature-text p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

.privacy-checkbox-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
    line-height: 1.5;
}

/* ===== CONSISTENT SPACING ===== */
.privacy-features-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.privacy-consent-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.privacy-modal-footer {
    display: flex;
    gap: 14px;
    margin-top: 24px;
}

/* ===== COMPACT SCREEN 1 PRIVACY MODAL ===== */
#screen1PrivacyConsentModal .privacy-modal-content {
    padding: 28px;
}

#screen1PrivacyConsentModal .privacy-modal-header {
    margin-bottom: 20px;
}

#screen1PrivacyConsentModal .privacy-lock-icon-wrapper {
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
}

#screen1PrivacyConsentModal .privacy-modal-header h2 {
    font-size: 24px;
    margin-bottom: 8px;
}

#screen1PrivacyConsentModal .privacy-subtitle {
    font-size: 14px;
}

#screen1PrivacyConsentModal .privacy-modal-body {
    padding: 0;
}

#screen1PrivacyConsentModal .privacy-features-list {
    gap: 12px;
    margin-bottom: 20px;
}

#screen1PrivacyConsentModal .privacy-feature-item {
    padding: 12px;
}

#screen1PrivacyConsentModal .privacy-feature-icon {
    width: 36px;
    height: 36px;
}

#screen1PrivacyConsentModal .privacy-feature-text strong {
    font-size: 14px;
}

#screen1PrivacyConsentModal .privacy-feature-text p {
    font-size: 13px;
    line-height: 1.4;
}

#screen1PrivacyConsentModal .privacy-consent-section {
    gap: 10px;
    padding-top: 18px;
}

#screen1PrivacyConsentModal .privacy-consent-checkbox {
    padding: 12px;
}

#screen1PrivacyConsentModal .privacy-modal-footer {
    margin-top: 18px;
}

/* ===== OPTIONAL TAG INLINE ===== */
.optional-tag {
    font-weight: 400;
    opacity: 0.5;
    font-size: 14px;
}

/* ===== CUSTOM STYLED CHECKBOXES ===== */
.privacy-consent-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: var(--vc-glass-bg);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border: 1px solid transparent;
}

.privacy-consent-checkbox:hover {
    background: rgba(255, 255, 255, 0.04);
}

.privacy-consent-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.privacy-consent-checkbox .custom-checkbox {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-top: 1px;
}

.privacy-consent-checkbox .custom-checkbox::after {
    content: '';
    width: 6px;
    height: 10px;
    border: solid transparent;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s ease;
    margin-top: -2px;
}

.privacy-consent-checkbox input[type="checkbox"]:checked + .custom-checkbox {
    background: linear-gradient(135deg, #4384ff, #7b42ff);
    border-color: transparent;
}

.privacy-consent-checkbox input[type="checkbox"]:checked + .custom-checkbox::after {
    border-color: white;
    transform: rotate(45deg) scale(1);
}

.privacy-consent-checkbox:hover .custom-checkbox {
    border-color: rgba(67, 132, 255, 0.5);
}

.privacy-consent-checkbox .checkbox-label {
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.5;
}

/* ===== OPTIONAL FEATURE STYLING ===== */
.privacy-consent-checkbox.optional-feature {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.12);
}

.privacy-consent-checkbox.optional-feature:hover {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.18);
}

/* ===== MANDATORY CHECKBOX HIGHLIGHT ANIMATION ===== */
@keyframes consentRequiredPulse {
    0% {
        border-color: rgba(255, 100, 100, 0.6);
        box-shadow: 0 0 0 0 rgba(255, 100, 100, 0.4);
    }
    50% {
        border-color: rgba(255, 100, 100, 0.8);
        box-shadow: 0 0 0 8px rgba(255, 100, 100, 0);
    }
    100% {
        border-color: rgba(255, 100, 100, 0.6);
        box-shadow: 0 0 0 0 rgba(255, 100, 100, 0);
    }
}

.privacy-consent-checkbox.consent-required-highlight {
    border: 1px solid rgba(255, 100, 100, 0.6);
    background: rgba(255, 100, 100, 0.08);
    animation: consentRequiredPulse 0.6s ease-out 2;
}

.privacy-consent-checkbox.consent-required-highlight .custom-checkbox {
    border-color: rgba(255, 100, 100, 0.7);
}

/* ===== BUTTON STYLING ===== */
.consent-btn-cancel {
    flex: 1;
    padding: 16px 28px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    background: var(--vc-bg-input-hover);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--vc-text-primary);
    transition: all 0.2s ease;
}

.consent-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.consent-btn-accept {
    flex: 1.5;
    padding: 16px 32px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(135deg, #4384ff 0%, #7b42ff 100%);
    color: white;
    border: none;
    transition: all 0.2s ease;
}

.consent-btn-accept:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.consent-btn-accept:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(67, 132, 255, 0.35);
}

/* ===== LIGHT THEME FOR PRIVACY MODAL ===== */
[data-theme="light"] .privacy-modal-content {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 1px solid rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .privacy-lock-icon-wrapper {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.1), rgba(123, 66, 255, 0.1));
}

[data-theme="light"] .privacy-modal-header h2 {
    color: #1e293b;
}

[data-theme="light"] .privacy-subtitle {
    color: #64748b;
}

[data-theme="light"] .privacy-feature-item {
    background: rgba(15, 23, 42, 0.02);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .privacy-feature-item:hover {
    background: rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .privacy-feature-icon.privacy-icon-gradient {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.1), rgba(123, 66, 255, 0.1));
}

[data-theme="light"] .privacy-feature-text strong {
    color: #1e293b;
}

[data-theme="light"] .privacy-feature-text p {
    color: #64748b;
}

[data-theme="light"] .privacy-consent-section {
    border-top-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .privacy-consent-checkbox {
    background: rgba(15, 23, 42, 0.02);
    border-color: transparent;
}

[data-theme="light"] .privacy-consent-checkbox:hover {
    background: rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .privacy-consent-checkbox .custom-checkbox {
    border-color: rgba(15, 23, 42, 0.25);
    background: #ffffff;
}

[data-theme="light"] .privacy-consent-checkbox:hover .custom-checkbox {
    border-color: rgba(67, 132, 255, 0.5);
}

[data-theme="light"] .privacy-consent-checkbox .checkbox-label {
    color: #1e293b;
}

[data-theme="light"] .privacy-checkbox-content strong {
    color: #1e293b;
}

[data-theme="light"] .privacy-checkbox-description {
    color: #64748b;
}

[data-theme="light"] .optional-tag {
    color: #94a3b8;
}

[data-theme="light"] .privacy-consent-checkbox.optional-feature {
    background: transparent;
    border: 1px dashed rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .privacy-consent-checkbox.optional-feature:hover {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.25);
}

[data-theme="light"] .privacy-consent-checkbox.consent-required-highlight {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.05);
}

[data-theme="light"] .privacy-consent-checkbox.consent-required-highlight .custom-checkbox {
    border-color: rgba(239, 68, 68, 0.6);
}

[data-theme="light"] .consent-btn-cancel {
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.12);
    color: #475569;
}

[data-theme="light"] .consent-btn-cancel:hover {
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.2);
    color: #1e293b;
}

[data-theme="light"] .consent-btn-accept {
    box-shadow: 0 4px 12px rgba(67, 132, 255, 0.25);
}

[data-theme="light"] .consent-btn-accept:not(:disabled):hover {
    box-shadow: 0 8px 24px rgba(67, 132, 255, 0.35);
}

/* ================================================================
   LANDING PAGE - ADDITIONAL LIGHT THEME FIXES
   ================================================================ */

/* === CREDIBILITY MARKERS - GRADIENT ICONS === */
.landing-credibility-item svg {
    stroke: url(#icon-gradient-blue-purple);
    opacity: 1;
}

[data-theme="light"] .landing-credibility-item {
    color: #475569;
}

/* === TRUST SIGNALS - GRADIENT ICONS === */
.landing-trust-item svg {
    stroke: url(#icon-gradient-blue-purple);
    opacity: 1;
}

[data-theme="light"] .landing-trust-section {
    color: #475569;
}

[data-theme="light"] .landing-trust-item {
    color: #475569;
}

[data-theme="light"] .landing-trust-divider {
    background: rgba(15, 23, 42, 0.15);
}

/* === WORK AREA ICONS - GRADIENT === */
.landing-content-area .landing-upload-icon {
    stroke: url(#icon-gradient-blue-purple);
}

/* === TAB ICONS - GRADIENT === */
.landing-tab-icon {
    stroke: url(#icon-gradient-blue-purple) !important;
}

.landing-tab.active .landing-tab-icon {
    stroke: white !important;
}

/* === TAB HOVER - LIGHT THEME === */
[data-theme="light"] .landing-tab {
    color: #475569;
}

[data-theme="light"] .landing-tab:hover:not(.active) {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.04);
}

/* === INFO BANNER ICON - GRADIENT === */
.vc-info-icon-circle svg {
    stroke: url(#icon-gradient-blue-purple);
}

[data-theme="light"] .vc-info-icon-circle {
    background: rgba(67, 132, 255, 0.12);
    border-color: rgba(67, 132, 255, 0.25);
}

[data-theme="light"] .vc-info-banner-text {
    color: #475569;
}

/* ======================================================================== */
/* DOCUMENT NAMING MODAL                                                    */
/* ======================================================================== */

.dnm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dnm-overlay.active {
    opacity: 1;
    visibility: visible;
}

.dnm-modal {
    background: linear-gradient(145deg, var(--vc-bg-surface), var(--vc-bg-base));
    border: 1px solid var(--vc-border-emphasis);
    border-radius: 16px;
    padding: 32px;
    width: 100%;
    max-width: 480px;
    margin: 20px;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s ease;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.dnm-overlay.active .dnm-modal {
    transform: translateY(0) scale(1);
}

.dnm-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.dnm-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #4384ff, #7b42ff);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dnm-icon svg {
    width: 24px;
    height: 24px;
    stroke: white;
}

.dnm-title-group {
    flex: 1;
}

.dnm-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--vc-text-primary);
    margin: 0 0 4px 0;
}

.dnm-subtitle {
    font-size: 14px;
    color: var(--vc-text-secondary);
    margin: 0;
}

.dnm-input-group {
    margin-bottom: 24px;
}

.dnm-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--vc-text-secondary);
    margin-bottom: 8px;
}

.dnm-input {
    width: 100%;
    padding: 14px 16px;
    background: var(--vc-bg-input-hover);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    font-size: 15px;
    color: var(--vc-text-primary);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.dnm-input:focus {
    outline: none;
    border-color: #4384ff;
    background: rgba(67, 132, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(67, 132, 255, 0.15);
}

.dnm-input::placeholder {
    color: var(--vc-text-disabled);
}

.dnm-hint {
    font-size: 12px;
    color: var(--vc-text-muted);
    margin-top: 8px;
}

.dnm-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.dnm-btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.dnm-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--vc-text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.dnm-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--vc-text-primary);
}

.dnm-btn-primary {
    background: linear-gradient(135deg, #4384ff, #7b42ff);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(67, 132, 255, 0.3);
}

.dnm-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(67, 132, 255, 0.4);
}

/* Light Theme Adjustments */
[data-theme="light"] .dnm-modal {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .dnm-title {
    color: #0f172a;
}

[data-theme="light"] .dnm-subtitle {
    color: #64748b;
}

[data-theme="light"] .dnm-label {
    color: #475569;
}

[data-theme="light"] .dnm-input {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.12);
    color: #0f172a;
}

[data-theme="light"] .dnm-input:focus {
    background: rgba(67, 132, 255, 0.05);
    border-color: #4384ff;
}

[data-theme="light"] .dnm-input::placeholder {
    color: rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .dnm-hint {
    color: #64748b;
}

[data-theme="light"] .dnm-btn-secondary {
    background: rgba(0, 0, 0, 0.05);
    color: #475569;
    border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .dnm-btn-secondary:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #0f172a;
}

/* ======================================================================== */
/* === UNIFIED LANDING OVERRIDES ===                                        */
/* Screen 1 redesign: eyebrow badge, bold title, shimmer, hidden tabs,      */
/* standalone drop zone, format pills, centered CTA                         */
/* ======================================================================== */

/* --- Eyebrow badge --- */
.landing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px 5px 10px;
    background: rgba(129,140,248,0.08);
    border: 1px solid rgba(129,140,248,0.2);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #818CF8;
    letter-spacing: 0.2px;
    margin-bottom: 4px;
    padding: 6px 16px 6px 12px;
}
.landing-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3ECF8E;
    box-shadow: 0 0 8px rgba(62,207,142,0.5);
    flex-shrink: 0;
}

/* --- Title: bold, larger, NOT italic --- */
.landing-hero-title {
    font-weight: 700 !important;
    font-size: clamp(38px, 5vw, 56px) !important;
    letter-spacing: -1.5px !important;
}
.landing-hero-emphasis {
    font-style: normal !important;
}

/* --- Title shimmer on gradient text --- */
.landing-gradient-text {
    position: relative;
}
.landing-gradient-text::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(255,255,255,0.18) 45%, rgba(255,255,255,0.04) 55%, transparent 70%, transparent 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleShimmer 8s ease-in-out infinite;
}
@keyframes titleShimmer {
    0%, 60% { background-position: 100% 50%; }
    100% { background-position: -50% 50%; }
}

/* --- Subtitle: slightly larger with tighter max-width --- */
.landing-hero-subtitle {
    font-size: clamp(32px, 3.5vw, 40px) !important;
    line-height: 1.5 !important;
    max-width: 720px !important;
    letter-spacing: -0.3px !important;
}

/* --- Hide tabs, show only upload zone --- */
.landing-tabs {
    display: none !important;
}
#landing-upload-content {
    display: block !important;
}
#landing-paste-content,
#landing-url-content,
#landing-resume-content {
    display: none !important;
}

/* --- Upload container: fully transparent (no card since tabs are gone) --- */
.landing-upload-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}
.landing-upload-container:hover {
    background: transparent !important;
    border: none !important;
}

/* --- Drop zone: clean dashed border, no glow pseudo-element --- */
.landing-content-area.landing-file-upload-area {
    min-height: 240px !important;
    padding: 52px 32px 44px !important;
    border: 2px dashed rgba(129,140,248,0.2) !important;
    border-radius: 16px !important;
    background: rgba(22,25,34,0.6) !important;
}
/* Remove the animated glow border pseudo-element */
.landing-content-area.landing-file-upload-area::before {
    display: none !important;
}
.landing-content-area.landing-file-upload-area:hover {
    border-color: rgba(129,140,248,0.4) !important;
    background: rgba(129,140,248,0.03) !important;
}

/* --- Format pills --- */
.landing-format-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(150,145,175,0.12);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(80,85,104,1);
    font-family: 'IBM Plex Mono', monospace;
}

/* --- CTA button row: centered --- */
.landing-cta-button-row {
    justify-content: center !important;
}

/* --- Upload container: remove padding since tabs are gone --- */
.landing-upload-container {
    padding: 0 !important;
    border-radius: 16px !important;
    max-width: 780px !important;
    margin: 0 auto !important;
}

/* --- Drop zone hover: glow effect --- */
.landing-content-area.landing-file-upload-area:hover {
    border-color: rgba(129,140,248,0.4) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(129,140,248,0.1) !important;
}

/* --- Drop zone icon: larger to match mockup --- */
.landing-file-upload-area .landing-upload-icon {
    width: 68px !important;
    height: 68px !important;
}

/* --- Drop zone text: larger to match mockup --- */
.landing-file-upload-area .landing-upload-text {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--text-primary, #E8EAED) !important;
}
.landing-file-upload-area .landing-upload-subtext {
    font-size: 15px !important;
}

/* --- Format pills container --- */
.landing-format-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
    flex-wrap: wrap;
}

/* --- Reduce hero bottom margin for tighter layout --- */
.landing-hero-section {
    margin-bottom: 36px !important;
}

/* --- Trust signals: center and match drop zone width --- */
.landing-social-proof {
    margin-bottom: 36px !important;
}

/* --- Hide the "how it works" section if it exists --- */
.landing-how-it-works {
    display: none !important;
}

/* --- UNIFIED: Refined ambient background (match v4 mockup exactly) --- */
/* Orbs: indigo/purple, elliptical, alternate drift, exact mockup values */
.landing-ambient-orb {
    filter: blur(90px) !important;
    opacity: 1 !important;
    animation: orbDriftUnified var(--orb-dur, 18s) ease-in-out infinite alternate !important;
    will-change: transform;
}
.landing-ambient-orb-1 {
    width: 720px !important;
    height: 480px !important;
    background: radial-gradient(ellipse, rgba(99,102,241,0.18) 0%, transparent 70%) !important;
    top: -180px !important;
    left: -160px !important;
    --orb-dur: 20s;
}
.landing-ambient-orb-2 {
    width: 580px !important;
    height: 420px !important;
    background: radial-gradient(ellipse, rgba(114,104,216,0.13) 0%, transparent 70%) !important;
    bottom: -120px !important;
    right: -100px !important;
    --orb-dur: 25s;
    animation-direction: alternate-reverse !important;
}
.landing-ambient-orb-3 {
    width: 400px !important;
    height: 320px !important;
    background: radial-gradient(ellipse, rgba(45,212,191,0.07) 0%, transparent 70%) !important;
    top: 45% !important;
    right: auto !important;
    left: 55% !important;
    --orb-dur: 31s;
}
@keyframes orbDriftUnified {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(30px, -20px) scale(1.04); }
    66%  { transform: translate(-15px, 25px) scale(0.97); }
    100% { transform: translate(20px, 10px) scale(1.02); }
}

/* --- Drop zone input mode — premium active state --- */
#landing-drop-zone.input-mode {
    align-items: stretch !important;
    padding: 0 !important;
    cursor: text !important;
    border-style: solid !important;
    border-color: rgba(129,140,248,0.3) !important;
    background: rgba(15,17,23,0.95) !important;
    box-shadow: 0 0 30px rgba(129,140,248,0.08), 0 20px 60px rgba(0,0,0,0.4) !important;
}
#landing-drop-zone.input-mode #dropzone-placeholder { display: none !important; }
#landing-drop-zone.input-mode #dropzone-input-wrap { display: flex !important; }

/* Remove inner border/glow from content area in input mode */
#landing-drop-zone.input-mode.landing-content-area,
#landing-drop-zone.input-mode {
    border: 1px solid rgba(129,140,248,0.25) !important;
    border-style: solid !important;
}
#landing-drop-zone.input-mode::before {
    display: none !important;
}

/* Textarea inside drop zone */
#dropzone-textarea {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #E8EAED !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    padding: 24px 24px 12px !important;
    font-family: 'DM Sans', sans-serif !important;
}
#dropzone-textarea::placeholder {
    color: #505568 !important;
    font-style: italic;
}

/* Toolbar at bottom of input mode */
#dropzone-input-wrap > div:last-child {
    border-top: 1px solid rgba(129,140,248,0.1) !important;
    padding: 12px 24px !important;
    background: transparent !important;
}

/* Keep old nav + info button permanently hidden — progress sidebar replaces them */
#mainNav,
nav:not(.site-nav),
#vcNavInfoContainer {
    display: none !important;
    visibility: hidden !important;
}

/* Hide Screen 2 config section until content is loaded */
/* The prism bar is the first real content added by JS */
#cs-config-section:not(:has(.prism-bar-fullwidth)):not(:has(.cs-content-area)) {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Grid pattern overlay — disabled, too visible */
.landing-grid-overlay {
    display: none;
}

/* Noise texture overlay */
.landing-noise-overlay {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
}

/* --- UNIFIED: Scale Screen 1 content up 10% (110% effective zoom) --- */
#screen1Container {
    zoom: 1.15;
    overflow: hidden;
    max-height: 100vh;
}
/* Brand bar is outside screen1Container — no zoom compensation needed */

/* --- UNIFIED: Background color to match v4 mockup --- */
/* Mockup bg is slightly warmer/lighter than the app default #0F1117 */
#screen1Container {
    background: #0F1117 !important;
}
/* The body/page bg behind Screen 1 — match the mockup's deeper tone */
body {
    background-color: #0F1117 !important;
}

/* --- UNIFIED: Icon colors — match mockup's softer purple (not blue) --- */
/* Trust signal icons: softer indigo matching the accent */
.landing-credibility-item svg {
    stroke: #818CF8 !important;
    color: #818CF8 !important;
}
/* Use gradient stroke for trust icons (matching mockup's purple tint) */
.landing-credibility-item svg path,
.landing-credibility-item svg circle {
    stroke: #818CF8 !important;
}
/* Value prop icons: same soft indigo */
.landing-trust-section .landing-trust-item svg path,
.landing-trust-section .landing-trust-item svg circle {
    stroke: #818CF8 !important;
}

/* Drop zone upload icon: indigo, not blue */
.landing-file-upload-area .landing-upload-icon path {
    stroke: #818CF8 !important;
}

/* Eyebrow dot: keep green, but the eyebrow border/bg uses indigo */

/* --- UNIFIED: Color adjustments to match v4 mockup --- */
/* Subtitle: brighter text */
.landing-hero-subtitle {
    color: #8B90A0 !important;
}
.landing-hero-subtitle strong {
    color: #E8EAED !important;
    font-weight: 600 !important;
}

/* Trust signal / credibility text: brighter */
.landing-credibility-item {
    color: #A8ADBE !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
}
.landing-credibility-item svg {
    width: 20px !important;
    height: 20px !important;
    color: #818CF8 !important;
    opacity: 0.7 !important;
}
.landing-credibility-divider {
    background: rgba(255,255,255,0.15) !important;
}

/* Drop zone title: white */
.landing-file-upload-area .landing-upload-text {
    color: #E8EAED !important;
}
/* Drop zone subtitle: visible gray */
.landing-file-upload-area .landing-upload-subtext {
    color: #8B90A0 !important;
}
/* Drop zone icon: brighter */
.landing-file-upload-area .landing-upload-icon {
    opacity: 0.7 !important;
}
/* Drop zone background: slightly lighter */
.landing-content-area.landing-file-upload-area {
    background: rgba(22,25,34,0.95) !important;
    border-color: rgba(129,140,248,0.2) !important;
}

/* Format pills: more visible */
.landing-format-pill {
    color: #8B90A0 !important;
    border-color: rgba(150,145,175,0.18) !important;
    background: rgba(255,255,255,0.04) !important;
}

/* Value props: bold, larger to match subtitle weight */
.landing-trust-item {
    color: #A8ADBE !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}
.landing-trust-item svg {
    width: 22px !important;
    height: 22px !important;
    color: #818CF8 !important;
    opacity: 0.7 !important;
}
.landing-trust-divider {
    background: rgba(255,255,255,0.10) !important;
}

/* --- UNIFIED: Landing page top bar (logo left, trust signals right) --- */
.landing-brand {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
}
.landing-brand-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}
.landing-topbar-signals {
    display: flex;
    align-items: center;
    gap: 20px;
}
.landing-topbar-signals .landing-credibility-item {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #8B90A0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.landing-topbar-signals .landing-credibility-item svg {
    width: 14px !important;
    height: 14px !important;
    color: #818CF8 !important;
    opacity: 0.6 !important;
    flex-shrink: 0;
}
.landing-topbar-signals .landing-credibility-divider {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .landing-topbar-signals { display: none; }
}
.landing-brand-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.landing-brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.landing-brand-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #E8EAED);
    letter-spacing: -0.3px;
    line-height: 1.2;
}
.landing-brand-mojo {
    font-size: 11px;
    font-weight: 400;
    font-style: italic;
    color: #818CF8;
    letter-spacing: 0.2px;
    opacity: 0.6;
}
@media (max-width: 600px) {
    .landing-brand { left: 16px; }
    .landing-brand-name { font-size: 16px; }
    .landing-brand-mojo { display: none; }
}

/* --- UNIFIED: Hide product switcher + all sidebars on Screen 1 landing --- */
/* In unified mode there's no product to switch and no sidebar on landing. */
/* Sidebars are re-shown by JS (show()) when entering Screen 2+. */
.product-switcher-container,
#productSwitcherContainer,
.app-sidebar,
.app-sidebar.visible,
#appSidebar,
.progress-sidebar,
.progress-sidebar.visible {
    display: none !important;
}

/* Re-enable sidebars when body has ps-sidebar-visible (set by JS on Screen 2+) */
body.ps-sidebar-visible .progress-sidebar,
body.ps-sidebar-visible .progress-sidebar.visible {
    display: flex !important;
}
body.sidebar-visible .app-sidebar,
body.sidebar-visible .app-sidebar.visible,
body.sidebar-visible #appSidebar {
    display: flex !important;
}

/* --- UNIFIED: Hide "Begin Analysis" on initial landing state --- */
/* Button becomes visible via JS when user provides input (file/text/URL) */
.landing-extract-btn[disabled] {
    display: none !important;
}
.landing-cta-section {
    margin-top: 24px !important;
    padding-top: 0 !important;
}

/* --- UNIFIED: Wider drop zone to match trust signals width --- */
.landing-upload-container {
    max-width: 780px !important;
    width: 100% !important;
}

/* --- UNIFIED: Distribute content across full viewport height --- */
.landing-main-container {
    padding-top: clamp(80px, 12vh, 140px) !important;
    padding-bottom: clamp(40px, 6vh, 80px) !important;
    min-height: 100vh !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

/* Scale spacing generously with viewport */
.landing-hero-section {
    margin-bottom: clamp(28px, 5vh, 56px) !important;
}
.landing-hero-title {
    font-size: clamp(38px, 5.5vw, 64px) !important;
    margin-bottom: clamp(16px, 3vh, 28px) !important;
}
.landing-hero-subtitle {
    font-size: clamp(24px, 2.5vw, 28px) !important;
}
.landing-eyebrow {
    margin-bottom: 14px !important;
}
/* Layout order: Title → Subtitle → Trust Signals → Drop Zone → Value Props */
.landing-hero-section {
    margin-bottom: clamp(20px, 3vh, 32px) !important;
}
/* New layout order: eyebrow → trust signals → title → subtitle → features → drop zone → deliverables */
/* Trust signals now inside hero section (no order needed) */
.landing-social-proof {
    margin-bottom: clamp(16px, 2.5vh, 28px) !important;
    margin-top: 0 !important;
}
.landing-hero-subtitle {
    text-align: center !important;
    margin: 0 auto clamp(16px, 2.5vh, 24px) !important;
    max-width: 800px !important;
}

/* --- Manifesto (Version 30) --- */
.landing-manifesto {
    text-align: center;
    margin: 0 auto clamp(20px, 3vh, 32px);
    max-width: 700px;
}
.landing-manifesto-line {
    font-size: clamp(18px, 2.2vw, 22px);
    color: #8B90A0;
    line-height: 1.8;
    font-weight: 400;
    margin: 0;
    letter-spacing: 0.1px;
}
.landing-manifesto-resolution {
    font-size: clamp(18px, 2.2vw, 22px);
    color: #E8EAED;
    line-height: 1.8;
    font-weight: 500;
    margin: clamp(12px, 2vh, 20px) 0 0;
    letter-spacing: 0.1px;
}
.landing-manifesto-resolution strong {
    color: #818CF8;
    font-weight: 600;
}

/* --- Founder vision quote --- */
.landing-founder-quote {
    text-align: center;
    margin: clamp(32px, 5vh, 56px) auto 0;
    max-width: 620px;
    padding: 0 20px;
}
.founder-quote-text {
    font-size: clamp(16px, 1.8vw, 19px);
    color: #7B8098;
    line-height: 1.75;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.15px;
    margin: 0;
    position: relative;
}
.founder-quote-mark {
    color: #818CF8;
    font-size: 1.6em;
    font-style: normal;
    font-weight: 700;
    opacity: 0.6;
    vertical-align: -0.1em;
}
.founder-quote-attribution {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}
.founder-quote-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4384ff 0%, #7b42ff 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
}
.founder-quote-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}
.founder-quote-name {
    font-size: 13px;
    font-weight: 600;
    color: #A8ADBE;
    letter-spacing: 0.2px;
}
.founder-quote-role {
    font-size: 12px;
    font-weight: 400;
    color: #505568;
    letter-spacing: 0.1px;
}

/* Features row between subtitle and drop zone */
.landing-features-row {
    margin-bottom: clamp(16px, 2.5vh, 24px);
    display: flex;
    justify-content: center;
    width: 100%;
}
/* Feature icons: match trust signal / deliverable color */
.landing-features-row .landing-trust-item svg {
    color: #818CF8 !important;
}
.landing-features-row .landing-trust-item svg path,
.landing-features-row .landing-trust-item svg circle {
    stroke: #818CF8 !important;
}
/* Features and drop zone: same width */
.landing-features-row,
.landing-upload-container {
    max-width: 100% !important;
    width: 100% !important;
}

/* Features row: no wrap, tighter gap */
.landing-features-row .landing-trust-row {
    gap: clamp(16px, 2.5vw, 32px) !important;
    flex-wrap: nowrap !important;
}
/* Deliverables below drop zone — lighter than features */
.landing-trust-section {
    margin-top: clamp(16px, 2.5vh, 24px) !important;
}
.landing-trust-section .landing-trust-item {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #8B90A0 !important;
    opacity: 0.8;
}
.landing-trust-section .landing-trust-item svg {
    width: 18px !important;
    height: 18px !important;
    opacity: 0.6 !important;
}
.landing-content-area.landing-file-upload-area {
    padding: clamp(36px, 6vh, 60px) clamp(24px, 3vw, 40px) clamp(32px, 5vh, 52px) !important;
    min-height: clamp(180px, 25vh, 280px) !important;
}
.landing-cta-section {
    margin-top: 24px !important;
    padding: 0 !important;
}
.landing-trust-section {
    margin-top: clamp(20px, 3vh, 32px) !important;
    gap: clamp(10px, 1.5vh, 16px) !important;
}

/* --- UNIFIED: Force Screen 0 hidden, Screen 1 visible --- */
/* This CSS override ensures the unified Screen 1 is shown immediately, */
/* even before JS runs. Beats the screen-0-product-selector.css !important rules. */
#screen0Container,
#screen0Container.app-screen,
.screen0-container,
.screen0-container.app-screen {
    display: none !important;
    visibility: hidden !important;
    z-index: -1 !important;
}

/* Screen 1 initial display is set inline in HTML (display:block).
   JS transitions set display:none when moving to Screen 2+.
   No !important here — let JS control visibility after initial load. */