/* ==========================================================================
   Spotlight boards, group c: Tummies, De La Nova, Legends Gaming,
   Visitfootball, GoTenderly. Everything is scoped to .bdc + a board class.
   ========================================================================== */

/* shared group-c devices: laptop and browser window */
.bdc .lap { transition: transform .6s var(--ease); }
.bdc .lap:hover { transform: translateY(-.3cqw); }
.bdc .lap .lid { display: block; background: #0c0d10; border-radius: 1.4cqw 1.4cqw .3cqw .3cqw; padding: .85cqw .85cqw 1.1cqw; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 3cqw 5cqw -2.4cqw rgba(0,0,0,.75); }
.bdc .lap .lid img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: .25cqw; }
.bdc .lap .base { position: relative; display: block; height: 1.25cqw; margin: 0 -6.5%; border-radius: .2cqw .2cqw 1.8cqw 1.8cqw; background: linear-gradient(#eceef1, #b9bcc3 60%, #8d9097); box-shadow: 0 1.6cqw 2.4cqw -1cqw rgba(0,0,0,.6); }
.bdc .lap .base::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 42%; transform: translateX(-50%); border-radius: 0 0 .8cqw .8cqw; background: #a2a5ac; }
.bdc .brw { border-radius: .9cqw; overflow: hidden; background: #fff; box-shadow: 0 2.2cqw 4cqw -1.8cqw rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); transition: transform .5s var(--ease); }
.bdc .brw:hover { transform: translateY(-.3cqw); }
.bdc .brw .chrome { display: flex; align-items: center; gap: .4cqw; height: 1.8cqw; padding: 0 .8cqw; background: #eef0f3; }
.bdc .brw .chrome i { width: .6cqw; height: .6cqw; border-radius: 50%; background: #c8ccd3; }
.bdc .brw .chrome .url { flex: 1; height: .85cqw; margin-left: .8cqw; max-width: 60%; border-radius: 1cqw; background: #fff; }
.bdc .brw img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.bdc .tilt-l { transform: rotate(-4deg); }
.bdc .tilt-r { transform: rotate(5deg); }

/* ---------- Visitfootball: laptop + browsers + phone fan (navy, pitch lines) ---------- */
.bd-vft { --shot: rgba(0,8,30,.6); background:
  radial-gradient(ellipse 40% 60% at 76% 46%, rgba(10,108,240,.30), transparent 70%),
  radial-gradient(ellipse 50% 60% at 18% 20%, rgba(10,108,240,.14), transparent 70%),
  linear-gradient(165deg, #0d1c46, #070d22); }
.bd-vft::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background:
    radial-gradient(circle at 76% 46%, transparent 0 11.4cqw, rgba(255,255,255,.07) 11.4cqw 11.55cqw, transparent 11.6cqw),
    linear-gradient(90deg, transparent calc(76% - .08cqw), rgba(255,255,255,.07) calc(76% - .08cqw) calc(76% + .08cqw), transparent calc(76% + .08cqw)); }
.bd-vft .g-lap { left: 4cqw; top: 4cqw; width: 45cqw; }
.bd-vft .g-b1 { left: 4cqw; top: 37.4cqw; width: 21.6cqw; }
.bd-vft .g-b2 { left: 27.4cqw; top: 37.4cqw; width: 21.6cqw; }
.bd-vft .g-p1 { left: 53.4cqw; top: 15.4cqw; width: 15cqw; }
.bd-vft .g-p2 { left: 66.2cqw; top: 11.2cqw; width: 17.6cqw; z-index: 2; }
.bd-vft .g-p3 { left: 81.6cqw; top: 15.4cqw; width: 15cqw; }

/* ---------- De La Nova: symmetric triptych (ivory + bronze) ---------- */
.bd-dln { --shot: rgba(90,62,30,.30); background:
  radial-gradient(ellipse 34% 60% at 50% 50%, rgba(255,255,255,.7), transparent 72%),
  linear-gradient(170deg, #f4efe7, #e6dccd); }
.bd-dln::before { content: ""; position: absolute; left: 50%; top: 50%; width: 54cqw; height: 54cqw; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(176,138,90,.35); z-index: -1; pointer-events: none; }
.bd-dln::after { box-shadow: inset 0 0 0 1px rgba(120,90,50,.10); }
.bd-dln .phone { background: #1b1714; box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 2.6cqw 5cqw -2cqw rgba(80,55,25,.45); }
.bd-dln .g-pl { left: 5cqw; top: 10.7cqw; width: 19cqw; }
.bd-dln .g-pr { left: 76cqw; top: 10.7cqw; width: 19cqw; }
.bd-dln .g-tiles { left: 27cqw; top: 5.1cqw; width: 46cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; }
.bd-dln .g-tiles .tile { aspect-ratio: 1; box-shadow: 0 1.4cqw 3cqw -1.4cqw var(--shot), 0 0 0 1px rgba(120,90,50,.10); }

/* ---------- Tummies: tilted phone pair + stepped posts (brick + tangerine) ---------- */
.bd-tum { --shot: rgba(40,10,0,.55); background:
  radial-gradient(circle at 21% 50%, rgba(242,85,15,.55), transparent 32%),
  radial-gradient(ellipse 50% 70% at 75% 50%, rgba(246,233,210,.07), transparent 70%),
  linear-gradient(160deg, #7c2a0f, #3a1307); }
.bd-tum::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(246,233,210,.35) 1.2px, transparent 1.6px); background-size: 2.2cqw 2.2cqw;
  -webkit-mask: linear-gradient(90deg, transparent 40%, #000); mask: linear-gradient(90deg, transparent 40%, #000); }
.bd-tum .g-p1 { left: 5.6cqw; top: 6cqw; width: 19.5cqw; }
.bd-tum .g-p2 { left: 24.4cqw; top: 12.6cqw; width: 16.6cqw; z-index: 2; }
.bd-tum .g-tiles { left: 45.4cqw; top: 11.4cqw; width: 50.6cqw; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.8cqw; }
.bd-tum .g-tiles .tile { grid-column: span 2; aspect-ratio: 1; }
.bd-tum .g-tiles .tile:nth-child(4) { grid-column: 2 / span 2; }

/* ---------- GoTenderly: laptop + overlapping reel + stepped posts (deep blue) ---------- */
.bd-gtn { --shot: rgba(0,10,40,.6); background:
  radial-gradient(ellipse 45% 70% at 30% 40%, rgba(58,155,245,.26), transparent 70%),
  linear-gradient(160deg, #0b3a8f, #061a45); }
.bd-gtn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px); background-size: 1.8cqw 1.8cqw;
  -webkit-mask: radial-gradient(ellipse 60% 70% at 30% 40%, #000, transparent 75%); mask: radial-gradient(ellipse 60% 70% at 30% 40%, #000, transparent 75%); }
.bd-gtn .g-lap { left: 4.4cqw; top: 6.6cqw; width: 45cqw; }
.bd-gtn .g-reel { left: 40.6cqw; top: 15.6cqw; width: 15.4cqw; z-index: 2; }
.bd-gtn .g-c1, .bd-gtn .g-c2 { width: 17cqw; display: grid; gap: 1.8cqw; }
.bd-gtn .g-c1 { left: 59.6cqw; top: 5.2cqw; }
.bd-gtn .g-c2 { left: 78.4cqw; top: 14.4cqw; }
.bd-gtn .tile { aspect-ratio: 1; }

/* ---------- Legends Gaming: story + reel pair, poster grid (navy, cyan slash) ---------- */
.bd-leg { --shot: rgba(0,6,24,.6); background:
  linear-gradient(118deg, transparent 0 18%, rgba(31,163,224,.13) 18% 31%, transparent 31% 33%, rgba(31,163,224,.07) 33% 37%, transparent 37%),
  radial-gradient(ellipse 40% 60% at 25% 45%, rgba(60,120,255,.20), transparent 70%),
  radial-gradient(ellipse 30% 40% at 90% 95%, rgba(233,160,74,.10), transparent 70%),
  linear-gradient(160deg, #0f2550, #070f26); }
.bd-leg .g-st { left: 5cqw; top: 6.4cqw; width: 22.4cqw; }
.bd-leg .g-rl { left: 29.4cqw; top: 13.2cqw; width: 18.4cqw; }
.bd-leg .g-tiles { left: 52.2cqw; top: 5.1cqw; width: 43.4cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; }
.bd-leg .g-tiles .tile { aspect-ratio: 1; }

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



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