/* Generated from Analysis Blueprint. Edit in Site -> Analysis Blueprint or Custom CSS. */
:root {
    --bg-color: #0b1220;
    --text-color: #f2f7fb;
    --primary-color: #2563eb;
    --secondary-color: #dbeafe;
    --border-color: color-mix(in srgb, #2563eb 28%, transparent);
    --card-bg: color-mix(in srgb, #16233a 72%, transparent);
    --section-bg: color-mix(in srgb, #0b1220 88%, #16233a 12%);
    --hover-bg: color-mix(in srgb, #2563eb 12%, #16233a);
    --btn-bg: linear-gradient(135deg, #2563eb 0%, #cbd5e1 100%);
    --btn-color: #ffffff;
    --btn-shadow: 0 10px 24px rgba(0,0,0,0.18);
    --btn-shadow-hover: 0 16px 36px rgba(0,0,0,0.24);
    --btn-primary-bg: linear-gradient(135deg, #2563eb 0%, #cbd5e1 100%);
    --btn-secondary-bg: #16233a;
    --btn-secondary-bg-hover: color-mix(in srgb, #16233a 78%, #2563eb);
    --btn-secondary-shadow: 0 8px 20px rgba(0,0,0,0.14);
    --hero-bg: linear-gradient(135deg, #0b1220 0%, #2563eb 48%, #cbd5e1 100%);
    --hero-bg-animated: linear-gradient(135deg, #2563eb 0%, #cbd5e1 38%, #0b1220 100%);
    --hero-overlay-opacity: 0.38;
    --hero-title-color: #ffffff;
    --hero-title-shadow: 0 3px 24px rgba(0,0,0,0.35);
    --hero-description-color: rgba(255,255,255,0.88);
    --card-shadow: 0 10px 26px rgba(0,0,0,0.10);
    --card-shadow-hover: 0 20px 52px rgba(0,0,0,0.18);
    --step-number-bg: linear-gradient(135deg, #2563eb 0%, #cbd5e1 100%);
    --step-number-color: #ffffff;
    --step-number-shadow: 0 10px 26px rgba(0,0,0,0.20);
    --cta-bg: linear-gradient(135deg, #2563eb 0%, #0b1220 100%);
    --cta-color: #ffffff;
    --upload-page-bg: linear-gradient(135deg, #0b1220 0%, #16233a 100%);
    --modal-bg: #16233a;
    --modal-text: #f2f7fb;
    --modal-title: #f2f7fb;
    --modal-label: #dbeafe;
    --modal-border: color-mix(in srgb, #2563eb 25%, transparent);
    --modal-input-bg: color-mix(in srgb, #0b1220 82%, #ffffff 18%);
    --modal-input-border: color-mix(in srgb, #2563eb 24%, transparent);
    --modal-input-focus-border: #2563eb;
    --modal-secondary-text: #dbeafe;
    --modal-spinner-border: color-mix(in srgb, #2563eb 20%, transparent);
    --modal-spinner-border-top: #2563eb;
}

.hero {
    min-height: 86vh;
    justify-content: center;
    padding: 5rem 2rem;
}

.hero-content {
    max-width: 860px;
    text-align: center;
}

.hero-title {
    letter-spacing: 0;
}

.features,
.how-it-works,
.cta-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.features-grid,
.steps {
    gap: 1.5rem;
}

.feature-card,
.step,
.modal-content {
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(18px);
}

.btn {
    border-radius: 999px;
    border: 0;
}

.site-report-page {
    --site-report-radius: 10px;
    --site-report-overlay: rgba(0,0,0,0.38);
}

.site-report-hero {
    background: linear-gradient(135deg, #0b1220 0%, #2563eb 48%, #cbd5e1 100%);
}

.site-report-page .message-content,
.site-report-page .available-steps-section,
.site-report-page .step-option-card {
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(18px);
}

.site-report-page .message-content,
.site-report-page .available-steps-section {
    box-shadow: 0 10px 26px rgba(0,0,0,0.10);
}

.site-report-page .message-user .message-content,
.site-report-page .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #cbd5e1 100%);
    color: #ffffff;
}