/* ==========================================================
   VALUES — Glass Cards with Gradient Icon Tiles (no animations)
   Paste as-is. Tweak the CSS variables to taste.
   ========================================================== */

:root {
    /* palette knobs */
    --accent: #424DFE;
    --text-strong: #0b1220;
    --text-muted: rgba(11, 18, 32, .72);

    /* card */
    --card-bg: rgba(255, 255, 255, .55);
    --card-border: rgba(11, 18, 32, .10);
    --card-shadow: 0 8px 26px rgba(0, 0, 0, .10);

    /* icon tile gradient (light, not black) */
    --tile-grad-1: #eef3ff;
    /* top-left tint */
    --tile-grad-2: #fff3ee;
    /* bottom-right tint */
    --tile-border: rgba(11, 18, 32, .08);
    --tile-ring: rgba(66, 77, 254, .30);
}

/* ----------------------------------------------------------
   Card
   ---------------------------------------------------------- */
.values .card {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-radius: 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    padding: 26px 22px;
    height: 100%;
    color: var(--text-strong);

    box-shadow:
        var(--card-shadow),
        inset 0 1px 0 rgba(255, 255, 255, .55);

    transition: transform .18s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        background .25s ease;
}

/* graceful fallback when blur isn’t supported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .values .card {
        background: linear-gradient(180deg,
                rgba(255, 255, 255, .92),
                rgba(255, 255, 255, .82));
    }
}

/* glossy inner stroke */
.values .card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .15));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* soft exterior glow */
.values .card::after {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: inherit;
    background: radial-gradient(70% 60% at 50% 120%, var(--tile-ring), transparent 70%);
    filter: blur(18px);
    opacity: .55;
    z-index: -1;
    pointer-events: none;
}

/* hover: gentle lift + brighter ring */
.values .card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent), transparent 75%);
    box-shadow:
        0 16px 40px rgba(66, 77, 254, .18),
        inset 0 1px 0 rgba(255, 255, 255, .65);
}

/* ----------------------------------------------------------
   Icon tile (rounded gradient box)
   ---------------------------------------------------------- */
/* ----------------------------------------------------------
   Icon tile (glassy background)
   ---------------------------------------------------------- */
.values .icon-tile {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 16px;
    display: grid;
    place-items: center;

    background:
        radial-gradient(80% 80% at 50% 20%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .65)),
        linear-gradient(135deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .15));
    border: 1px solid rgba(11, 18, 32, .08);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);

    box-shadow:
        0 10px 24px rgba(0, 0, 0, .08),
        inset 0 1px 0 rgba(255, 255, 255, .65);

    margin-bottom: 22px;
}

/* ----------------------------------------------------------
   White icon inside the tile
   ---------------------------------------------------------- */
.icon-white {
    --icon-size: 44px;
    width: var(--icon-size);
    height: var(--icon-size);
    display: block;

    background: #fff;
    /* pure white */
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;

    transition: transform .18s ease;
}

.values .card:hover .icon-white {
    transform: scale(1.1);
}

/* Hover: subtle blue-silver glow */
.values .card:hover .icon-silver {
    transform: scale(1.1);
    filter:
        drop-shadow(0 6px 14px rgba(66, 77, 254, .25)) drop-shadow(0 0 6px rgba(255, 255, 255, .15));
}

.values .icon-tile {
    margin-bottom: 22px;
    /* ⬅ adjust spacing here */
}

/* If you want the icon slightly larger by default: bump this once */
@media (min-width: 992px) {
    .icon-silver {
        --icon-size: 48px;
    }
}

/* glossy inner stroke on tile */
.values .icon-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .15));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Slightly brighter on card hover */
.values .card:hover .icon-tile {
    box-shadow:
        0 16px 36px rgba(66, 77, 254, .18),
        inset 0 1px 0 rgba(255, 255, 255, .75);
}

/* ----------------------------------------------------------
   Typography inside cards
   ---------------------------------------------------------- */
.values .card h3 {
    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
    margin: 8px 0 10px;
}

/* Cards: solid dark grey subtext */
.values .card p {
    color: #4a4f5c !important;
    /* dark grey */
    opacity: 1;
}

/* Optional: gradient-highlight text (matches your FAQ style) */
.values .highlight-text {
    background: linear-gradient(135deg, #423dfc, #7271fb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.values .highlight-text.highlight-navy {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: #012970 !important;
}


/* ----------------------------------------------------------
   Responsive tweaks
   ---------------------------------------------------------- */
@media (max-width: 992px) {
    .values .card {
        padding: 22px 18px;
    }

    .values .icon-tile {
        --size: 84px;
    }

    .values .card h3 {
        font-size: 19px;
    }
}

@media (max-width: 768px) {
    .values .icon-tile {
        --size: 76px;
    }

    .values .card h3 {
        font-size: 18px;
    }
}

/* ----------------------------------------------------------
   Optional per-section tints (override the tile gradient)
   Usage: <section class="values values--mint">…</section>
   ---------------------------------------------------------- */
.values--blue {
    --tile-grad-1: #e8f1ff;
    --tile-grad-2: #f4fbff;
}

.values--mint {
    --tile-grad-1: #e7fff3;
    --tile-grad-2: #f6fffb;
}

.values--peach {
    --tile-grad-1: #fff0ea;
    --tile-grad-2: #fff6f0;
}