.company-bento { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-7) auto 0; }
.bento-panel { position: relative; min-width: 0; overflow: hidden; isolation: isolate; padding: var(--space-6); background: var(--paper); border-radius: var(--radius-bento); box-shadow: var(--shadow-bento); }
.bento-focus, .bento-audience { height: 400px; text-align: center; }
.bento-copy { position: relative; z-index: 1; }
.bento-copy h3 { font-size: 28px; font-weight: var(--weight-semibold); line-height: 1.2; letter-spacing: -.035em; }
.bento-description { margin-top: var(--space-3); font-size: var(--text-reading); color: var(--ink-secondary); line-height: 1.5; }

.app-stack { position: absolute; width: min(100%, 400px); height: 260px; left: 50%; bottom: 12px; transform: translateX(-50%); pointer-events: none; }
.app-tile { position: absolute; width: 65%; }
.app-tile-white { left: 0; bottom: 28px; transform: rotate(-12deg); }
.app-tile-light { left: 20%; bottom: 12px; transform: rotate(-5deg); }
.app-tile-blue { left: 38%; bottom: 0; transform: rotate(6deg); }
.app-tile img { width: 100%; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-fill-mode: both; animation-play-state: paused; }
.app-tile-white img { animation-name: drift-white; animation-duration: 4s; }
.app-tile-light img { animation-name: drift-light; animation-duration: 3.6s; }
.app-tile-blue img { animation-name: drift-blue; animation-duration: 4.2s; }
.company-bento[data-motion='playing'] .app-tile img { animation-play-state: running; }
.ascii-earth { position: absolute; width: 270px; height: 270px; left: calc(50% - 135px); bottom: 12px; pointer-events: none; }
.ascii-earth canvas, .ascii-earth img { width: 100%; height: 100%; display: block; }
/* One product, seen as wireframe, interface and compiled surface. */
.bento-development { grid-column: 1 / -1; min-height: 280px; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: var(--space-6); padding: var(--space-6) 40px; }
.product-build { height: 216px; display: grid; place-items: center; perspective: 850px; pointer-events: none; }
.build-scene { position: relative; width: 168px; height: 184px; transform-style: preserve-3d; transform: rotateX(52deg) rotateZ(-32deg); }
.build-layer { position: absolute; inset: 0; display: grid; padding: var(--space-4); gap: var(--space-3); grid-template-columns: 1fr 1fr; border-radius: 28px; backface-visibility: hidden; animation: layer-assemble 4.2s cubic-bezier(.45, 0, .2, 1) 1 both; animation-play-state: paused; transform: translateZ(var(--layer-height)); }
.build-layer span { border-radius: 8px; }
.build-layer span:first-child { grid-column: 1 / -1; }
.build-foundation { --layer-height: -44px; border: 1px solid #8eacd2; background: #f0f6ff; box-shadow: 0 12px 24px rgb(29 73 130 / 10%); }
.build-foundation span { border: 1px dashed #9fb9d9; }
.build-interface { --layer-height: 0px; border: 1px solid #c3d7ee; background: rgb(233 244 255 / 96%); box-shadow: 0 8px 16px rgb(39 84 139 / 10%); }
.build-interface span { background: #bfdbf8; box-shadow: inset 0 1px 2px #fff; }
.build-interface span:first-child { background: #92c7f8; }
.build-product { --layer-height: 44px; display: grid; place-items: center; background: linear-gradient(145deg, #4d9bf8, #1768df 60%, #1251bf); color: #f2f8ff; box-shadow: 0 5px 0 #1459bd, 0 14px 24px rgb(22 86 167 / 18%), inset 0 2px 3px rgb(255 255 255 / 65%); }
.build-product svg { filter: drop-shadow(0 2px 2px rgb(0 55 146 / 28%)); }
.company-bento[data-motion='playing'] .build-layer { animation-play-state: running; }
@keyframes layer-assemble { 0%, 18%, 82%, 100% { transform: translateZ(var(--layer-height)); } 40%, 62% { transform: translateZ(calc(var(--layer-height) * .13)); } }

@media (max-width: 1000px) {
  .bento-development { padding-inline: var(--space-6); grid-template-columns: 1.1fr 1fr; }
}
@media (max-width: 800px) {
  .bento-panel { padding: var(--space-5); }
  .bento-copy h3 { font-size: 26px; }
  .bento-description { font-size: var(--text-ui); }
  .bento-focus, .bento-audience { height: 380px; }
  .bento-development { grid-template-columns: 1fr; text-align: center; gap: var(--space-5); padding-block: var(--space-6); }
  .ascii-earth { width: 240px; height: 240px; left: calc(50% - 120px); bottom: 16px; }
  .app-stack { bottom: 32px; }
}
@media (max-width: 600px) {
  .company-bento { grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-6); }
  .bento-panel { border-radius: 20px; }
  .bento-copy h3 { font-size: 26px; }
  .bento-focus, .bento-audience { height: 352px; }
  .app-stack { width: min(100%, 350px); bottom: 8px; }
  .ascii-earth { width: 234px; height: 234px; left: calc(50% - 117px); bottom: 8px; }
  .bento-audience .bento-description { max-width: 260px; margin-inline: auto; }
  .product-build { height: 200px; }
  .build-scene { width: 152px; height: 168px; }
  .bento-development { grid-column: auto; min-height: 360px; padding: var(--space-5); }
}
@keyframes drift-white { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(-2deg); } }
@keyframes drift-light { 0%, 100% { transform: translateY(-5px) rotate(1deg); } 50% { transform: translateY(6px) rotate(-1deg); } }
@keyframes drift-blue { 0%, 100% { transform: translateY(2px) rotate(0); } 50% { transform: translateY(-7px) rotate(2deg); } }
@media (forced-colors: active) { .bento-panel { border: 1px solid CanvasText; } }

/* The whole card group fits the destination viewport on shorter laptops. */
@media (min-width: 801px) and (max-height: 800px) {
  .bento-focus, .bento-audience { height: 320px; }
  .bento-panel { padding: var(--space-5); }
  .app-stack { width: 310px; height: 200px; bottom: 8px; }
  .ascii-earth { width: 210px; height: 210px; left: calc(50% - 105px); bottom: 8px; }
  .bento-development { min-height: 240px; padding: var(--space-5) var(--space-6); }
  .bento-development .product-build { height: 192px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-tile img, .build-layer { animation: none; }
}