/* CYBERDUDEBIVASH AI Security Hub — Main CSS v10.0 | Extracted for performance */
:root{
--bg:#0a0a1a;--surface:#0f0f2e;--surface2:#13132b;--border:#1e1e4a;
--accent:#00d4ff;--accent2:#7c3aed;--accent3:#10b981;--warn:#f59e0b;--danger:#ef4444;
--text:#e2e8f0;--text-muted:#94a3b8;--text-dim:#64748b;
--card:#111130;--radius:12px;--shadow:0 4px 24px rgba(0,0,0,.4);
--glow:0 0 20px rgba(0,212,255,.15);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.6;overflow-x:hidden}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
/* ── Scrollbar ─────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--accent2);border-radius:3px}
/* ════════════════════════════════════════════════════════════
UI/UX ENHANCEMENT LAYER v14.0 — WORLD-CLASS DOMINATION
════════════════════════════════════════════════════════════ */
/* ── Global Glow Elevation System ── */
.scan-card, .price-card, .sentinel-panel, .api-catalog-card,
.p4-card, .p4-pkg-card, .trust-metric-card {
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.scan-card:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,212,255,.12) !important; border-color:rgba(0,212,255,.25) !important; }
.price-card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(124,58,237,.18) !important; }
.api-catalog-card:hover { transform:translateY(-3px); box-shadow:0 10px 32px rgba(0,212,255,.1) !important; }
.p4-pkg-card:hover { transform:translateY(-4px); box-shadow:0 14px 44px rgba(99,102,241,.18) !important; }
/* ── Premium Tab Navigation ── */
.tab-nav {
display:flex;
gap:4px;
background:rgba(255,255,255,.02);
border:1px solid rgba(255,255,255,.07);
border-radius:14px;
padding:6px;
flex-wrap:wrap;
margin-bottom:24px;
}
.tab-btn {
padding:9px 16px;
border-radius:10px;
font-size:12px;
font-weight:700;
letter-spacing:.03em;
border:none;
cursor:pointer;
background:transparent;
color:rgba(255,255,255,.45);
transition:all .2s ease;
white-space:nowrap;
}
.tab-btn:hover { background:rgba(0,212,255,.08); color:rgba(255,255,255,.8); }
.tab-btn.active { background:linear-gradient(135deg,rgba(0,212,255,.18),rgba(124,58,237,.18)); color:#00d4ff; border:1px solid rgba(0,212,255,.3); box-shadow:0 0 16px rgba(0,212,255,.12); }
/* ── Premium Scan Cards ── */
.scan-card {
background:linear-gradient(135deg,rgba(17,17,48,.95),rgba(13,13,38,.95));
border:1px solid rgba(255,255,255,.07);
border-radius:16px;
padding:28px;
margin-bottom:16px;
}
.scan-card h3 {
font-size:1.1rem;
font-weight:800;
margin-bottom:8px;
background:linear-gradient(90deg,#e2e8f0,#94a3b8);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
/* ── Premium Buttons ── */
.btn.btn-primary {
background:linear-gradient(135deg,#00d4ff,#0284c7) !important;
color:#000 !important;
font-weight:800 !important;
letter-spacing:.04em;
box-shadow:0 4px 20px rgba(0,212,255,.3);
transition:all .2s ease !important;
border:none !important;
}
.btn.btn-primary:hover {
background:linear-gradient(135deg,#22d3ee,#0ea5e9) !important;
box-shadow:0 6px 28px rgba(0,212,255,.45) !important;
transform:translateY(-1px);
}
/* ── Result Panels ── */
.results-panel.show {
animation: resultSlideIn .35s cubic-bezier(.16,1,.3,1);
}
@keyframes resultSlideIn {
from { opacity:0; transform:translateY(16px); }
to { opacity:1; transform:translateY(0); }
}
/* ── Section Headers ── */
.section-title {
background:linear-gradient(135deg,#fff 30%,rgba(0,212,255,.85));
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
/* ── Severity Badges ── */
.sev-critical { background:rgba(239,68,68,.15); color:#ef4444; border:1px solid rgba(239,68,68,.3); border-radius:6px; padding:2px 8px; font-size:11px; font-weight:800; letter-spacing:.06em; }
.sev-high { background:rgba(245,158,11,.15); color:#f59e0b; border:1px solid rgba(245,158,11,.3); border-radius:6px; padding:2px 8px; font-size:11px; font-weight:800; }
.sev-medium { background:rgba(124,58,237,.15); color:#a78bfa; border:1px solid rgba(124,58,237,.3); border-radius:6px; padding:2px 8px; font-size:11px; font-weight:700; }
.sev-low { background:rgba(16,185,129,.12); color:#10b981; border:1px solid rgba(16,185,129,.25); border-radius:6px; padding:2px 8px; font-size:11px; font-weight:700; }
/* ── Alert Boxes ── */
.alert { border-radius:10px; padding:12px 16px; font-size:13px; margin:12px 0; display:none; }
.alert.show { display:block; animation:alertFadeIn .25s ease; }
@keyframes alertFadeIn { from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)} }
.alert.error { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#fca5a5; }
.alert.success { background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.25); color:#6ee7b7; }
.alert.warning { background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.25); color:#fcd34d; }
/* ── Progress Bars ── */
.progress-bar { background:rgba(255,255,255,.05); border-radius:6px; height:6px; overflow:hidden; margin:10px 0; display:none; }
.progress-bar.active { display:block; }
.progress-fill { height:100%; background:linear-gradient(90deg,#00d4ff,#7c3aed); border-radius:6px; transition:width .4s ease; animation:progressShimmer 2s linear infinite; }
@keyframes progressShimmer {
0% { background-position:-200% center; }
100% { background-position:200% center; }
}
/* ── Premium Pricing Cards ── */
.price-card.featured {
background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(79,70,229,.08));
border:1px solid rgba(124,58,237,.4);
box-shadow:0 0 40px rgba(124,58,237,.12);
}
/* ── Form Inputs ── */
.form-group input, .form-group select, .form-group textarea,
input[type="text"], input[type="email"], input[type="password"], select, textarea {
background:rgba(0,0,0,.35) !important;
border:1px solid rgba(255,255,255,.1) !important;
color:#e2e8f0 !important;
border-radius:10px !important;
padding:10px 14px !important;
font-size:13px !important;
transition:border-color .2s, box-shadow .2s !important;
outline:none !important;
}
.form-group input:focus, input[type="text"]:focus, input[type="email"]:focus,
select:focus, textarea:focus {
border-color:rgba(0,212,255,.4) !important;
box-shadow:0 0 0 3px rgba(0,212,255,.08) !important;
}
/* ── Footer Brand ── */
footer { background:#030308; border-top:1px solid rgba(255,255,255,.05); }
.footer-brand {
font-size:1.2rem; font-weight:900; letter-spacing:.06em;
background:linear-gradient(90deg,#00d4ff,#7c3aed);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
/* ── Announcement Bar ── */
.ann-bar{background:linear-gradient(90deg,#7c3aed,#00d4ff,#10b981,#7c3aed);background-size:300% 100%;animation:gradShift 6s ease infinite;color:#fff;text-align:center;font-size:12px;font-weight:600;padding:8px 16px;letter-spacing:.5px}
.ann-bar a{color:#fff;text-decoration:none}
.ann-bar a:hover{text-decoration:underline}
@keyframes gradShift{0%{background-position:0%}50%{background-position:100%}100%{background-position:0%}}
/* ════════════════════════════════════════════════════════════
GOD-LEVEL DESIGN SYSTEM v11.0 — CYBERDUDEBIVASH
════════════════════════════════════════════════════════════ */
/* ── Platform Status Bar ─────────────────────────────────── */
.platform-status-bar{
background:rgba(10,10,26,.95);border-bottom:1px solid rgba(0,212,255,.12);
padding:6px 24px;display:flex;align-items:center;justify-content:space-between;
font-size:11px;color:var(--text-muted);gap:16px;flex-wrap:wrap;
position:sticky;top:0;z-index:1000;backdrop-filter:blur(12px);
}
.status-dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:5px;animation:statusPulse 2s ease-in-out infinite}
.status-dot.green{background:#10b981;box-shadow:0 0 8px #10b981}
.status-dot.yellow{background:#f59e0b;box-shadow:0 0 8px #f59e0b}
.status-dot.red{background:#ef4444;box-shadow:0 0 8px #ef4444}
@keyframes statusPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
.status-items{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.status-item{display:flex;align-items:center;gap:4px;white-space:nowrap}
.status-item span{font-weight:700;color:var(--text)}
.status-ticker{display:flex;align-items:center;gap:8px;flex:1;overflow:hidden}
.ticker-label{font-size:10px;font-weight:800;color:var(--accent);letter-spacing:1px;white-space:nowrap;padding:2px 6px;background:rgba(0,212,255,.1);border-radius:4px;border:1px solid rgba(0,212,255,.2)}
.ticker-text{font-size:11px;color:var(--text-muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ticker-text strong{color:#ef4444}
/* ── Enhanced Metric Cards ───────────────────────────────── */
.metric-card{
position:relative;overflow:hidden;
background:linear-gradient(135deg,var(--card) 0%,rgba(17,17,48,.95) 100%);
border:1px solid rgba(var(--mc-color-raw,0,212,255),.15);
border-radius:var(--radius);padding:22px;
transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
cursor:default;
}
.metric-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent,var(--mc-color,#00d4ff),transparent);
opacity:.7;
}
.metric-card::after{
content:'';position:absolute;inset:0;
background:radial-gradient(circle at 80% 20%,rgba(0,212,255,.04) 0%,transparent 60%);
pointer-events:none;
}
.metric-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.4),0 0 20px rgba(0,212,255,.08);border-color:rgba(0,212,255,.3)}
.metric-live-badge{font-size:9px;font-weight:800;letter-spacing:1.5px;padding:2px 7px;border-radius:4px;animation:liveBadgePulse 2s ease infinite;border:1px solid}
@keyframes liveBadgePulse{0%,100%{opacity:1}50%{opacity:.6}}
/* ── Terminal/Cyber Typography ───────────────────────────── */
.cyber-mono{font-family:'Courier New',Courier,monospace;font-weight:700}
.cyber-glow{text-shadow:0 0 20px currentColor}
.section-label-v11{
font-size:10px;font-weight:800;letter-spacing:3px;text-transform:uppercase;
color:var(--accent);margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.section-label-v11::before{content:'';display:block;width:20px;height:1px;background:var(--accent);opacity:.6}
.section-label-v11::after{content:'';display:block;flex:1;height:1px;background:linear-gradient(90deg,rgba(0,212,255,.3),transparent)}
/* ── Threat Intelligence Panel ───────────────────────────── */
.threat-intel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:12px}
.cve-card-v11{
background:rgba(17,17,48,.8);border:1px solid rgba(255,255,255,.06);
border-radius:10px;padding:14px;transition:all .2s ease;
border-left:3px solid transparent;cursor:pointer;
}
.cve-card-v11:hover{background:rgba(30,30,80,.6);border-color:rgba(0,212,255,.2)}
.cve-card-v11.sev-CRITICAL{border-left-color:#ef4444}
.cve-card-v11.sev-HIGH{border-left-color:#f59e0b}
.cve-card-v11.sev-MEDIUM{border-left-color:#3b82f6}
.cve-card-v11.sev-LOW{border-left-color:#10b981}
.cve-meta{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.cve-id-badge{font-family:monospace;font-size:11px;font-weight:700;color:var(--accent);background:rgba(0,212,255,.08);padding:2px 7px;border-radius:4px;border:1px solid rgba(0,212,255,.15)}
.cvss-badge{font-size:10px;font-weight:800;padding:2px 6px;border-radius:4px}
.cvss-CRITICAL{background:rgba(239,68,68,.2);color:#fca5a5;border:1px solid rgba(239,68,68,.3)}
.cvss-HIGH{background:rgba(245,158,11,.15);color:#fcd34d;border:1px solid rgba(245,158,11,.3)}
.cvss-MEDIUM{background:rgba(59,130,246,.15);color:#93c5fd;border:1px solid rgba(59,130,246,.3)}
.cvss-LOW{background:rgba(16,185,129,.12);color:#6ee7b7;border:1px solid rgba(16,185,129,.25)}
.kev-badge{font-size:9px;font-weight:800;color:#ef4444;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);padding:1px 5px;border-radius:3px;letter-spacing:.5px;animation:liveBadgePulse 2s ease infinite}
.cve-title-v11{font-size:12px;color:var(--text-muted);line-height:1.4;margin-bottom:4px}
.cve-footer{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--text-dim)}
/* ── Defense Marketplace Cards ───────────────────────────── */
.defense-card-v11{
background:linear-gradient(135deg,rgba(17,17,48,.95) 0%,rgba(11,11,30,.98) 100%);
border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:20px;
transition:all .25s ease;position:relative;overflow:hidden;
display:flex;flex-direction:column;gap:12px;
}
.defense-card-v11::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent2),var(--accent));opacity:.5}
.defense-card-v11:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 30px rgba(124,58,237,.1);border-color:rgba(124,58,237,.3)}
.defense-card-demand{height:3px;border-radius:2px;background:rgba(255,255,255,.08);margin-bottom:4px;overflow:hidden}
.defense-card-demand-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#10b981,#00d4ff);transition:width .6s ease}
/* ── Purchase Button Glow ────────────────────────────────── */
.btn-buy-v11{
display:block;width:100%;padding:12px;border-radius:10px;font-weight:800;
font-size:13px;cursor:pointer;border:none;text-align:center;
background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;
transition:all .2s ease;letter-spacing:.3px;
box-shadow:0 4px 15px rgba(124,58,237,.3);
}
.btn-buy-v11:hover{background:linear-gradient(135deg,#8b5cf6,#7c3aed);transform:translateY(-1px);box-shadow:0 6px 25px rgba(124,58,237,.5)}
.btn-buy-v11.critical{background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 4px 15px rgba(220,38,38,.4)}
.btn-buy-v11.critical:hover{box-shadow:0 6px 25px rgba(220,38,38,.6)}
/* ── Live Activity Feed ───────────────────────────────────── */
.activity-feed-v11{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto}
.activity-feed-v11::-webkit-scrollbar{width:3px}
.activity-feed-v11::-webkit-scrollbar-thumb{background:rgba(0,212,255,.3);border-radius:2px}
.activity-item-v11{
display:flex;align-items:center;gap:10px;padding:8px 12px;
background:rgba(255,255,255,.03);border-radius:8px;
border:1px solid rgba(255,255,255,.04);font-size:12px;
animation:activitySlideIn .3s ease;
}
@keyframes activitySlideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.activity-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
/* ── Risk Score Ring ─────────────────────────────────────── */
.risk-ring-v11{position:relative;width:120px;height:120px;margin:0 auto}
.risk-ring-v11 svg{transform:rotate(-90deg)}
.risk-ring-v11 .ring-bg{fill:none;stroke:rgba(255,255,255,.06);stroke-width:8}
.risk-ring-v11 .ring-fill{fill:none;stroke-width:8;stroke-linecap:round;stroke-dasharray:283;transition:stroke-dashoffset 1.5s cubic-bezier(.23,1,.32,1)}
.risk-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.risk-score-num{font-size:28px;font-weight:900;line-height:1;font-family:monospace}
.risk-score-lbl{font-size:9px;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase}
/* ── Scan Upsell Modal v11 ───────────────────────────────── */
.upsell-modal-v11{
background:linear-gradient(135deg,#0d0d26 0%,#0a0a1a 100%);
border:1px solid rgba(124,58,237,.35);border-radius:16px;
padding:28px;max-width:480px;width:100%;
box-shadow:0 24px 80px rgba(0,0,0,.7),0 0 40px rgba(124,58,237,.12);
}
/* ── Animated Grid Background ────────────────────────────── */
.cyber-grid-bg{
position:absolute;inset:0;pointer-events:none;opacity:.04;
background-image:
linear-gradient(rgba(0,212,255,.5) 1px,transparent 1px),
linear-gradient(90deg,rgba(0,212,255,.5) 1px,transparent 1px);
background-size:40px 40px;
animation:gridScroll 20s linear infinite;
}
@keyframes gridScroll{from{background-position:0 0}to{background-position:40px 40px}}
/* ── Scan line effect ────────────────────────────────────── */
@keyframes scanLine{0%{top:-5%}100%{top:105%}}
.scan-line{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,.3),transparent);animation:scanLine 4s linear infinite;pointer-events:none;z-index:1}
/* ── Enhanced Sentinel Feed ──────────────────────────────── */
.sentinel-v11{display:flex;flex-direction:column;gap:8px}
.sentinel-row-v11{
display:flex;align-items:flex-start;gap:12px;padding:10px 14px;
background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);
border-left:3px solid transparent;border-radius:8px;
transition:background .15s ease;cursor:pointer;
}
.sentinel-row-v11:hover{background:rgba(0,212,255,.04);border-color:rgba(0,212,255,.08)}
.sentinel-row-v11.crit{border-left-color:#ef4444}
.sentinel-row-v11.high{border-left-color:#f59e0b}
.sentinel-row-v11.med{border-left-color:#3b82f6}
/* ── Revenue Stats ────────────────────────────────────────── */
.rev-stat-v11{text-align:center;padding:16px;background:rgba(255,255,255,.03);border-radius:10px;border:1px solid rgba(255,255,255,.06)}
.rev-stat-val{font-size:24px;font-weight:900;font-family:monospace;color:var(--accent3)}
.rev-stat-lbl{font-size:11px;color:var(--text-dim);margin-top:2px}
/* ── Skeleton loaders ─────────────────────────────────────── */
.skel-v11{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:skelShimmer 1.5s ease infinite;border-radius:6px}
@keyframes skelShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* ── Conversion Banner ────────────────────────────────────── */
.conv-banner-v11{
background:linear-gradient(135deg,rgba(124,58,237,.12) 0%,rgba(0,212,255,.08) 100%);
border:1px solid rgba(124,58,237,.25);border-radius:12px;padding:18px 20px;
display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.conv-banner-v11 .cta-btn{
padding:10px 22px;background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;
border:none;border-radius:8px;font-weight:800;cursor:pointer;font-size:13px;
white-space:nowrap;box-shadow:0 4px 15px rgba(124,58,237,.35);
transition:all .2s ease;
}
.conv-banner-v11 .cta-btn:hover{box-shadow:0 6px 25px rgba(124,58,237,.55);transform:translateY(-1px)}
/* ── FOMO Notification Strip ─────────────────────────────── */
.fomo-strip-v11{
background:rgba(17,17,48,.9);border:1px solid rgba(16,185,129,.2);
border-radius:10px;padding:10px 16px;display:flex;align-items:center;gap:10px;
font-size:12px;animation:fomoFadeIn .5s ease;
}
@keyframes fomoFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.fomo-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#10b981);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
/* ── Chart Bars ───────────────────────────────────────────── */
.mini-bar-chart{display:flex;align-items:flex-end;gap:3px;height:40px}
.mini-bar{flex:1;background:rgba(0,212,255,.3);border-radius:2px 2px 0 0;transition:height .5s ease;min-width:4px}
.mini-bar:hover{background:rgba(0,212,255,.6)}
/* ── Announcement bar text ─────────────────────────────────── */
.ann-marquee{display:inline-block;animation:marquee 30s linear infinite;white-space:nowrap}
@keyframes marquee{0%{transform:translateX(100vw)}100%{transform:translateX(-100%)}}
/* ── Nav v12 ─────────────────────────────────────── */
nav{background:rgba(10,10,26,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:999;padding:0 24px;transition:box-shadow .3s}
nav.nav-scrolled{box-shadow:0 4px 32px rgba(0,0,0,.55)}
.nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px;position:relative}
a.nav-brand{font-size:17px;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap;text-decoration:none!important;cursor:pointer;display:flex;align-items:center;gap:6px;transition:opacity .2s;flex-shrink:0}
a.nav-brand:hover{opacity:.82}
.nav-links{display:flex;gap:20px;align-items:center;font-size:13px;font-weight:600}
.nav-links a{color:var(--text-muted);transition:color .2s;position:relative;padding-bottom:3px;text-decoration:none}
.nav-links a:hover{color:var(--accent);text-decoration:none}
.nav-links a.nav-active{color:var(--accent)!important}
.nav-links a.nav-active::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px}
.nav-cta{background:linear-gradient(135deg,var(--accent2),#4f46e5);color:#fff!important;padding:8px 16px;border-radius:8px;transition:transform .2s,box-shadow .2s!important}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(124,58,237,.4)!important}
/* ── Nav Dropdown ── */
.nav-dropdown{position:relative}
.nav-dd-toggle{cursor:pointer;display:flex;align-items:center;gap:4px;background:none;border:none;font-size:13px;font-weight:600;color:var(--text-muted);padding:0;transition:color .2s;font-family:inherit}
.nav-dd-toggle:hover{color:var(--accent)}
.nav-dd-menu{display:none;position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);min-width:218px;background:rgba(8,8,20,.98);border:1px solid rgba(0,212,255,.15);border-radius:12px;padding:8px;backdrop-filter:blur(24px);box-shadow:0 20px 60px rgba(0,0,0,.7);z-index:9999}
.nav-dd-menu::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:12px;height:6px;background:rgba(8,8,20,.98);border-top:1px solid rgba(0,212,255,.15);border-left:1px solid rgba(0,212,255,.15);border-radius:2px 2px 0 0;clip-path:polygon(0 100%,50% 0,100% 100%)}
.nav-dd-menu.open{display:flex;flex-direction:column;gap:2px;animation:ndFadeIn .15s ease}
@keyframes ndFadeIn{from{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.nav-dd-menu a{color:var(--text-muted)!important;padding:9px 13px!important;border-radius:8px;font-size:12px!important;font-weight:600;transition:all .15s;text-decoration:none!important;display:flex;align-items:center;gap:8px}
.nav-dd-menu a:hover{color:#fff!important;background:rgba(0,212,255,.07)!important;text-decoration:none!important}
/* ── Hamburger ── */
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:1px solid rgba(255,255,255,.08);cursor:pointer;padding:9px 10px;border-radius:8px;transition:all .2s}
.nav-hamburger:hover{border-color:rgba(0,212,255,.3);background:rgba(0,212,255,.05)}
.nav-hamburger span{width:20px;height:2px;background:rgba(255,255,255,.6);border-radius:2px;transition:all .25s;display:block}
.nav-hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
/* ── Mobile Drawer ── */
.nav-mobile-drawer{display:none;flex-direction:column;background:rgba(6,6,18,.98);border-top:1px solid rgba(0,212,255,.08);padding:10px 16px 18px;gap:2px}
.nav-mobile-drawer.open{display:flex;animation:ndSlide .2s ease}
@keyframes ndSlide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.nav-mobile-drawer a{color:var(--text-muted);padding:11px 14px;border-radius:8px;font-size:14px;font-weight:600;transition:all .15s;text-decoration:none;display:flex;align-items:center;gap:9px}
.nav-mobile-drawer a:hover,.nav-mobile-drawer a.nav-active{color:var(--accent);background:rgba(0,212,255,.06)}
.nav-mob-sep{height:1px;background:rgba(255,255,255,.05);margin:5px 0}
/* ── Scroll progress ── */
.nav-progress{position:absolute;bottom:-1px;left:0;height:2px;background:linear-gradient(90deg,#00d4ff,#7c3aed,#a78bfa);width:0%;transition:width .08s linear;pointer-events:none;border-radius:0 2px 2px 0}
/* ── Breadcrumb ── */
.page-breadcrumb{background:rgba(8,8,20,.88);border-bottom:1px solid rgba(255,255,255,.04);backdrop-filter:blur(10px);padding:7px 0;font-size:12px;position:sticky;top:64px;z-index:997;display:none}
.breadcrumb-inner{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.breadcrumb-inner a{color:rgba(255,255,255,.35);text-decoration:none;transition:color .2s;display:flex;align-items:center;gap:4px}
.breadcrumb-inner a:hover{color:var(--accent)}
.bc-sep{color:rgba(255,255,255,.2);font-size:13px}
#bc-current{color:rgba(255,255,255,.6);font-weight:600}
/* ── Back to top ── */
#back-to-top{position:fixed;bottom:28px;right:28px;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:#000;font-size:20px;font-weight:900;cursor:pointer;z-index:9990;box-shadow:0 4px 24px rgba(0,212,255,.35);transition:all .25s;align-items:center;justify-content:center;display:none;line-height:1}
#back-to-top:hover{transform:translateY(-4px) scale(1.1);box-shadow:0 10px 36px rgba(0,212,255,.6)}
/* ── Nav actions ── */
.nav-actions{display:flex;align-items:center;gap:10px}
/* ── Legal modal ── */
.legal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:10001;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto}
.legal-overlay.open{display:flex;animation:ndFadeIn .2s ease}
.legal-box{background:var(--surface);border:1px solid rgba(0,212,255,.12);border-radius:16px;max-width:760px;width:100%;padding:36px 32px;position:relative;max-height:80vh;overflow-y:auto;margin:auto}
.legal-box h2{font-size:20px;font-weight:800;margin-bottom:18px;color:var(--accent);padding-right:36px}
.legal-box h3{font-size:14px;font-weight:700;margin:18px 0 7px;color:var(--text)}
.legal-box p,.legal-box li{font-size:13px;color:var(--text-muted);line-height:1.8}
.legal-box ul{padding-left:20px;margin:8px 0}
.legal-box-close{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--text-muted);width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.legal-box-close:hover{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);color:#ef4444}
/* ── Responsive ── */
@media(max-width:768px){
.nav-links{display:none}
.nav-hamburger{display:flex}
#back-to-top{bottom:18px;right:14px;width:42px;height:42px;font-size:17px}
.breadcrumb-inner{padding:0 16px}
}
/* ── Ticker ────────────────────────────────────── */
.ticker{background:var(--surface2);border-bottom:1px solid var(--border);overflow:hidden;padding:6px 0}
.ticker-track{display:flex;gap:48px;animation:tick 30s linear infinite;white-space:nowrap;width:max-content}
.ticker-item{font-size:11px;font-weight:700;color:var(--accent3);letter-spacing:1px;text-transform:uppercase}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ── Hero ──────────────────────────────────────── */
.hero{text-align:center;padding:80px 24px 60px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(124,58,237,.2) 0%,transparent 70%);pointer-events:none}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(124,58,237,.15);border:1px solid rgba(124,58,237,.4);border-radius:20px;padding:6px 16px;font-size:12px;font-weight:700;color:var(--accent2);margin-bottom:24px;letter-spacing:.5px}
.hero-badge::before{content:'⚔️'}
h1{font-size:clamp(28px,5vw,52px);font-weight:900;line-height:1.1;margin-bottom:16px;background:linear-gradient(135deg,#fff 0%,var(--accent) 50%,var(--accent2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{font-size:clamp(14px,2vw,18px);color:var(--text-muted);max-width:620px;margin:0 auto 32px}
.trust-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:40px}
.badge{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:5px 14px;font-size:11px;font-weight:700;color:var(--text-muted);letter-spacing:.4px}
/* ── Scanner Tabs ──────────────────────────────── */
.scanner-section{max-width:900px;margin:0 auto;padding:0 24px 80px}
.tab-nav{display:flex;gap:4px;flex-wrap:wrap;background:var(--surface2);border-radius:var(--radius);padding:6px;margin-bottom:24px}
.tab-btn{flex:1;min-width:100px;background:transparent;border:none;color:var(--text-muted);padding:10px 12px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:.3px}
.tab-btn.active{background:linear-gradient(135deg,var(--accent2),#4f46e5);color:#fff;box-shadow:0 2px 12px rgba(124,58,237,.4)}
.tab-panel{display:none}
.tab-panel.active{display:block}
/* ── Scan Form ─────────────────────────────────── */
.scan-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.scan-card h3{font-size:18px;font-weight:800;margin-bottom:6px;color:#fff}
.scan-card p{font-size:13px;color:var(--text-muted);margin-bottom:20px}
.form-group{margin-bottom:16px}
label{font-size:12px;font-weight:700;color:var(--text-muted);display:block;margin-bottom:6px;letter-spacing:.4px;text-transform:uppercase}
input,select,textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px 14px;font-size:14px;outline:none;transition:border-color .2s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,212,255,.1)}
select option{background:var(--surface2)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
/* ── Buttons ───────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:700;border:none;cursor:pointer;transition:all .2s;letter-spacing:.3px}
.btn-primary{background:linear-gradient(135deg,var(--accent2),#4f46e5);color:#fff;box-shadow:0 4px 16px rgba(124,58,237,.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(124,58,237,.5)}
.btn-primary:disabled{opacity:.5;transform:none;cursor:not-allowed}
.btn-success{background:linear-gradient(135deg,var(--accent3),#059669);color:#fff}
.btn-unlock{background:linear-gradient(135deg,var(--warn),#d97706);color:#fff;width:100%;justify-content:center;margin-top:12px;font-size:15px;padding:14px;border:none;cursor:pointer}
.btn-unlock:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(245,158,11,.4)}
.btn-unlock:disabled{opacity:.6;cursor:wait;transform:none}
/* ── Payment Flow Overlay ──────────────────────────── */
.pay-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:2000;display:flex;align-items:center;justify-content:center;padding:16px}
.pay-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px;max-width:420px;width:100%;text-align:center;box-shadow:var(--shadow)}
.pay-spinner{width:48px;height:48px;border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}
@keyframes spin{to{transform:rotate(360deg)}}
.pay-success-icon{font-size:48px;margin-bottom:12px}
.pay-download-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--accent3),#059669);color:#fff;padding:14px 28px;border-radius:10px;font-weight:700;font-size:15px;text-decoration:none;margin-top:16px;transition:transform .2s}
.pay-download-btn:hover{transform:translateY(-2px);text-decoration:none;color:#fff}
/* ── Job Polling Status ────────────────────────────── */
.job-poll-card{background:rgba(0,212,255,.05);border:1px solid rgba(0,212,255,.2);border-radius:var(--radius);padding:20px;text-align:center;margin-top:12px}
.job-poll-title{font-weight:700;color:var(--accent);margin-bottom:8px;font-size:14px}
.job-poll-progress{width:100%;height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin:12px 0}
.job-poll-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px;width:0%;transition:width .6s ease}
.job-poll-status{font-size:12px;color:var(--text-muted)}
/* ── Recent Activity Section ──────────────────────── */
#recentActivity{max-width:1280px;margin:0 auto;padding:40px 24px 0}
.activity-title{font-size:13px;font-weight:800;color:var(--text-muted);letter-spacing:.8px;text-transform:uppercase;margin-bottom:12px}
.activity-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px 16px;margin-bottom:8px;font-size:13px}
.activity-mod{background:rgba(124,58,237,.2);color:var(--accent2);border-radius:4px;padding:2px 8px;font-size:11px;font-weight:700;text-transform:uppercase;white-space:nowrap}
.activity-target{flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.activity-score{font-weight:800;min-width:32px;text-align:right}
.activity-dl{color:var(--accent3);font-size:12px;white-space:nowrap}
.activity-time{color:var(--text-dim);font-size:11px;white-space:nowrap}
.btn-sm{padding:6px 14px;font-size:12px}
/* ── AI Brain Panel ────────────────────────────────── */
.ai-brain-panel{background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(0,212,255,.06));border:1px solid rgba(0,212,255,.2);border-radius:var(--radius);padding:20px;margin-top:20px}
.ai-brain-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.ai-brain-icon{width:32px;height:32px;background:linear-gradient(135deg,var(--accent2),var(--accent));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.ai-brain-title{font-weight:800;font-size:14px;color:var(--accent);letter-spacing:.3px}
.ai-brain-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.ai-brain-tab{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text-muted);padding:5px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}
.ai-brain-tab.active{background:rgba(0,212,255,.15);border-color:var(--accent);color:var(--accent)}
.ai-brain-tab:hover{border-color:var(--accent2);color:var(--text)}
.ai-brain-content{font-size:13px;color:var(--text-muted);line-height:1.7;min-height:60px}
.ai-brain-content h2,.ai-brain-content h3,.ai-brain-content h4{color:var(--text);margin:10px 0 6px;font-size:13px;font-weight:700}
.ai-brain-content strong{color:var(--text)}
.ai-brain-content ul{padding-left:18px}
.ai-brain-content li{margin-bottom:4px}
.ai-brain-loading{display:flex;align-items:center;gap:8px;color:var(--text-dim);font-size:12px}
/* ── AI Brain V2 Tab Buttons ───────────────────────── */
.v2-tab-btn{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text-muted);padding:4px 12px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
.v2-tab-btn:hover{border-color:var(--accent);color:var(--accent)}
.v2-tab-active{background:rgba(0,212,255,.15) !important;border-color:var(--accent) !important;color:var(--accent) !important}
/* ── Ecosystem Traffic Banner ───────────────────────────────────── */
#eco-banner{background:linear-gradient(135deg,#0a0a1a 0%,#0d0d2b 40%,#0a0a1a 100%);border-bottom:1px solid rgba(0,212,255,.25);padding:0;overflow:hidden;position:relative;z-index:998}
#eco-banner::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(0,212,255,.04) 30%,rgba(124,58,237,.06) 60%,transparent 100%);animation:eco-sweep 4s linear infinite}
@keyframes eco-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.eco-inner{max-width:1280px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:16px;flex-wrap:nowrap;overflow:hidden}
.eco-label{font-size:10px;font-weight:900;letter-spacing:2px;color:#ff6b35;white-space:nowrap;animation:eco-pulse 2s ease-in-out infinite;text-shadow:0 0 8px rgba(255,107,53,.5)}
@keyframes eco-pulse{0%,100%{opacity:1;text-shadow:0 0 8px rgba(255,107,53,.5)}50%{opacity:.7;text-shadow:0 0 16px rgba(255,107,53,.9)}}
.eco-track{display:flex;gap:0;flex:1;overflow:hidden;position:relative}
.eco-items{display:flex;gap:6px;animation:eco-scroll 28s linear infinite;white-space:nowrap}
.eco-items:hover{animation-play-state:paused}
@keyframes eco-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.eco-item{display:inline-flex;align-items:center;gap:8px;padding:5px 16px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);font-size:12px;font-weight:600;color:rgba(255,255,255,.8);text-decoration:none;transition:all .25s;cursor:pointer;flex-shrink:0}
.eco-item:hover{border-color:var(--accent);color:var(--accent);background:rgba(0,212,255,.08);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,212,255,.2);text-decoration:none}
.eco-item-icon{font-size:14px}
.eco-item-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;animation:eco-dot-blink 1.8s ease-in-out infinite}
@keyframes eco-dot-blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.eco-close{background:none;border:none;color:rgba(255,255,255,.3);cursor:pointer;font-size:16px;padding:4px 8px;flex-shrink:0;transition:color .2s;line-height:1}
.eco-close:hover{color:rgba(255,255,255,.7)}
/* ── Subscription / Feature Gating ─────────────────────────────── */
.gate-blur-wrap{position:relative;overflow:hidden;border-radius:10px}
.gate-blur-wrap .gate-blur-inner{filter:blur(5px);pointer-events:none;user-select:none;opacity:.4}
.gate-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(10,10,26,.6);backdrop-filter:blur(2px);border-radius:10px;z-index:10;padding:20px;text-align:center}
.gate-overlay-icon{font-size:28px}
.gate-overlay-title{font-size:14px;font-weight:800;color:#fff}
.gate-overlay-sub{font-size:12px;color:var(--text-muted);max-width:240px}
.gate-overlay-btn{background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;border:none;padding:8px 20px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:transform .15s}
.gate-overlay-btn:hover{transform:translateY(-1px)}
.sub-modal-plan-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border-radius:20px;font-size:12px;font-weight:800;margin-bottom:12px}
.sub-quota-bar-wrap{background:rgba(255,255,255,.06);border-radius:4px;height:6px;margin-top:6px;overflow:hidden}
.sub-quota-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#00d4ff,#7c3aed);transition:width .6s}
/* ── Attack Graph ──────────────────────────────────── */
.attack-graph-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-top:20px}
.attack-graph-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.attack-graph-title{font-weight:800;font-size:13px;color:var(--text);letter-spacing:.3px}
#attackGraphSvg{width:100%;height:320px;background:rgba(0,0,0,.2);border-radius:8px;overflow:hidden}
.graph-node-label{font-size:10px;fill:var(--text-muted);pointer-events:none}
.graph-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:11px;color:var(--text-muted)}
.graph-legend-item{display:flex;align-items:center;gap:5px}
.graph-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.graph-paths{margin-top:12px}
.graph-path-card{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:8px;font-size:12px}
.graph-path-title{font-weight:700;color:var(--text);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.path-likelihood{background:rgba(239,68,68,.15);color:#fca5a5;border-radius:4px;padding:2px 7px;font-size:11px}
.path-step{color:var(--text-muted);padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04);display:flex;gap:8px}
.path-step-num{color:var(--accent2);font-weight:700;min-width:16px}
/* ── Monitoring Dashboard ──────────────────────────── */
.monitor-section{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-top:20px}
.monitor-section-title{font-size:13px;font-weight:800;color:var(--accent3);letter-spacing:.5px;margin-bottom:14px;text-transform:uppercase}
.monitor-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
@media(max-width:600px){.monitor-form{grid-template-columns:1fr}}
.monitor-input{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:10px 12px;font-size:13px;width:100%}
.monitor-input:focus{outline:none;border-color:var(--accent)}
.monitor-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:8px;font-size:13px}
.monitor-name{flex:1;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.monitor-score{font-weight:800;min-width:40px;text-align:right}
.monitor-drift{font-size:11px;padding:2px 7px;border-radius:4px;white-space:nowrap}
.drift-degraded{background:rgba(239,68,68,.15);color:#fca5a5}
.drift-improved{background:rgba(16,185,129,.15);color:#6ee7b7}
.drift-stable{background:rgba(100,116,139,.15);color:var(--text-dim)}
.drift-new{background:rgba(0,212,255,.15);color:var(--accent)}
.monitor-chart{height:60px;display:flex;align-items:flex-end;gap:2px;margin-top:8px}
.monitor-chart-bar{flex:1;background:var(--accent2);border-radius:2px 2px 0 0;min-height:4px;transition:height .3s}
.monitor-next{font-size:11px;color:var(--text-dim);white-space:nowrap}
/* ── Threat Intel Badges ───────────────────────────── */
.threat-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#fca5a5;border-radius:6px;padding:3px 9px;font-size:11px;font-weight:700;margin:2px}
.threat-badge.kev{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3);color:#fcd34d}
.threat-badge.epss{background:rgba(124,58,237,.12);border-color:rgba(124,58,237,.3);color:#c4b5fd}
.cve-list{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.threat-boost-bar{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);border-radius:6px;padding:10px 14px;margin-top:10px;font-size:12px}
.threat-boost-label{color:var(--danger);font-weight:700;margin-bottom:4px}
/* ── Org Switcher (nav bar) ────────────────────────── */
.org-badge{background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.2);color:var(--accent);border-radius:6px;padding:4px 10px;font-size:11px;font-weight:700;cursor:pointer;transition:background .2s}
.org-badge:hover{background:rgba(0,212,255,.2)}
.scan-btn-row{margin-top:8px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* ── Progress ──────────────────────────────────── */
.progress-bar{display:none;width:100%;height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:16px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent),var(--accent3));border-radius:2px;animation:progressAnim 2s ease-in-out forwards}
@keyframes progressAnim{0%{width:0%}60%{width:75%}100%{width:90%}}
/* ── Results ───────────────────────────────────── */
.results-panel{display:none;margin-top:24px}
.results-panel.show{display:block}
.risk-header{display:flex;align-items:center;gap:24px;background:var(--surface2);border-radius:var(--radius);padding:24px;margin-bottom:20px;border:1px solid var(--border)}
.risk-circle{width:90px;height:90px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;flex-shrink:0;border:3px solid}
.risk-circle .score{font-size:28px;line-height:1}
.risk-circle .label{font-size:10px;letter-spacing:1px;margin-top:2px}
.risk-CRITICAL{border-color:var(--danger);background:rgba(239,68,68,.1);color:var(--danger)}
.risk-HIGH{border-color:var(--warn);background:rgba(245,158,11,.1);color:var(--warn)}
.risk-MEDIUM{border-color:#3b82f6;background:rgba(59,130,246,.1);color:#3b82f6}
.risk-LOW{border-color:var(--accent3);background:rgba(16,185,129,.1);color:var(--accent3)}
.risk-meta{flex:1}
.risk-meta h4{font-size:20px;font-weight:800;margin-bottom:4px}
.risk-meta p{font-size:13px;color:var(--text-muted)}
.risk-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.risk-tag{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:3px 10px;font-size:11px;font-weight:700;color:var(--text-muted)}
/* ── Findings ──────────────────────────────────── */
.findings-title{font-size:14px;font-weight:800;color:var(--text-muted);margin-bottom:12px;letter-spacing:.5px;text-transform:uppercase}
.finding-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:10px;border-left:3px solid}
.finding-CRITICAL{border-left-color:var(--danger)}
.finding-HIGH{border-left-color:var(--warn)}
.finding-MEDIUM{border-left-color:#3b82f6}
.finding-LOW{border-left-color:var(--accent3)}
.finding-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.finding-id{font-size:10px;font-weight:800;color:var(--text-dim);font-family:monospace}
.sev-badge{font-size:10px;font-weight:800;padding:2px 8px;border-radius:4px;letter-spacing:.5px}
.sev-CRITICAL{background:rgba(239,68,68,.2);color:var(--danger)}
.sev-HIGH{background:rgba(245,158,11,.2);color:var(--warn)}
.sev-MEDIUM{background:rgba(59,130,246,.2);color:#3b82f6}
.sev-LOW{background:rgba(16,185,129,.2);color:var(--accent3)}
.finding-title{font-weight:700;font-size:14px}
.finding-desc{font-size:13px;color:var(--text-muted);margin-bottom:8px}
.finding-rec{font-size:12px;color:var(--accent3);background:rgba(16,185,129,.06);border-radius:6px;padding:8px 12px}
.finding-rec::before{content:'✓ ';font-weight:800}
.cvss-badge{font-size:10px;color:var(--text-dim);font-family:monospace;margin-top:4px}
/* ── Locked Findings ────────────────────────────── */
.locked-section{background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.3);border-radius:var(--radius);padding:20px;margin-top:16px}
.locked-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.lock-icon{font-size:24px}
.locked-header h4{font-size:16px;font-weight:800;color:var(--accent2)}
.locked-header p{font-size:12px;color:var(--text-muted);margin-top:2px}
.locked-finding{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:12px;margin-bottom:8px;position:relative;overflow:hidden}
.locked-finding::after{content:'🔒';position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:16px;opacity:.6}
.locked-finding-sev{font-size:10px;font-weight:800;padding:2px 8px;border-radius:4px;letter-spacing:.5px;display:inline-block;margin-bottom:6px}
.locked-finding-title{font-size:13px;font-weight:700;color:var(--text-muted)}
.locked-finding-preview{font-size:12px;color:var(--text-dim);filter:blur(3px);user-select:none}
.unlock-cta{background:linear-gradient(135deg,rgba(124,58,237,.2),rgba(245,158,11,.1));border:1px solid rgba(245,158,11,.4);border-radius:var(--radius);padding:20px;margin-top:16px;text-align:center}
.unlock-price{font-size:28px;font-weight:900;color:var(--warn);margin-bottom:4px}
.unlock-price span{font-size:14px;color:var(--text-muted)}
.unlock-features{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0}
.unlock-feat{background:rgba(255,255,255,.06);border-radius:6px;padding:3px 10px;font-size:11px;color:var(--text-muted)}
.unlock-feat::before{content:'✓ ';color:var(--accent3);font-weight:800}
/* ── Lead Modal ─────────────────────────────────── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);z-index:9999;align-items:center;justify-content:center;padding:20px}
.modal-overlay.show{display:flex}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:36px;max-width:460px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.8)}
.modal-box h3{font-size:22px;font-weight:900;margin-bottom:8px;text-align:center}
.modal-box p{font-size:13px;color:var(--text-muted);text-align:center;margin-bottom:24px}
.modal-benefits{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.modal-benefit{display:flex;align-items:center;gap:8px;font-size:13px}
.modal-benefit::before{content:'✓';color:var(--accent3);font-weight:800;font-size:16px}
.modal-skip{background:none;border:none;color:var(--text-dim);font-size:12px;cursor:pointer;margin-top:12px;width:100%;text-align:center;padding:4px}
.modal-skip:hover{color:var(--text-muted)}
/* ── Alert ──────────────────────────────────────── */
.alert{border-radius:8px;padding:12px 16px;font-size:13px;margin-top:12px;display:none}
.alert.show{display:block}
.alert-error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#fca5a5}
.alert-success{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:#6ee7b7}
.alert-info{background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.2);color:var(--accent)}
/* ── Stats Row ──────────────────────────────────── */
.stats-row{background:var(--surface2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:32px 24px}
.stats-inner{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px}
.stat-item{text-align:center}
.stat-num{font-size:32px;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.stat-label{font-size:12px;color:var(--text-muted);font-weight:600;margin-top:4px;letter-spacing:.3px}
/* ── Section ─────────────────────────────────────── */
section{padding:60px 24px}
.section-inner{max-width:1100px;margin:0 auto}
.section-label{font-size:11px;font-weight:800;color:var(--accent2);letter-spacing:2px;text-transform:uppercase;margin-bottom:12px}
.section-title{font-size:clamp(22px,4vw,36px);font-weight:900;margin-bottom:12px}
.section-sub{font-size:15px;color:var(--text-muted);max-width:560px;margin-bottom:40px}
/* ── Cards Grid ─────────────────────────────────── */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:transform .2s,border-color .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);border-color:var(--accent2);box-shadow:0 8px 32px rgba(124,58,237,.15)}
.card-icon{font-size:28px;margin-bottom:12px}
.card-title{font-size:15px;font-weight:800;margin-bottom:6px}
.card-desc{font-size:13px;color:var(--text-muted);line-height:1.5}
.card-price{font-size:13px;font-weight:800;color:var(--accent3);margin-top:10px}
.card-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--accent);margin-top:12px}
.card-link:hover{gap:10px}
/* ── Pricing ─────────────────────────────────────── */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.price-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;position:relative;transition:transform .2s}
.price-card:hover{transform:translateY(-4px)}
.price-card.featured{border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2),var(--glow)}
.featured-label{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--accent2),#4f46e5);color:#fff;font-size:11px;font-weight:800;padding:4px 14px;border-radius:20px;letter-spacing:.5px}
.price-name{font-size:14px;font-weight:800;color:var(--text-muted);margin-bottom:8px;letter-spacing:.5px}
.price-amount{font-size:36px;font-weight:900;margin-bottom:4px}
.price-period{font-size:13px;color:var(--text-muted);margin-bottom:20px}
.price-features{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.price-features li{font-size:13px;display:flex;align-items:flex-start;gap:8px}
.price-features li::before{content:'✓';color:var(--accent3);font-weight:800;font-size:14px;flex-shrink:0;margin-top:1px}
/* ── Footer ──────────────────────────────────────── */
footer{background:var(--surface2);border-top:1px solid var(--border);padding:48px 24px 24px}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:40px;margin-bottom:40px}
@media(max-width:768px){.footer-top{grid-template-columns:1fr 1fr}.form-row{grid-template-columns:1fr}}
.footer-brand{font-size:18px;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:12px}
.footer-desc{font-size:13px;color:var(--text-dim);line-height:1.6;margin-bottom:16px}
.footer-social{display:flex;flex-wrap:wrap;gap:8px}
.social-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;font-size:15px;transition:all .2s;text-decoration:none}
.social-btn:hover{background:rgba(124,58,237,.3);border-color:var(--accent2);transform:translateY(-2px)}
.footer-col h5{font-size:12px;font-weight:800;color:var(--text-muted);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer-col ul li a{font-size:13px;color:var(--text-dim);transition:color .2s}
.footer-col ul li a:hover{color:var(--accent);text-decoration:none}
.footer-bottom{border-top:1px solid var(--border);padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-copy{font-size:12px;color:var(--text-dim)}
/* ── Animations ──────────────────────────────────── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
@keyframes scanPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,212,255,.4)}70%{box-shadow:0 0 0 8px rgba(0,212,255,0)}}
.loading-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1s ease infinite}
.loading-dots{display:flex;gap:4px;align-items:center}
.loading-dots .loading-dot:nth-child(2){animation-delay:.2s}
.loading-dots .loading-dot:nth-child(3){animation-delay:.4s}
.scan-state-msg{font-size:13px;color:var(--text-muted);margin-left:8px}
.fade-in{animation:fadeIn .4s ease}
.slide-in{animation:slideInRight .35s ease}
/* ── Skeleton Loaders ─────────────────────────────── */
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 75%);background-size:400px 100%;animation:shimmer 1.4s ease infinite;border-radius:6px}
.skeleton-card{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:12px}
.skeleton-title{height:20px;width:55%;margin-bottom:14px}
.skeleton-line{height:13px;margin-bottom:10px}
.skeleton-line.w-full{width:100%}
.skeleton-line.w-3q{width:75%}
.skeleton-line.w-half{width:50%}
.skeleton-badge{height:24px;width:80px;border-radius:20px;display:inline-block}
.skeleton-score{height:56px;width:56px;border-radius:50%;margin-right:16px}
.skeleton-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
/* ── SOC Status Bar ───────────────────────────────── */
.soc-statusbar{background:rgba(0,0,0,.4);border-bottom:1px solid var(--border);padding:6px 20px;display:flex;align-items:center;gap:16px;font-size:11px;font-weight:600;letter-spacing:.5px;overflow-x:auto;white-space:nowrap}
.soc-indicator{display:flex;align-items:center;gap:5px;color:var(--text-dim)}
.soc-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.soc-dot.green{background:#10b981;box-shadow:0 0 4px #10b981}
.soc-dot.yellow{background:#f59e0b;box-shadow:0 0 4px #f59e0b}
.soc-dot.red{background:#ef4444;box-shadow:0 0 4px #ef4444;animation:pulse 1.5s infinite}
.soc-sep{color:var(--border);padding:0 4px}
/* ── Scan Progress Steps ──────────────────────────── */
.scan-steps{display:none;flex-direction:column;gap:6px;margin-top:12px;padding:12px 16px;background:rgba(0,212,255,.04);border:1px solid rgba(0,212,255,.1);border-radius:8px}
.scan-steps.active{display:flex}
.scan-step{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-dim);transition:color .3s}
.scan-step.done{color:var(--accent3)}
.scan-step.active-step{color:var(--accent);font-weight:600}
.scan-step-icon{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;background:rgba(255,255,255,.08)}
.scan-step.done .scan-step-icon{background:var(--accent3);color:#fff}
.scan-step.active-step .scan-step-icon{background:var(--accent);color:#fff;animation:scanPulse 1.5s infinite}
/* ── Error State Card ─────────────────────────────── */
.error-state-card{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);border-radius:10px;padding:16px 20px;display:flex;align-items:flex-start;gap:12px}
.error-state-icon{font-size:20px;flex-shrink:0;margin-top:2px}
.error-state-body{flex:1}
.error-state-title{font-weight:700;color:#f87171;font-size:14px;margin-bottom:4px}
.error-state-msg{font-size:13px;color:var(--text-dim);line-height:1.5}
.btn-retry{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:7px 14px;background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);border-radius:6px;font-size:12px;font-weight:700;color:#f87171;cursor:pointer;transition:all .2s}
.btn-retry:hover{background:rgba(239,68,68,.25);border-color:#ef4444}
/* ═══════════════════════════════════════════════════════
V9.0 — CYBER COMMAND CENTER STYLES
═══════════════════════════════════════════════════════ */
/* ── Alert Mode — risk-based body states ──────────────── */
body.alert-mode-critical{--accent:#ef4444;--border:rgba(239,68,68,.25)}
body.alert-mode-critical .soc-statusbar{animation:criticalPulse 2s ease-in-out infinite}
@keyframes criticalPulse{0%,100%{background:rgba(239,68,68,.08)}50%{background:rgba(239,68,68,.18)}}
body.alert-mode-high .soc-statusbar{border-bottom-color:rgba(245,158,11,.6)}
/* ── Intelligence Insight Panel ──────────────────────── */
.v9-intel-panel{background:linear-gradient(135deg,rgba(0,0,0,.6),rgba(124,58,237,.08));border:1px solid rgba(124,58,237,.3);border-radius:14px;padding:20px;margin-bottom:16px;position:relative;overflow:hidden}
.v9-intel-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#ef4444,#7c3aed,#00d4ff);opacity:.8}
.v9-intel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.v9-intel-icon{font-size:24px;flex-shrink:0}
.v9-intel-title{font-size:11px;font-weight:900;letter-spacing:2px;color:var(--accent);text-transform:uppercase}
.v9-intel-sub{font-size:10px;color:var(--text-dim);margin-top:2px}
.v9-intel-score{font-size:32px;font-weight:900;margin-left:auto;font-variant-numeric:tabular-nums}
.v9-intel-threat-card{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.15);border-radius:8px;padding:12px 14px;margin-bottom:14px}
.v9-intel-threat-label{font-size:9px;font-weight:800;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase}
.v9-intel-threat-actors{font-size:14px;font-weight:800;color:#f87171;margin-bottom:4px}
.v9-intel-threat-technique{font-size:12px;color:var(--text-dim);margin-bottom:6px}
.v9-intel-threat-urgency{font-size:12px;font-weight:600;line-height:1.4}
.v9-intel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.v9-intel-stat{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;padding:10px;text-align:center}
.v9-intel-stat-val{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums}
.v9-intel-stat-lbl{font-size:10px;color:var(--text-muted);margin-top:2px;font-weight:600}
.v9-intel-narrative{font-size:13px;color:var(--text-dim);line-height:1.6;padding:12px 14px;background:rgba(255,255,255,.03);border-radius:8px;margin-bottom:12px}
.v9-intel-cisa{font-size:11px;color:var(--text-dim);padding:8px 12px;background:rgba(0,212,255,.05);border:1px solid rgba(0,212,255,.1);border-radius:6px;margin-bottom:12px}
.v9-intel-upgrade-cta{background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(0,212,255,.08));border:1px solid rgba(124,58,237,.3);border-radius:10px;padding:14px;display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;gap:10px}
.v9-intel-cta-text{display:flex;align-items:flex-start;gap:10px;flex:1}
.v9-cta-btn{background:linear-gradient(135deg,#7c3aed,#00d4ff);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap;transition:all .2s}
.v9-cta-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(124,58,237,.4)}
.v9-intel-loading{display:flex;align-items:center;padding:16px}
/* ── Upgrade Trigger ─────────────────────────────────── */
.v9-upgrade-trigger{background:linear-gradient(135deg,rgba(0,0,0,.7),rgba(239,68,68,.08));border:1px solid rgba(239,68,68,.25);border-radius:14px;padding:20px 24px;margin-top:12px;position:relative;overflow:hidden}
.v9-upgrade-trigger::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#ef4444,#f97316,#f59e0b)}
.v9-trigger-urgency{font-size:11px;font-weight:900;letter-spacing:2px;margin-bottom:14px;text-transform:uppercase}
.v9-trigger-body{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.v9-trigger-main{flex:1;min-width:200px}
.v9-trigger-title{font-size:15px;font-weight:700;margin-bottom:6px;line-height:1.4}
.v9-trigger-sub{font-size:13px;color:var(--text-dim);margin-bottom:12px;line-height:1.5}
.v9-trigger-includes{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-dim)}
.v9-tick{color:var(--accent3);font-weight:800;margin-right:6px}
.v9-trigger-action{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
.v9-trigger-price{font-size:28px;font-weight:900;background:linear-gradient(135deg,#f97316,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.v9-trigger-price-sub{font-size:10px;color:var(--text-muted);margin-top:-6px}
.v9-pay-btn{background:linear-gradient(135deg,#ef4444,#f97316);color:#fff;border:none;padding:12px 24px;border-radius:10px;font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap;transition:all .2s;box-shadow:0 4px 16px rgba(239,68,68,.3)}
.v9-pay-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(239,68,68,.5)}
.v9-trigger-trust{font-size:10px;color:var(--text-dim)}
/* ── Feature Lock Overlay ────────────────────────────── */
.v9-feature-lock{position:absolute;inset:0;background:rgba(10,10,26,.85);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:inherit;z-index:10}
.v9-lock-icon{font-size:32px}
.v9-lock-name{font-size:14px;font-weight:800;color:var(--text)}
.v9-lock-msg{font-size:12px;color:var(--text-dim);text-align:center;max-width:200px}
.v9-lock-btn{background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;border:none;padding:8px 18px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;margin-top:4px}
/* ── Intelligence Dashboard Widget ──────────────────── */
.v9-intel-summary-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.v9-threat-level-badge{padding:4px 12px;border-radius:20px;font-size:11px;font-weight:800;letter-spacing:1px;border:1px solid}
.v9-intel-stats{display:flex;gap:12px;font-size:12px;font-weight:600;color:var(--text-dim)}
.v9-feed-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.v9-feed-item{display:flex;align-items:center;gap:8px;padding:7px 10px;background:rgba(255,255,255,.03);border-radius:6px;font-size:12px}
.v9-feed-sev{padding:2px 8px;border-radius:12px;font-size:10px;font-weight:800;letter-spacing:.5px;flex-shrink:0;border:1px solid}
.v9-feed-title{flex:1;color:var(--text-dim);line-height:1.4}
.v9-feed-time{font-size:10px;color:var(--text-dim);flex-shrink:0}
.v9-intel-apt{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.v9-intel-apt-label{font-size:11px;color:var(--text-muted);font-weight:700}
.v9-apt-badge{padding:3px 10px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);border-radius:12px;font-size:11px;color:#f87171;font-weight:600}
/* ── Usage Widget ────────────────────────────────────── */
.v9-usage-widget{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.v9-usage-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.v9-usage-tier{padding:2px 10px;border-radius:12px;font-size:10px;font-weight:800;letter-spacing:1px}
.v9-usage-tier.tier-free{background:rgba(100,116,139,.2);color:#94a3b8}
.v9-usage-tier.tier-pro{background:rgba(124,58,237,.2);color:#a78bfa}
.v9-usage-tier.tier-enterprise{background:rgba(16,185,129,.2);color:#34d399}
.v9-usage-label{font-size:12px;color:var(--text-dim);font-weight:600}
.v9-usage-bar-wrap{background:rgba(255,255,255,.08);border-radius:4px;height:6px;overflow:hidden;margin-bottom:6px}
.v9-usage-bar{height:100%;border-radius:4px;transition:width .8s ease}
.v9-usage-warn{font-size:11px;font-weight:600}
.v9-usage-warn a{color:var(--accent)}
/* ── Intel Dashboard Panel Placeholder ───────────────── */
#intel-summary-widget{min-height:80px}
/* ══════════════════════════════════════════════════════
ENTERPRISE UPGRADE v4.0 — Glassmorphism + Neon System
══════════════════════════════════════════════════════ */
/* ── Glassmorphism Cards ─────────────────────────────── */
.glass-card{background:rgba(15,15,46,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(0,212,255,.12);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);transition:transform .3s,border-color .3s,box-shadow .3s}
.glass-card:hover{transform:translateY(-6px);border-color:rgba(0,212,255,.3);box-shadow:0 16px 48px rgba(0,212,255,.1),0 0 0 1px rgba(0,212,255,.15)}
/* ── Neon Utilities ──────────────────────────────────── */
.neon-text-cyan{background:linear-gradient(135deg,#00d4ff,#00f5ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.neon-text-purple{background:linear-gradient(135deg,#7c3aed,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.glow-cyan{box-shadow:0 0 20px rgba(0,212,255,.4),0 0 40px rgba(0,212,255,.15)}
/* ── Telegram LIVE Widget ────────────────────────────── */
.tg-live-strip{background:linear-gradient(135deg,rgba(10,10,26,.98),rgba(15,15,46,.95));border-bottom:1px solid rgba(0,212,255,.2);padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tg-live-left{display:flex;align-items:center;gap:12px}
.live-pulse-ring{position:relative;width:32px;height:32px;flex-shrink:0}
.live-pulse-ring::before,.live-pulse-ring::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #00d4ff;animation:liveRing 2s ease-out infinite}
.live-pulse-ring::after{animation-delay:1s}
.live-dot-inner{position:absolute;inset:7px;border-radius:50%;background:#00d4ff;animation:liveDot 2s ease-in-out infinite}
@keyframes liveRing{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.2);opacity:0}}
@keyframes liveDot{0%,100%{box-shadow:0 0 4px #00d4ff}50%{box-shadow:0 0 16px #00d4ff,0 0 32px rgba(0,212,255,.5)}}
.tg-live-text{display:flex;flex-direction:column;gap:1px}
.tg-live-label{font-size:10px;font-weight:800;color:#00d4ff;letter-spacing:1.5px;text-transform:uppercase}
.tg-live-title{font-size:14px;font-weight:800;color:#fff}
.tg-live-subtitle{font-size:11px;color:var(--text-muted)}
.tg-join-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#0088cc,#006bb3);color:#fff;border:none;border-radius:8px;padding:8px 18px;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s;white-space:nowrap;box-shadow:0 4px 16px rgba(0,136,204,.3)}
.tg-join-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,136,204,.5);text-decoration:none;color:#fff}
/* ── Security Dashboard ──────────────────────────────── */
.dashboard-section{padding:60px 24px;background:linear-gradient(180deg,var(--surface2) 0%,var(--bg) 100%);border-top:1px solid var(--border)}
.dashboard-inner{max-width:1200px;margin:0 auto}
.dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
@media(max-width:900px){.dashboard-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.dashboard-grid{grid-template-columns:1fr}}
.metric-card{background:rgba(15,15,46,.8);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:20px;position:relative;overflow:hidden;transition:transform .2s,border-color .3s}
.metric-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--mc-color,#00d4ff)}
.metric-card:hover{transform:translateY(-4px);border-color:rgba(0,212,255,.2)}
.metric-icon{font-size:22px;margin-bottom:8px}
.metric-value{font-size:28px;font-weight:900;color:#fff;line-height:1;margin-bottom:4px}
.metric-label{font-size:11px;font-weight:700;color:var(--text-muted);letter-spacing:.5px;text-transform:uppercase}
.metric-trend{font-size:11px;font-weight:700;margin-top:8px}
.trend-up{color:#10b981}.trend-neu{color:var(--text-dim)}
.dashboard-lower{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:900px){.dashboard-lower{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.dashboard-lower{grid-template-columns:1fr}}
.dash-panel{background:rgba(15,15,46,.7);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:20px;transition:border-color .2s}
.dash-panel:hover{border-color:rgba(124,58,237,.25)}
.dash-panel-title{font-size:11px;font-weight:800;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:6px}
.posture-ring-wrap{display:flex;justify-content:center;margin-bottom:12px}
.posture-ring{position:relative;width:110px;height:110px}
.posture-ring svg{width:110px;height:110px;transform:rotate(-90deg)}
.posture-ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.ring-bg{stroke:rgba(255,255,255,.08)}
.ring-fill{stroke:url(#ringGrad);stroke-dasharray:283;stroke-dashoffset:85;transition:stroke-dashoffset 1.5s ease}
.posture-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.posture-score-val{font-size:24px;font-weight:900;color:#fff}
.posture-score-lbl{font-size:9px;font-weight:700;color:var(--text-muted);letter-spacing:.5px;text-transform:uppercase}
.prog-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.prog-label{font-size:11px;color:var(--text-muted);min-width:80px}
.prog-bar-wrap{flex:1;height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.prog-bar-fill{height:100%;border-radius:3px;transition:width 1.2s ease}
.prog-val{font-size:11px;font-weight:700;color:var(--text-muted);min-width:28px;text-align:right}
.scan-log-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.scan-log-item:last-child{border-bottom:none}
.scan-log-target{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scan-log-meta{font-size:11px;color:var(--text-dim)}
.scan-log-badge{font-size:10px;font-weight:800;padding:2px 8px;border-radius:4px;flex-shrink:0}
.insight-item{display:flex;align-items:flex-start;gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.insight-item:last-child{border-bottom:none}
.insight-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:4px}
.insight-text{font-size:12px;color:var(--text-muted);line-height:1.4}
/* ── Why Section ─────────────────────────────────────── */
.why-section{padding:72px 24px;background:var(--bg)}
.why-inner{max-width:1100px;margin:0 auto}
.why-pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
@media(max-width:700px){.why-pillars{grid-template-columns:1fr}}
.why-card{background:rgba(15,15,46,.8);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:28px;position:relative;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.why-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--wc-grad,linear-gradient(90deg,#00d4ff,#7c3aed))}
.why-card:hover{transform:translateY(-5px);border-color:rgba(0,212,255,.25);box-shadow:0 12px 40px rgba(0,212,255,.08)}
.why-card-icon{font-size:32px;margin-bottom:14px}
.why-card-title{font-size:17px;font-weight:800;color:#fff;margin-bottom:8px}
.why-card-desc{font-size:13px;color:var(--text-muted);line-height:1.65}
.why-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.why-tag{background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.2);border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;color:var(--accent);letter-spacing:.3px}
/* ── Trust Signals ───────────────────────────────────── */
.trust-section{padding:48px 24px;background:var(--surface2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trust-inner{max-width:1000px;margin:0 auto;text-align:center}
.trust-certs{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:28px}
.trust-cert{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 20px;display:flex;align-items:center;gap:10px;transition:border-color .2s,transform .2s}
.trust-cert:hover{border-color:rgba(0,212,255,.3);transform:translateY(-2px)}
.trust-cert-icon{font-size:22px}
.trust-cert-name{font-size:13px;font-weight:800;color:#fff}
.trust-cert-sub{font-size:11px;color:var(--text-muted)}
/* ── Social Proof ────────────────────────────────────── */
.proof-section{padding:60px 24px;background:var(--bg)}
.proof-inner{max-width:1000px;margin:0 auto;text-align:center}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
@media(max-width:700px){.proof-grid{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.proof-grid{grid-template-columns:1fr}}
.proof-card{background:rgba(15,15,46,.7);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:20px 16px;text-align:center;transition:border-color .2s,transform .2s}
.proof-card:hover{border-color:rgba(124,58,237,.3);transform:translateY(-3px)}
.proof-card-icon{font-size:28px;margin-bottom:10px}
.proof-card-title{font-size:14px;font-weight:800;color:#fff;margin-bottom:4px}
.proof-card-sub{font-size:12px;color:var(--text-muted)}
/* ── Ecosystem ───────────────────────────────────────── */
.eco-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:14px;display:flex;align-items:center;gap:12px;transition:border-color .2s,transform .2s,background .2s}
.eco-card:hover{background:rgba(0,212,255,.05);border-color:rgba(0,212,255,.25);transform:translateY(-2px);text-decoration:none}
.eco-card-name{font-size:13px;font-weight:700;color:var(--text)}
/* ── Telegram community footer ───────────────────────── */
.tg-community-card{background:linear-gradient(135deg,rgba(0,136,204,.12),rgba(0,212,255,.06));border:1px solid rgba(0,136,204,.3);border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;text-decoration:none;transition:transform .2s,border-color .2s;margin-top:10px}
.tg-community-card:hover{transform:translateY(-2px);border-color:rgba(0,136,204,.5);text-decoration:none}
.tg-ctitle{font-size:13px;font-weight:800;color:#00d4ff}
.tg-csub{font-size:11px;color:var(--text-muted)}
/* ── Mobile ──────────────────────────────────────────── */
@media(max-width:640px){
.tg-live-strip{flex-direction:column;align-items:flex-start}
.why-pillars{grid-template-columns:1fr}
.dashboard-grid{grid-template-columns:1fr 1fr}
.dashboard-lower{grid-template-columns:1fr}
}
/* ══════════════════════════════════════════════════════
V6.0 ENHANCEMENTS — Real-Time Engine · Hero Scan · Sentinel
══════════════════════════════════════════════════════ */
/* ── Hero Quick Scan Input ────────────────────────────── */
.hero-scan-wrap{max-width:560px;margin:0 auto 24px;padding:0 12px}
.hero-scan-row{display:flex;gap:8px;background:rgba(255,255,255,.05);border:1px solid rgba(0,212,255,.3);border-radius:12px;padding:6px;box-shadow:0 0 24px rgba(0,212,255,.1)}
.hero-scan-input{flex:1;background:transparent;border:none;color:var(--text);padding:10px 14px;font-size:15px;outline:none}
.hero-scan-input::placeholder{color:var(--text-dim)}
.hero-scan-btn{white-space:nowrap;padding:10px 22px;font-size:14px;border-radius:8px}
.hero-scan-examples{font-size:12px;color:var(--text-dim);margin-top:8px;text-align:center}
.hero-scan-examples a{color:var(--accent);cursor:pointer}
.hero-scan-examples a:hover{text-decoration:underline}
.hero-urgency{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:10px;font-size:12px;color:var(--text-muted)}
.urgency-dot{width:7px;height:7px;border-radius:50%;background:var(--danger);flex-shrink:0;animation:urgencyPulse 1.5s ease infinite}
@keyframes urgencyPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}50%{box-shadow:0 0 0 5px rgba(239,68,68,0)}}
/* ── Sentinel APEX Feed Panel ─────────────────────────── */
.sentinel-panel{background:rgba(10,10,26,.9);backdrop-filter:blur(16px);border:1px solid rgba(239,68,68,.25);border-radius:16px;padding:20px;margin-top:20px}
.sentinel-panel .dash-panel-title{color:#ef4444}
.sentinel-feed{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;padding-right:4px}
.sentinel-feed::-webkit-scrollbar{width:4px}
.sentinel-feed::-webkit-scrollbar-thumb{background:rgba(239,68,68,.3);border-radius:2px}
.sentinel-cve-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:rgba(239,68,68,.05);border:1px solid rgba(239,68,68,.12);border-radius:8px;font-size:12px;transition:border-color .2s}
.sentinel-cve-item:hover{border-color:rgba(239,68,68,.3)}
.sentinel-cve-sev{font-size:10px;font-weight:800;padding:2px 8px;border-radius:4px;flex-shrink:0;margin-top:1px;letter-spacing:.3px}
.sentinel-cve-sev-CRITICAL{background:rgba(239,68,68,.2);color:#ef4444}
.sentinel-cve-sev-HIGH{background:rgba(245,158,11,.2);color:#f59e0b}
.sentinel-cve-id{font-family:monospace;font-size:11px;color:var(--accent);flex-shrink:0;min-width:100px}
.sentinel-cve-title{color:var(--text);font-weight:600;line-height:1.4}
.sentinel-cve-date{font-size:10px;color:var(--text-dim);margin-top:2px}
.sentinel-loading{font-size:13px;color:var(--text-muted);padding:20px;text-align:center}
.sentinel-error{font-size:12px;color:var(--text-dim);padding:12px;text-align:center;background:rgba(255,255,255,.03);border-radius:8px}
.sentinel-footer{display:flex;align-items:center;justify-content:space-between;margin-top:14px;flex-wrap:wrap;gap:8px}
.sentinel-join-btn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#0088cc,#006bb3);color:#fff;border:none;border-radius:7px;padding:7px 16px;font-size:12px;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .2s}
.sentinel-join-btn:hover{transform:translateY(-1px);text-decoration:none;color:#fff}
.sentinel-last-update{font-size:10px;color:var(--text-dim)}
.sentinel-kev-badge{font-size:10px;background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:#ef4444;border-radius:4px;padding:1px 6px;margin-left:6px;font-weight:700}
/* ── Real-Time Metric Refresh ─────────────────────────── */
.metric-live-badge{display:inline-block;font-size:9px;font-weight:800;color:#10b981;letter-spacing:.5px;text-transform:uppercase;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);border-radius:4px;padding:1px 6px;margin-left:6px;vertical-align:middle}
/* ── Interactive Compliance Badges ────────────────────── */
.trust-cert{cursor:pointer;position:relative}
.trust-cert[data-framework]:hover::after{content:'Click to explore →';position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--accent);white-space:nowrap}
.badge-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);z-index:9998;align-items:center;justify-content:center;padding:20px}
.badge-modal-overlay.show{display:flex}
.badge-modal{background:var(--surface);border:1px solid rgba(0,212,255,.2);border-radius:16px;padding:32px;max-width:520px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.8);max-height:80vh;overflow-y:auto}
.badge-modal h3{font-size:20px;font-weight:900;margin-bottom:6px;color:#fff}
.badge-modal-sub{font-size:13px;color:var(--text-muted);margin-bottom:20px}
.badge-control-row{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:12px 16px;margin-bottom:8px}
.badge-control-id{font-size:11px;font-family:monospace;color:var(--accent);font-weight:700;margin-bottom:2px}
.badge-control-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px}
.badge-control-desc{font-size:12px;color:var(--text-muted);line-height:1.5}
.badge-modal-close{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--text-muted);font-size:13px;font-weight:700;cursor:pointer;padding:8px 20px;margin-top:16px;width:100%;transition:background .2s}
.badge-modal-close:hover{background:rgba(255,255,255,.1)}
/* ── Urgency / Conversion Blocks ──────────────────────── */
.conversion-urgency{display:flex;align-items:center;gap:10px;background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.2);border-radius:8px;padding:10px 16px;margin-top:20px;font-size:12px}
.conv-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;flex-shrink:0;animation:urgencyPulse 1.5s ease infinite}
.conv-text{color:var(--text-muted)}
.conv-text strong{color:#ef4444}
@media(max-width:640px){
.hero-scan-row{flex-direction:column}
.hero-scan-btn{width:100%;justify-content:center}
.sentinel-footer{flex-direction:column;align-items:flex-start}
}
/* ════════════════════════════════════════════════════
CYBERDUDEBIVASH AI Security Hub — World-Class UX v10.0
CrowdStrike-level design: SOC Command Center + Attack Simulator
+ Live Threat Intelligence + Conversion Engine
════════════════════════════════════════════════════ */
/* ── Live Stat Counters ────────────────────────────── */
.stat-live-indicator{display:inline-block;width:6px;height:6px;border-radius:50%;background:#10b981;margin-left:6px;animation:statLivePulse 2s ease infinite;vertical-align:middle}
@keyframes statLivePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.6)}}
/* ── Hero Attack Counter ────────────────────────────── */
.hero-attack-counter{display:flex;justify-content:center;gap:0;margin:20px auto 28px;flex-wrap:wrap;max-width:760px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden}
.hac-item{text-align:center;padding:16px 24px;flex:1;min-width:120px;border-right:1px solid rgba(255,255,255,.07);position:relative}
.hac-item:last-child{border-right:none}
.hac-num{font-size:24px;font-weight:900;font-variant-numeric:tabular-nums;display:block;line-height:1;background:linear-gradient(135deg,#ef4444,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hac-num.positive{background:linear-gradient(135deg,#10b981,#00d4ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hac-num.warn{background:linear-gradient(135deg,#f59e0b,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hac-label{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.7px;margin-top:5px;display:block}
/* ── Social Proof Bar ──────────────────────────────── */
.hero-social-proof{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.hsp-avatars{display:flex;align-items:center}
.hsp-avatar{width:26px;height:26px;border-radius:50%;border:2px solid var(--bg);margin-right:-7px;font-size:9px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center}
.hsp-text{font-size:13px;color:var(--text-muted);padding-left:14px}
.hsp-text strong{color:#fff;font-weight:800}
.hsp-live-dot{width:7px;height:7px;border-radius:50%;background:#10b981;display:inline-block;margin-right:5px;vertical-align:middle;animation:statLivePulse 1.5s ease infinite}
.hsp-sep{color:rgba(255,255,255,.15);font-size:16px}
/* ── AI SOC Command Center ─────────────────────────── */
.soc-command-section{padding:64px 24px;background:linear-gradient(180deg,#07071a 0%,#050510 100%);position:relative;overflow:hidden;border-top:1px solid rgba(239,68,68,.12)}
.soc-command-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 100%,rgba(124,58,237,.08) 0%,transparent 70%);pointer-events:none}
.soc-command-inner{max-width:1200px;margin:0 auto}
.soc-command-header{text-align:center;margin-bottom:40px}
.soc-command-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.35);border-radius:20px;padding:6px 16px;font-size:10px;font-weight:900;color:#ef4444;margin-bottom:16px;letter-spacing:1.5px;text-transform:uppercase}
.soc-command-badge-dot{width:6px;height:6px;border-radius:50%;background:#ef4444;animation:statLivePulse 1s ease infinite;flex-shrink:0}
.soc-command-title{font-size:clamp(22px,4vw,36px);font-weight:900;margin-bottom:10px;background:linear-gradient(135deg,#fff 0%,var(--accent) 50%,var(--accent2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.soc-command-sub{font-size:14px;color:var(--text-muted);max-width:560px;margin:0 auto}
/* SOC Panel Layout */
.soc-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
@media(max-width:900px){.soc-grid{grid-template-columns:1fr}}
.soc-grid-3{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
@media(max-width:900px){.soc-grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.soc-grid-3{grid-template-columns:repeat(2,1fr)}}
/* SOC Alert Feed */
.soc-alert-panel{background:rgba(8,8,22,.95);backdrop-filter:blur(16px);border:1px solid rgba(239,68,68,.2);border-radius:16px;padding:20px;position:relative;overflow:hidden}
.soc-alert-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#ef4444,#f97316,#7c3aed)}
.soc-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.soc-panel-title{font-size:10px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.soc-panel-title.danger{color:#ef4444}
.soc-panel-title.intel{color:var(--accent2)}
.soc-alert-count-badge{background:rgba(239,68,68,.2);color:#ef4444;border:1px solid rgba(239,68,68,.3);border-radius:12px;padding:2px 10px;font-size:10px;font-weight:800}
.soc-alert-list{display:flex;flex-direction:column;gap:7px;max-height:300px;overflow-y:auto}
.soc-alert-list::-webkit-scrollbar{width:3px}
.soc-alert-list::-webkit-scrollbar-thumb{background:rgba(239,68,68,.3);border-radius:2px}
.soc-alert-item{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);font-size:11px;transition:border-color .2s;animation:alertSlideIn .3s ease}
.soc-alert-item.new-alert{animation:alertSlideIn .4s ease,alertHighlight 2s ease forwards}
@keyframes alertSlideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@keyframes alertHighlight{0%,20%{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.35)}100%{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.06)}}
.soc-alert-sev{flex-shrink:0;width:7px;height:7px;border-radius:50%;margin-top:3px}
.soc-alert-sev.critical{background:#ef4444;box-shadow:0 0 5px #ef4444;animation:statLivePulse 1s infinite}
.soc-alert-sev.high{background:#f59e0b;box-shadow:0 0 4px #f59e0b}
.soc-alert-sev.medium{background:#3b82f6}.soc-alert-sev.low{background:#10b981}
.soc-alert-body{flex:1;min-width:0}
.soc-alert-type{font-size:9px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;margin-bottom:2px}
.soc-alert-type.critical{color:#ef4444}.soc-alert-type.high{color:#f59e0b}
.soc-alert-type.medium{color:#60a5fa}.soc-alert-type.low{color:#10b981}
.soc-alert-msg{color:var(--text);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px}
.soc-alert-meta{font-size:9px;color:var(--text-dim);margin-top:2px;display:flex;gap:10px}
.soc-alert-time{font-family:monospace}
/* SOC AI Decision Panel */
.soc-decision-panel{background:rgba(8,8,22,.95);backdrop-filter:blur(16px);border:1px solid rgba(124,58,237,.2);border-radius:16px;padding:20px;position:relative;overflow:hidden}
.soc-decision-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#7c3aed,#00d4ff,#10b981)}
.soc-decision-item{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:8px;background:rgba(124,58,237,.05);border:1px solid rgba(124,58,237,.12);margin-bottom:8px;font-size:11px;transition:all .2s}
.soc-decision-item:hover{background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.3)}
.soc-decision-icon{font-size:16px;flex-shrink:0}
.soc-decision-body{flex:1}
.soc-decision-label{font-size:9px;font-weight:900;color:var(--accent2);letter-spacing:.8px;text-transform:uppercase;margin-bottom:3px}
.soc-decision-action{font-weight:700;color:var(--text);line-height:1.4}
.soc-decision-result{font-size:10px;color:#10b981;margin-top:3px}
/* SOC Stat Cards */
.soc-stat-card{background:rgba(15,15,46,.8);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:20px;text-align:center;position:relative;overflow:hidden;transition:transform .2s,border-color .3s}
.soc-stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--sc-color,#00d4ff)}
.soc-stat-card:hover{transform:translateY(-4px);border-color:rgba(0,212,255,.2)}
.soc-stat-num{font-size:28px;font-weight:900;font-variant-numeric:tabular-nums;margin-bottom:4px}
.soc-stat-label{font-size:11px;color:var(--text-muted);font-weight:600;letter-spacing:.3px}
.soc-stat-delta{font-size:10px;margin-top:5px;font-weight:700}
.soc-stat-delta.up{color:#10b981}.soc-stat-delta.down{color:#ef4444}.soc-stat-delta.neu{color:#64748b}
/* ── Attack Flow Simulator ──────────────────────────── */
.attack-sim-panel{background:rgba(5,5,16,.97);backdrop-filter:blur(20px);border:1px solid rgba(239,68,68,.18);border-radius:16px;padding:24px;position:relative;overflow:hidden}
.attack-sim-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#ef4444,#f97316,#f59e0b)}
.attack-sim-title{font-size:10px;font-weight:900;color:#ef4444;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sim-status-badge{font-size:10px;font-weight:800;padding:3px 10px;border-radius:12px;flex-shrink:0}
.sim-status-badge.blocked{background:rgba(16,185,129,.12);color:#10b981;border:1px solid rgba(16,185,129,.25)}
.sim-status-badge.live{background:rgba(239,68,68,.12);color:#ef4444;border:1px solid rgba(239,68,68,.25);animation:statLivePulse 2s ease infinite}
/* Attack Flow Nodes */
.attack-flow{display:flex;align-items:center;justify-content:space-around;gap:4px;margin-bottom:20px;padding:16px 0;overflow-x:auto}
.attack-node{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0;cursor:pointer;transition:transform .2s;min-width:64px}
.attack-node:hover{transform:translateY(-4px)}
.attack-node-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;border:2px solid;transition:all .3s}
.attack-node-icon.attacker{border-color:#ef4444;background:rgba(239,68,68,.1);box-shadow:0 0 12px rgba(239,68,68,.15);animation:attackerPulse 2s ease infinite}
@keyframes attackerPulse{0%,100%{box-shadow:0 0 8px rgba(239,68,68,.15)}50%{box-shadow:0 0 20px rgba(239,68,68,.4)}}
.attack-node-icon.victim{border-color:#f59e0b;background:rgba(245,158,11,.08)}
.attack-node-icon.data{border-color:#8b5cf6;background:rgba(139,92,246,.08)}
.attack-node-icon.shield{border-color:#10b981;background:rgba(16,185,129,.1);box-shadow:0 0 12px rgba(16,185,129,.2)}
.attack-node-icon.safe{border-color:#10b981;background:rgba(16,185,129,.08)}
.attack-node-label{font-size:9px;font-weight:700;color:var(--text-muted);text-align:center;line-height:1.3}
.attack-node-status{font-size:8px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;text-align:center}
.attack-node-status.danger{color:#ef4444}.attack-node-status.blocked{color:#10b981}.attack-node-status.warn{color:#f59e0b}
/* Attack Flow Arrows */
.attack-arrow{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;min-width:36px}
.arrow-line{width:100%;height:2px;position:relative;overflow:hidden;border-radius:1px;min-width:28px}
.arrow-line::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;animation:arrowFlow 1.5s linear infinite}
.arrow-line.danger{background:rgba(239,68,68,.18)}
.arrow-line.danger::after{background:linear-gradient(90deg,transparent,#ef4444,transparent)}
.arrow-line.blocked{background:rgba(16,185,129,.15)}
.arrow-line.blocked::after{background:linear-gradient(90deg,transparent,#10b981,transparent);animation:arrowFlow 3s linear infinite}
.arrow-line.warn{background:rgba(245,158,11,.15)}
.arrow-line.warn::after{background:linear-gradient(90deg,transparent,#f59e0b,transparent);animation:arrowFlow 2s linear infinite}
@keyframes arrowFlow{0%{left:-100%}100%{left:100%}}
.arrow-head{font-size:9px;color:var(--text-dim);margin-top:-2px}
.arrow-label{font-size:8px;color:var(--text-dim);text-align:center;line-height:1.2;max-width:40px}
/* Attack Technique List */
.attack-technique-list{display:flex;flex-direction:column;gap:7px}
.attack-technique-item{display:flex;align-items:center;gap:10px;padding:9px 12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:8px;font-size:11px;transition:border-color .2s}
.attack-technique-item:hover{border-color:rgba(239,68,68,.3)}
.atk-mitre{font-size:9px;font-family:monospace;color:var(--accent2);font-weight:800;min-width:68px;flex-shrink:0}
.atk-name{flex:1;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atk-status{font-size:9px;font-weight:800;padding:2px 8px;border-radius:10px;flex-shrink:0}
.atk-status.blocked{background:rgba(16,185,129,.12);color:#10b981;border:1px solid rgba(16,185,129,.2)}
.atk-status.detected{background:rgba(245,158,11,.12);color:#f59e0b;border:1px solid rgba(245,158,11,.2)}
.atk-status.simulated{background:rgba(124,58,237,.12);color:#a78bfa;border:1px solid rgba(124,58,237,.2)}
/* ── Defense Actions Row ─────────────────────────────── */
.defense-actions-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.defense-chip{display:flex;align-items:center;gap:5px;background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.18);border-radius:20px;padding:5px 12px;font-size:10px;font-weight:700;color:#10b981;cursor:pointer;transition:all .2s}
.defense-chip:hover{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.4)}
.defense-chip.active{background:rgba(16,185,129,.18);border-color:rgba(16,185,129,.5);box-shadow:0 0 8px rgba(16,185,129,.2)}
.defense-chip.cyan{background:rgba(0,212,255,.06);border-color:rgba(0,212,255,.2);color:var(--accent)}
.defense-chip.cyan:hover{background:rgba(0,212,255,.14)}
.defense-chip.cyan.active{background:rgba(0,212,255,.15);border-color:var(--accent)}
/* ── Global Trust Strip ─────────────────────────────── */
.trust-layer-section{padding:48px 24px;background:var(--surface2);border-top:1px solid var(--border)}
.trust-layer-inner{max-width:1100px;margin:0 auto}
.trust-layer-title{text-align:center;font-size:11px;font-weight:800;color:var(--text-dim);letter-spacing:2px;text-transform:uppercase;margin-bottom:28px}
.trust-compliance-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:36px}
.trust-cert-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:14px;text-align:center;cursor:pointer;transition:all .2s}
.trust-cert-card:hover{border-color:var(--accent);background:rgba(0,212,255,.05);transform:translateY(-2px)}
.trust-cert-icon{font-size:22px;margin-bottom:6px}
.trust-cert-name{font-size:12px;font-weight:800;color:var(--text);margin-bottom:2px}
.trust-cert-desc{font-size:10px;color:var(--text-dim)}
.trust-global-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:28px;padding-top:28px;border-top:1px solid var(--border)}
.tgs-item{background:rgba(15,15,46,.6);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:16px;text-align:center}
.tgs-num{font-size:24px;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums;display:block}
.tgs-label{font-size:11px;color:var(--text-muted);font-weight:600;margin-top:4px}
/* ── Conversion Urgency Banner ──────────────────────── */
#conv-urgency-banner{position:fixed;bottom:0;left:0;right:0;z-index:8000;background:linear-gradient(135deg,rgba(124,58,237,.97),rgba(79,70,229,.97));backdrop-filter:blur(16px);border-top:1px solid rgba(124,58,237,.6);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;transform:translateY(100%);transition:transform .45s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 -8px 32px rgba(124,58,237,.4)}
#conv-urgency-banner.show{transform:translateY(0)}
.cub-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.cub-icon{font-size:20px;flex-shrink:0}
.cub-text{font-size:13px;font-weight:600;color:#fff;min-width:0}
.cub-text strong{font-weight:900}
.cub-countdown{font-size:12px;color:rgba(255,255,255,.9);font-variant-numeric:tabular-nums;background:rgba(0,0,0,.3);border-radius:6px;padding:3px 10px;font-family:monospace;font-weight:700;flex-shrink:0;white-space:nowrap}
.cub-cta-btn{background:#fff;color:#7c3aed;padding:9px 22px;border-radius:8px;font-size:13px;font-weight:800;border:none;cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .15s;flex-shrink:0}
.cub-cta-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.3)}
.cub-dismiss{background:none;border:none;color:rgba(255,255,255,.5);font-size:20px;cursor:pointer;padding:4px 8px;line-height:1;transition:color .2s;flex-shrink:0}
.cub-dismiss:hover{color:#fff}
/* ── Live Activity Strip ────────────────────────────── */
.live-activity-strip{background:rgba(0,0,0,.3);border:1px solid rgba(16,185,129,.12);border-radius:8px;padding:7px 14px;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-muted);margin-top:10px;flex-wrap:wrap;gap:12px}
.las-dot{width:6px;height:6px;border-radius:50%;background:#10b981;flex-shrink:0;animation:statLivePulse 1.5s ease infinite}
.las-text strong{color:#10b981}
/* ── Enhanced Threat Ticker ─────────────────────────── */
.threat-ticker-critical{background:rgba(239,68,68,.06);border-top:1px solid rgba(239,68,68,.15);border-bottom:1px solid rgba(239,68,68,.15);overflow:hidden;padding:7px 0;display:flex;align-items:center;gap:0}
.ttc-label{background:rgba(239,68,68,.15);border-right:1px solid rgba(239,68,68,.25);padding:0 14px;font-size:9px;font-weight:900;color:#ef4444;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;height:100%;display:flex;align-items:center;flex-shrink:0}
.ttc-track{overflow:hidden;flex:1;position:relative}
.ttc-items{display:flex;gap:0;animation:tick 30s linear infinite;white-space:nowrap;width:max-content}
.ttc-item{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#f87171;padding:0 28px;border-right:1px solid rgba(239,68,68,.12)}
.ttc-item::before{content:'';width:4px;height:4px;border-radius:50%;background:#ef4444;display:inline-block;flex-shrink:0}
/* ── Upsell Trigger Bar ─────────────────────────────── */
.upsell-trigger-bar{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(239,68,68,.08),rgba(245,158,11,.06));border:1px solid rgba(245,158,11,.25);border-radius:10px;padding:12px 16px;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.utb-icon{font-size:18px;flex-shrink:0}
.utb-body{flex:1;min-width:0}
.utb-headline{font-size:13px;font-weight:700;color:#fff}
.utb-sub{font-size:11px;color:var(--text-muted);margin-top:2px}
.utb-cta{background:linear-gradient(135deg,#ef4444,#f97316);color:#fff;border:none;padding:8px 18px;border-radius:8px;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;transition:all .2s;flex-shrink:0}
.utb-cta:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(239,68,68,.4)}
/* ── Responsive (v10 additions) ──────────────────────── */
@media(max-width:768px){
.hero-attack-counter{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;border-radius:12px}
.hac-item{min-width:110px;padding:12px 14px}
.soc-grid{grid-template-columns:1fr}
.soc-grid-3{grid-template-columns:repeat(2,1fr)}
.attack-flow{gap:2px;padding:10px 0}
.attack-node-icon{width:40px;height:40px;font-size:17px}
.attack-node{min-width:48px}
.arrow-line{min-width:20px}
.trust-compliance-grid{grid-template-columns:repeat(2,1fr)}
#conv-urgency-banner{flex-direction:column;padding:12px 16px;gap:10px}
.cub-left{flex-wrap:wrap}
}
/* =============================================================
CYBERDUDEBIVASH AI SECURITY HUB — GOD MODE UI v12.0
ULTRA ENTERPRISE COMMAND CENTER — PRODUCTION UPGRADE
============================================================= */
/* Cyber grid background */
body {
background-image:
linear-gradient(rgba(0,212,255,0.013) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,212,255,0.013) 1px, transparent 1px) !important;
background-size: 44px 44px !important;
background-attachment: fixed !important;
}
/* Top scan-line sweep */
body::after {
content: '';
position: fixed;
top: 0; left: -60%;
width: 60%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,212,255,0.55), transparent);
animation: cdbScanH 14s linear infinite;
z-index: 9998;
pointer-events: none;
}
@keyframes cdbScanH {
0% { left: -60%; opacity: 0; }
5% { opacity: 1; }
95% { opacity: 0.6; }
100% { left: 100%; opacity: 0; }
}
/* Navbar */
nav, .main-nav {
backdrop-filter: blur(28px) saturate(180%) !important;
-webkit-backdrop-filter: blur(28px) saturate(180%) !important;
background: rgba(4,8,18,0.97) !important;
border-bottom: 1px solid rgba(0,212,255,0.09) !important;
box-shadow: 0 1px 0 rgba(0,212,255,0.06), 0 4px 24px rgba(0,0,0,0.4) !important;
}
/* SOC status bar */
.soc-status-bar {
background: linear-gradient(90deg, rgba(2,6,16,0.99), rgba(4,10,24,0.99)) !important;
border-bottom: 1px solid rgba(0,212,255,0.12) !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
}
.soc-dot.green { box-shadow: 0 0 6px #22c55e, 0 0 14px rgba(34,197,94,0.3) !important; }
.soc-dot.orange { box-shadow: 0 0 6px #f59e0b, 0 0 14px rgba(245,158,11,0.3) !important; }
.soc-dot.red { box-shadow: 0 0 6px #ef4444, 0 0 14px rgba(239,68,68,0.3) !important; }
/* Announcement bar */
.ann-bar {
background: linear-gradient(90deg, #04070e, #060c1e, #04070e) !important;
border-bottom: 1px solid rgba(0,212,255,0.08) !important;
}
/* Hero */
.hero { position: relative; overflow: hidden; }
.hero::before {
content: '';
position: absolute;
width: 700px; height: 700px;
background: radial-gradient(circle, rgba(0,212,255,0.055) 0%, rgba(124,58,237,0.03) 40%, transparent 70%);
top: -260px; left: 50%;
transform: translateX(-50%);
pointer-events: none;
z-index: 0;
}
.hero-badge {
background: linear-gradient(135deg, rgba(0,212,255,0.08), rgba(124,58,237,0.06)) !important;
border: 1px solid rgba(0,212,255,0.18) !important;
box-shadow: 0 0 24px rgba(0,212,255,0.06), inset 0 1px 0 rgba(255,255,255,0.05) !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
}
.trust-badges .badge {
background: rgba(0,212,255,0.04) !important;
border: 1px solid rgba(0,212,255,0.12) !important;
color: rgba(165,210,255,0.85) !important;
transition: all 0.22s ease !important;
}
.trust-badges .badge:hover {
background: rgba(0,212,255,0.1) !important;
border-color: rgba(0,212,255,0.3) !important;
color: #00d4ff !important;
transform: translateY(-1px);
}
/* Stats row */
.stats-row {
background: linear-gradient(90deg, rgba(4,8,20,0.9), rgba(6,12,28,0.9)) !important;
border-top: 1px solid rgba(0,212,255,0.06) !important;
border-bottom: 1px solid rgba(0,212,255,0.06) !important;
backdrop-filter: blur(20px) !important;
}
.stat-num {
background: linear-gradient(135deg, #00d4ff, #7c3aed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 8px rgba(0,212,255,0.18));
}
/* Metric cards */
.metric-card {
position: relative !important;
overflow: hidden !important;
background: linear-gradient(145deg, rgba(12,18,34,0.98), rgba(8,13,26,0.98)) !important;
border: 1px solid rgba(255,255,255,0.055) !important;
transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.035) !important;
}
.metric-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0,212,255,0.025) 0%, transparent 60%);
pointer-events: none;
}
.metric-card::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 100%; height: 2px;
background: linear-gradient(90deg, transparent, var(--mc-color, #00d4ff), transparent);
opacity: 0.55;
}
.metric-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,212,255,0.15), 0 0 24px rgba(0,212,255,0.07) !important;
border-color: rgba(0,212,255,0.18) !important;
}
.metric-value {
text-shadow: 0 0 24px rgba(0,212,255,0.18) !important;
font-feature-settings: 'tnum' !important;
}
.metric-live-badge {
font-weight: 800 !important;
letter-spacing: 0.06em !important;
}
/* Dashboard section */
.dashboard-section::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(rgba(0,212,255,0.007) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,212,255,0.007) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
z-index: 0;
}
/* Dashboard panels */
.dash-panel {
background: linear-gradient(145deg, rgba(12,18,34,0.97), rgba(8,13,26,0.97)) !important;
border: 1px solid rgba(255,255,255,0.05) !important;
box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.03) !important;
position: relative;
overflow: hidden;
transition: all 0.3s ease !important;
}
.dash-panel::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,212,255,0.35), transparent);
}
.dash-panel:hover {
border-color: rgba(0,212,255,0.1) !important;
box-shadow: 0 8px 36px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
/* Scan line */
.scan-line {
background: linear-gradient(180deg, rgba(0,212,255,0.04) 0%, transparent 30%) !important;
animation: scanDown 8s linear infinite !important;
}
@keyframes scanDown {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
/* Section label */
.section-label-v11 {
background: linear-gradient(90deg, rgba(0,212,255,0.08), rgba(124,58,237,0.06)) !important;
border: 1px solid rgba(0,212,255,0.14) !important;
border-radius: 20px !important;
}
/* Buttons */
.btn-primary, button.btn-primary, a.btn-primary {
position: relative !important;
overflow: hidden !important;
background: linear-gradient(135deg, #0055ee, #00aaff) !important;
box-shadow: 0 0 0 1px rgba(0,170,255,0.3), 0 4px 16px rgba(0,170,255,0.2) !important;
transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
font-weight: 700 !important;
}
.btn-primary::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent);
opacity: 0;
transition: opacity 0.25s;
}
.btn-primary:hover {
box-shadow: 0 0 0 1px rgba(0,212,255,0.5), 0 6px 24px rgba(0,212,255,0.35) !important;
transform: translateY(-2px) !important;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:active { transform: translateY(0) !important; }
/* Enterprise btn */
a[href="#enterprise"], .btn-enterprise {
background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
box-shadow: 0 0 0 1px rgba(124,58,237,0.35), 0 4px 16px rgba(124,58,237,0.25) !important;
animation: entGlow 4s ease infinite !important;
}
@keyframes entGlow {
0%,100% { box-shadow:0 0 0 1px rgba(124,58,237,0.35),0 4px 16px rgba(124,58,237,0.25); }
50% { box-shadow:0 0 0 1px rgba(124,58,237,0.55),0 6px 28px rgba(124,58,237,0.4); }
}
/* Inputs */
input[type="text"], input[type="email"], input[type="password"],
textarea, select, .hero-scan-input {
background: rgba(2,6,16,0.85) !important;
border: 1px solid rgba(0,212,255,0.12) !important;
color: #e2e8f0 !important;
transition: all 0.22s ease !important;
}
input:focus, textarea:focus, select:focus, .hero-scan-input:focus {
border-color: rgba(0,212,255,0.4) !important;
box-shadow: 0 0 0 3px rgba(0,212,255,0.06), 0 0 20px rgba(0,212,255,0.08) !important;
outline: none !important;
}
/* Hero scan wrap */
.hero-scan-row {
background: rgba(4,8,20,0.8) !important;
border: 1px solid rgba(0,212,255,0.15) !important;
border-radius: 12px !important;
backdrop-filter: blur(20px) !important;
transition: border-color 0.3s !important;
}
.hero-scan-row:focus-within {
border-color: rgba(0,212,255,0.35) !important;
box-shadow: 0 0 0 3px rgba(0,212,255,0.06) !important;
}
/* Price cards */
.price-card {
background: linear-gradient(145deg, rgba(12,18,34,0.97), rgba(8,13,26,0.97)) !important;
border: 1px solid rgba(255,255,255,0.055) !important;
transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
position: relative;
overflow: hidden;
}
.price-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, rgba(0,212,255,0.4), transparent);
opacity: 0;
transition: opacity 0.3s;
}
.price-card:hover {
transform: translateY(-5px) !important;
border-color: rgba(0,212,255,0.2) !important;
box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 32px rgba(0,212,255,0.06) !important;
}
.price-card:hover::before { opacity: 1; }
#plan-card-pro, #plan-card-enterprise {
border-color: rgba(0,212,255,0.18) !important;
box-shadow: 0 0 32px rgba(0,212,255,0.05) !important;
}
.price-amount {
background: linear-gradient(135deg, #00d4ff, #7c3aed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 8px rgba(0,212,255,0.15));
}
.price-name { font-weight: 900 !important; letter-spacing: 0.1em !important; }
#plan-card-free .price-amount {
background: none !important;
-webkit-text-fill-color: var(--text-muted) !important;
filter: none !important;
}
/* Severity badges */
.badge-critical, [class*="sev-critical"], [data-severity="CRITICAL"] {
background: rgba(239,68,68,0.1) !important;
border: 1px solid rgba(239,68,68,0.25) !important;
color: #fca5a5 !important;
animation: critPulse 2.5s ease infinite;
}
@keyframes critPulse {
0%,100% { box-shadow:0 0 8px rgba(239,68,68,0.1); }
50% { box-shadow:0 0 14px rgba(239,68,68,0.25); }
}
/* Ecosystem banner */
#eco-banner {
background: linear-gradient(90deg, rgba(2,6,14,0.98), rgba(4,9,20,0.98)) !important;
border-top: 1px solid rgba(0,212,255,0.08) !important;
border-bottom: 1px solid rgba(0,212,255,0.08) !important;
}
.eco-item { transition: all 0.2s ease !important; }
.eco-item:hover {
background: rgba(0,212,255,0.04) !important;
color: #00d4ff !important;
}
/* Upgrade sticky CTA */
#cdb-upgrade-sticky {
position: fixed !important;
bottom: 24px !important;
right: 24px !important;
z-index: 10000 !important;
background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
color: #fff !important;
border: none !important;
border-radius: 50px !important;
padding: 12px 22px !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 0.04em !important;
cursor: pointer !important;
box-shadow: 0 4px 24px rgba(124,58,237,0.45), 0 0 0 1px rgba(124,58,237,0.3) !important;
display: flex !important;
align-items: center !important;
gap: 7px !important;
transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
animation: upgPulse 4s ease infinite !important;
text-decoration: none !important;
}
@keyframes upgPulse {
0%,100% { box-shadow:0 4px 24px rgba(124,58,237,0.45),0 0 0 1px rgba(124,58,237,0.3); }
50% { box-shadow:0 6px 36px rgba(124,58,237,0.65),0 0 0 1px rgba(124,58,237,0.5),0 0 60px rgba(124,58,237,0.1); }
}
#cdb-upgrade-sticky:hover {
transform: translateY(-3px) scale(1.03) !important;
box-shadow: 0 10px 40px rgba(124,58,237,0.6), 0 0 0 1px rgba(124,58,237,0.5) !important;
}
/* Nav tier badge */
.nav-tier-badge {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
background: rgba(0,212,255,0.07) !important;
border: 1px solid rgba(0,212,255,0.18) !important;
color: #7dd3fc !important;
padding: 4px 12px !important;
border-radius: 6px !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0.1em !important;
cursor: pointer !important;
transition: all 0.22s ease !important;
text-decoration: none !important;
}
.nav-tier-badge:hover {
background: rgba(0,212,255,0.13) !important;
border-color: rgba(0,212,255,0.35) !important;
color: #00d4ff !important;
}
/* Dashboard title gradient */
.dashboard-section h2 {
background: linear-gradient(135deg, #e2e8f0 30%, #00d4ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 20px rgba(0,212,255,0.1));
}
/* Posture score */
#posture-score, .posture-score-val {
background: linear-gradient(135deg, #00d4ff 0%, #7c3aed 50%, #10b981 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
filter: drop-shadow(0 0 12px rgba(0,212,255,0.25)) !important;
}
/* Posture bars */
.posture-bar-fill, [class*="bar-fill"] {
background: linear-gradient(90deg, #00d4ff, #7c3aed) !important;
box-shadow: 0 0 8px rgba(0,212,255,0.3) !important;
}
/* Urgency banner */
.conv-banner-v11 {
background: linear-gradient(135deg, rgba(239,68,68,0.07), rgba(239,68,68,0.03)) !important;
border: 1px solid rgba(239,68,68,0.18) !important;
box-shadow: 0 4px 16px rgba(239,68,68,0.06) !important;
}
/* CTA button */
.cta-btn {
background: linear-gradient(135deg, #ef4444, #dc2626) !important;
box-shadow: 0 0 16px rgba(239,68,68,0.3) !important;
font-weight: 800 !important;
transition: all 0.22s ease !important;
}
.cta-btn:hover {
box-shadow: 0 0 28px rgba(239,68,68,0.5) !important;
transform: translateY(-1px) !important;
}
/* TG join btn */
.tg-join-btn {
background: linear-gradient(135deg, rgba(0,136,255,0.15), rgba(0,136,255,0.08)) !important;
border: 1px solid rgba(0,136,255,0.25) !important;
color: #60a5fa !important;
font-weight: 700 !important;
border-radius: 8px !important;
transition: all 0.22s ease !important;
}
.tg-join-btn:hover {
background: linear-gradient(135deg, rgba(0,136,255,0.25), rgba(0,136,255,0.15)) !important;
box-shadow: 0 0 20px rgba(0,136,255,0.2) !important;
transform: translateY(-2px) !important;
}
/* Back-to-top */
#back-to-top {
background: linear-gradient(135deg, rgba(0,212,255,0.1), rgba(124,58,237,0.1)) !important;
border: 1px solid rgba(0,212,255,0.2) !important;
color: #00d4ff !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
transition: all 0.25s ease !important;
}
#back-to-top:hover {
background: linear-gradient(135deg, rgba(0,212,255,0.2), rgba(124,58,237,0.15)) !important;
box-shadow: 0 0 20px rgba(0,212,255,0.2), 0 4px 16px rgba(0,0,0,0.5) !important;
transform: translateY(-2px) !important;
}
/* Scrollbar */
::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
::-webkit-scrollbar-track { background: rgba(2,5,12,0.6) !important; }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(0,212,255,0.25), rgba(124,58,237,0.25)) !important;
border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(0,212,255,0.5), rgba(124,58,237,0.5)) !important;
}
/* Selection */
::selection {
background: rgba(0,212,255,0.2) !important;
color: #e2e8f0 !important;
}
/* Defense solution cards */
.sol-card, [class*="solution-card"], .defense-card {
transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
position: relative !important;
}
.sol-card:hover, .defense-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 16px rgba(0,212,255,0.07) !important;
}
/* Feed slide animation */
@keyframes cdbFeedSlide {
from { opacity:0; transform:translateX(-8px); }
to { opacity:1; transform:translateX(0); }
}
@media (max-width: 768px) {
#cdb-upgrade-sticky {
bottom: 16px !important;
right: 16px !important;
padding: 10px 16px !important;
font-size: 12px !important;
}
}
/* ════════════════════════════════════════════════════════
CYBERDUDEBIVASH — PHASE 12: SOC COMMAND CENTER v12.0
════════════════════════════════════════════════════════ */
/* ── SOC Status Rail ───────────────────────────────────── */
.soc-rail-v12{display:flex;align-items:center;gap:0;background:rgba(0,0,0,.5);border:1px solid rgba(0,212,255,.15);border-radius:10px 10px 0 0;padding:7px 16px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;overflow-x:auto;white-space:nowrap;flex-wrap:nowrap}
.soc-rail-item{display:flex;align-items:center;gap:5px;color:var(--text-dim);flex-shrink:0}
.soc-rail-threat{color:#fca5a5!important}
.soc-rail-sep{width:1px;height:14px;background:rgba(255,255,255,.1);margin:0 10px;flex-shrink:0}
/* ── SOC Theater 3-Column Grid ─────────────────────────── */
.soc-theater-grid{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:0;border:1px solid rgba(0,212,255,.15);border-top:none;border-bottom:none}
@media(max-width:900px){.soc-theater-grid{grid-template-columns:1fr}}
.soc-col{background:rgba(5,5,20,.95);border-right:1px solid rgba(255,255,255,.06);padding:0;overflow:hidden}
.soc-col:last-child{border-right:none}
.soc-col-center{background:rgba(8,8,24,.98);border-left:1px solid rgba(0,212,255,.08);border-right:1px solid rgba(0,212,255,.08)}
/* ── SOC Panel Header ──────────────────────────────────── */
.soc-panel-hdr{display:flex;align-items:center;gap:6px;padding:8px 12px;background:rgba(0,0,0,.4);border-bottom:1px solid rgba(255,255,255,.06);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;flex-shrink:0;min-height:34px}
.soc-panel-icon{font-size:13px}
.soc-panel-title-v12{color:var(--text);flex:1}
.soc-badge-live{background:rgba(0,212,255,.12);color:var(--accent);border:1px solid rgba(0,212,255,.25);border-radius:4px;padding:1px 5px;font-size:8px;font-weight:800}
.soc-refresh-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--text-muted);border-radius:4px;padding:2px 7px;font-size:10px;cursor:pointer;transition:all .15s}
.soc-refresh-btn:hover{background:rgba(0,212,255,.12);color:var(--accent)}
/* ── Threat Feed ───────────────────────────────────────── */
.soc-threat-feed{flex:1;overflow-y:auto;max-height:320px;min-height:200px;padding:8px}
.soc-threat-item{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.06);margin-bottom:5px;cursor:pointer;transition:all .15s;background:rgba(255,255,255,.02)}
.soc-threat-item:hover,.soc-threat-item.active{background:rgba(0,212,255,.06);border-color:rgba(0,212,255,.25);transform:translateX(2px)}
.soc-threat-item.sev-CRITICAL{border-left:3px solid #ef4444}
.soc-threat-item.sev-HIGH{border-left:3px solid #f59e0b}
.soc-threat-item.sev-MEDIUM{border-left:3px solid #3b82f6}
.soc-threat-cve{font-size:11px;font-weight:800;color:#00d4ff;font-family:'Courier New',monospace}
.soc-threat-title{font-size:11px;color:var(--text-muted);line-height:1.3;margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.soc-threat-meta{display:flex;align-items:center;gap:5px;margin-top:4px;flex-wrap:wrap}
.soc-sev-chip{font-size:8px;font-weight:800;padding:1px 5px;border-radius:3px}
.soc-sev-chip.CRITICAL{background:rgba(239,68,68,.2);color:#fca5a5;border:1px solid rgba(239,68,68,.3)}
.soc-sev-chip.HIGH{background:rgba(245,158,11,.15);color:#fcd34d;border:1px solid rgba(245,158,11,.25)}
.soc-sev-chip.MEDIUM{background:rgba(59,130,246,.15);color:#93c5fd;border:1px solid rgba(59,130,246,.25)}
.soc-cvss-chip{font-size:8px;color:var(--text-dim);font-family:'Courier New',monospace}
.soc-kev-chip{font-size:7px;font-weight:800;background:rgba(239,68,68,.15);color:#fca5a5;border:1px solid rgba(239,68,68,.25);border-radius:3px;padding:1px 4px}
.soc-feed-footer{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-top:1px solid rgba(255,255,255,.06)}
.soc-skel{height:52px;border-radius:6px;background:rgba(255,255,255,.04);animation:shimmer 1.5s infinite;margin-bottom:5px}
/* ── Center: Attack Graph ───────────────────────────────── */
.soc-graph-wrap{padding:12px;background:rgba(0,0,0,.3)}
.soc-edge-anim{animation:socEdgeDash 2s linear infinite}
@keyframes socEdgeDash{to{stroke-dashoffset:-20}}
.soc-node-pulse{animation:socNodePulse 2s ease-in-out infinite}
@keyframes socNodePulse{0%,100%{opacity:.9;r:24}50%{opacity:1;r:26}}
.soc-scanline-anim{animation:socScanX 4s linear infinite}
@keyframes socScanX{0%{transform:translateX(0)}100%{transform:translateX(400px)}}
/* ── Risk Display ───────────────────────────────────────── */
.soc-risk-display{display:flex;align-items:center;gap:12px;padding:10px 12px;background:rgba(0,0,0,.2);border-top:1px solid rgba(255,255,255,.06)}
.soc-risk-ring-wrap{position:relative;flex-shrink:0}
.soc-risk-num-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.soc-risk-labels{flex:1;display:flex;flex-direction:column;gap:4px}
.soc-risk-row{display:flex;justify-content:space-between;font-size:10px;color:var(--text-dim)}
.soc-risk-row strong{font-weight:800}
/* ── SOC Action Bar ─────────────────────────────────────── */
.soc-action-bar{display:flex;gap:4px;padding:8px 12px;border-top:1px solid rgba(255,255,255,.06);flex-wrap:wrap}
.soc-act-btn{flex:1;min-width:60px;padding:6px 4px;border-radius:6px;font-size:10px;font-weight:800;cursor:pointer;border:1px solid;transition:all .15s;white-space:nowrap;text-align:center}
.soc-act-scan{background:rgba(0,212,255,.1);border-color:rgba(0,212,255,.3);color:#00d4ff}
.soc-act-scan:hover{background:rgba(0,212,255,.2);box-shadow:0 0 12px rgba(0,212,255,.2)}
.soc-act-analyze{background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.3);color:#a78bfa}
.soc-act-analyze:hover{background:rgba(124,58,237,.2);box-shadow:0 0 12px rgba(124,58,237,.2)}
.soc-act-report{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);color:#6ee7b7}
.soc-act-report:hover{background:rgba(16,185,129,.2)}
.soc-act-mitigate{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:#fca5a5}
.soc-act-mitigate:hover{background:rgba(239,68,68,.2);box-shadow:0 0 12px rgba(239,68,68,.15)}
/* ── AI Verdict Panel ───────────────────────────────────── */
.soc-selected-threat{padding:8px}
.soc-verdict-panel{padding:10px 12px;flex:1}
.soc-verdict-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.07)}
.soc-sev-badge{font-size:9px;font-weight:800;padding:2px 7px;border-radius:4px;background:rgba(239,68,68,.2);color:#fca5a5;border:1px solid rgba(239,68,68,.3)}
.soc-verdict-body{display:flex;flex-direction:column;gap:6px}
.soc-verdict-row{display:flex;align-items:center;gap:8px;font-size:11px}
.soc-verdict-label{color:var(--text-dim);min-width:72px;flex-shrink:0;font-size:10px}
.soc-verdict-val{font-weight:800}
.soc-conf-bar-wrap{flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.soc-conf-bar{height:100%;background:linear-gradient(90deg,#00d4ff,#7c3aed);border-radius:3px;transition:width .8s ease}
.soc-verdict-btn{padding:5px 10px;border-radius:6px;font-size:10px;font-weight:800;cursor:pointer;border:1px solid;transition:all .15s}
.soc-vbtn-fix{background:rgba(124,58,237,.15);border-color:rgba(124,58,237,.35);color:#a78bfa}
.soc-vbtn-fix:hover{background:rgba(124,58,237,.3);box-shadow:0 0 10px rgba(124,58,237,.25)}
.soc-vbtn-scan{background:rgba(0,212,255,.1);border-color:rgba(0,212,255,.3);color:#00d4ff}
.soc-vbtn-scan:hover{background:rgba(0,212,255,.2)}
.soc-vbtn-report{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);color:#6ee7b7}
/* ── Correlation Panel ──────────────────────────────────── */
.soc-correlation-panel{padding:8px 12px;border-top:1px solid rgba(255,255,255,.06)}
.soc-corr-item{font-size:10px;color:var(--text-dim);padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04);display:flex;justify-content:space-between}
.soc-corr-item:last-child{border-bottom:none}
/* ── Live Log ───────────────────────────────────────────── */
.soc-log-panel{border:1px solid rgba(0,212,255,.15);border-top:1px solid rgba(255,255,255,.06);border-radius:0 0 10px 10px;overflow:hidden}
.soc-log-feed{background:rgba(0,0,0,.6);padding:6px 10px;max-height:120px;overflow-y:auto;font-family:'Courier New',monospace}
.soc-log-line{display:flex;align-items:flex-start;gap:6px;font-size:10px;padding:2px 0;border-bottom:1px solid rgba(255,255,255,.03);line-height:1.4}
.soc-log-line:last-child{border-bottom:none}
.soc-log-ts{color:rgba(0,212,255,.5);flex-shrink:0;min-width:56px}
.soc-log-tag{font-size:8px;font-weight:800;padding:1px 4px;border-radius:2px;flex-shrink:0;margin-top:1px}
.soc-tag-info{background:rgba(0,212,255,.15);color:#00d4ff}
.soc-tag-ok{background:rgba(16,185,129,.15);color:#10b981}
.soc-tag-warn{background:rgba(245,158,11,.15);color:#f59e0b}
.soc-tag-crit{background:rgba(239,68,68,.2);color:#ef4444;animation:pulse .8s infinite}
.soc-tag-ai{background:rgba(124,58,237,.15);color:#a78bfa}
.soc-log-info{color:var(--text-muted)}
.soc-log-ok{color:#6ee7b7}
.soc-log-warn{color:#fcd34d}
.soc-log-crit{color:#fca5a5}
.soc-log-ai{color:#c4b5fd}
/* ── Feature Gate Enhanced ──────────────────────────────── */
.feature-locked-card{position:relative;overflow:hidden;border-radius:12px}
.feature-locked-card::before{content:'';position:absolute;inset:0;background:rgba(10,10,26,.5);backdrop-filter:blur(3px);z-index:5;pointer-events:none}
.feature-locked-badge{position:absolute;top:8px;right:8px;z-index:10;background:rgba(124,58,237,.9);color:#fff;font-size:9px;font-weight:800;padding:3px 8px;border-radius:4px;display:flex;align-items:center;gap:3px}
/* ── Marketplace Trust Badges ───────────────────────────── */
.sol-trust-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.sol-trust-badge{font-size:8px;font-weight:700;padding:2px 6px;border-radius:3px;border:1px solid}
.stb-verified{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);color:#6ee7b7}
.stb-cvss{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.25);color:#fca5a5}
.stb-demand{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.25);color:#fcd34d}
.stb-deploy{background:rgba(0,212,255,.1);border-color:rgba(0,212,255,.25);color:#00d4ff}
/* ── Upgrade Modal ──────────────────────────────────────── */
#cdb-upgrade-modal{display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.8);backdrop-filter:blur(6px);align-items:center;justify-content:center}
#cdb-upgrade-modal.open{display:flex}
.cdb-upgrade-box{background:var(--surface);border:1px solid rgba(124,58,237,.4);border-radius:20px;padding:32px;max-width:480px;width:92%;position:relative;box-shadow:0 0 60px rgba(124,58,237,.15)}
.cdb-upg-header{text-align:center;margin-bottom:20px}
.cdb-upg-icon{font-size:36px;margin-bottom:8px}
.cdb-upg-title{font-size:20px;font-weight:900;margin-bottom:6px}
.cdb-upg-sub{font-size:13px;color:var(--text-muted)}
.cdb-plan-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
@media(max-width:480px){.cdb-plan-cards{grid-template-columns:1fr}}
.cdb-plan-opt{border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px;cursor:pointer;transition:all .2s}
.cdb-plan-opt:hover,.cdb-plan-opt.selected{border-color:rgba(124,58,237,.5);background:rgba(124,58,237,.08)}
.cdb-plan-name{font-size:13px;font-weight:800;margin-bottom:3px}
.cdb-plan-price{font-size:20px;font-weight:900}
.cdb-plan-period{font-size:10px;color:var(--text-muted)}
.cdb-upg-cta{width:100%;background:linear-gradient(135deg,#7c3aed,#4f46e5);border:none;color:#fff;padding:13px;border-radius:10px;font-size:14px;font-weight:800;cursor:pointer;transition:all .2s}
.cdb-upg-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(124,58,237,.35)}
.cdb-upg-close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;line-height:1}
/* ── SOC Buy Flow Modal ─────────────────────────────────── */
#cdb-buy-modal{display:none;position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.85);backdrop-filter:blur(6px);align-items:center;justify-content:center}
#cdb-buy-modal.open{display:flex}
.cdb-buy-box{background:#0f0f23;border:1px solid rgba(0,212,255,.25);border-radius:20px;padding:28px;max-width:440px;width:92%;position:relative}
/* ── Predictive Insight Badges ──────────────────────────── */
.pred-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.25);color:#fcd34d;margin:2px}
.pred-badge.high-prob{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.25);color:#fca5a5}
/* ── Report Generation Panel ────────────────────────────── */
.cdb-report-toast{position:fixed;bottom:80px;right:20px;z-index:9999;background:#0f0f23;border:1px solid rgba(16,185,129,.4);border-radius:12px;padding:14px 18px;font-size:13px;color:#6ee7b7;box-shadow:0 4px 24px rgba(0,0,0,.5);display:flex;align-items:center;gap:10px;min-width:280px;transform:translateY(20px);opacity:0;transition:all .3s}
.cdb-report-toast.show{transform:translateY(0);opacity:1}
/* CYBERDUDEBIVASH PHASE 12 — SOC Command Center v12.0 */
.soc-rail-v12{display:flex;align-items:center;gap:0;background:rgba(0,0,0,.5);border:1px solid rgba(0,212,255,.15);border-radius:10px 10px 0 0;padding:7px 16px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;overflow-x:auto;white-space:nowrap;flex-wrap:nowrap}
.soc-rail-item{display:flex;align-items:center;gap:5px;color:var(--text-dim);flex-shrink:0}
.soc-rail-threat{color:#fca5a5!important}
.soc-rail-sep{width:1px;height:14px;background:rgba(255,255,255,.1);margin:0 10px;flex-shrink:0}
.soc-theater-grid{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:0;border:1px solid rgba(0,212,255,.15);border-top:none;border-bottom:none}
@media(max-width:900px){.soc-theater-grid{grid-template-columns:1fr}}
.soc-col{background:rgba(5,5,20,.95);border-right:1px solid rgba(255,255,255,.05);overflow:hidden;display:flex;flex-direction:column}
.soc-col:last-child{border-right:none}
.soc-col-center{background:rgba(8,8,24,.98);border-left:1px solid rgba(0,212,255,.07);border-right:1px solid rgba(0,212,255,.07)}
.soc-panel-hdr{display:flex;align-items:center;gap:6px;padding:8px 12px;background:rgba(0,0,0,.4);border-bottom:1px solid rgba(255,255,255,.06);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;flex-shrink:0;min-height:34px}
.soc-panel-icon{font-size:13px}
.soc-panel-title-v12{color:var(--text);flex:1}
.soc-badge-live{background:rgba(0,212,255,.12);color:var(--accent);border:1px solid rgba(0,212,255,.25);border-radius:4px;padding:1px 5px;font-size:8px;font-weight:800}
.soc-refresh-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--text-muted);border-radius:4px;padding:2px 7px;font-size:10px;cursor:pointer;transition:all .15s}
.soc-refresh-btn:hover{background:rgba(0,212,255,.12);color:var(--accent)}
.soc-threat-feed{flex:1;overflow-y:auto;max-height:300px;min-height:180px;padding:8px}
.soc-threat-item{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.05);margin-bottom:5px;cursor:pointer;transition:all .15s;background:rgba(255,255,255,.02)}
.soc-threat-item:hover,.soc-threat-item.active{background:rgba(0,212,255,.06);border-color:rgba(0,212,255,.25);transform:translateX(2px)}
.soc-threat-item.sev-CRITICAL{border-left:3px solid #ef4444}
.soc-threat-item.sev-HIGH{border-left:3px solid #f59e0b}
.soc-threat-item.sev-MEDIUM{border-left:3px solid #3b82f6}
.soc-threat-cve{font-size:11px;font-weight:800;color:#00d4ff;font-family:'Courier New',monospace}
.soc-threat-title{font-size:11px;color:var(--text-muted);line-height:1.3;margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.soc-threat-meta{display:flex;align-items:center;gap:5px;margin-top:4px;flex-wrap:wrap}
.soc-sev-chip{font-size:8px;font-weight:800;padding:1px 5px;border-radius:3px}
.soc-sev-chip.CRITICAL{background:rgba(239,68,68,.2);color:#fca5a5;border:1px solid rgba(239,68,68,.3)}
.soc-sev-chip.HIGH{background:rgba(245,158,11,.15);color:#fcd34d;border:1px solid rgba(245,158,11,.25)}
.soc-sev-chip.MEDIUM{background:rgba(59,130,246,.15);color:#93c5fd;border:1px solid rgba(59,130,246,.25)}
.soc-cvss-chip{font-size:8px;color:var(--text-dim);font-family:'Courier New',monospace}
.soc-kev-chip{font-size:7px;font-weight:800;background:rgba(239,68,68,.15);color:#fca5a5;border:1px solid rgba(239,68,68,.25);border-radius:3px;padding:1px 4px}
.soc-feed-footer{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-top:1px solid rgba(255,255,255,.06)}
.soc-skel{height:52px;border-radius:6px;background:rgba(255,255,255,.04);animation:shimmer 1.5s infinite;margin-bottom:5px}
.soc-graph-wrap{padding:10px;background:rgba(0,0,0,.3)}
.soc-edge-anim{animation:socEdgeDash 2.5s linear infinite}
@keyframes socEdgeDash{to{stroke-dashoffset:-20}}
.soc-node-pulse{animation:socNodePulse 2s ease-in-out infinite}
@keyframes socNodePulse{0%,100%{opacity:.85}50%{opacity:1}}
.soc-scanline-anim{animation:socScanX 5s linear infinite}
@keyframes socScanX{0%{transform:translateX(0)}100%{transform:translateX(400px)}}
.soc-risk-display{display:flex;align-items:center;gap:12px;padding:8px 12px;background:rgba(0,0,0,.2);border-top:1px solid rgba(255,255,255,.06)}
.soc-risk-ring-wrap{position:relative;flex-shrink:0}
.soc-risk-num-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.soc-risk-labels{flex:1;display:flex;flex-direction:column;gap:4px}
.soc-risk-row{display:flex;justify-content:space-between;font-size:10px;color:var(--text-dim)}
.soc-action-bar{display:flex;gap:4px;padding:8px 10px;border-top:1px solid rgba(255,255,255,.06);flex-wrap:wrap;margin-top:auto}
.soc-act-btn{flex:1;min-width:56px;padding:6px 3px;border-radius:6px;font-size:9px;font-weight:800;cursor:pointer;border:1px solid;transition:all .15s;text-align:center;white-space:nowrap}
.soc-act-scan{background:rgba(0,212,255,.1);border-color:rgba(0,212,255,.3);color:#00d4ff}
.soc-act-scan:hover{background:rgba(0,212,255,.2);box-shadow:0 0 10px rgba(0,212,255,.15)}
.soc-act-analyze{background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.3);color:#a78bfa}
.soc-act-analyze:hover{background:rgba(124,58,237,.2)}
.soc-act-report{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);color:#6ee7b7}
.soc-act-report:hover{background:rgba(16,185,129,.2)}
.soc-act-mitigate{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:#fca5a5}
.soc-act-mitigate:hover{background:rgba(239,68,68,.2)}
.soc-selected-threat{padding:8px;flex:1}
.soc-verdict-panel{padding:10px 12px;flex:1}
.soc-verdict-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.07)}
.soc-sev-badge{font-size:9px;font-weight:800;padding:2px 7px;border-radius:4px;background:rgba(239,68,68,.2);color:#fca5a5;border:1px solid rgba(239,68,68,.3)}
.soc-verdict-body{display:flex;flex-direction:column;gap:6px}
.soc-verdict-row{display:flex;align-items:center;gap:8px;font-size:11px}
.soc-verdict-label{color:var(--text-dim);min-width:70px;flex-shrink:0;font-size:10px}
.soc-verdict-val{font-weight:800}
.soc-conf-bar-wrap{flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.soc-conf-bar{height:100%;background:linear-gradient(90deg,#00d4ff,#7c3aed);border-radius:3px;transition:width .8s ease}
.soc-verdict-btn{padding:5px 10px;border-radius:6px;font-size:10px;font-weight:800;cursor:pointer;border:1px solid;transition:all .15s}
.soc-vbtn-fix{background:rgba(124,58,237,.15);border-color:rgba(124,58,237,.35);color:#a78bfa}
.soc-vbtn-fix:hover{background:rgba(124,58,237,.3)}
.soc-vbtn-scan{background:rgba(0,212,255,.1);border-color:rgba(0,212,255,.3);color:#00d4ff}
.soc-vbtn-report{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);color:#6ee7b7}
.soc-correlation-panel{padding:8px 12px;border-top:1px solid rgba(255,255,255,.06)}
.soc-corr-item{font-size:10px;color:var(--text-dim);padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04);display:flex;justify-content:space-between}
.soc-log-panel{border:1px solid rgba(0,212,255,.12);border-top:1px solid rgba(255,255,255,.05);border-radius:0 0 10px 10px;overflow:hidden}
.soc-log-feed{background:rgba(0,0,0,.65);padding:6px 10px;max-height:110px;overflow-y:auto;font-family:'Courier New',monospace}
.soc-log-line{display:flex;align-items:flex-start;gap:6px;font-size:10px;padding:2px 0;border-bottom:1px solid rgba(255,255,255,.03);line-height:1.4}
.soc-log-ts{color:rgba(0,212,255,.4);flex-shrink:0;min-width:54px;font-size:9px}
.soc-log-tag{font-size:8px;font-weight:800;padding:1px 4px;border-radius:2px;flex-shrink:0;margin-top:1px}
.soc-tag-info{background:rgba(0,212,255,.15);color:#00d4ff}
.soc-tag-ok{background:rgba(16,185,129,.15);color:#10b981}
.soc-tag-warn{background:rgba(245,158,11,.15);color:#f59e0b}
.soc-tag-crit{background:rgba(239,68,68,.2);color:#ef4444;animation:pulse .8s infinite}
.soc-tag-ai{background:rgba(124,58,237,.15);color:#a78bfa}
.soc-log-ok{color:rgba(110,231,183,.8)}
.soc-log-warn{color:rgba(252,211,77,.8)}
.soc-log-crit{color:rgba(252,165,165,.9)}
.soc-log-ai{color:rgba(196,181,253,.8)}
.soc-log-info{color:rgba(148,163,184,.7)}
/* Feature Gate */
.gate-wrapper{position:relative;overflow:hidden;border-radius:12px}
/* Upgrade Modal */
#cdb-upgrade-modal{display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.8);backdrop-filter:blur(6px);align-items:center;justify-content:center}
#cdb-upgrade-modal.open{display:flex}
.cdb-upgrade-box{background:var(--surface);border:1px solid rgba(124,58,237,.4);border-radius:20px;padding:28px;max-width:460px;width:92%;position:relative;box-shadow:0 0 60px rgba(124,58,237,.15)}
.cdb-upg-header{text-align:center;margin-bottom:18px}
.cdb-upg-icon{font-size:32px;margin-bottom:6px}
.cdb-upg-title{font-size:18px;font-weight:900;margin-bottom:4px}
.cdb-upg-sub{font-size:12px;color:var(--text-muted)}
.cdb-plan-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
@media(max-width:420px){.cdb-plan-cards{grid-template-columns:1fr}}
.cdb-plan-opt{border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px;cursor:pointer;transition:all .2s}
.cdb-plan-opt:hover,.cdb-plan-opt.selected{border-color:rgba(124,58,237,.5);background:rgba(124,58,237,.08)}
.cdb-plan-name{font-size:12px;font-weight:800;margin-bottom:2px}
.cdb-plan-price{font-size:18px;font-weight:900}
.cdb-plan-period{font-size:10px;color:var(--text-muted)}
.cdb-upg-cta{width:100%;background:linear-gradient(135deg,#7c3aed,#4f46e5);border:none;color:#fff;padding:12px;border-radius:10px;font-size:13px;font-weight:800;cursor:pointer;transition:all .2s}
.cdb-upg-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(124,58,237,.3)}
.cdb-upg-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;line-height:1}
/* Buy Modal */
#cdb-buy-modal{display:none;position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.85);backdrop-filter:blur(6px);align-items:center;justify-content:center}
#cdb-buy-modal.open{display:flex}
.cdb-buy-box{background:#0f0f23;border:1px solid rgba(0,212,255,.25);border-radius:20px;padding:26px;max-width:420px;width:92%;position:relative;max-height:90vh;overflow-y:auto}
/* Trust Badges */
.sol-trust-bar{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:6px}
.sol-trust-badge{font-size:8px;font-weight:700;padding:2px 5px;border-radius:3px;border:1px solid}
.stb-verified{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);color:#6ee7b7}
.stb-cvss{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.25);color:#fca5a5}
.stb-demand{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.25);color:#fcd34d}
.stb-deploy{background:rgba(0,212,255,.1);border-color:rgba(0,212,255,.25);color:#00d4ff}
/* Report Toast */
.cdb-report-toast{position:fixed;bottom:80px;right:20px;z-index:9999;background:#0f1a14;border:1px solid rgba(16,185,129,.4);border-radius:12px;padding:14px 18px;font-size:13px;color:#6ee7b7;box-shadow:0 4px 24px rgba(0,0,0,.6);display:flex;align-items:center;gap:10px;min-width:260px;transform:translateY(20px);opacity:0;transition:all .3s}
.cdb-report-toast.show{transform:translateY(0);opacity:1}
/* CYBERDUDEBIVASH PHASE 12 — SOC Command Center v12.0 */
.soc-rail-v12{display:flex;align-items:center;gap:0;background:rgba(0,0,0,.5);border:1px solid rgba(0,212,255,.15);border-radius:10px 10px 0 0;padding:7px 16px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;overflow-x:auto;white-space:nowrap;flex-wrap:nowrap}
.soc-rail-item{display:flex;align-items:center;gap:5px;color:var(--text-dim);flex-shrink:0}
.soc-rail-threat{color:#fca5a5!important}
.soc-rail-sep{width:1px;height:14px;background:rgba(255,255,255,.1);margin:0 10px;flex-shrink:0}
.soc-theater-grid{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:0;border:1px solid rgba(0,212,255,.15);border-top:none;border-bottom:none}
@media(max-width:900px){.soc-theater-grid{grid-template-columns:1fr}}
.soc-col{background:rgba(5,5,20,.95);border-right:1px solid rgba(255,255,255,.05);overflow:hidden;display:flex;flex-direction:column}
.soc-col:last-child{border-right:none}
.soc-col-center{background:rgba(8,8,24,.98);border-left:1px solid rgba(0,212,255,.07);border-right:1px solid rgba(0,212,255,.07)}
.soc-panel-hdr{display:flex;align-items:center;gap:6px;padding:8px 12px;background:rgba(0,0,0,.4);border-bottom:1px solid rgba(255,255,255,.06);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;flex-shrink:0;min-height:34px}
.soc-panel-icon{font-size:13px}
.soc-panel-title-v12{color:var(--text);flex:1}
.soc-badge-live{background:rgba(0,212,255,.12);color:var(--accent);border:1px solid rgba(0,212,255,.25);border-radius:4px;padding:1px 5px;font-size:8px;font-weight:800}
.soc-refresh-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--text-muted);border-radius:4px;padding:2px 7px;font-size:10px;cursor:pointer;transition:all .15s}
.soc-refresh-btn:hover{background:rgba(0,212,255,.12);color:var(--accent)}
.soc-threat-feed{flex:1;overflow-y:auto;max-height:300px;min-height:180px;padding:8px}
.soc-threat-item{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.05);margin-bottom:5px;cursor:pointer;transition:all .15s;background:rgba(255,255,255,.02)}
.soc-threat-item:hover,.soc-threat-item.active{background:rgba(0,212,255,.06);border-color:rgba(0,212,255,.25);transform:translateX(2px)}
.soc-threat-item.sev-CRITICAL{border-left:3px solid #ef4444}
.soc-threat-item.sev-HIGH{border-left:3px solid #f59e0b}
.soc-threat-item.sev-MEDIUM{border-left:3px solid #3b82f6}
.soc-threat-cve{font-size:11px;font-weight:800;color:#00d4ff;font-family:'Courier New',monospace}
.soc-threat-title{font-size:11px;color:var(--text-muted);line-height:1.3;margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.soc-threat-meta{display:flex;align-items:center;gap:5px;margin-top:4px;flex-wrap:wrap}
.soc-sev-chip{font-size:8px;font-weight:800;padding:1px 5px;border-radius:3px}
.soc-sev-chip.CRITICAL{background:rgba(239,68,68,.2);color:#fca5a5;border:1px solid rgba(239,68,68,.3)}
.soc-sev-chip.HIGH{background:rgba(245,158,11,.15);color:#fcd34d;border:1px solid rgba(245,158,11,.25)}
.soc-sev-chip.MEDIUM{background:rgba(59,130,246,.15);color:#93c5fd;border:1px solid rgba(59,130,246,.25)}
.soc-cvss-chip{font-size:8px;color:var(--text-dim);font-family:'Courier New',monospace}
.soc-kev-chip{font-size:7px;font-weight:800;background:rgba(239,68,68,.15);color:#fca5a5;border:1px solid rgba(239,68,68,.25);border-radius:3px;padding:1px 4px}
.soc-feed-footer{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-top:1px solid rgba(255,255,255,.06)}
.soc-skel{height:52px;border-radius:6px;background:rgba(255,255,255,.04);animation:shimmer 1.5s infinite;margin-bottom:5px}
.soc-graph-wrap{padding:10px;background:rgba(0,0,0,.3)}
.soc-edge-anim{animation:socEdgeDash 2.5s linear infinite}
@keyframes socEdgeDash{to{stroke-dashoffset:-20}}
.soc-node-pulse{animation:socNodePulse 2s ease-in-out infinite}
@keyframes socNodePulse{0%,100%{opacity:.85}50%{opacity:1}}
.soc-scanline-anim{animation:socScanX 5s linear infinite}
@keyframes socScanX{0%{transform:translateX(0)}100%{transform:translateX(400px)}}
.soc-risk-display{display:flex;align-items:center;gap:12px;padding:8px 12px;background:rgba(0,0,0,.2);border-top:1px solid rgba(255,255,255,.06)}
.soc-risk-ring-wrap{position:relative;flex-shrink:0}
.soc-risk-num-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.soc-risk-labels{flex:1;display:flex;flex-direction:column;gap:4px}
.soc-risk-row{display:flex;justify-content:space-between;font-size:10px;color:var(--text-dim)}
.soc-action-bar{display:flex;gap:4px;padding:8px 10px;border-top:1px solid rgba(255,255,255,.06);flex-wrap:wrap;margin-top:auto}
.soc-act-btn{flex:1;min-width:56px;padding:6px 3px;border-radius:6px;font-size:9px;font-weight:800;cursor:pointer;border:1px solid;transition:all .15s;text-align:center;white-space:nowrap}
.soc-act-scan{background:rgba(0,212,255,.1);border-color:rgba(0,212,255,.3);color:#00d4ff}
.soc-act-scan:hover{background:rgba(0,212,255,.2);box-shadow:0 0 10px rgba(0,212,255,.15)}
.soc-act-analyze{background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.3);color:#a78bfa}
.soc-act-analyze:hover{background:rgba(124,58,237,.2)}
.soc-act-report{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);color:#6ee7b7}
.soc-act-report:hover{background:rgba(16,185,129,.2)}
.soc-act-mitigate{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:#fca5a5}
.soc-act-mitigate:hover{background:rgba(239,68,68,.2)}
.soc-selected-threat{padding:8px;flex:1}
.soc-verdict-panel{padding:10px 12px;flex:1}
.soc-verdict-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.07)}
.soc-sev-badge{font-size:9px;font-weight:800;padding:2px 7px;border-radius:4px;background:rgba(239,68,68,.2);color:#fca5a5;border:1px solid rgba(239,68,68,.3)}
.soc-verdict-body{display:flex;flex-direction:column;gap:6px}
.soc-verdict-row{display:flex;align-items:center;gap:8px;font-size:11px}
.soc-verdict-label{color:var(--text-dim);min-width:70px;flex-shrink:0;font-size:10px}
.soc-verdict-val{font-weight:800}
.soc-conf-bar-wrap{flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.soc-conf-bar{height:100%;background:linear-gradient(90deg,#00d4ff,#7c3aed);border-radius:3px;transition:width .8s ease}
.soc-verdict-btn{padding:5px 10px;border-radius:6px;font-size:10px;font-weight:800;cursor:pointer;border:1px solid;transition:all .15s}
.soc-vbtn-fix{background:rgba(124,58,237,.15);border-color:rgba(124,58,237,.35);color:#a78bfa}
.soc-vbtn-fix:hover{background:rgba(124,58,237,.3)}
.soc-vbtn-scan{background:rgba(0,212,255,.1);border-color:rgba(0,212,255,.3);color:#00d4ff}
.soc-vbtn-report{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);color:#6ee7b7}
.soc-correlation-panel{padding:8px 12px;border-top:1px solid rgba(255,255,255,.06)}
.soc-corr-item{font-size:10px;color:var(--text-dim);padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04);display:flex;justify-content:space-between}
.soc-log-panel{border:1px solid rgba(0,212,255,.12);border-top:1px solid rgba(255,255,255,.05);border-radius:0 0 10px 10px;overflow:hidden}
.soc-log-feed{background:rgba(0,0,0,.65);padding:6px 10px;max-height:110px;overflow-y:auto;font-family:'Courier New',monospace}
.soc-log-line{display:flex;align-items:flex-start;gap:6px;font-size:10px;padding:2px 0;border-bottom:1px solid rgba(255,255,255,.03);line-height:1.4}
.soc-log-ts{color:rgba(0,212,255,.4);flex-shrink:0;min-width:54px;font-size:9px}
.soc-log-tag{font-size:8px;font-weight:800;padding:1px 4px;border-radius:2px;flex-shrink:0;margin-top:1px}
.soc-tag-info{background:rgba(0,212,255,.15);color:#00d4ff}
.soc-tag-ok{background:rgba(16,185,129,.15);color:#10b981}
.soc-tag-warn{background:rgba(245,158,11,.15);color:#f59e0b}
.soc-tag-crit{background:rgba(239,68,68,.2);color:#ef4444;animation:pulse .8s infinite}
.soc-tag-ai{background:rgba(124,58,237,.15);color:#a78bfa}
.soc-log-ok{color:rgba(110,231,183,.8)}
.soc-log-warn{color:rgba(252,211,77,.8)}
.soc-log-crit{color:rgba(252,165,165,.9)}
.soc-log-ai{color:rgba(196,181,253,.8)}
.soc-log-info{color:rgba(148,163,184,.7)}
/* Feature Gate */
.gate-wrapper{position:relative;overflow:hidden;border-radius:12px}
/* Upgrade Modal */
#cdb-upgrade-modal{display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.8);backdrop-filter:blur(6px);align-items:center;justify-content:center}
#cdb-upgrade-modal.open{display:flex}
.cdb-upgrade-box{background:var(--surface);border:1px solid rgba(124,58,237,.4);border-radius:20px;padding:28px;max-width:460px;width:92%;position:relative;box-shadow:0 0 60px rgba(124,58,237,.15)}
.cdb-upg-header{text-align:center;margin-bottom:18px}
.cdb-upg-icon{font-size:32px;margin-bottom:6px}
.cdb-upg-title{font-size:18px;font-weight:900;margin-bottom:4px}
.cdb-upg-sub{font-size:12px;color:var(--text-muted)}
.cdb-plan-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
@media(max-width:420px){.cdb-plan-cards{grid-template-columns:1fr}}
.cdb-plan-opt{border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px;cursor:pointer;transition:all .2s}
.cdb-plan-opt:hover,.cdb-plan-opt.selected{border-color:rgba(124,58,237,.5);background:rgba(124,58,237,.08)}
.cdb-plan-name{font-size:12px;font-weight:800;margin-bottom:2px}
.cdb-plan-price{font-size:18px;font-weight:900}
.cdb-plan-period{font-size:10px;color:var(--text-muted)}
.cdb-upg-cta{width:100%;background:linear-gradient(135deg,#7c3aed,#4f46e5);border:none;color:#fff;padding:12px;border-radius:10px;font-size:13px;font-weight:800;cursor:pointer;transition:all .2s}
.cdb-upg-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(124,58,237,.3)}
.cdb-upg-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;line-height:1}
/* Buy Modal */
#cdb-buy-modal{display:none;position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.85);backdrop-filter:blur(6px);align-items:center;justify-content:center}
#cdb-buy-modal.open{display:flex}
.cdb-buy-box{background:#0f0f23;border:1px solid rgba(0,212,255,.25);border-radius:20px;padding:26px;max-width:420px;width:92%;position:relative;max-height:90vh;overflow-y:auto}
/* Trust Badges */
.sol-trust-bar{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:6px}
.sol-trust-badge{font-size:8px;font-weight:700;padding:2px 5px;border-radius:3px;border:1px solid}
.stb-verified{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);color:#6ee7b7}
.stb-cvss{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.25);color:#fca5a5}
.stb-demand{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.25);color:#fcd34d}
.stb-deploy{background:rgba(0,212,255,.1);border-color:rgba(0,212,255,.25);color:#00d4ff}
/* Report Toast */
.cdb-report-toast{position:fixed;bottom:80px;right:20px;z-index:9999;background:#0f1a14;border:1px solid rgba(16,185,129,.4);border-radius:12px;padding:14px 18px;font-size:13px;color:#6ee7b7;box-shadow:0 4px 24px rgba(0,0,0,.6);display:flex;align-items:center;gap:10px;min-width:260px;transform:translateY(20px);opacity:0;transition:all .3s}
.cdb-report-toast.show{transform:translateY(0);opacity:1}