/* =========================
   SECTION
========================= */
.bento-section{

    position:relative;

    padding:180px 0 140px;

    background:
        radial-gradient(
            circle at center,
            rgba(0,209,255,.03),
            transparent 45%
        );

}

/* =========================
   HEADING
========================= */

.section-heading{

    max-width:900px;

    margin-bottom:100px;

}

.section-badge{

    display:inline-flex;

    align-items:center;

    padding:12px 22px;

    border-radius:999px;

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

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

    margin-bottom:24px;

    font-size:14px;

}

.section-heading h2{

    font-size:clamp(2.6rem,4vw,4.5rem);

    line-height:1.08;

    letter-spacing:-2px;

    max-width:900px;

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

.bento-grid{

    display:grid;

    grid-template-columns:
        repeat(12,1fr);

    gap:32px;

}

/* =========================
   CARD BASE
========================= */
.bento-card{

    position:relative;

    overflow:hidden;

    padding:34px;

    min-height:260px;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.018)
        );

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

    backdrop-filter:blur(20px);

    transition:.45s ease;
 transform-style:preserve-3d;
will-change:transform;
}

/* =========================
   CARD SIZES
========================= */
.bento-card.large{

    grid-column:span 7;

    min-height:240px;

}
.bento-card:not(.large):not(.wide){

    grid-column:span 5;

    min-height:240px;

}
.bento-card.wide{

    grid-column:span 12;

}

/* =========================
   HOVER
========================= */

.bento-card:hover{

    transform:
        translateY(-10px);

    border-color:
        rgba(0,209,255,.18);

    box-shadow:
        0 30px 60px rgba(0,0,0,.35);

}

/* =========================
   GLOW
========================= */

.bento-card::before{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,209,255,.18),
            transparent 70%
        );

    top:-100px;
    right:-100px;

    opacity:0;

    transition:.5s ease;

}

.bento-card:hover::before{

    opacity:1;

}

/* =========================
   ICON
========================= */
.bento-icon{

    width:58px;
    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    margin-bottom:26px;

    font-size:24px;

    background:
        linear-gradient(
            135deg,
            rgba(0,209,255,.16),
            rgba(0,255,178,.07)
        );

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

}
/* =========================
   TEXT
========================= */
.bento-card h3{

    font-size:1.65rem;

    margin-bottom:16px;

    line-height:1.15;

}
.bento-card p{

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

    line-height:1.75;

    font-size:15px;

    max-width:92%;

}

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

@media(max-width:1100px){

    .bento-grid{

        grid-template-columns:1fr;

    }

    .bento-card.large,
    .bento-card.wide,
    .bento-card{

        grid-column:span 1;

    }

}

@media(max-width:768px){

    .bento-card{

        padding:32px;

    }

    .section-heading h2{

        letter-spacing:-2px;

    }

}
.bento-section .container{

    max-width:1400px;

}
.bento-card{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}
/* =========================
   TITLE OFFSET FIX
========================= */

#services{

    scroll-margin-top:140px;

}
/* =========================
   WIDE CARD
========================= */

.bento-card.wide{

    grid-column:1 / -1;

    min-height:240px;

}
/* =========================
   INTERACTIVE LIGHT
========================= */

.bento-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:
        radial-gradient(
            500px circle at var(--mouse-x) var(--mouse-y),
            rgba(0,209,255,.16),
            transparent 40%
        );

    opacity:0;

    transition:opacity .3s ease;

    pointer-events:none;

}

.bento-card:hover::before{

    opacity:1;

}

/* =========================
   PREMIUM HOVER
========================= */

.bento-card:hover{

    border-color:
        rgba(0,209,255,.18);

    box-shadow:

        0 0 0 1px rgba(0,209,255,.06),

        0 30px 80px rgba(0,0,0,.45),

        0 0 80px rgba(0,209,255,.08);

}