/* ============================================================
   CISO Consulting - Enterprise Stylesheet
   Version: 1.0.0
   ============================================================ */

/* ---- CSS Variables ---- */

:root {
    --bg-primary: #060a0f;
    --bg-secondary: #0d1117;
    --bg-card: #0f1319;
    --bg-card-hover: #131a22;
    --bg-elevated: #161d27;
    --border-subtle: rgba(255,255,255,0.06);
    --border-accent: rgba(0,255,136,0.15);
    --border: rgba(255,255,255,0.08);
    --text-primary: #e8e8e8;
    --text-secondary: rgba(255,255,255,0.6);
    --text-muted: rgba(255,255,255,0.45);
    --text-dim: rgba(255,255,255,0.4);
    --accent-green: #00ff88;
    --accent-cyan: #00d4ff;
    --accent-red: #ff3355;
    --accent-orange: #ffaa00;
    --accent-purple: #b464ff;
    --green-glow: rgba(0,255,136,0.15);
    --cyan-glow: rgba(0,212,255,0.15);
    --red-glow: rgba(255,51,85,0.15);
    --font-display: 'Orbitron', -apple-system, system-ui, sans-serif;
    --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
    --font-arabic: 'Noto Kufi Arabic', 'Tahoma', 'Arabic Typesetting', sans-serif;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --shadow-glow: 0 0 30px rgba(0,255,136,0.08);
    --transition: all 0.3s ease;
}

/* ---- Light Theme Override ---- */
[data-theme="light"] {
    --bg-primary: #f4f6f9;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f0f7f4;
    --bg-elevated: #f8f9fb;
    --border-subtle: rgba(0,0,0,0.08);
    --border-accent: rgba(0,140,80,0.25);
    --border: rgba(0,0,0,0.10);
    --text-primary: #1a1a2e;
    --text-secondary: rgba(0,0,0,0.65);
    --text-muted: rgba(0,0,0,0.5);
    --text-dim: rgba(0,0,0,0.5);
    --accent-green: #00995c;
    --accent-cyan: #0088aa;
    --accent-red: #cc2244;
    --accent-orange: #cc8800;
    --accent-purple: #8833cc;
    --green-glow: rgba(0,153,92,0.1);
    --cyan-glow: rgba(0,136,170,0.1);
    --red-glow: rgba(204,34,68,0.1);
    --shadow-glow: 0 2px 20px rgba(0,0,0,0.06);
}

[data-theme="light"] .scanlines { display: none; }
[data-theme="light"] .bg-grid-pattern { background-image: none; background-color: var(--bg-primary); }
[data-theme="light"] .site-header { background: #ffffff; border-bottom: 1px solid rgba(0,0,0,0.06); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .logo-icon { background: linear-gradient(135deg, #00995c, #0088aa); }
[data-theme="light"] .text-gradient { background: linear-gradient(135deg, #00995c, #0088aa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
/* Light theme: footer stays dark — override any light-theme variables that leak in */
[data-theme="light"] .site-footer { background: #0a0e14; color: rgba(255,255,255,0.7); }
[data-theme="light"] .site-footer a { color: rgba(255,255,255,0.6); }
[data-theme="light"] .site-footer a:hover { color: #00ff88; }
[data-theme="light"] .footer-title { color: #00ff88; }
[data-theme="light"] .footer-brand p { color: rgba(255,255,255,0.55); }
[data-theme="light"] .footer-links a { color: rgba(255,255,255,0.6); }
[data-theme="light"] .footer-links a:hover { color: #00ff88; }
[data-theme="light"] .footer-bottom { border-top-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.45); }
[data-theme="light"] .footer-bottom a { color: #00ff88; }
[data-theme="light"] .footer-bottom-link { color: rgba(255,255,255,0.5); }
[data-theme="light"] .footer-bottom-link:hover { color: #00ff88; }
[data-theme="light"] .footer-bottom-divider { color: rgba(255,255,255,0.15); }
[data-theme="light"] .site-footer .form-input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #fff; }
[data-theme="light"] .site-footer .btn-primary { background: linear-gradient(135deg, #00ff88, #00d4ff); color: #060a0f; }
[data-theme="light"] .site-footer .btn-ghost { border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.55); }
[data-theme="light"] .threat-ticker { background: rgba(0,80,40,0.05); border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .auth-card { background: #ffffff; border-color: rgba(0,0,0,0.08); box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
[data-theme="light"] .form-input { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.1); color: var(--text-primary); }
[data-theme="light"] .form-input:focus { border-color: var(--accent-green); background: #fff; }
[data-theme="light"] .alert { border-width: 1px; }
[data-theme="light"] .alert-success { background: rgba(0,153,92,0.06); border-color: rgba(0,153,92,0.2); color: #00663d; }
[data-theme="light"] .alert-error { background: rgba(204,34,68,0.06); border-color: rgba(204,34,68,0.2); color: #991133; }
[data-theme="light"] .btn-primary { background: linear-gradient(135deg, #00995c, #008850); color: #fff; }
[data-theme="light"] .btn-primary:hover { background: linear-gradient(135deg, #00aa66, #009960); color: #fff; }
[data-theme="light"] .btn-outline { border-color: rgba(0,153,92,0.4); color: #00995c; background: transparent; }
[data-theme="light"] .btn-outline:hover { border-color: #00995c; background: rgba(0,153,92,0.06); color: #00995c; }
[data-theme="light"] .btn-ghost { border-color: rgba(0,153,92,0.25); color: #00995c; background: rgba(0,153,92,0.05); }
[data-theme="light"] .btn-ghost:hover { background: rgba(0,153,92,0.1); border-color: #00995c; color: #00774a; }
[data-theme="light"] .severity-badge.critical { background: rgba(204,34,68,0.08); color: #cc2244; border-color: rgba(204,34,68,0.2); }
[data-theme="light"] .severity-badge.high { background: rgba(204,136,0,0.08); color: #996600; border-color: rgba(204,136,0,0.2); }
[data-theme="light"] .otp-input { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.12); color: var(--text-primary); }
[data-theme="light"] .otp-input:focus { border-color: var(--accent-green); background: #fff; }
[data-theme="light"] .contact-info-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .top-bar { background: rgba(0,0,0,0.03); border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .top-bar-item, [data-theme="light"] .top-bar-link { color: rgba(0,0,0,0.6); }
[data-theme="light"] ::selection { background: var(--accent-green); color: #fff; }
[data-theme="light"] ::-webkit-scrollbar-track { background: rgba(0,0,0,0.02); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); }

/* ---- Theme Toggle Button ---- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}
.theme-toggle:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    background: rgba(255,170,0,0.06);
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

html { overflow-x: clip; }
body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    min-height: 100vh;
}

/* RTL / Arabic Support */
[dir="rtl"] {
    --font-body: 'Noto Kufi Arabic', 'Outfit', sans-serif;
    --font-display: 'Noto Kufi Arabic', sans-serif;
    --font-mono: 'Noto Kufi Arabic', 'Outfit', sans-serif;
}

[dir="rtl"] .logo-icon {
    font-family: 'Orbitron', monospace; /* Keep CP logo in Latin */
}

[dir="rtl"] .nav-links a,
[dir="rtl"] .footer-title,
[dir="rtl"] .severity-badge,
[dir="rtl"] .ticker-item {
    letter-spacing: 0;
    text-transform: none;
}

a {
    color: var(--accent-green);
    text-decoration: none;
    transition: var(--transition);
}
a:hover { color: var(--accent-cyan); }

img { max-width: 100%; height: auto; }

::selection {
    background: var(--accent-green);
    color: var(--bg-primary);
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: rgba(0,255,136,0.02); }
::-webkit-scrollbar-thumb { background: rgba(0,255,136,0.15); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,255,136,0.25); }

/* Firefox scrollbar */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,255,136,0.15) transparent;
}
[data-theme="light"] {
    scrollbar-color: rgba(0,0,0,0.12) transparent;
}

/* ---- Typography ---- */
.font-display { font-family: var(--font-display); letter-spacing: 2px; }
.font-mono { font-family: var(--font-mono); }
.text-gradient {
    background: linear-gradient(90deg, var(--accent-green), var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-green { color: var(--accent-green); }
.text-cyan { color: var(--accent-cyan); }
.text-red { color: var(--accent-red); }
.text-orange { color: var(--accent-orange); }
.text-purple { color: var(--accent-purple); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

/* ---- Layout ---- */
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
}

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-main { grid-template-columns: 1fr 380px; }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }

/* ---- Backgrounds & Effects ---- */
.scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
}

.bg-grid-pattern {
    background-image:
        linear-gradient(rgba(0,255,136,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,136,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* ---- Top Bar ---- */
.top-bar {
    background: rgba(0,255,136,0.02);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 11px;
    padding: 0 32px;
    overflow: hidden;
}

.top-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    max-width: 1400px;
    margin: 0 auto;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.top-bar-item {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.5px;
}

.top-bar-divider {
    color: var(--border-subtle);
    margin: 0 4px;
    font-size: 9px;
}

.top-bar-link {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.top-bar-link:hover {
    color: var(--accent-green);
    background: rgba(0,255,136,0.06);
}

.top-bar-lang {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
    margin-inline-start: 4px;
}

.top-bar-lang:hover {
    border-color: var(--accent-green);
}

@media (max-width: 768px) {
    .top-bar { display: none; }
}

/* ---- Header ---- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #060a0f;
    border-bottom: 1px solid var(--border-accent);
    padding: 0 32px;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    max-width: 1400px;
    margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.logo-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--accent-green), var(--accent-cyan));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 900;
    color: var(--bg-primary);
    box-shadow: 0 0 25px rgba(0,255,136,0.25);
}

.logo-text h1 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 3px;
    background: linear-gradient(90deg, var(--accent-green), var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
}

.logo-text span {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    gap: 4px;
    list-style: none;
}

.nav-links a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    border: 1px solid transparent;
    transition: var(--transition);
    text-transform: uppercase;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--accent-green);
    background: var(--green-glow);
    border-color: rgba(0,255,136,0.2);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: 100px;
    border: 1px solid var(--border-subtle);
    text-decoration: none;
    transition: var(--transition);
}

.header-user-btn:hover {
    border-color: var(--accent-green);
    background: rgba(0,255,136,0.04);
}

.header-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-green), var(--accent-cyan));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--bg-primary);
}

.header-user-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.lang-switch {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.lang-switch:hover {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

/* ---- Threat Ticker ---- */
.threat-ticker {
    overflow: hidden;
    background: linear-gradient(90deg, rgba(0,255,136,0.03), rgba(0,255,136,0.08), rgba(0,255,136,0.03));
    border-bottom: 1px solid rgba(0,255,136,0.12);
    padding: 10px 0;
    position: relative;
    z-index: 50;
}

.ticker-track {
    display: flex;
    gap: 40px;
    animation: ticker-scroll 60s linear infinite;
    white-space: nowrap;
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

[dir="rtl"] .ticker-track {
    animation: ticker-scroll-rtl 60s linear infinite;
}

@keyframes ticker-scroll-rtl {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.3px;
}

.ticker-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ticker-dot.critical {
    background: var(--accent-red);
    box-shadow: 0 0 8px var(--accent-red);
    animation: pulse 1.2s infinite;
}

.ticker-dot.high {
    background: var(--accent-orange);
    box-shadow: 0 0 6px var(--accent-orange);
}

.ticker-dot.medium {
    background: var(--accent-green);
}

/* Ticker text colors — high contrast for readability */
.ticker-region { color: rgba(255,255,255,0.75); font-weight: 600; }
.ticker-type { color: #00ff88; font-weight: 600; }
.ticker-arrow { color: rgba(255,255,255,0.4); }
.ticker-sector { color: rgba(255,255,255,0.65); }
.ticker-time { color: rgba(255,255,255,0.45); font-size: 10px; }

[data-theme="light"] .ticker-region { color: rgba(0,0,0,0.75); }
[data-theme="light"] .ticker-type { color: #007744; font-weight: 600; }
[data-theme="light"] .ticker-arrow { color: rgba(0,0,0,0.35); }
[data-theme="light"] .ticker-sector { color: rgba(0,0,0,0.6); }
[data-theme="light"] .ticker-time { color: rgba(0,0,0,0.45); }

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

.severity-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

.severity-badge.critical { background: rgba(255,51,85,0.12); color: var(--accent-red); border: 1px solid rgba(255,51,85,0.25); }
.severity-badge.high { background: rgba(255,170,0,0.12); color: var(--accent-orange); border: 1px solid rgba(255,170,0,0.25); }
.severity-badge.medium { background: rgba(0,255,136,0.12); color: var(--accent-green); border: 1px solid rgba(0,255,136,0.25); }
.severity-badge.low { background: rgba(0,212,255,0.12); color: var(--accent-cyan); border: 1px solid rgba(0,212,255,0.25); }

/* ---- Cards ---- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 22px;
    transition: var(--transition);
}

.card:hover {
    background: var(--bg-card-hover);
    border-color: rgba(0,255,136,0.12);
}

.card-featured {
    background: linear-gradient(135deg, rgba(255,51,85,0.05), rgba(0,255,136,0.03), rgba(0,212,255,0.05));
    border: 1px solid rgba(255,51,85,0.2);
    border-radius: var(--radius-xl);
    padding: 30px;
    position: relative;
    overflow: hidden;
}

.card-featured::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,51,85,0.06), transparent 70%);
    pointer-events: none;
}
[data-theme="light"] .card-featured {
    background: linear-gradient(135deg, rgba(220,38,38,0.04), rgba(5,150,105,0.03), rgba(2,132,199,0.05));
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.section-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

[dir="rtl"] .section-title {
    letter-spacing: 0;
}

/* ---- Stats Cards ---- */
.stat-card {
    background: var(--bg-card);
    border: 1px solid rgba(0,255,136,0.06);
    border-radius: var(--radius-md);
    padding: 18px;
}

.stat-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.stat-value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.stat-change {
    font-family: var(--font-mono);
    font-size: 10px;
    margin-top: 6px;
}

.stat-change.up { color: var(--accent-green); }
.stat-change.down { color: var(--accent-cyan); }

/* ---- Episode Cards ---- */
.episode-card {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: var(--transition);
}

.episode-card:hover {
    background: var(--bg-card-hover);
    border-color: rgba(0,255,136,0.15);
    transform: translateY(-1px);
}

.episode-card.active {
    border-color: rgba(0,255,136,0.25);
    background: rgba(0,255,136,0.03);
}

.episode-icon {
    width: 56px;
    height: 56px;
    background: rgba(0,255,136,0.05);
    border: 1px solid rgba(0,255,136,0.12);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.episode-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin-bottom: 3px;
}

.episode-guest {
    font-size: 12px;
    color: var(--text-muted);
}

.episode-guest strong { color: var(--accent-cyan); font-weight: 500; }

.episode-tags {
    display: flex;
    gap: 5px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.tag {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 3px;
    background: rgba(0,255,136,0.05);
    color: rgba(0,255,136,0.55);
    border: 1px solid rgba(0,255,136,0.1);
}

.episode-meta {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
}

[dir="rtl"] .episode-meta { text-align: left; }

/* ---- News Cards ---- */
.news-item {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    cursor: pointer;
    transition: var(--transition);
}

.news-item:last-child { border-bottom: none; }

.news-item:hover { padding-left: 8px; }
[dir="rtl"] .news-item:hover { padding-left: 0; padding-right: 8px; }

.news-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.news-category {
    font-family: var(--font-mono);
    font-size: 8px;
    padding: 2px 7px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.news-category.regulation { background: rgba(255,170,0,0.08); color: var(--accent-orange); border: 1px solid rgba(255,170,0,0.2); }
.news-category.achievement { background: rgba(0,255,136,0.08); color: var(--accent-green); border: 1px solid rgba(0,255,136,0.2); }
.news-category.sama { background: rgba(0,212,255,0.08); color: var(--accent-cyan); border: 1px solid rgba(0,212,255,0.2); }
.news-category.privacy { background: rgba(180,100,255,0.08); color: var(--accent-purple); border: 1px solid rgba(180,100,255,0.2); }
.news-category.alert { background: rgba(255,51,85,0.08); color: var(--accent-red); border: 1px solid rgba(255,51,85,0.2); }

.news-title {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    line-height: 1.45;
}

.news-time {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-dim);
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    text-decoration: none;
    line-height: 1;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-green), var(--accent-cyan));
    color: var(--bg-primary);
    box-shadow: 0 4px 20px rgba(0,255,136,0.25);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(0,255,136,0.35);
    color: var(--bg-primary);
}

.btn-danger {
    background: linear-gradient(135deg, var(--accent-red), #ff5577);
    color: #fff;
    box-shadow: 0 4px 20px rgba(255,51,85,0.25);
}

.btn-outline {
    background: transparent;
    border: 1px solid rgba(0,255,136,0.3);
    color: #00ff88;
    color: var(--accent-green);
    padding: 10px 24px;
}

.btn-outline:hover {
    background: rgba(0,255,136,0.06);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.btn-sm {
    padding: 5px 14px;
    font-size: 11px;
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
}

.btn-ghost {
    background: rgba(0,255,136,0.06);
    border: 1px solid rgba(0,255,136,0.15);
    color: #00ff88;
    color: var(--accent-green);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.5px;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-ghost:hover {
    background: rgba(0,255,136,0.12);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

/* ---- Forms ---- */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    transition: var(--transition);
    outline: none;
}

.form-input:focus {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 3px rgba(0,255,136,0.08);
    background: rgba(0,255,136,0.02);
}

.form-input::placeholder {
    color: var(--text-dim);
}

textarea.form-input {
    resize: vertical;
    min-height: 120px;
}

.form-error {
    font-size: 12px;
    color: var(--accent-red);
    margin-top: 4px;
}

/* ---- OTP Input ---- */
.otp-inputs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 28px 0;
    /* default for 6 digits — overridden inline by PHP per page */
    --otp-box-size: 54px;
    --otp-font-size: 26px;
}

/* Scale down for higher digit counts */
.otp-inputs[data-digits="7"]  { --otp-box-size: 46px; --otp-font-size: 22px; gap: 7px; }
.otp-inputs[data-digits="8"]  { --otp-box-size: 42px; --otp-font-size: 20px; gap: 6px; }
.otp-inputs[data-digits="9"]  { --otp-box-size: 38px; --otp-font-size: 18px; gap: 5px; }
.otp-inputs[data-digits="10"] { --otp-box-size: 34px; --otp-font-size: 16px; gap: 5px; }

.otp-input {
    width: var(--otp-box-size, 54px);
    height: calc(var(--otp-box-size, 54px) * 1.18);
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--otp-font-size, 26px);
    font-weight: 700;
    color: var(--accent-green);
    background: rgba(0,255,136,0.04);
    border: 2px solid rgba(0,255,136,0.15);
    border-radius: var(--radius-md);
    outline: none;
    transition: var(--transition);
    flex-shrink: 0;
}

.otp-input:focus {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 3px rgba(0,255,136,0.1);
    background: rgba(0,255,136,0.08);
}

/* ---- Live Badge ---- */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,51,85,0.12);
    border: 1px solid rgba(255,51,85,0.25);
    padding: 4px 14px;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--accent-red);
    letter-spacing: 1px;
}

.live-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-red);
    animation: pulse 1.2s infinite;
}

/* ---- Breaking Badge ---- */
.breaking-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,51,85,0.12);
    border: 1px solid rgba(255,51,85,0.3);
    padding: 3px 10px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--accent-red);
    letter-spacing: 1px;
    animation: pulse 2s infinite;
}

/* ---- Auth Pages ---- */
.auth-container {
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-xl);
    padding: 44px;
    box-shadow: var(--shadow-glow);
}

.auth-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 8px;
}

[dir="rtl"] .auth-title {
    letter-spacing: 0;
}

.auth-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 32px;
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 13px;
    color: var(--text-muted);
}

/* ---- Alert Messages ---- */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success {
    background: rgba(0,255,136,0.06);
    border: 1px solid rgba(0,255,136,0.2);
    color: var(--accent-green);
}

.alert-error {
    background: rgba(255,51,85,0.06);
    border: 1px solid rgba(255,51,85,0.2);
    color: var(--accent-red);
}

.alert-warning {
    background: rgba(255,170,0,0.06);
    border: 1px solid rgba(255,170,0,0.2);
    color: var(--accent-orange);
}

.alert-info {
    background: rgba(0,212,255,0.06);
    border: 1px solid rgba(0,212,255,0.2);
    color: var(--accent-cyan);
}

/* ---- Static Pages (About, Terms, Privacy) ---- */
.static-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 32px;
}

.static-page h2 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 24px;
}

[dir="rtl"] .static-page h2 {
    letter-spacing: 0;
}

.static-page h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--accent-green);
    margin: 28px 0 12px;
}

.static-page p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 16px;
}

.static-page strong {
    color: var(--text-primary);
}

/* ---- Contact Page ---- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 32px;
}

.contact-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.contact-icon {
    width: 48px;
    height: 48px;
    background: rgba(0,255,136,0.06);
    border: 1px solid rgba(0,255,136,0.12);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

/* ---- Footer — always dark background, both themes ---- */
.site-footer {
    background: #0a0e14;
    border-top: 1px solid rgba(0,255,136,0.1);
    margin-top: 80px;
    padding: 48px 0 24px;
    color: rgba(255,255,255,0.7);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
}

.footer-brand p {
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    margin-top: 12px;
    line-height: 1.7;
}

.site-footer .logo-text h1 { color: #e8e8e8; }
.site-footer .logo-text span { color: rgba(255,255,255,0.5); }

.footer-title {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #00ff88;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.footer-links {
    list-style: none;
}

.footer-links li { margin-bottom: 10px; }

.footer-links a {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    transition: var(--transition);
    text-decoration: none;
}

.footer-links a:hover { color: #00ff88; }

.footer-bottom {
    max-width: 1400px;
    margin: 40px auto 0;
    padding: 20px 32px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255,255,255,0.45);
}

.footer-bottom a { color: #00ff88; text-decoration: none; }
.footer-bottom a:hover { color: #33ffaa; }

.footer-bottom-link {
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    transition: var(--transition);
    text-decoration: none;
}

.footer-bottom-link:hover {
    color: #00ff88;
}

.footer-bottom-divider {
    color: rgba(255,255,255,0.15);
    margin: 0 2px;
}

/* Footer form elements (newsletter) */
.site-footer .form-input {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
}
.site-footer .form-input::placeholder { color: rgba(255,255,255,0.3); }
.site-footer .form-input:focus { border-color: #00ff88; background: rgba(255,255,255,0.08); }
.site-footer .btn-primary { background: linear-gradient(135deg, #00ff88, #00d4ff); color: #060a0f; font-weight: 600; }
.site-footer .btn-primary:hover { background: linear-gradient(135deg, #00ffaa, #00e4ff); }
.site-footer .footer-newsletter p { color: rgba(255,255,255,0.5); }

/* Social link buttons in footer */
.site-footer .btn-ghost {
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.55);
}
.site-footer .btn-ghost:hover {
    border-color: rgba(0,255,136,0.3);
    color: #00ff88;
    background: rgba(0,255,136,0.06);
}

.footer-link-icon {
    display: inline-block;
    width: 18px;
    text-align: center;
    margin-inline-end: 4px;
    font-size: 11px;
    color: var(--accent-green);
    opacity: 0.5;
}

.newsletter-form {
    display: flex;
    gap: 8px;
}

.newsletter-form .form-input {
    flex: 1;
    min-width: 0;
}

/* ---- Mobile-only Nav Links ---- */
.mobile-only-link {
    display: none;
}

@media (max-width: 768px) {
    .mobile-only-link { display: block; }
    .header-user-name { display: none; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* ---- Animations ---- */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-in {
    animation: slideUp 0.5s ease-out both;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .grid-main { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .container { padding: 0 16px; }
    .site-header { padding: 0 16px; }
    .nav-links { display: none; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .auth-card { padding: 28px 24px; }
    .episode-card { grid-template-columns: 44px 1fr; }
    .episode-meta { display: none; }
    .mobile-nav-btn { display: block; }
    .header-actions .lang-switch { font-size: 10px; padding: 4px 8px; }
}

/* ---- Mobile Nav Toggle ---- */
.mobile-nav-btn {
    display: none;
    background: none;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 18px;
}

@media (max-width: 768px) {
    .mobile-nav-btn { display: block; }
}

/* ---- Info Row (shared) ---- */
.admin-info-row {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 12px 18px;
    background: rgba(0,212,255,0.03);
    border: 1px solid rgba(0,212,255,0.08);
    border-radius: var(--radius-md);
}

/* ---- Newsletter Verify Status ---- */
.verify-success {
    text-align: center;
    padding: 32px;
}
.verify-success .verify-icon {
    width: 72px; height: 72px;
    background: rgba(0,255,136,0.1);
    border: 2px solid rgba(0,255,136,0.3);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
}

/* ============================================================
   SLIDER / CAROUSEL SYSTEM
   ============================================================ */

/* ---- Slider Container ---- */
.slider-section {
    position: relative;
    margin-bottom: 36px;
}

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

.slider-header .section-title {
    margin-bottom: 0;
}

.slider-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.slider-arrow {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}
.slider-arrow:hover {
    border-color: var(--accent-green);
    color: var(--accent-green);
    background: rgba(0,255,136,0.06);
    transform: scale(1.08);
}
.slider-arrow:active { transform: scale(0.95); }
.slider-arrow:disabled, .slider-arrow.disabled {
    opacity: 0.25;
    pointer-events: none;
}

.slider-counter {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    padding: 0 6px;
}

/* ---- Track ---- */
.slider-track-wrap {
    position: relative;
    overflow: hidden;
}

.slider-track-wrap::before,
.slider-track-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 48px;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s;
}
.slider-track-wrap::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg-primary), transparent);
    opacity: 0;
}
.slider-track-wrap::after {
    right: 0;
    background: linear-gradient(-90deg, var(--bg-primary), transparent);
}
.slider-track-wrap.scrolled-start::before { opacity: 0; }
.slider-track-wrap.scrolled-end::after { opacity: 0; }
.slider-track-wrap.scrolled-mid::before { opacity: 1; }

.slider-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 12px;
    scrollbar-width: none;
}
.slider-track::-webkit-scrollbar { display: none; }

.slider-track.gap-sm { gap: 10px; }
.slider-track.gap-lg { gap: 20px; }

/* ---- Progress Dots ---- */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
}
.slider-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-dim);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: var(--transition);
}
.slider-dot.active {
    width: 20px;
    border-radius: 3px;
    background: var(--accent-green);
}

/* ---- Progress Bar ---- */
.slider-progress {
    height: 2px;
    background: rgba(255,255,255,0.04);
    border-radius: 1px;
    margin-top: 14px;
    overflow: hidden;
}
.slider-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-green), var(--accent-cyan));
    border-radius: 1px;
    transition: width 0.3s ease;
    width: 0%;
}

/* ============================================================
   SLIDE CARD VARIANTS
   ============================================================ */

/* ---- Episode Slide Card ---- */
.slide-episode {
    flex: 0 0 320px;
    scroll-snap-align: start;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    display: flex;
    flex-direction: column;
}
.slide-episode:hover {
    border-color: rgba(0,255,136,0.25);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,255,136,0.08);
}
.slide-episode .slide-cover {
    height: 160px;
    background: linear-gradient(135deg, rgba(0,255,136,0.08), rgba(0,212,255,0.06));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.slide-episode .slide-cover .slide-icon {
    font-size: 48px;
    opacity: 0.8;
    z-index: 1;
}
.slide-episode .slide-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 30%, rgba(0,255,136,0.06), transparent 60%);
}
.slide-episode .slide-cover .slide-play {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px; height: 36px;
    background: var(--accent-green);
    color: var(--bg-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s;
    z-index: 2;
}
.slide-episode:hover .slide-play {
    opacity: 1;
    transform: scale(1);
}
.slide-episode .slide-body {
    padding: 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.slide-episode .slide-season {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--accent-green);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.slide-episode .slide-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.slide-episode .slide-guest {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.slide-episode .slide-guest strong {
    color: var(--accent-cyan);
    font-weight: 500;
}
.slide-episode .slide-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}
.slide-episode .slide-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
}

/* ---- News Slide Card ---- */
.slide-news {
    flex: 0 0 280px;
    scroll-snap-align: start;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 20px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.slide-news:hover {
    border-color: rgba(0,212,255,0.25);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,212,255,0.06);
}
.slide-news::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-green));
    opacity: 0;
    transition: opacity 0.3s;
}
.slide-news:hover::before { opacity: 1; }
.slide-news .slide-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.slide-news .slide-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.45;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.slide-news .slide-excerpt {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 14px;
}
.slide-news .slide-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}
.slide-news .slide-time {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-dim);
}
.slide-news .slide-views {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-dim);
}

/* ---- Stat Slide Card ---- */
.slide-stat {
    flex: 0 0 200px;
    scroll-snap-align: start;
    padding: 22px;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    transition: all 0.35s;
    position: relative;
    overflow: hidden;
}
.slide-stat:hover {
    transform: translateY(-2px);
    border-color: var(--border-accent);
}
.slide-stat .stat-glow {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    opacity: 0.06;
    pointer-events: none;
}

/* ---- Threat Slide Card ---- */
.slide-threat {
    flex: 0 0 260px;
    scroll-snap-align: start;
    border-radius: var(--radius-lg);
    padding: 20px;
    cursor: default;
    transition: all 0.35s;
    border: 1px solid;
    position: relative;
}
.slide-threat:hover { transform: translateY(-2px); }
.slide-threat.sev-critical { background: rgba(255,51,85,0.04); border-color: rgba(255,51,85,0.15); }
.slide-threat.sev-high { background: rgba(255,170,0,0.04); border-color: rgba(255,170,0,0.15); }
.slide-threat.sev-medium { background: rgba(0,255,136,0.03); border-color: rgba(0,255,136,0.12); }
.slide-threat.sev-low { background: rgba(0,212,255,0.03); border-color: rgba(0,212,255,0.12); }
.slide-threat .threat-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.slide-threat .threat-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
}
.slide-threat .threat-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---- Upcoming Slide Card ---- */
.slide-upcoming {
    flex: 0 0 260px;
    scroll-snap-align: start;
    padding: 22px;
    background: linear-gradient(135deg, rgba(0,255,136,0.03), rgba(0,212,255,0.02));
    border: 1px solid rgba(0,255,136,0.08);
    border-radius: var(--radius-lg);
    transition: all 0.35s;
    position: relative;
}
.slide-upcoming:hover {
    border-color: rgba(0,255,136,0.2);
    transform: translateY(-2px);
}
.slide-upcoming .upcoming-date {
    font-family: var(--font-display);
    font-size: 11px;
    color: var(--accent-green);
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.slide-upcoming .upcoming-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 6px;
}
.slide-upcoming .upcoming-time {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
}

/* ---- Light Theme Slider ---- */
[data-theme="light"] .slider-track-wrap::before { background: linear-gradient(90deg, #f4f6f9, transparent); }
[data-theme="light"] .slider-track-wrap::after { background: linear-gradient(-90deg, #f4f6f9, transparent); }
[data-theme="light"] .slider-arrow { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .slider-arrow:hover { border-color: #00995c; color: #00995c; background: rgba(0,153,92,0.04); }
[data-theme="light"] .slider-progress { background: rgba(0,0,0,0.04); }
[data-theme="light"] .slide-episode { background: #fff; border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .slide-episode:hover { border-color: rgba(0,153,92,0.2); box-shadow: 0 12px 40px rgba(0,0,0,0.06); }
[data-theme="light"] .slide-episode .slide-cover { background: linear-gradient(135deg, rgba(0,153,92,0.06), rgba(0,136,170,0.04)); }
[data-theme="light"] .slide-episode .slide-play { background: #00995c; }
[data-theme="light"] .slide-news { background: #fff; border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .slide-news:hover { border-color: rgba(0,136,170,0.2); box-shadow: 0 10px 30px rgba(0,0,0,0.04); }
[data-theme="light"] .slide-news::before { background: linear-gradient(90deg, #00995c, #0088aa); }
[data-theme="light"] .slide-stat { background: #fff; border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .slide-threat.sev-critical { background: rgba(204,34,68,0.03); border-color: rgba(204,34,68,0.12); }
[data-theme="light"] .slide-threat.sev-high { background: rgba(204,136,0,0.03); border-color: rgba(204,136,0,0.12); }
[data-theme="light"] .slide-upcoming { background: linear-gradient(135deg, rgba(0,153,92,0.03), rgba(0,136,170,0.02)); border-color: rgba(0,153,92,0.08); }

/* ---- Responsive Slider ---- */
@media (max-width: 768px) {
    .slide-episode { flex: 0 0 260px; }
    .slide-news { flex: 0 0 240px; }
    .slide-stat { flex: 0 0 160px; }
    .slide-threat { flex: 0 0 220px; }
    .slide-upcoming { flex: 0 0 220px; }
    .slider-track-wrap::before,
    .slider-track-wrap::after { width: 24px; }
    .slider-controls { gap: 4px; }
    .slider-arrow { width: 28px; height: 28px; font-size: 12px; }
}

/* ============================================================
   END SLIDER SYSTEM
   ============================================================ */

/* ---- Comments Section ---- */
.comments-section {
    border-top: 1px solid var(--border-subtle);
    padding-top: 32px;
    margin-top: 40px;
}

.comment-form textarea {
    min-height: 80px;
}

.comment-item {
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    transition: var(--transition);
}
.comment-item:hover {
    border-color: var(--border-accent);
}
.comment-pinned {
    border-color: rgba(255,170,0,0.2);
    background: rgba(255,170,0,0.02);
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.comment-author {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.comment-badge {
    display: inline-block;
    font-size: 8px;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(0,255,136,0.08);
    color: var(--accent-green);
    border: 1px solid rgba(0,255,136,0.15);
    margin-left: 6px;
    vertical-align: middle;
}

.comment-body {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
    word-break: break-word;
}

.comment-actions {
    margin-top: 8px;
    display: flex;
    gap: 12px;
}

.reply-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    padding: 2px 0;
    font-family: var(--font-mono);
    transition: var(--transition);
}
.reply-btn:hover {
    color: var(--accent-cyan);
}

.comment-replies {
    margin-top: 8px;
}

/* Post Content Formatting */
.post-content p { margin-bottom: 16px; }
.post-content h2 { font-size: 20px; color: var(--text-primary); margin: 28px 0 12px; }
.post-content h3 { font-size: 17px; color: var(--text-primary); margin: 24px 0 10px; }
.post-content ul, .post-content ol { padding-left: 24px; margin-bottom: 16px; }
.post-content li { margin-bottom: 6px; }
.post-content blockquote {
    border-left: 3px solid var(--accent-cyan);
    padding: 12px 20px;
    margin: 16px 0;
    background: rgba(0,212,255,0.03);
    color: var(--text-secondary);
    font-style: italic;
}
.post-content code {
    font-family: var(--font-mono);
    background: rgba(0,255,136,0.06);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}
.post-content img { border-radius: var(--radius-md); margin: 16px 0; }

/* Post Author Card */
.post-author {
    transition: var(--transition);
}
.post-author:hover {
    border-color: var(--border-accent);
}

/* Light theme comment overrides */
[data-theme="light"] .comment-item {
    background: rgba(0,0,0,0.015);
    border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .comment-item:hover {
    border-color: rgba(0,153,92,0.2);
}
[data-theme="light"] .comment-pinned {
    background: rgba(255,170,0,0.03);
    border-color: rgba(204,136,0,0.15);
}
[data-theme="light"] .reply-btn:hover {
    color: #0088aa;
}
[data-theme="light"] .post-content blockquote {
    background: rgba(0,136,170,0.04);
}

@media (max-width: 768px) {
    .comment-item { margin-left: 0 !important; padding: 12px; }
    .comment-form .form-row, .comment-form > div[style*="grid"] { grid-template-columns: 1fr !important; }
}

/* ============================================================
   CHATBOT WIDGET
   ============================================================ */
#cpChatWidget { position: fixed; bottom: 24px; right: 24px; z-index: 9999; font-family: var(--font-body); }
[dir="rtl"] #cpChatWidget { right: auto; left: 24px; }

/* Toggle Button */
#cpChatToggle {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #00ff88, #00d4ff);
    border: none; color: #0a0f1c; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 24px rgba(0,255,136,0.25), 0 0 0 0 rgba(0,255,136,0.3);
    transition: all 0.3s ease; position: relative;
    animation: cpPulse 3s ease-in-out infinite;
}
#cpChatToggle:hover { transform: scale(1.08); box-shadow: 0 6px 32px rgba(0,255,136,0.35); }
@keyframes cpPulse {
    0%, 100% { box-shadow: 0 4px 24px rgba(0,255,136,0.25), 0 0 0 0 rgba(0,255,136,0.2); }
    50% { box-shadow: 0 4px 24px rgba(0,255,136,0.25), 0 0 0 8px rgba(0,255,136,0); }
}

/* Chat Panel */
#cpChatPanel {
    position: absolute; bottom: 72px; right: 0;
    width: 380px; max-height: 540px; border-radius: 16px;
    background: var(--bg-primary); border: 1px solid var(--border-accent);
    box-shadow: 0 12px 48px rgba(0,0,0,0.4), 0 0 1px rgba(0,255,136,0.2);
    display: flex; flex-direction: column; overflow: hidden;
    transition: opacity 0.25s, transform 0.25s;
}
[dir="rtl"] #cpChatPanel { right: auto; left: 0; }
#cpChatPanel.cp-chat-hidden { opacity: 0; transform: translateY(12px) scale(0.95); pointer-events: none; }
#cpChatPanel.cp-chat-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* Header */
#cpChatHeader {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; background: linear-gradient(135deg, rgba(0,255,136,0.06), rgba(0,212,255,0.04));
    border-bottom: 1px solid var(--border-subtle);
}
.cp-chat-header-info { display: flex; align-items: center; gap: 10px; }
.cp-chat-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #00ff88, #00d4ff); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.cp-chat-bot-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.cp-chat-status { font-size: 10px; color: var(--accent-green); font-family: var(--font-mono); }
.cp-chat-header-actions { display: flex; gap: 4px; }
.cp-chat-header-actions button {
    background: none; border: 1px solid var(--border-subtle); border-radius: 6px;
    padding: 5px 7px; cursor: pointer; color: var(--text-muted); transition: all 0.2s;
}
.cp-chat-header-actions button:hover { border-color: var(--accent-green); color: var(--accent-green); }

/* Messages */
#cpChatMessages {
    flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px;
    min-height: 300px; max-height: 380px;
    scrollbar-width: thin; scrollbar-color: rgba(0,255,136,0.1) transparent;
}
.cp-msg { display: flex; flex-direction: column; }
.cp-msg-user { align-items: flex-end; }
[dir="rtl"] .cp-msg-user { align-items: flex-start; }
.cp-msg-bot { align-items: flex-start; }
[dir="rtl"] .cp-msg-bot { align-items: flex-end; }
.cp-msg-bubble {
    max-width: 85%; padding: 10px 14px; border-radius: 12px;
    font-size: 13px; line-height: 1.65; word-wrap: break-word;
}
.cp-msg-user .cp-msg-bubble {
    background: linear-gradient(135deg, rgba(0,255,136,0.12), rgba(0,212,255,0.08));
    border: 1px solid rgba(0,255,136,0.15); color: var(--text-primary);
    border-bottom-right-radius: 4px;
}
[dir="rtl"] .cp-msg-user .cp-msg-bubble { border-bottom-right-radius: 12px; border-bottom-left-radius: 4px; }
.cp-msg-bot .cp-msg-bubble {
    background: var(--bg-secondary); border: 1px solid var(--border-subtle);
    color: var(--text-secondary); border-bottom-left-radius: 4px;
}
[dir="rtl"] .cp-msg-bot .cp-msg-bubble { border-bottom-left-radius: 12px; border-bottom-right-radius: 4px; }
.cp-msg-bubble code {
    background: rgba(0,255,136,0.08); padding: 1px 5px; border-radius: 3px;
    font-family: var(--font-mono); font-size: 11px;
}
.cp-msg-time { font-size: 9px; color: var(--text-dim); margin-top: 3px; font-family: var(--font-mono); }

/* Typing Indicator */
.cp-typing { display: flex; gap: 5px; padding: 12px 16px !important; }
.cp-typing span {
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent-green); opacity: 0.4;
    animation: cpTypeDot 1.4s ease-in-out infinite;
}
.cp-typing span:nth-child(2) { animation-delay: 0.2s; }
.cp-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes cpTypeDot { 0%,60%,100% { opacity: 0.4; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

/* Input */
#cpChatInput {
    display: flex; gap: 8px; padding: 12px 14px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-primary);
}
#cpChatField {
    flex: 1; padding: 9px 14px; border-radius: 10px;
    background: var(--bg-secondary); border: 1px solid var(--border-subtle);
    color: var(--text-primary); font-size: 13px; outline: none;
    transition: border-color 0.2s;
}
#cpChatField:focus { border-color: var(--accent-green); }
#cpChatField::placeholder { color: var(--text-dim); }
#cpChatSend {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--accent-green); border: none;
    color: var(--bg-primary); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
#cpChatSend:hover { background: #00e67a; transform: scale(1.05); }

/* Mobile */
@media (max-width: 480px) {
    #cpChatPanel { width: calc(100vw - 32px); right: -8px; bottom: 66px; max-height: 70vh; }
    [dir="rtl"] #cpChatPanel { left: -8px; right: auto; }
    #cpChatWidget { bottom: 16px; right: 16px; }
    [dir="rtl"] #cpChatWidget { right: auto; left: 16px; }
}

/* Light theme overrides */
[data-theme="light"] #cpChatToggle { box-shadow: 0 4px 24px rgba(0,0,0,0.1); }
[data-theme="light"] #cpChatPanel { box-shadow: 0 12px 48px rgba(0,0,0,0.12); }
[data-theme="light"] .cp-msg-user .cp-msg-bubble { background: linear-gradient(135deg, rgba(0,180,100,0.1), rgba(0,150,200,0.06)); }

/* ============================================================
   HOMEPAGE — Hero, News Grid, Frameworks, Newsletter, Trust
   ============================================================ */

/* ── HERO SECTION ── */
.cp-hero {
    position: relative;
    padding: 80px 0 60px;
    overflow: hidden;
    min-height: 520px;
    display: flex;
    align-items: center;
}
.cp-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,255,136,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,136,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: heroGridDrift 20s linear infinite;
    opacity: 0.6;
}
@keyframes heroGridDrift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}
.cp-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
}
.cp-hero-glow-1 {
    width: 500px; height: 500px;
    top: -100px; left: -100px;
    background: radial-gradient(circle, rgba(0,255,136,0.08) 0%, transparent 70%);
}
.cp-hero-glow-2 {
    width: 400px; height: 400px;
    bottom: -80px; right: -60px;
    background: radial-gradient(circle, rgba(0,212,255,0.06) 0%, transparent 70%);
}
.cp-hero-content {
    position: relative;
    z-index: 2;
}
.cp-hero-main {
    max-width: 720px;
    margin-bottom: 48px;
}
.cp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(0,255,136,0.06);
    border: 1px solid rgba(0,255,136,0.15);
    border-radius: 24px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--accent-green);
    margin-bottom: 24px;
    letter-spacing: 0.5px;
}
.cp-hero-pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent-green);
    animation: heroPulse 2s ease-in-out infinite;
}
@keyframes heroPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,255,136,0.4); }
    50% { opacity: 0.7; box-shadow: 0 0 0 8px rgba(0,255,136,0); }
}
.cp-hero-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
}
.cp-hero-line {
    display: block;
}
.cp-hero-line:first-child {
    font-size: clamp(32px, 5vw, 56px);
    color: var(--text-primary);
}
.cp-hero-gradient {
    font-size: clamp(24px, 3.5vw, 40px);
    background: linear-gradient(135deg, #00ff88, #00d4ff, #b464ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cp-hero-desc {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 32px;
    max-width: 600px;
}
.cp-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.cp-hero-actions .btn-lg {
    padding: 14px 32px;
    font-size: 14px;
    font-weight: 600;
}

/* ── Hero Two-Column Layout ── */
.cp-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    direction: ltr;
    align-items: stretch;
    width: 100%;
    min-height: 680px;
    padding: 0;
    gap: 0;
}
.cp-hero-main {
    max-width: 100%;
    margin-bottom: 36px;
    position: relative;
    z-index: 3;
}
.cp-hero-stats {
    margin-top: auto;
    flex-shrink: 0;
}
/* Warrior column — RIGHT in English */
.cp-hero-warrior-wrap {
    flex-shrink: 0;
    width: 280px;
    min-width: 280px;
    order: 2;
    position: relative;
    height: 100%;
    min-height: 480px;
    pointer-events: none;
    z-index: 3;
    background: transparent;
    overflow: hidden;
}
/* Text column — LEFT in English */
.cp-hero-text-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 48px 80px 80px;
    gap: 0;
    direction: ltr;
    order: 1;
}

/* ═══ WARRIOR VISUAL EFFECTS ═══ */
.cp-warrior-glow-base {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 120px;
    background: radial-gradient(ellipse, rgba(0,255,136,0.22) 0%, rgba(0,212,255,0.10) 50%, transparent 75%);
    filter: blur(24px);
    animation: warriorGlowPulse 3s ease-in-out infinite;
}
@keyframes warriorGlowPulse {
    0%,100% { opacity:0.7; transform:translateX(-50%) scaleX(1); }
    50%      { opacity:1;   transform:translateX(-50%) scaleX(1.12); }
}
.cp-warrior-rings {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cp-warrior-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid transparent;
}
.cp-warrior-ring-1 {
    width: 220px; height: 280px;
    border-color: rgba(0,255,136,0.12);
    border-top-color: rgba(0,255,136,0.5);
    border-right-color: rgba(0,255,136,0.2);
    animation: warriorRing1 8s linear infinite;
    box-shadow: 0 0 20px rgba(0,255,136,0.05) inset;
}
.cp-warrior-ring-2 {
    width: 300px; height: 300px;
    border-color: rgba(0,212,255,0.08);
    border-bottom-color: rgba(0,212,255,0.4);
    border-left-color: rgba(0,212,255,0.15);
    animation: warriorRing2 12s linear infinite;
}
.cp-warrior-ring-3 {
    width: 220px; height: 220px;
    border-color: rgba(180,100,255,0.06);
    border-top-color: rgba(180,100,255,0.3);
    animation: warriorRing3 6s linear infinite reverse;
}
@keyframes warriorRing1 { to { transform: rotate(360deg); } }
@keyframes warriorRing2 { to { transform: rotate(-360deg); } }
@keyframes warriorRing3 { to { transform: rotate(360deg); } }
.cp-warrior-scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,255,136,0.04) 48%,
        rgba(0,255,136,0.10) 50%,
        rgba(0,255,136,0.04) 52%,
        transparent 100%
    );
    background-size: 100% 200%;
    animation: warriorScan 4s linear infinite;
    pointer-events: none;
}
@keyframes warriorScan {
    0%   { background-position: 0 -100%; }
    100% { background-position: 0 200%; }
}
.cp-warrior-img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 50px rgba(0,212,255,0.30))
            drop-shadow(0 0 100px rgba(0,255,136,0.18))
            drop-shadow(0 20px 60px rgba(0,0,0,0.4));
    animation: warriorFloat 5s ease-in-out infinite;
}
@keyframes warriorFloat {
    0%,100% { transform: translateX(-50%) translateY(0px); }
    50%     { transform: translateX(-50%) translateY(-16px); }
}
.cp-warrior-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
@keyframes warriorParticle {
    0%   { transform: translate(0,0) scale(1); }
    100% { transform: translate(20px,-30px) scale(0.4); opacity:0; }
}
.cp-warrior-data-lines {
    position: absolute;
    top: 28%;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 4;
}
.cp-wdl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: rgba(0,255,136,0.7);
    background: rgba(0,255,136,0.04);
    border: 1px solid rgba(0,255,136,0.12);
    border-radius: 4px;
    padding: 4px 8px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    animation: hudFadeIn 0.5s ease both;
}
.cp-wdl-1 { animation-delay: 1s; }
.cp-wdl-2 { animation-delay: 1.4s; color: rgba(0,212,255,0.7); background: rgba(0,212,255,0.04); border-color: rgba(0,212,255,0.12); }
.cp-wdl-3 { animation-delay: 1.8s; color: rgba(0,255,136,0.9); }
@keyframes hudFadeIn {
    from { opacity:0; transform:translateX(10px); }
    to   { opacity:1; transform:translateX(0); }
}

/* ── RTL (Arabic) ── */
[dir="rtl"] .cp-hero-warrior-wrap { order: 1 !important; }
[dir="rtl"] .cp-hero-text-col { order: 2 !important; padding: 80px 80px 80px 60px !important; text-align: right; }
[dir="rtl"] .cp-warrior-data-lines { right: auto; left: 8px; }
[dir="rtl"] .cp-wdl { direction: ltr; }
[dir="rtl"] .cp-hero-actions { justify-content: flex-end; }
[dir="rtl"] .cp-hero-badge { direction: rtl; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .cp-hero-content { min-height: 560px; }
    .cp-hero-warrior-wrap { width: 220px; min-width: 220px; }
    .cp-warrior-img { width: 200px; }
    .cp-warrior-data-lines { display: none; }
    .cp-warrior-ring-2, .cp-warrior-ring-3 { display: none; }
    .cp-hero-text-col { padding: 40px 40px 40px 32px; }
}
@media (max-width: 768px) {
    .cp-hero-content { flex-direction: column !important; min-height: auto !important; }
    .cp-hero-warrior-wrap { display: none !important; }
    .cp-hero-text-col { order: 1 !important; width: 100% !important; padding: 48px 24px 40px !important; text-align: center; }
    [dir="rtl"] .cp-hero-text-col { text-align: right; }
}

/* Hero Stats Row */
.cp-hero-stats {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-card);
}
.cp-hero-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    border-right: 1px solid var(--border);
    transition: background 0.2s;
}
.cp-hero-stat:last-child { border-right: none; }
.cp-hero-stat:hover { background: rgba(0,255,136,0.02); }
.cp-hero-stat-icon { font-size: 22px; margin-bottom: 6px; }
.cp-hero-stat-value {
    font-family: 'Orbitron', 'JetBrains Mono', monospace;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
}
.cp-hero-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.3px;
}

/* ── SECTIONS ── */
.cp-section { padding: 32px 0; }
.cp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* ── NEWS GRID — Editorial Layout ── */
.cp-news-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
    min-height: 320px;
}
.cp-news-hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    background: linear-gradient(160deg, rgba(0,212,255,0.04) 0%, rgba(0,255,136,0.02) 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color 0.2s, transform 0.2s;
    position: relative;
    overflow: hidden;
}
.cp-news-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-green));
    opacity: 0;
    transition: opacity 0.3s;
}
.cp-news-hero:hover {
    border-color: rgba(0,212,255,0.25);
    transform: translateY(-2px);
}
.cp-news-hero:hover::before { opacity: 1; }
.cp-news-hero-badges { display: flex; gap: 6px; margin-bottom: 16px; }
.cp-news-hero-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
    margin-bottom: 12px;
}
.cp-news-hero-excerpt {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 16px;
}
.cp-news-hero-meta {
    display: flex;
    gap: 16px;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-muted);
}

/* Side news stack */
.cp-news-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cp-news-card {
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color 0.2s, transform 0.15s;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cp-news-card:hover {
    border-color: rgba(0,212,255,0.2);
    transform: translateX(4px);
}
.cp-news-card-badges { display: flex; gap: 4px; margin-bottom: 8px; }
.cp-news-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cp-news-card-meta {
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-muted);
}

/* ── COMPLIANCE FRAMEWORKS GRID ── */
.cp-frameworks-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
.cp-fw-card {
    padding: 20px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: center;
    transition: border-color 0.25s, transform 0.2s, box-shadow 0.25s;
    cursor: default;
}
.cp-fw-card:hover {
    border-color: var(--fw-color, var(--accent-green));
    transform: translateY(-3px);
    /* Fallback for browsers without color-mix() support (Safari < 16.2, Chrome < 111, FF < 113) */
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 20px rgba(0,255,136,0.12);
}
@supports (color: color-mix(in srgb, red 10%, blue)) {
    .cp-fw-card:hover {
        box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 20px color-mix(in srgb, var(--fw-color, #00ff88) 15%, transparent);
    }
}
.cp-fw-icon { font-size: 28px; margin-bottom: 10px; }
.cp-fw-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--fw-color, var(--accent-green));
    margin-bottom: 6px;
    font-family: 'Outfit', sans-serif;
}
.cp-fw-desc {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ── NEWSLETTER CTA ── */
.cp-newsletter-section {
    padding: 48px 0;
}
.cp-newsletter-card {
    background: linear-gradient(135deg, rgba(0,255,136,0.04) 0%, rgba(0,212,255,0.03) 50%, rgba(180,100,255,0.02) 100%);
    border: 1px solid rgba(0,255,136,0.12);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
}
.cp-newsletter-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}
.cp-newsletter-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}
.cp-newsletter-form {
    display: flex;
    gap: 8px;
    max-width: 440px;
    margin: 0 auto 16px;
}
.cp-newsletter-input {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: 'JetBrains Mono', monospace;
    outline: none;
    transition: border-color 0.2s;
}
.cp-newsletter-input:focus { border-color: var(--accent-green); }
.cp-newsletter-input::placeholder { color: var(--text-dim); }
.cp-newsletter-meta {
    font-size: 11px;
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
}

/* ── TRUST BAR ── */
.cp-trust-section { padding: 24px 0 48px; }
.cp-trust-bar {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}
.cp-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.3px;
}
.cp-trust-icon { font-size: 18px; }

/* ── RESPONSIVE ── */
@media (max-width: 992px) {
    .cp-hero { padding: 48px 0 40px; min-height: auto; }
    .cp-hero-stats { flex-wrap: wrap; }
    .cp-hero-stat { min-width: 45%; border-bottom: 1px solid var(--border); }
    .cp-hero-stat:nth-child(2) { border-right: none; }
    .cp-news-grid { grid-template-columns: 1fr; }
    .cp-news-side { flex-direction: row; flex-wrap: wrap; }
    .cp-news-card { min-width: calc(50% - 6px); }
    .cp-frameworks-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .cp-hero { padding: 32px 0; }
    .cp-hero-title .cp-hero-line:first-child { font-size: 28px; }
    .cp-hero-gradient { font-size: 20px; }
    .cp-hero-desc { font-size: 13px; }
    .cp-hero-actions { flex-direction: column; }
    .cp-hero-actions .btn-lg { width: 100%; text-align: center; }
    .cp-hero-stats { flex-direction: column; }
    .cp-hero-stat { border-right: none; border-bottom: 1px solid var(--border); flex-direction: row; gap: 12px; padding: 14px 20px; }
    .cp-hero-stat:last-child { border-bottom: none; }
    .cp-hero-stat-value { font-size: 20px; }
    .cp-news-side { flex-direction: column; }
    .cp-news-card { min-width: 100%; }
    .cp-news-hero-title { font-size: 18px; }
    .cp-frameworks-grid { grid-template-columns: repeat(2, 1fr); }
    .cp-newsletter-card { padding: 24px 16px; }
    .cp-newsletter-form { flex-direction: column; }
    .cp-trust-bar { gap: 16px; }
    .cp-trust-item { font-size: 10px; }
}

/* ── RTL ADJUSTMENTS ── */
[dir="rtl"] .cp-news-card:hover { transform: translateX(-4px); }
[dir="rtl"] .cp-hero-badge { direction: rtl; }

/* ── LIGHT THEME ── */
[data-theme="light"] .cp-hero-grid { background-image: linear-gradient(rgba(0,100,60,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,100,60,0.04) 1px, transparent 1px); }
[data-theme="light"] .cp-hero-glow-1 { background: radial-gradient(circle, rgba(0,180,100,0.06) 0%, transparent 70%); }
[data-theme="light"] .cp-hero-glow-2 { background: radial-gradient(circle, rgba(0,150,200,0.05) 0%, transparent 70%); }
[data-theme="light"] .cp-news-hero { background: linear-gradient(160deg, rgba(0,150,200,0.03) 0%, rgba(0,180,100,0.02) 100%); }
[data-theme="light"] .cp-newsletter-card { background: linear-gradient(135deg, rgba(0,180,100,0.03) 0%, rgba(0,150,200,0.02) 50%, rgba(120,60,200,0.01) 100%); }
[data-theme="light"] .cp-fw-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 0 20px rgba(0,170,85,0.10); }
@supports (color: color-mix(in srgb, red 10%, blue)) {
    [data-theme="light"] .cp-fw-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 0 20px color-mix(in srgb, var(--fw-color, #00aa55) 10%, transparent); }
}

/* ============================================================
   MOBILE PROFESSIONAL OVERHAUL — iOS Safari + All Mobile
   ============================================================ */

/* ── Safe area (iPhone notch / Dynamic Island / home indicator) ── */
:root {
    --safe-top:    env(safe-area-inset-top,    0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left,   0px);
    --safe-right:  env(safe-area-inset-right,  0px);
}

/* ── iOS 100vh fix — use modern dvh (dynamic viewport height) with legacy fallbacks ── */
html { height: -webkit-fill-available; }
body {
    min-height: 100vh;                   /* universal fallback */
    min-height: -webkit-fill-available;  /* iOS Safari 12–14 */
    min-height: -moz-available;          /* Firefox legacy */
    min-height: 100dvh;                  /* modern browsers 2023+ — shrinks with mobile toolbars */
}

/* ── Tap highlight / selection ── */
* { -webkit-tap-highlight-color: transparent; }
input, textarea, select, button { -webkit-appearance: none; appearance: none; }
input[type="checkbox"], input[type="radio"] { -webkit-appearance: auto; appearance: auto; }

/* ── Header: safe area + mobile sizing ── */
@media (max-width: 768px) {
    .site-header {
        padding: 0 max(16px, var(--safe-left)) 0 max(16px, var(--safe-right));
        padding-top: var(--safe-top);
    }
    .header-inner { height: 60px; }

    /* Compact header-actions on mobile */
    .header-actions { gap: 8px; }
    .header-actions > a:not(.header-user-btn):not([id="hdrBell"]) { display: none; }
    .theme-toggle { width: 38px; height: 38px; font-size: 17px; }

    /* Larger touch targets for nav button */
    .mobile-nav-btn {
        width: 44px; height: 44px;
        padding: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: 20px;
        border-radius: 10px;
    }

    /* Logo smaller on mobile */
    .logo-icon { width: 38px; height: 38px; font-size: 16px; }
    .logo-text h1 { font-size: 14px; letter-spacing: 2px; }
    .logo-text span { font-size: 9px; }
}

@media (max-width: 480px) {
    .logo-text span { display: none; }
}

/* ── Mobile nav panel: full-screen overlay, professional ── */
@media (max-width: 1024px) {
    .mega-nav {
        padding-top: max(80px, calc(60px + var(--safe-top)));
        padding-bottom: max(40px, calc(20px + var(--safe-bottom)));
        padding-left:  max(20px, var(--safe-left));
        padding-right: max(20px, var(--safe-right));
        -webkit-overflow-scrolling: touch;
    }

    /* Menu items — bigger touch targets */
    .mni-link {
        min-height: 48px;
        padding: 12px 16px !important;
        font-size: 15px !important;
        font-weight: 500;
    }

    /* Sub-items */
    .drop-item {
        min-height: 44px;
        display: flex; align-items: center;
        font-size: 14px !important;
    }

    /* Section headers inside mega panels */
    .mega-col-title { font-size: 10px !important; padding: 8px 0 6px 0; }

    /* Close button (✕) in mobile nav */
    #mobileNavBtn[aria-expanded="true"] {
        color: var(--accent-cyan);
        border-color: rgba(0,212,255,0.3);
        background: rgba(0,212,255,0.06);
    }
}

/* ── Container: max-width tightening on small screens ── */
@media (max-width: 480px) {
    .container { padding: 0 14px; }
}

/* ── Page sections: vertical rhythm ── */
@media (max-width: 768px) {
    .section { padding: 48px 0; }
    .section-sm { padding: 32px 0; }
    .section-lg { padding: 64px 0; }
}

/* ── Typography scale for mobile ── */
@media (max-width: 768px) {
    h1, .h1 { font-size: clamp(26px, 7vw, 42px); }
    h2, .h2 { font-size: clamp(22px, 5.5vw, 34px); }
    h3, .h3 { font-size: clamp(18px, 4.5vw, 26px); }
    h4, .h4 { font-size: clamp(15px, 3.5vw, 20px); }
}

/* ── Cards: no horizontal overflow ── */
@media (max-width: 768px) {
    .card, .admin-form-card, .auth-card {
        border-radius: 14px;
    }
    .ep-card, .feature-card, .stat-card {
        padding: 20px 18px;
    }
}

/* ── Buttons: full-width on very small screens ── */
@media (max-width: 480px) {
    .btn-group-mobile-stack { flex-direction: column; width: 100%; }
    .btn-group-mobile-stack .btn { width: 100%; justify-content: center; }
}

/* ── Tables: horizontal scroll wrapper ── */
@media (max-width: 768px) {
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 480px; }
}

/* ── Footer: safe area at bottom ── */
.site-footer {
    padding-bottom: max(32px, calc(16px + var(--safe-bottom)));
}
@media (max-width: 768px) {
    .footer-inner { padding: 0 max(16px, var(--safe-left)); }
}

/* ── Auth forms ── */
@media (max-width: 480px) {
    .auth-card { margin: 16px; padding: 24px 20px; border-radius: 18px; }
    .auth-card .btn { min-height: 48px; font-size: 15px; }
}

/* ── Form inputs: prevent iOS zoom (font-size must be ≥16px) ── */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ── Notification bell badge ── */
@media (max-width: 768px) {
    #hdrBell { width: 38px; height: 38px; }
}

/* ── Search overlay on mobile ── */
@media (max-width: 768px) {
    .so-panel {
        border-radius: 0 0 20px 20px;
        padding-top: max(16px, var(--safe-top));
    }
    .so-input { font-size: 16px; }
}

/* ── Scrollbar: thinner on mobile ── */
@media (max-width: 768px) {
    ::-webkit-scrollbar { width: 3px; height: 3px; }
}

/* ── Prevent horizontal overflow site-wide ── */
body { overflow-x: hidden; }
.site-header, .site-footer, main, .container { max-width: 100vw; }

/* ── Fix: -webkit-background-clip text fallback for older Safari ── */
.logo-text h1 {
    background: linear-gradient(90deg, var(--accent-green), var(--accent-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-green); /* fallback */
}

/* ── Sticky header: account for iOS Safari dynamic toolbar ── */
.site-header {
    position: sticky;
    top: 0;
    top: env(safe-area-inset-top, 0);
}

/* ── Section hero / homepage: prevent overflow on narrow screens ── */
@media (max-width: 768px) {
    [class*="-hero"], [class*="hero-"] {
        padding-left: max(16px, var(--safe-left));
        padding-right: max(16px, var(--safe-right));
        overflow: hidden;
    }
    [class*="-hero"] br { display: none; }
}

/* ── Skeleton / loading states: smoother on mobile ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Enterprise register page mobile ── */
@media (max-width: 768px) {
    .er-wrap { padding: 20px 14px 60px; }
    .er-section { padding: 20px 16px; border-radius: 14px; }
    .er-section-title { font-size: 15px; }
    .er-type-card { padding: 16px; }
    .er-field { margin-bottom: 16px; }
    .er-input, .er-select, .er-textarea { font-size: 16px; padding: 11px 14px; }
    .er-grid-2 { grid-template-columns: 1fr !important; }
    .er-doc-read-btn { width: 100%; justify-content: center; margin-top: 8px; }
}

/* ═══════════════════════════════════════════════════════════
   NUCLEAR FIX: Scrolled header in light theme — DARK dropdowns
   Appended at absolute end of style.css — guaranteed last
   ═══════════════════════════════════════════════════════════ */
.site-header.scrolled {background:var(--hdr-scroll-bg,#060a0f)!important;border-bottom:1px solid rgba(0,255,136,.08)!important;box-shadow:0 4px 20px rgba(0,0,0,.3)!important}
.site-header.scrolled .mega-panel,
.site-header.scrolled .drop-menu {background:var(--hdr-scroll-bg,#0d1117)!important;border-color:rgba(0,255,136,.12)!important;box-shadow:0 24px 80px rgba(0,0,0,.6)!important}
.site-header.scrolled .mega-panel::before,
.site-header.scrolled .drop-menu::before {background:var(--hdr-scroll-bg,#0d1117)!important}
.site-header.scrolled .mega-panel-inner {background:transparent!important}
.site-header.scrolled .mega-col {border-right-color:rgba(255,255,255,.05)!important}
.site-header.scrolled .mega-col-title {color:rgba(0,255,136,.6)!important;border-bottom-color:rgba(0,255,136,.08)!important}
.site-header.scrolled .mega-item,
.site-header.scrolled .drop-item {color:rgba(255,255,255,.7)!important}
.site-header.scrolled .mega-item:hover,
.site-header.scrolled .drop-item:hover {background:rgba(255,255,255,.05)!important;color:#fff!important;border-color:rgba(255,255,255,.06)!important}
.site-header.scrolled .mega-item-body strong {color:inherit!important}
.site-header.scrolled .mega-item-body em,
.site-header.scrolled .drop-item-body em {color:rgba(255,255,255,.4)!important}
.site-header.scrolled .mega-item--active .mega-item-body strong,
.site-header.scrolled .drop-item--active .drop-item-body strong {color:#00ff88!important}
.site-header.scrolled .mega-cta-card {background:linear-gradient(135deg,rgba(0,255,136,.06),rgba(0,212,255,.04))!important;border-color:rgba(0,255,136,.15)!important}
.site-header.scrolled .mega-cta-title {color:#fff!important}
.site-header.scrolled .mega-cta-desc {color:rgba(255,255,255,.5)!important}
.site-header.scrolled .drop-divider {background:rgba(255,255,255,.06)!important}
.site-header.scrolled .mega-item-icon {opacity:1!important}
.site-header.scrolled .mni-link {color:var(--hdr-scroll-text,rgba(255,255,255,.85))!important;background:transparent!important;border-color:transparent!important}
.site-header.scrolled .mni-link:hover,
.site-header.scrolled .mni--active>.mni-link {color:#00ff88!important;background:rgba(0,255,136,.1)!important;border-color:rgba(0,255,136,.22)!important}
.site-header.scrolled .mni-caret {color:rgba(255,255,255,.6)!important}
.site-header.scrolled .ai-header-btn {color:rgba(180,106,255,.9)!important;border-color:rgba(180,106,255,.3)!important;background:transparent!important}
.site-header.scrolled .ai-header-btn:hover {color:#b46aff!important;background:rgba(180,106,255,.1)!important}
.site-header.scrolled .header-actions .btn-outline {color:#00ff88!important;border-color:rgba(0,255,136,.3)!important;background:transparent!important}
.site-header.scrolled .header-actions .btn-primary {background:linear-gradient(135deg,#00ff88,#00d4ff)!important;color:#060a0f!important}
.site-header.scrolled .header-actions .btn-ghost {color:#00ff88!important;border-color:rgba(0,255,136,.2)!important;background:rgba(0,255,136,.06)!important}
.site-header.scrolled .theme-toggle {color:rgba(255,255,255,.7)!important;border-color:rgba(255,255,255,.15)!important;background:transparent!important}
.site-header.scrolled .header-user-name {color:rgba(255,255,255,.75)!important}
.site-header.scrolled .header-user-btn {color:rgba(255,255,255,.8)!important;border-color:rgba(255,255,255,.12)!important}
.site-header.scrolled .lang-switch {color:rgba(255,255,255,.7)!important;border-color:rgba(255,255,255,.12)!important;background:transparent!important}
.site-header.scrolled #hdrBell {color:rgba(255,255,255,.7)!important;border-color:rgba(255,255,255,.12)!important}
.site-header.scrolled .logo,.site-header.scrolled .site-title {color:#fff!important}

/* Light theme scrolled header vars */
[data-theme="light"]{--hdr-scroll-bg:#fff;--hdr-scroll-text:rgba(0,0,0,.7)}

}
.navbar .dropdown-menu, nav .dropdown-menu, .nav-dropdown, 
header .dropdown-menu, .main-nav .dropdown-menu,
.submenu, .sub-menu, [class*="nav"] .dropdown-menu {
    z-index: 1051 !important;
}
.announcement-banner, .announcement-marquee, .announcement-bar,
[class*="announcement"], .marquee-container {
    z-index: 999 !important;
}

/* ── Nav & Announcement Stacking Fix ── */
/* Ensure navigation and its dropdowns are ABOVE announcement banners */
header, .site-header, nav.navbar, .navbar, .main-navigation, 
.nav-wrapper, .top-nav, #main-nav, [role="navigation"] {
    position: relative !important;
    z-index: 1100 !important;
}

/* Dropdown menus need highest z-index */
.dropdown-menu, .dropdown-content, .sub-menu, .submenu,
nav .dropdown-menu, .navbar .dropdown-menu,
header .dropdown-menu, .mega-menu {
    z-index: 1200 !important;
    position: absolute !important;
}

/* Announcement banners/marquees stay below nav */
.announcement-banner, .announcement-marquee, .announcement-bar,
.announcements-container, [class*="announcement-banner"],
[class*="announcement-marquee"], .marquee-wrapper, .marquee-container,
.ciso-announcement-banner, .ciso-announcement-marquee {
    position: relative !important;
    z-index: 900 !important;
}

/* Announcement modals (popups) can be high — they cover everything */
.announcement-modal, .ciso-announcement-modal, .modal {
    z-index: 9999 !important;
}
/* ── End Nav & Announcement Stacking Fix ── */