.bento-wrap{padding:100px 56px;background:#f4efe7;text-align:center}
.bento-eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#aaa;margin-bottom:14px}
.bento-title{font-family:'Lora',serif;font-size:clamp(32px,4.5vw,56px);letter-spacing:-.03em;line-height:1;max-width:640px;margin:0 auto 48px}
.bento-title em{font-style:italic}

.card-grid{display:grid;gap:12px;max-width:1080px;margin:0 auto;padding:0 8px;grid-template-columns:1fr}
@media(min-width:600px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){
  .card-grid{grid-template-columns:repeat(4,1fr)}
  .magic-bento-card:nth-child(3){grid-column:span 2;grid-row:span 2}
  .magic-bento-card:nth-child(4){grid-column:1/span 2;grid-row:2/span 2}
  .magic-bento-card:nth-child(6){grid-column:4;grid-row:3}
}

.bento-section{position:relative;user-select:none}

.magic-bento-card{
  display:flex;flex-direction:column;justify-content:space-between;position:relative;
  aspect-ratio:4/3;min-height:200px;width:100%;padding:24px;
  border-radius:20px;border:1px solid rgba(0,0,0,.06);background:#ffffff;
  font-weight:300;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;
  text-align:left;color:#25221d;
  --glow-x:50%;--glow-y:50%;--glow-intensity:0;--glow-radius:260px;--glow-color:185,167,216;--tint:#ded6f2;
}
.magic-bento-card:nth-child(1){--tint:#f2ddc8}
.magic-bento-card:nth-child(2){--tint:#ded6f2}
.magic-bento-card:nth-child(3){--tint:#cfe8df}
.magic-bento-card:nth-child(4){--tint:#eee8d0}
.magic-bento-card:nth-child(5){--tint:#d7e8f3}
.magic-bento-card:nth-child(6){--tint:#f0d5e2}
.magic-bento-card{background:linear-gradient(145deg,var(--tint) 0%,#ffffff 70%)}
.magic-bento-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.08)}

.magic-bento-card__header{display:flex;justify-content:space-between;align-items:center;gap:12px;position:relative;z-index:2}
.magic-bento-card__label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#999}
.magic-bento-card__icon{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;font-family:'Lora',serif;font-size:18px;color:#25221d;backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(0,0,0,.05)}

.magic-bento-card__content{display:flex;flex-direction:column;position:relative;z-index:2}
.magic-bento-card__title{font-family:'Lora',serif;font-weight:400;font-size:28px;letter-spacing:-.02em;line-height:1.05;margin:0 0 8px;color:#25221d}
.magic-bento-card__description{font-size:13px;line-height:1.6;color:#777}

/* border glow */
.magic-bento-card--border-glow::after{
  content:'';position:absolute;inset:0;padding:2px;border-radius:inherit;pointer-events:none;z-index:3;
  background:radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y),
    rgba(var(--glow-color),calc(var(--glow-intensity)*.85)) 0%,
    rgba(var(--glow-color),calc(var(--glow-intensity)*.4)) 30%,
    transparent 60%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  transition:opacity .3s ease;
}
.magic-bento-card--border-glow:hover{box-shadow:0 12px 32px rgba(0,0,0,.06),0 0 24px rgba(185,167,216,.24)}

.particle{pointer-events:none}
.global-spotlight{mix-blend-mode:multiply;will-change:transform,opacity;z-index:200!important;pointer-events:none}

.bento-wrap{padding:110px 56px 150px;background:linear-gradient(to bottom,rgba(255,255,255,.46),#f4efe7 14%,#f4efe7 86%,rgba(247,246,243,.72));text-align:center}