/* HERO POLISH */

#hero {
    min-height: 100vh;
}

.hero-title span {
    display: inline-block;
}

/* CTA Button – premium feel */
.primary-btn {
    background: #111;
    color: #fff;
    padding: 1rem 2.8rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.4s ease;
}

.primary-btn:hover {
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* Subtle glow on hover */
.primary-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
            rgba(255, 255, 255, 0.25),
            transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.primary-btn:hover::after {
    opacity: 1;
}

.hero-title span,
.hero-title .char {
    display: inline-block;
    will-change: transform;
}

.hero-sub {
    opacity: 0;
    transform: translateY(30px);
}


/* Better mobile spacing */
@media (max-width: 640px) {
    .hero-line {
        margin-bottom: 2rem;
    }
}

/* Optical centering */
.hero-center-fix {
    transform: translateY(-3%);
}

/* Slightly reduce offset on mobile */
@media (max-width: 640px) {
    .hero-center-fix {
        transform: translateY(-1.5%);
    }
}