:root {
    --bg-primary:   #0a0e17;
    --bg-secondary: #0d1220;
    --bg-tertiary:  #111827;
    --bg-card:      #0f1629;
    --accent:        #00ff88;
    --accent-dim:    rgba(0,255,136,.15);
    --accent-glow:   rgba(0,255,136,.30);
    --accent-cyan:   #00d4ff;
    --accent-cyan-dim: rgba(0,212,255,.15);
    --accent-purple: #a855f7;
    --accent-purple-dim: rgba(168,85,247,.15);
    --accent-yellow: #fbbf24;
    --text-primary:  #e2e8f0;
    --text-secondary:#94a3b8;
    --text-muted:    #8b9bb4;
    --border-primary:#1e293b;
    --border-accent: rgba(0,255,136,.22);
    --border-hover:  rgba(0,255,136,.50);
    --font-main: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --font-mono: 'JetBrains Mono',monospace;
    --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;
    --transition-fast:.15s ease;
    --transition-normal:.3s cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-main);line-height:1.6;overflow-x:hidden}

/* Cursor */
.custom-cursor{width:20px;height:20px;border:2px solid var(--accent);border-radius:50%;position:fixed;pointer-events:none;z-index:9999;transition:transform .1s ease,border-color .2s ease,width .2s ease,height .2s ease}
.cursor-dot{width:6px;height:6px;background:var(--accent);border-radius:50%;position:fixed;pointer-events:none;z-index:9999;box-shadow:0 0 10px var(--accent);transition:transform .06s ease}
.custom-cursor.hovered{width:40px;height:40px;border-color:var(--accent-cyan);background:rgba(0,212,255,.05)}
#scrollProgress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-cyan));z-index:10001;width:0%;transition:width .1s linear}
#matrixCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0.08;
}
@media (max-width: 768px) {
    #matrixCanvas { opacity: 0.035 !important; }
}

/* Picture elements act as transparent wrappers for flex/grid parents */
picture {
    display: contents;
}

/* ============================
   NEON PRELOADER
   ============================ */
.preloader {
    position: fixed;
    inset: 0;
    background: #020408;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20000;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    overflow: hidden;
}
.preloader.hidden,
.preloader-skipped .preloader,
.preloader-skipped #preloader {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
    pointer-events: none !important;
}

/* Circuit grid canvas */
.preloader-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0.35;
}

/* Center content */
.preloader-inner {
    position: relative; z-index: 2;
    display: flex; flex-direction: column;
    align-items: center;
}

/* --- Rings --- */
/* --- Rings --- */
.preloader-rings {
    position: relative;
    width: 210px; height: 210px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 2rem;
}
.ring {
    position: absolute; border-radius: 50%;
    border: 2px solid transparent;
}
.ring-1 {
    width: 210px; height: 210px;
    border-top-color: #00ff88;
    border-right-color: rgba(0,255,136,0.10);
    box-shadow: 0 0 8px rgba(0,255,136,0.18), inset 0 0 8px rgba(0,255,136,0.02);
    animation: spin-cw 4.2s linear infinite;
}
.ring-2 {
    width: 165px; height: 165px;
    border-bottom-color: #00d4ff;
    border-left-color: rgba(0,212,255,0.10);
    box-shadow: 0 0 8px rgba(0,212,255,0.18), inset 0 0 8px rgba(0,212,255,0.02);
    animation: spin-ccw 3.0s linear infinite;
}
.ring-3 {
    width: 122px; height: 122px;
    border-top-color: #a855f7;
    border-right-color: rgba(168,85,247,0.10);
    box-shadow: 0 0 6px rgba(168,85,247,0.20);
    animation: spin-cw 2.0s linear infinite;
}
@keyframes spin-cw  { to { transform: rotate(360deg); } }
@keyframes spin-ccw { to { transform: rotate(-360deg); } }

/* Scan beam */
.preloader-scan {
    position: absolute;
    width: 190px; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,255,136,0.7), transparent);
    box-shadow: 0 0 8px rgba(0,255,136,0.3);
    animation: scan-beam 3.5s ease-in-out infinite;
    border-radius: 2px; z-index: 3;
}
@keyframes scan-beam {
    0%   { transform: translateY(-86px) scaleX(0.3); opacity: 0; }
    20%  { opacity: 1; transform: translateY(-65px) scaleX(1); }
    80%  { opacity: 1; transform: translateY(65px) scaleX(1); }
    100% { transform: translateY(86px) scaleX(0.3); opacity: 0; }
}

/* Core logo image inside rings - Dead-Centered & Clean Glow */
.preloader-core {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Outer wrapper handles un-clipped drop shadows and scaling animation */
.preloader-logo-wrap {
    width: 105px;
    height: 105px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter:
        drop-shadow(0 0 12px rgba(0, 255, 136, 0.9))
        drop-shadow(0 0 26px rgba(0, 212, 255, 0.6));
    animation: logo-breathe 4s ease-in-out infinite;
    transform-origin: center center;
}

/* Inner image handles smooth circular clipping & color inversion */
.preloader-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: screen;
    clip-path: circle(46% at 50% 50%);
    filter: invert(1) hue-rotate(180deg);
}

/* Breathing pulse while loading */
@keyframes logo-breathe {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.8))
                drop-shadow(0 0 22px rgba(0, 212, 255, 0.5));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(0, 255, 136, 1))
                drop-shadow(0 0 40px rgba(0, 212, 255, 0.8));
        transform: scale(1.07);
    }
}

/* UNLOCK animation — triggered by adding .unlocked class via JS at 100% */
.preloader-logo-wrap.unlocked {
    animation: unlock-burst 1.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}
@keyframes unlock-burst {
    0%   {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.8))
                drop-shadow(0 0 22px rgba(0, 212, 255, 0.5));
    }
    /* Shackle-open jolt — quick upward nudge */
    20%  {
        transform: scale(0.92) translateY(-6px) rotate(-3deg);
        filter: drop-shadow(0 0 30px rgba(0, 255, 136, 1))
                drop-shadow(0 0 60px rgba(0, 255, 136, 0.9));
    }
    /* Big burst flash */
    40%  {
        transform: scale(1.35) translateY(0px) rotate(2deg);
        filter: drop-shadow(0 0 45px rgba(0, 255, 136, 1))
                drop-shadow(0 0 85px rgba(0, 255, 136, 1))
                drop-shadow(0 0 20px #ffffff);
    }
    /* Settle back */
    65%  {
        transform: scale(0.97) rotate(-1deg);
        filter: drop-shadow(0 0 22px rgba(0, 212, 255, 0.9))
                drop-shadow(0 0 45px rgba(0, 255, 136, 0.7));
    }
    100% {
        transform: scale(1.08) rotate(0deg);
        filter: drop-shadow(0 0 18px rgba(0, 212, 255, 0.85))
                drop-shadow(0 0 35px rgba(0, 255, 136, 0.65));
    }
}

/* Label */
.preloader-label {
    font-family: var(--font-mono);
    font-size: 0.68rem; font-weight: 700;
    color: #00ff88;
    letter-spacing: 0.22em; text-transform: uppercase;
    text-shadow: 0 0 4px rgba(0,255,136,0.4);
    margin-bottom: 1.25rem; opacity: 0.85;
}

/* Progress bar */
.preloader-bar {
    width: 280px; height: 4px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    margin-bottom: 0.85rem;
    position: relative;
    border: 1px solid rgba(0,255,136,0.12);
    overflow: visible;
}
.preloader-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #00ff88, #00d4ff);
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(0,255,136,0.8), 0 0 24px rgba(0,212,255,0.4);
    transition: width 0.12s ease;
    position: relative;
}
.preloader-fill::after {
    content: '';
    position: absolute; right: -3px; top: 50%;
    transform: translateY(-50%);
    width: 8px; height: 8px; border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 10px #00ff88, 0 0 22px rgba(0,255,136,0.8);
}
.preloader-bar-glow {
    position: absolute; inset: -5px; border-radius: 6px;
    box-shadow: 0 0 18px rgba(0,255,136,0.08);
    pointer-events: none;
}

/* Status row */
.preloader-status-row { display: flex; align-items: center; gap: 0.35rem; }
.preloader-text {
    font-family: var(--font-mono);
    font-size: 0.72rem; color: rgba(0,255,136,0.65);
    letter-spacing: 0.08em;
}
.preloader-dots span {
    font-family: var(--font-mono);
    color: #00ff88; font-size: 1rem;
    animation: dot-blink 1.2s infinite;
}
.preloader-dots span:nth-child(2) { animation-delay: 0.2s; }
.preloader-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-blink {
    0%, 80%, 100% { opacity: 0; }
    40%            { opacity: 1; text-shadow: 0 0 8px #00ff88; }
}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem;position:relative;z-index:2}
.section{padding:6rem 0;position:relative}
.section-header{margin-bottom:3.5rem;text-align:center}
.section-tag{font-family:var(--font-mono);font-size:.85rem;color:var(--accent);display:block;margin-bottom:.5rem;letter-spacing:.1em}
.section-title{font-size:2.25rem;font-weight:800;color:var(--text-primary);margin-bottom:.75rem}
.highlight{color:var(--accent);text-shadow:0 0 16px rgba(0,255,136,0.35)}
.section-line{width:60px;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-cyan));margin:0 auto 1rem;border-radius:2px}
.section-subtitle{font-size:1rem;color:var(--text-secondary);max-width:640px;margin:0 auto}

/* ==========================================================
   FUTURISTIC HUD NAVBAR & LOGO SYSTEM
   ========================================================== */
.navbar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 1rem 1.25rem 0.5rem;
    pointer-events: none;
    transition: padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.navbar {
    pointer-events: auto;
    max-width: 1360px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(14, 21, 37, 0.78) 0%, rgba(8, 13, 23, 0.88) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 255, 136, 0.12);
    border-radius: 20px;
    padding: 0.55rem 1.1rem;
    box-shadow:
        0 20px 45px -12px rgba(0, 0, 0, 0.8),
        0 0 18px -10px rgba(0, 255, 136, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 212, 255, 0.06);
    position: relative;
    overflow: visible;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cyber ambient scanline along top edge */
.navbar::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent-cyan), transparent);
    opacity: 0.3;
    filter: blur(1px);
    transition: all 0.4s ease;
}

.navbar.scrolled {
    background: linear-gradient(135deg, rgba(10, 15, 28, 0.92) 0%, rgba(6, 10, 18, 0.95) 100%);
    border-color: rgba(0, 255, 136, 0.18);
    box-shadow:
        0 24px 50px -10px rgba(0, 0, 0, 0.9),
        0 0 22px -8px rgba(0, 255, 136, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    padding: 0.45rem 1rem;
    transform: translateY(-2px);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

/* ---- LOGO SYSTEM ---- */
.nav-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-logo-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    padding: 0.25rem 0.4rem;
    border-radius: 12px;
    transition: transform 0.25s ease;
}

.nav-logo-link:hover {
    transform: scale(1.02);
}

.nav-logo-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 10px;
    background: rgba(0, 255, 136, 0.04);
}

.nav-logo-img {
    height: 44px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    filter:
        invert(1)
        hue-rotate(175deg)
        saturate(1.6)
        brightness(1.1)
        drop-shadow(0 0 5px rgba(0, 212, 255, 0.45))
        drop-shadow(0 0 10px rgba(0, 255, 136, 0.22));
    transition: all 0.35s ease;
    display: block;
}

.nav-logo-link:hover .nav-logo-img {
    filter:
        invert(1)
        hue-rotate(175deg)
        saturate(2.0)
        brightness(1.2)
        drop-shadow(0 0 8px rgba(0, 255, 136, 0.65))
        drop-shadow(0 0 16px rgba(0, 212, 255, 0.35));
    transform: scale(1.04);
}

.nav-logo-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.logo-text-main {
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    line-height: 1.1;
    white-space: nowrap;
}

.logo-text-accent {
    color: var(--accent);
    text-shadow: 0 0 6px rgba(0,255,136,0.25);
}

.logo-text-status {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--accent-cyan);
    letter-spacing: 0.16em;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.status-pulse-dot {
    width: 5px;
    height: 5px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 5px var(--accent);
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 5px var(--accent); }
    50%      { opacity: 0.35; transform: scale(0.85); box-shadow: 0 0 2px var(--accent); }
}

/* ---- ARTICLE / BLOG PAGE LOGO ---- */
.blog-page-logo-wrap {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 85px;
}
.blog-nav-logo-img {
    height: 80px;
    max-height: 80px;
    width: auto;
    max-width: 360px;
    object-fit: contain;
    filter:
        invert(1)
        hue-rotate(175deg)
        saturate(1.6)
        brightness(1.15)
        drop-shadow(0 0 10px rgba(0, 212, 255, 0.75))
        drop-shadow(0 0 24px rgba(0, 255, 136, 0.4));
    transition: filter 0.35s ease, transform 0.35s ease;
}
.blog-nav-logo-img:hover {
    filter:
        invert(1)
        hue-rotate(175deg)
        saturate(2.2)
        brightness(1.3)
        drop-shadow(0 0 16px rgba(0, 255, 136, 0.9))
        drop-shadow(0 0 32px rgba(0, 212, 255, 0.6));
    transform: scale(1.05);
}

/* ---- ARTICLE CONTENT LOGO ---- */
.blog-article-logo-img {
    height: 60px;
    width: auto;
    max-width: 250px;
    object-fit: contain;
    filter:
        invert(1)
        hue-rotate(175deg)
        saturate(1.6)
        brightness(1.1)
        drop-shadow(0 0 10px rgba(0, 212, 255, 0.75))
        drop-shadow(0 0 20px rgba(0, 255, 136, 0.4));
    margin-bottom: 1rem;
    display: inline-block;
}

/* ---- FOOTER LOGO ---- */
.footer-logo-img {
    height: 80px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
    display: block;
    margin: 0 auto 1.25rem;
    filter:
        invert(1)
        hue-rotate(175deg)
        saturate(1.6)
        brightness(1.15)
        drop-shadow(0 0 12px rgba(0, 212, 255, 0.75))
        drop-shadow(0 0 28px rgba(0, 255, 136, 0.45));
    transition: filter 0.35s ease, transform 0.35s ease;
}
.footer-logo-img:hover {
    filter:
        invert(1)
        hue-rotate(175deg)
        saturate(2.2)
        brightness(1.3)
        drop-shadow(0 0 20px rgba(0, 255, 136, 0.95))
        drop-shadow(0 0 40px rgba(0, 212, 255, 0.65));
    transform: scale(1.05);
}

/* ---- NAV MENU PILLS ---- */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(8, 12, 22, 0.55);
    padding: 0.25rem 0.35rem;
    border-radius: 30px;
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.85rem;
    border-radius: 20px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    border: 1px solid transparent;
}

.nav-link-num {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    transition: color 0.25s ease;
    opacity: 0.75;
}

.nav-link:hover {
    color: #ffffff;
    background: rgba(0, 255, 136, 0.07);
    border-color: rgba(0, 255, 136, 0.25);
    box-shadow: 0 0 16px rgba(0, 255, 136, 0.12);
}

.nav-link:hover .nav-link-num {
    color: var(--accent-cyan);
    opacity: 1;
}

.nav-link.active {
    color: var(--accent);
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.10) 0%, rgba(0, 212, 255, 0.05) 100%);
    border-color: rgba(0, 255, 136, 0.30);
    box-shadow:
        0 0 12px rgba(0, 255, 136, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.30);
}

.nav-link.active .nav-link-num {
    color: var(--accent-cyan);
    font-weight: 700;
    opacity: 1;
}

.nav-link-glow {
    position: absolute;
    bottom: 3px;
    left: 20%;
    right: 20%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.nav-link.active .nav-link-glow {
    opacity: 1;
}

/* ---- NAV ACTIONS (CTA & HAMBURGER) ---- */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.nav-cta-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.48rem 1.05rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: #050d18;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-cyan) 100%);
    border-radius: 20px;
    border: none;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.20);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.nav-cta-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 0 18px rgba(0, 255, 136, 0.40), 0 0 28px rgba(0, 212, 255, 0.18);
    filter: brightness(1.1);
}

.cta-pulse-ring {
    position: absolute;
    inset: -3px;
    border-radius: 24px;
    border: 1px solid var(--accent);
    opacity: 0;
    pointer-events: none;
    animation: ctaRingPulse 2.5s ease-out infinite;
}

@keyframes ctaRingPulse {
    0%   { transform: scale(0.95); opacity: 0.8; }
    50%  { transform: scale(1.2); opacity: 0; }
    100% { transform: scale(1.2); opacity: 0; }
}

/* ---- HAMBURGER ICON ---- */
.hamburger {
    display: none;
    background: rgba(14, 21, 37, 0.8);
    border: 1px solid rgba(0, 255, 136, 0.25);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    transition: all 0.3s ease;
}

.hamburger:hover {
    border-color: var(--accent);
    box-shadow: 0 0 16px var(--accent-dim);
}

.ham-line {
    width: 18px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hamburger.active {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 18px var(--accent-cyan-dim);
}

.hamburger.active .line-1 {
    transform: translateY(7px) rotate(45deg);
    background: var(--accent-cyan);
}

.hamburger.active .line-2 {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.active .line-3 {
    transform: translateY(-7px) rotate(-45deg);
    background: var(--accent-cyan);
}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1.6rem;font-size:.9rem;font-weight:600;border-radius:var(--radius-md);text-decoration:none;cursor:pointer;transition:all var(--transition-normal);border:none;font-family:var(--font-main)}
.btn-primary{background:linear-gradient(135deg,var(--accent) 0%,#00c868 100%);color:#041009;box-shadow:0 4px 20px var(--accent-dim)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--accent-glow);filter:brightness(1.1)}
.btn-cyan{background:linear-gradient(135deg,var(--accent-cyan) 0%,#0284c7 100%);color:#041009;box-shadow:0 4px 20px var(--accent-cyan-dim)}
.btn-cyan:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,212,255,.45);filter:brightness(1.1)}
.btn-secondary{background:transparent;color:var(--text-primary);border:1px solid var(--border-primary)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);background:rgba(0,255,136,.05);transform:translateY(-2px)}
.btn-sm{padding:.48rem 1.15rem;font-size:.82rem;border-radius:var(--radius-sm);gap:.45rem}
.btn-full{width:100%;justify-content:center}

/* Hero */
.hero{min-height:100vh;padding-top:8rem;padding-bottom:4rem;display:flex;align-items:center;position:relative;overflow:hidden}

.hero-content{max-width:800px;margin:0 auto;text-align:center;position:relative;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.75rem;color:var(--accent);background:rgba(0,255,136,.06);border:1px solid rgba(0,255,136,0.15);padding:.4rem 1rem;border-radius:20px;margin-bottom:1.5rem;letter-spacing:.08em}
.badge-dot{width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 5px var(--accent)}
.hero-title{font-size:3.5rem;font-weight:900;line-height:1.1;margin-bottom:1rem}
.greeting{display:block;font-size:1.5rem;font-weight:400;color:var(--text-secondary);margin-bottom:.25rem}
.name-highlight{background:linear-gradient(135deg,#fff 0%,var(--text-primary) 50%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-role{font-family:var(--font-mono);font-size:1.4rem;color:var(--accent-cyan);margin-bottom:1.5rem;height:2.2rem;display:flex;align-items:center;justify-content:center}
.cursor-blink{animation:blink 1s step-end infinite;color:var(--accent)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hero-desc{font-size:1.1rem;color:var(--text-secondary);line-height:1.7;margin-bottom:2rem;max-width:680px;margin-left:auto;margin-right:auto}
.hero-cta{display:flex;gap:1rem;justify-content:center;margin-bottom:3rem;flex-wrap:wrap}
.hero-terminal{background:#080c14;border:1px solid var(--border-primary);border-radius:var(--radius-md);overflow:hidden;text-align:left;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.terminal-header{background:#0e1422;padding:.65rem 1rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-primary)}
.terminal-dots{display:flex;align-items:center;gap:.5rem}
.terminal-dot{width:10px;height:10px;border-radius:50%}
.terminal-dot.red{background:#ff5f56}.terminal-dot.yellow{background:#ffbd2e}.terminal-dot.green{background:#27c93f}
.terminal-title{font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);letter-spacing:0.04em}
.terminal-live{font-family:var(--font-mono);font-size:.65rem;color:var(--accent);display:flex;align-items:center;gap:.35rem;font-weight:700}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse-dot 2s infinite}
.terminal-body{padding:1rem 1.25rem;font-family:var(--font-mono);font-size:.78rem;line-height:1.8}
.terminal-line{display:block}
.t-prompt{color:var(--accent-purple);font-weight:bold}.t-cmd{color:var(--text-primary)}
.t-out{display:block;margin-left:1.2rem}
.t-out.green{color:var(--accent)}.t-out.cyan{color:var(--accent-cyan)}.t-out.accent{color:var(--accent-yellow);font-weight:bold}

.threat-feed-container{display:flex;flex-direction:column;gap:.35rem;margin:.35rem 0 .5rem 1.2rem}
.threat-news-line{display:flex;align-items:center;gap:.6rem;padding:.3rem .6rem;background:rgba(239,68,68,.06);border-left:2px solid #ef4444;border-radius:0 6px 6px 0;transition:all .35s ease}
.threat-news-line.danger{background:rgba(239,68,68,.06);border-left-color:#ef4444}
.threat-news-line.warning{background:rgba(251,191,36,.06);border-left-color:#fbbf24}
.threat-news-line.blocked{background:rgba(0,255,136,.06);border-left-color:var(--accent)}
.threat-news-line.intel{background:rgba(0,212,255,.06);border-left-color:var(--accent-cyan)}

.threat-badge-pill{font-family:var(--font-mono);font-size:.62rem;font-weight:800;letter-spacing:.08em;padding:.15rem .45rem;border-radius:4px;background:rgba(239,68,68,.22);color:#f87171;border:1px solid rgba(239,68,68,.4);box-shadow:0 0 10px rgba(239,68,68,.25);white-space:nowrap;flex-shrink:0;transition:all .3s ease}
.threat-badge-pill.warning{background:rgba(251,191,36,.2);color:#fbbf24;border-color:rgba(251,191,36,.4);box-shadow:0 0 10px rgba(251,191,36,.25)}
.threat-badge-pill.blocked{background:rgba(0,255,136,.16);color:var(--accent);border-color:rgba(0,255,136,.4);box-shadow:0 0 10px rgba(0,255,136,.25)}
.threat-badge-pill.intel{background:rgba(0,212,255,.16);color:var(--accent-cyan);border-color:rgba(0,212,255,.4);box-shadow:0 0 10px rgba(0,212,255,.25)}
.threat-text{font-family:var(--font-mono);font-size:.75rem;color:var(--text-primary);line-height:1.4;transition:opacity .25s ease,transform .25s ease}
.hero-floating-badges{position:absolute;inset:0;pointer-events:none;z-index:1}
.float-badge{position:absolute;font-family:var(--font-mono);font-size:.75rem;font-weight:700;padding:.5rem 1rem;background:rgba(15,22,41,.75);border:1px solid var(--border-primary);border-radius:20px;color:var(--accent);backdrop-filter:blur(8px);box-shadow:0 10px 25px rgba(0,0,0,.4);animation:float-anim 12s ease-in-out infinite alternate}
.fb1{top:25%;left:8%;animation-delay:0s;color:var(--accent-cyan);border-color:var(--accent-cyan-dim)}
.fb2{top:60%;left:5%;animation-delay:2.5s}
.fb3{top:30%;right:8%;animation-delay:5s;color:var(--accent-purple);border-color:var(--accent-purple-dim)}
.fb4{top:65%;right:6%;animation-delay:7.5s;color:var(--accent-yellow)}
@keyframes float-anim{0%{transform:translateY(0) rotate(0deg)}100%{transform:translateY(-16px) rotate(2deg)}}
.hero-scroll-hint{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted);z-index:2}
.scroll-line{width:1px;height:30px;background:linear-gradient(180deg,var(--accent) 0%,transparent 100%);animation:scroll-anim 3.5s infinite}
@keyframes scroll-anim{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* About */
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:center}
.about-intro{font-size:1.5rem;font-weight:700;color:var(--accent);margin-bottom:1rem}
.about-text p{color:var(--text-secondary);margin-bottom:1.2rem;line-height:1.7}
.about-stats{display:flex;gap:2rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border-primary)}
.stat-item{display:flex;flex-direction:column}
.stat-num{font-size:2.2rem;font-weight:900;font-family:var(--font-mono);line-height:1}
.stat-label{font-size:.8rem;color:var(--text-muted);margin-top:.3rem}
/* ---- 3D Interactive Flip Card (About Section) ---- */
.about-flip-card-container {
    perspective: 1200px;
    width: 100%;
    max-width: 440px;
    min-height: 480px;
    margin: 0 auto;
}

.about-flip-card {
    width: 100%;
    min-height: 480px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    border-radius: var(--radius-lg);
}

.about-flip-card.flipped {
    transform: rotateY(180deg);
}

.about-card-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: linear-gradient(145deg, rgba(13, 22, 38, 0.95), rgba(6, 11, 20, 0.98));
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.85), 0 0 24px rgba(0, 255, 136, 0.14);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.about-flip-card:hover .about-card-face {
    border-color: var(--accent);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 212, 255, 0.25);
}

/* Front Face: Photo & Biometrics */
.about-card-front {
    z-index: 2;
    transform: rotateY(0deg);
    justify-content: space-between;
}

.photo-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.biometric-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(0, 255, 136, 0.08);
    border: 1px solid var(--border-accent);
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--accent);
    letter-spacing: 0.06em;
    font-weight: 700;
}
.bio-pulse-dot {
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent);
    animation: statusPulse 1.5s infinite ease-in-out;
}
.bio-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
}

.photo-frame-wrap {
    position: relative;
    width: 100%;
    max-width: 280px;
    height: 270px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(0, 212, 255, 0.4);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 212, 255, 0.25);
    background: #000;
}
.about-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.5s ease;
}
.about-flip-card:hover .about-portrait-img {
    transform: scale(1.04);
}
.photo-scan-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 255, 136, 0.08) 50%, transparent 100%);
    pointer-events: none;
    animation: scanVertical 4s infinite linear;
}
@keyframes scanVertical {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

.photo-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
}
.photo-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}
.photo-role {
    font-size: 0.78rem;
    color: var(--accent-cyan);
    font-family: var(--font-mono);
    margin: 0.15rem 0;
}
.flip-hint-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.35);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--accent-cyan);
    font-weight: 700;
    letter-spacing: 0.04em;
    animation: pulseGlow 2.5s infinite ease-in-out;
}
.flip-hint-pill .flip-icon {
    font-size: 1rem;
    transition: transform 0.4s ease;
}
.about-flip-card:hover .flip-hint-pill .flip-icon {
    transform: rotate(180deg);
}
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(0, 212, 255, 0.2); }
    50% { box-shadow: 0 0 15px rgba(0, 212, 255, 0.5); }
}

/* Back Face: Technical Details */
.about-card-back {
    transform: rotateY(180deg);
    justify-content: space-between;
}
.about-card-header {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 1.1rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--border-primary);
}
.profile-avatar {
    width: 60px;
    height: 60px;
    position: relative;
    border-radius: 50%;
    flex-shrink: 0;
}
.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    border: 2px solid var(--border-accent);
}
.avatar-ring {
    position: absolute;
    top: -4px; left: -4px; right: -4px; bottom: -4px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--accent-glow);
    animation: spin-ring 14s linear infinite;
}
@keyframes spin-ring { to { transform: rotate(360deg); } }

.profile-info h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.profile-info p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}
.location-tag {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.about-details {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 1.1rem;
}
.detail-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.78rem;
}
.detail-label { color: var(--text-muted); }
.detail-val { color: var(--text-primary); font-weight: 600; }
.detail-val.highlight { color: var(--accent); text-shadow: 0 0 8px rgba(0, 255, 136, 0.4); }

.cert-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}
.cert-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
    background: rgba(0, 255, 136, 0.08);
    border: 1px solid var(--border-accent);
    color: var(--accent);
}
.flip-back-prompt {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--accent-cyan);
    padding: 0.4rem;
    border: 1px dashed rgba(0, 212, 255, 0.3);
    border-radius: 8px;
    background: rgba(0, 212, 255, 0.05);
}

/* ===== SKILLS — filters (rack styles at end of file) ===== */
.skill-filters{display:flex;justify-content:center;gap:.75rem;margin-bottom:2.5rem;flex-wrap:wrap}
.filter-btn{background:var(--bg-card);border:1px solid var(--border-primary);color:var(--text-secondary);padding:.55rem 1.25rem;font-family:var(--font-mono);font-size:.78rem;border-radius:20px;cursor:pointer;letter-spacing:.04em;transition:all var(--transition-normal)}
.filter-btn:hover,.filter-btn.active{background:rgba(0,255,136,.1);border-color:var(--accent);color:var(--accent);box-shadow:0 0 18px var(--accent-dim)}





.skill-icon-wrap{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;background:rgba(0,255,136,.08);border:1px solid var(--accent-dim);color:var(--accent);transition:all .3s ease;flex-shrink:0}
.skill-icon-wrap.cyan{background:rgba(0,212,255,.08);border-color:var(--accent-cyan-dim);color:var(--accent-cyan)}
.skill-icon-wrap.blue{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.3);color:#3b82f6}
.skill-icon-wrap.amber{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.3);color:var(--accent-yellow)}
.skill-icon-wrap.purple{background:rgba(168,85,247,.08);border-color:var(--accent-purple-dim);color:var(--accent-purple)}
.rack-blade.is-out .skill-icon-wrap{transform:scale(1.12) rotate(-5deg);box-shadow:0 0 20px currentColor}

.skill-category-tag{font-family:var(--font-mono);font-size:.62rem;font-weight:800;padding:.2rem .55rem;border-radius:20px;letter-spacing:.06em;background:rgba(0,255,136,.1);color:var(--accent);border:1px solid var(--accent-dim)}
.skill-category-tag.cyan{background:rgba(0,212,255,.1);color:var(--accent-cyan);border-color:var(--accent-cyan-dim)}
.skill-category-tag.blue{background:rgba(59,130,246,.1);color:#3b82f6;border-color:rgba(59,130,246,.3)}
.skill-category-tag.amber{background:rgba(251,191,36,.1);color:var(--accent-yellow);border-color:rgba(251,191,36,.3)}
.skill-category-tag.purple{background:rgba(168,85,247,.1);color:var(--accent-purple);border-color:var(--accent-purple-dim)}

.skill-name{font-size:1rem;font-weight:700;color:var(--text-primary);line-height:1.2;transition:color .2s ease}
.skill-desc{font-size:.78rem;color:var(--text-secondary);line-height:1.5}

.skill-pct{color:var(--accent);font-weight:700}

.skill-tags{display:flex;gap:.35rem;flex-wrap:wrap}
.skill-tags span{font-family:var(--font-mono);font-size:.6rem;color:var(--accent-cyan);background:rgba(0,212,255,.06);border:1px solid var(--accent-cyan-dim);padding:.15rem .45rem;border-radius:4px}

/* Tools */
.tools-section{background:var(--bg-card);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:1.5rem;overflow:hidden}
.tools-title{font-size:1rem;font-weight:700;color:var(--text-primary);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono)}
.tools-marquee{display:flex;overflow:hidden;user-select:none}
.marquee-track{display:flex;gap:1rem;white-space:nowrap;animation:marquee 25s linear infinite}
.tools-marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tool-tag{font-family:var(--font-mono);font-size:.8rem;color:var(--text-secondary);background:var(--bg-tertiary);border:1px solid var(--border-primary);padding:.4rem .9rem;border-radius:20px;display:inline-block;transition:all var(--transition-fast)}
.tool-tag:hover{border-color:var(--accent);color:var(--accent)}

/* ==========================================================================
   MODERN INTERACTIVE CAREER LOG & DOSSIER SUITE
   ========================================================================== */
.experience-section {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}

.experience-section .section-subtitle {
    max-width: 680px;
    margin: 0.75rem auto 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.6;
}

/* 1. Career HUD Command Bar */
.career-hud-bar {
    background: linear-gradient(135deg, rgba(15, 22, 41, 0.85) 0%, rgba(10, 14, 23, 0.92) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    margin-bottom: 2.25rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.career-hud-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent-cyan), transparent);
}

/* Executive Telemetry Metrics */
.career-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.career-metric-card {
    background: rgba(17, 24, 39, 0.6);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 1rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    transition: all var(--transition-normal);
}

.career-metric-card:hover {
    border-color: var(--border-accent);
    background: rgba(0, 255, 136, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.metric-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid var(--border-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
}

.career-metric-card:nth-child(2) .metric-icon-wrap {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.3);
    color: var(--accent-cyan);
}

.career-metric-card:nth-child(3) .metric-icon-wrap {
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.3);
    color: var(--accent-purple);
}

.career-metric-card:nth-child(4) .metric-icon-wrap {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
    color: var(--accent-yellow);
}

.metric-data {
    display: flex;
    flex-direction: column;
}

.career-metric-num {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.career-metric-lbl {
    font-size: 0.72rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.2rem;
}

/* Controls: Filters & View Switcher */
.career-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.career-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 0.25rem;
}

.career-filter-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    padding: 0.45rem 0.85rem;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: all var(--transition-fast);
}

.career-filter-btn .filter-badge {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
}

.career-filter-btn:hover {
    border-color: var(--border-accent);
    color: var(--text-primary);
}

.career-filter-btn.active {
    background: rgba(0, 255, 136, 0.12);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 12px var(--accent-dim);
}

.career-filter-btn.active .filter-badge {
    background: var(--accent);
    color: #040810;
    font-weight: 800;
}

/* View Mode Segmented Control */
.career-view-toggle {
    display: flex;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 30px;
    padding: 3px;
    gap: 4px;
}

.view-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.4rem 0.9rem;
    border-radius: 25px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all var(--transition-fast);
}

.view-toggle-btn:hover {
    color: var(--text-primary);
}

.view-toggle-btn.active {
    background: var(--accent);
    color: #040810;
    font-weight: 700;
    box-shadow: 0 0 14px var(--accent-glow);
}

/* Tag Alert Banner */
.career-tag-alert {
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: var(--radius-md);
    padding: 0.65rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: alertSlideDown 0.3s ease;
}

@keyframes alertSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.tag-alert-content {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--accent-cyan);
}

.tag-alert-clear {
    background: transparent;
    border: 1px solid rgba(0, 212, 255, 0.4);
    color: var(--accent-cyan);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding: 0.25rem 0.7rem;
    border-radius: 15px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tag-alert-clear:hover {
    background: var(--accent-cyan);
    color: #040810;
}

/* 2. Interactive Console / Dossier Layout */
.career-console-deck {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 2rem;
    align-items: start;
    transition: opacity 0.3s ease;
}

/* Left Stepper Navigation */
.career-nav-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: sticky;
    top: 90px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.nav-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.08em;
}

.panel-tag {
    color: var(--accent);
    background: rgba(0, 255, 136, 0.1);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}

.career-role-tab {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 1rem 1.15rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
}

.career-role-tab .tab-indicator {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition: all var(--transition-fast);
}

.career-role-tab .tab-index {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-muted);
    transition: color var(--transition-fast);
    line-height: 1;
}

.career-role-tab .tab-info {
    flex: 1;
    min-width: 0;
}

.career-role-tab .tab-role-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    margin-bottom: 0.2rem;
}

.career-role-tab .tab-company-name {
    font-size: 0.76rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.45rem;
}

.career-role-tab .tab-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.career-role-tab .tab-period {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
}

.career-role-tab .tab-status-pill {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.career-role-tab .tab-status-pill.active-mission {
    background: rgba(0, 255, 136, 0.12);
    color: var(--accent);
    border: 1px solid var(--border-accent);
}

.pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: statusPulse 1.8s infinite;
}

.career-role-tab .tab-arrow {
    color: var(--text-muted);
    opacity: 0.4;
    transition: all var(--transition-fast);
}

.career-role-tab:hover {
    border-color: var(--border-accent);
    transform: translateX(4px);
    background: rgba(17, 24, 39, 0.9);
}

.career-role-tab:hover .tab-index {
    color: var(--accent);
}

.career-role-tab:hover .tab-arrow {
    opacity: 1;
    color: var(--accent);
    transform: translateX(2px);
}

.career-role-tab.active {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(13, 20, 36, 0.95) 100%);
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(0, 255, 136, 0.12), inset 0 0 15px rgba(0, 255, 136, 0.04);
}

.career-role-tab.active .tab-indicator {
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
}

.career-role-tab.active .tab-index {
    color: var(--accent);
}

.career-role-tab.active .tab-arrow {
    opacity: 1;
    color: var(--accent);
}

.career-role-tab.is-dimmed {
    opacity: 0.28;
    filter: grayscale(0.85);
    pointer-events: none;
}

.career-nav-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.career-nav-hint kbd {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    font-size: 0.65rem;
}

/* Right Dossier Screen */
.career-dossier-screen {
    position: relative;
    min-height: 520px;
}

.career-dossier-panel {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.career-dossier-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: cyberDossierIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cyberDossierIn {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.99);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Dossier Header Card */
.dossier-header-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.dossier-header-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-cyan));
}

.dossier-sys-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

.dossier-sys-id {
    color: var(--accent);
    letter-spacing: 0.08em;
    font-weight: 700;
}

.dossier-status-live {
    background: rgba(0, 255, 136, 0.1);
    color: var(--accent);
    border: 1px solid var(--border-accent);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 700;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.dossier-status-live.completed {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    border-color: rgba(255, 255, 255, 0.12);
}

.beacon-pulse {
    width: 7px;
    height: 7px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent);
    animation: statusPulse 1.8s infinite;
}

.dossier-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}

.dossier-role-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 0.45rem;
}

.dossier-company-line {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.company-name {
    font-weight: 700;
    color: var(--accent-cyan);
}

.company-location {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
}

.dossier-period-badge {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 0.6rem 1rem;
    text-align: right;
}

.period-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    margin-bottom: 0.2rem;
}

.period-val {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Dossier Telemetry Mini Grid */
.dossier-telemetry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}

.telemetry-box {
    background: var(--bg-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
}

.telemetry-lbl {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-bottom: 0.35rem;
}

.telemetry-val {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.telemetry-val.highlight-green { color: var(--accent); }
.telemetry-val.highlight-cyan { color: var(--accent-cyan); }
.telemetry-val.highlight-purple { color: var(--accent-purple); }
.telemetry-val.highlight-yellow { color: var(--accent-yellow); }

/* Dossier Body Card */
.dossier-body-card {
    background: var(--bg-card);
    border-left: 1px solid var(--border-primary);
    border-right: 1px solid var(--border-primary);
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    padding: 2rem;
}

.dossier-section-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    margin-bottom: 1.25rem;
}

.dossier-section-title svg {
    color: var(--accent);
}

.dossier-task-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.dossier-task-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    line-height: 1.6;
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.task-badge {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.task-badge.ztna { background: rgba(0, 255, 136, 0.12); color: var(--accent); border: 1px solid var(--border-accent); }
.task-badge.sase { background: rgba(0, 212, 255, 0.12); color: var(--accent-cyan); border: 1px solid rgba(0, 212, 255, 0.3); }
.task-badge.policy { background: rgba(168, 85, 247, 0.12); color: var(--accent-purple); border: 1px solid rgba(168, 85, 247, 0.3); }
.task-badge.ngfw { background: rgba(251, 191, 36, 0.12); color: var(--accent-yellow); border: 1px solid rgba(251, 191, 36, 0.3); }
.task-badge.perimeter { background: rgba(59, 130, 246, 0.12); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.task-badge.routing { background: rgba(34, 197, 94, 0.12); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); }
.task-badge.diagnostics { background: rgba(236, 72, 153, 0.12); color: #f472b6; border: 1px solid rgba(236, 72, 153, 0.3); }
.task-badge.audit { background: rgba(148, 163, 184, 0.12); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.3); }

.task-desc {
    flex: 1;
    color: var(--text-secondary);
}

/* Dossier Tech Tags */
.dossier-tech-section {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tech-title {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    margin-bottom: 0.85rem;
}

.dossier-tech-tags,
.timeline-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tech-tag {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tech-tag:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.08);
    transform: translateY(-1px);
}

.tech-tag.is-highlighted {
    background: rgba(0, 255, 136, 0.2) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    box-shadow: 0 0 12px var(--accent-glow) !important;
    transform: scale(1.05);
    font-weight: 700;
}

/* Dossier Footer Navigation */
.dossier-footer-nav {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    padding: 1.25rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.dossier-nav-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    padding: 0.5rem 1.15rem;
    border-radius: 25px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all var(--transition-fast);
}

.dossier-nav-btn:hover:not(:disabled) {
    background: rgba(0, 255, 136, 0.1);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 12px var(--accent-dim);
}

.dossier-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.dossier-counter {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.08em;
}

/* 3. Chronological Stream View (Toggleable) */
.career-timeline-stream {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem 0;
    transition: opacity 0.3s ease;
}

.career-timeline-stream.hidden {
    display: none !important;
}

.career-console-deck.hidden {
    display: none !important;
}

.timeline-stream-rail {
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: 28px;
    width: 2px;
    background: var(--border-primary);
    z-index: 1;
}

.stream-progress-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-cyan) 60%, var(--accent-purple) 100%);
    box-shadow: 0 0 10px var(--accent-dim);
}

.timeline-stream-list {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.stream-card {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
    position: relative;
}

.stream-card.is-dimmed {
    opacity: 0.25;
    filter: grayscale(0.85);
}

.stream-node {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 2px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    transition: all var(--transition-normal);
}

.stream-node .node-dot {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-muted);
}

.stream-node.active {
    border-color: var(--accent);
    box-shadow: 0 0 18px var(--accent-dim);
}

.stream-node.active .node-dot {
    color: var(--accent);
}

.node-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid var(--accent);
    opacity: 0.4;
    animation: statusPulse 2s infinite;
}

.stream-content {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.stream-content:hover {
    border-color: var(--border-accent);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

.stream-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.stream-date {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.stream-role {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.stream-company {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.timeline-badge {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.timeline-badge.current {
    background: rgba(0, 255, 136, 0.12);
    color: var(--accent);
    border-color: var(--border-accent);
}

.timeline-list {
    list-style: none;
    margin-bottom: 1.5rem;
}

.timeline-list li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--text-secondary);
    font-size: 0.92rem;
    margin-bottom: 0.6rem;
    line-height: 1.6;
}

.timeline-list li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-family: var(--font-mono);
    font-weight: bold;
}

/* 4. Responsive Queries */
@media (max-width: 1080px) {
    .career-console-deck {
        grid-template-columns: 290px 1fr;
        gap: 1.5rem;
    }
    .career-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dossier-telemetry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 860px) {
    .career-console-deck {
        grid-template-columns: 1fr;
    }
    .career-nav-panel {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        padding: 0.85rem;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
    }
    .nav-panel-title,
    .career-nav-hint {
        display: none;
    }
    .career-role-tab {
        flex-shrink: 0;
        width: 260px;
        max-width: 80vw;
    }
    .career-controls-row {
        flex-direction: column;
        align-items: stretch;
    }
    .career-view-toggle {
        align-self: flex-start;
    }
}

@media (max-width: 600px) {
    .career-metrics-grid {
        grid-template-columns: 1fr;
    }
    .dossier-header-card,
    .dossier-body-card,
    .dossier-footer-nav {
        padding: 1.25rem;
    }
    .dossier-telemetry-grid {
        grid-template-columns: 1fr;
    }
    .dossier-role-title {
        font-size: 1.25rem;
    }
    .stream-card {
        gap: 1rem;
    }
    .stream-node {
        width: 44px;
        height: 44px;
    }
    .timeline-stream-rail {
        left: 21px;
    }
}

/* Projects */
.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.project-card{background:var(--bg-card);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:1.75rem;display:flex;flex-direction:column;justify-content:space-between;transition:all var(--transition-normal)}
.project-card:hover{border-color:var(--border-accent);box-shadow:0 15px 35px rgba(0,0,0,.5);transform:translateY(-3px)}
.project-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}
.project-icon{width:48px;height:48px;background:rgba(0,255,136,.05);border:1px solid var(--border-accent);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}
.project-status{font-family:var(--font-mono);font-size:.65rem;font-weight:700;padding:.25rem .6rem;border-radius:20px;background:rgba(0,255,136,.1);color:var(--accent);border:1px solid var(--border-accent)}
.project-status.cyan{color:var(--accent-cyan);border-color:var(--accent-cyan-dim);background:rgba(0,212,255,.1)}
.project-status.purple{color:var(--accent-purple);border-color:var(--accent-purple-dim);background:rgba(168,85,247,.1)}
.project-status.yellow{color:var(--accent-yellow);border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.1)}
.project-card h3{font-size:1.2rem;font-weight:700;color:var(--text-primary);margin-bottom:.75rem}
.project-card p{font-size:.9rem;color:var(--text-secondary);margin-bottom:1.5rem;line-height:1.6}
.project-tech{display:flex;gap:.5rem;flex-wrap:wrap}
.project-tech span{font-family:var(--font-mono);font-size:.72rem;color:var(--accent-cyan);background:rgba(0,212,255,.05);padding:.25rem .6rem;border-radius:4px;border:1px solid var(--accent-cyan-dim)}

/* Certs */
.certs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.cert-card{background:var(--bg-card);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:1.75rem;text-align:center;transition:all var(--transition-normal);position:relative;overflow:hidden}
.cert-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .3s ease}
.cert-card:hover{border-color:var(--border-accent);transform:translateY(-5px);box-shadow:0 15px 35px rgba(0,0,0,.4)}
.cert-card:hover::before{opacity:1}
.cert-icon{width:64px;height:64px;margin:0 auto 1.25rem;background:rgba(0,255,136,.05);border:1px solid var(--border-accent);border-radius:50%;display:flex;align-items:center;justify-content:center}
.cert-info h3{font-size:1.3rem;font-weight:800;color:var(--text-primary);margin-bottom:.4rem;font-family:var(--font-mono)}
.cert-info p{font-size:.85rem;color:var(--text-secondary);margin-bottom:.8rem;line-height:1.5}
.cert-issuer{font-family:var(--font-mono);font-size:.75rem;color:var(--accent);display:block;margin-bottom:1.25rem}
.cert-badge{font-family:var(--font-mono);font-size:.65rem;font-weight:700;padding:.3rem .8rem;border-radius:20px;display:inline-block;background:rgba(0,255,136,.1);color:var(--accent);border:1px solid var(--border-accent)}
.cert-badge.cyan{color:var(--accent-cyan);border-color:var(--accent-cyan-dim);background:rgba(0,212,255,.1)}
.cert-badge.purple{color:var(--accent-purple);border-color:var(--accent-purple-dim);background:rgba(168,85,247,.1)}

/* Direct Contact Section (Transparent Glassmorphism) */
/* Compact Cyber Contact Card with Action Dock */
.contact-compact-wrap{max-width:960px;margin:0 auto;position:relative}
.contact-compact-card{background:linear-gradient(180deg,rgba(10,18,32,.72) 0%,rgba(6,12,22,.88) 100%);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(0,255,136,.25);border-radius:var(--radius-xl);padding:3.5rem 3rem;text-align:center;position:relative;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.6),0 0 45px rgba(0,255,136,.12),inset 0 1px 0 rgba(255,255,255,.08);transition:all var(--transition-normal)}
.contact-compact-card:hover{border-color:var(--accent);box-shadow:0 30px 75px rgba(0,0,0,.7),0 0 60px rgba(0,255,136,.25);transform:translateY(-3px)}
.card-cyber-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(0,255,136,.09) 1px,transparent 1px);background-size:24px 24px;pointer-events:none;opacity:.65;mask-image:radial-gradient(circle at center,black 40%,transparent 80%);-webkit-mask-image:radial-gradient(circle at center,black 40%,transparent 80%)}

.contact-card-header{position:relative;z-index:2;margin-bottom:2.25rem}
.contact-beacon{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.75rem;font-weight:700;color:var(--accent);background:rgba(0,255,136,.08);border:1px solid rgba(0,255,136,.28);padding:.4rem 1.15rem;border-radius:50px;margin-bottom:1.5rem;letter-spacing:.06em;box-shadow:0 0 15px rgba(0,255,136,.12)}
.beacon-dot{width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 8px var(--accent);animation:statusPulse 2s ease-in-out infinite}

.contact-avatar-wrap{position:relative;width:82px;height:82px;margin:0 auto 1.4rem;display:flex;align-items:center;justify-content:center}
.contact-avatar-img{width:74px;height:74px;border-radius:50%;object-fit:cover;background:#060c18;border:2px solid rgba(0,255,136,.55);box-shadow:0 0 25px rgba(0,255,136,.35);position:relative;z-index:2;transition:all .3s ease}
.contact-compact-card:hover .contact-avatar-img{transform:scale(1.05);border-color:var(--accent);box-shadow:0 0 35px rgba(0,255,136,.55)}
.avatar-ring-pulse{position:absolute;inset:-4px;border-radius:50%;border:1px dashed rgba(0,212,255,.6);animation:spin-cw 12s linear infinite;z-index:1;pointer-events:none}

.contact-compact-title{font-size:2.2rem;font-weight:800;color:var(--text-primary);margin-bottom:.75rem;letter-spacing:-.02em}
.contact-compact-desc{color:var(--text-secondary);font-size:1.02rem;max-width:650px;margin:0 auto;line-height:1.7}

/* Action Dock Grid */
.contact-action-dock{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;width:100%;max-width:860px;margin:0 auto 2.5rem;text-align:left}
.dock-channel{background:rgba(4,11,22,.65);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(0,255,136,.26);border-radius:var(--radius-lg);padding:1.4rem 1.5rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.25rem;box-shadow:inset 0 2px 10px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.3);transition:all var(--transition-normal);position:relative;overflow:hidden}
.dock-channel:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:inset 0 2px 10px rgba(0,0,0,.4),0 15px 35px rgba(0,255,136,.2)}
.dock-channel.linkedin-dock{border-color:rgba(0,212,255,.26)}
.dock-channel.linkedin-dock:hover{border-color:var(--accent-cyan);box-shadow:inset 0 2px 10px rgba(0,0,0,.4),0 15px 35px rgba(0,212,255,.25)}

.dock-channel-left{display:flex;align-items:center;gap:1rem;min-width:0}
.dock-channel-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s ease}
.dock-channel-icon.email-icon{background:rgba(0,255,136,.12);border:1px solid rgba(0,255,136,.35);color:var(--accent);box-shadow:0 0 15px rgba(0,255,136,.12)}
.dock-channel-icon.linkedin-icon{background:rgba(0,212,255,.12);border:1px solid rgba(0,212,255,.35);color:var(--accent-cyan);box-shadow:0 0 15px rgba(0,212,255,.12)}
.dock-channel:hover .dock-channel-icon{transform:scale(1.08)}

.dock-channel-info{display:flex;flex-direction:column;gap:.2rem;min-width:0;overflow:hidden}
.dock-channel-tag{font-family:var(--font-mono);font-size:.65rem;font-weight:700;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
.dock-channel-tag.cyan{color:var(--accent-cyan)}
.dock-channel-val{font-family:var(--font-mono);font-size:1.05rem;font-weight:700;color:var(--text-primary);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--transition-fast)}
.dock-channel-val:hover{color:var(--accent);text-shadow:0 0 10px var(--accent-glow)}
.dock-channel-val.cyan-hover:hover{color:var(--accent-cyan);text-shadow:0 0 10px rgba(0,212,255,.5)}

.dock-channel-actions{display:flex;align-items:center;gap:.75rem;width:100%}
.dock-channel-actions .btn{flex:1;justify-content:center;font-weight:600;font-size:.82rem;padding:.55rem .9rem;letter-spacing:.01em}

/* Telemetry Badges */
.contact-telemetry{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem}
.telemetry-pill{display:flex;align-items:center;gap:.55rem;background:rgba(8,18,32,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(0,255,136,.18);padding:.55rem 1.15rem;border-radius:50px;color:var(--text-secondary);font-size:.85rem;font-family:var(--font-mono);transition:all .25s ease}
.telemetry-pill:hover{border-color:rgba(0,255,136,.45);color:var(--text-primary);transform:translateY(-1px)}
.telemetry-pill svg{color:var(--accent)}

@media (max-width: 840px) {
    .contact-compact-card{padding:2.5rem 1.5rem}
    .contact-compact-title{font-size:1.65rem}
    .contact-action-dock{grid-template-columns:1fr;gap:1.2rem}
    .dock-channel{padding:1.3rem 1.2rem}
    .dock-channel-val{font-size:.95rem}
}

/* Footer */
.footer{padding:3rem 0;border-top:1px solid var(--border-primary);background:#060911;text-align:center}
.footer-content{display:flex;flex-direction:column;align-items:center;gap:.75rem}
.footer-logo{font-family:var(--font-mono);font-size:1.2rem;font-weight:800;color:var(--text-primary)}
.footer-tagline{font-family:var(--font-mono);font-size:.8rem;color:var(--accent)}
.footer-copy{font-size:.8rem;color:var(--text-muted)}

/* Back to top */
.back-to-top{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;background:var(--bg-card);border:1px solid var(--border-accent);border-radius:50%;color:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transition:all var(--transition-normal);z-index:999}
.back-to-top.visible{opacity:1;visibility:visible}
.back-to-top:hover{background:var(--accent);color:#041009;box-shadow:0 0 20px var(--accent-glow);transform:translateY(-2px)}

/* Toast */
.toast{position:fixed;bottom:2rem;left:2rem;background:var(--bg-card);border:1px solid var(--accent);color:var(--accent);padding:.8rem 1.4rem;border-radius:var(--radius-md);font-family:var(--font-mono);font-size:.85rem;display:flex;align-items:center;gap:.6rem;box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 20px var(--accent-dim);transform:translateY(100px);opacity:0;transition:all .4s ease;z-index:10000}
.toast.show{transform:translateY(0);opacity:1}

/* Reveal / Tilt */
.reveal-up{opacity:0;transform:translateY(30px);transition:all .7s cubic-bezier(.16,1,.3,1)}
.reveal-up.active{opacity:1;transform:translateY(0)}
.tilt-card{transform-style:preserve-3d}

/* Responsive Rules */
@media (max-width: 1220px) {
    .nav-link-num { display: none; }
    .nav-menu { gap: 0.2rem; padding: 0.2rem 0.3rem; }
    .nav-link { padding: 0.4rem 0.65rem; font-size: 0.78rem; }
    .logo-text-status { font-size: 0.52rem; }
    .nav-cta-btn { padding: 0.42rem 0.85rem; font-size: 0.7rem; }
}

@media (max-width: 980px) {
    .navbar-wrapper { padding: 0.6rem 0.8rem 0; }
    .navbar { border-radius: 16px; padding: 0.45rem 0.8rem; }
    .nav-cta-btn { display: none; }
    .hamburger { display: flex; }

    .nav-menu {
        position: fixed;
        top: 74px;
        right: 14px;
        left: 14px;
        max-width: 480px;
        margin: 0 auto;
        background: linear-gradient(180deg, rgba(13, 20, 36, 0.97) 0%, rgba(7, 11, 20, 0.99) 100%);
        backdrop-filter: blur(25px) saturate(200%);
        -webkit-backdrop-filter: blur(25px) saturate(200%);
        border: 1px solid rgba(0, 255, 136, 0.3);
        border-radius: 18px;
        box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.95), 0 0 35px -5px rgba(0, 255, 136, 0.25);
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
        padding: 1.25rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-15px) scale(0.96);
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1001;
    }

    .nav-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .nav-link {
        padding: 0.75rem 1rem;
        border-radius: 12px;
        font-size: 0.92rem;
        justify-content: flex-start;
        border: 1px solid rgba(148, 163, 184, 0.08);
    }

    .nav-link-num {
        display: inline-block;
        color: var(--accent-cyan);
        font-size: 0.75rem;
    }

    .nav-link.active {
        background: rgba(0, 255, 136, 0.12);
        border-color: var(--accent);
    }

    .about-grid, .contact-grid { grid-template-columns: 1fr; }
    .projects-grid { grid-template-columns: 1fr; }
    .certs-grid { grid-template-columns: 1fr 1fr; }
    .hero-title { font-size: 2.5rem; }
    .float-badge { display: none; }
}

@media (max-width: 600px) {
    .certs-grid { grid-template-columns: 1fr; }
    .section { padding: 4rem 0; }
    .hero-title { font-size: 2rem; }
    .hero-cta { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
    .nav-logo-info { display: none; }
    .nav-logo-img { height: 38px; }
}


/* ---- Dual-Ring Cursor ---- */
.cursor-outer {
    width: 36px; height: 36px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    position: fixed; pointer-events: none; z-index: 9999;
    mix-blend-mode: difference;
    transition: transform 0.18s ease, width 0.22s ease, height 0.22s ease, border-color 0.22s ease;
}
.cursor-inner {
    width: 8px; height: 8px;
    background: var(--accent); border-radius: 50%;
    position: fixed; pointer-events: none; z-index: 9999;
    box-shadow: 0 0 12px var(--accent);
    transition: transform 0.06s ease;
}
.cursor-outer.hovered { width: 56px; height: 56px; border-color: var(--accent-cyan); }

/* ---- Terminal LIVE badge ---- */
.terminal-live {
    margin-left: auto;
    display: flex; align-items: center; gap: 5px;
    font-family: var(--font-mono); font-size: 0.65rem; font-weight: 800;
    color: var(--accent); letter-spacing: 0.08em;
}
.live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 8px var(--accent);
    animation: pulse-dot 1s infinite;
}

/* ---- Resume Button ---- */
.btn-resume {
    background: transparent;
    color: var(--accent-cyan);
    border: 1px solid var(--accent-cyan-dim);
    font-family: var(--font-main);
}
.btn-resume:hover {
    background: rgba(0,212,255,0.1);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(0,212,255,0.3);
    transform: translateY(-2px);
}

/* ---- Testimonials ---- */
.testimonials-wrapper {
    display: flex; align-items: center; gap: 1rem; position: relative;
}
.testimonials-track-wrap { flex: 1; overflow: hidden; border-radius: var(--radius-lg); }
.testimonials-track {
    display: flex; gap: 2rem;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.testi-card {
    min-width: 100%; background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg); padding: 2rem;
    display: flex; flex-direction: column; gap: 1.25rem;
    transition: border-color var(--transition-normal);
    box-sizing: border-box;
}
.testi-card:hover { border-color: var(--border-accent); }
.testi-stars { color: var(--accent-yellow); font-size: 1.1rem; letter-spacing: 3px; }
.testi-text { font-size: 1rem; color: var(--text-secondary); line-height: 1.7; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.testi-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border: 2px solid var(--accent-dim);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 0.85rem; font-weight: 800; color: var(--accent);
    flex-shrink: 0;
}
.testi-author strong { display: block; font-size: 0.95rem; color: var(--text-primary); margin-bottom: 0.2rem; }
.testi-author span { font-size: 0.8rem; color: var(--text-muted); font-family: var(--font-mono); }
.testi-chevron {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--bg-card); border: 1px solid var(--border-primary);
    color: var(--text-primary); font-size: 1.5rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-normal); flex-shrink: 0;
}
.testi-chevron:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 15px var(--accent-dim); }
.testi-dots {
    display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem;
}
.testi-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--border-primary); cursor: pointer;
    transition: all 0.3s ease;
}
.testi-dot.active { background: var(--accent); box-shadow: 0 0 8px var(--accent); width: 24px; border-radius: 4px; }

/* ---- Back to Top with ring progress ---- */
.back-to-top {
    position: fixed; bottom: 2rem; right: 2rem;
    width: 52px; height: 52px;
    background: var(--bg-card); border: none;
    border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: all var(--transition-normal); z-index: 999;
    padding: 0;
}
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { transform: translateY(-3px); box-shadow: 0 0 12px rgba(0,255,136,0.3); }
.btt-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.btt-track { stroke: var(--border-primary); }
.btt-progress { stroke: var(--accent); transition: stroke-dashoffset 0.1s linear; }
.btt-arrow { position: relative; z-index: 1; color: var(--accent); }

/* ---- Full-Page Fixed Particle Network Background ---- */
#particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    opacity: 0.80;
}
@media (max-width: 768px) {
    #particleCanvas { opacity: 0.35 !important; }
}

/* ---- Blog Section & Cards Grid ---- */
.blog-section {
    position: relative;
    z-index: 2;
}
.blog-filters {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}
.blog-filter-btn {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-secondary) !important;
    padding: 0.6rem 1.35rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    border-radius: 20px;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: all var(--transition-normal);
}
.blog-filter-btn:hover, .blog-filter-btn.active {
    background: rgba(0, 255, 136, 0.12) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    box-shadow: 0 0 20px var(--accent-glow);
}
.blog-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 1.75rem;
    width: 100%;
}
/* ---- Futuristic 3D Coverflow Blog Carousel ---- */
.blog-carousel-wrapper {
    position: relative;
    width: 100%;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    perspective: 1400px;
}

/* Carousel HUD Status Header */
.carousel-hud-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 0 0.5rem;
}
.intel-stream-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(8, 14, 26, 0.8);
    border: 1px solid rgba(0, 212, 255, 0.3);
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--accent-cyan);
    letter-spacing: 0.08em;
    backdrop-filter: blur(10px);
}
.stream-ping-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    animation: streamPulse 1.3s infinite ease-in-out;
}
@keyframes streamPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.7); }
}
.stream-freq-eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}
.eq-bar {
    width: 2.5px;
    background: var(--accent-cyan);
    border-radius: 1px;
    animation: eqBounce 1.2s infinite ease-in-out alternate;
}
.eq-bar.bar-1 { height: 4px; animation-delay: 0.1s; }
.eq-bar.bar-2 { height: 10px; animation-delay: 0.35s; }
.eq-bar.bar-3 { height: 7px; animation-delay: 0.2s; }
.eq-bar.bar-4 { height: 12px; animation-delay: 0.45s; }
@keyframes eqBounce {
    0% { height: 3px; }
    100% { height: 12px; }
}

.intel-counter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(8, 14, 26, 0.8);
    border: 1px solid var(--border-accent);
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}
.intel-counter-pill .counter-num {
    color: var(--accent);
    font-weight: 800;
    letter-spacing: 0.05em;
}

.blog-carousel-track-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2rem 0.5rem 2.2rem;
    perspective: 1200px;
}
.blog-carousel-track-container::-webkit-scrollbar {
    display: none;
}

.blog-carousel-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 2.2rem;
    width: max-content;
    align-items: center;
}

/* Card Styling & 3D Transitions */
.blog-carousel-track .blog-card {
    flex: 0 0 440px;
    width: 440px;
    scroll-snap-align: center;
    background: linear-gradient(145deg, rgba(13, 22, 38, 0.85), rgba(6, 11, 20, 0.92)) !important;
    border: 1px solid rgba(26, 42, 64, 0.85) !important;
    border-radius: 16px;
    padding: 2rem 1.9rem;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(14px);
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    transform: scale(0.92) translateZ(-25px);
    opacity: 0.65;
}

@media (max-width: 600px) {
    .blog-carousel-track .blog-card {
        flex: 0 0 88vw;
        width: 88vw;
    }
}

/* Active Highlighted 3D Card */
.blog-carousel-track .blog-card.active-card {
    border-color: rgba(0, 255, 136, 0.8) !important;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.85),
        0 0 35px rgba(0, 255, 136, 0.28),
        inset 0 0 20px rgba(0, 255, 136, 0.04) !important;
    transform: scale(1.04) translateZ(35px);
    opacity: 1;
    z-index: 5;
}

.blog-carousel-track .blog-card:hover {
    opacity: 1;
    border-color: var(--accent) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 212, 255, 0.35) !important;
    transform: scale(1.05) translateY(-6px) translateZ(40px);
}

/* Holographic Sheen & Scanline Laser */
.card-holo-sheen {
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: linear-gradient(135deg, transparent 40%, rgba(0, 255, 136, 0.08) 50%, rgba(0, 212, 255, 0.12) 55%, transparent 65%);
    pointer-events: none;
    transition: transform 0.8s ease;
    z-index: 1;
}
.blog-card:hover .card-holo-sheen,
.blog-card.active-card .card-holo-sheen {
    animation: holoSheen 4.5s infinite linear;
}
@keyframes holoSheen {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(50%) rotate(360deg); }
}

.card-scanline-beam {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent-cyan), transparent);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}
.blog-card.active-card .card-scanline-beam {
    opacity: 0.8;
    animation: scanlineSweep 3.5s infinite ease-in-out;
}
@keyframes scanlineSweep {
    0% { top: 0%; opacity: 0; }
    15% { opacity: 0.9; }
    85% { opacity: 0.9; }
    100% { top: 100%; opacity: 0; }
}

/* Corner Targeting Brackets */
.card-bracket {
    position: absolute;
    width: 10px;
    height: 10px;
    pointer-events: none;
    z-index: 3;
    transition: all 0.3s ease;
}
.card-bracket.top-left {
    top: 6px;
    left: 6px;
    border-top: 2px solid rgba(0, 212, 255, 0.4);
    border-left: 2px solid rgba(0, 212, 255, 0.4);
}
.card-bracket.top-right {
    top: 6px;
    right: 6px;
    border-top: 2px solid rgba(0, 212, 255, 0.4);
    border-right: 2px solid rgba(0, 212, 255, 0.4);
}
.card-bracket.bottom-left {
    bottom: 6px;
    left: 6px;
    border-bottom: 2px solid rgba(0, 212, 255, 0.4);
    border-left: 2px solid rgba(0, 212, 255, 0.4);
}
.card-bracket.bottom-right {
    bottom: 6px;
    right: 6px;
    border-bottom: 2px solid rgba(0, 212, 255, 0.4);
    border-right: 2px solid rgba(0, 212, 255, 0.4);
}
.blog-card.active-card .card-bracket,
.blog-card:hover .card-bracket {
    border-color: var(--accent) !important;
    width: 14px;
    height: 14px;
    box-shadow: 0 0 10px var(--accent-glow);
}

/* Nav Buttons */
.carousel-nav-btn {
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(8, 14, 26, 0.9);
    border: 1px solid var(--border-accent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(14px);
    transition: all 0.25s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 255, 136, 0.3);
}
.carousel-nav-btn.prev {
    left: -22px;
}
.carousel-nav-btn.next {
    right: -22px;
}
.carousel-nav-btn:hover {
    background: var(--accent);
    color: #041019;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.85);
    transform: translateY(-50%) scale(1.12);
}

@media (max-width: 768px) {
    .carousel-nav-btn.prev { left: 4px; }
    .carousel-nav-btn.next { right: 4px; }
}

/* Article Selector Bar */
.blog-selector-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    flex-wrap: wrap;
}

.blog-selector-tabs {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.blog-selector-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.95rem;
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}
.blog-selector-pill .pill-idx {
    color: var(--accent-cyan);
    font-weight: 800;
    font-size: 0.72rem;
}
.blog-selector-pill:hover,
.blog-selector-pill.active {
    background: rgba(0, 255, 136, 0.12);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.25);
    transform: translateY(-2px);
}
.blog-selector-pill.active .pill-idx {
    color: var(--accent);
}

.blog-autoplay-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    border-radius: 20px;
    background: rgba(8, 13, 23, 0.9);
    border: 1px solid rgba(0, 212, 255, 0.35);
    color: var(--accent-cyan);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}
.blog-autoplay-btn .autoplay-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan);
    animation: pulseLaser 1.4s infinite;
}
.blog-autoplay-btn.paused {
    border-color: rgba(148, 163, 184, 0.25);
    color: var(--text-muted);
}
.blog-autoplay-btn.paused .autoplay-pulse {
    background: var(--text-muted);
    box-shadow: none;
    animation: none;
}

.blog-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--radius-lg);
    padding: 1.85rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    /* anchor-tag reset */
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.blog-card:hover {
    border-color: var(--border-accent) !important;
    box-shadow: 0 20px 45px rgba(0,0,0,0.6), 0 0 30px var(--accent-dim);
    transform: translateY(-6px);
}
.blog-card.hidden {
    display: none !important;
}
.footer-logo-img {
    mix-blend-mode: screen;
}
.blog-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.1rem;
}
.blog-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    letter-spacing: 0.06em;
    display: inline-block;
}
.blog-tag.cyan {
    background: rgba(0, 212, 255, 0.12);
    color: var(--accent-cyan);
    border: 1px solid var(--accent-cyan-dim);
}
.blog-tag.green {
    background: rgba(0, 255, 136, 0.12);
    color: var(--accent);
    border: 1px solid var(--border-accent);
}
.blog-tag.purple {
    background: rgba(168, 85, 247, 0.12);
    color: var(--accent-purple);
    border: 1px solid var(--accent-purple-dim);
}
.blog-readtime {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}
.blog-card-title {
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 0.85rem;
    transition: color var(--transition-fast);
}
.blog-card:hover .blog-card-title {
    color: var(--accent);
}
.blog-card-excerpt {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 1.5rem;
}
.blog-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border-primary);
}
.blog-author {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}
.blog-author-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    background: rgba(10, 18, 38, 0.95);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.25);
    flex-shrink: 0;
}
.blog-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.blog-read-btn {
    background: transparent;
    border: none;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--transition-fast);
}
.blog-card:hover .blog-read-btn {
    transform: translateX(5px);
}

/* ---- Reader Modal ---- */
.blog-modal {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 25000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    padding: 2rem 1rem;
}
.blog-modal.open {
    opacity: 1 !important;
    visibility: visible !important;
}
.blog-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(6, 9, 17, 0.88);
    backdrop-filter: blur(14px);
}
.blog-modal-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 820px;
    max-height: 85vh;
    background: #0d1322 !important;
    border: 1px solid var(--border-hover) !important;
    border-radius: var(--radius-xl);
    box-shadow: 0 30px 90px rgba(0,0,0,0.9), 0 0 50px var(--accent-glow);
    overflow-y: auto;
    padding: 2.75rem;
    transform: translateY(30px) scale(0.96);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.blog-modal.open .blog-modal-container {
    transform: translateY(0) scale(1);
}
.blog-modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}
.blog-modal-close:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: rotate(90deg);
}
.blog-modal-header {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-primary);
    padding-bottom: 1.5rem;
}
.blog-modal-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0.85rem 0;
    line-height: 1.35;
}
.blog-modal-author {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1rem;
}
.blog-modal-author strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.95rem;
}
.blog-modal-author span {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.blog-share-bar {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #080c16;
    border: 1px solid var(--border-primary);
    padding: 0.65rem 1.2rem;
    border-radius: var(--radius-md);
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.share-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.06em;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border-primary);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}
.share-copy:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0, 255, 136, 0.1);
}
.share-linkedin:hover {
    border-color: #0a66c2;
    color: #0a66c2;
    background: rgba(10, 102, 194, 0.12);
}
.share-twitter:hover {
    border-color: #1da1f2;
    color: #1da1f2;
    background: rgba(29, 161, 242, 0.12);
}
.blog-modal-body {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.8;
}
.blog-modal-body h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 1.85rem 0 0.85rem;
}
.blog-modal-body p {
    margin-bottom: 1.25rem;
}
.blog-modal-body ul {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}
.blog-modal-body li {
    margin-bottom: 0.45rem;
}
.blog-modal-body code {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--accent);
    background: rgba(0, 255, 136, 0.1);
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
}
.blog-modal-body pre {
    background: #05080f;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.84rem;
    color: var(--accent-cyan);
    margin: 1.5rem 0;
    line-height: 1.65;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.6);
}
@media (max-width: 992px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
    .blog-grid { grid-template-columns: 1fr !important; }
    .blog-modal-container { padding: 1.5rem; }
}

/* Touch & Mobile Cursor Adjustments */
@media (hover: none) and (pointer: coarse) {
    .custom-cursor,
    .cursor-dot {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

#particleCanvas {
    touch-action: none;
    pointer-events: none;
}

/* ==========================================================
   HOLOGRAPHIC RACK — Technical Arsenal  (FUTURISTIC EDITION)
   Base styles below are the no-JS / mobile / reduced-motion
   layout: a plain stacked list of rack units, fully readable.
   The .is-3d class (added by script.js only when the viewport
   can take it) upgrades the same markup to the pinned 3D rack.

   CAREFUL: filter, backdrop-filter, opacity < 1, mask, overflow
   and mix-blend-mode all force transform-style:flat. They must
   never land on .rack-chassis / .rack-bays / .rack-bay, which
   carry the preserve-3d chain — put them on a pseudo-element
   or a leaf blade instead.
   ========================================================== */

/* ── Rack particle burst canvas ── */
#rackParticles {
    position: absolute; inset: 0; pointer-events: none; z-index: 10;
}

.rack-scroll {
    position: relative;
    margin-bottom: 2.5rem;
    --stage-accent: #00ff88;
    --rack-p: 0;
}
.rack-stage { position: relative; display: flex; align-items: center; justify-content: center; }
.rack-scene { position: relative; width: 100%; max-width: 820px; margin: 0 auto; }

.rack-chassis {
    --rack-yaw: -13deg;
    --rack-pitch: 4deg;
    --u-h: 46px;
    --u-h-open: 178px;
    --u-gap: 5px;
    position: relative;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(26,37,58,.72) 0%, rgba(9,14,25,.80) 55%, rgba(6,10,18,.88) 100%);
    border: 1px solid rgba(148,163,184,.16);
    border-radius: 14px;
    padding: .85rem;
    box-shadow:
        0 50px 95px -30px rgba(0,0,0,.95),
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -30px 50px -34px rgba(0,255,136,.14);
}

/* ── Neon pulse border on the chassis ── */
.rack-scroll.is-3d .rack-chassis {
    --u-h: clamp(32px, 4.4vh, 46px);
    --u-h-open: clamp(136px, 19vh, 178px);
    --u-gap: clamp(3px, .5vh, 5px);
    transform-style: preserve-3d;
    transform: rotateX(var(--rack-pitch)) rotateY(var(--rack-yaw));
    transition: transform .2s linear;
    animation: chassisBorderPulse 4s ease-in-out infinite;
}
@keyframes chassisBorderPulse {
    0%, 100% { border-color: rgba(148,163,184,.16); box-shadow: 0 50px 95px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -30px 50px -34px rgba(0,255,136,.14); }
    50%      { border-color: rgba(0,255,136,.25); box-shadow: 0 50px 95px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -30px 50px -34px rgba(0,255,136,.14), 0 0 24px -6px var(--stage-accent); }
}

/* Light behind the glass */
.rack-chassis::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    border-radius: inherit; transform: translateZ(-1px);
    background:
        radial-gradient(60% 45% at 18% 6%, rgba(0,212,255,.10), transparent 70%),
        radial-gradient(70% 50% at 60% 104%, var(--stage-accent), transparent 68%);
    opacity: .34;
    transition: opacity .5s ease;
}
/* Ambient light crossing the glass — with enhanced dual-sweep */
.rack-chassis::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    border-radius: inherit; transform: translateZ(1px);
    background:
        linear-gradient(102deg,
            transparent 40%, rgba(255,255,255,.05) 47%, rgba(255,255,255,.12) 50%,
            rgba(255,255,255,.05) 53%, transparent 60%),
        linear-gradient(258deg,
            transparent 38%, rgba(0,212,255,.04) 48%, rgba(0,212,255,.08) 50%,
            rgba(0,212,255,.04) 52%, transparent 62%);
    background-size: 300% 100%, 400% 100%; background-repeat: no-repeat;
    background-position: -50% 0, 150% 0;
}
.rack-scroll.is-3d .rack-chassis::after { animation: chassisSheenDual 10s ease-in-out infinite; }
@keyframes chassisSheenDual {
    0%, 100% { background-position: -60% 0, 160% 0 }
    50%      { background-position: 170% 0, -60% 0 }
}

/* ── Top plate: rack asset tag + status lamps ── */
.rack-topplate {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    position: relative; z-index: 2;
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em;
    color: var(--text-muted); padding: .1rem .3rem .65rem;
    border-bottom: 1px solid rgba(148,163,184,.12); margin-bottom: .7rem;
}
.rack-id { color: var(--text-secondary); font-weight: 700; }
.rack-site { color: var(--text-muted); }
.rack-lamps { display: flex; gap: .4rem; }
.lamp { width: 6px; height: 6px; border-radius: 50%; background: #1e293b; }
.lamp.pwr { background: var(--accent); box-shadow: 0 0 4px var(--accent); animation: lampBreath 3s ease-in-out infinite; }
.lamp.lnk { background: var(--accent-cyan); box-shadow: 0 0 4px var(--accent-cyan); animation: lampBlink 2.4s steps(1,end) infinite; }
.lamp.act { background: var(--accent-yellow); box-shadow: 0 0 4px var(--accent-yellow); animation: lampBlink 1.1s steps(1,end) .3s infinite; }
@keyframes lampBlink { 0%,58% { opacity: 1 } 59%,100% { opacity: .22 } }
@keyframes lampBreath {
    0%, 100% { box-shadow: 0 0 3px var(--accent); }
    50%      { box-shadow: 0 0 8px var(--accent); }
}

/* ── Mounting rails with enhanced breathing glow ── */
.rack-bays { display: flex; gap: .5rem; align-items: stretch; position: relative; z-index: 2; }
.rack-rail {
    flex: 0 0 15px; border-radius: 3px; position: relative; overflow: hidden;
    background: linear-gradient(90deg, rgba(10,16,28,.9), rgba(32,44,66,.85) 55%, rgba(10,16,28,.9));
    border: 1px solid rgba(148,163,184,.14);
}
.rack-rail::before {
    content: ''; position: absolute; inset: 3px 0;
    background: radial-gradient(circle at 50% 5px, #05080f 2.1px, transparent 2.6px) 0 0 / 100% 23px;
}
/* Dual-light rail travel — two beams chasing each other */
.rack-scroll.is-3d .rack-rail::after {
    content: ''; position: absolute; inset: 0; opacity: 0;
    background-image:
        linear-gradient(180deg, transparent, var(--stage-accent), transparent),
        linear-gradient(180deg, transparent, var(--accent-cyan), transparent);
    background-size: 100% 20%, 100% 14%; background-repeat: no-repeat;
    background-position: 0 -30%, 0 130%;
    filter: blur(2px);
    animation: railTravelDual 5.4s linear infinite;
}
.rack-scroll.is-3d .rack-rail:last-child::after { animation-delay: 2.7s; }
@keyframes railTravelDual {
    0%        { background-position: 0 -30%, 0 130%; opacity: 0 }
    10%       { opacity: .6 }
    50%       { background-position: 0 60%, 0 40%; }
    90%       { opacity: .6 }
    100%      { background-position: 0 130%, 0 -30%; opacity: 0 }
}

/* Bloom behind the active unit */
.rack-scroll.is-3d .rack-bays::after {
    content: ''; position: absolute; left: -4%; right: -4%; top: 0;
    height: var(--pulse-h, 46px);
    pointer-events: none;
    transform: translateZ(-8px) translateY(var(--pulse-y, 0px));
    background: radial-gradient(58% 130% at 50% 50%, var(--stage-accent), transparent 72%);
    opacity: .22; filter: blur(9px);
    transition: transform .55s cubic-bezier(.2,.9,.25,1), height .45s ease, opacity .4s ease;
}
.rack-bay { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--u-gap); }

/* Blanking panel — enhanced with animated dashed border */
.rack-blank {
    display: none; flex: 1 1 auto; min-height: 24px;
    align-items: center; justify-content: center;
    position: relative; z-index: 1;
    border: 1px dashed rgba(148,163,184,.16); border-radius: 6px;
    background: repeating-linear-gradient(90deg, rgba(10,17,32,.55) 0 3px, rgba(20,30,50,.45) 3px 6px);
    animation: blankPulse 6s ease-in-out infinite;
}
@keyframes blankPulse {
    0%, 100% { border-color: rgba(148,163,184,.10); }
    50%      { border-color: rgba(148,163,184,.22); }
}
.rack-blank span { font-family: var(--font-mono); font-size: .55rem; letter-spacing: .22em; color: #334155; }

/* ── A rack unit ── */
.rack-blade {
    --blade-accent: var(--accent);
    position: relative; cursor: pointer; outline: none;
    background: linear-gradient(180deg, rgba(26,37,58,.66) 0%, rgba(11,17,30,.74) 100%);
    border: 1px solid rgba(148,163,184,.13); border-radius: 7px;
    padding: .6rem .75rem;
    transition: border-color .3s ease, box-shadow .3s ease;
}
/* Glass highlight along the top edge — enhanced with shimmer */
.rack-blade::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255,255,255,.075), transparent 45%),
        linear-gradient(90deg, transparent, rgba(255,255,255,.03) 50%, transparent);
    background-size: 100% 100%, 200% 100%;
    background-position: 0 0, -200% 0;
}
.rack-scroll.is-3d .rack-blade:hover::before {
    animation: bladeShimmer 1.5s ease-out forwards;
}
@keyframes bladeShimmer {
    to { background-position: 0 0, 200% 0; }
}

/* One-shot holographic scan that sweeps the face as the unit comes forward */
.rack-blade::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    opacity: 0; background-repeat: no-repeat; background-size: 260% 100%; z-index: 2;
    background-image: linear-gradient(100deg,
        transparent 38%,
        rgba(0,255,136,.06) 42%,
        rgba(255,255,255,.18) 50%,
        rgba(0,212,255,.06) 58%,
        transparent 62%);
}
.rack-blade.is-out::after { animation: bladeScanHolo 1.2s ease-out .08s both; }
@keyframes bladeScanHolo {
    0%   { opacity: 0; background-position: -55% 0 }
    18%  { opacity: 1 }
    60%  { opacity: .7 }
    100% { opacity: 0; background-position: 160% 0 }
}
.rack-blade[data-color="cyan"]   { --blade-accent: var(--accent-cyan); }
.rack-blade[data-color="purple"] { --blade-accent: var(--accent-purple); }
.rack-blade[data-color="amber"]  { --blade-accent: var(--accent-yellow); }
.rack-blade[data-color="blue"]   { --blade-accent: #3b82f6; }
.rack-blade:hover { border-color: var(--blade-accent); box-shadow: 0 0 14px -4px var(--blade-accent); }
.rack-blade:focus-visible { border-color: var(--blade-accent); box-shadow: 0 0 0 2px rgba(0,255,136,.25); }
.rack-blade.is-filtered { display: none; }

/* ── Screw ear — now with animated gradient ── */
.blade-ear {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 58%; border-radius: 0 2px 2px 0; z-index: 3;
    background: linear-gradient(180deg, transparent, var(--blade-accent) 22%, var(--blade-accent) 78%, transparent);
    opacity: .32; transition: opacity .35s ease, box-shadow .35s ease;
}
.rack-blade.is-out .blade-ear {
    opacity: 1;
    box-shadow: 0 0 12px var(--blade-accent), 0 0 24px rgba(0,255,136,.15);
    animation: earPulse 2s ease-in-out infinite;
}
@keyframes earPulse {
    0%, 100% { box-shadow: 0 0 12px var(--blade-accent); }
    50%      { box-shadow: 0 0 20px var(--blade-accent), 0 0 36px var(--blade-accent); }
}

/* ── Unit face elements ── */
.blade-face { display: flex; align-items: center; gap: .7rem; position: relative; z-index: 1; }
.blade-u {
    flex: 0 0 26px; font-family: var(--font-mono); font-size: .6rem;
    letter-spacing: .08em; color: var(--text-muted);
}
.blade-led {
    flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
    background: #1f2937; transition: background .3s ease, box-shadow .3s ease;
}
.rack-blade.is-out .blade-led {
    background: var(--blade-accent);
    box-shadow: 0 0 9px var(--blade-accent);
    animation: ledBootEnhanced 1.3s ease-out both;
}
@keyframes ledBootEnhanced {
    0%   { background: #1f2937; box-shadow: none; transform: scale(1); }
    20%  { background: #ffffff; box-shadow: 0 0 22px #ffffff, 0 0 44px rgba(255,255,255,.4); transform: scale(1.6); }
    45%  { transform: scale(1); }
    100% { background: var(--blade-accent); box-shadow: 0 0 10px var(--blade-accent); transform: scale(1); }
}
.blade-name {
    flex: 1 1 auto; min-width: 0; font-size: .9rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .3s ease, text-shadow .3s ease;
}
.rack-blade.is-out .blade-name {
    color: var(--blade-accent);
    text-shadow: 0 0 8px var(--blade-accent);
}
.blade-cat { flex: 0 0 auto; }

/* ── Enhanced meter bar with animated gradient fill ── */
.blade-meter {
    flex: 0 0 90px; height: 7px; position: relative; overflow: hidden;
    border-radius: 2px; background: #0a1120; border: 1px solid #17203a;
}
.blade-meter-fill {
    display: block; height: 100%; width: 0; position: relative; overflow: hidden;
    background: linear-gradient(90deg, var(--blade-accent), rgba(255,255,255,.65), var(--blade-accent));
    background-size: 200% 100%;
    transition: width 1.1s cubic-bezier(.25,1,.5,1);
}
/* Animated gradient + traveling light while unit is out */
.rack-blade.is-out .blade-meter-fill {
    animation: meterGradientFlow 3s linear infinite;
}
@keyframes meterGradientFlow {
    0%   { background-position: 0% 0 }
    100% { background-position: 200% 0 }
}
.rack-blade.is-out .blade-meter-fill::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,.9) 50%, transparent 80%);
    animation: meterShineEnhanced 2s ease-in-out .8s infinite;
}
@keyframes meterShineEnhanced {
    0%        { transform: translateX(-120%); opacity: 0; }
    20%       { opacity: 1; }
    80%       { opacity: 1; }
    100%      { transform: translateX(260%); opacity: 0; }
}
/* Segmented overlay — gives it a digital look */
.blade-meter::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 4px, #0a1120 4px 5px);
}
.blade-pct {
    flex: 0 0 34px; text-align: right; font-family: var(--font-mono); font-size: .7rem;
    color: var(--blade-accent);
    transition: text-shadow .3s ease;
}
.rack-blade.is-out .blade-pct {
    text-shadow: 0 0 8px var(--blade-accent);
}

/* ── Unit detail, revealed when the unit slides out ── */
.blade-detail {
    display: flex; gap: .85rem; align-items: flex-start;
    padding: .75rem .1rem .15rem; position: relative; z-index: 1;
}
.blade-icon { flex: 0 0 auto; width: 40px; height: 40px; }
.blade-icon svg { width: 22px; height: 22px; }
.blade-detail-body { min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.blade-desc { font-size: .8rem; }

/* ── Holographic scanlines on the active blade ── */
.rack-blade.is-out .blade-detail::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
        repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 3px,
            rgba(0,255,136,.025) 3px,
            rgba(0,255,136,.025) 4px);
    opacity: 0;
    animation: holoScanIn .6s .4s ease-out forwards;
}
@keyframes holoScanIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* ── Readout strip — with glitch effect ── */
.rack-readout {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    position: relative; z-index: 2; overflow: hidden;
    margin-top: .7rem; padding: .5rem .7rem; border-radius: 6px;
    background: rgba(4,8,15,.76); border: 1px solid rgba(148,163,184,.14);
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em;
}
.rack-readout::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--stage-accent), var(--accent-cyan), var(--accent-purple));
    background-size: 200% 100%;
    transform-origin: 0 50%; transform: scaleX(var(--rack-p, 1));
    transition: transform .2s linear;
    animation: readoutGradient 5s linear infinite;
}

/* ==========================================================
   .is-3d — pinned 3D rack
   ========================================================== */
.rack-scroll.is-3d { margin-bottom: 0; }
.rack-scroll.is-3d .rack-stage {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    padding: 88px 0 24px;
}
/* Aurora behind the rack — enhanced with animated pulsing */
.rack-scroll.is-3d .rack-stage::before {
    content: ''; position: absolute; inset: -6% -14%; pointer-events: none; z-index: 0;
    background:
        radial-gradient(34% 40% at 28% 32%, var(--stage-accent), transparent 68%),
        radial-gradient(30% 34% at 74% 66%, var(--accent-cyan), transparent 70%),
        radial-gradient(46% 52% at 52% 50%, #1e293b, transparent 72%);
    opacity: .16; filter: blur(36px);
    transition: opacity .6s ease;
    animation: auroraPulse 8s ease-in-out infinite;
}
@keyframes auroraPulse {
    0%, 100% { opacity: .14; filter: blur(36px); }
    50%      { opacity: .22; filter: blur(42px); }
}

.rack-scroll.is-3d .rack-scene {
    perspective: 1500px;
    perspective-origin: 52% 42%;
    z-index: 1;
    transform: scale(var(--rack-fit, 1));
    transform-origin: 50% 50%;
}

/* ── Cyberpunk hex-grid floor pool ── */
.rack-scroll.is-3d .rack-scene::after {
    content: ''; position: absolute; left: -8%; right: -8%; top: 100%; height: 260px;
    pointer-events: none; transform-origin: 50% 0;
    transform: rotateX(75deg) translateZ(-12px);
    background:
        radial-gradient(44% 38% at 50% 2%, var(--stage-accent), transparent 66%),
        repeating-linear-gradient(0deg, transparent 0 1px, rgba(148,163,184,.06) 1px 2px, transparent 2px 32px),
        repeating-linear-gradient(60deg, transparent 0 1px, rgba(148,163,184,.05) 1px 2px, transparent 2px 32px),
        repeating-linear-gradient(120deg, transparent 0 1px, rgba(148,163,184,.05) 1px 2px, transparent 2px 32px);
    opacity: .35;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
    animation: floorGridPulse 6s ease-in-out infinite;
}
@keyframes floorGridPulse {
    0%, 100% { opacity: .3; }
    50%      { opacity: .42; }
}

.rack-scroll.is-3d .rack-bays,
.rack-scroll.is-3d .rack-bay { transform-style: preserve-3d; }

.rack-scroll.is-3d .rack-bay {
    height: calc((var(--n, 12) - 1) * (var(--u-h) + var(--u-gap)) + var(--u-h-open) + var(--u-gap) + 26px);
}
.rack-scroll.is-3d .rack-blank { display: flex; }

/* ── Seated units with wave depth ── */
.rack-scroll.is-3d .rack-blade {
    height: var(--u-h); flex: 0 0 auto; overflow: hidden;
    opacity: var(--op, .46);
    transform: translateZ(var(--dz, 0px)) rotateY(var(--ry, 0deg)) translateX(var(--dx, 0%));
    transition: transform .6s cubic-bezier(.2,.9,.25,1),
                height .5s cubic-bezier(.2,.9,.25,1),
                opacity .45s ease, border-color .4s ease,
                box-shadow .45s ease, background .45s ease;
}
/* Detail parts arrive in cascading sequence */
.rack-scroll.is-3d .rack-blade .blade-icon,
.rack-scroll.is-3d .rack-blade .blade-desc,
.rack-scroll.is-3d .rack-blade .blade-tags {
    opacity: 0; transform: translateY(10px) scale(.96);
    transition: opacity .45s ease, transform .55s cubic-bezier(.2,.9,.25,1);
}
.rack-scroll.is-3d .rack-blade.is-out .blade-icon,
.rack-scroll.is-3d .rack-blade.is-out .blade-desc,
.rack-scroll.is-3d .rack-blade.is-out .blade-tags { opacity: 1; transform: none; }
.rack-scroll.is-3d .rack-blade.is-out .blade-icon { transition-delay: .18s; }
.rack-scroll.is-3d .rack-blade.is-out .blade-desc { transition-delay: .28s; }
.rack-scroll.is-3d .rack-blade.is-out .blade-tags { transition-delay: .38s; }

/* ── The extended unit: enhanced eject with overshoot ── */
.rack-scroll.is-3d .rack-blade.is-out {
    height: var(--u-h-open); opacity: 1; flex: 0 0 auto;
    background: linear-gradient(180deg, rgba(33,47,73,.74) 0%, rgba(10,16,29,.84) 100%);
    border-color: var(--blade-accent);
    box-shadow:
        0 44px 74px -20px rgba(0,0,0,.95),
        0 0 20px -8px var(--blade-accent),
        inset 0 1px 0 rgba(255,255,255,.14);
    animation: bladeEjectFuturistic .9s cubic-bezier(.2,.86,.24,1) both;
}
@keyframes bladeEjectFuturistic {
    0%   { transform: translateZ(var(--dz, 0px)) rotateY(var(--ry, 0deg)) translateX(var(--dx, 0%)) }
    12%  { transform: translateZ(24px) rotateY(calc(var(--rack-yaw) * -.1)) translateX(.3%) }
    36%  { transform: translateZ(100px) rotateY(calc(var(--rack-yaw) * -.7)) translateX(2.2%) }
    56%  { transform: translateZ(168px) rotateY(calc(var(--rack-yaw) * -1.12)) translateX(4%) }
    76%  { transform: translateZ(132px) rotateY(calc(var(--rack-yaw) * -.96)) translateX(2.4%) }
    88%  { transform: translateZ(144px) rotateY(calc(var(--rack-yaw) * -1.02)) translateX(2.8%) }
    100% { transform: translateZ(140px) rotateY(calc(var(--rack-yaw) * -1))   translateX(2.6%) }
}
.rack-scroll.is-3d .rack-blade.is-near {
    border-color: rgba(148,163,184,.24);
    box-shadow: 0 0 12px -4px rgba(148,163,184,.08);
}

/* ── Chassis readout with glitch animation ── */
.rack-scroll.is-3d .rack-readout {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    position: relative; z-index: 2; overflow: hidden;
    margin-top: .7rem; padding: .5rem .7rem; border-radius: 6px;
    background: rgba(4,8,15,.76); border: 1px solid rgba(148,163,184,.14);
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em;
}
/* Hairline under the readout — now with gradient glow */
.rack-scroll.is-3d .rack-readout::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--stage-accent), var(--accent-cyan), var(--accent-purple));
    background-size: 200% 100%;
    transform-origin: 0 50%; transform: scaleX(var(--rack-p, 0));
    transition: transform .2s linear;
    animation: readoutGradient 5s linear infinite;
}
@keyframes readoutGradient {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}
.readout-label { color: var(--text-muted); flex: 0 0 auto; }
.readout-value {
    flex: 1 1 auto; text-align: center; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--stage-accent); text-shadow: 0 0 6px rgba(0,255,136,0.3);
    transition: color .4s ease, text-shadow .4s ease;
    animation: readoutGlitch 8s step-end infinite;
}
@keyframes readoutGlitch {
    0%, 2%     { transform: none; opacity: 1; }
    2.5%       { transform: translateX(-2px) skewX(-1deg); opacity: .85; }
    3%         { transform: translateX(2px) skewX(1deg); opacity: .9; }
    3.5%, 100% { transform: none; opacity: 1; }
}
.readout-count { flex: 0 0 auto; color: var(--text-secondary); }

/* position:sticky breaks if an ancestor is a scroll container. */
@supports (overflow-x: clip) { body { overflow-x: clip; } }

/* ── Mobile / Tablet Interactive Rack Accordion (< 900px) ── */
@media (max-width: 899px) {
    .rack-scroll {
        margin-bottom: 2rem;
    }
    .rack-stage {
        padding: 0;
    }
    .rack-scene {
        max-width: 100%;
    }
    .rack-chassis {
        transform: none !important;
        animation: chassisBorderPulse 4s ease-in-out infinite;
    }
    .rack-bay {
        height: auto !important;
        gap: 8px;
    }
    .rack-blade {
        height: 52px;
        overflow: hidden;
        opacity: 0.72;
        cursor: pointer;
        transition: all 0.35s cubic-bezier(0.2, 0.9, 0.25, 1);
        touch-action: manipulation;
    }
    .rack-blade .blade-detail {
        display: none;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .rack-blade.is-out {
        height: auto !important;
        min-height: 145px;
        opacity: 1;
        border-color: var(--blade-accent);
        box-shadow: 0 0 28px -4px var(--blade-accent), inset 0 1px 0 rgba(255,255,255,0.15);
        background: linear-gradient(180deg, rgba(33,47,73,0.88) 0%, rgba(10,16,29,0.96) 100%);
        transform: scale(1.015);
        z-index: 5;
    }
    .rack-blade.is-out .blade-detail {
        display: flex;
        opacity: 1;
        transform: none;
    }
    .rack-blade.is-near {
        opacity: 0.85;
        border-color: rgba(148,163,184,0.3);
    }
    .rack-readout {
        display: flex !important;
        margin-top: 1rem;
    }
}

/* ── Narrow screen layout ── */
@media (max-width: 640px) {
    .rack-chassis { padding: .6rem; }
    .rack-rail { flex: 0 0 8px; }
    .blade-face { flex-wrap: wrap; gap: .35rem .5rem; }
    .blade-name { flex: 1 1 100%; order: -1; white-space: normal; font-size: 0.82rem; }
    .blade-meter { flex: 1 1 auto; height: 6px; }
    .blade-detail { flex-direction: column; gap: .5rem; }
    .rack-topplate { font-size: .55rem; letter-spacing: .1em; }
    .rack-blade { height: 68px; }
    .rack-blade.is-out { height: auto !important; min-height: 180px; }
}

/* ── Accessibility: High-Visibility Focus State ── */
:focus-visible {
    outline: 2px solid #00ff88 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.45) !important;
}

/* ── Flip Card: Prevent Screen Reader Trapping on Hidden Face ── */
.about-flip-card:not(.flipped) .about-card-back {
    visibility: hidden;
    pointer-events: none;
}
.about-flip-card.flipped .about-card-front {
    visibility: hidden;
    pointer-events: none;
}
.about-flip-card.flipped .about-card-back {
    visibility: visible;
    pointer-events: auto;
}

/* ── Reduced motion: simplify animations across entire site ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
        scroll-behavior: auto !important;
    }
    .rack-scene, .rack-chassis, .rack-chassis::after, .rack-rail::after,
    .lamp, .blade-led, .blade-meter-fill, .blade-meter-fill::after,
    .rack-blade, .rack-blade::before, .rack-blade::after,
    .rack-readout::after, .readout-value, .rack-scene::after,
    .rack-stage::before, .blade-ear, .blade-detail::before, .rack-blank,
    .marquee-track, .cursor-blink, .avatar-ring-pulse {
        animation: none !important;
    }
    .about-flip-card, .about-card-face {
        transition: none !important;
    }
    #matrixCanvas, #particleCanvas, #preloaderCanvas {
        display: none !important;
    }
}

/* ── Shared Dual Blog Navigation (Blogs + Portfolio) ── */
.blog-nav-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.blog-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border-accent);
    background: rgba(0, 255, 136, 0.06);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    transition: all 0.25s ease;
}
.blog-back-btn:hover {
    background: rgba(0, 255, 136, 0.15);
    border-color: var(--accent);
    transform: translateX(-2px);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
}
.blog-back-btn.portfolio-btn {
    border-color: rgba(0, 212, 255, 0.3);
    background: rgba(0, 212, 255, 0.06);
    color: var(--accent-cyan);
}
.blog-back-btn.portfolio-btn:hover {
    background: rgba(0, 212, 255, 0.16);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.25);
    transform: none;
}


/* Article navigation must wrap before its logo overflows small screens. */
@media (max-width: 640px) {
    nav.blog-page-nav { flex-wrap: wrap; gap: 0.75rem; }
    nav.blog-page-nav .blog-page-logo-wrap { min-width: 0; max-width: 100%; margin-left: auto; flex: 0 1 140px; }
    nav.blog-page-nav .blog-nav-logo-img { width: 140px; max-width: 100%; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .cursor-outer, .cursor-inner, #blogParticleCanvas, #bgCanvas { display: none !important; }
}

/* Contain transformed decorative layers at the viewport, including desktop 3D effects. */
@supports (overflow-x: clip) { html { overflow-x: clip; } }