/*
 * AuditGen Brain Identity Framework
 * Forensic Laboratory Aesthetic — "The Truth is in the Metadata."
 * Applied: 2026-04-05
 */

/* ─── Font Imports ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500;600&display=swap');

/* ─── Design Tokens (CSS Variable Override) ────────────────────────────────── */
:root {
    /* Forensic Palette */
    --bg-deep:       #FFFFFF;
    --bg-primary:    #FFFFFF;
    --bg-secondary:  #FFFFFF;
    --bg-elevated:   #F5F6FA;
    --bg-card:       #FFFFFF;

    /* Typography */
    --text-primary:   #1A1B41;
    --text-secondary: #3D3F6B;
    --text-muted:     #6B7280;
    --text-inverse:   #FFFFFF;

    /* Accent — Deep Indigo authority */
    --accent:         #1A1B41;
    --accent-warm:    #2D2E5E;
    --accent-hover:   #12133A;
    --accent-glow:    rgba(26, 27, 65, 0.08);
    --accent-light:   rgba(26, 27, 65, 0.06);

    /* Status — Forensic Signal Colors */
    --green:          #50C878;   /* Digital Emerald — Compliance Pass ONLY */
    --green-glow:     rgba(80, 200, 120, 0.12);
    --green-bg:       rgba(80, 200, 120, 0.08);
    --amber:          #FFD700;   /* Evidence Yellow — Warnings/Alerts */
    --amber-glow:     rgba(255, 215, 0, 0.18);
    --amber-bg:       rgba(255, 215, 0, 0.10);
    --red:            #E53E3E;
    --red-glow:       rgba(229, 62, 62, 0.12);
    --red-bg:         rgba(229, 62, 62, 0.06);
    --blue:           #1A1B41;
    --blue-glow:      rgba(26, 27, 65, 0.08);
    --indigo:         #1A1B41;

    /* Borders — clinical separation */
    --border:         #E2E4ED;
    --border-strong:  #C5C8DB;
    --border-light:   #F0F1F7;

    /* Typography Stack */
    --font-primary:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:      'Roboto Mono', 'JetBrains Mono', monospace;

    /* Spacing */
    --radius:   6px;
    --radius-lg: 10px;
    --radius-xl: 14px;

    /* Shadows — elevation */
    --shadow-sm:   0 1px 3px rgba(26,27,65,0.08), 0 1px 2px rgba(26,27,65,0.04);
    --shadow-md:   0 4px 12px rgba(26,27,65,0.10), 0 2px 4px rgba(26,27,65,0.06);
    --shadow-lg:   0 12px 32px rgba(26,27,65,0.12), 0 4px 8px rgba(26,27,65,0.06);
}

/* ─── Base Reset Override ───────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary) !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Override mono class everywhere */
.mono,
code,
pre {
    font-family: var(--font-mono) !important;
    color: var(--text-primary) !important;
}

/* ─── Navigation ────────────────────────────────────────────────────────────── */
.nav,
nav,
.navbar,
.header {
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--border) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100;
    padding: 0 40px !important;
    height: 60px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.nav-brand,
.nav-logo,
.brand,
.logo {
    font-family: var(--font-primary) !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    letter-spacing: -0.3px !important;
}

.nav-brand span,
.nav-logo span {
    color: var(--green) !important;
}

.nav-cta,
.nav-link,
.nav a:not(.nav-brand):not(.nav-logo) {
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    padding: 8px 18px !important;
    border-radius: var(--radius) !important;
    border: 1px solid var(--border) !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

.nav-cta:hover,
.nav-link:hover {
    background: var(--accent-light) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}

/* ─── Hero Section (Dark Deep Indigo) ──────────────────────────────────────── */
.hero {
    background: #1A1B41 !important;
    min-height: 88vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 80px 24px 80px !important;
    position: relative !important;
    overflow: hidden !important;
    color: #FFFFFF !important;
}

/* Subtle forensic grid on dark hero */
.hero::before {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 60%),
        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.03) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.03) 40px) !important;
    animation: none !important;
}

.hero::after {
    display: none !important;
}

/* ─── Typography System ─────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Hero text — light on dark Deep Indigo background */
.hero h1,
.hero-title,
.hero-headline {
    font-size: clamp(2.2rem, 5vw, 4rem) !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
}

.hero h2,
.hero h3 {
    color: #FFFFFF !important;
}

/* Remove gradient text effects — replace with Digital Emerald on dark hero */
.hero h1 span[style*="gradient"],
.hero-title span,
[class*="gradient-text"],
.gradient-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #50C878 !important;
    background-clip: unset !important;
    color: #50C878 !important;
}

.hero p,
.hero-sub,
.hero-subtitle,
.hero-description {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1.1rem !important;
    max-width: 560px !important;
    line-height: 1.7 !important;
}

/* Hero brand name, tagline, labels — all light on dark */
.hero .hero-brand,
.hero .hero-tagline,
.hero .section-eyebrow {
    color: rgba(255, 255, 255, 0.7) !important;
}

.hero .hero-brand {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Hero links and secondary text on dark bg */
.hero a:not([class]),
.hero .risk-line,
.hero .hero-deadline,
.hero .scan-counter-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

.hero .scan-counter-num,
.hero .hero-deadline strong {
    color: #FFD700 !important;
    -webkit-text-fill-color: #FFD700 !important;
}

.hero .risk-line strong {
    color: #ef4444 !important;
}

/* Hero buttons on dark bg */
.hero .btn-primary {
    background: #FFD700 !important;
    color: #1A1B41 !important;
    border-color: #FFD700 !important;
}

.hero .btn-primary:hover {
    background: #FFF176 !important;
    border-color: #FFF176 !important;
}

.hero .btn-ghost {
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.hero .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #FFFFFF !important;
}

/* ─── Buttons ───────────────────────────────────────────────────────────────── */

/* Primary CTA — Deep Indigo */
.btn-primary,
button[class*="primary"],
a[class*="primary"],
input[type="submit"],
.cta-primary,
.scan-btn,
.submit-btn {
    background: var(--accent) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--accent) !important;
    padding: 12px 28px !important;
    border-radius: var(--radius) !important;
    font-family: var(--font-primary) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.btn-primary:hover,
button[class*="primary"]:hover,
.cta-primary:hover,
.scan-btn:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(26,27,65,0.20) !important;
}

/* Ghost / Secondary button */
.btn-ghost,
.btn-secondary,
a[class*="ghost"],
button[class*="ghost"],
.cta-secondary {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-strong) !important;
    padding: 12px 28px !important;
    border-radius: var(--radius) !important;
    font-family: var(--font-primary) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.btn-ghost:hover,
.btn-secondary:hover,
button[class*="ghost"]:hover {
    background: var(--accent-light) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
    transform: translateY(-1px) !important;
}

/* ─── Cards & Containers ────────────────────────────────────────────────────── */
.card,
[class*="card"],
.feature,
.feature-card,
.tile,
[class*="tile"],
.box,
.panel,
[class*="panel"],
.report-section,
.metric-block,
.finding-card,
.result-card,
.scan-card {
    background: #FFFFFF !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.card:hover,
[class*="card"]:hover,
.feature:hover,
.feature-card:hover,
.tile:hover {
    box-shadow: var(--shadow-md) !important;
    border-color: var(--border-strong) !important;
}

/* Section backgrounds */
section,
.section {
    background: #FFFFFF !important;
}

/* ─── ALTERNATING SECTION SYSTEM ─────────────────────────────────────────── */
/* Deep Indigo section (dark background, light text) */
.section-indigo,
.section-dark,
[data-bg="indigo"] {
    background: #1A1B41 !important;
    color: #FFFFFF !important;
}

.section-indigo::before,
.section-dark::before {
    background: #1A1B41 !important;
}

.section-indigo::after,
.section-dark::after {
    background: none !important;
}

.section-indigo h1,
.section-indigo h2,
.section-indigo h3,
.section-indigo h4,
.section-indigo h5,
.section-indigo h6,
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
    color: #FFFFFF !important;
}

.section-indigo .section-heading,
.section-dark .section-heading {
    color: #FFFFFF !important;
}

.section-indigo .section-desc,
.section-dark .section-desc {
    color: rgba(255, 255, 255, 0.75) !important;
}

.section-indigo .section-eyebrow,
.section-dark .section-eyebrow {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Stark White section (light background, dark text) */
.section-white,
.section-light,
[data-bg="white"] {
    background: #FFFFFF !important;
    color: #1A1B41 !important;
}

.section-white::before,
.section-light::before {
    background: none !important;
}

.section-white::after,
.section-light::after {
    background: none !important;
}

.section-white h1,
.section-white h2,
.section-white h3,
.section-white h4,
.section-white h5,
.section-white h6,
.section-light h1,
.section-light h2,
.section-light h3,
.section-light h4,
.section-light h5,
.section-light h6 {
    color: #1A1B41 !important;
}

.section-white .section-heading,
.section-light .section-heading {
    color: #1A1B41 !important;
}

.section-white .section-desc,
.section-light .section-desc {
    color: #3D3F6B !important;
}

.section-white .section-eyebrow,
.section-light .section-eyebrow {
    color: #6B7280 !important;
}

/* Ensure child elements inside dark sections inherit transparent background
   (prevents stray white backgrounds from generic selectors) */
.section-indigo .section-inner,
.section-indigo .section-eyebrow,
.section-indigo .section-heading,
.section-indigo .section-desc,
.section-dark .section-inner,
.section-dark .section-eyebrow,
.section-dark .section-heading,
.section-dark .section-desc {
    background: transparent !important;
}

/* Cards on dark backgrounds */
.section-indigo .card,
.section-indigo [class*="card"],
.section-indigo .feature,
.section-indigo [class*="feature"],
.section-indigo .tile,
.section-indigo .panel,
.section-dark .card,
.section-dark [class*="card"],
.section-dark .feature,
.section-dark [class*="feature"],
.section-dark .tile,
.section-dark .panel {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
}

.section-indigo .card:hover,
.section-indigo [class*="card"]:hover,
.section-dark .card:hover,
.section-dark [class*="card"]:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
}

/* Comprehensive text color overrides for dark sections */
.section-indigo p,
.section-indigo span,
.section-indigo li,
.section-indigo div,
.section-indigo label,
.section-indigo td,
.section-dark p,
.section-dark span,
.section-dark li,
.section-dark div,
.section-dark label,
.section-dark td {
    color: rgba(255, 255, 255, 0.9) !important;
}

.section-indigo strong,
.section-dark strong {
    color: #FFFFFF !important;
}

/* Links on dark sections */
.section-indigo a:not([class]),
.section-dark a:not([class]) {
    color: #FFD700 !important;
    text-decoration-color: rgba(255, 215, 0, 0.3) !important;
}

.section-indigo a:not([class]):hover,
.section-dark a:not([class]):hover {
    text-decoration-color: #FFD700 !important;
}

/* Comprehensive text color overrides for white sections.
   NOTE: No !important — allows page-level overrides for dark sub-containers
   (e.g. .tier.best-value) within white sections. Removed div selectors
   since divs inherit color from parent, avoiding specificity conflicts. */
.section-white p,
.section-white span,
.section-white li,
.section-white label,
.section-white td,
.section-light p,
.section-light span,
.section-light li,
.section-light label,
.section-light td {
    color: #1A1B41;
}

.section-white strong,
.section-light strong {
    color: #1A1B41;
}

/* Buttons on dark backgrounds */
.section-indigo .btn-primary,
.section-indigo button[class*="primary"],
.section-dark .btn-primary,
.section-dark button[class*="primary"] {
    background: #FFD700 !important;
    color: #1A1B41 !important;
    border-color: #FFD700 !important;
}

.section-indigo .btn-primary:hover,
.section-indigo button[class*="primary"]:hover,
.section-dark .btn-primary:hover,
.section-dark button[class*="primary"]:hover {
    background: #FFF176 !important;
    border-color: #FFF176 !important;
}

.section-indigo .btn-ghost,
.section-indigo button[class*="ghost"],
.section-dark .btn-ghost,
.section-dark button[class*="ghost"] {
    background: transparent !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.section-indigo .btn-ghost:hover,
.section-dark .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Form inputs on dark backgrounds */
.section-indigo input,
.section-indigo textarea,
.section-indigo select,
.section-dark input,
.section-dark textarea,
.section-dark select {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
}

.section-indigo input::placeholder,
.section-indigo textarea::placeholder,
.section-dark input::placeholder,
.section-dark textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

.section-indigo input:focus,
.section-indigo textarea:focus,
.section-dark input:focus,
.section-dark textarea:focus {
    border-color: #FFD700 !important;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15) !important;
}

/* Panel backgrounds on white sections (like lab documents on dark desk) */
.section-white .panel,
.section-white .report-panel,
.section-white .scan-result,
.section-light .panel,
.section-light .report-panel,
.section-light .scan-result {
    background: #FFFFFF !important;
    border: 1px solid #E2E4ED !important;
}

/* Accent colors work on both */
.section-indigo .accent-text,
.section-dark .accent-text {
    color: #FFD700 !important;
}

.section-indigo .success-text,
.section-dark .success-text {
    color: #50C878 !important;
}

.section-white .accent-text,
.section-light .accent-text {
    color: #1A1B41 !important;
}

/* Alternating section treatment (legacy) */
.section-alt,
.bg-alt,
.section-secondary {
    background: #F8F9FC !important;
}

/* ─── HERO & INTRO SECTIONS ──────────────────────────────────────────── */
/* Hero is Dark Deep Indigo — set in .hero above */
.hero {
    background: #1A1B41 !important;
}

/* Trust strip and featured strip — also dark, continuing the hero vibe */
.trust-strip {
    background: #1A1B41 !important;
}

.featured-strip {
    background: #1A1B41 !important;
}

/* Trust badge styling for dark background */
.trust-badge {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Featured strip labels and logos on dark bg */
.featured-strip .featured-strip-label {
    color: rgba(255, 255, 255, 0.5) !important;
}

.featured-strip .featured-logo-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.featured-strip .featured-logo-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
}

/* ─── SECTION-SPECIFIC OVERRIDES ───────────────────────────────────────── */

/* Demo section (dark) — code blocks */
.section-indigo.demo .code-block {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.section-indigo.demo .code-header {
    background: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.section-indigo.demo .code-filename {
    color: rgba(255, 255, 255, 0.6) !important;
}

.section-indigo.demo .code-body {
    background: rgba(0, 0, 0, 0.25) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.section-indigo.demo .line-ctx {
    color: rgba(255, 255, 255, 0.6) !important;
}

.section-indigo.demo .line-add {
    background: rgba(80, 200, 120, 0.15) !important;
    color: #50C878 !important;
}

.section-indigo.demo .line-num {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Code child elements on dark section — transparent bg so dark parent shows through */
.section-indigo.demo .code-line {
    background: transparent !important;
}

.section-indigo.demo .code-dot.r {
    background: #ff5f57 !important;
}

.section-indigo.demo .code-dot.y {
    background: #ffbd2e !important;
}

.section-indigo.demo .code-dot.g {
    background: #28c840 !important;
}

/* Closing section (dark) */
.section-indigo.closing h2 {
    color: #FFFFFF !important;
}

.section-indigo.closing p {
    color: rgba(255, 255, 255, 0.75) !important;
}

.section-indigo.closing a:not([class]) {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Regulations section (dark) — override item backgrounds */
.section-indigo.regs .reg-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.section-indigo.regs .reg-name,
.section-indigo.regs .reg-detail {
    color: rgba(255, 255, 255, 0.85) !important;
}

.section-indigo.regs .reg-jurisdiction {
    color: #FFD700 !important;
}

.section-indigo.regs .reg-penalty {
    color: rgba(255, 215, 0, 0.85) !important;
}

/* How it works section (white) — steps are white on light bg */
.section-white.how .step-item {
    background: #FFFFFF !important;
    border: 1px solid #E2E4ED !important;
}

.section-white.how .step-num {
    color: rgba(26, 27, 65, 0.04) !important;
}

/* Pricing section (white) — tier cards */
.section-white.pricing .tier {
    background: #FFFFFF !important;
    border: 1px solid #E2E4ED !important;
    color: #1A1B41 !important;
}

.section-white.pricing .tier.featured {
    background: #FAFBFF !important;
    border-color: #1A1B41 !important;
}

.section-white.pricing .tier-badge {
    color: #1A1B41 !important;
}

.section-white.pricing .tier-name {
    color: #1A1B41 !important;
}

.section-white.pricing .tier-price-promo {
    color: #1A1B41 !important;
}

.section-white.pricing .tier-features li {
    color: #3D3F6B !important;
}

.section-white.pricing .tier-cta.outline {
    color: #1A1B41 !important;
}

.section-white.pricing .tier-cta.solid {
    background: #1A1B41 !important;
    color: #FFFFFF !important;
}

/* ─── Form Inputs ───────────────────────────────────────────────────────────── */
input,
textarea,
select,
.input,
[class*="input"],
[class*="field"] {
    background: #FFFFFF !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-primary) !important;
    border-radius: var(--radius) !important;
    padding: 12px 16px !important;
    font-size: 0.9rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    outline: none !important;
}

input:focus,
textarea:focus,
select:focus,
.input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(26,27,65,0.08) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.85rem !important;
}

/* ─── Code / Terminal Blocks ────────────────────────────────────────────────── */
.code-block,
pre,
.terminal,
.terminal-block,
.scanner-log {
    background: #F5F6FA !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    font-family: var(--font-mono) !important;
    color: var(--text-primary) !important;
    font-size: 0.82rem !important;
    line-height: 1.7 !important;
}

/* Terminal header */
.terminal-header,
.code-header {
    background: #ECEEF5 !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
}

/* ─── Status Badges ─────────────────────────────────────────────────────────── */

/* PASS / compliant */
.badge-pass,
.status-pass,
.compliant,
[class*="pass"],
.badge-green,
.status-green {
    background: var(--green-bg) !important;
    color: #2D8850 !important;
    border: 1px solid rgba(80,200,120,0.3) !important;
    border-radius: 4px !important;
    padding: 3px 10px !important;
    font-family: var(--font-mono) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

/* FAIL / violation */
.badge-fail,
.status-fail,
.violation,
[class*="fail"],
.badge-red,
.status-red {
    background: var(--red-bg) !important;
    color: #B91C1C !important;
    border: 1px solid rgba(229,62,62,0.3) !important;
    border-radius: 4px !important;
    padding: 3px 10px !important;
    font-family: var(--font-mono) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

/* WARNING — Evidence Yellow */
.badge-warn,
.badge-warning,
.status-warn,
.status-warning,
[class*="warn"],
.badge-amber,
.status-amber {
    background: var(--amber-bg) !important;
    color: #8B6914 !important;
    border: 1px solid rgba(255,215,0,0.4) !important;
    border-radius: 4px !important;
    padding: 3px 10px !important;
    font-family: var(--font-mono) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

/* ─── Evidence Tape Effect (for critical alerts) ─────────────────────────────── */
.evidence-alert,
.critical-alert,
[data-severity="critical"] {
    position: relative;
    background: repeating-linear-gradient(
        -45deg,
        var(--amber-bg),
        var(--amber-bg) 8px,
        rgba(255,215,0,0.04) 8px,
        rgba(255,215,0,0.04) 16px
    ) !important;
    border: 1.5px solid var(--amber) !important;
    border-radius: var(--radius) !important;
    padding: 14px 18px !important;
}

/* ─── Scan Page — Forensic Scan Animations ───────────────────────────────────── */

/* Deep-tissue scan pulse animation */
@keyframes forensicScanPulse {
    0%   { transform: scale(1); opacity: 0.8; }
    50%  { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}

@keyframes scanLineTraverse {
    0%   { top: 0%; opacity: 1; }
    95%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

@keyframes metadataReveal {
    0%   { opacity: 0; transform: translateX(-6px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes progressParse {
    0%   { width: 0%; }
    100% { width: 100%; }
}

@keyframes terminalBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Scanning state container */
.scanning,
.scan-in-progress,
[data-state="scanning"] {
    position: relative;
    overflow: hidden;
}

.scanning::after,
.scan-in-progress::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--green), transparent);
    animation: scanLineTraverse 2.5s linear infinite;
    pointer-events: none;
}

/* Progress bar — forensic parsing style */
.progress-bar,
[class*="progress-bar"],
.scan-progress {
    background: #ECEEF5 !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    height: 3px !important;
}

.progress-bar-fill,
[class*="progress-fill"],
.scan-progress-fill {
    background: var(--green) !important;
    height: 100% !important;
    border-radius: 2px !important;
    transition: width 0.3s ease !important;
}

/* Metadata parse field animation */
.metadata-field,
.parse-field,
[class*="metadata-"],
.scan-step {
    animation: metadataReveal 0.3s ease forwards;
    opacity: 0;
}

.metadata-field:nth-child(1)  { animation-delay: 0.0s; }
.metadata-field:nth-child(2)  { animation-delay: 0.1s; }
.metadata-field:nth-child(3)  { animation-delay: 0.2s; }
.metadata-field:nth-child(4)  { animation-delay: 0.3s; }
.metadata-field:nth-child(5)  { animation-delay: 0.4s; }
.metadata-field:nth-child(6)  { animation-delay: 0.5s; }

/* ─── Report / Certificate of Forensic Analysis ─────────────────────────────── */
.report-container,
.certificate,
[class*="report-container"] {
    background: #FFFFFF !important;
    border: 1px solid var(--border) !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

/* Report header — legal document feel */
.report-header,
.certificate-header {
    background: #F8F9FC !important;
    border-bottom: 2px solid var(--accent) !important;
    padding: 32px 40px !important;
    color: var(--text-primary) !important;
}

.report-header h1,
.certificate-header h1 {
    font-family: var(--font-primary) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: var(--text-primary) !important;
}

/* Report metadata block — like legal case file */
.report-meta,
.report-metadata,
.certificate-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: 20px 40px;
    background: #FAFBFD;
    border-bottom: 1px solid var(--border);
}

.report-meta-item,
.meta-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.report-meta-label,
.meta-label {
    font-family: var(--font-mono) !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--text-muted) !important;
}

.report-meta-value,
.meta-value {
    font-family: var(--font-primary) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

/* ─── Pricing Page ──────────────────────────────────────────────────────────── */
.pricing-card,
.plan-card,
[class*="pricing-card"],
[class*="plan-"] {
    background: #FFFFFF !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xl) !important;
    color: var(--text-primary) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.pricing-card:hover,
.plan-card:hover {
    box-shadow: var(--shadow-md) !important;
    border-color: var(--border-strong) !important;
}

/* Featured plan */
.pricing-card.featured,
.plan-card.featured,
.pricing-featured,
[class*="plan-featured"] {
    border-color: var(--accent) !important;
    border-width: 2px !important;
    background: #FAFBFF !important;
    box-shadow: var(--shadow-md) !important;
}

/* Price display */
/* Price display — no !important on color to allow dark-container overrides */
.price,
.plan-price,
[class*="price"] {
    color: var(--text-primary);
    font-weight: 800 !important;
    font-family: var(--font-primary) !important;
}

/* ─── Footer ────────────────────────────────────────────────────────────────── */
footer,
.footer {
    background: var(--text-primary) !important;
    color: rgba(255,255,255,0.6) !important;
    border-top: 1px solid var(--border) !important;
    padding: 48px 40px 32px !important;
}

.footer a,
footer a {
    color: rgba(255,255,255,0.7) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.footer a:hover,
footer a:hover {
    color: #FFFFFF !important;
}

.footer-brand,
.footer-logo {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-family: var(--font-primary) !important;
}

/* ─── Dashboard ─────────────────────────────────────────────────────────────── */
.sidebar,
.nav-sidebar {
    background: #F8F9FC !important;
    border-right: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

.sidebar a,
.sidebar-link,
.nav-sidebar a {
    color: var(--text-secondary) !important;
    font-family: var(--font-primary) !important;
    font-size: 0.875rem !important;
}

.sidebar a:hover,
.sidebar-link:hover,
.sidebar a.active,
.sidebar-link.active {
    color: var(--text-primary) !important;
    background: var(--accent-light) !important;
}

/* Stat / metric cards */
.stat-card,
.metric-card,
.kpi-card,
[class*="stat-card"],
[class*="metric-card"] {
    background: #FFFFFF !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 24px !important;
    box-shadow: var(--shadow-sm) !important;
}

.stat-label,
.metric-label,
.kpi-label {
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--text-muted) !important;
}

/* Stat values — no !important on color to allow colored stat overrides */
.stat-value,
.metric-value,
.kpi-value {
    font-family: var(--font-primary) !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: var(--text-primary);
    line-height: 1.1 !important;
}

/* ─── Hero Scan Input ───────────────────────────────────────────────────────── */
.hero-scan-form,
.scan-form,
.hero-input-group,
.repo-input-group {
    background: #FFFFFF !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-lg) !important;
    padding: 6px 6px 6px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 560px !important;
    width: 100% !important;
    box-shadow: var(--shadow-sm) !important;
}

.hero-scan-form input,
.scan-form input,
.hero-input-group input,
.repo-input-group input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    flex: 1 !important;
    font-size: 0.9rem !important;
}

/* ─── Section Headers ───────────────────────────────────────────────────────── */
.section-label,
.eyebrow,
.overline,
[class*="section-label"],
[class*="eyebrow"] {
    font-family: var(--font-mono) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--text-muted) !important;
    display: block !important;
    margin-bottom: 12px !important;
}

/* ─── Tables ────────────────────────────────────────────────────────────────── */
table {
    width: 100%;
    border-collapse: collapse;
}

th {
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--text-muted) !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    text-align: left !important;
    background: #F8F9FC !important;
}

td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
    font-size: 0.875rem !important;
}

tr:hover td {
    background: #FAFBFD !important;
}

/* ─── Dividers ──────────────────────────────────────────────────────────────── */
hr,
.divider {
    border: none !important;
    border-top: 1px solid var(--border) !important;
}

/* ─── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #F0F1F7;
}
::-webkit-scrollbar-thumb {
    background: #C5C8DB;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* ─── AuditGen Forensic Branding Mark ──────────────────────────────────────── */

/* Forensic grid background for hero — very subtle */
.forensic-grid {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(26,27,65,0.04) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(26,27,65,0.04) 40px);
    pointer-events: none;
    z-index: 0;
}

/* Forensic corner marks — "case file" feel */
.forensic-mark {
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: var(--accent);
    border-style: solid;
    border-width: 0;
}

.forensic-mark.tl { top: 20px; left: 20px; border-top-width: 2px; border-left-width: 2px; }
.forensic-mark.tr { top: 20px; right: 20px; border-top-width: 2px; border-right-width: 2px; }
.forensic-mark.bl { bottom: 20px; left: 20px; border-bottom-width: 2px; border-left-width: 2px; }
.forensic-mark.br { bottom: 20px; right: 20px; border-bottom-width: 2px; border-right-width: 2px; }

/* Scan indicator label */
.scan-label {
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--text-muted) !important;
}

/* ─── Verification Page ─────────────────────────────────────────────────────── */
.verify-container,
.verification-panel {
    background: #FFFFFF !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
}

.verify-status,
[class*="verify-"] {
    color: var(--text-primary) !important;
}

/* ─── Delta / Report Diff Page ──────────────────────────────────────────────── */
.diff-add,
.line-added,
[class*="added"] {
    background: rgba(80,200,120,0.08) !important;
    border-left: 2px solid var(--green) !important;
}

.diff-remove,
.line-removed,
[class*="removed"] {
    background: rgba(229,62,62,0.06) !important;
    border-left: 2px solid var(--red) !important;
}

/* ─── Loading Spinners ──────────────────────────────────────────────────────── */
.spinner,
.loading,
[class*="spinner"],
[class*="loading"] {
    border-color: var(--border) !important;
    border-top-color: var(--accent) !important;
}

/* ─── Global Link Style ─────────────────────────────────────────────────────── */
a:not([class]) {
    color: var(--accent) !important;
    text-decoration: underline;
    text-decoration-color: rgba(26,27,65,0.3);
}

a:not([class]):hover {
    text-decoration-color: var(--accent);
}

/* ─── Selection ─────────────────────────────────────────────────────────────── */
::selection {
    background: rgba(26,27,65,0.12);
    color: var(--text-primary);
}

/* ─── NAV ON DARK HERO ─────────────────────────────────────────────────────── */
/* Nav is transparent on the dark hero — no white box */
.hero .nav,
.hero nav {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.hero .nav-brand,
.hero .nav-logo {
    color: #FFFFFF !important;
}

.hero .nav-cta {
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: transparent !important;
}

.hero .nav-cta:hover {
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Primary nav CTA on dark hero — Evidence Yellow for visibility */
.hero .nav-cta-primary,
.hero .nav-cta-primary.nav-cta {
    background: #FFD700 !important;
    color: #1A1B41 !important;
    border-color: #FFD700 !important;
    font-weight: 700 !important;
}
.hero .nav-cta-primary:hover {
    background: #FFF176 !important;
    color: #1A1B41 !important;
    border-color: #FFF176 !important;
}

/* ─── GLOBAL CONTRAST SAFETY NET ──────────────────────────────────────────── */
/* Only apply dark text to elements inside white/light sections.
   The old rule (body p/span/div) broke dark containers like
   the urgency bar, trust strip, and featured strip. */
.section-white p,
.section-white li,
.section-white td,
.section-white th,
.section-white span,
.section-white label,
.section-light p,
.section-light li,
.section-light span {
    color: #1A1B41;
}

/* Explicit override for hero elements (dark bg) */
.hero p,
.hero li,
.hero span,
.hero div,
.hero label {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ─── URGENCY COUNTDOWN BAR (dark bg) — all text must be light ──────────── */
.urgency-bar {
    color: rgba(255, 255, 255, 0.9) !important;
}
.urgency-bar span,
.urgency-bar div {
    color: inherit !important;
}
.urgency-bar .urgency-bar-label {
    color: rgba(255, 255, 255, 0.55) !important;
}
.urgency-bar .urgency-item {
    color: inherit !important;
}
.urgency-bar .urgency-item.ca,
.urgency-bar .urgency-item.ca span {
    color: #ef4444 !important;
}
.urgency-bar .urgency-item.co,
.urgency-bar .urgency-item.co span {
    color: #f59e0b !important;
}
.urgency-bar .urgency-item.eu,
.urgency-bar .urgency-item.eu span {
    color: #818cf8 !important;
}
.urgency-bar .urgency-divider {
    color: rgba(255, 255, 255, 0.15) !important;
}

/* ─── FEATURED STRIP FIX — undo [class*="feature"] wildcard damage ────── */
/* The generic card selector [class*="feature"] gives these elements
   background:#FFFFFF which creates white boxes on the dark strip. */
.featured-strip,
.featured-strip .featured-strip-label,
.featured-strip .featured-logos {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* Re-assert the dark background on the strip itself */
.featured-strip {
    background: #1A1B41 !important;
}
.featured-strip .featured-strip-label {
    color: rgba(255, 255, 255, 0.6) !important;
}
.featured-strip .featured-logo-item {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
}
.featured-strip .featured-logo-item:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
}

/* ─── TRUST STRIP — ensure badges are light on dark ─────────────────────── */
.trust-strip span,
.trust-strip div {
    color: rgba(255, 255, 255, 0.8) !important;
}
.trust-strip .trust-badge {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: none !important;
}

/* ─── HERO LOGO — prevent white box from opaque PNG ────────────────────── */
.hero-logo {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    mix-blend-mode: screen !important;
}

/* Nav logo inside dark hero — blend away white bg from PNG */
.hero .nav-brand img,
.hero .nav-logo img {
    mix-blend-mode: screen !important;
}

/* ─── NAV CTA PRIMARY — "Get Started" button on dark hero ──────────────── */
.hero .nav-cta-primary,
.hero .nav-cta-primary.nav-cta {
    background: #FFD700 !important;
    color: #1A1B41 !important;
    border-color: #FFD700 !important;
    font-weight: 700 !important;
}
.hero .nav-cta-primary:hover {
    background: #FFF176 !important;
    color: #1A1B41 !important;
    border-color: #FFF176 !important;
}

/* ─── FOOTER — improve contrast ─────────────────────────────────────────── */
footer .footer-sub,
.footer .footer-sub {
    color: rgba(255, 255, 255, 0.55) !important;
}
footer .footer-brand img,
.footer .footer-brand img {
    background: transparent !important;
    mix-blend-mode: screen !important;
}

/* ─── Print — preserves forensic document look ──────────────────────────────── */
@media print {
    :root {
        --bg-primary: #FFFFFF;
        --text-primary: #000000;
    }
    body {
        background: white !important;
        color: black !important;
    }
    .nav, nav { display: none !important; }
}

/* ─── Mobile Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .nav,
    nav,
    .navbar {
        padding: 0 20px !important;
    }

    .hero {
        padding: 60px 20px !important;
    }

    .report-meta,
    .report-metadata {
        padding: 16px 20px !important;
    }
}