.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.75rem; border-radius: 9999px; font-weight: 600; font-size: .9375rem; cursor: pointer; transition: all var(--r); border: none; font-family: var(--ff); letter-spacing: -.01em; position: relative; overflow: hidden; }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 50%); opacity: 0; transition: opacity var(--r); }
.btn:hover::after { opacity: 1; }
.bp { background: var(--g1); color: #fff; box-shadow: 0 2px 12px rgba(99, 102, 241, .35), inset 0 1px 0 rgba(255,255,255,.1); }
.bp:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(99, 102, 241, .5), 0 0 20px rgba(99, 102, 241, .2), inset 0 1px 0 rgba(255,255,255,.15); color: #fff; }
.bs { background: var(--bgC); color: var(--t1); border: 1px solid var(--bdl); backdrop-filter: blur(8px); }
.bs:hover { border-color: var(--pri); color: var(--pri); background: rgba(99, 102, 241, .06); }
.bl { padding: 1rem 2rem; font-size: 1rem; }
.btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.btn-ghost { background: transparent; color: var(--t2); border: 1px solid transparent; padding: .5rem 1rem; font-size: .875rem; }
.btn-ghost:hover { color: var(--pri-l); background: rgba(99, 102, 241, .08); }
.btn-sm { padding: .5rem 1rem; font-size: .8125rem; }
.btn-danger { background: rgba(239, 68, 68, .1); color: var(--er); border: 1px solid rgba(239, 68, 68, .2); }
.btn-danger:hover { background: var(--er); color: #fff; }
.btn-success { background: rgba(16, 185, 129, .1); color: var(--ok); border: 1px solid rgba(16, 185, 129, .2); }
.btn-success:hover { background: var(--ok); color: #fff; }
.btn-outline-pri { background: transparent; color: var(--pri-l); border: 2px solid var(--pri); }
.btn-outline-pri:hover { background: var(--pri); color: #fff; transform: translateY(-2px); }

nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; padding: 1rem 0; transition: all var(--r); }
nav.sc { background: var(--glass); backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid var(--glass-border); padding: .625rem 0; box-shadow: 0 4px 30px rgba(0,0,0,.15); }
[data-theme="light"] nav.sc { background: rgba(250, 251, 255, .85); }
.nw { display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: .75rem; font-size: 1.25rem; font-weight: 800; color: var(--t1); transition: opacity var(--r); }
.logo:hover { color: var(--t1); opacity: .85; }
.logo img { width: 36px; height: 36px; border-radius: 10px; transition: transform var(--r); }
.logo:hover img { transform: scale(1.05); }
.nm { display: flex; align-items: center; gap: .125rem; flex-wrap: wrap; }
.nl { padding: .5rem .875rem; border-radius: 9999px; font-size: .8125rem; font-weight: 500; color: var(--t2); transition: all var(--r); cursor: pointer; letter-spacing: -.005em; }
.nl:hover, .nl.ac { color: var(--t1); background: rgba(99, 102, 241, .08); }
.nl.ac { color: var(--pri-l); position: relative; }
.nl.ac::after { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 20px; height: 2px; background: var(--g1); border-radius: 1px; box-shadow: 0 0 8px rgba(99,102,241,.5); }
.nd { position: relative; }
.nd-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 220px; background: var(--glass); backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: .5rem; opacity: 0; visibility: hidden; transition: all .2s cubic-bezier(.25,.46,.45,.94); box-shadow: 0 16px 48px rgba(0,0,0,.3), 0 0 0 1px rgba(99,102,241,.05); z-index: 100; }
.nd:hover .nd-menu, .nd.on .nd-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nd-item { display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem; border-radius: .5rem; font-size: .8125rem; font-weight: 500; color: var(--t2); transition: all var(--r); white-space: nowrap; }
.nd-item:hover { background: rgba(99, 102, 241, .08); color: var(--pri-l); }
.nd-item svg { width: 14px; height: 14px; opacity: .6; }
.nd-sep { height: 1px; background: var(--bd); margin: .375rem .5rem; }
.tt { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--bdl); background: var(--bgC); color: var(--t2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--r); font-size: 1rem; }
.tt:hover { border-color: var(--pri); color: var(--pri); }
.mt { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.mt span { width: 24px; height: 2px; background: var(--t1); transition: all var(--r); border-radius: 2px; }
.mt.on span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mt.on span:nth-child(2) { opacity: 0; }
.mt.on span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.cd { background: var(--bgC); border: 1px solid var(--bd); border-radius: var(--radius-lg); padding: 2rem; transition: all var(--r); backdrop-filter: blur(12px); position: relative; }
.cd:hover { border-color: rgba(99, 102, 241, .25); box-shadow: var(--shadow-hover), 0 0 30px rgba(99,102,241,.06); transform: translateY(-4px); }
.ci { width: 56px; height: 56px; border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; font-size: 1.5rem; }
.c1 { background: rgba(99, 102, 241, .1); color: var(--pri-l); }
.c2 { background: rgba(6, 182, 212, .1); color: var(--sec); }
.c3 { background: rgba(139, 92, 246, .1); color: var(--acc); }
.c4 { background: rgba(16, 185, 129, .1); color: var(--ok); }
.c5 { background: rgba(245, 158, 11, .1); color: var(--wr); }
.c6 { background: rgba(239, 68, 68, .1); color: var(--er); }
.c7 { background: rgba(59, 130, 246, .1); color: var(--info); }
.c8 { background: rgba(236, 72, 153, .1); color: #ec4899; }
.c9 { background: rgba(14, 165, 233, .1); color: #0ea5e9; }
.cd h3 { font-size: 1.25rem; margin-bottom: .75rem; }
.cd p { font-size: .9375rem; }
.cl { display: inline-flex; align-items: center; gap: .375rem; margin-top: 1rem; font-size: .875rem; font-weight: 600; color: var(--pri-l); }
.cl:hover { gap: .625rem; }
.cg2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.cg3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.cg4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.cg5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.cg6 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }

.sc { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--bgC); border: 1px solid var(--bd); border-radius: var(--radius-md); transition: all var(--r); backdrop-filter: blur(8px); }
.sc:hover { border-color: var(--pri); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.si { width: 48px; height: 48px; border-radius: .75rem; background: rgba(99, 102, 241, .1); display: flex; align-items: center; justify-content: center; color: var(--pri-l); flex-shrink: 0; }
.sn { display: block; font-size: 1.5rem; font-weight: 800; color: var(--t1); }
.sl { display: block; font-size: .8125rem; color: var(--tm); }

.qc { display: flex; flex-direction: column; background: var(--bgC); border: 1px solid var(--bd); border-radius: var(--radius-lg); padding: 2rem; transition: all var(--r); cursor: pointer; backdrop-filter: blur(8px); }
.qc:hover { border-color: rgba(99, 102, 241, .25); transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.qci { width: 48px; height: 48px; border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.qc h3 { margin-bottom: .5rem; }
.qc p { font-size: .9375rem; flex-grow: 1; }
.la { align-self: flex-end; color: var(--pri-l); margin-top: 1rem; }

.slb { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem 1.125rem; border-radius: 9999px; background: rgba(99, 102, 241, .08); border: 1px solid rgba(99, 102, 241, .15); font-size: .8125rem; font-weight: 600; color: var(--pri-l); margin-bottom: 1rem; letter-spacing: .02em; }
.sh { text-align: center; margin-bottom: 4rem; position: relative; }
.sh::after { content: ''; display: block; width: 60px; height: 3px; background: var(--g1); margin: 1.5rem auto 0; border-radius: 2px; opacity: .6; }
.sh h2 { margin-bottom: 1rem; }
.ss { font-size: 1.0625rem; color: var(--t2); max-width: 680px; margin: 0 auto; line-height: 1.7; }

.btt { position: fixed; bottom: 2rem; right: 2rem; width: 46px; height: 46px; border-radius: 50%; background: var(--g1); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(20px) scale(.9); transition: all var(--r); z-index: 999; box-shadow: 0 4px 20px rgba(99, 102, 241, .4); }
.btt.vis { opacity: 1; transform: translateY(0) scale(1); }
.btt:hover { transform: translateY(-4px) scale(1.1); box-shadow: 0 6px 30px rgba(99, 102, 241, .5), 0 0 20px rgba(99,102,241,.2); }

.vc { background: var(--bgC); border: 1px solid var(--bd); border-radius: 1.5rem; padding: 2rem; text-align: center; transition: all var(--r); }
.vc:hover { border-color: rgba(99, 102, 241, .3); transform: translateY(-4px); }

.pb { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .75rem; border-radius: 9999px; font-size: .75rem; font-weight: 700; margin-bottom: .75rem; }
.p0 { background: rgba(99, 102, 241, .1); color: var(--pri-l); }
.p1 { background: rgba(6, 182, 212, .1); color: var(--sec); }
.p2 { background: rgba(139, 92, 246, .1); color: var(--acc); }
.p3 { background: rgba(245, 158, 11, .1); color: var(--wr); }
.p4 { background: rgba(16, 185, 129, .1); color: var(--ok); }
.p5 { background: rgba(236, 72, 153, .1); color: #ec4899; }

.sb { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .75rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; margin-top: .75rem; }
.sbd { background: rgba(239, 68, 68, .1); color: var(--er); }
.sbs { background: rgba(16, 185, 129, .1); color: var(--ok); }
.sbw { background: rgba(245, 158, 11, .1); color: var(--wr); }
.sbi { background: rgba(59, 130, 246, .1); color: var(--info); }

footer { padding: 5rem 0 2rem; border-top: 1px solid var(--bd); background: linear-gradient(180deg, transparent, rgba(99, 102, 241, .02)); position: relative; }
footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--pri), var(--sec), transparent); opacity: .15; }
.fw { display: grid; grid-template-columns: 1.5fr 2fr; gap: 4rem; margin-bottom: 3.5rem; }
.flg { width: 180px; margin-bottom: 1rem; border-radius: 10px; }
.soc { display: flex; gap: .75rem; margin-top: 1.25rem; }
.soc a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--bdl); display: flex; align-items: center; justify-content: center; color: var(--t2); transition: all var(--r); }
.soc a:hover { border-color: var(--pri); color: #fff; background: var(--g1); transform: translateY(-4px) scale(1.1); box-shadow: 0 4px 20px rgba(99,102,241,.35); }
.fls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.fc h4 { font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1rem; color: var(--t1); }
.fc a { display: block; padding: .25rem 0; font-size: .875rem; color: var(--t2); }
.fc a:hover { color: var(--pri-l); }
.fb { display: flex; justify-content: space-between; align-items: center; padding-top: 2.5rem; border-top: 1px solid var(--bd); font-size: .8125rem; color: var(--tm); }

.fg { margin-bottom: 1.25rem; }
.fg label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .5rem; color: var(--t1); }
.fg input, .fg textarea, .fg select { width: 100%; padding: .75rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--bdl); background: var(--bg2); color: var(--t1); font-family: var(--ff); font-size: .9375rem; transition: border-color var(--r), box-shadow var(--r); }
.fg input:focus, .fg textarea:focus, .fg select:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.fg textarea { min-height: 120px; resize: vertical; }
.fr { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.tc { background: var(--bgC); border: 1px solid var(--bd); border-radius: .75rem; padding: .75rem 1.25rem; margin-bottom: .75rem; cursor: pointer; transition: all var(--r); }
.tc:hover { border-color: var(--pri); }
.tc h4 { display: flex; justify-content: space-between; align-items: center; margin: 0; font-size: .9375rem; }
.tc h4 span { transition: transform .3s ease; display: inline-flex; }
.tc.open h4 span { transform: rotate(180deg); }
.tc p { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.25,.46,.45,.94), margin .3s ease; margin: 0; font-size: .875rem; }
.tc.open p { max-height: 300px; margin-top: .75rem; }

.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; animation: pulse 2s infinite; }
.live-dot.red { background: var(--er); }
.live-dot.yellow { background: var(--wr); }

.metric-bar { height: 5px; border-radius: 3px; background: rgba(148, 163, 184, .08); overflow: hidden; margin-top: .5rem; }
.metric-fill { height: 100%; border-radius: 3px; background: var(--g1); transition: width 1.5s cubic-bezier(.25, .46, .45, .94); animation: progressFill 1.5s ease; }
.metric-fill.green { background: var(--g3); }
.metric-fill.orange { background: var(--g4); }
.metric-fill.pink { background: var(--g5); }

.tag { display: inline-flex; align-items: center; gap: .25rem; padding: .1875rem .625rem; border-radius: 9999px; font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tag-critical { background: rgba(239, 68, 68, .12); color: var(--er); }
.tag-high { background: rgba(245, 158, 11, .12); color: var(--wr); }
.tag-medium { background: rgba(59, 130, 246, .12); color: var(--info); }
.tag-low { background: rgba(16, 185, 129, .12); color: var(--ok); }
.tag-info { background: rgba(99, 102, 241, .12); color: var(--pri-l); }

.dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.dash-card { background: var(--bgC); border: 1px solid var(--bd); border-radius: var(--radius-md); padding: 1.25rem; position: relative; overflow: hidden; backdrop-filter: blur(8px); transition: all var(--r); }
.dash-card:hover { border-color: rgba(99,102,241,.15); transform: translateY(-2px); }
.dash-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.dash-card.dc-pri::before { background: var(--g1); }
.dash-card.dc-sec::before { background: var(--g2); }
.dash-card.dc-ok::before { background: var(--g3); }
.dash-card.dc-wr::before { background: var(--g4); }
.dash-card .dc-label { font-size: .6875rem; color: var(--tm); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; font-weight: 600; }
.dash-card .dc-value { font-size: 2.25rem; font-weight: 800; color: var(--t1); line-height: 1; letter-spacing: -.02em; }
.dash-card .dc-change { font-size: .6875rem; font-weight: 600; margin-top: .5rem; display: flex; align-items: center; gap: .25rem; }
.dc-up { color: var(--ok); }
.dc-down { color: var(--er); }

.alert-feed { max-height: 400px; overflow-y: auto; border-radius: var(--radius-sm); border: none; background: transparent; }
.alert-feed::-webkit-scrollbar { width: 3px; }
.alert-feed::-webkit-scrollbar-track { background: transparent; }
.alert-feed::-webkit-scrollbar-thumb { background: var(--bdl); border-radius: 2px; }
.alert-item { display: flex; align-items: flex-start; gap: .75rem; padding: .875rem .5rem; border-bottom: 1px solid var(--bd); animation: alertFlash .4s ease; transition: background var(--r); border-radius: .375rem; }
.alert-item:hover { background: rgba(99, 102, 241, .04); }
.alert-item:last-child { border-bottom: none; }
.alert-severity { width: 3px; min-height: 36px; border-radius: 2px; flex-shrink: 0; margin-top: 2px; }
.alert-severity.critical { background: var(--er); }
.alert-severity.high { background: var(--wr); }
.alert-severity.medium { background: var(--info); }
.alert-severity.low { background: var(--ok); }
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-size: .8125rem; font-weight: 600; color: var(--t1); margin-bottom: .25rem; line-height: 1.4; }
.alert-meta { font-size: .6875rem; color: var(--tm); display: flex; gap: .75rem; flex-wrap: wrap; }
.alert-time { font-size: .625rem; color: var(--tm); white-space: nowrap; margin-top: 2px; font-family: var(--mono); }

.inv-step { display: flex; gap: 1rem; padding: .875rem 0; position: relative; }
.inv-step:not(:last-child)::after { content: ''; position: absolute; left: 18px; top: 44px; bottom: 0; width: 1px; background: var(--bd); }
.inv-step-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .8125rem; }
.inv-step-icon.active { background: var(--g1); color: #fff; animation: pulseGlow 2s infinite; box-shadow: 0 0 12px rgba(99,102,241,.4); }
.inv-step-icon.done { background: rgba(16, 185, 129, .1); color: var(--ok); }
.inv-step-icon.pending { background: var(--bg2); color: var(--tm); border: 1px solid var(--bd); }
.inv-step-content h4 { font-size: .875rem; margin-bottom: .25rem; }
.inv-step-content p { font-size: .75rem; color: var(--tm); margin: 0; line-height: 1.5; }

.soar-playbook { background: rgba(0,0,0,.15); border: 1px solid var(--bd); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: .75rem; cursor: pointer; transition: all var(--r); }
.soar-playbook:hover { border-color: var(--pri); transform: translateX(4px); }
.soar-playbook.executing { border-color: var(--wr); animation: borderGlow 1.5s infinite; }
.soar-playbook.completed { border-color: var(--ok); background: rgba(16,185,129,.05); }
.sp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.sp-steps { display: flex; gap: .375rem; margin-top: .625rem; }
.sp-step { flex: 1; height: 3px; border-radius: 2px; background: rgba(148, 163, 184, .08); overflow: hidden; }
.sp-step-fill { height: 100%; width: 0; border-radius: 2px; background: var(--g3); transition: width .5s cubic-bezier(.25, .46, .45, .94); }

.world-map-container { position: relative; background: rgba(0,0,0,.25); border-radius: var(--radius-sm); border: none; overflow: hidden; min-height: 300px; }
.map-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(99, 102, 241, .08) 0%, transparent 40%), radial-gradient(circle at 75% 60%, rgba(239, 68, 68, .06) 0%, transparent 40%), radial-gradient(circle at 50% 80%, rgba(6, 182, 212, .06) 0%, transparent 40%); }
.threat-marker { position: absolute; width: 10px; height: 10px; border-radius: 50%; animation: pulse 2s infinite; }
.threat-marker::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .3; animation: ripple 2s infinite; }
.threat-marker.critical { background: var(--er); color: var(--er); }
.threat-marker.high { background: var(--wr); color: var(--wr); }
.threat-marker.medium { background: var(--info); color: var(--info); }
.threat-marker.low { background: var(--ok); color: var(--ok); }

.graph-node { position: absolute; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.8); border: 1.5px solid var(--pri); font-size: .6875rem; color: var(--pri-l); animation: nodePulse 3s infinite; cursor: pointer; transition: all var(--r); z-index: 2; backdrop-filter: blur(8px); }
.graph-node:hover { transform: scale(1.15); box-shadow: 0 0 20px rgba(99,102,241,.25); z-index: 3; border-color: var(--pri-l); }
.graph-container { position: relative; min-height: 350px; background: rgba(0,0,0,.2); border-radius: var(--radius-md); border: 1px solid var(--bd); overflow: hidden; backdrop-filter: blur(8px); }
.graph-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.graph-svg line { stroke: rgba(99, 102, 241, .15); stroke-width: 1.5; stroke-dasharray: 5 5; animation: dashMove 1s linear infinite; }

.code-block { background: rgba(0,0,0,.25); border: 1px solid var(--bd); border-radius: var(--radius-sm); padding: 1rem 1.25rem; font-family: var(--mono); font-size: .75rem; line-height: 1.8; overflow-x: auto; color: var(--t2); position: relative; }
.code-block .code-lang { position: absolute; top: .5rem; right: .75rem; font-size: .5625rem; color: var(--tm); text-transform: uppercase; letter-spacing: .06em; }
.code-line-num { color: rgba(148,163,184,.3); user-select: none; margin-right: 1rem; font-size: .6875rem; }
.code-key { color: var(--sec); }
.code-str { color: var(--ok); }
.code-num { color: var(--wr); }
.code-comment { color: var(--tm); font-style: italic; }
.code-fn { color: var(--pri-l); }

.arch-flow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.arch-node { padding: .75rem 1.25rem; border-radius: .75rem; border: 1px solid var(--bd); background: var(--bgC); font-size: .875rem; font-weight: 600; color: var(--t1); transition: all var(--r); text-align: center; }
.arch-node:hover { border-color: var(--pri); box-shadow: var(--cyber-glow); transform: translateY(-2px); }
.arch-node.primary { background: rgba(99, 102, 241, .1); border-color: rgba(99, 102, 241, .3); color: var(--pri-l); }
.arch-node.success { background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .3); color: var(--ok); }
.arch-node.warning { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .3); color: var(--wr); }
.arch-node.danger { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .3); color: var(--er); }
.arch-arrow { color: var(--tm); font-size: 1.25rem; }

.timeline-h { display: flex; gap: 0; overflow-x: auto; padding-bottom: 1rem; }
.timeline-h-step { flex: 1; min-width: 160px; text-align: center; position: relative; padding: 0 .75rem; }
.timeline-h-step:not(:last-child)::after { content: ''; position: absolute; top: 18px; right: 0; width: 100%; height: 1.5px; background: linear-gradient(90deg, var(--g1), var(--g2)); transform: translateX(50%); opacity: .5; }
.th-dot { width: 36px; height: 36px; border-radius: 50%; background: var(--g1); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto .625rem; position: relative; z-index: 1; font-size: .8125rem; }
.th-dot.sec { background: var(--g2); }
.th-dot.ok { background: var(--g3); }
.th-label { font-size: .6875rem; font-weight: 700; color: var(--pri-l); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .375rem; }
.th-text { font-size: .75rem; color: var(--tm); line-height: 1.5; }

.comparison-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; }
.comp-card { background: var(--bgC); border: 1px solid var(--bd); border-radius: 1.5rem; padding: 2rem; transition: all var(--r); }
.comp-card:hover { border-color: rgba(99, 102, 241, .3); transform: translateY(-4px); }
.comp-card.featured { border-color: transparent; box-shadow: var(--cyber-glow); position: relative; background-clip: padding-box; }
.comp-card.featured::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, var(--pri), var(--sec), var(--acc), var(--pri)); background-size: 300% 300%; animation: gradientBorder 4s linear infinite; z-index: -1; }
.comp-card.featured::after { content: 'MOST POPULAR'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: .25rem 1rem; border-radius: 9999px; background: linear-gradient(135deg, var(--pri), var(--sec)); color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .05em; z-index: 1; }
.comp-card h3 { text-align: center; margin-bottom: .5rem; }
.comp-price { text-align: center; font-size: 2.5rem; font-weight: 800; margin-bottom: .5rem; }
.comp-price span { font-size: .875rem; font-weight: 400; color: var(--tm); }
.comp-features { margin-top: 1.5rem; }
.comp-features li { display: flex; align-items: center; gap: .5rem; padding: .5rem 0; font-size: .875rem; color: var(--t2); border-bottom: 1px solid var(--bd); }
.comp-features li:last-child { border-bottom: none; }
.comp-features li svg { color: var(--ok); width: 16px; height: 16px; flex-shrink: 0; }

.counter { display: inline-block; }
.counter.animating { animation: countUp .5s ease; }

.tab-group { display: flex; gap: .25rem; background: var(--bg2); padding: .25rem; border-radius: .75rem; border: 1px solid var(--bd); }
.tab-btn { padding: .5rem 1.25rem; border-radius: .5rem; border: none; background: transparent; color: var(--t2); font-family: var(--ff); font-size: .875rem; font-weight: 500; cursor: pointer; transition: all var(--r); }
.tab-btn:hover { color: var(--t1); }
.tab-btn.active { background: var(--g1); color: #fff; }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn .3s ease; }

.stat-ring { position: relative; width: 120px; height: 120px; margin: 0 auto; }
.stat-ring svg { transform: rotate(-90deg); }
.stat-ring-bg { fill: none; stroke: var(--bg2); stroke-width: 8; }
.stat-ring-fill { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1.5s ease; }
.stat-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stat-ring-value { font-size: 1.5rem; font-weight: 800; color: var(--t1); }
.stat-ring-text { font-size: .6875rem; color: var(--tm); }

.footer-shield { width: 48px; height: 48px; border-radius: 14px; margin-top: 1rem; border: 2px solid rgba(99, 102, 241, .2); animation: scanPulse 3s ease-in-out infinite; }

.hero-logo-container { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); width: 320px; height: 320px; display: flex; align-items: center; justify-content: center; }
.hero-logo-orbit { position: absolute; width: 300px; height: 300px; border: 1px dashed rgba(99, 102, 241, .2); border-radius: 50%; animation: spin 20s linear infinite; }
.hero-logo-orbit:nth-child(2) { width: 260px; height: 260px; animation-direction: reverse; animation-duration: 15s; border-color: rgba(6, 182, 212, .15); }
.hero-logo-orbit-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--pri); top: -4px; left: 50%; box-shadow: 0 0 10px var(--pri); }
.hero-logo-center { width: 140px; height: 140px; border-radius: 24px; border: 2px solid rgba(99, 102, 241, .3); box-shadow: 0 0 30px rgba(99,102,241,.3), 0 0 60px rgba(99,102,241,.1); animation: float 5s ease-in-out infinite, pulseGlow 4s ease-in-out infinite; position: relative; z-index: 2; }

.lore-section { position: relative; padding: 6rem 0; overflow: hidden; }
.lore-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.lore-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 400px; }
.lore-logo-ring { position: relative; width: 280px; height: 280px; display: flex; align-items: center; justify-content: center; }
.lore-logo-ring::before { content: ''; position: absolute; inset: -20px; border-radius: 50%; border: 2px solid rgba(99, 102, 241, .15); animation: spin 30s linear infinite; }
.lore-logo-ring::after { content: ''; position: absolute; inset: -40px; border-radius: 50%; border: 1px dashed rgba(6, 182, 212, .1); animation: spin 40s linear infinite reverse; }
.lore-logo-img { width: 160px; height: 160px; border-radius: 28px; box-shadow: var(--cyber-glow-lg); animation: float 4s ease-in-out infinite; }
.lore-letter { position: absolute; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .875rem; border: 2px solid rgba(99, 102, 241, .3); background: var(--bgC); animation: floatBadge 5s ease-in-out infinite; transition: border-color var(--r), box-shadow var(--r); }
.lore-letter:hover { border-color: var(--pri); box-shadow: 0 0 16px rgba(99,102,241,.3); }
.lore-letter:nth-child(2) { animation-delay: -.6s; }
.lore-letter:nth-child(3) { animation-delay: -1.2s; }
.lore-letter:nth-child(4) { animation-delay: -1.8s; }
.lore-letter:nth-child(5) { animation-delay: -2.4s; }
.lore-letter:nth-child(6) { animation-delay: -3s; }
.lore-letter:nth-child(7) { animation-delay: -3.6s; }
.lore-breakdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.lore-letter-card { background: var(--bgC); border: 1px solid var(--bd); border-radius: 1rem; padding: 1.5rem; text-align: center; transition: all var(--r); position: relative; overflow: hidden; }
.lore-letter-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--g1); transform: scaleX(0); transition: transform .5s ease; }
.lore-letter-card:hover::before { transform: scaleX(1); }
.lore-letter-card:hover { border-color: rgba(99, 102, 241, .3); transform: translateY(-4px); box-shadow: var(--cyber-glow); }
.lore-letter-char { font-size: 2rem; font-weight: 900; margin-bottom: .5rem; }
.lore-letter-meaning { font-size: .8125rem; color: var(--tm); line-height: 1.5; }

.feature-showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }
.feature-showcase-card { background: var(--bgC); border: 1px solid var(--bd); border-radius: 1.5rem; padding: 2rem; transition: all var(--r); position: relative; overflow: hidden; }
.feature-showcase-card::after { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(99, 102, 241, .06) 0%, transparent 70%); transition: all .5s ease; }
.feature-showcase-card:hover { border-color: rgba(99, 102, 241, .3); transform: translateY(-6px); box-shadow: var(--cyber-glow), 0 0 30px rgba(99,102,241,.05); }
.feature-showcase-card:hover::after { top: -30%; right: -30%; }
.fsc-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.fsc-icon { width: 56px; height: 56px; border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.fsc-stat { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .75rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; margin-top: .5rem; }

.stats-marquee { overflow: hidden; padding: 3.5rem 0; background: var(--bg2); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); position: relative; }
.stats-marquee::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(99,102,241,.03), transparent); background-size: 200% 100%; animation: shimmerBg 4s linear infinite; pointer-events: none; }
.stats-marquee::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 120px; background: linear-gradient(90deg, var(--bg2), transparent); z-index: 1; pointer-events: none; }
.stats-marquee::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 120px; background: linear-gradient(270deg, var(--bg2), transparent); z-index: 1; pointer-events: none; }
.stats-marquee-track { display: flex; gap: 2rem; animation: marquee 35s linear infinite; width: max-content; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.stats-marquee-item { display: flex; align-items: center; gap: 1rem; white-space: nowrap; padding: 1rem 2rem; background: var(--bgC); border: 1px solid var(--bd); border-radius: var(--radius-md); backdrop-filter: blur(8px); }
.stats-marquee-value { font-size: 1.75rem; font-weight: 800; }
.stats-marquee-label { font-size: .8125rem; color: var(--tm); }

.tech-badge-grid { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.tech-badge { display: inline-flex; align-items: center; gap: .375rem; padding: .5rem 1rem; border-radius: .75rem; background: var(--bg2); border: 1px solid var(--bd); font-size: .8125rem; font-weight: 500; color: var(--t2); transition: all var(--r); }
.tech-badge:hover { border-color: var(--pri); color: var(--pri-l); transform: translateY(-2px); box-shadow: 0 0 10px rgba(99, 102, 241, .15); }

.number-highlight { font-size: 3.5rem; font-weight: 900; line-height: 1; margin-bottom: .5rem; }

.section-icon-row { display: flex; gap: 1rem; justify-content: center; margin-bottom: 2rem; }
.section-icon-item { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--bd); background: var(--bgC); transition: all var(--r); animation: waveFloat 3s ease-in-out infinite; }
.section-icon-item:nth-child(2) { animation-delay: .2s; }
.section-icon-item:nth-child(3) { animation-delay: .4s; }
.section-icon-item:nth-child(4) { animation-delay: .6s; }
.section-icon-item:nth-child(5) { animation-delay: .8s; }
.section-icon-item:hover { border-color: var(--pri); transform: scale(1.15); box-shadow: var(--cyber-glow); }

.iris-visual { position: relative; width: 280px; height: 280px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.iris-ring { position: absolute; border-radius: 50%; border: 2px solid; }
.iris-ring-1 { inset: 0; border-color: rgba(99, 102, 241, .3); animation: spin 25s linear infinite; }
.iris-ring-2 { inset: -25px; border-color: rgba(6, 182, 212, .2); border-style: dashed; animation: spin 35s linear infinite reverse; }
.iris-ring-3 { inset: -50px; border-color: rgba(139, 92, 246, .1); animation: spin 45s linear infinite; }
.iris-pupil { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, var(--pri) 0%, rgba(99, 102, 241, .5) 40%, transparent 70%); display: flex; align-items: center; justify-content: center; animation: breathe 4s ease-in-out infinite; box-shadow: 0 0 40px rgba(99,102,241,.4), 0 0 80px rgba(99,102,241,.15); }
.iris-pupil img { width: 70px; height: 70px; border-radius: 50%; }

.lore-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; }
.lore-dual-card { background: var(--bgC); border: 1px solid var(--bd); border-radius: 1.5rem; padding: 2rem; text-align: center; position: relative; overflow: hidden; transition: all var(--r); }
.lore-dual-card:hover { border-color: rgba(99, 102, 241, .3); transform: translateY(-4px); box-shadow: var(--cyber-glow); }
.lore-dual-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.lore-dual-card.soc-card::before { background: var(--g1); }
.lore-dual-card.iris-card::before { background: var(--g2); }
.lore-dual-title { font-size: 2rem; font-weight: 900; margin-bottom: .5rem; }
.lore-dual-subtitle { font-size: .9375rem; color: var(--tm); margin-bottom: 1rem; }
.lore-dual-desc { font-size: .875rem; color: var(--t2); line-height: 1.6; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.pricing-card { background: var(--bgC); border: 1px solid var(--bd); border-radius: var(--radius-lg); padding: 2.5rem; transition: all var(--r); position: relative; overflow: hidden; backdrop-filter: blur(8px); }
.pricing-card:hover { border-color: rgba(99, 102, 241, .25); transform: translateY(-8px); box-shadow: var(--shadow-hover); }
.pricing-card.featured { border-color: transparent; background-clip: padding-box; }
.pricing-card.featured::before { content: 'RECOMMENDED'; position: absolute; top: 0; left: 0; right: 0; padding: .5rem; text-align: center; background: var(--g1); color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; }
.pricing-card.featured::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, var(--pri), var(--sec), var(--acc), var(--pri)); background-size: 300% 300%; animation: gradientBorder 4s linear infinite; z-index: -1; }
.pricing-name { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; }
.pricing-price { font-size: 3rem; font-weight: 900; line-height: 1; margin-bottom: .25rem; }
.pricing-price span { font-size: 1rem; font-weight: 400; color: var(--tm); }
.pricing-desc { font-size: .875rem; color: var(--tm); margin-bottom: 2rem; }
.pricing-features li { display: flex; align-items: center; gap: .5rem; padding: .5rem 0; font-size: .875rem; color: var(--t2); border-bottom: 1px solid var(--bd); }
.pricing-features li:last-child { border-bottom: none; }

.testimonial-card { background: var(--bgC); border: 1px solid var(--bd); border-radius: var(--radius-lg); padding: 2rem; transition: all var(--r); backdrop-filter: blur(8px); }
.testimonial-card:hover { border-color: rgba(99, 102, 241, .25); transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.testimonial-text { font-size: 1rem; font-style: italic; color: var(--t2); line-height: 1.7; margin-bottom: 1.5rem; position: relative; }
.testimonial-text::before { content: '"'; position: absolute; top: -1rem; left: -.5rem; font-size: 3rem; color: var(--pri); opacity: .2; font-family: Georgia, serif; }
.testimonial-author { display: flex; align-items: center; gap: 1rem; }
.testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--g1); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 1.125rem; }
.testimonial-name { font-weight: 700; font-size: .9375rem; }
.testimonial-role { font-size: .8125rem; color: var(--tm); }

.case-card { background: var(--bgC); border: 1px solid var(--bd); border-radius: 1.5rem; padding: 2rem; transition: all var(--r); position: relative; overflow: hidden; }
.case-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--pri), var(--sec)); opacity: 0; transition: opacity var(--r); }
.case-card:hover { border-color: rgba(99, 102, 241, .3); transform: translateY(-6px); box-shadow: var(--shadow-hover), 0 0 30px rgba(99,102,241,.05); }
.case-card:hover::before { opacity: 1; }
.case-metric { display: flex; gap: 1.5rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--bd); }
.case-metric-item { text-align: center; flex: 1; }
.case-metric-value { font-size: 1.5rem; font-weight: 800; }
.case-metric-label { font-size: .75rem; color: var(--tm); }

.resource-card { background: var(--bgC); border: 1px solid var(--bd); border-radius: 1.5rem; padding: 1.75rem; transition: all var(--r); display: flex; flex-direction: column; }
.resource-card:hover { border-color: rgba(99, 102, 241, .3); transform: translateY(-4px); box-shadow: var(--shadow-hover), 0 0 25px rgba(99,102,241,.04); }
.resource-type { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .75rem; border-radius: 9999px; font-size: .6875rem; font-weight: 600; text-transform: uppercase; margin-bottom: 1rem; }

.changelog-entry { background: var(--bgC); border: 1px solid var(--bd); border-radius: var(--radius-md); padding: 1.5rem 2rem; margin-bottom: 1rem; transition: all var(--r); position: relative; }
.changelog-entry:hover { border-color: rgba(99, 102, 241, .3); transform: translateX(4px); }
.changelog-entry::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: var(--radius-md) 0 0 var(--radius-md); }
.changelog-entry:first-child::before { background: var(--g1); }
.changelog-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .1875rem .625rem; border-radius: 9999px; font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-right: .5rem; }
.changelog-badge.new { background: rgba(16, 185, 129, .1); color: var(--ok); }
.changelog-badge.fix { background: rgba(245, 158, 11, .1); color: var(--wr); }
.changelog-badge.feature { background: rgba(99, 102, 241, .1); color: var(--pri-l); }
.changelog-badge.breaking { background: rgba(239, 68, 68, .1); color: var(--er); }

.integration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.integration-card { background: var(--bgC); border: 1px solid var(--bd); border-radius: 1.5rem; padding: 2rem; text-align: center; transition: all var(--r); position: relative; }
.integration-card:hover { border-color: rgba(99, 102, 241, .3); transform: translateY(-4px); box-shadow: var(--shadow-hover), 0 0 25px rgba(99,102,241,.04); }
.integration-icon { width: 64px; height: 64px; border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.5rem; }

.stat-bar { height: 8px; border-radius: 4px; background: var(--bg2); overflow: hidden; margin-top: .5rem; }
.stat-bar-fill { height: 100%; border-radius: 4px; transition: width 1.5s ease; }

.chart-container { background: var(--bgC); border: 1px solid var(--bd); border-radius: var(--radius-md); padding: 1.5rem; backdrop-filter: blur(8px); }
.chart-container canvas { max-height: 300px; }

.glow-line { height: 1px; background: linear-gradient(90deg, transparent, var(--pri), transparent); margin: 3rem 0; opacity: .3; }
.aurora-bg { background: linear-gradient(135deg, rgba(99,102,241,.05), rgba(6,182,212,.05), rgba(139,92,246,.05), rgba(16,185,129,.05)); background-size: 400% 400%; animation: aurora 15s ease infinite; }
.glass-card { background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(20px); border-radius: 1.5rem; padding: 2rem; }

.trust-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.125rem; border-radius: var(--radius-sm); background: var(--bgC); border: 1px solid var(--bd); font-size: .8125rem; font-weight: 500; color: var(--t2); transition: all var(--r); backdrop-filter: blur(8px); }
.trust-badge:hover { border-color: var(--pri); color: var(--pri-l); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(99, 102, 241, .15); background: rgba(99,102,241,.06); }
.trust-badge svg { color: var(--ok); }

@media (max-width: 968px) {
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .comparison-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .arch-flow { flex-direction: column; }
  .arch-arrow { transform: rotate(90deg); }
  .timeline-h { flex-direction: column; }
  .timeline-h-step:not(:last-child)::after { display: none; }
  .lore-grid { grid-template-columns: 1fr; }
  .lore-dual { grid-template-columns: 1fr; }
  .hero-logo-container { display: none; }
  .feature-showcase { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dash-grid { grid-template-columns: 1fr; }
  .lore-breakdown { grid-template-columns: 1fr; }
}

.iris-eye-hero { position: relative; width: 200px; height: 200px; margin: 0 auto; }
.iris-eye-outer { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(99,102,241,.3); animation: irisExpand 2s ease forwards; }
.iris-eye-iris { position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(circle, var(--pri) 0%, rgba(99,102,241,.6) 40%, rgba(6,182,212,.3) 70%, transparent 100%); animation: breathe 3s ease-in-out infinite; display: flex; align-items: center; justify-content: center; }
.iris-eye-pupil { width: 30%; height: 30%; border-radius: 50%; background: var(--bg); }
.iris-eye-ring { position: absolute; border-radius: 50%; border: 1px solid; animation: pulseRing 3s infinite; }
.iris-eye-ring:nth-child(1) { inset: -15px; border-color: rgba(99,102,241,.2); animation-delay: 0s; }
.iris-eye-ring:nth-child(2) { inset: -30px; border-color: rgba(6,182,212,.15); animation-delay: .5s; }
.iris-eye-ring:nth-child(3) { inset: -45px; border-color: rgba(139,92,246,.1); animation-delay: 1s; }

.stat-card { background: var(--bgC); border: 1px solid var(--bd); border-radius: 1.25rem; padding: 1.75rem; text-align: center; transition: all var(--r); position: relative; overflow: hidden; }
.stat-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--g1); transform: scaleX(0); transition: transform .5s ease; }
.stat-card:hover::before { transform: scaleX(1); }
.stat-card:hover { border-color: rgba(99,102,241,.3); transform: translateY(-4px); box-shadow: var(--cyber-glow); }
.stat-card-icon { width: 48px; height: 48px; border-radius: .75rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.25rem; }
.stat-card-value { font-size: 2.25rem; font-weight: 800; line-height: 1; margin-bottom: .25rem; }
.stat-card-label { font-size: .8125rem; color: var(--tm); }
.stat-card-change { font-size: .75rem; font-weight: 600; margin-top: .5rem; display: flex; align-items: center; justify-content: center; gap: .25rem; }

.progress-ring { position: relative; width: 80px; height: 80px; margin: 0 auto; }
.progress-ring svg { transform: rotate(-90deg); }
.progress-ring-bg { fill: none; stroke: var(--bg2); stroke-width: 6; }
.progress-ring-fill { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1.5s ease; }
.progress-ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 700; }

.feature-icon-row { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.feature-icon-item { width: 64px; height: 64px; border-radius: 1rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--bd); background: var(--bgC); font-size: 1.25rem; transition: all var(--r); position: relative; }
.feature-icon-item:hover { border-color: var(--pri); transform: translateY(-4px) scale(1.1); box-shadow: var(--cyber-glow); }
.feature-icon-item::after { content: attr(data-label); position: absolute; bottom: -1.5rem; left: 50%; transform: translateX(-50%); font-size: .625rem; color: var(--tm); white-space: nowrap; opacity: 0; transition: opacity .3s; }
.feature-icon-item:hover::after { opacity: 1; }

.svg-decor { position: absolute; pointer-events: none; opacity: .05; }
.svg-decor-1 { top: 10%; right: -5%; width: 300px; animation: float 8s ease-in-out infinite; }
.svg-decor-2 { bottom: 15%; left: -8%; width: 250px; animation: floatSlow 10s ease-in-out infinite; }

.number-ticker { display: inline-block; font-variant-numeric: tabular-nums; }

.glow-divider { height: 1px; background: linear-gradient(90deg, transparent 0%, var(--pri) 30%, var(--sec) 50%, var(--pri) 70%, transparent 100%); margin: 4rem 0; opacity: .2; position: relative; }
.glow-divider::after { content: ''; position: absolute; inset: -4px 0; background: inherit; filter: blur(8px); opacity: .5; }
.glow-divider.thick { height: 2px; opacity: .3; }

.floating-badge { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1.25rem; border-radius: 9999px; background: var(--bgC); border: 1px solid var(--bd); font-size: .8125rem; font-weight: 600; color: var(--pri-l); animation: floatBadge 4s ease-in-out infinite; box-shadow: var(--shadow-card); }
.floating-badge .badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse 2s infinite; }

.cyber-line { height: 1px; background: linear-gradient(90deg, transparent, var(--pri), var(--sec), transparent); animation: cyberLine 2s ease forwards; margin: 2rem 0; }

.tab-filter { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2rem; justify-content: center; }
.tab-filter-btn { padding: .5rem 1.25rem; border-radius: 9999px; border: 1px solid var(--bd); background: var(--bgC); color: var(--t2); font-family: var(--ff); font-size: .8125rem; font-weight: 500; cursor: pointer; transition: all var(--r); }
.tab-filter-btn:hover { border-color: var(--pri); color: var(--pri-l); }
.tab-filter-btn.active { background: var(--g1); color: #fff; border-color: transparent; }

.timeline-v { position: relative; padding-left: 2rem; }
.timeline-v::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--pri), var(--sec), var(--acc)); }
.timeline-v-item { position: relative; padding: 0 0 2.5rem 2rem; }
.timeline-v-dot { position: absolute; left: -1rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--bgC); border: 2px solid var(--pri); display: flex; align-items: center; justify-content: center; color: var(--pri-l); font-size: .875rem; transition: all var(--r); }
.timeline-v-item:hover .timeline-v-dot { background: var(--g1); color: #fff; border-color: transparent; box-shadow: var(--cyber-glow); }

.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.status-dot.green { background: var(--ok); box-shadow: 0 0 8px rgba(16,185,129,.5); }
.status-dot.yellow { background: var(--wr); box-shadow: 0 0 8px rgba(245,158,11,.5); }
.status-dot.red { background: var(--er); box-shadow: 0 0 8px rgba(239,68,68,.5); }

.kbd { display: inline-flex; align-items: center; padding: .125rem .5rem; border-radius: .375rem; background: var(--bg2); border: 1px solid var(--bdl); font-family: var(--mono); font-size: .75rem; color: var(--t2); }

.team-card { background: var(--bgC); border: 1px solid var(--bd); border-radius: var(--radius-md); padding: 2rem; text-align: center; transition: all var(--r); backdrop-filter: blur(8px); position: relative; overflow: hidden; }
.team-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: 0; transition: opacity var(--r); }
.team-card:hover::before { opacity: 1; }
.team-card:nth-child(1)::before { background: var(--g1); }
.team-card:nth-child(2)::before { background: var(--g2); }
.team-card:nth-child(3)::before { background: var(--g3); }
.team-card:nth-child(4)::before { background: var(--g5); }
.team-card:nth-child(5)::before { background: var(--g7); }
.team-card:nth-child(6)::before { background: var(--g9); }
.team-card:hover { border-color: rgba(99,102,241,.25); transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.team-avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--g1); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; font-size: 2rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.team-name { font-size: 1.125rem; font-weight: 700; margin-bottom: .25rem; }
.team-role { font-size: .6875rem; color: var(--pri-l); margin-bottom: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.team-bio { font-size: .8125rem; color: var(--tm); line-height: 1.6; }

.status-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.status-item { background: var(--bgC); border: 1px solid var(--bd); border-radius: var(--radius-sm); padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem; transition: all var(--r); }
.status-item:hover { border-color: rgba(99,102,241,.3); transform: translateX(2px); }
.status-item-icon { width: 36px; height: 36px; border-radius: .625rem; display: flex; align-items: center; justify-content: center; font-size: .875rem; }

.uptime-bar { display: flex; gap: 2px; margin-top: 1.5rem; border-radius: var(--radius-sm); overflow: hidden; }
.uptime-day { flex: 1; height: 32px; position: relative; background: var(--ok); opacity: .7; transition: opacity var(--r); }
.uptime-day:hover { opacity: 1; }
.uptime-day.degraded { background: var(--wr); }
.uptime-day.outage { background: var(--er); }
.uptime-day::after { content: attr(data-tip); position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); padding: .25rem .5rem; background: var(--bg2); border: 1px solid var(--bd); border-radius: .25rem; font-size: .625rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
.uptime-day:hover::after { opacity: 1; }

.doc-card { background: var(--bgC); border: 1px solid var(--bd); border-radius: var(--radius-sm); padding: 1.25rem 1.5rem; display: flex; gap: 1rem; align-items: start; transition: all var(--r); cursor: pointer; }
.doc-card:hover { border-color: var(--pri); transform: translateX(4px); box-shadow: 0 0 12px rgba(99,102,241,.15); }
.doc-card-icon { width: 36px; height: 36px; border-radius: .625rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

@media (max-width: 968px) {
  .status-bar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .status-bar { grid-template-columns: 1fr; }
  .feature-icon-row { gap: .75rem; }
  .feature-icon-item { width: 48px; height: 48px; font-size: 1rem; }
}