/* ==========================================================================
   HOME PAGE SPECIFIC STYLES
   ========================================================================== */

.hero-content {
    max-width: 800px; margin: 0 auto; text-align: center;
    padding: 6rem 1.5rem; display: flex; flex-direction: column; align-items: center;
}

.hero { 
    padding: 4rem 1.5rem; 
    text-align: center; 
    max-width: 800px; 
    margin: 0 auto; 
}

.hero-title { 
    font-size: 3rem; 
    font-weight: 800; 
    margin-bottom: 1.5rem; 
    letter-spacing: -0.025em; 
}

[data-i18n="hero_subtitle"] {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    max-width: 700px;
    text-wrap: balance; /* Prevents awkward single words on a new line */
}

/* ==========================================================================
   8. MAIN PAGE CARDS (Moved from Global)
   ========================================================================== */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.5rem;
    width: 100%;
}

/* Responsive tweaks for Home only */
@media (max-width: 768px) {
    .hero-title { font-size: 2rem; }
}
/* ==========================================================================
   HERO SUBTITLE
   ========================================================================== */
.hero-subtitle {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    max-width: 700px;
    text-align: center;
}

/* ==========================================================================
   HERO ACTIONS
   ========================================================================== */
.hero-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   FEATURE CARDS
   ========================================================================== */
.feature-card .icon-wrapper {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}

.feature-card .icon-ai       { color: #a855f7; }
.feature-card .icon-portfolio { color: #60a5fa; }
.feature-card .icon-expert    { color: #34d399; }

.feature-card h3 { margin-bottom: 1rem; }

.feature-card p { color: var(--text-secondary); }