/* Hero Section - Mobile First */
.hero {
    min-height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-lg);
    text-align: center;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.hero-title {
    font-size: 1.75rem;
    font-weight: 300;
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.5px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.hero-subtitle {
    font-size: var(--font-size-base);
    font-weight: 300;
    line-height: var(--line-height-relaxed);
    color: var(--color-text-light);
    max-width: 100%;
    margin: 0 auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Small mobile devices */
@media (min-width: 481px) {
    .hero-title {
        font-size: var(--font-size-3xl);
        letter-spacing: -1px;
    }

    .hero-subtitle {
        font-size: var(--font-size-lg);
        max-width: 600px;
    }
}

/* Tablet and Desktop */
@media (min-width: 769px) {
    .hero {
        min-height: 65vh;
        padding: var(--spacing-xl) var(--spacing-md) var(--spacing-xl);
    }

    .hero-title {
        font-size: var(--font-size-4xl);
    }
}