@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Rajdhani:wght@300;400;500;600;700&display=swap');
        
body {
    background-color: #0a0a1a;
    color: #e8fffe;
    overflow-x: hidden;
}

.cyber-border {
    position: relative;
    border: 2px solid transparent;
}

.cyber-border::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #1eedea, #ffb300, #1eedea);
    background-size: 200% 200%;
    z-index: -1;
    animation: gradient 3s ease infinite;
}

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

.glow-text {
    text-shadow: 0 0 8px rgba(30, 237, 234, 0.7);
}

.glow-box {
    box-shadow: 0 0 15px rgba(30, 237, 234, 0.5);
}

.hexagon {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(30, 237, 234, 0.3);
}

.download-btn {
    position: relative;
    overflow: hidden;
}

.download-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0) 45%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0) 55%
    );
    transform: rotate(30deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { left: -50%; top: -50%; }
    100% { left: 150%; top: 150%; }
}

.image-lg {
    width: 375px; /* 320px * 1.5 */
    height: 375px; /* 320px * 1.5 */
}
@media (min-width: 768px) { /* md breakpoint */
    .image-lg {
        width: 450px; /* 384px * 1.5 */
        height: 450px; /* 384px * 1.5 */
    }
}