/* ============================================================
   00c - Bento feature grid (LIGHT THEME).
   Deliberate palette exception, scoped under .bento.
   ============================================================ */
.bento {
	--b-ink: #111111;
	--b-ink-60: rgba(17,17,17,0.62);
	--b-ink-40: rgba(17,17,17,0.42);
	--b-line: rgba(17,17,17,0.10);
	--b-surface: #F4F1EC;
	--b-card: #FFFFFF;
	--b-red: #C8102E;
	--b-red-soft: #FF4D5C;
	--b-orange: #F97316;
	--b-radius: 22px;
	background: var(--b-surface);
	color: var(--b-ink);
	padding: 120px var(--section-pad-x);
	position: relative;
	z-index: 2;
}
.bento__inner { max-width: var(--content-max); margin: 0 auto; }
.bento__head { margin-bottom: 56px; }
.bento__eyebrow {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--b-ink-60); margin-bottom: 18px;
}
.bento__eyebrow::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%;
	background: var(--red); flex-shrink: 0;
}
.bento__title {
	font-family: var(--font);
	font-size: clamp(2.1rem, 4vw, 3.4rem);
	font-weight: 700; line-height: 1.08; letter-spacing: -0.035em;
	color: var(--b-ink); margin: 0;
}
.bento__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: start;
}
.bento__stack { display: flex; flex-direction: column; gap: 24px; }
.bento-card {
	background: var(--b-card);
	border-radius: var(--b-radius);
	padding: 26px 26px 26px;
	display: flex; flex-direction: column;
	box-shadow: 0 1px 2px rgba(17,17,17,0.04);
	transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.bento-card:hover {
	box-shadow: 0 18px 44px rgba(17,17,17,0.09);
	transform: translateY(-3px);
}
.bento-card__title {
	font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
	line-height: 1.35; color: var(--b-ink); margin: 0 0 10px;
}
.bento-card__desc {
	font-size: 14.5px; line-height: 1.62; color: var(--b-ink-60); margin: 0;
}
/* Red-tinted inner panel */
.bento-panel {
	margin-top: 22px;
	border-radius: 16px;
	padding: 20px;
	flex-grow: 1;
	min-height: 300px;
	display: flex; align-items: center; justify-content: center;
	background:
		radial-gradient(130% 100% at 50% 0%, rgba(200,16,46,0.42) 0%, rgba(150,20,26,0.55) 45%, rgba(60,12,14,0.85) 100%),
		linear-gradient(160deg, #8E1220, #3A0A0E);
	position: relative; overflow: hidden;
}
.bento-panel--short { min-height: 168px; }
/* Chat mock */
.bento-chat { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.bento-chat__head { display: flex; gap: 8px; justify-content: flex-end; }
.bento-chat__row { display: flex; }
.bento-chat__row--them { justify-content: flex-start; }
.bento-chat__row--us { justify-content: flex-start; }
.bento-chat__bubble {
	background: rgba(20,6,8,0.72);
	border: 1px solid rgba(255,255,255,0.10);
	color: #fff;
	font-size: 13.5px; line-height: 1.55; font-weight: 500;
	padding: 13px 16px; border-radius: 13px;
	max-width: 94%;
	backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.bento-chat__muted { color: rgba(255,255,255,0.45); }
.bento-chat__foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.bento-chip {
	font-size: 11.5px; font-weight: 600; color: #fff;
	background: rgba(255,255,255,0.14);
	border: 1px solid rgba(255,255,255,0.16);
	padding: 5px 11px; border-radius: 999px; line-height: 1;
}
.bento-chip--ghost { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.72); }
/* Badges */
.bento-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.bento-badge {
	font-size: 12.5px; font-weight: 600; color: #fff;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.18);
	padding: 9px 16px; border-radius: 999px;
}
/* Orbit */
.bento-orbit { position: relative; width: 100%; height: 128px; }
.bento-orbit__ring {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
	border-radius: 50%; border: 1px solid rgba(255,255,255,0.16);
}
.bento-orbit__ring--a { width: 108px; height: 108px; }
.bento-orbit__ring--b { width: 150px; height: 150px; border-style: dashed; opacity: 0.55; }
.bento-orbit__core {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
	width: 44px; height: 44px; border-radius: 12px;
	background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22);
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 18px;
}
.bento-orbit__node {
	position: absolute; font-size: 11px; font-weight: 600; color: #fff;
	background: rgba(20,6,8,0.72); border: 1px solid rgba(255,255,255,0.14);
	padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}
.bento-orbit__node--1 { top: 6px; left: 50%; transform: translateX(-50%); }
.bento-orbit__node--2 { bottom: 10px; left: 8%; }
.bento-orbit__node--3 { bottom: 10px; right: 8%; }
@media (max-width: 1024px) {
	.bento__grid { grid-template-columns: 1fr 1fr; }
	.bento__stack { grid-column: 1 / -1; flex-direction: row; }
	.bento__stack .bento-card { flex: 1; }
}
@media (max-width: 768px) {
	.bento { padding: 84px var(--section-pad-x); }
	.bento__grid { grid-template-columns: 1fr; gap: 18px; }
	.bento__stack { flex-direction: column; gap: 18px; }
	.bento__head { margin-bottom: 38px; }
	.bento-panel { min-height: 240px; }
	.bento-panel--short { min-height: 150px; }
}


/* true bento grid - stacked cards join the parent grid so rows align */
.bento__grid{grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;align-items:stretch}
.bento__stack{display:contents}
.bento__grid > .bento-card--tall:first-child{grid-column:1;grid-row:1 / span 2}
.bento__stack > .bento-card:nth-child(1){grid-column:2;grid-row:1}
.bento__stack > .bento-card:nth-child(2){grid-column:2;grid-row:2}
.bento__grid > .bento-card--tall:last-child{grid-column:3;grid-row:1 / span 2}
.bento-panel{min-height:200px}
.bento-panel--short{min-height:150px}
.bento-card{height:auto}

/* bento responsive reset - display:contents must be undone on small screens */
@media(max-width:1024px){
.bento__grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
.bento__stack{display:flex;flex-direction:column;gap:24px;grid-column:1 / -1}
.bento__grid > .bento-card--tall:first-child,.bento__grid > .bento-card--tall:last-child{grid-column:auto;grid-row:auto}
.bento__stack > .bento-card:nth-child(1),.bento__stack > .bento-card:nth-child(2){grid-column:auto;grid-row:auto}
.bento__stack{flex-direction:row}
.bento__stack > .bento-card{flex:1}
}
@media(max-width:768px){
.bento__grid{grid-template-columns:1fr}
.bento__stack{flex-direction:column;gap:18px}
.bento-panel,.bento-panel--short{min-height:190px}
}