/* ============================================
   CrowGenBot — Advanced Effects Stylesheet
   Premium visual effects, spotlight cursors,
   glassmorphism, animated gradients, depth
   NO monitoring / NO threat log
   ============================================ */

/* ---------- Animated Gradient Text ---------- */
.text-gradient {
    background: linear-gradient(
        135deg,
        #5865F2 0%,
        #7B8CFF 25%,
        #3619fd 50%,
        #7B8CFF 75%,
        #5865F2 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---------- Section Visible Reveal ---------- */
.section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.section.section-visible,
.section#hero {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Security Shield Pulse ---------- */
.security-shield-pulse {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 32px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 500px;
}

.shield-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(88, 101, 242, 0.2);
}

.shield-ring-1 {
    width: 100px;
    height: 100px;
    animation: shield-expand 3s ease-in-out infinite;
}

.shield-ring-2 {
    width: 75px;
    height: 75px;
    animation: shield-expand 3s ease-in-out infinite 1s;
}

.shield-ring-3 {
    width: 50px;
    height: 50px;
    animation: shield-expand 3s ease-in-out infinite 2s;
}

@keyframes shield-expand {
    0% { transform: scale(1); opacity: 0.6; border-color: rgba(88, 101, 242, 0.3); }
    50% { transform: scale(1.5); opacity: 0; border-color: rgba(88, 101, 242, 0); }
    100% { transform: scale(1); opacity: 0.6; border-color: rgba(88, 101, 242, 0.3); }
}

.shield-icon-center {
    position: relative;
    z-index: 2;
    animation: shieldRotate3D 5s ease-in-out infinite;
    transform-style: preserve-3d;
    filter: drop-shadow(0 0 14px rgba(88, 101, 242, 0.5)) drop-shadow(0 0 30px rgba(88, 101, 242, 0.2));
}

@keyframes shieldRotate3D {
    0%   { transform: rotateY(0deg) scale(1); }
    25%  { transform: rotateY(180deg) scale(1.05); }
    50%  { transform: rotateY(360deg) scale(1); }
    75%  { transform: rotateY(180deg) scale(1.05); }
    100% { transform: rotateY(0deg) scale(1); }
}

/* ---------- Command Item Glow Cursor ---------- */
.command-item {
    position: relative;
    overflow: hidden;
}

.command-item::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(88, 101, 242, 0.12) 0%, transparent 70%);
    left: var(--glow-x, -200px);
    top: var(--glow-y, -200px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.command-item:hover::before {
    opacity: 1;
}

/* ---------- Section Line Animation ---------- */
.section-line {
    transform: scaleX(0);
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.section-line.section-line-animate {
    transform: scaleX(1);
}

/* ---------- Glitch Random Trigger ---------- */
.glitch-trigger {
    animation: glitch-text 0.3s ease !important;
}

/* ---------- Search Focus Effect ---------- */
.search-container.search-focused .search-input {
    border-color: var(--blurple);
    box-shadow:
        0 0 0 4px rgba(88, 101, 242, 0.12),
        0 0 30px rgba(88, 101, 242, 0.1),
        inset 0 0 20px rgba(88, 101, 242, 0.03);
}

.search-container.search-focused .search-icon {
    color: var(--blurple-light);
    filter: drop-shadow(0 0 6px rgba(88, 101, 242, 0.4));
}

/* ---------- Card Spotlight Effect ---------- */
.feature-card,
.tech-card,
.security-feature {
    position: relative;
    overflow: hidden;
}

.feature-card::after,
.tech-card::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(88, 101, 242, 0.08) 0%, transparent 60%);
    left: var(--spotlight-x, -300px);
    top: var(--spotlight-y, -300px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
}

.feature-card:hover::after,
.tech-card:hover::after {
    opacity: 1;
}

/* ---------- Feature Card Enhanced ---------- */
.feature-card {
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    will-change: transform;
}

/* ---------- Security Feature Slide Border ---------- */
.security-feature::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gradient-primary);
    transform: scaleY(0);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 0 2px 2px 0;
    z-index: 2;
}

.security-feature:hover::before {
    transform: scaleY(1);
}

/* ---------- Stat Card Neon Border ---------- */
.security-stat-card {
    position: relative;
    overflow: hidden;
}

.security-stat-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        var(--blurple) 10%,
        transparent 20%
    );
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
    animation: rotate-border 4s linear infinite;
}

.security-stat-card:hover::before {
    opacity: 1;
}

.security-stat-card::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: var(--bg-card);
    border-radius: 11px;
    z-index: -1;
}

/* ---------- Status Badge Glow ---------- */
.sf-status.active {
    position: relative;
    transition: opacity 0.15s ease;
}

.sf-status.active::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: var(--gradient-primary);
    opacity: 0;
    z-index: -1;
    filter: blur(8px);
    transition: opacity 0.4s ease;
}

.security-feature:hover .sf-status.active::before {
    opacity: 0.35;
}

/* ---------- Hero Logo Enhanced Glow ---------- */
.hero-logo:hover .hero-logo-img {
    filter:
        drop-shadow(0 0 30px rgba(88, 101, 242, 0.9))
        drop-shadow(0 0 60px rgba(54, 25, 253, 0.6))
        drop-shadow(0 0 120px rgba(88, 100, 242, 0.3));
    transition: filter 0.5s ease;
}

/* ---------- Footer Link Underline ---------- */
.footer-col a {
    position: relative;
}

.footer-col a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gradient-primary);
    transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.footer-col a:hover::after {
    width: 100%;
}

/* ---------- Tab Button Active Effect ---------- */
.tab-btn.active {
    position: relative;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 15%;
    right: 15%;
    height: 2px;
    background: var(--blurple);
    border-radius: 1px;
    box-shadow: 0 0 10px rgba(88, 101, 242, 0.5);
}

/* ---------- Button Ripple on Click ---------- */
.btn-primary:active,
.btn-secondary:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s ease !important;
}

/* ---------- Command Item Hover Left Accent ---------- */
.command-item {
    border-left: 3px solid transparent;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.command-item:hover {
    border-left-color: var(--blurple);
    padding-left: 27px;
}

/* ---------- Section Tag Glow ---------- */
.section-tag {
    position: relative;
}

.section-tag::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: var(--blurple);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(88, 101, 242, 0.6);
    animation: dot-blink 2s ease-in-out infinite;
}

@keyframes dot-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ---------- Hero Stat Hover ---------- */
.stat-number {
    transition: transform 0.3s ease, text-shadow 0.3s ease;
    cursor: default;
}

/* ---------- Tech Card Version Pill Glow ---------- */
.tech-version {
    transition: all 0.3s ease;
}

.tech-card:hover .tech-version {
    box-shadow: 0 0 12px rgba(88, 101, 242, 0.3);
    background: rgba(88, 101, 242, 0.18);
}

/* ---------- Feature Badge Pulse on Card Hover ---------- */
.feature-card:hover .feature-badge {
    box-shadow: 0 0 10px rgba(88, 101, 242, 0.2);
}

.feature-card:hover .badge-new {
    box-shadow: 0 0 10px rgba(54, 25, 253, 0.2);
}

.feature-card:hover .badge-premium {
    box-shadow: 0 0 10px rgba(247, 226, 45, 0.15);
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
    .security-shield-pulse {
        width: 70px;
        height: 70px;
    }

    .shield-icon-center svg {
        width: 32px;
        height: 32px;
    }

    .command-item:hover {
        padding-left: 19px;
    }

    .section-tag::before {
        display: none;
    }
}

/* ============================================
   SITE-WIDE GLITCH EFFECTS — LEVEL SUPREME
   Unstable holographic signal distortions
   RGB channel split · Horizontal interference
   Micro-décrochages · Digital noise · Clip slicing
   ============================================ */

/* ---------- CRT Scanlines Persistent Overlay ---------- */
.crt-scanlines-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.035) 2px,
        rgba(0, 0, 0, 0.035) 4px
    );
    mix-blend-mode: multiply;
}

/* ---------- Full Page Glitch Overlay ---------- */
.page-glitch-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
}

.page-glitch-overlay.active {
    animation: pageGlitchFlash 300ms steps(6) forwards;
}

@keyframes pageGlitchFlash {
    0%   { opacity: 0; background: transparent; }
    8%   { opacity: 1; background: rgba(255, 51, 51, 0.05); transform: translateX(-5px) skewX(-0.8deg); }
    16%  { opacity: 1; background: rgba(88, 101, 242, 0.06); transform: translateX(6px) skewX(0.6deg); }
    28%  { opacity: 0.8; background: linear-gradient(0deg, transparent 40%, rgba(255,51,51,0.08) 40.5%, transparent 41%, transparent 65%, rgba(88,101,242,0.08) 65.5%, transparent 66%); transform: translateX(-4px); }
    42%  { opacity: 1; background: rgba(54, 25, 253, 0.07); transform: translateX(3px) skewX(-0.4deg); }
    60%  { opacity: 0.6; background: linear-gradient(0deg, transparent 20%, rgba(255,51,51,0.06) 20.3%, transparent 20.6%, transparent 75%, rgba(88,101,242,0.06) 75.3%, transparent 75.6%); transform: translateX(-2px); }
    80%  { opacity: 0.3; background: rgba(0, 0, 0, 0.1); transform: translateX(1px); }
    100% { opacity: 0; background: transparent; transform: translateX(0); }
}

/* ---------- Chromatic Aberration Burst ---------- */
body.chroma-burst {
    animation: chromaAberration 200ms steps(5) forwards;
}

@keyframes chromaAberration {
    0%   { filter: none; }
    15%  { filter: drop-shadow(-6px 0 0 rgba(255, 51, 51, 0.45)) drop-shadow(6px 0 0 rgba(88, 101, 242, 0.45)) drop-shadow(0 3px 0 rgba(51, 255, 51, 0.2)); }
    35%  { filter: drop-shadow(-8px 0 0 rgba(255, 51, 51, 0.5)) drop-shadow(8px 0 0 rgba(88, 101, 242, 0.5)) drop-shadow(0 -4px 0 rgba(51, 255, 51, 0.25)) brightness(1.08); }
    55%  { filter: drop-shadow(-4px 2px 0 rgba(255, 51, 51, 0.35)) drop-shadow(4px -2px 0 rgba(88, 101, 242, 0.35)) drop-shadow(2px 3px 0 rgba(51, 255, 51, 0.2)); }
    80%  { filter: drop-shadow(-2px 0 0 rgba(255, 51, 51, 0.2)) drop-shadow(2px 0 0 rgba(88, 101, 242, 0.2)); }
    100% { filter: none; }
}

/* ---------- Horizontal Interference Lines (injected dynamically by JS) ---------- */
.glitch-interference-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    pointer-events: none;
    z-index: 100;
    mix-blend-mode: screen;
    animation: interferenceSlide var(--line-dur, 150ms) linear forwards;
}

@keyframes interferenceSlide {
    0%   { opacity: 0.9; transform: translateX(-5%); background: linear-gradient(90deg, transparent, rgba(88, 101, 242, 0.6) 20%, rgba(255, 51, 51, 0.4) 50%, rgba(51, 255, 51, 0.3) 80%, transparent); }
    30%  { opacity: 1; transform: translateX(3%); background: linear-gradient(90deg, transparent, rgba(255, 51, 51, 0.5) 30%, rgba(88, 101, 242, 0.6) 60%, transparent); }
    60%  { opacity: 0.7; transform: translateX(-2%); background: linear-gradient(90deg, transparent 10%, rgba(51, 255, 51, 0.4) 40%, rgba(255, 51, 51, 0.3) 70%, transparent); }
    100% { opacity: 0; transform: translateX(0); }
}

/* ---------- Digital Noise on Titles (persistent subtle between glitches) ---------- */
.digital-noise-active {
    animation: digitalNoise 80ms steps(3) infinite;
}

@keyframes digitalNoise {
    0%   { text-shadow: 0.5px 0 rgba(255, 51, 51, 0.12), -0.5px 0 rgba(88, 101, 242, 0.12); }
    33%  { text-shadow: -0.5px 0.3px rgba(255, 51, 51, 0.1), 0.5px -0.3px rgba(88, 101, 242, 0.1), 0 0.5px rgba(51, 255, 51, 0.06); }
    66%  { text-shadow: 0.3px -0.5px rgba(88, 101, 242, 0.12), -0.3px 0.5px rgba(255, 51, 51, 0.08); }
    100% { text-shadow: -0.5px 0 rgba(255, 51, 51, 0.12), 0.5px 0 rgba(88, 101, 242, 0.12); }
}

/* ============================
   GLITCH ANIMATIONS — NEXT LEVEL
   More steps, RGB 3-channel, clip slicing,
   interference backgrounds, brutal skew/micro-shifts
   ============================ */

/* ---------- Section Titles — SUPREME ---------- */
.section-title.site-glitch {
    animation: siteGlitchText 320ms steps(8) forwards;
}

@keyframes siteGlitchText {
    0%   { transform: translate(0); text-shadow: none; }
    6%   { transform: translate(-7px, 3px) skewX(-5deg); text-shadow: -6px 0 rgba(255,51,51,0.8), 6px 0 rgba(88,101,242,0.8), 0 3px rgba(51,255,51,0.3); clip-path: inset(0 0 60% 0); }
    14%  { transform: translate(8px, -2px) skewX(6deg); text-shadow: 8px 0 rgba(255,51,51,0.7), -8px 0 rgba(88,101,242,0.7), 0 -4px rgba(51,255,51,0.25); clip-path: inset(50% 0 10% 0); }
    24%  { transform: translate(-4px, 4px) skewX(-3deg) skewY(1deg); text-shadow: -5px 2px rgba(54,25,253,0.9), 5px -2px rgba(255,51,51,0.6); clip-path: inset(20% 0 20% 0); background: linear-gradient(0deg, transparent 48%, rgba(88,101,242,0.08) 48.5%, transparent 49.5%); }
    35%  { transform: translate(10px, -1px) skewX(4deg); text-shadow: 10px 0 rgba(255,51,51,0.6), -10px 0 rgba(88,101,242,0.6); clip-path: inset(65% 0 0 0); }
    48%  { transform: translate(-6px, 2px) skewX(-7deg); text-shadow: -7px 0 rgba(88,101,242,0.9), 7px 0 rgba(255,51,51,0.5), 0 4px rgba(51,255,51,0.3); clip-path: inset(10% 0 40% 0); }
    62%  { transform: translate(5px, -3px) skewX(2deg); text-shadow: none; clip-path: inset(0 0 0 0); }
    78%  { transform: translate(-8px, 1px) skewX(-4deg) skewY(-1deg); text-shadow: -8px 0 rgba(54,25,253,0.8), 8px 0 rgba(255,51,51,0.7), 0 -3px rgba(51,255,51,0.2); clip-path: inset(35% 0 25% 0); }
    92%  { transform: translate(3px, -2px); text-shadow: -2px 0 rgba(255,51,51,0.3), 2px 0 rgba(88,101,242,0.3); clip-path: inset(0 0 0 0); }
    100% { transform: translate(0); text-shadow: none; clip-path: inset(0 0 0 0); background: none; }
}

/* ---------- Feature Cards — SUPREME ---------- */
.feature-card.site-glitch {
    animation: siteGlitchCard 350ms steps(6) forwards;
}

@keyframes siteGlitchCard {
    0%   { transform: translate(0); border-color: var(--border-subtle); }
    10%  { transform: translate(-6px, 3px) skewX(-2.5deg) skewY(0.5deg); border-color: rgba(255,51,51,0.5); filter: brightness(1.6) hue-rotate(15deg); box-shadow: -4px 0 12px rgba(255,51,51,0.25), 4px 0 12px rgba(88,101,242,0.25); }
    22%  { transform: translate(5px, -3px) skewX(2deg); border-color: rgba(88,101,242,0.7); filter: brightness(0.4); box-shadow: 6px 0 15px rgba(88,101,242,0.3); background-image: linear-gradient(0deg, transparent 30%, rgba(255,51,51,0.05) 30.5%, transparent 31%); }
    38%  { transform: translate(-3px, 2px) skewX(-1deg) skewY(-1deg); border-color: rgba(54,25,253,0.6); filter: brightness(1.5) hue-rotate(-20deg); opacity: 0.5; }
    55%  { transform: translate(7px, -1px) skewX(3deg); border-color: rgba(255,51,51,0.4); filter: brightness(0.6) saturate(2); opacity: 0.7; box-shadow: -5px 0 10px rgba(255,51,51,0.2), 5px 0 10px rgba(88,101,242,0.2); }
    75%  { transform: translate(-2px, 1px); border-color: rgba(88,101,242,0.5); filter: brightness(1.3); opacity: 0.9; }
    100% { transform: translate(0); border-color: var(--border-subtle); filter: none; opacity: 1; box-shadow: none; background-image: none; }
}

/* ---------- Command Items — SUPREME ---------- */
.command-item.site-glitch {
    animation: siteGlitchCmd 260ms steps(6) forwards;
}

@keyframes siteGlitchCmd {
    0%   { transform: translateX(0); }
    10%  { transform: translateX(-8px) skewX(-2deg); box-shadow: -6px 0 12px rgba(255,51,51,0.35), 6px 0 12px rgba(88,101,242,0.35), 0 2px 8px rgba(51,255,51,0.15); clip-path: inset(0 0 0 0); }
    25%  { transform: translateX(7px) skewX(1.5deg); box-shadow: 5px 0 10px rgba(255,51,51,0.3); opacity: 0.4; clip-path: inset(30% 0 30% 0); }
    42%  { transform: translateX(-5px) skewX(-3deg); filter: brightness(1.6); opacity: 0.7; clip-path: inset(0 0 0 0); }
    60%  { transform: translateX(6px); filter: brightness(0.4); opacity: 0.3; background-image: linear-gradient(0deg, transparent 50%, rgba(88,101,242,0.06) 50.3%, transparent 50.6%); }
    80%  { transform: translateX(-2px); filter: brightness(1.3); opacity: 0.8; }
    100% { transform: translateX(0); box-shadow: none; opacity: 1; filter: none; clip-path: inset(0 0 0 0); background-image: none; }
}

/* ---------- Tech Cards — SUPREME ---------- */
.tech-card.site-glitch {
    animation: siteGlitchTech 320ms steps(7) forwards;
}

@keyframes siteGlitchTech {
    0%   { transform: translate(0); }
    8%   { transform: translate(-5px, 2px) skewY(-3deg) skewX(1deg); filter: hue-rotate(50deg) brightness(1.6); box-shadow: -4px 0 10px rgba(255,51,51,0.3), 4px 0 10px rgba(88,101,242,0.3); }
    20%  { transform: translate(6px, -2px) skewY(2deg); filter: hue-rotate(-40deg) brightness(0.4); }
    35%  { transform: translate(-3px, 3px) skewX(-2deg); filter: brightness(0.5) saturate(2.5); background-image: linear-gradient(0deg, transparent 60%, rgba(51,255,51,0.06) 60.3%, transparent 60.6%); }
    50%  { transform: translate(5px, -1px) skewY(1.5deg); filter: hue-rotate(30deg) brightness(1.5); opacity: 0.5; }
    68%  { transform: translate(-4px, 0) skewX(-1deg) skewY(-1deg); filter: hue-rotate(-15deg) brightness(0.7); opacity: 0.7; }
    85%  { transform: translate(2px, -1px); filter: hue-rotate(10deg) brightness(1.2); opacity: 0.9; }
    100% { transform: translate(0); filter: none; opacity: 1; box-shadow: none; background-image: none; }
}

/* ---------- Security Stat Cards — SUPREME ---------- */
.security-stat-card.site-glitch {
    animation: siteGlitchStat 300ms steps(6) forwards;
}

@keyframes siteGlitchStat {
    0%   { transform: translate(0); }
    12%  { transform: translate(-5px, 3px) skewX(-2deg); box-shadow: 0 0 30px rgba(88,101,242,0.7), -4px 0 8px rgba(255,51,51,0.3); filter: brightness(1.5); }
    28%  { transform: translate(6px, -2px) skewX(1deg); box-shadow: 0 0 25px rgba(255,51,51,0.4), 4px 0 8px rgba(88,101,242,0.3); opacity: 0.3; filter: brightness(0.4); }
    45%  { transform: translate(-3px, 1px) skewX(-1.5deg) skewY(0.5deg); box-shadow: 0 0 35px rgba(54,25,253,0.6); opacity: 0.6; filter: brightness(1.4) hue-rotate(20deg); }
    62%  { transform: translate(4px, -2px); filter: brightness(0.6); opacity: 0.8; clip-path: inset(20% 0 40% 0); }
    82%  { transform: translate(-1px, 1px); filter: brightness(1.2); opacity: 0.9; clip-path: inset(0 0 0 0); }
    100% { transform: translate(0); box-shadow: none; opacity: 1; filter: none; clip-path: inset(0 0 0 0); }
}

/* ---------- Section Tags — SUPREME ---------- */
.section-tag.site-glitch {
    animation: siteGlitchTag 200ms steps(5) forwards;
}

@keyframes siteGlitchTag {
    0%   { transform: translate(0); }
    15%  { transform: translate(-5px, 2px) skewX(-4deg); text-shadow: -4px 0 rgba(255,51,51,0.7), 4px 0 rgba(88,101,242,0.7), 0 2px rgba(51,255,51,0.3); opacity: 0.5; }
    35%  { transform: translate(6px, -1px) skewX(5deg); text-shadow: 5px 0 rgba(255,51,51,0.6), -5px 0 rgba(54,25,253,0.6); filter: brightness(1.7); clip-path: inset(20% 0 30% 0); }
    55%  { transform: translate(-3px, 1px) skewX(-2deg); text-shadow: -2px 0 rgba(88,101,242,0.5); opacity: 0.7; clip-path: inset(0 0 0 0); }
    80%  { transform: translate(2px, -1px); text-shadow: 1px 0 rgba(255,51,51,0.3); filter: brightness(0.7); }
    100% { transform: translate(0); text-shadow: none; opacity: 1; filter: none; clip-path: inset(0 0 0 0); }
}

/* ---------- Hero Title — SUPREME ---------- */
.hero-title.site-glitch {
    animation: siteGlitchHeroTitle 450ms steps(10) forwards;
}

@keyframes siteGlitchHeroTitle {
    0%   { transform: translate(0); text-shadow: none; }
    5%   { transform: translate(-10px, 4px) skewX(-6deg); text-shadow: -10px 0 rgba(255,51,51,0.8), 10px 0 rgba(88,101,242,0.8), 0 5px rgba(51,255,51,0.35); clip-path: inset(0 0 55% 0); }
    12%  { transform: translate(12px, -5px) skewX(8deg); text-shadow: 12px 0 rgba(255,51,51,0.7), -12px 0 rgba(54,25,253,0.7); clip-path: inset(60% 0 0 0); }
    22%  { transform: translate(-8px, 3px) skewX(-4deg) skewY(2deg); text-shadow: -8px 3px rgba(88,101,242,0.9), 8px -3px rgba(255,51,51,0.6); clip-path: inset(15% 0 35% 0); background: linear-gradient(0deg, transparent 45%, rgba(255,51,51,0.08) 45.3%, transparent 45.6%, transparent 70%, rgba(88,101,242,0.08) 70.3%, transparent 70.6%); }
    32%  { transform: translate(9px, -2px) skewX(5deg); text-shadow: 9px 0 rgba(54,25,253,0.8), -9px 0 rgba(255,51,51,0.5), 0 -4px rgba(51,255,51,0.25); clip-path: inset(40% 0 15% 0); }
    42%  { transform: translate(-6px, 5px) skewX(-7deg); clip-path: inset(5% 0 50% 0); filter: brightness(1.6); }
    55%  { transform: translate(7px, -3px) skewX(3deg); text-shadow: -6px 0 rgba(255,51,51,0.6), 6px 0 rgba(88,101,242,0.6); clip-path: inset(0 0 0 0); filter: brightness(0.5); }
    68%  { transform: translate(-5px, 2px) skewX(-5deg) skewY(-1deg); text-shadow: none; clip-path: inset(55% 0 5% 0); filter: brightness(1.4); background: none; }
    80%  { transform: translate(4px, -1px); text-shadow: -3px 0 rgba(255,51,51,0.4), 3px 0 rgba(88,101,242,0.4); clip-path: inset(0 0 0 0); filter: brightness(0.8); }
    92%  { transform: translate(-2px, 1px); text-shadow: -1px 0 rgba(255,51,51,0.2); }
    100% { transform: translate(0); text-shadow: none; clip-path: inset(0 0 0 0); filter: none; background: none; }
}

/* ---------- Hero Subtitle — SUPREME ---------- */
.hero-subtitle.site-glitch {
    animation: siteGlitchHeroSub 350ms steps(7) forwards;
}

@keyframes siteGlitchHeroSub {
    0%   { transform: translate(0); opacity: 1; }
    10%  { transform: translate(-6px, 2px) skewX(-4deg); text-shadow: -5px 0 rgba(255,51,51,0.7), 5px 0 rgba(88,101,242,0.7), 0 3px rgba(51,255,51,0.25); opacity: 0.5; clip-path: inset(0 0 50% 0); }
    25%  { transform: translate(8px, -3px) skewX(3deg); text-shadow: 7px 0 rgba(54,25,253,0.7), -7px 0 rgba(255,51,51,0.5); clip-path: inset(40% 0 10% 0); opacity: 0.7; }
    40%  { transform: translate(-5px, 3px) skewX(-5deg) skewY(1deg); clip-path: inset(15% 0 30% 0); text-shadow: -4px 0 rgba(88,101,242,0.6); filter: brightness(1.5); }
    55%  { transform: translate(6px, -1px) skewX(2deg); clip-path: inset(0 0 0 0); opacity: 0.4; filter: brightness(0.5); }
    72%  { transform: translate(-3px, 2px); text-shadow: -2px 0 rgba(255,51,51,0.4), 2px 0 rgba(88,101,242,0.4); opacity: 0.7; filter: brightness(1.3); }
    88%  { transform: translate(2px, -1px); text-shadow: none; opacity: 0.9; }
    100% { transform: translate(0); text-shadow: none; opacity: 1; clip-path: inset(0 0 0 0); filter: none; }
}

/* ---------- Stat Numbers — SUPREME ---------- */
.stat-number.site-glitch {
    animation: siteGlitchStat2 250ms steps(5) forwards;
}

@keyframes siteGlitchStat2 {
    0%   { transform: scale(1); }
    15%  { transform: scale(1.2) translateX(-5px) skewX(-3deg); text-shadow: -5px 0 rgba(255,51,51,0.7), 5px 0 rgba(88,101,242,0.7), 0 3px rgba(51,255,51,0.3); filter: brightness(1.7); }
    35%  { transform: scale(0.8) translateX(6px) skewX(4deg); text-shadow: 6px 0 rgba(255,51,51,0.6), -6px 0 rgba(54,25,253,0.6); filter: brightness(0.3); opacity: 0.4; }
    55%  { transform: scale(1.15) translateX(-3px); text-shadow: -3px 0 rgba(88,101,242,0.5); filter: brightness(1.4); opacity: 0.7; }
    80%  { transform: scale(0.95) translateX(2px); filter: brightness(0.8); opacity: 0.9; }
    100% { transform: scale(1); text-shadow: none; filter: none; opacity: 1; }
}

/* ---------- Security Features — SUPREME ---------- */
.security-feature.site-glitch {
    animation: siteGlitchSecFeat 300ms steps(5) forwards;
}

@keyframes siteGlitchSecFeat {
    0%   { transform: translate(0); }
    12%  { transform: translate(-5px, 2px) skewX(-1.5deg); border-color: rgba(255,51,51,0.5); filter: brightness(1.5); box-shadow: -4px 0 10px rgba(255,51,51,0.2), 4px 0 10px rgba(88,101,242,0.2); }
    30%  { transform: translate(6px, -3px) skewX(1deg); border-color: rgba(88,101,242,0.6); opacity: 0.4; filter: brightness(0.4); }
    50%  { transform: translate(-3px, 1px) skewY(-0.5deg); border-color: rgba(54,25,253,0.6); filter: brightness(1.4) hue-rotate(15deg); opacity: 0.7; }
    75%  { transform: translate(2px, -1px); border-color: rgba(88,101,242,0.4); filter: brightness(0.7); opacity: 0.9; }
    100% { transform: translate(0); border-color: var(--border-subtle); opacity: 1; filter: none; box-shadow: none; }
}

/* ---------- Footer Cols — SUPREME ---------- */
.footer-col.site-glitch {
    animation: siteGlitchFooter 250ms steps(4) forwards;
}

@keyframes siteGlitchFooter {
    0%   { transform: translate(0); opacity: 1; }
    18%  { transform: translate(-5px, 2px) skewX(-1deg); opacity: 0.4; filter: brightness(1.5) hue-rotate(20deg); box-shadow: -3px 0 8px rgba(255,51,51,0.2), 3px 0 8px rgba(88,101,242,0.2); }
    42%  { transform: translate(4px, -1px) skewX(0.5deg); opacity: 0.6; filter: brightness(0.5); }
    70%  { transform: translate(-2px, 1px); opacity: 0.8; filter: brightness(1.2); }
    100% { transform: translate(0); opacity: 1; filter: none; box-shadow: none; }
}

/* ---------- Section Lines — SUPREME ---------- */
.section-line.site-glitch {
    animation: siteGlitchLine 220ms steps(5) forwards;
}

@keyframes siteGlitchLine {
    0%   { transform: scaleX(1) translateY(0); }
    15%  { transform: scaleX(1.25) translateY(-3px); filter: brightness(2.5) hue-rotate(25deg); box-shadow: 0 0 15px rgba(88,101,242,0.4); }
    35%  { transform: scaleX(0.5) translateY(4px) skewX(-2deg); filter: brightness(0.3); opacity: 0.3; }
    55%  { transform: scaleX(1.15) translateY(-2px); filter: brightness(1.8) hue-rotate(-15deg); opacity: 0.7; }
    80%  { transform: scaleX(0.9) translateY(1px); filter: brightness(0.7); opacity: 0.9; }
    100% { transform: scaleX(1) translateY(0); filter: none; opacity: 1; box-shadow: none; }
}

/* ---------- Command Syntax — SUPREME ---------- */
.command-syntax.site-glitch {
    animation: siteGlitchPrefix 180ms steps(5) forwards;
    display: inline-block;
}

@keyframes siteGlitchPrefix {
    0%   { transform: translate(0); }
    15%  { transform: translate(-4px, 2px) skewX(-5deg); text-shadow: -4px 0 rgba(255,51,51,0.7), 4px 0 rgba(88,101,242,0.7), 0 2px rgba(51,255,51,0.3); filter: brightness(1.7); }
    35%  { transform: translate(5px, -1px) skewX(6deg); text-shadow: 5px 0 rgba(54,25,253,0.6); opacity: 0.3; filter: brightness(0.4); }
    55%  { transform: translate(-2px, 1px) skewX(-3deg); text-shadow: -2px 0 rgba(88,101,242,0.5); opacity: 0.6; }
    80%  { transform: translate(1px, 0); text-shadow: 1px 0 rgba(255,51,51,0.3); opacity: 0.9; }
    100% { transform: translate(0); text-shadow: none; opacity: 1; filter: none; }
}

/* ---------- Buttons — SUPREME ---------- */
.btn-primary.site-glitch,
.btn-secondary.site-glitch {
    animation: siteGlitchBtn 280ms steps(6) forwards;
}

@keyframes siteGlitchBtn {
    0%   { transform: translate(0); }
    10%  { transform: translate(-5px, 2px) skewX(-3deg); box-shadow: -5px 0 12px rgba(255,51,51,0.35), 5px 0 12px rgba(88,101,242,0.35), 0 3px 8px rgba(51,255,51,0.15); filter: brightness(1.6); }
    25%  { transform: translate(6px, -2px) skewX(2deg); filter: brightness(0.4) hue-rotate(25deg); opacity: 0.5; }
    42%  { transform: translate(-4px, 1px) skewX(-4deg); box-shadow: 0 0 20px rgba(54,25,253,0.5); filter: brightness(1.4); opacity: 0.7; }
    60%  { transform: translate(3px, -1px) skewX(1deg); filter: brightness(0.6); opacity: 0.5; clip-path: inset(20% 0 30% 0); }
    82%  { transform: translate(-1px, 1px); filter: brightness(1.2); opacity: 0.9; clip-path: inset(0 0 0 0); }
    100% { transform: translate(0); box-shadow: none; opacity: 1; filter: none; clip-path: inset(0 0 0 0); }
}

/* ---------- Section Subtitle — SUPREME ---------- */
.section-subtitle.site-glitch {
    animation: siteGlitchDesc 260ms steps(5) forwards;
}

@keyframes siteGlitchDesc {
    0%   { transform: translate(0); opacity: 1; }
    15%  { transform: translate(-5px, 2px) skewX(-2deg); text-shadow: -4px 0 rgba(255,51,51,0.5), 4px 0 rgba(88,101,242,0.5); opacity: 0.5; clip-path: inset(0 0 50% 0); }
    35%  { transform: translate(6px, -1px) skewX(3deg); text-shadow: 5px 0 rgba(54,25,253,0.4), -5px 0 rgba(255,51,51,0.3); clip-path: inset(40% 0 10% 0); }
    55%  { transform: translate(-3px, 1px); clip-path: inset(10% 0 30% 0); text-shadow: -2px 0 rgba(88,101,242,0.4); opacity: 0.7; }
    78%  { transform: translate(2px, -1px); clip-path: inset(0 0 0 0); text-shadow: none; opacity: 0.9; }
    100% { transform: translate(0); text-shadow: none; opacity: 1; clip-path: inset(0 0 0 0); }
}

/* ---------- Feature Badges — SUPREME ---------- */
.feature-badge.site-glitch {
    animation: siteGlitchBadge 200ms steps(5) forwards;
    display: inline-block;
}

@keyframes siteGlitchBadge {
    0%   { transform: scale(1); }
    15%  { transform: scale(1.3) translateX(-4px) skewX(-3deg); filter: brightness(1.8) hue-rotate(35deg); text-shadow: -3px 0 rgba(255,51,51,0.5), 3px 0 rgba(88,101,242,0.5); }
    35%  { transform: scale(0.7) translateX(5px) skewX(4deg); filter: brightness(0.3); opacity: 0.3; }
    55%  { transform: scale(1.15) translateX(-2px); filter: brightness(1.5) hue-rotate(-20deg); opacity: 0.6; }
    80%  { transform: scale(0.95); filter: brightness(0.8); opacity: 0.9; }
    100% { transform: scale(1); filter: none; opacity: 1; text-shadow: none; }
}

/* ---------- Tab Buttons — SUPREME ---------- */
.tab-btn.site-glitch {
    animation: siteGlitchTab 220ms steps(4) forwards;
}

@keyframes siteGlitchTab {
    0%   { transform: translate(0); }
    18%  { transform: translate(-5px, 2px) skewX(-4deg); text-shadow: -4px 0 rgba(255,51,51,0.6), 4px 0 rgba(88,101,242,0.6); filter: brightness(1.5); }
    42%  { transform: translate(4px, -1px) skewX(3deg); opacity: 0.4; filter: brightness(0.4); }
    70%  { transform: translate(-2px, 1px) skewX(-1deg); text-shadow: -1px 0 rgba(88,101,242,0.4); opacity: 0.8; }
    100% { transform: translate(0); text-shadow: none; opacity: 1; filter: none; }
}

/* ---------- Footer Logo — SUPREME ---------- */
.footer-logo.site-glitch {
    animation: siteGlitchFooterLogo 300ms steps(5) forwards;
}

@keyframes siteGlitchFooterLogo {
    0%   { transform: translate(0); }
    12%  { transform: translate(-6px, 3px) skewX(-3deg); filter: brightness(1.6) drop-shadow(-5px 0 rgba(255,51,51,0.6)) drop-shadow(5px 0 rgba(88,101,242,0.6)) drop-shadow(0 3px rgba(51,255,51,0.25)); }
    30%  { transform: translate(7px, -3px) skewX(2deg); filter: brightness(0.4); opacity: 0.4; }
    50%  { transform: translate(-4px, 2px) skewX(-4deg); filter: brightness(1.4) hue-rotate(25deg); opacity: 0.6; }
    75%  { transform: translate(3px, -1px); filter: brightness(0.7); opacity: 0.8; }
    100% { transform: translate(0); filter: none; opacity: 1; }
}

/* ---------- Hero Logo — SUPREME ---------- */
.hero-logo.site-glitch {
    animation: siteGlitchHeroLogo 380ms steps(7) forwards;
}

@keyframes siteGlitchHeroLogo {
    0%   { transform: translate(0); }
    8%   { transform: translate(-8px, 4px) skewX(-4deg); filter: drop-shadow(-6px 0 rgba(255,51,51,0.7)) drop-shadow(6px 0 rgba(88,101,242,0.7)) drop-shadow(0 4px rgba(51,255,51,0.3)); }
    22%  { transform: translate(9px, -4px) skewX(3deg); filter: brightness(1.6); opacity: 0.4; }
    38%  { transform: translate(-6px, 3px) skewX(-5deg) skewY(1deg); filter: brightness(0.4) hue-rotate(30deg); opacity: 0.5; }
    55%  { transform: translate(5px, -2px) skewX(2deg); filter: brightness(1.4); opacity: 0.7; }
    75%  { transform: translate(-3px, 1px); filter: brightness(0.8); opacity: 0.9; }
    100% { transform: translate(0); filter: none; opacity: 1; }
}

/* ---------- Scanline Glitch Overlay (hero) — SUPREME ---------- */
.hero-scanline-glitch {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(88, 101, 242, 0.06) 2px,
        rgba(88, 101, 242, 0.06) 4px
    );
    mix-blend-mode: screen;
}

.hero-scanline-glitch.active {
    animation: scanlineFlash 300ms steps(6) forwards;
}

@keyframes scanlineFlash {
    0%   { opacity: 0; }
    10%  { opacity: 0.95; transform: translateY(4px); background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(88,101,242,0.08) 2px, rgba(88,101,242,0.08) 4px); }
    25%  { opacity: 0.1; transform: translateY(-3px) scaleY(1.03); }
    40%  { opacity: 0.9; transform: translateY(2px) scaleY(0.97); background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(255,51,51,0.06) 1px, rgba(255,51,51,0.06) 3px); }
    60%  { opacity: 0.15; transform: translateY(-4px) scaleY(1.02); }
    80%  { opacity: 0.6; transform: translateY(3px); }
    100% { opacity: 0; transform: translateY(0) scaleY(1); }
}

/* ---------- RGB Pseudo Layers for Titles — 3-CHANNEL SPLIT ---------- */
.section-title {
    position: relative;
}

.section-title.site-glitch::before,
.section-title.site-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.section-title.site-glitch::before {
    color: #ff3333;
    opacity: 0.7;
    animation: siteGlitchRgbRed 320ms steps(5) forwards;
    clip-path: inset(5% 0 25% 0);
}

.section-title.site-glitch::after {
    color: #5865F2;
    opacity: 0.7;
    animation: siteGlitchRgbBlue 320ms steps(5) forwards;
    clip-path: inset(45% 0 5% 0);
}

/* Hero title RGB pseudo layers — 3-channel */
.hero-title {
    position: relative;
}

.hero-title.site-glitch::before,
.hero-title.site-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero-title.site-glitch::before {
    color: #ff3333;
    opacity: 0.6;
    animation: siteGlitchRgbRed 450ms steps(7) forwards;
    clip-path: inset(15% 0 35% 0);
}

.hero-title.site-glitch::after {
    color: #5865F2;
    opacity: 0.6;
    animation: siteGlitchRgbBlue 450ms steps(7) forwards;
    clip-path: inset(40% 0 15% 0);
}

/* Hero subtitle RGB layers */
.hero-subtitle {
    position: relative;
}

.hero-subtitle.site-glitch::before,
.hero-subtitle.site-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero-subtitle.site-glitch::before {
    color: #ff3333;
    opacity: 0.5;
    animation: siteGlitchRgbRed 350ms steps(5) forwards;
    clip-path: inset(10% 0 40% 0);
}

.hero-subtitle.site-glitch::after {
    color: #5865F2;
    opacity: 0.5;
    animation: siteGlitchRgbBlue 350ms steps(5) forwards;
    clip-path: inset(50% 0 10% 0);
}

/* Red channel animation — travels left + down with clip slicing */
@keyframes siteGlitchRgbRed {
    0%   { transform: translate(0); clip-path: inset(5% 0 25% 0); }
    12%  { transform: translate(-8px, 2px); clip-path: inset(0 0 55% 0); }
    28%  { transform: translate(-5px, -1px); clip-path: inset(50% 0 5% 0); }
    42%  { transform: translate(-10px, 3px); clip-path: inset(10% 0 30% 0); }
    58%  { transform: translate(-4px, -2px); clip-path: inset(60% 0 0 0); }
    75%  { transform: translate(-7px, 1px); clip-path: inset(20% 0 40% 0); }
    90%  { transform: translate(-2px, 0); clip-path: inset(5% 0 25% 0); }
    100% { transform: translate(0); clip-path: inset(5% 0 25% 0); }
}

/* Blue channel animation — travels right + up with clip slicing */
@keyframes siteGlitchRgbBlue {
    0%   { transform: translate(0); clip-path: inset(45% 0 5% 0); }
    12%  { transform: translate(8px, -2px); clip-path: inset(0 0 45% 0); }
    28%  { transform: translate(5px, 1px); clip-path: inset(55% 0 5% 0); }
    42%  { transform: translate(10px, -3px); clip-path: inset(15% 0 35% 0); }
    58%  { transform: translate(4px, 2px); clip-path: inset(65% 0 0 0); }
    75%  { transform: translate(7px, -1px); clip-path: inset(30% 0 20% 0); }
    90%  { transform: translate(2px, 0); clip-path: inset(45% 0 5% 0); }
    100% { transform: translate(0); clip-path: inset(45% 0 5% 0); }
}

/* ============================================
   FUTURISTIC DETAIL EFFECTS — v2.1
   HUD corners, scan lines, data streams,
   circuit dividers, hex grids
   ============================================ */

/* ---------- HUD Corner Brackets — Cards ---------- */
.feature-card::after,
.cmd-category-card::after,
.tech-card::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-top: 2px solid rgba(88, 101, 242, 0.15);
    border-right: 2px solid rgba(88, 101, 242, 0.15);
    pointer-events: none;
    transition: all 0.4s ease;
}

.feature-card:hover::after,
.cmd-category-card:hover::after,
.tech-card:hover::after {
    border-color: rgba(88, 101, 242, 0.6);
    filter: drop-shadow(0 0 4px rgba(88, 101, 242, 0.3));
    width: 24px;
    height: 24px;
}

/* Bottom-left bracket */
.feature-card .feature-card-border::before,
.tech-card::before {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 18px;
    height: 18px;
    border-bottom: 2px solid rgba(88, 101, 242, 0.15);
    border-left: 2px solid rgba(88, 101, 242, 0.15);
    pointer-events: none;
    transition: all 0.4s ease;
    z-index: 1;
}

.feature-card:hover .feature-card-border::before,
.tech-card:hover::before {
    border-color: rgba(88, 101, 242, 0.6);
    filter: drop-shadow(0 0 4px rgba(88, 101, 242, 0.3));
    width: 24px;
    height: 24px;
}

/* ---------- Card Scan Line — Hover ---------- */
.feature-card .feature-card-shine,
.cmd-category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(88, 101, 242, 0.6), rgba(123, 140, 255, 0.8), rgba(88, 101, 242, 0.6), transparent);
    opacity: 0;
    transform: translateY(0);
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 5;
}

.feature-card:hover .feature-card-shine,
.cmd-category-card:hover::before {
    opacity: 1;
    animation: card-scanline 1.5s ease-in-out infinite;
}

@keyframes card-scanline {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(calc(100% + 200px)); opacity: 0; }
}

/* ---------- Enhanced Section Tag — Terminal Cursor ---------- */
.section-tag::after {
    content: '_';
    display: inline-block;
    margin-left: 2px;
    animation: terminal-cursor-blink 1s step-end infinite;
    color: var(--blurple-light);
}

@keyframes terminal-cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ---------- Data ID Label — Feature Cards ---------- */
.card-idx {
    position: absolute;
    top: 12px;
    left: 14px;
    font-family: var(--font-mono);
    font-size: 3.5rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.03);
    line-height: 1;
    transition: color 0.4s ease;
    user-select: none;
}

.feature-card:hover .card-idx {
    color: rgba(88, 101, 242, 0.08);
    text-shadow: 0 0 30px rgba(88, 101, 242, 0.1);
}

/* ---------- Security Status Enhanced Pulse ---------- */
.sf-status.active {
    position: relative;
    overflow: hidden;
}

.sf-status.active::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 4px;
    width: 4px;
    height: 4px;
    background: #43B581;
    border-radius: 50%;
    transform: translateY(-50%);
    animation: status-dot-pulse 2s ease-in-out infinite;
    box-shadow: 0 0 6px #43B581;
}

@keyframes status-dot-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px #43B581; }
    50% { opacity: 0.4; box-shadow: 0 0 2px #43B581; }
}

/* ---------- Marquee Dots Enhanced Glow ---------- */
.marquee-dot {
    text-shadow: 0 0 8px rgba(88, 101, 242, 0.6), 0 0 20px rgba(88, 101, 242, 0.2);
    animation: marquee-dot-glow 3s ease-in-out infinite;
}

@keyframes marquee-dot-glow {
    0%, 100% { opacity: 0.6; text-shadow: 0 0 8px rgba(88, 101, 242, 0.4); }
    50% { opacity: 1; text-shadow: 0 0 12px rgba(88, 101, 242, 0.8), 0 0 25px rgba(88, 101, 242, 0.3); }
}

/* ---------- Enhanced Button Glow Trail ---------- */
.btn-glow {
    position: relative;
    overflow: hidden;
}

.btn-glow::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(123, 140, 255, 0.15) 60deg,
        transparent 120deg
    );
    animation: btn-glow-rotate 4s linear infinite;
    pointer-events: none;
}

@keyframes btn-glow-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---------- Tech Card Rotating Border ---------- */
.tech-card {
    overflow: hidden;
}

.tech-card:hover {
    border-color: transparent;
}

.tech-card:hover::after {
    border-color: transparent;
    background: none;
    inset: -2px;
    width: auto;
    height: auto;
    top: -2px;
    right: -2px;
    border: none;
    z-index: -1;
    border-radius: 18px;
    background: conic-gradient(
        from var(--border-angle, 0deg),
        rgba(88, 101, 242, 0.6) 0deg,
        transparent 80deg,
        transparent 180deg,
        rgba(54, 25, 253, 0.6) 240deg,
        transparent 320deg
    );
    animation: rotate-border 3s linear infinite;
    filter: blur(2px);
}

/* ---------- Circuit Divider — Between Sections ---------- */
.circuit-divider {
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.circuit-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(88, 101, 242, 0.15) 20%, rgba(88, 101, 242, 0.15) 80%, transparent);
}

.circuit-divider::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--bg-primary);
    border: 1px solid rgba(88, 101, 242, 0.3);
    transform: rotate(45deg);
    position: relative;
    z-index: 2;
    box-shadow: 0 0 10px rgba(88, 101, 242, 0.2);
    animation: circuit-diamond-pulse 4s ease-in-out infinite;
}

@keyframes circuit-diamond-pulse {
    0%, 100% { border-color: rgba(88, 101, 242, 0.3); box-shadow: 0 0 10px rgba(88, 101, 242, 0.2); }
    50% { border-color: rgba(88, 101, 242, 0.6); box-shadow: 0 0 20px rgba(88, 101, 242, 0.4); }
}

.circuit-nodes {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
}

.circuit-node {
    position: absolute;
    top: 50%;
    width: 4px;
    height: 4px;
    background: rgba(88, 101, 242, 0.25);
    border-radius: 50%;
    transform: translateY(-50%);
}

.circuit-node:nth-child(1) { left: 15%; }
.circuit-node:nth-child(2) { left: 30%; animation: circuit-node-glow 3s ease-in-out infinite 0.5s; }
.circuit-node:nth-child(3) { left: 70%; animation: circuit-node-glow 3s ease-in-out infinite 1s; }
.circuit-node:nth-child(4) { left: 85%; }

@keyframes circuit-node-glow {
    0%, 100% { background: rgba(88, 101, 242, 0.25); box-shadow: none; }
    50% { background: rgba(88, 101, 242, 0.7); box-shadow: 0 0 8px rgba(88, 101, 242, 0.5); }
}

/* ---------- CTA Hex Grid Background ---------- */
.cta-hex-grid {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(88, 101, 242, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, rgba(88, 101, 242, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    pointer-events: none;
    opacity: 0.6;
}

.cta-hex-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(88, 101, 242, 0.04) 59px, rgba(88, 101, 242, 0.04) 60px),
        repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(88, 101, 242, 0.04) 59px, rgba(88, 101, 242, 0.04) 60px);
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 65%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 65%);
}

/* ---------- Footer Circuit Pattern ---------- */
.footer::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background:
        radial-gradient(circle at 10% 80%, rgba(88, 101, 242, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 90% 20%, rgba(88, 101, 242, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(88, 101, 242, 0.02) 1px, transparent 1px);
    background-size: 80px 80px, 100px 100px, 60px 60px;
    pointer-events: none;
    opacity: 0.5;
}

/* ---------- Enhanced Stat Divider — Vertical Neon ---------- */
.stat-divider {
    position: relative;
}

.stat-divider::after {
    content: '';
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(88, 101, 242, 0.5), transparent);
    animation: stat-divider-glow 3s ease-in-out infinite;
}

@keyframes stat-divider-glow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ---------- Security Stat Card — Animated Border Top ---------- */
.security-stat-card {
    position: relative;
    overflow: hidden;
}

.security-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--blurple), var(--blurple-light), transparent);
    animation: stat-card-border-slide 4s ease-in-out infinite;
}

.security-stat-card:nth-child(2)::before { animation-delay: 1s; }
.security-stat-card:nth-child(3)::before { animation-delay: 2s; }
.security-stat-card:nth-child(4)::before { animation-delay: 3s; }

@keyframes stat-card-border-slide {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

/* ---------- Command Category Card — Hologram Lines ---------- */
.cmd-category-card {
    position: relative;
    overflow: hidden;
}

.cmd-category-card .cmd-cat-count {
    position: relative;
}

.cmd-category-card .cmd-cat-count::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--blurple);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.cmd-category-card:hover .cmd-cat-count::after {
    transform: scaleX(1);
}

/* ---------- Enhanced Feature Icon — Hex Container ---------- */
.feature-icon {
    position: relative;
}

.feature-icon::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 12px;
    border: 1px solid rgba(88, 101, 242, 0.08);
    transition: all 0.4s ease;
}

.feature-card:hover .feature-icon::before {
    border-color: rgba(88, 101, 242, 0.25);
    box-shadow: inset 0 0 15px rgba(88, 101, 242, 0.05);
}

/* ---------- Selection Accent ---------- */
::selection {
    background: rgba(88, 101, 242, 0.3);
    color: #fff;
}

::-moz-selection {
    background: rgba(88, 101, 242, 0.3);
    color: #fff;
}

/* ---------- Focus Ring — Neon ---------- */
:focus-visible {
    outline: 2px solid rgba(88, 101, 242, 0.5);
    outline-offset: 3px;
    box-shadow: 0 0 12px rgba(88, 101, 242, 0.2);
}

/* ---------- Cmd Category Card — Typing Dots on Hover ---------- */
.cmd-category-card::after {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: rgba(88, 101, 242, 0.2);
    position: absolute;
    bottom: 8px;
    right: 12px;
    letter-spacing: 1px;
}

.cmd-category-card:nth-child(1)::after { content: '0x4D4F44'; }
.cmd-category-card:nth-child(2)::after { content: '0x534543'; }
.cmd-category-card:nth-child(3)::after { content: '0x535953'; }
.cmd-category-card:nth-child(4)::after { content: '0x55544C'; }
.cmd-category-card:nth-child(5)::after { content: '0x564F43'; }
.cmd-category-card:nth-child(6)::after { content: '0x414920'; }
.cmd-category-card:nth-child(7)::after { content: '0x41444D'; }

.cmd-category-card:hover::after {
    color: rgba(88, 101, 242, 0.45);
}

/* ============================================
   FUTURISTIC DETAIL EFFECTS — v2.2
   Ambient glow orbs, background mesh, section
   coordinates, hologram flicker, mouse trail,
   footer binary, security radar, breathing
   ============================================ */

/* ---------- Animated Background Mesh — Global ---------- */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 20%, rgba(88, 101, 242, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 80%, rgba(54, 25, 253, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(123, 140, 255, 0.02) 0%, transparent 60%);
    animation: bg-mesh-breathe 12s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes bg-mesh-breathe {
    0%, 100% {
        background:
            radial-gradient(ellipse at 15% 20%, rgba(88, 101, 242, 0.04) 0%, transparent 50%),
            radial-gradient(ellipse at 85% 80%, rgba(54, 25, 253, 0.03) 0%, transparent 50%),
            radial-gradient(ellipse at 50% 50%, rgba(123, 140, 255, 0.02) 0%, transparent 60%);
    }
    33% {
        background:
            radial-gradient(ellipse at 30% 70%, rgba(88, 101, 242, 0.05) 0%, transparent 50%),
            radial-gradient(ellipse at 70% 20%, rgba(54, 25, 253, 0.04) 0%, transparent 50%),
            radial-gradient(ellipse at 50% 50%, rgba(123, 140, 255, 0.015) 0%, transparent 60%);
    }
    66% {
        background:
            radial-gradient(ellipse at 80% 40%, rgba(88, 101, 242, 0.035) 0%, transparent 50%),
            radial-gradient(ellipse at 20% 60%, rgba(54, 25, 253, 0.04) 0%, transparent 50%),
            radial-gradient(ellipse at 50% 50%, rgba(123, 140, 255, 0.025) 0%, transparent 60%);
    }
}

/* ---- Scroll Progress Bar ---- */
#scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    z-index: 9999;
    pointer-events: none;
    border-radius: 0 2px 2px 0;
}

/* ---- Copy toast ---- */
#copy-toast {
    font-family: var(--font-mono, monospace);
}

/* ---- Code copy cursor ---- */
.cmd-cat-examples li code,
.command-syntax {
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.cmd-cat-examples li code:hover,
.command-syntax:hover {
    background: rgba(88, 101, 242, 0.2);
    color: #fff;
}

/* ---- Section dots nav ---- */
#section-dots {
    mix-blend-mode: normal;
}

/* ---- Card scan sweep ---- */
.card-scan-sweep {
    will-change: left;
}

.ambient-orbs {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at center, rgba(0,0,0,1) 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 80% at center, rgba(0,0,0,1) 30%, transparent 100%);
}

.ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    animation: orb-drift linear infinite;
}

.ambient-orb:nth-child(1) {
    width: 400px;
    height: 400px;
    background: rgba(88, 101, 242, 0.3);
    top: 10%;
    left: -5%;
    animation-duration: 25s;
    animation-delay: 0s;
}

.ambient-orb:nth-child(2) {
    width: 300px;
    height: 300px;
    background: rgba(54, 25, 253, 0.25);
    top: 60%;
    right: -5%;
    animation-duration: 30s;
    animation-delay: -8s;
}

.ambient-orb:nth-child(3) {
    width: 250px;
    height: 250px;
    background: rgba(123, 140, 255, 0.2);
    top: 40%;
    left: 30%;
    animation-duration: 35s;
    animation-delay: -15s;
}

@keyframes orb-drift {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(60px, -40px) scale(1.1); }
    50% { transform: translate(-30px, 50px) scale(0.9); }
    75% { transform: translate(40px, 20px) scale(1.05); }
    100% { transform: translate(0, 0) scale(1); }
}

/* ---------- Section Corner Coordinates ---------- */
.section-coords {
    position: absolute;
    top: 24px;
    right: 24px;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: rgba(88, 101, 242, 0.2);
    letter-spacing: 1.5px;
    z-index: 1;
    pointer-events: none;
    text-align: right;
    line-height: 1.6;
}

.section-coords-line {
    display: block;
    transition: color 0.6s ease;
}

.section.section-visible .section-coords {
    color: rgba(88, 101, 242, 0.3);
}

/* ---------- Mouse Cursor Glow (JS-driven) ---------- */
.cursor-glow {
    position: fixed;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(88, 101, 242, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    will-change: left, top;
    mix-blend-mode: screen;
}

/* ---------- Card Hologram Flicker (JS-toggled) ---------- */
.hologram-flicker {
    animation: hologram-flash 0.15s steps(2) 1;
}

@keyframes hologram-flash {
    0% { opacity: 1; filter: brightness(1.3) hue-rotate(5deg); }
    25% { opacity: 0.7; filter: brightness(0.9) hue-rotate(-3deg); }
    50% { opacity: 1; filter: brightness(1.1) hue-rotate(2deg); }
    75% { opacity: 0.85; filter: brightness(1.2) hue-rotate(-2deg); }
    100% { opacity: 1; filter: brightness(1) hue-rotate(0deg); }
}

/* ---------- Footer Binary Ticker ---------- */
.footer-binary-ticker {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 18px;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: rgba(88, 101, 242, 0.12);
    letter-spacing: 2px;
    line-height: 18px;
    white-space: nowrap;
    pointer-events: none;
}

.footer-binary-track {
    display: inline-block;
    animation: binary-scroll 40s linear infinite;
}

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

/* ---------- Section Reveal Glitch Flash ---------- */
.section-glitch-reveal {
    animation: section-reveal-flash 0.4s ease-out;
}

@keyframes section-reveal-flash {
    0% { filter: brightness(1.3) contrast(1.1); transform: translateY(0) skewX(-0.5deg); }
    30% { filter: brightness(1) contrast(1); transform: translateY(0) skewX(0.3deg); }
    60% { filter: brightness(1.1) contrast(1.05); transform: translateY(0) skewX(-0.2deg); }
    100% { filter: brightness(1) contrast(1); transform: translateY(0) skewX(0deg); }
}

/* ---------- Security Radar Sweep ---------- */
.security-radar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.security-radar::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(88, 101, 242, 0.1);
}

.security-radar::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, rgba(88, 101, 242, 0.5), transparent);
    transform-origin: left center;
    animation: radar-sweep 4s linear infinite;
}

@keyframes radar-sweep {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---------- Enhanced Nav Links — Underline Slide ---------- */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--blurple-light);
    transition: width 0.3s ease;
    box-shadow: 0 0 6px rgba(88, 101, 242, 0.3);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* ---------- Enhanced Loader — Glitch Text ---------- */
.loader-title {
    animation: loader-flicker 2s ease-in-out infinite;
}

@keyframes loader-flicker {
    0%, 100% { opacity: 1; text-shadow: 0 0 10px rgba(88, 101, 242, 0.5); }
    50% { opacity: 0.95; text-shadow: 0 0 20px rgba(88, 101, 242, 0.8), 0 0 40px rgba(88, 101, 242, 0.3); }
    92% { opacity: 1; }
    93% { opacity: 0.6; transform: translateX(2px); }
    94% { opacity: 1; transform: translateX(0); }
}

/* ---------- Feature Card Border Breathing ---------- */
.feature-card {
    --breath-opacity: 0.08;
    border-color: rgba(88, 101, 242, var(--breath-opacity));
    animation: card-border-breathe 6s ease-in-out infinite;
}

.feature-card:nth-child(even) {
    animation-delay: -3s;
}

@keyframes card-border-breathe {
    0%, 100% { --breath-opacity: 0.08; }
    50% { --breath-opacity: 0.18; }
}

/* ---------- Tech Card Version Pulse ---------- */
.tech-version {
    animation: version-pulse 4s ease-in-out infinite;
}

.tech-card:nth-child(even) .tech-version {
    animation-delay: -2s;
}

@keyframes version-pulse {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 12px rgba(88, 101, 242, 0.15); }
}

/* ---------- CTA Title Shimmer ---------- */
.cta-title {
    background-image: linear-gradient(
        110deg,
        transparent 20%,
        rgba(123, 140, 255, 0.08) 40%,
        rgba(123, 140, 255, 0.12) 50%,
        rgba(123, 140, 255, 0.08) 60%,
        transparent 80%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: cta-shimmer 6s ease-in-out infinite;
    position: relative;
}

@keyframes cta-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Footer Version Typing ---------- */
.footer-version {
    position: relative;
}

.footer-version::after {
    content: '█';
    animation: footer-cursor 1.2s step-end infinite;
    color: rgba(88, 101, 242, 0.4);
    margin-left: 2px;
    font-size: 0.8em;
}

@keyframes footer-cursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ---------- Selection Accent ---------- */
::selection {
    background: rgba(88, 101, 242, 0.3);
    color: #fff;
}

::-moz-selection {
    background: rgba(88, 101, 242, 0.3);
    color: #fff;
}

/* ---------- Focus Ring — Neon ---------- */
:focus-visible {
    outline: 2px solid rgba(88, 101, 242, 0.5);
    outline-offset: 3px;
    box-shadow: 0 0 12px rgba(88, 101, 242, 0.2);
}