/* ... existing styles ... */
.sci-fi-frame {
    background-color: rgba(16, 24, 39, 0.5); /* dark-secondary with opacity */
    border: 1px solid rgba(0, 150, 255, 0.2);
    position: relative;
    padding: 1.5rem;
    transition: all 0.3s ease;
}
.sci-fi-frame:hover {
    border-color: rgba(0, 150, 255, 0.6);
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.2);
}
.sci-fi-frame::before,
.sci-fi-frame::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: transparent;
    transition: all 0.3s ease;
}
.sci-fi-frame::before {
    top: -1px;
    left: -1px;
    border-top: 3px solid #0096FF;
    border-left: 3px solid #0096FF;
}
.sci-fi-frame::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 3px solid #0096FF;
    border-right: 3px solid #0096FF;
}
.sci-fi-button {
    background: transparent;
    border: 1px solid #0096FF;
    color: #0096FF;
    padding: 0.75rem 1.5rem;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    clip-path: polygon(10% 0%, 100% 0%, 100% 80%, 90% 100%, 0% 100%, 0% 20%);
    transition: all 0.3s ease;
}
.sci-fi-button:hover {
    background-color: rgba(0, 150, 255, 0.1);
    box-shadow: 0 0 15px rgba(0, 150, 255, 0.5);
    transform: translateY(-2px);
}
.sci-fi-button-filled {
    background-color: #0096FF;
    color: #0A0F1A;
    border: 1px solid #0096FF;
}
 .sci-fi-button-filled:hover {
    background-color: #4D8BFF;
    border-color: #4D8BFF;
    box-shadow: 0 0 20px rgba(77, 139, 255, 0.5);
}
.search-bar {
    background: #101827;
    border: 1px solid rgba(0, 150, 255, 0.3);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
}
.nav-link:hover {
    color: #0096FF;
}
.parallax-element {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform;
}
#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.merch-tab {
    background: transparent;
    border: 1px solid transparent;
    color: #E0E0E0; /* accent */
    padding: 0.5rem 1.5rem;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 0.875rem;
}
.merch-tab:hover {
    color: #0096FF; /* primary */
}
.merch-tab.active {
    background-color: #0096FF; /* primary */
    color: #0A0F1A; /* dark */
    clip-path: polygon(10% 0%, 100% 0%, 100% 80%, 90% 100%, 0% 100%, 0% 20%);
}