:root {
  --bg: #000000;
  --fg: #ffffff;
  --footer-outflow: 360px; /* absolute offset the footer extends below the artboard */
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.4;
}

.artboard {
  position: relative;
  /* Fixed pixel canvas based on the provided composition; no scaling */
  width: 1440px;
  height: 1024px;
  margin: 32px auto;
}

/* Frames (pngs) placed at exact pixel coordinates */
.frame { position: absolute; }
.frame img { display: block; }

.badge {
  position: absolute;
  top: 148px;   /* upper-left, overlapping main window slightly */
  left: 245px;
  width: 170px;
  height: 157px;
  z-index: 10;  /* ensure badge appears on top */
}

/* 01.png main window and video placeholder (783x440) centered within black)
   PNG size: 786x460. Centered at top of layout */
.frame-01 { top: 66px; left: 327px; width: 786px; height: 460px; }
.frame-01 > img { width: 786px; height: 460px; }
.frame-01 .video-placeholder {
  position: absolute;
  /* center the 783x440 inside the black area; tweak as needed */
  left: 1px;
  top: 18px;
  width: 783px;
  height: 440px;
  display: grid;
  place-items: center;
  background: #000;
}
.frame-01 .video-box {
  width: 783px; height: 440px;
  border: 1px dashed #444;
  color: #999;
  font-size: 14px;
  letter-spacing: 0.04em;
  display: grid; place-items: center;
}

/* Ensure embedded video fills the placeholder exactly */
.frame-01 .video-placeholder iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 02.png: 388x613. White text box area gets black text - left side below main */
/* Left card graphic with middle stretch of +20px via CSS slicing */
.frame-02 { top: 560px; left: 199px; width: 388px; height: 613px; }
.frame-02 > img { width: 388px; height: 613px; }

/* Removed experimental middle stretch and related variables */

.copy-02 {
  position: absolute;
  left: 38px; right: 43px; top: 128px; bottom: 28px; /* tuned */
  color: #000;
  font-size: 12px; line-height: 1.5;
}

/* 03.png: 402x607 with dark content area; white text - right side below main */
.frame-03 { top: 680px; left: 620px; width: 402px; height: 607px; }
.frame-03 > img { width: 402px; height: 607px; }
.copy-03 {
  position: absolute;
  left: 44px; right: 49px; top: 125px; bottom: 24px; /* tuned */
  color: #fff;
  font-size: 12px; line-height: 1.55;
}

/* 04.png overlays bottom right of 03. PNG 167x159; animation 163x138 */
.frame-04 { top: 1080px; left: 955px; width: 167px; height: 159px; }
.frame-04 > img { width: 167px; height: 159px; }
.frame-04 > .anim {
  position: absolute;
  left: 2px; top: 22px; /* fits within the inner black area */
  width: 163px; height: 130px; /* cropped 8px off bottom */
  overflow: hidden;
}

/* Decorative sparkles */
.sparkles {
  position: absolute;
  top: 550px;
  left: 900px;
  width: 220px;
  height: 166px;
  pointer-events: none;
}

/* Footer buttons b1/b2/b3 lined up left-to-right */
.footer-buttons {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--footer-outflow) * -1);
  display: flex;
  gap: 26px;
}
.footer-buttons img { display: block; }

/* Remove previous text footer styles */

/* Spacer placed after the artboard to create space under the absolute footer */
.below-footer-spacer { height: calc(var(--footer-outflow) + 0px); }

/* Small screens: make the artboard fill the width and add margins below */
@media (max-width: 720px) {
  .artboard { width: 96vw; margin: 12px auto; }
}

.viewport-940 {
  width: 1000px;
  margin: 0 auto;
  overflow-x: hidden; /* clip horizontal overflow to 1000px */
  position: relative;
}
.viewport-940 .artboard {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 32px 0; /* override auto margins to prevent left-locking */
}