:root {
    --color-brand-primary: #1B5E4C;
    --color-brand-primary-dark: #134433;
    --color-brand-accent: #10B981;
    --color-white: #FFFFFF;
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;
    --color-risk-low: #10B981;
    --color-risk-medium: #F59E0B;
    --color-risk-high: #EF4444;
    --color-risk-critical: #991B1B;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--color-gray-800); background: var(--color-gray-50); }
h1, h2, h3 { font-weight: 700; color: var(--color-gray-900); margin-bottom: var(--spacing-md); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); }
section { padding: var(--spacing-2xl) 0; display: none; }
section.active { display: block; }
.header { background: var(--color-white); border-bottom: 1px solid var(--color-gray-200); padding: var(--spacing-md) 0; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); }
.logo { font-size: 1.5rem; font-weight: 700; }
.logo-accent { color: var(--color-brand-primary); }
.landing-hero { text-align: center; padding: var(--spacing-2xl) 0; }
.landing-hero h1 { font-size: 3rem; margin-bottom: var(--spacing-md); }
.subtitle { font-size: 1.25rem; color: var(--color-gray-600); margin-bottom: var(--spacing-xl); }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-lg); margin: var(--spacing-xl) 0; }
.feature-card { background: var(--color-white); padding: var(--spacing-lg); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transition: transform 0.2s; }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.feature-icon { font-size: 2rem; margin-bottom: var(--spacing-sm); }
.feature-card h3 { color: var(--color-brand-primary); }
.lead-form { background: var(--color-white); padding: var(--spacing-xl); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); max-width: 600px; margin: var(--spacing-xl) auto; }
.form-group { margin-bottom: var(--spacing-md); }
.form-group label { display: block; font-weight: 600; margin-bottom: var(--spacing-xs); }
.form-group input { width: 100%; padding: var(--spacing-sm); border: 2px solid var(--color-gray-300); border-radius: var(--radius-md); font-size: 1rem; }
.form-group input:focus { outline: none; border-color: var(--color-brand-primary); }
.progress-container { background: var(--color-white); padding: var(--spacing-md); border-bottom: 1px solid var(--color-gray-200); position: sticky; top: 73px; z-index: 90; }
.progress-bar { height: 8px; background: var(--color-gray-200); border-radius: var(--radius-lg); overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-brand-primary), var(--color-brand-accent)); transition: width 0.3s; }
.question-card { background: var(--color-white); padding: var(--spacing-xl); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); margin: var(--spacing-lg) 0; }
.question-header { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); }
.question-number { background: var(--color-brand-primary); color: white; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.question-category { background: var(--color-gray-100); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; }
.question-help { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: var(--color-brand-primary); color: white; border-radius: 50%; font-size: 0.875rem; cursor: help; }
.answer-options { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.answer-option input { position: absolute; opacity: 0; }
.answer-option label { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md); border: 2px solid var(--color-gray-300); border-radius: var(--radius-lg); cursor: pointer; transition: all 0.2s; }
.answer-option label:hover { border-color: var(--color-brand-primary); background: var(--color-gray-50); }
.answer-option input:checked + label { border-color: var(--color-brand-primary); background: var(--color-brand-primary); color: white; }
.answer-radio, .answer-checkbox { width: 24px; height: 24px; border: 2px solid #9CA3AF; border-radius: 50%; position: relative; }
.answer-checkbox { border-radius: var(--radius-sm); }
.answer-option input:checked + label .answer-radio, .answer-option input:checked + label .answer-checkbox { border-color: white; background: white; }
.answer-option input:checked + label .answer-radio::after { content: ''; position: absolute; width: 12px; height: 12px; background: var(--color-brand-primary); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.answer-option input:checked + label .answer-checkbox::after { content: '✓'; position: absolute; color: var(--color-brand-primary); font-weight: 700; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.btn { display: inline-block; padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-md); font-weight: 600; text-decoration: none; cursor: pointer; border: none; font-size: 1rem; transition: all 0.2s; }
.btn-primary { background: var(--color-brand-primary); color: white; }
.btn-primary:hover:not(:disabled) { background: var(--color-brand-primary-dark); transform: translateY(-2px); }
.btn-secondary { background: var(--color-gray-200); color: var(--color-gray-700); }
.btn-large { padding: var(--spacing-md) var(--spacing-xl); font-size: 1.125rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.score-display { background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-accent)); color: white; padding: var(--spacing-xl); border-radius: var(--radius-xl); text-align: center; box-shadow: var(--shadow-xl); }
.score-value { font-size: 5rem; font-weight: 700; }
.risk-level { display: inline-block; padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-lg); font-weight: 700; margin-top: var(--spacing-md); }
.risk-level.low { background: var(--color-risk-low); }
.risk-level.medium { background: var(--color-risk-medium); }
.risk-level.high { background: var(--color-risk-high); }
.risk-level.critical { background: var(--color-risk-critical); }
.risk-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-md); margin: var(--spacing-xl) 0; }
.risk-stat { background: white; padding: var(--spacing-lg); border-radius: var(--radius-lg); text-align: center; box-shadow: var(--shadow-md); }
.risk-stat-value { font-size: 2.5rem; font-weight: 700; }
.category-breakdown { background: white; padding: var(--spacing-xl); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); margin-bottom: var(--spacing-xl); }
.category-item { margin-bottom: var(--spacing-lg); }
.category-header { display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs); }
.category-bar { height: 12px; background: var(--color-gray-200); border-radius: var(--radius-lg); overflow: hidden; }
.category-bar-fill { height: 100%; transition: width 0.3s; }
.action-items { background: white; padding: var(--spacing-xl); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.action-list { list-style: none; }
.action-list li { padding: var(--spacing-md); border-left: 4px solid var(--color-brand-primary); background: var(--color-gray-50); border-radius: var(--radius-md); margin-bottom: var(--spacing-sm); }
.cta-section { background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-primary-dark)); color: white; padding: var(--spacing-2xl); border-radius: var(--radius-xl); text-align: center; }
.cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-md); }
.cta-section .btn-primary { background: white; color: var(--color-brand-primary); }
.cta-section .btn-secondary { background: rgba(255,255,255,0.2); color: white; border: 2px solid white; }
#tooltip { position: fixed; background: var(--color-gray-900); color: white; padding: var(--spacing-sm); border-radius: var(--radius-md); max-width: 400px; font-size: 0.875rem; box-shadow: var(--shadow-lg); z-index: 1000; }
.hidden { display: none !important; }
.privacy-note { background: var(--color-gray-50); padding: var(--spacing-sm); border-radius: var(--radius-md); font-size: 0.875rem; color: var(--color-gray-600); margin-top: var(--spacing-md); }
.form-group-checkbox { display: flex; align-items: flex-start; gap: var(--spacing-sm); }
.question-navigation { display: flex; justify-content: space-between; gap: var(--spacing-md); margin-top: var(--spacing-xl); }
.progress-info { display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs); }
.save-indicator { text-align: center; color: var(--color-brand-accent); font-size: 0.875rem; margin-top: var(--spacing-xs); }
.action-section { margin-bottom: var(--spacing-xl); }
@media (max-width: 768px) {
    .landing-hero h1 { font-size: 2rem; }
    .features-grid { grid-template-columns: 1fr; }
    .score-value { font-size: 3.5rem; }
    .cta-buttons { flex-direction: column; }
}