/* ───────── INFINITE BRAND MARQUEE (滚动品牌条) ───────── */
.marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.marquee-track {
    display: flex;
    width: max-content;
    gap: 1rem;
    will-change: transform;
}
.marquee-track > * {
    flex-shrink: 0;
}
@keyframes marquee-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes marquee-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
.marquee-left  .marquee-track { animation: marquee-left  40s linear infinite; }
.marquee-right .marquee-track { animation: marquee-right 45s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

.brand-chip {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    min-height: 3.25rem;
    padding: .65rem 1.25rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #cbd5e1;
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .01em;
    white-space: nowrap;
    transition: all .25s ease;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px rgba(0,0,0,0.25);
}
.brand-chip:hover {
    transform: translateY(-2px) scale(1.03);
    border-color: rgba(255,255,255,0.2);
    background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
    color: #fff;
    box-shadow: 0 14px 40px rgba(0,0,0,0.4);
}
.brand-chip .chip-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .5rem;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
}
.brand-chip .chip-icon > * {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.brand-chip .chip-icon svg {
    width: 1.15rem;
    height: 1.15rem;
}
.category-tag {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem 1.15rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.category-tag .tag-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 9999px;
    box-shadow: 0 0 12px currentColor;
}
.category-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .9rem;
    padding: 0 .25rem;
}
.category-stats {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #94a3b8;
    font-size: .78rem;
    font-weight: 600;
}
.category-stats .num {
    font-size: 1.05rem;
    color: #fff;
    font-weight: 800;
}

/* ───────── 新增动画结束 ───────── */

* {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #05060f;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 80% 10%, rgba(139, 92, 246, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 60% 80%, rgba(14, 165, 233, 0.10) 0%, transparent 40%),
        linear-gradient(180deg, #05060f 0%, #0a0e1f 100%);
    color: #e2e8f0;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.07) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    pointer-events: none;
    z-index: 0;
}

.orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(80px);
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
    top: -10%;
    left: -10%;
    animation: orb-drift-1 18s ease-in-out infinite;
}

.orb-2 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);
    top: 20%;
    right: -15%;
    animation: orb-drift-2 22s ease-in-out infinite;
}

.orb-3 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
    bottom: -10%;
    left: 30%;
    animation: orb-drift-3 26s ease-in-out infinite;
}

@keyframes orb-drift-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(60px, 40px) scale(1.1); }
    66% { transform: translate(-40px, 80px) scale(0.95); }
}

@keyframes orb-drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-80px, -30px) scale(1.05); }
    66% { transform: translate(30px, -90px) scale(1.1); }
}

@keyframes orb-drift-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-60px, -50px) scale(0.9); }
    66% { transform: translate(80px, -20px) scale(1.08); }
}

/* ============ Hero 新版动画 ============ */

/* 渐变流动副标题（4色14s河流动效） */
.gradient-flow {
    background: linear-gradient(270deg, #60a5fa, #a78bfa, #67e8f9, #c084fc, #60a5fa);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientFlow 14s linear infinite;
}
@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: -300% 50%; }
}

/* 终端代码逐行淡入 */
.animate-term-fill {
    animation: termFill 0.35s ease-out forwards;
}
@keyframes termFill {
    from { opacity: 0; transform: translateX(-14px); filter: blur(4px); }
    to { opacity: 1; transform: translateX(0); filter: blur(0); }
}

/* 打字机光标闪烁 */
.cursor-blink {
    display: inline-block;
    font-weight: 900;
    color: #a78bfa;
    animation: blinkCursor 0.9s steps(1) infinite;
    margin-left: 2px;
}
@keyframes blinkCursor {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* 漂浮装饰 */
.animate-float {
    animation: floatY 5s ease-in-out infinite;
}
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* 矩阵单元格脉冲 */
@keyframes matrix-pulse {
    0%, 100% {
        opacity: 0.55;
        transform: scale(0.96);
        filter: brightness(0.85);
    }
    50% {
        opacity: 1;
        transform: scale(1.06);
        filter: brightness(1.25) drop-shadow(0 0 6px currentColor);
    }
}

/* ========== Hero 新版：接入前/后对比 + 马赛克墙 ========== */

/* 接入前/后容器的悬浮效果 */
.before-after-compare > div > .glass-strong {
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.before-after-compare > div:nth-child(1) > .glass-strong:hover {
    transform: translateY(-2px) scale(1.01);
    border-color: rgba(251,113,133,0.55);
    box-shadow: 0 18px 40px -18px rgba(239,68,68,0.45), 0 0 0 1px rgba(251,113,133,0.2);
}
.before-after-compare > div:nth-child(3) > .glass-strong:hover {
    transform: translateY(-2px) scale(1.01);
    border-color: rgba(52,211,153,0.55);
    box-shadow: 0 18px 40px -18px rgba(16,185,129,0.45), 0 0 0 1px rgba(52,211,153,0.2);
}

/* 马赛克 Logo 墙 */
.logo-mosaic {
    perspective: 1200px;
}
/* 20 个 Logo 方块统一的悬浮 + 错峰延迟出现 */
.mosaic-chip {
    transition: transform .35s cubic-bezier(.2,.8,.2,1),
                box-shadow .35s ease,
                filter .35s ease,
                border-color .35s ease;
    will-change: transform;
    animation: chip-in 0.6s cubic-bezier(.2,.8,.2,1) both;
}
.mosaic-chip:hover {
    transform: translateY(-4px) scale(1.05);
    filter: brightness(1.15) saturate(1.2);
    border-color: rgba(255,255,255,0.35);
    box-shadow: 0 18px 40px -22px rgba(99,102,241,0.55);
    z-index: 5;
}
.mosaic-lg {
    transform-style: preserve-3d;
}
/* 每个 chip 错开 60ms 进场，形成波浪入场感 */
.mosaic-chip:nth-child(1) { animation-delay: .02s }
.mosaic-chip:nth-child(2) { animation-delay: .08s }
.mosaic-chip:nth-child(3) { animation-delay: .14s }
.mosaic-chip:nth-child(4) { animation-delay: .20s }
.mosaic-chip:nth-child(5) { animation-delay: .26s }
.mosaic-chip:nth-child(6) { animation-delay: .32s }
.mosaic-chip:nth-child(7) { animation-delay: .38s }
.mosaic-chip:nth-child(8) { animation-delay: .44s }
.mosaic-chip:nth-child(9) { animation-delay: .50s }
.mosaic-chip:nth-child(10) { animation-delay: .56s }
.mosaic-chip:nth-child(11) { animation-delay: .62s }
.mosaic-chip:nth-child(12) { animation-delay: .68s }
.mosaic-chip:nth-child(13) { animation-delay: .74s }
.mosaic-chip:nth-child(14) { animation-delay: .80s }
.mosaic-chip:nth-child(15) { animation-delay: .86s }
.mosaic-chip:nth-child(16) { animation-delay: .92s }
.mosaic-chip:nth-child(17) { animation-delay: .98s }
.mosaic-chip:nth-child(18) { animation-delay: 1.04s }
.mosaic-chip:nth-child(19) { animation-delay: 1.10s }
.mosaic-chip:nth-child(20) { animation-delay: 1.16s }
@keyframes chip-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.88);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* 马赛克墙扫光 */
@keyframes shimmer {
    0%   { transform: translateX(-120%); }
    55%  { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}

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

.gradient-text {
    background: linear-gradient(270deg, #60a5fa, #a78bfa, #67e8f9, #60a5fa);
    background-size: 300% 300%;
    animation: gradientShift 6s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    opacity: 0;
    animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ========== Hero 新版：多层能力环 + 中央仪表盘 ========== */

.ability-ring-wrap {
    perspective: 1400px;
    animation: abilityWrapIn 0.9s cubic-bezier(.2,.8,.2,1) both;
    animation-delay: .25s;
}
@keyframes abilityWrapIn {
    from { opacity: 0; transform: translateY(32px) scale(.9); filter: blur(8px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* 外层圆锥渐变背景光斑旋转 */
.ability-ring-bg {
    animation: abilityBgSpin 40s linear infinite;
}
@keyframes abilityBgSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* 三个能力环整体 + 各向独立旋转 */
.ability-ring {
    transform-style: preserve-3d;
    transition: filter .4s ease;
}
.ability-ring-outer {
    animation: ringSpinCW 55s linear infinite;
}
.ability-ring-middle {
    animation: ringSpinCCW 70s linear infinite;
}
.ability-ring-inner {
    animation: ringSpinCW 42s linear infinite;
}
@keyframes ringSpinCW  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ringSpinCCW { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }

/* 悬停整个容器时，所有环加速旋转 + 节点放大 */
.ability-ring-wrap:hover .ability-ring-outer  { animation-duration: 20s; }
.ability-ring-wrap:hover .ability-ring-middle { animation-duration: 28s; }
.ability-ring-wrap:hover .ability-ring-inner  { animation-duration: 16s; }

/* 外环 4 个节点 + 内环节点本身不旋转（抵消父级旋转？保留跟随，视觉更好） */
.ability-node {
    transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease;
    filter: drop-shadow(0 6px 12px rgba(99,102,241,0.25));
    animation: nodePulse 3s ease-in-out infinite;
}
.ability-node:nth-child(2) { animation-delay: .7s }
.ability-node:nth-child(3) { animation-delay: 1.4s }
.ability-node:nth-child(4) { animation-delay: 2.1s }
@keyframes nodePulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 6px 12px rgba(99,102,241,0.25)); }
    50%      { transform: scale(1.08); filter: drop-shadow(0 10px 20px rgba(99,102,241,0.4)) brightness(1.1); }
}

/* 中环 6 个模型芯片浮动相位差 */
.ability-chip {
    transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
    box-shadow: 0 6px 16px -8px rgba(15,23,42,0.7);
    animation: chipFloat 4.5s ease-in-out infinite;
}
.ability-chip:nth-child(1) { animation-delay: 0s }
.ability-chip:nth-child(2) { animation-delay: .75s }
.ability-chip:nth-child(3) { animation-delay: 1.5s }
.ability-chip:nth-child(4) { animation-delay: 2.25s }
.ability-chip:nth-child(5) { animation-delay: 3s }
.ability-chip:nth-child(6) { animation-delay: 3.75s }
@keyframes chipFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-4px) scale(1.08); }
}
.ability-chip:hover {
    border-color: rgba(255,255,255,0.45) !important;
    transform: translateY(-6px) scale(1.18) !important;
    box-shadow: 0 16px 30px -14px rgba(99,102,241,0.55);
    z-index: 10;
}

/* 内环 6 个能力点呼吸 */
.ability-dot {
    transition: transform .35s ease, box-shadow .35s ease;
    animation: dotBreathe 3.2s ease-in-out infinite;
}
.ability-dot:nth-child(1) { animation-delay: 0s }
.ability-dot:nth-child(2) { animation-delay: .5s }
.ability-dot:nth-child(3) { animation-delay: 1s }
.ability-dot:nth-child(4) { animation-delay: 1.5s }
.ability-dot:nth-child(5) { animation-delay: 2s }
.ability-dot:nth-child(6) { animation-delay: 2.5s }
@keyframes dotBreathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); filter: brightness(1.2); }
}

/* 三层 SVG 虚线流动（stroke-dashoffset 动画） */
.ability-dash-outer {
    animation: dashFlow 14s linear infinite;
}
.ability-dash-middle {
    animation: dashFlow 20s linear infinite reverse;
}
.ability-dash-inner {
    animation: dashFlow 10s linear infinite;
}
@keyframes dashFlow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -300; }
}

/* 中央仪表盘核心 */
.ability-core {
    animation: coreIn .9s cubic-bezier(.2,.8,.2,1) both;
    animation-delay: .5s;
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease;
}
.ability-ring-wrap:hover .ability-core {
    transform: translate(-50%, -50%) scale(1.06);
    border-color: rgba(167,139,250,0.55);
    box-shadow: 0 28px 60px -24px rgba(139,92,246,0.7);
}
@keyframes coreIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.6); filter: blur(8px); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}
.ability-core-halo {
    animation: coreHaloSpin 22s linear infinite;
}
@keyframes coreHaloSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.delay-100 { animation-delay: 100ms; transition-delay: 100ms; }
.delay-200 { animation-delay: 200ms; transition-delay: 200ms; }
.delay-300 { animation-delay: 300ms; transition-delay: 300ms; }

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-25px); }
}

.animate-float {
    animation: float 7s ease-in-out infinite;
}

@keyframes pulse-ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
    50% { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); }
}

.glass {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-strong {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.glass-card:hover::before {
    opacity: 1;
}

.glass-card:hover {
    border-color: rgba(99, 102, 241, 0.35);
    transform: translateY(-6px);
    box-shadow: 0 20px 60px -10px rgba(99, 102, 241, 0.25),
                0 10px 40px -10px rgba(0, 0, 0, 0.4);
}

.glass-card-blue:hover {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 20px 60px -10px rgba(59, 130, 246, 0.28),
                0 10px 40px -10px rgba(0, 0, 0, 0.4);
}

.glass-card-indigo:hover {
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 20px 60px -10px rgba(139, 92, 246, 0.28),
                0 10px 40px -10px rgba(0, 0, 0, 0.4);
}

.glass-card-emerald:hover {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 20px 60px -10px rgba(16, 185, 129, 0.28),
                0 10px 40px -10px rgba(0, 0, 0, 0.4);
}

.logo-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.logo-card:hover {
    transform: translateY(-6px);
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 20px 50px -15px rgba(99, 102, 241, 0.25);
}

.logo-img {
    width: 120px;
    height: 40px;
    object-fit: contain;
    transition: all 0.4s ease;
    filter: brightness(1) saturate(1);
}

.logo-card:hover .logo-img {
    transform: scale(1.08);
    filter: brightness(1.15) saturate(1.15);
}

.text-logo {
    font-weight: 700;
    font-size: 1.25rem;
    color: #cbd5e1;
    letter-spacing: -0.025em;
    transition: color 0.3s ease;
}

.logo-card:hover .text-logo {
    color: #a5b4fc;
}

.model-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 20px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    height: 60px;
    width: 100%;
    white-space: nowrap;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
    position: relative;
    overflow: hidden;
}

.model-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.model-badge:hover::before {
    opacity: 1;
}

.model-badge svg, .model-badge i, .model-badge img {
    width: 28px;
    height: 28px;
    font-size: 28px;
    object-fit: contain;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.3));
}

.model-badge .crop-grok {
    width: 28px;
    height: 28px;
    object-fit: cover;
    object-position: 25% center;
    border-radius: 50%;
}

.model-badge:hover {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 15px 40px -10px rgba(99, 102, 241, 0.3);
}

.badge-white { background-color: rgba(255, 255, 255, 0.05); color: #f1f5f9; border: 1px solid rgba(255, 255, 255, 0.1); }
.badge-black { background-color: rgba(0, 0, 0, 0.4); color: #f1f5f9; border: 1px solid rgba(255, 255, 255, 0.1); }

.divider-gradient {
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(99, 102, 241, 0.5) 20%,
        rgba(139, 92, 246, 0.5) 50%,
        rgba(59, 130, 246, 0.5) 80%,
        transparent 100%);
}

.btn-glow-primary {
    position: relative;
    overflow: hidden;
}

.btn-glow-primary::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4, #3b82f6);
    background-size: 300% 300%;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: gradientShift 5s ease infinite;
}

.btn-glow-primary:hover::before {
    opacity: 1;
}

.btn-glow-primary span {
    position: relative;
    z-index: 1;
}