.hero-card {

    background:
        rgba(255, 255, 255, .08);

    backdrop-filter:
        blur(18px);

    border:
        1px solid rgba(255, 255, 255, .10);

    border-radius: 32px;

    padding: 35px;

    transition: .5s ease;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .10);
}

.hero-card:hover {

    transform:
        translateY(-10px);

    background:
        rgba(255, 255, 255, .14);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .18);
}

.hero-icon {

    width: 70px;
    height: 70px;

    border-radius: 22px;

    background:
        rgba(239, 68, 68, .15);

    border:
        1px solid rgba(239, 68, 68, .20);

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 24px;

    font-size: 28px;

    color: #EF4444;
}

.hero-card-title {

    color: white;

    font-size: 1.35rem;

    font-weight: 800;

    margin-bottom: 14px;
}

.hero-card-text {

    color: rgba(255, 255, 255, .75);

    line-height: 1.7;

    font-size: .95rem;
}

.value-card {

    background: white;

    border-radius: 32px;

    padding: 40px 30px;

    border: 1px solid #F1F5F9;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .05);

    transition: .4s ease;

    text-align: center;

}

.value-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .08);

}

.value-icon {

    width: 85px;
    height: 85px;

    margin: auto auto 24px;

    border-radius: 28px;

    background:
        rgba(239, 68, 68, .08);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 34px;

    color: #EF4444;

}
/* ========================================
   VALUES SECTION
======================================== */

.values-section {

    position: relative;
    padding: 8rem 0;
    background: #f5f5f7;
    overflow: hidden;

}

/* ========================================
   BLUR EFFECTS
======================================== */

.blur-effect {

    position: absolute;
    width: 24rem;
    height: 24rem;
    border-radius: 9999px;
    filter: blur(80px);

}

.blur-top {

    top: 0;
    left: 0;
    background: rgba(254, 202, 202, 0.6);

}

.blur-bottom {

    bottom: 0;
    right: 0;
    background: rgba(229, 231, 235, 0.7);

}

/* ========================================
   CONTAINER
======================================== */

.container-custom {

    position: relative;
    max-width: 1280px;
    margin: auto;
    padding-inline: 1.5rem;

}

/* ========================================
   SECTION HEADER
======================================== */

.section-header {

    text-align: center;
    margin-bottom: 6rem;

}

.section-badge {

    display: inline-flex;
    align-items: center;
    gap: .75rem;

    padding: .9rem 1.5rem;

    border-radius: 999px;

    border: 1px solid #fecaca;

    background: white;

    box-shadow: 0 4px 10px rgba(0,0,0,.03);

    margin-bottom: 2rem;

}

.section-badge span {

    color: var(--accent);
    font-weight: 700;
    font-size: .875rem;
    letter-spacing: .08em;

}

.section-title {

    max-width: 900px;

    margin-inline: auto;
    margin-bottom: 2rem;

    font-size: clamp(3rem, 6vw, 5rem);

    line-height: 1.05;

    font-weight: 900;

    color: var(--primary);

}

.section-line {

    width: 5rem;
    height: 4px;

    background: var(--accent);

    border-radius: 999px;

    margin: 0 auto 2rem;

}

.section-description {

    max-width: 800px;

    margin-inline: auto;

    color: #6b7280;

    font-size: 1.2rem;

    line-height: 1.8;

}

/* ========================================
   GRID
======================================== */

.values-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 2rem;

}

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

.value-card {

    position: relative;

    display: flex;
    flex-direction: column;

    padding: 3rem 2rem;

    background: white;

    border-radius: 35px;

    border: 1px solid #f3f4f6;

    overflow: hidden;

    transition: .4s ease;

    box-shadow: 0 10px 40px rgba(0,0,0,.04);

}

.value-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 60px rgba(0,0,0,.08);

}

/* ========================================
   ICON
======================================== */

.icon-wrapper {

    width: 6rem;
    height: 6rem;

    margin: 0 auto 2rem;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9999px;

    background: linear-gradient(to bottom right, #fef2f2, white);

    border: 1px solid #fee2e2;

}

.icon-wrapper i {

    font-size: 2rem;

    color: var(--accent);

}

/* ========================================
   CARD CONTENT
======================================== */

.card-title {

    font-size: 2rem;

    font-weight: 900;

    text-align: center;

    color: var(--primary);

    margin-bottom: 1rem;

}

.card-line {

    width: 3rem;
    height: 4px;

    background: var(--accent);

    border-radius: 999px;

    margin: 0 auto 1.5rem;

}

.card-text {

    text-align: center;

    color: #6b7280;

    line-height: 1.8;

    font-size: 1rem;

}

/* ========================================
   CARD NUMBER
======================================== */

.card-number {

    position: absolute;

    top: 1.5rem;
    left: 1.5rem;

    font-size: 4rem;

    font-weight: 900;

    color: #fef2f2;

}

/* ========================================
   CARD CORNER
======================================== */

.card-corner {

    position: absolute;

    bottom: 0;
    right: 0;

    width: 5rem;
    height: 5rem;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--accent);

    border-top-left-radius: 30px;

}

.card-corner i {

    color: white;

}