/* Spotlight boards, group A: MTK, TraderWiz, Rockets Lab, Furnish IQ, Al Makan Al Sharqi.
   Everything is scoped to .bd-mtk / .bd-tw / .bd-rl / .bd-fq / .bd-am. Board = 100cqw x 56.25cqw. */

/* ---------- MTK: stationery column, profile phone, post column (deep teal) ---------- */
.bd-mtk { --shot: rgba(0,0,0,.55); background: radial-gradient(ellipse 34% 52% at 62% 46%, rgba(30,214,214,.16), transparent 70%), radial-gradient(ellipse 50% 60% at 18% 30%, rgba(255,255,255,.05), transparent 70%), linear-gradient(160deg, #10414e, #082029 60%, #061820); }
.bd-mtk::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, rgba(30,214,214,.16) 1px, transparent 1.4px); background-size: 2.2cqw 2.2cqw; -webkit-mask: radial-gradient(ellipse 60% 70% at 62% 50%, #000, transparent 75%); mask: radial-gradient(ellipse 60% 70% at 62% 50%, #000, transparent 75%); }
.bd-mtk .g-wall { left: 4.74cqw; top: 4cqw; width: 42cqw; aspect-ratio: 4 / 3; }
.bd-mtk .g-s1, .bd-mtk .g-s2 { top: 37.1cqw; width: 20.2cqw; aspect-ratio: 4 / 3; }
.bd-mtk .g-s1 { left: 4.74cqw; }
.bd-mtk .g-s2 { left: 26.54cqw; }
.bd-mtk .g-phone { left: 48.64cqw; top: 4cqw; width: 26.06cqw; }
.bd-mtk .g-posts { left: 76.6cqw; top: 4cqw; width: 18.66cqw; display: grid; gap: 1.6cqw; }
.bd-mtk .g-posts .tile { aspect-ratio: 4 / 5; }
.bd-mtk .phone .screen { background: #fff; }
.bd-mtk .phone .screen > img { object-position: top; }

/* ---------- TraderWiz: scrolling landing page, neon + icon, post row (dark teal, neon) ---------- */
.bd-tw { --shot: rgba(0,0,0,.6); background: radial-gradient(ellipse 34% 46% at 44% 26%, rgba(62,224,143,.15), transparent 70%), radial-gradient(ellipse 30% 50% at 14% 60%, rgba(79,163,199,.10), transparent 70%), linear-gradient(165deg, #0e2a2a, #071718 55%, #040c0d); }
.bd-tw::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(62,224,143,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(62,224,143,.07) 1px, transparent 1px); background-size: 3.2cqw 3.2cqw; -webkit-mask: radial-gradient(ellipse 70% 80% at 50% 50%, transparent 35%, #000 100%); mask: radial-gradient(ellipse 70% 80% at 50% 50%, transparent 35%, #000 100%); }
.bd-tw .g-phone { left: 4.4cqw; top: 5.2cqw; width: 24.8cqw; }
.bd-tw .phone { box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 2.6cqw 5cqw -2cqw rgba(0,0,0,.7), 0 0 4cqw -1cqw rgba(62,224,143,.25); }
.bd-tw .phone .screen { background: #0b2a2a; }
.bd-tw .phone .screen > img.scroll { height: auto; bottom: auto; object-fit: fill; animation: bd-tw-scroll 16s ease-in-out infinite alternate; }
@keyframes bd-tw-scroll { 0%, 12% { transform: translateY(0); } 88%, 100% { transform: translateY(-39.4%); } }
.bd-tw .g-neon { left: 30.8cqw; top: 5.2cqw; width: 28.08cqw; aspect-ratio: 1000 / 909; }
.bd-tw .g-icon { left: 60.48cqw; top: 5.2cqw; width: 35.12cqw; aspect-ratio: 1200 / 873; }
.bd-tw .g-posts { left: 30.8cqw; top: 32.33cqw; width: 64.8cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; }
.bd-tw .g-posts .tile { aspect-ratio: 4 / 5; }

/* ---------- Rockets Lab: 3x3 grid with a 2x2 tote, splash hero (black, violet) ---------- */
.bd-rl { --shot: rgba(0,0,0,.65); background: radial-gradient(ellipse 36% 60% at 74% 48%, rgba(123,63,228,.30), transparent 70%), radial-gradient(ellipse 40% 50% at 20% 100%, rgba(199,125,255,.10), transparent 70%), linear-gradient(160deg, #13101f, #0b0b12 55%, #08070d); }
.bd-rl::before { content: ""; position: absolute; left: 50%; top: -20%; width: 60%; height: 140%; z-index: -1; background: linear-gradient(115deg, transparent 0 44%, rgba(123,63,228,.08) 44% 58%, transparent 58%); }
.bd-rl .g-grid { left: 6.9cqw; top: 4.625cqw; width: 47cqw; height: 47cqw; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 1.6cqw; }
.bd-rl .g-grid .tile { aspect-ratio: 1; }
.bd-rl .g-grid > :nth-child(5) { grid-area: 2 / 1; }
.bd-rl .g-grid > :nth-child(6) { grid-area: 3 / 1; }
.bd-rl .g-tote { grid-area: 2 / 2 / 4 / 4; }
.bd-rl .g-hero { left: 55.5cqw; top: 4.625cqw; width: 37.6cqw; aspect-ratio: 4 / 5; box-shadow: 0 2.4cqw 5cqw -2cqw rgba(0,0,0,.8), 0 0 6cqw -2cqw rgba(123,63,228,.55), 0 0 0 1px rgba(255,255,255,.06); }

/* ---------- Furnish IQ: office + signage row, post row, feed phone (forest green) ---------- */
.bd-fq { --shot: rgba(0,20,8,.6); background: radial-gradient(ellipse 40% 60% at 36% 30%, rgba(255,255,255,.08), transparent 70%), radial-gradient(ellipse 30% 50% at 86% 60%, rgba(120,220,160,.10), transparent 70%), linear-gradient(160deg, #0f4a2c, #0a311d 55%, #06200f); }
.bd-fq::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5.6cqw; z-index: -1; background: linear-gradient(180deg, transparent, rgba(0,0,0,.18)); }
.bd-fq .g-office { left: 4.4cqw; top: 7.84cqw; width: 41.33cqw; aspect-ratio: 1000 / 563; }
.bd-fq .g-sign { left: 47.33cqw; top: 7.84cqw; width: 24.67cqw; aspect-ratio: 1000 / 943; }
.bd-fq .g-posts { left: 4.4cqw; top: 32.71cqw; width: 67.6cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; }
.bd-fq .g-posts .tile { aspect-ratio: 1; }
.bd-fq .g-phone { left: 73.6cqw; top: 7.84cqw; width: 22cqw; }
.bd-fq .feedui .post { aspect-ratio: 4 / 5; }
.bd-fq .feedui .who img { box-shadow: 0 0 0 .15cqw #fff, 0 0 0 .3cqw #2f9e5f; }

/* ---------- Al Makan Al Sharqi: 2x2 grid, gift box hero, story phone (navy, gold) ---------- */
.bd-am { --shot: rgba(0,0,0,.6); background: radial-gradient(ellipse 30% 55% at 58% 50%, rgba(201,160,68,.16), transparent 70%), radial-gradient(ellipse 40% 60% at 15% 20%, rgba(60,90,200,.18), transparent 70%), linear-gradient(160deg, #172c7c, #0f1d55 50%, #0a1236); }
.bd-am::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: linear-gradient(45deg, rgba(201,160,68,.10) 1px, transparent 1px), linear-gradient(-45deg, rgba(201,160,68,.10) 1px, transparent 1px); background-size: 3cqw 3cqw; -webkit-mask: radial-gradient(ellipse 70% 80% at 50% 50%, transparent 40%, #000 100%); mask: radial-gradient(ellipse 70% 80% at 50% 50%, transparent 40%, #000 100%); }
.bd-am .g-grid { left: 3.6cqw; top: 9cqw; width: 38.25cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; }
.bd-am .g-grid > * { aspect-ratio: 1; }
.bd-am .g-grid .photo { border-radius: 1cqw; }
.bd-am .g-hero { left: 43.45cqw; top: 9cqw; width: 30.6cqw; aspect-ratio: 4 / 5; box-shadow: 0 2.4cqw 5cqw -2cqw rgba(0,0,0,.75), 0 0 0 1px rgba(201,160,68,.25); }
.bd-am .g-phone { left: 75.65cqw; top: 9.6cqw; width: 20.4cqw; }

@media (prefers-reduced-motion: reduce) {
  .bd-tw .phone .screen > img.scroll { animation: none; }
}

/* ---------- phones: boards restack ---------- */


/* phone restacking removed at integration: boards keep their 16:9 composition and scale with the slide (cqw units). */