/* Critical CSS for theme toggle */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f7;
    --bg-tertiary: #e8e8ed;
    --text-primary: #1d1d1f;
    --text-secondary: #6e6e73;
    --text-tertiary: #86868b;
    --accent-blue: #0066cc;
    --accent-purple: #5e5ce6;
    --accent-pink: #ff2d55;
    --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
    --card-radius: 20px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #0f3460;
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-tertiary: #6e6e73;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
}

html, body {
    overflow-x: hidden;
}

/* Hero background image */
.compliance-page .hero-bg {
    position: absolute; inset: 0; z-index: 0;
}
.compliance-page .hero-bg img {
    width: 100%; height: 100%; object-fit: cover;
}
.compliance-page .hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.55), rgba(0,0,0,0.75));
    z-index: 1;
}
.compliance-page .hero-content {
    position: relative; z-index: 2;
}
.compliance-page .hero-content h1,
.compliance-page .hero-content .hero-title {
    color: #fff;
}
.compliance-page .hero-content .hero-subtitle {
    color: rgba(255,255,255,0.85);
}
.compliance-page .hero-content .hero-description,
.compliance-page .hero-content .hero-desc {
    color: rgba(255,255,255,0.7);
}
.compliance-page .hero-content .btn-secondary {
    border-color: rgba(255,255,255,0.8);
    color: #fff;
}
.compliance-page .hero-content .btn-secondary:hover {
    background: rgba(255,255,255,0.15);
}