.dark-split-hero {
    display: flex;
    align-items: center;
    padding: 6rem 5%;
    background-color: #1a1a1a;
    color: #ffffff;
    min-height: 85vh;
    gap: 4rem;
}
.dark-split-hero .content { flex: 1; }
.dark-split-hero .content h1 { font-size: 3.5rem; margin-bottom: 1.5rem; font-weight: 600; }
.dark-split-hero .content p { font-size: 1.15rem; margin-bottom: 2.5rem; color: #cccccc; line-height: 1.6; }
.dark-split-hero .btn-primary { background-color: #ffffff; color: #1a1a1a; }
.dark-split-hero .btn-primary:hover { background-color: #e6e6e6; }
.dark-split-hero .btn-outline { border-color: #ffffff; color: #ffffff; }
.dark-split-hero .btn-outline:hover { background-color: rgba(255,255,255,0.1); }

.dark-split-hero .image-container { flex: 1; }
.dark-split-hero .image-container img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

@media (max-width: 768px) {
    .dark-split-hero { flex-direction: column; text-align: center; padding: 4rem 5%; gap: 2rem; }
    .dark-split-hero .content h1 { font-size: 2.2rem; }
}
.dark-split-hero .image-container {
    flex: 1;
    position: relative;
}

.dark-split-hero .image-container img {
    width: 100%;
    border-radius: 8px;
    display: block;
}

.hero-overlay-text {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    padding: 4rem;

    background:
            linear-gradient(
                    to right,
                    rgba(0,0,0,0.72),
                    rgba(0,0,0,0.28)
            );

    border-radius: 8px;
}

.typing-wrapper {
    width: 100%;
    max-width: 620px;
}

.typing-line {
    color: rgba(255,255,255,0.88);
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.typing-word {
    font-size: 3rem;
    font-weight: 700;
    color: #aaaaaa;

    display: flex;
    align-items: center;
}

.cursor {
    margin-left: 4px;
    animation: blink 1s infinite;
    color: #aaaaaa;
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }

    51%, 100% {
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .hero-overlay-text {
        padding: 2rem;
    }

    .typing-line {
        font-size: 1rem;
    }

    .typing-word {
        font-size: 2rem;
    }
}