/* ============================================================
   HERO / INDEX MAIN PAGE
============================================================ */

.hero {
    padding-top: 100px;
    text-align: center;
}

.hero-title {
    padding-bottom:  var(--space-sm);
    font-size: var(--font-size-5xl);
    font-weight: 500;
    color: var(--color-text-dark);
}

.hero-title p {
    margin: 0;
}

.hero-actions {
    padding-top: var(--space-2xl);
}

/* ============================================================
   FEATURE CARDS
============================================================ */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

.feature-card {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: var(--space-sm);
    text-align: center;
}

.feature-card-icon img {
    width: 25px;
    height: 25px;
}

.feature-card-title {
    font-weight: 500;
    color: var(--color-text-dark);
}

.feature-card-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
}


/* ============================================================
   INFO SECTION (WHO WE ARE)
============================================================ */


.info-grid {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-lg);
    row-gap: var(--space-lg);
}

/* ============================================================
   EVALUATION SECTION (WHY CHOOSE US)
============================================================ */

.why-section {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
    background-color: var(--color-bg-light);
}

.why-inner {
    max-width: var(--max-width-content);
    margin: 0 auto;
    text-align: center;
}


/* ============================================================
   EVALUATION FLOW GRID
============================================================ */

.evaluation-layout {
    max-width: var(--max-width-wide);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 2fr;
    column-gap: 72px;
}

.evaluation-intro {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows:auto auto 1fr;
    grid-row-gap: 24px;
}

.evaluation-actions {
    display: flex;
    gap: var(--space-md);
}

.evaluation-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 40px;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 900px) {
    .evaluation-layout {
        grid-template-columns: 1fr;
        row-gap: var(--space-3xl);
    }
}