/* «Webivan» v2 services: a bento grid with a light that follows the cursor. */
.wi-bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.wi-bento__cell { display: flex; min-width: 0; }
.wi-bento__cell--big { grid-column: span 2; grid-row: span 2; }
.wi-bento__cell--note { grid-column: span var(--span, 1); }

.wi-bento__card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-height: 260px;
    padding: 28px;
    overflow: hidden;
    border-radius: var(--webivan-radius);
    background: var(--webivan-deep);
    box-shadow: inset 0 0 0 1px var(--webivan-line);
    color: var(--webivan-text);
    text-decoration: none;
    transition: var(--wi-hover-tr);
}
.wi-body a.wi-bento__card { color: var(--webivan-text); }
/* The light under the pointer — an effect, not a fill. */
.wi-bento__card::before {
    content: "";
    position: absolute;
    inset: 1px; /* keeps the inset 1px edge (box-shadow) visible above the fill */
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    /* v3.1: the light is a touch brighter (≤ 18 %) and sits on one step of
       surface (raise), so the card also changes tone on hover. */
    background:
        radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--webivan-cobalt) var(--wi-hover-spot), transparent), transparent 70%),
        linear-gradient(color-mix(in srgb, var(--webivan-raise) 85%, transparent), color-mix(in srgb, var(--webivan-raise) 85%, transparent));
    transition: opacity var(--wi-hover-dur) var(--wi-hover-ease);
}
.wi-bento__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--webivan-cobalt) 16%, var(--webivan-deep));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--webivan-cobalt-2) 35%, transparent), 0 0 32px -6px var(--wi-glow);
    color: #fff;
}
.wi-bento__icon svg { width: 22px; height: 22px; }
.wi-body .wi-bento__title { margin: 0; font-size: clamp(19px, 0.5vw + 15px, 23px); color: #fff; }
.wi-bento__text {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--webivan-mute);
    font-size: 15.5px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.wi-bento__foot { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: auto; padding-top: 14px; }
.wi-bento__price { font-family: var(--webivan-font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: #fff; white-space: nowrap; }
.wi-bento__term { color: var(--webivan-mute); font-size: 14px; }
.wi-bento__go {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    align-self: center;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--wi-line-2);
    color: #fff;
    transition: var(--wi-hover-tr);
}
.wi-bento__go svg { width: 18px; height: 18px; transition: transform var(--wi-hover-dur) var(--wi-hover-ease); }

/* The large card: more air, a larger price, three lines of what is included. */
.wi-bento__cell--big .wi-bento__card {
    padding: clamp(28px, 3vw, 44px);
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--webivan-cobalt) 12%, transparent), transparent 60%),
        var(--webivan-deep);
}
.wi-bento__cell--big .wi-bento__icon { width: 64px; height: 64px; }
.wi-bento__cell--big .wi-bento__icon svg { width: 28px; height: 28px; }
.wi-body .wi-bento__cell--big .wi-bento__title { font-size: clamp(28px, 1.6vw + 14px, 40px); line-height: 1.1; letter-spacing: -0.025em; max-width: 14ch; }
.wi-bento__cell--big .wi-bento__text { -webkit-line-clamp: 4; font-size: 17px; max-width: 46ch; }
.wi-bento__cell--big .wi-bento__price { font-size: clamp(28px, 1vw + 16px, 36px); color: #fff; }
.wi-bento__inc { display: grid; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 15.5px; color: var(--webivan-text); }
.wi-bento__inc li { display: flex; gap: 10px; align-items: flex-start; }
.wi-bento__inc svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; color: var(--webivan-cobalt-2); }

.wi-bento__note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
    width: 100%;
    padding: 28px;
    border-radius: var(--webivan-radius);
    box-shadow: inset 0 0 0 1px var(--wi-line-2);
    background: color-mix(in srgb, var(--webivan-cobalt) 9%, transparent);
}
.wi-bento__note p { margin: 0; max-width: 44ch; color: var(--webivan-text); font-size: 17px; }

.wi-bento__card:active { scale: 0.99; }
.wi-bento__card:focus-visible { translate: 0 var(--wi-hover-lift); box-shadow: var(--wi-hover-ring), var(--wi-hover-shadow); }
.wi-bento__card:focus-visible::before { opacity: 1; }
.wi-bento__card:focus-visible .wi-bento__go { background: var(--webivan-cobalt-2); color: var(--webivan-night); box-shadow: none; }
.wi-bento__card:focus-visible .wi-bento__go svg { transform: translate(var(--wi-hover-nudge-d), calc(-1 * var(--wi-hover-nudge-d))); }
@media (hover: hover) and (pointer: fine) {
    .wi-bento__card:hover { translate: 0 var(--wi-hover-lift); box-shadow: var(--wi-hover-ring), var(--wi-hover-shadow); }
    .wi-bento__card:hover::before { opacity: 1; }
    .wi-bento__card:hover .wi-bento__go { background: var(--webivan-cobalt-2); color: var(--webivan-night); box-shadow: none; }
    .wi-bento__card:hover .wi-bento__go svg { transform: translate(var(--wi-hover-nudge-d), calc(-1 * var(--wi-hover-nudge-d))); }
}

@media (max-width: 63.99rem) {
    .wi-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wi-bento__cell--big { grid-row: auto; }
    .wi-bento__cell--note { grid-column: 1 / -1; }
}
@media (max-width: 39.99rem) {
    .wi-bento { grid-template-columns: 1fr; gap: 12px; }
    .wi-bento__cell--big, .wi-bento__cell--note { grid-column: auto; }
    .wi-bento__card { min-height: 0; padding: 22px; }
}

/* Real case screenshots fanned out in the large card. */
.wi-bento__fan { position: absolute; z-index: -1; right: 6%; bottom: 20%; width: 40%; aspect-ratio: 16 / 11; pointer-events: none; }
.wi-bento__fan-item {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 12px;
    background: var(--webivan-raise);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 50px -20px rgba(0, 0, 0, 0.8);
    transform: translate(calc(var(--k) * 9%), calc(var(--k) * -17%)) rotate(calc(-5deg + var(--k) * 5deg));
    transition: transform 0.6s var(--wi-ease-out);
}
.wi-bento__fan-item:nth-child(1) { z-index: 3; }
.wi-bento__fan-item:nth-child(2) { z-index: 2; opacity: 0.85; }
.wi-bento__fan-item:nth-child(3) { z-index: 1; opacity: 0.6; }
.wi-bento__fan-item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wi-bento__cell--big .wi-bento__text { max-width: 31ch; }
@media (hover: hover) and (pointer: fine) {
    .wi-bento__card:hover .wi-bento__fan-item { transform: translate(calc(var(--k) * 13%), calc(var(--k) * -22%)) rotate(calc(-7deg + var(--k) * 7deg)); }
}
@media (max-width: 39.99rem) { .wi-bento__fan { position: relative; z-index: 0; right: auto; bottom: auto; width: 64%; margin: 48px 8% 12px auto; } }