/* Hero background */
.dna-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top left, #1b2735 0%, #090a0f 55%, #000000 100%);
    overflow: hidden;
    color: #f5f5f5;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

/* Text overlay */
.dna-overlay {
    position: absolute;
    left: 8%;
    max-width: 420px;
}

    .dna-overlay h1 {
        font-weight: 600;
        letter-spacing: 0.08em;
        font-size: 2.4rem;
        margin-bottom: 0.5rem;
    }

    .dna-overlay p {
        font-size: 1rem;
        opacity: 0.85;
    }

/* DNA stripe container */
.dna-stripe {
    position: relative;
    width: 260px;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.35));
}

/* Columns of dots */
.dna-column {
    position: relative;
    width: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .dna-column.left {
        transform: translateX(-40px);
    }

    .dna-column.right {
        transform: translateX(40px);
    }

    /* Dots */
    .dna-column span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: radial-gradient(circle, #00f5ff 0%, #00b3ff 40%, #0077ff 100%);
        box-shadow: 0 0 12px rgba(0, 255, 255, 0.9);
        animation: dna-dot-pulse 2.4s infinite ease-in-out;
    }

    /* Offset animation between dots */
    .dna-column.left span:nth-child(odd),
    .dna-column.right span:nth-child(even) {
        animation-delay: 0.4s;
    }

/* Connecting lines */
.dna-links {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

    .dna-links span {
        display: block;
        height: 2px;
        margin: 0 40px;
        background: linear-gradient(to right, #00f5ff 0%, #ffffff 50%, #00f5ff 100%);
        opacity: 0.85;
        transform-origin: center;
        animation: dna-twist 4s infinite linear;
    }

        /* Slight phase shift per link */
        .dna-links span:nth-child(odd) {
            animation-delay: 0.4s;
        }

/* Dot pulsing */
@keyframes dna-dot-pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.25);
        opacity: 1;
    }

    100% {
        transform: scale(0.9);
        opacity: 0.7;
    }
}

/* Stripe twisting (simulated helix) */
@keyframes dna-twist {
    0% {
        transform: translateX(0) scaleX(1);
        opacity: 0.9;
    }

    25% {
        transform: translateX(6px) scaleX(1.05);
        opacity: 1;
    }

    50% {
        transform: translateX(0) scaleX(1);
        opacity: 0.9;
    }

    75% {
        transform: translateX(-6px) scaleX(1.05);
        opacity: 1;
    }

    100% {
        transform: translateX(0) scaleX(1);
        opacity: 0.9;
    }
}

/* Responsive tweak */
@media (max-width: 768px) {
    .dna-hero {
        flex-direction: column;
        padding: 40px 20px;
    }

    .dna-overlay {
        position: static;
        text-align: center;
        margin-bottom: 24px;
    }
}