/* ============================================================
   CARD COMPONENTS
   ============================================================ */


/* ============================================================
   SERVICE CARD
   ============================================================ */

.service-card {

    position: relative;

    height: 100%;

    display: flex;

    flex-direction: column;

    padding: var(--spacing-xl);

    background-color: var(--color-white);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);

    box-shadow:
        var(--shadow-sm);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
}


.service-card:hover {

    transform:
        translateY(-6px);

    border-color:
        var(--color-secondary-light);

    box-shadow:
        var(--shadow-md);
}


/* ------------------------------------------------------------
   Icon
   ------------------------------------------------------------ */

.service-card__icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;

    height: 52px;

    margin-bottom:
        var(--spacing-lg);

    background:
        rgba(182, 139, 64, 0.12);

    border-radius:
        var(--radius-sm);

    color:
        var(--color-accent);

    font-size:
        var(--font-size-sm);

    font-weight:
        700;

    letter-spacing:
        0.05em;
}


/* ------------------------------------------------------------
   Content
   ------------------------------------------------------------ */

.service-card__title {

    margin-bottom:
        var(--spacing-sm);

    color:
        var(--color-primary);

    font-size:
        var(--font-size-xl);

}


.service-card__description {

    flex-grow: 1;

    margin-bottom:
        var(--spacing-lg);

    color:
        var(--color-text-light);

}


/* ------------------------------------------------------------
   Link
   ------------------------------------------------------------ */

.service-card__link {

    display: inline-flex;

    align-items: center;

    gap:
        var(--spacing-xs);

    color:
        var(--color-primary);

    font-size:
        var(--font-size-sm);

    font-weight:
        600;

    transition:
        color var(--transition-normal);
}


.service-card__link::after {

    content:
        "→";

    transition:
        transform var(--transition-normal);
}


.service-card:hover
.service-card__link {

    color:
        var(--color-accent-dark);
}


.service-card:hover
.service-card__link::after {

    transform:
        translateX(4px);
}


/* ============================================================
   SECTOR CARD
   ============================================================ */

.sector-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 280px;

    padding:
        var(--spacing-2xl);

    background:
        var(--color-primary);

    border-radius:
        var(--radius-md);

    overflow:
        hidden;

    color:
        var(--color-white);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}


.sector-card::before {

    content:
        "";

    position:
        absolute;

    top:
        -80px;

    right:
        -80px;

    width:
        200px;

    height:
        200px;

    border:
        1px solid
        rgba(255, 255, 255, 0.1);

    border-radius:
        50%;
}


.sector-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        var(--shadow-lg);
}


.sector-card__title {

    position:
        relative;

    margin-bottom:
        var(--spacing-md);

    color:
        var(--color-white);

    font-size:
        var(--font-size-2xl);
}


.sector-card__description {

    position:
        relative;

    flex-grow: 1;

    color:
        rgba(255, 255, 255, 0.75);
}


.sector-card__link {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        var(--spacing-xs);

    color:
        var(--color-accent-light);

    font-size:
        var(--font-size-sm);

    font-weight:
        600;
}


.sector-card__link::after {

    content:
        "→";
}


/* ============================================================
   INTRODUCTION BLOCK
   ============================================================ */

.intro-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        var(--spacing-4xl);

    align-items:
        center;
}


.intro-grid__content {

    max-width:
        620px;
}


.intro-grid__visual {

    min-height:
        420px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-primary-light)
        );

    border-radius:
        var(--radius-lg);

    overflow:
        hidden;

    box-shadow:
        var(--shadow-lg);
}


.intro-grid__placeholder {

    padding:
        var(--spacing-2xl);

    color:
        rgba(255, 255, 255, 0.7);

    font-size:
        var(--font-size-sm);

    text-align:
        center;
}


/* ============================================================
   AUDIT FLASH
   ============================================================ */

.audit-flash {

    position:
        relative;

    overflow:
        hidden;

    background:
        var(--color-accent);

    border-radius:
        var(--radius-lg);

    color:
        var(--color-white);
}


.audit-flash::before {

    content:
        "";

    position:
        absolute;

    top:
        -100px;

    right:
        -100px;

    width:
        300px;

    height:
        300px;

    border:
        1px solid
        rgba(255, 255, 255, 0.2);

    border-radius:
        50%;

    box-shadow:
        0 0 0 60px rgba(255, 255, 255, 0.03),
        0 0 0 120px rgba(255, 255, 255, 0.02);
}


.audit-flash__content {

    position:
        relative;

    z-index:
        1;

    display:
        grid;

    grid-template-columns:
        2fr 1fr;

    gap:
        var(--spacing-3xl);

    align-items:
        center;

    padding:
        var(--spacing-3xl);
}


.audit-flash__eyebrow {

    display:
        inline-block;

    margin-bottom:
        var(--spacing-md);

    color:
        rgba(255, 255, 255, 0.8);

    font-size:
        var(--font-size-sm);

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.audit-flash__title {

    margin-bottom:
        var(--spacing-md);

    color:
        var(--color-white);

    font-size:
        var(--font-size-3xl);
}


.audit-flash__text {

    max-width:
        700px;

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.85);

    font-size:
        var(--font-size-lg);
}


.audit-flash__action {

    display:
        flex;

    justify-content:
        flex-end;
}

/* ============================================================
   SECTOR CARD BUTTON
   ============================================================ */

.sector-card .btn--outline {

    margin-top:
        var(--spacing-lg);

    background:
        var(--color-white);

    color:
        var(--color-primary);

    border:
        1px solid
        var(--color-white);

}


.sector-card .btn--outline:hover {

    background:
        var(--color-accent);

    color:
        var(--color-white);

    border-color:
        var(--color-accent);

    transform:
        translateY(-2px);

}