:root {
    --neon-pink: #ff1cf7;
    --neon-blue: #00f0ff;
    --neon-purple: #b026ff;
    --dark-bg: #0a0a0f;
    --dark-surface: #141420;
    --text-primary: #ffffff;
    --text-secondary: #a8a8b8;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--dark-bg);
    color: var(--text-primary);
    position: relative;
}

/* Animated star field */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow:
        100px 200px white, 300px 100px white, 500px 300px white,
        700px 150px white, 200px 400px white, 600px 500px white,
        150px 600px white, 450px 400px white, 800px 250px white,
        50px 100px white, 250px 50px white, 550px 200px white,
        350px 450px white, 650px 350px white, 900px 450px white,
        120px 320px white, 420px 520px white, 720px 120px white,
        180px 280px white, 480px 180px white, 780px 380px white;
    animation: stars 150s linear infinite;
}

.stars::after {
    width: 1px;
    height: 1px;
    box-shadow:
        200px 300px white, 400px 200px white, 600px 400px white,
        800px 250px white, 300px 500px white, 700px 600px white,
        250px 700px white, 550px 500px white, 900px 350px white,
        100px 150px white, 350px 100px white, 650px 250px white,
        450px 550px white, 750px 450px white, 950px 550px white;
    animation: stars 200s linear infinite;
}

@keyframes stars {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-1000px);
    }
}

/* Scanline effect */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    background: repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.15) 1px,
            transparent 1px,
            transparent 2px);
    animation: scanline 8s linear infinite;
}

@keyframes scanline {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(10px);
    }
}

/* Navigation */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 3rem;
    background: rgba(10, 10, 15, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 28, 247, 0.2);
}

.nav-logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--text-primary);
}

.nav-logo .neon {
    color: var(--neon-pink);
    text-shadow:
        0 0 10px var(--neon-pink),
        0 0 20px var(--neon-pink),
        0 0 30px var(--neon-pink);
    animation: neon-pulse 2s ease-in-out infinite alternate;
}

@keyframes neon-pulse {
    from {
        text-shadow:
            0 0 10px var(--neon-pink),
            0 0 20px var(--neon-pink),
            0 0 30px var(--neon-pink);
    }

    to {
        text-shadow:
            0 0 20px var(--neon-pink),
            0 0 30px var(--neon-pink),
            0 0 40px var(--neon-pink),
            0 0 50px var(--neon-pink);
    }
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    padding: 0.5rem 1rem;
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--neon-pink);
    transform: translateX(-50%);
    transition: width 0.3s ease;
    box-shadow: 0 0 10px var(--neon-pink);
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-primary);
}

.nav-link:hover::before,
.nav-link.active::before {
    width: 80%;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8rem 3rem 4rem;
    gap: 4rem;
    position: relative;
    z-index: 1;
}

.hero-content {
    flex: 1;
    max-width: 600px;
}

.hero-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.glitch {
    position: relative;
    display: inline-block;
    animation: glitch-skew 5s infinite linear alternate-reverse;
}

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

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 var(--neon-blue);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -2px 0 var(--neon-pink);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        clip: rect(10px, 9999px, 31px, 0);
    }

    20% {
        clip: rect(85px, 9999px, 140px, 0);
    }

    40% {
        clip: rect(45px, 9999px, 98px, 0);
    }

    60% {
        clip: rect(120px, 9999px, 155px, 0);
    }

    80% {
        clip: rect(25px, 9999px, 70px, 0);
    }

    100% {
        clip: rect(95px, 9999px, 125px, 0);
    }
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(65px, 9999px, 119px, 0);
    }

    20% {
        clip: rect(45px, 9999px, 98px, 0);
    }

    40% {
        clip: rect(120px, 9999px, 155px, 0);
    }

    60% {
        clip: rect(10px, 9999px, 31px, 0);
    }

    80% {
        clip: rect(95px, 9999px, 125px, 0);
    }

    100% {
        clip: rect(25px, 9999px, 70px, 0);
    }
}

@keyframes glitch-skew {
    0% {
        transform: skew(0deg);
    }

    10% {
        transform: skew(-2deg);
    }

    20% {
        transform: skew(0deg);
    }

    30% {
        transform: skew(1deg);
    }

    40% {
        transform: skew(0deg);
    }

    100% {
        transform: skew(0deg);
    }
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}

.tag {
    padding: 0.5rem 1rem;
    background: rgba(255, 28, 247, 0.1);
    border: 1px solid rgba(255, 28, 247, 0.3);
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.tag:hover {
    background: rgba(255, 28, 247, 0.2);
    border-color: var(--neon-pink);
    box-shadow: 0 0 15px rgba(255, 28, 247, 0.3);
    transform: translateY(-2px);
}

.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn {
    position: relative;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background: var(--neon-pink);
    color: white;
    box-shadow: 0 0 20px rgba(255, 28, 247, 0.5);
}

.btn-primary:hover {
    box-shadow: 0 0 40px rgba(255, 28, 247, 0.8);
    transform: translateY(-2px);
}

.btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn-primary:hover .btn-glow {
    left: 100%;
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--neon-pink);
}

.btn-secondary:hover {
    background: rgba(255, 28, 247, 0.1);
    box-shadow: 0 0 20px rgba(255, 28, 247, 0.3);
    transform: translateY(-2px);
}

/* Hero Visual */
.hero-visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cyber-frame {
    position: relative;
    width: 400px;
    height: 400px;
}

.frame-corner {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 3px solid var(--neon-pink);
    box-shadow: 0 0 20px var(--neon-pink);
}

.frame-corner.tl {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
    animation: corner-glow 2s ease-in-out infinite alternate;
}

.frame-corner.tr {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
    animation: corner-glow 2s ease-in-out 0.5s infinite alternate;
}

.frame-corner.bl {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
    animation: corner-glow 2s ease-in-out 1s infinite alternate;
}

.frame-corner.br {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
    animation: corner-glow 2s ease-in-out 1.5s infinite alternate;
}

@keyframes corner-glow {
    from {
        box-shadow: 0 0 20px var(--neon-pink);
    }

    to {
        box-shadow: 0 0 40px var(--neon-pink), 0 0 60px var(--neon-pink);
    }
}

.frame-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pulse-ring {
    position: absolute;
    width: 150px;
    height: 150px;
    border: 3px solid var(--neon-pink);
    border-radius: 50%;
    animation: pulse 3s ease-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Features Section */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 4rem 3rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.feature {
    padding: 2rem;
    background: rgba(20, 20, 32, 0.6);
    border: 1px solid rgba(255, 28, 247, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    text-align: center;
}

.feature:hover {
    border-color: var(--neon-pink);
    box-shadow: 0 0 30px rgba(255, 28, 247, 0.3);
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--neon-pink);
}

.feature p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 1024px) {
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 6rem 2rem 3rem;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-cta {
        justify-content: center;
    }

    .hero-visual {
        margin-top: 2rem;
    }

    .cyber-frame {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 768px) {
    .nav {
        padding: 1rem 1.5rem;
    }

    .nav-logo {
        font-size: 1.2rem;
    }

    .nav-links {
        gap: 1rem;
    }

    .nav-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.9rem;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .features {
        padding: 3rem 1.5rem;
        gap: 1.5rem;
    }

    .cyber-frame {
        width: 250px;
        height: 250px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .btn {
        width: 100%;
    }
}

a {
    text-decoration: none;

}

.site-footer {
    padding: 24px 0;
    background-color: rgba(14, 14, 23, 0.8);
    ;
    /* optional */
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 0.9rem;
    color: #bdbdbd;
}

.footer-inner a {
    color: inherit;
    text-decoration: none;
}

.footer-inner a:hover {
    text-decoration: underline;
}

/* Mobile-friendly spacing */
@media (max-width: 600px) {
    .footer-inner {
        flex-direction: column;
        gap: 12px;
    }
}