/*
 * The site is composed from live DOM nodes and individual business assets.
 * Reference boards are intentionally excluded from the rendered page.
 */
:root {
  --page-bg: #f7faf9;
  --panel-bg: #ffffff;
  --ink: #10191e;
  --muted: #647278;
  --quiet: #9ca9ad;
  --red: #f35350;
  --cyan: #1abec1;
  --line: rgba(16, 25, 30, 0.13);
  --line-strong: rgba(16, 25, 30, 0.24);
  --red-soft: rgba(243, 83, 80, 0.1);
  --cyan-soft: rgba(26, 190, 193, 0.11);
  --shadow: 0 20px 45px rgba(23, 40, 45, 0.11);
  --font-body: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --content-width: 1420px;
  --header-height: 80px;
  --page-inline: 7vw;
  --radius-small: 8px;
  --radius-card: 14px;
  --motion-fast: 180ms;
  --motion-normal: 420ms;
  --motion-slow: 780ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Shared coded background and milestone progress for all three feature steps. */
.features {
  background: #fafafa;
}

.feature-light-flow {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .92;
}

.feature-stage { z-index: 1; }
.feature-canvas { background: transparent; }

.workflow-panel[data-panel="1"] .panel-meta,
.workflow-panel[data-panel="2"] .finished-meta {
  display: none;
}

/* The director artwork now stays inside the same inner bounds as the other panels. */
.workflow-panel[data-panel="1"] .director-frame {
  top: 0;
  left: 0;
  width: 100%;
  height: 458px;
}

.workflow-panel[data-panel="1"] .director-frame > .director-nature {
  top: 5px;
  left: 5px;
  width: 188px;
  height: 145px;
}

.workflow-panel[data-panel="1"] .director-frame > .director-player {
  top: 30px;
  left: 158px;
  width: 480px;
  height: 360px;
}

.workflow-panel[data-panel="1"] .director-frame > .director-product {
  left: 5px;
  bottom: 17px;
  width: 194px;
  height: 146px;
}

.workflow-panel[data-panel="1"] .director-frame > .director-person-ref {
  right: 184px;
  bottom: 18px;
  width: 190px;
  height: 145px;
}

.workflow-panel[data-panel="1"] .director-frame > .director-person {
  right: 12px;
  bottom: 0;
  width: 246px;
  height: 390px;
}

.workflow-panel[data-panel="1"] .panel-meta { top: 0; }
.workflow-panel[data-panel="2"] .finished-play { display: none; }

@media (max-width: 700px) {
  .workflow-panel[data-panel="1"] .director-frame {
    top: 0;
    left: 0;
    width: 100%;
    height: 390px;
  }
  .workflow-panel[data-panel="1"] .director-frame > .director-nature { top: 4px; left: 4px; width: 150px; height: 116px; }
  .workflow-panel[data-panel="1"] .director-frame > .director-player { top: 30px; left: 120px; width: 390px; height: 300px; }
  .workflow-panel[data-panel="1"] .director-frame > .director-product { left: 4px; bottom: 10px; width: 150px; height: 113px; }
  .workflow-panel[data-panel="1"] .director-frame > .director-person-ref { right: 146px; bottom: 10px; width: 150px; height: 114px; }
  .workflow-panel[data-panel="1"] .director-frame > .director-person { right: 8px; bottom: 0; width: 200px; height: 318px; }
}

/* Keep showcase media flush with the card at every responsive size. */
.case-card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.case-card-media video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

/* Last-mile contrast and icon alignment fixes. */
.features::before,
.features::after {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.features::before {
  background:
    radial-gradient(ellipse at 76% 25%, rgba(255, 225, 225, .58), transparent 32%),
    radial-gradient(ellipse at 36% 84%, rgba(210, 250, 250, .62), transparent 36%);
}

.features::after {
  display: block !important;
  opacity: .76;
  background: repeating-linear-gradient(137deg, transparent 0 26px, rgba(249, 104, 101, .24) 29px 33px, transparent 36px 59px);
  mask-image: radial-gradient(ellipse 58% 68% at 100% 9%, #000 0%, transparent 72%);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: auto;
  background: var(--page-bg);
  scroll-padding-top: var(--header-height);
}

.skip-link {
  position: absolute;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #111820;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transform: translateY(-160%);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

#main:focus {
  outline: none;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--page-bg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

body.dialog-open { overflow: hidden; }

button,
a { -webkit-tap-highlight-color: transparent; }

button { font: inherit; }

img,
video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

.content-shell {
  width: min(var(--content-width), calc(100% - (var(--page-inline) * 2)));
  margin-inline: auto;
}

.page-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--page-bg);
}

.eyebrow,
.panel-kicker,
.download-platform {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.eyebrow::before,
.panel-kicker::before,
.download-platform::before {
  width: 28px;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, var(--red) 0 50%, var(--cyan) 50% 100%);
}

.reveal { opacity: 1; transform: none; }

/* Header */
#siteHeader {
  position: fixed;
  z-index: 30;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 var(--page-inline);
  border-bottom: 1px solid transparent;
  background: rgba(247, 250, 249, 0.82);
  backdrop-filter: blur(16px);
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease;
}

#siteHeader.scrolled {
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, 0.94);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: 104px;
}

.brand img { width: 100%; height: auto; }

.desktop-nav {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 32px;
}

.desktop-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #536168;
  font-size: 14px;
  font-weight: 700;
  transition: color var(--motion-fast) ease;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--red) 0 50%, var(--cyan) 50% 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--motion-fast) ease;
}

.desktop-nav a:hover,
.desktop-nav a.active { color: var(--ink); }

.desktop-nav a:hover::after,
.desktop-nav a.active::after { transform: scaleX(1); }

.menu-toggle,
.mobile-menu { display: none; }

/* Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(340px, 0.92fr) minmax(520px, 1.08fr);
  align-items: center;
  min-height: 830px;
  padding: calc(var(--header-height) + 78px) var(--page-inline) 76px;
}

.hero::before,
.hero::after {
  position: absolute;
  z-index: -1;
  width: 46vw;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(26, 190, 193, 0.35), transparent);
  transform: rotate(-26deg);
}

.hero::before { top: 22%; right: -9vw; }
.hero::after {
  bottom: 12%;
  left: -16vw;
  background: linear-gradient(90deg, transparent, rgba(243, 83, 80, 0.31), transparent);
  transform: rotate(28deg);
}

.hero-semantic-copy {
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  width: min(100%, 590px);
  padding-bottom: 18px;
}

.hero-semantic-copy h1 {
  max-width: 560px;
  margin: 19px 0 24px;
  color: var(--ink);
  font-size: 68px;
  font-weight: 850;
  line-height: 1.1;
}

.hero-semantic-copy h1 span,
.hero-semantic-copy h1 em { display: block; font-style: normal; }

.hero-semantic-copy h1 em {
  color: transparent;
  background: linear-gradient(96deg, var(--red) 3%, var(--red) 48%, var(--cyan) 54%, var(--cyan) 97%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-semantic-copy p {
  max-width: 488px;
  margin: 0;
  color: #59676e;
  font-size: 17px;
  line-height: 1.9;
}

#heroSignals {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 47px;
}

#heroSignals span {
  position: relative;
  padding-left: 11px;
  color: #7d898d;
  font-size: 12px;
  font-weight: 700;
}

#heroSignals span::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 4px;
  content: "";
  background: var(--red);
  box-shadow: 4px 0 0 var(--cyan);
  transform: translateY(-50%);
}

.hero-visual {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  width: min(100%, 760px);
  min-height: 610px;
}

/* Feature workflow */
.features {
  padding: 132px 0 124px;
  border-top: 1px solid rgba(16, 25, 30, 0.06);
  background: #fff;
}

.features::before,
.showcase::before,
.download::before,
.contact::before {
  position: absolute;
  z-index: -1;
  top: 92px;
  width: 36vw;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(26, 190, 193, 0.27), transparent);
  transform: rotate(-25deg);
}

.features::before { right: -10vw; }

.feature-stage {
  display: grid;
  grid-template-columns: minmax(300px, 0.75fr) minmax(560px, 1.25fr);
  gap: 84px;
  align-items: center;
}

.feature-copy h2 {
  max-width: 450px;
  margin: 17px 0 19px;
  color: var(--ink);
  font-size: 50px;
  font-weight: 850;
  line-height: 1.18;
  white-space: pre-line;
}

.feature-copy h2 strong,
.feature-copy h2 em { color: var(--red); font-style: normal; }

.feature-copy p {
  max-width: 390px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.82;
}

#featureSteps {
  display: grid;
  gap: 8px;
  margin-top: 35px;
}

.feature-step {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr 18px;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 76px;
  padding: 13px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.feature-step:hover,
.feature-step.active {
  border-color: var(--line);
  background: #fff;
  box-shadow: 7px 7px 0 var(--cyan-soft);
  transform: translateX(3px);
}

.feature-step > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.feature-step.active > span { border-color: var(--red); color: var(--red); box-shadow: 3px 3px 0 var(--cyan-soft); }
.feature-step b { display: block; font-size: 14px; line-height: 1.3; }
.feature-step small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.feature-step .arrow { position: relative; width: 14px; height: 1px; background: var(--quiet); }
.feature-step .arrow::after { position: absolute; top: -3px; right: 0; width: 6px; height: 6px; content: ""; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

.workflow-visual { min-width: 0; }

.workflow-frame {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid rgba(16, 25, 30, 0.19);
  border-radius: 14px;
  background: #fbfdfd;
  box-shadow: var(--shadow);
}

.workflow-frame::before,
.workflow-frame::after {
  position: absolute;
  z-index: 0;
  width: 170px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--red), var(--cyan));
  opacity: 0.45;
  transform: rotate(-31deg);
}

.workflow-frame::before { top: 72px; right: -37px; }
.workflow-frame::after { bottom: 69px; left: -54px; transform: rotate(33deg); }

.workflow-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 47px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.workflow-bar::before {
  width: 9px;
  height: 9px;
  margin-right: 8px;
  content: "";
  background: var(--red);
  box-shadow: 14px 0 0 var(--cyan), 28px 0 0 #202b31;
}

.workflow-bar b { margin-left: 27px; font-size: 12px; }

#workflowPanels { position: relative; z-index: 1; min-height: 398px; padding: 25px 30px 24px; }

.workflow-panel { display: none; min-height: 350px; }
.workflow-panel.active { display: block; animation: workflow-in var(--motion-normal) var(--ease-standard); }

@keyframes workflow-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.panel-kicker { margin-bottom: 19px; font-size: 12px; }

.creation-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 16px; }

.creation-prompt,
.creation-reference,
.reference-frame,
.result-frame {
  min-height: 228px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.creation-prompt { padding: 21px; }
.creation-prompt b { display: block; margin-bottom: 12px; font-size: 14px; }
.creation-prompt p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.creation-reference { position: relative; }
.creation-reference img { width: 100%; height: 100%; object-fit: cover; }
.creation-reference span { position: absolute; right: 10px; bottom: 10px; padding: 5px 8px; background: rgba(16, 25, 30, 0.74); color: #fff; font-size: 10px; }
.creation-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.creation-tags span { padding: 5px 9px; border: 1px solid var(--line); color: var(--muted); font-size: 11px; }

.reference-frame,
.result-frame { position: relative; min-height: 274px; }
.reference-frame img,
.result-frame img { width: 100%; height: 274px; object-fit: cover; }
.director-frame img { object-position: center; }
.result-badge { position: absolute; top: 13px; right: 13px; padding: 5px 9px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 700; }
.panel-meta { display: flex; gap: 18px; margin-top: 15px; }
.panel-meta span { position: relative; padding-left: 10px; color: var(--muted); font-size: 11px; }
.panel-meta span::before { position: absolute; top: 50%; left: 0; width: 4px; height: 4px; content: ""; background: var(--cyan); transform: translateY(-50%); }

#workflowCaption { margin: 13px 0 0; color: var(--quiet); font-size: 12px; }

/* Showcase */
.showcase {
  min-height: 810px;
  padding: 125px 0 104px;
  background: #f3f7f7;
}

.showcase::before { top: 154px; left: -12vw; }

.showcase-stage { width: min(1540px, 100%); margin-inline: auto; }

.showcase-heading { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; width: min(100%, 810px); margin: 0 auto 47px; text-align: center; }
.showcase-heading .beam,
.showcase-heading-beam { height: 1px; background: linear-gradient(90deg, transparent, var(--red), var(--cyan)); }
.showcase-heading .beam:last-child,
.showcase-heading-beam-right { transform: scaleX(-1); }
.showcase-heading h2 { margin: 0; font-size: 52px; font-weight: 850; line-height: 1.1; }
.showcase-heading h2 em { color: var(--red); font-style: normal; }
.showcase-heading h2 strong { color: var(--cyan); }
.showcase-heading p { grid-column: 1 / -1; margin: -9px 0 0; color: var(--muted); font-size: 15px; }

#caseGallery { position: relative; width: min(100%, 1240px); min-height: 465px; margin: 0 auto; }
.case-viewport { position: absolute; inset: 0 95px 37px; overflow: hidden; }
[data-case-track] { position: relative; width: 100%; height: 100%; }

.case-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 236px;
  height: 394px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(16, 25, 30, 0.2);
  border-radius: 8px;
  background: #162126;
  box-shadow: 0 16px 30px rgba(16, 25, 30, 0.15);
  cursor: pointer;
  opacity: 0;
  transform: translateX(-50%) scale(0.84);
  transition: transform 460ms var(--ease-standard), opacity 460ms var(--ease-standard), filter 460ms var(--ease-standard), box-shadow 460ms var(--ease-standard);
}

.case-card.active { z-index: 4; opacity: 1; filter: none; transform: translateX(-50%) scale(1); }
.case-card.side-left { z-index: 3; opacity: 0.72; filter: saturate(0.64); transform: translateX(calc(-50% - 273px)) scale(0.88); }
.case-card.side-right { z-index: 3; opacity: 0.72; filter: saturate(0.64); transform: translateX(calc(-50% + 273px)) scale(0.88); }
.case-card:hover.active { box-shadow: 0 23px 41px rgba(16, 25, 30, 0.25), 5px 5px 0 var(--cyan-soft); }
.case-card-media,
.case-card-media video { display: block; width: 100%; height: 100%; }
.case-card-media video { object-fit: cover; }
.case-card::after { position: absolute; inset: auto 0 0; height: 68px; content: ""; background: linear-gradient(transparent, rgba(5, 12, 15, 0.67)); pointer-events: none; }

.case-arrow {
  position: absolute;
  z-index: 6;
  top: 45%;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.case-arrow::after { width: 8px; height: 8px; content: ""; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(-135deg); }
.case-arrow:hover { background: var(--ink); color: #fff; }
.case-arrow:hover::after { transform: rotate(-135deg) translate(-2px, 2px); }
[data-case-prev] { left: 13px; }
[data-case-next] { right: 13px; }
[data-case-next]::after { transform: rotate(45deg); }
[data-case-next]:hover::after { transform: rotate(45deg) translate(-2px, 2px); }

.case-side-hit { position: absolute; z-index: 5; top: 0; bottom: 39px; width: 30%; border: 0; background: transparent; cursor: pointer; }
.case-side-hit-left { left: 0; }
.case-side-hit-right { right: 0; }
.case-pagination { position: absolute; z-index: 7; bottom: 0; left: 50%; display: flex; gap: 8px; transform: translateX(-50%); }
.case-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #bac6c8; cursor: pointer; transition: width var(--motion-fast) ease, background var(--motion-fast) ease; }
.case-dot.active { width: 26px; border-radius: 4px; background: linear-gradient(90deg, var(--red), var(--cyan)); }
.case-empty {
  position: absolute;
  inset: 8% 4%;
  display: grid;
  height: auto;
  place-content: center;
  border: 1px dashed var(--line-strong);
  background: rgba(255, 255, 255, 0.5);
  text-align: center;
}
.case-empty b { font-size: 16px; }
.case-empty p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }

/* Download */
.download { padding: 132px 0 132px; background: #fff; }
.download::before { top: 43%; right: -12vw; transform: rotate(28deg); }
.download-wrap { text-align: center; }
.download-heading > img { width: 100px; margin: 0 auto 24px; }
.download-heading h2 { max-width: 860px; margin: 0 auto; font-size: 49px; font-weight: 850; line-height: 1.2; }
.download-heading h2 span,
.download-heading h2 em { font-style: normal; }
.download-heading h2 #downloadBrandWord { color: var(--ink); }
.download-heading h2 #downloadAccent { color: transparent; background: linear-gradient(90deg, var(--red), var(--cyan)); -webkit-background-clip: text; background-clip: text; }
.download-choice { margin-top: 52px; }
.download-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 800px; margin: 0 auto; }
.download-card { position: relative; min-height: 260px; padding: 35px 38px 31px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fcfefe; text-align: left; transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.download-card::after { position: absolute; right: -41px; bottom: -43px; width: 145px; height: 145px; content: ""; border: 1px solid rgba(26, 190, 193, 0.35); border-radius: 50%; }
.download-card:hover:not(.disabled) { box-shadow: var(--shadow); transform: translateY(-4px); }
.download-card.disabled { opacity: 0.56; }
.download-card h3 { margin: 18px 0 7px; font-size: 27px; line-height: 1.2; }
.download-card p { margin: 0 0 23px; color: var(--muted); font-size: 13px; }
.windows-download,
.mac-download { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-width: 177px; min-height: 46px; padding: 0 17px; border: 1px solid var(--ink); border-radius: 7px; background: var(--ink); color: #fff; cursor: pointer; font-size: 13px; font-weight: 700; transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.windows-download:hover,
.mac-download:hover { box-shadow: 4px 4px 0 var(--cyan), -3px -3px 0 var(--red); transform: translateY(-2px); }
.download-disabled-button { cursor: not-allowed; opacity: 0.62; }
.download-disabled-button:hover { box-shadow: none; transform: none; }
.windows-mark { display: grid; grid-template-columns: repeat(2, 8px); gap: 2px; width: 18px; }
.windows-mark i { display: block; width: 8px; height: 8px; background: #fff; }
.mac-mark { position: relative; width: 17px; height: 18px; }
.mac-mark::before { position: absolute; bottom: 0; left: 1px; width: 15px; height: 15px; content: ""; border-radius: 45% 45% 48% 48%; background: #fff; }
.mac-mark::after { position: absolute; top: 0; left: 10px; width: 6px; height: 8px; content: ""; border-left: 2px solid #fff; border-radius: 60%; transform: rotate(30deg); }

/* Contact and footer */
.contact { min-height: 500px; padding: 130px 0 110px; background: #f2f7f7; }
.contact::before { top: 25%; left: -10vw; }
.contact-grid { position: relative; }
.contact-grid::before,
.contact-grid::after { position: absolute; width: 80px; height: 80px; content: ""; border: 1px solid; transform: rotate(45deg); }
.contact-grid::before { top: -7px; left: 13%; border-color: var(--red) transparent transparent var(--red); }
.contact-grid::after { right: 15%; bottom: -21px; border-color: transparent var(--cyan) var(--cyan) transparent; }
.contact-wrap { position: relative; text-align: center; }
.contact-copy { max-width: 725px; margin: 0 auto; }
.contact-copy .eyebrow { justify-content: center; }
.contact-copy h2 { margin: 17px 0 20px; font-size: 49px; font-weight: 850; line-height: 1.2; }
.contact-copy h2 em,
.contact-copy h2 strong { color: var(--red); font-style: normal; }
.contact-copy h2 strong { color: var(--cyan); }
.contact-copy p { max-width: 545px; margin: 0 auto; color: var(--muted); font-size: 16px; line-height: 1.85; }

.site-footer { border-top: 1px solid var(--line); background: #fff; }
.footer-main { display: flex; align-items: center; justify-content: space-between; gap: 30px; width: min(var(--content-width), calc(100% - (var(--page-inline) * 2))); padding: 31px 0 23px; margin: 0 auto; }
.footer-brand { display: flex; align-items: center; gap: 19px; }
.footer-brand img { width: 96px; }
.footer-brand span { padding-left: 19px; border-left: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.footer-legal { padding: 16px var(--page-inline); border-top: 1px solid rgba(16, 25, 30, 0.07); color: var(--quiet); font-size: 11px; text-align: center; }

/* Native dialogs */
dialog { width: min(510px, calc(100% - 36px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 24px 65px rgba(16, 25, 30, 0.32); }
dialog::backdrop { background: rgba(16, 25, 30, 0.45); backdrop-filter: blur(3px); }
.download-dialog-shell { position: relative; padding: 30px; }
.download-dialog-shell h2 { max-width: 385px; margin: 0 38px 10px 0; font-size: 23px; line-height: 1.35; }
.download-dialog-shell p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.download-dialog-mark { display: grid; grid-template-columns: repeat(2, 8px); gap: 2px; width: 18px; margin-bottom: 18px; }
.download-dialog-mark i { display: block; width: 8px; height: 8px; background: var(--ink); }
.download-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; }
.download-dialog-actions button { min-height: 40px; padding: 0 17px; border: 1px solid var(--ink); border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 700; }
.download-dialog-confirm { background: var(--ink) !important; color: #fff !important; }
.dialog-shell { overflow: hidden; }
.dialog-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 20px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: #fff; }
.dialog-bar small { display: block; margin-bottom: 4px; color: rgba(255, 255, 255, 0.64); font-size: 11px; }
.dialog-bar h2 { margin: 0; font-size: 17px; line-height: 1.35; }
.dialog-media { padding: 18px; }
.dialog-media video { width: auto; max-width: 100%; max-height: 75vh; margin: 0 auto; background: #000; }
.dialog-close { position: absolute; top: 14px; right: 14px; display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 50%; background: #edf2f2; cursor: pointer; color: var(--ink); font-size: 0; }
.dialog-close::before,
.dialog-close::after { position: absolute; width: 12px; height: 1px; content: ""; background: currentColor; transform: rotate(45deg); }
.dialog-close::after { transform: rotate(-45deg); }
.video-dialog { width: min(960px, calc(100% - 32px)); background: #0b1215; }
.video-dialog h2 { color: #fff; font-size: 17px; }
.video-dialog video { width: auto; max-width: 100%; max-height: 75vh; margin: 0 auto; background: #000; }
.video-dialog .dialog-close { background: rgba(255, 255, 255, 0.15); color: #fff; }

@media (max-width: 1240px) {
  :root { --page-inline: 5vw; }
}

@media (max-width: 980px) {
  :root { --page-inline: 32px; }
  #siteHeader { height: 72px; }
  .desktop-nav { display: none; }
  .menu-toggle { position: relative; display: grid; width: 42px; height: 42px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: pointer; }
  .menu-toggle span { display: block; width: 20px; height: 1px; background: var(--ink); transition: transform var(--motion-fast) ease, opacity var(--motion-fast) ease; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mobile-menu { position: fixed; z-index: 29; top: 72px; right: 0; left: 0; display: grid; max-height: 0; overflow: hidden; border-bottom: 1px solid transparent; background: rgba(255, 255, 255, 0.98); opacity: 0; transition: max-height var(--motion-normal) ease, opacity var(--motion-fast) ease, border-color var(--motion-fast) ease; }
  .mobile-menu.open { max-height: 330px; border-bottom-color: var(--line); opacity: 1; }
  .mobile-menu a { padding: 15px var(--page-inline); border-top: 1px solid rgba(16, 25, 30, 0.07); color: var(--ink); font-weight: 700; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: auto; padding-top: 141px; padding-bottom: 62px; }
  .hero-semantic-copy { grid-column: auto; grid-row: auto; order: 1; width: 100%; max-width: 650px; min-width: 0; }
  .hero-visual { grid-column: auto; grid-row: auto; order: 2; justify-self: center; width: 760px; min-width: 0; margin-top: 15px; transform: scale(0.92); transform-origin: center top; }
  .feature-stage { grid-template-columns: 1fr; gap: 42px; }
  .feature-copy { max-width: 600px; }
  .feature-copy h2 { max-width: 600px; }
  .workflow-visual { width: 100%; }
  .showcase { padding-top: 104px; }
  .footer-main { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 680px) {
  :root { --page-inline: 20px; }
  body { font-size: 15px; }
  .brand { width: 87px; }
  .hero { padding-top: 118px; }
  .hero-semantic-copy h1 { margin-top: 15px; font-size: 41px; line-height: 1.16; }
  .hero-semantic-copy p { max-width: 100%; overflow-wrap: anywhere; font-size: 15px; line-height: 1.8; }
  #heroSignals { gap: 10px 14px; margin-top: 32px; }
  .hero-visual { width: 650px; min-height: 510px; margin: -15px -111px -9px; transform: scale(0.67); transform-origin: center top; }
  .features,
  .download,
  .contact { padding-top: 82px; padding-bottom: 82px; }
  .feature-copy h2 { font-size: 36px; }
  .feature-copy p { font-size: 14px; }
  .feature-step { grid-template-columns: 37px 1fr 14px; min-height: 70px; padding: 11px; }
  .workflow-frame { min-height: 430px; border-radius: 10px; }
  #workflowPanels { min-height: 328px; padding: 18px; }
  .workflow-panel { min-height: 286px; }
  .creation-grid { grid-template-columns: 1fr; }
  .creation-prompt { min-height: 118px; padding: 15px; }
  .creation-reference { display: none; }
  .reference-frame,
  .result-frame { min-height: 220px; }
  .reference-frame img,
  .result-frame img { height: 220px; }
  #workflowCaption { font-size: 11px; }
  .showcase { min-height: 665px; padding: 82px 0 75px; }
  .showcase-heading { gap: 14px; margin-bottom: 31px; }
  .showcase-heading h2 { font-size: 38px; }
  .showcase-heading p { margin-top: -4px; font-size: 13px; }
  #caseGallery { min-height: 429px; }
  .case-viewport { right: 0; bottom: 35px; left: 0; }
  .case-card { width: 210px; height: 350px; }
  .case-card.side-left { transform: translateX(calc(-50% - 156px)) scale(0.81); }
  .case-card.side-right { transform: translateX(calc(-50% + 156px)) scale(0.81); }
  .case-arrow { top: auto; bottom: -3px; width: 34px; height: 34px; transform: none; }
  [data-case-prev] { left: calc(50% - 69px); }
  [data-case-next] { right: calc(50% - 69px); }
  .case-side-hit { bottom: 33px; width: 20%; }
  .download-heading > img { width: 83px; }
  .download-heading h2,
  .contact-copy h2 { font-size: 36px; }
  .download-choice { margin-top: 35px; }
  .download-grid { grid-template-columns: 1fr; gap: 14px; }
  .download-card { min-height: 225px; padding: 28px; }
  .contact-grid::before,
  .contact-grid::after { width: 45px; height: 45px; }
  .contact-copy p { font-size: 14px; }
  .footer-main { padding-top: 25px; }
  .footer-brand { flex-wrap: wrap; gap: 10px; }
  .footer-brand span { padding-left: 0; border-left: 0; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Visual restoration: page 1 (home) uses the approved reference board as its
 * sole painted layer while the live DOM remains available to assistive tech. */
#siteHeader {
  height: 80px;
  padding: 0 clamp(24px, 6vw, 96px);
  border-bottom: 1px solid rgba(17, 24, 32, .11);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: none;
}

#siteHeader .brand {
  width: auto;
  min-width: 170px;
}

#siteHeader .brand img {
  width: 150px;
  height: auto;
  max-height: 54px;
  object-fit: contain;
}

#siteHeader .brand > span {
  display: none;
}

#siteHeader .desktop-nav {
  position: absolute;
  left: 50%;
  top: 0;
  width: max-content;
  height: 100%;
  margin: 0;
  justify-content: center;
  gap: clamp(34px, 4vw, 76px);
  transform: translateX(-50%);
}

#siteHeader .desktop-nav a {
  height: 100%;
  padding: 0 4px;
  color: #111;
  font-size: 18px;
  font-weight: 700;
}

#siteHeader .desktop-nav a::after {
  right: auto;
  left: 50%;
  bottom: 17px;
  width: 34px;
  height: 4px;
  border-radius: 3px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
}

#siteHeader .desktop-nav a:hover::after,
#siteHeader .desktop-nav a.active::after {
  transform: translateX(-50%) scaleX(1);
}

.hero {
  display: block;
  width: 100%;
  min-height: calc(100vh - var(--header-height));
  height: calc(100vh - var(--header-height));
  margin-top: var(--header-height);
  padding: 0;
  overflow: hidden;
  background-color: #fff;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.hero::before,
.hero::after {
  display: block;
}

.hero-visual { pointer-events: none; }

.hero-semantic-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: auto;
  padding: 0;
  pointer-events: none;
}

.hero-semantic-copy > * { pointer-events: none; }

@media (max-width: 980px) {
  :root { --header-height: 68px; }

  #siteHeader {
    height: var(--header-height);
    padding: 0 18px;
  }

  #siteHeader .brand { min-width: 0; }
  #siteHeader .brand img { width: 126px; max-height: 48px; }

  #siteHeader .menu-toggle {
    display: grid;
    width: 42px;
    height: 42px;
    padding: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    align-content: center;
    gap: 5px;
  }

  #siteHeader .menu-toggle span {
    width: 26px;
    height: 1px;
    background: #111;
  }

  #siteHeader .mobile-menu {
    top: var(--header-height);
    left: 12px;
    right: 12px;
    padding: 8px;
    border: 1px solid rgba(17, 24, 32, .11);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(20, 40, 50, .14);
  }

  #siteHeader .mobile-menu a {
    padding: 14px 16px;
    color: #111;
    font-weight: 700;
  }
}

/* Core feature canvas: one fixed coordinate system, scaled as a whole so no
 * child element drifts when the viewport changes. */
.features {
  position: relative;
  height: calc(100vh - var(--header-height));
  min-height: calc(100vh - var(--header-height));
  padding: 0;
  overflow: hidden;
  border-top: 0;
  background: #fff;
}

.feature-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
}

.feature-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1672px;
  height: 941px;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 23%, rgba(255, 221, 220, .34), transparent 27%),
    radial-gradient(circle at 18% 75%, rgba(222, 250, 250, .36), transparent 31%),
    #fff;
  transform: translate(-50%, -50%) scale(var(--feature-scale, 1));
  transform-origin: center;
}

.feature-copy {
  position: absolute;
  top: 116px;
  left: 74px;
  width: 560px;
  max-width: none;
  padding: 0;
  visibility: visible;
  pointer-events: none;
}

.feature-copy > .eyebrow {
  display: inline-flex;
  color: #20292e;
  font-size: 18px;
  letter-spacing: .01em;
}

.feature-copy > .eyebrow::before {
  width: 34px;
  height: 3px;
}

.feature-copy h2 {
  max-width: 560px;
  margin: 42px 0 22px;
  color: #111820;
  font-size: 57px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0;
}

.feature-copy p {
  max-width: 560px;
  margin: 0;
  color: #67727d;
  font-size: 20px;
  line-height: 1.65;
}

#featureSteps {
  display: grid;
  gap: 17px;
  margin-top: 35px;
  pointer-events: auto;
}

.feature-step {
  display: grid;
  grid-template-columns: 92px 1fr 28px;
  gap: 24px;
  align-items: center;
  width: 560px;
  height: 118px;
  min-height: 118px;
  padding: 18px 24px;
  border: 1px solid rgba(17, 24, 32, .09);
  border-radius: 20px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 8px 24px rgba(24, 50, 60, .07);
  color: #111820;
  text-align: left;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.feature-step:hover,
.feature-step.active {
  border-color: rgba(255, 77, 73, .78);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 28px rgba(24, 50, 60, .1), inset 4px 0 0 #ff4d49;
  transform: none;
}

.feature-step > span {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 0;
  border-radius: 15px;
  background: #f3f5f5;
  color: #111820;
  font-size: 25px;
  font-weight: 700;
}

.feature-step.active > span {
  border: 0;
  color: #fff;
  background: linear-gradient(145deg, #ff4d49 5%, #f45c74 50%, #20bdc1 100%);
  box-shadow: none;
}

.feature-step b {
  display: block;
  color: #111820;
  font-size: 22px;
  line-height: 1.35;
}

.feature-step small {
  display: block;
  margin-top: 8px;
  color: #67727d;
  font-size: 16px;
  line-height: 1.45;
}

.feature-step .feature-arrow {
  display: block;
  width: auto;
  height: auto;
  background: none;
  color: #aab4b7;
  font-size: 38px;
  line-height: 1;
  text-align: center;
}

.feature-step.active .feature-arrow { color: #22c4c9; }

.workflow-visual {
  position: absolute;
  top: 86px;
  right: 72px;
  width: 887px;
  height: 770px;
  min-width: 0;
  visibility: visible;
  pointer-events: none;
}

.workflow-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 32, .12);
  border-radius: 27px;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 18px 52px rgba(24, 50, 60, .1);
}

.workflow-frame::before,
.workflow-frame::after { display: none; }

.workflow-bar {
  position: relative;
  z-index: 2;
  display: flex;
  height: 64px;
  align-items: center;
  justify-content: flex-end;
  padding: 0 34px;
  border-bottom: 1px solid rgba(17, 24, 32, .1);
  background: rgba(255, 255, 255, .55);
}

.workflow-bar::before { display: none; }
.workflow-bar b { margin: 0; color: #67727d; font-size: 16px; font-weight: 600; }

#workflowPanels {
  position: relative;
  z-index: 1;
  min-height: 0;
  height: calc(100% - 64px);
  padding: 47px 48px 70px;
}

.workflow-panel {
  display: none;
  min-height: 0;
  height: 100%;
}

.workflow-panel.active {
  display: block;
  animation: none;
}

.panel-kicker {
  margin: 0 0 27px;
  color: #20292e;
  font-size: 25px;
  font-weight: 700;
}

.panel-kicker::before { display: none; }

.creation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(250px, .85fr);
  gap: 30px;
  height: 420px;
}

.creation-prompt,
.creation-reference,
.reference-frame,
.result-frame {
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 32, .12);
  border-radius: 20px;
  background: rgba(255, 255, 255, .86);
}

.creation-prompt { padding: 30px; }
.creation-prompt b { margin-bottom: 18px; font-size: 18px; }
.creation-prompt p { color: #20292e; font-size: 22px; line-height: 1.8; }
.creation-reference { position: relative; }
.creation-reference img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.creation-reference span { right: 18px; bottom: 17px; padding: 8px 13px; border-radius: 8px; background: rgba(17, 24, 32, .74); font-size: 14px; }
.creation-tags { gap: 12px; margin-top: 22px; }
.creation-tags span { padding: 8px 13px; border: 1px solid rgba(17, 24, 32, .12); border-radius: 99px; color: #67727d; font-size: 14px; }

.reference-frame,
.result-frame { position: relative; height: 535px; }

.reference-frame img,
.result-frame img { width: 100%; height: 100%; object-fit: contain; object-position: center; }

.director-frame img { object-fit: contain; }
.result-badge { top: 18px; right: 18px; padding: 8px 12px; border-radius: 7px; font-size: 13px; }
.panel-meta { display: flex; gap: 24px; margin-top: 20px; }
.panel-meta b { font-size: 17px; }
.panel-meta span { font-size: 14px; }
#workflowCaption { margin: 18px 0 0; color: #9aa5aa; font-size: 14px; }

@media (max-width: 980px) {
  .features {
    height: calc(100svh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
  }

  .feature-canvas { transform: translate(-50%, -50%) scale(var(--feature-scale, 1)); }
}

/* Final visual pass: every page uses live text and locally copied component
 * assets. Reference boards remain comparison material only. */
.hero {
  position: relative;
  height: calc(100vh - var(--header-height));
  min-height: 640px;
  margin-top: var(--header-height);
  padding: 0;
  overflow: hidden;
  background: #fafafa;
}

.hero::before,
.hero::after { display: block; position: absolute; inset: 0; z-index: 0; content: ""; pointer-events: none; }
.hero::before { background: radial-gradient(ellipse at 65% 38%, rgba(255, 235, 235, .7), transparent 39%), radial-gradient(ellipse at 54% 74%, rgba(213, 251, 251, .68), transparent 38%); }
.hero::after { opacity: .6; background: repeating-linear-gradient(151deg, transparent 0 42px, rgba(249, 104, 101, .15) 44px 47px, transparent 49px 68px), repeating-linear-gradient(28deg, transparent 0 54px, rgba(31, 197, 199, .13) 56px 59px, transparent 61px 81px); mask-image: linear-gradient(90deg, transparent 5%, #000 43%, #000 100%); }

.hero-visual,
.hero-semantic-copy { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; pointer-events: none; visibility: visible; }
.hero-visual { z-index: 1; }
.hero-canvas,
.hero-semantic-copy { width: 1672px; height: 869px; top: 50%; left: 50%; inset: auto; transform: translate(-50%, -50%) scale(var(--hero-scale, 1)); transform-origin: center; }
.hero-canvas { position: absolute; overflow: visible; }
.hero-semantic-copy { position: absolute; }
.hero-semantic-copy > * { opacity: 1; pointer-events: none; }

.hero-semantic-copy .eyebrow { position: absolute; top: 142px; left: 70px; color: #111820; font-size: 24px; font-weight: 600; }
.hero-semantic-copy .eyebrow::before { width: 35px; height: 3px; }
.hero-semantic-copy h1 { position: absolute; top: 222px; left: 68px; width: 780px; margin: 0; color: #10191e; font-size: 74px; font-weight: 900; line-height: 1.16; letter-spacing: 0; }
.hero-semantic-copy h1 span,
.hero-semantic-copy h1 em { display: block; font-style: normal; }
.hero-semantic-copy h1 em { white-space: nowrap; background: linear-gradient(90deg, #ef403d 6%, #ef403d 43%, #16bfc3 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-semantic-copy p { position: absolute; top: 458px; left: 70px; width: 790px; margin: 0; color: #1b252b; font-size: 24px; line-height: 1.7; }
#heroSignals { position: absolute; top: 590px; left: 70px; display: flex; gap: 0; margin: 0; }
#heroSignals span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 38px; border-left: 3px solid #ff514c; color: #111820; font-size: 22px; font-weight: 600; }
#heroSignals span + span { border-left-color: #ff514c; }
.hero-canvas img { position: absolute; max-width: none; object-fit: contain; user-select: none; }
.hero-art-person { right: -2px; bottom: -58px; width: 535px; height: 850px; object-position: center bottom; }
.hero-art-prompt { left: 655px; top: 28px; width: 286px; height: 214px; transform: rotate(5deg); }
.hero-art-reference { left: 625px; top: 132px; width: 246px; height: 185px; transform: rotate(5deg); }
.hero-art-video { left: 805px; top: 178px; width: 500px; height: 375px; transform: rotate(6deg); }
.hero-art-filmstrip { left: 786px; top: 470px; width: 480px; height: 270px; transform: rotate(7deg); }
.hero-art-progress { left: 785px; top: 642px; width: 422px; height: 225px; transform: rotate(6deg); }
.hero-art-reel { left: 1005px; top: 49px; width: 114px; height: 114px; }
.hero-art-play { left: 1165px; top: -10px; width: 130px; height: 130px; transform: rotate(14deg); }
.hero-art-cube { left: 1198px; top: 395px; width: 104px; height: 104px; }

/* Feature step two and three local asset composition. */
.director-frame { background: radial-gradient(circle at 55% 40%, rgba(229, 251, 248, .8), rgba(255, 255, 255, .82) 55%); }
.director-frame > img { position: absolute; max-width: none; object-fit: contain; }
.director-frame > .director-nature { top: 18px; left: 26px; width: 188px; height: 145px; }
.director-frame > .director-player { top: 58px; left: 195px; width: 520px; height: 380px; transform: rotate(-4deg); }
.director-frame > .director-product { left: 28px; bottom: 23px; width: 194px; height: 146px; }
.director-frame > .director-person-ref { right: 158px; bottom: 20px; width: 190px; height: 145px; transform: rotate(4deg); }
.director-frame > .director-person { right: 4px; bottom: -2px; width: 246px; height: 390px; object-position: center bottom; }
.director-frame,
.finished-frame { height: 470px; }
.finished-frame { background: linear-gradient(145deg, #f8fcfc, #eef7f7); }
.finished-frame > img { object-fit: contain; padding: 12px 14px 14px; }
.finished-play { position: absolute; top: 46%; left: 50%; display: grid; width: 76px; height: 76px; place-items: center; border: 2px solid rgba(255,255,255,.92); border-radius: 50%; background: rgba(17, 27, 30, .65); color: white; font-size: 28px; transform: translate(-50%, -50%); }
.finished-download { position: absolute; right: 31px; bottom: 25px; padding: 11px 22px; border: 1px solid rgba(22, 192, 195, .4); border-radius: 10px; background: linear-gradient(100deg, rgba(245, 87, 80, .95), rgba(24, 193, 198, .95)); color: white; font-size: 14px; font-weight: 700; box-shadow: 0 8px 20px rgba(25, 179, 185, .2); }

/* Step three: the finished preview occupies the full inner panel, while its
 * badge, play control and download label remain live decorative controls. */
.workflow-panel[data-panel="2"] .panel-kicker { margin-bottom: 22px; }
.workflow-panel[data-panel="2"] .finished-frame { height: 512px; border-radius: 20px; }
.workflow-panel[data-panel="2"] .finished-frame > img { padding: 10px 12px 13px; }
.workflow-panel[data-panel="2"] .finished-play { width: 78px; height: 78px; }
.workflow-panel[data-panel="2"] .panel-meta { align-items: center; margin-top: 18px; }
.workflow-panel[data-panel="2"] .panel-status { color: #18bfc2; }
.workflow-panel[data-panel="2"] .panel-meta b { color: #152127; }

/* Step three follows the reference hierarchy: preview first, generated/download
 * controls below it, then the three completion states on a separate rule. */
.features[data-feature-index="2"] .workflow-bar { display: none; }
.features[data-feature-index="2"] #workflowPanels {
  height: 100%;
  padding: 31px 48px 52px;
}
.workflow-panel[data-panel="2"] .panel-kicker { margin-bottom: 10px; }
.workflow-panel[data-panel="2"] .finished-frame {
  height: 440px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.workflow-panel[data-panel="2"] .finished-frame > img { padding: 0; }
.workflow-panel[data-panel="2"] .finished-frame > img { object-fit: cover; transform: scale(1.12); }
.workflow-panel[data-panel="2"] .finished-underbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  border-bottom: 1px solid rgba(17, 24, 32, .1);
}
.workflow-panel[data-panel="2"] .finished-generated {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 17px;
  border: 1px solid rgba(25, 201, 118, .16);
  border-radius: 99px;
  background: #fff;
  color: #20292e;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(22, 64, 68, .07);
}
.workflow-panel[data-panel="2"] .finished-generated::before {
  content: "✓";
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border: 2px solid #20ca77;
  border-radius: 50%;
  color: #20ca77;
  font-size: 13px;
  font-weight: 800;
}
.workflow-panel[data-panel="2"] .finished-download {
  position: static;
  display: inline-flex;
  align-items: center;
  padding: 11px 24px;
  border-radius: 99px;
  font-size: 15px;
}
.workflow-panel[data-panel="2"] .finished-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  align-items: center;
  margin-top: 16px;
}
.workflow-panel[data-panel="2"] .finished-milestone {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 0;
  color: #20292e;
  font-size: 15px;
  white-space: nowrap;
}
.workflow-panel[data-panel="2"] .finished-milestone:nth-child(2) { justify-self: center; }
.workflow-panel[data-panel="2"] .finished-milestone:nth-child(3) { justify-self: end; }
.workflow-panel[data-panel="2"] .finished-milestone::before { display: none; }
.finished-milestone-icon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid #1bc2c6;
  border-radius: 50%;
}
.finished-milestone-icon::before {
  content: "✓";
  color: #1bc2c6;
  font-size: 13px;
  font-weight: 800;
}
.workflow-panel[data-panel="2"] .finished-milestone b { font-weight: 600; }

/* All three feature states share one fixed outer frame.  The active panel
 * changes its contents only; it must not move or resize the right-hand card. */
.features[data-feature-index="0"] .workflow-visual,
.features[data-feature-index="1"] .workflow-visual,
.features[data-feature-index="2"] .workflow-visual {
  top: 133px;
  right: 57px;
  width: 927px;
  height: 708px;
}

/* Step 3 follows the shared result-panel inner bounds. */
.features[data-feature-index="2"] #workflowPanels { padding-left: 68px; padding-right: 48px; }

/* Showcase */
.showcase { min-height: calc(100vh - var(--header-height)); height: calc(100vh - var(--header-height)); padding: 0; background: #f8fbfb; }
.showcase::before { display: block; top: 42%; left: -15%; width: 130%; height: 280px; opacity: .65; background: repeating-linear-gradient(15deg, transparent 0 28px, rgba(244, 86, 81, .16) 30px 34px, transparent 37px 58px), repeating-linear-gradient(-13deg, transparent 0 42px, rgba(23, 197, 201, .14) 44px 48px, transparent 51px 76px); transform: rotate(-4deg); }
.showcase-stage { position: relative; width: min(1480px, calc(100% - 80px)); height: 100%; margin: 0 auto; padding-top: 64px; }
.showcase-heading { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: center; width: min(100%, 900px); margin: 0 auto 36px; }
.showcase-heading-beam { height: 3px; background: linear-gradient(90deg, transparent, #f2534c 42%, #19bdc1); }
.showcase-heading h2 { margin: 0; color: #10191e; font-size: 62px; font-weight: 900; line-height: 1.1; white-space: nowrap; }
.showcase-heading h2 em { font-style: normal; }
#showcaseTitleAccent { color: #f2534c; }
#showcaseTitleCyan { color: #19bdc1; }
.showcase-heading p { grid-column: 1 / -1; margin: -7px 0 0; color: #77858a; font-size: 18px; text-align: center; }
#caseGallery { width: min(100%, 1280px); min-height: 620px; margin: 0 auto; }
.case-viewport { inset: 0 100px 46px; }
.case-card { width: 350px; height: 590px; border-radius: 22px; border-color: rgba(255,255,255,.88); background: rgba(218, 237, 236, .62); box-shadow: 0 18px 46px rgba(16, 54, 60, .18), inset 0 0 0 2px rgba(255,255,255,.42); }
.case-card.active { box-shadow: 0 24px 52px rgba(16, 54, 60, .23), 0 0 0 2px rgba(245, 83, 77, .28); }
.case-card.side-left { transform: translateX(calc(-50% - 365px)) scale(.88); }
.case-card.side-right { transform: translateX(calc(-50% + 365px)) scale(.88); }
.case-arrow { width: 58px; height: 58px; border-color: rgba(255,255,255,.88); box-shadow: 0 8px 22px rgba(32, 76, 80, .12); }
.case-arrow::after { width: 12px; height: 12px; border-width: 2px; }
.case-pagination { bottom: 10px; }

/* Download */
.download { min-height: calc(100vh - var(--header-height)); height: calc(100vh - var(--header-height)); padding: 0; overflow: hidden; background: #fbfcfc; }
.download::before { display: block; top: 54%; right: -13%; width: 100%; height: 280px; opacity: .58; background: repeating-linear-gradient(158deg, transparent 0 28px, rgba(245, 90, 84, .17) 30px 34px, transparent 37px 58px), repeating-linear-gradient(25deg, transparent 0 43px, rgba(23, 196, 200, .15) 45px 49px, transparent 52px 76px); transform: rotate(-7deg); }
.download-wrap { position: relative; width: min(1180px, calc(100% - 80px)); height: 100%; padding-top: 72px; }
.download-heading > img { width: 72px; margin: 0 auto 19px; }
.download-heading h2 { max-width: none; font-size: 62px; font-weight: 900; }
.download-choice { margin-top: 34px; }
.download-grid { max-width: 930px; gap: 34px; }
.download-card { min-height: 455px; padding: 31px 40px 30px; border: 1px solid rgba(255, 111, 105, .42); border-radius: 27px; background: rgba(255,255,255,.7); box-shadow: 0 18px 45px rgba(19, 80, 84, .08), inset 0 0 42px rgba(231, 250, 248, .35); text-align: center; }
#macDownloadCard { border-color: rgba(28, 199, 201, .42); }
.download-card::after { display: none; }
.download-platform { justify-content: center; color: #8b979a; font-size: 13px; letter-spacing: .12em; }
.download-platform::before { display: none; }
.download-art { position: relative; z-index: 1; width: 255px; height: 180px; margin: 9px auto 2px; object-fit: contain; }
.download-art-macos { width: 310px; height: 180px; }
.download-decor { position: absolute; z-index: 0; object-fit: contain; opacity: .65; pointer-events: none; }
.download-decor-play { top: 25px; right: 24px; width: 112px; height: 112px; transform: rotate(11deg); }
.download-decor-cube { right: -4px; bottom: -14px; width: 145px; height: 145px; }
.download-card h3 { margin: 8px 0 7px; font-size: 31px; }
.download-card p { margin: 0 0 28px; font-size: 16px; }
.windows-download { min-width: 280px; min-height: 56px; border: 0; border-radius: 30px; background: linear-gradient(90deg, #ff6259, #1ac3c4); font-size: 17px; }
.windows-mark { display: inline-grid; grid-template-columns: repeat(2, 8px); gap: 2px; width: 18px; }

/* Contact */
.contact { min-height: calc(100vh - var(--header-height)); height: calc(100vh - var(--header-height)); padding: 0; background: #fbfcfc; }
.contact::before { display: block; top: 52%; left: -12%; width: 125%; height: 300px; opacity: .6; background: repeating-linear-gradient(20deg, transparent 0 34px, rgba(242, 89, 83, .17) 36px 40px, transparent 43px 72px), repeating-linear-gradient(-14deg, transparent 0 49px, rgba(26, 196, 200, .18) 51px 55px, transparent 58px 87px); transform: rotate(-4deg); }
.contact-wrap { position: relative; width: min(1540px, calc(100% - 70px)); height: 100%; padding-top: 67px; text-align: center; }
.contact-copy { position: relative; z-index: 3; max-width: 950px; }
.contact-copy .eyebrow { justify-content: center; }
.contact-copy h2 { margin: 22px 0 10px; font-size: 62px; font-weight: 900; }
.contact-copy p { font-size: 20px; }
.contact-artboard { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.contact-qr { position: absolute; left: 50%; top: 355px; width: 205px; height: 205px; object-fit: contain; transform: translateX(-50%); }
.contact-logo { position: absolute; left: 50%; top: 286px; width: 126px; height: 45px; object-fit: contain; transform: translateX(-50%); }
.contact-art { position: absolute; max-width: none; object-fit: contain; }
.contact-reel { left: 10%; top: 192px; width: 120px; height: 120px; }
.contact-play { left: 17%; top: 108px; width: 125px; height: 125px; transform: rotate(-12deg); }
.contact-prompt { left: 7%; top: 385px; width: 260px; height: 195px; transform: rotate(4deg); }
.contact-reference { left: 7%; top: 560px; width: 230px; height: 173px; transform: rotate(4deg); }
.contact-cube { right: 18%; top: 310px; width: 108px; height: 108px; }
.contact-filmstrip { right: 5%; top: 455px; width: 360px; height: 203px; transform: rotate(8deg); }

@media (max-width: 980px) {
  .hero { min-height: calc(100svh - var(--header-height)); height: calc(100svh - var(--header-height)); }
  .hero-semantic-copy .eyebrow { top: 145px; left: 74px; font-size: 20px; }
  .hero-semantic-copy h1 { top: 218px; left: 70px; font-size: 67px; }
  .hero-semantic-copy p { top: 454px; left: 70px; font-size: 20px; }
  #heroSignals { top: 580px; left: 70px; }
  #heroSignals span { padding: 0 25px; font-size: 18px; }
  .showcase, .download, .contact { min-height: calc(100svh - var(--header-height)); height: calc(100svh - var(--header-height)); }
  .showcase-stage { width: calc(100% - 30px); padding-top: 54px; }
  .showcase-heading h2, .download-heading h2, .contact-copy h2 { font-size: 46px; }
  .showcase-heading p { font-size: 15px; }
  .case-card { width: 250px; height: 460px; }
  .case-card.side-left { transform: translateX(calc(-50% - 230px)) scale(.78); }
  .case-card.side-right { transform: translateX(calc(-50% + 230px)) scale(.78); }
  .download-wrap { width: calc(100% - 30px); padding-top: 54px; }
  .download-grid { gap: 14px; }
  .download-card { min-height: 385px; padding: 22px 16px; }
  .download-art { width: 195px; height: 145px; }
  .download-art-macos { width: 235px; height: 145px; }
  .download-card h3 { font-size: 26px; }
  .download-card p { font-size: 13px; }
  .windows-download { min-width: 210px; min-height: 48px; font-size: 14px; }
  .contact-wrap { width: calc(100% - 30px); padding-top: 54px; }
  .contact-copy p { font-size: 15px; }
  .contact-qr { top: 320px; width: 168px; height: 168px; }
  .contact-logo { top: 265px; width: 102px; }
  .contact-reel { left: 2%; top: 206px; width: 76px; }
  .contact-play { left: 12%; top: 135px; width: 82px; }
  .contact-prompt { left: -2%; top: 430px; width: 170px; }
  .contact-reference { left: -2%; top: 570px; width: 150px; }
  .contact-cube { right: 7%; top: 330px; width: 72px; }
  .contact-filmstrip { right: -8%; top: 500px; width: 230px; }
}

@media (max-width: 700px) {
  .hero-semantic-copy .eyebrow { top: 150px; left: 68px; font-size: 18px; }
  .hero-semantic-copy h1 { top: 216px; left: 66px; font-size: 59px; width: 780px; }
  .hero-semantic-copy p { top: 428px; left: 68px; font-size: 18px; }
  #heroSignals { top: 548px; left: 68px; }
  #heroSignals span { padding: 0 21px; font-size: 16px; }
  .showcase-heading h2, .download-heading h2, .contact-copy h2 { font-size: 39px; }
  .showcase-heading { grid-template-columns: 45px auto 45px; gap: 10px; }
  .showcase-heading p { font-size: 13px; }
  .case-card { width: 214px; height: 390px; }
  .case-card.side-left { transform: translateX(calc(-50% - 180px)) scale(.72); }
  .case-card.side-right { transform: translateX(calc(-50% + 180px)) scale(.72); }
  .case-arrow { width: 42px; height: 42px; }
  .download-grid { grid-template-columns: 1fr; max-height: 590px; overflow: visible; }
  .download-card { min-height: 255px; }
  .download-art { width: 130px; height: 95px; margin: 0 auto; }
  .download-art-macos { width: 160px; height: 95px; }
  .download-card h3 { margin: 2px 0; font-size: 22px; }
  .download-card p { margin-bottom: 10px; }
  .windows-download { min-height: 40px; }
  .contact-copy h2 { max-width: 350px; margin-inline: auto; }
}

/* Showcase visual pass: align the live carousel to the old composition while
 * keeping every case, video, arrow, dot, and keyboard target data-driven. */
.showcase {
  background: #fbfcfc;
}
.showcase::before {
  top: 15%;
  left: 0;
  width: 100%;
  height: 78%;
  opacity: .92;
  background:
    radial-gradient(ellipse at 0 56%, rgba(24, 194, 198, .20) 0, rgba(24, 194, 198, .08) 24%, transparent 52%),
    radial-gradient(ellipse at 100% 56%, rgba(245, 83, 77, .20) 0, rgba(245, 83, 77, .08) 24%, transparent 52%),
    repeating-linear-gradient(17deg, transparent 0 28px, rgba(24, 194, 198, .13) 30px 33px, transparent 36px 58px),
    repeating-linear-gradient(-17deg, transparent 0 35px, rgba(245, 83, 77, .13) 37px 40px, transparent 43px 68px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 28%, transparent 72%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 28%, transparent 72%, #000 100%);
  transform: none;
}
.showcase-stage {
  padding-top: 24px;
}
.showcase-heading {
  margin-bottom: 26px;
}
.case-card {
  border-radius: 24px;
  border-color: rgba(255, 255, 255, .92);
  background: rgba(222, 239, 239, .56);
  box-shadow: 0 20px 48px rgba(20, 68, 75, .16), inset 0 0 0 2px rgba(255, 255, 255, .46);
}
.case-card.active {
  box-shadow: 0 25px 58px rgba(20, 68, 75, .23), 0 0 0 2px rgba(245, 83, 77, .30), inset 0 0 0 2px rgba(255, 255, 255, .46);
}
.case-card::after {
  height: 122px;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, .78) 54%, rgba(255, 255, 255, .97) 100%);
}
.case-card-play {
  position: absolute;
  z-index: 5;
  top: 20px;
  left: 20px;
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 5px 10px rgba(17, 64, 69, .16));
  pointer-events: none;
}
.case-card-copy {
  position: absolute;
  z-index: 6;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 5px;
  min-height: 96px;
  padding: 24px 22px 16px;
  color: #18262b;
  text-align: left;
  pointer-events: none;
}
.case-card-copy-title {
  overflow: hidden;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.case-card-copy-meta {
  color: #7a888a;
  font-size: 12px;
  line-height: 1.2;
}
.case-card.side-left,
.case-card.side-right {
  opacity: .78;
  filter: saturate(.76);
}
.case-arrow {
  border-color: rgba(255, 255, 255, .95);
  background: rgba(255, 255, 255, .90);
  box-shadow: 0 11px 25px rgba(32, 76, 80, .16);
  color: #18bfc2;
}
.case-arrow::after { border-color: currentColor; }
.case-pagination { bottom: 10px; }

@media (max-width: 700px) {
  .showcase-stage { padding-top: 22px; }
  .showcase-heading { margin-bottom: 18px; }
  .showcase-heading p { line-height: 1.45; }
  .case-card-play { top: 13px; left: 13px; width: 42px; height: 42px; }
  .case-card-copy { min-height: 70px; padding: 17px 14px 10px; }
  .case-card-copy-title { font-size: 15px; }
  .case-card-copy-meta { font-size: 10px; }
}

/* Step one visual alignment: match the reference panel geometry while keeping
 * the copy and reference image as live DOM content. */
.feature-copy h2 { width: 610px; max-width: 610px; font-size: 50px; line-height: 1.28; }
.feature-copy h2 > span { display: block; white-space: nowrap; }
.feature-copy h2 em,
.feature-copy h2 strong { font-style: normal; }

/* Download page visual alignment: keep the copy crisp in the DOM and match
 * the original wide composition with a centered, crop-safe card canvas. */
.download {
  background: #fbfcfc;
}
.download::before {
  top: 43%;
  left: -8%;
  width: 116%;
  height: 82%;
  opacity: .74;
  background:
    radial-gradient(ellipse at 2% 76%, rgba(244, 91, 85, .17) 0, rgba(244, 91, 85, .08) 21%, transparent 52%),
    radial-gradient(ellipse at 98% 70%, rgba(22, 194, 198, .17) 0, rgba(22, 194, 198, .07) 21%, transparent 52%),
    repeating-linear-gradient(164deg, transparent 0 34px, rgba(244, 91, 85, .16) 37px 41px, transparent 44px 86px),
    repeating-linear-gradient(16deg, transparent 0 40px, rgba(22, 194, 198, .15) 43px 47px, transparent 50px 98px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.94) 13%, transparent 33%, transparent 67%, rgba(0,0,0,.94) 87%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.94) 13%, transparent 33%, transparent 67%, rgba(0,0,0,.94) 87%, #000 100%);
  transform: none;
}
.download::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(112deg, transparent 0 42%, rgba(255,255,255,.74) 49%, transparent 57%),
    linear-gradient(68deg, transparent 0 43%, rgba(255,255,255,.74) 50%, transparent 57%);
  pointer-events: none;
}
.download-wrap {
  width: min(1000px, calc(100% - 60px));
  padding-top: 90px;
}
.download-heading > img { display: none; }
.download-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 27px;
  color: #202b30;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.download-eyebrow::before {
  width: 31px;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, #ff6259, #18c4c6);
}
.download-heading h2 {
  max-width: none;
  font-size: 62px;
  font-weight: 900;
  line-height: 1.18;
}
.download-description {
  margin: 18px 0 0;
  color: #7a8589;
  font-size: 18px;
  line-height: 1.45;
}
.download-support {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 19px 0 0;
  color: #7a8589;
  font-size: 17px;
  line-height: 1.4;
}
.download-support span {
  display: block;
  width: 27px;
  height: 2px;
  background: linear-gradient(90deg, rgba(27,194,197,.14), rgba(27,194,197,.5));
}
.download-support span:last-child {
  background: linear-gradient(90deg, rgba(244,91,85,.5), rgba(244,91,85,.14));
}
.download-support em {
  color: #f05f58;
  font-style: normal;
}
.download-support em + em { color: #18bfc2; }
.download-choice { margin-top: 29px; }
.download-grid {
  width: 794px;
  max-width: none;
  gap: 30px;
}
.download-card {
  min-height: 355px;
  padding: 24px 30px 22px;
  overflow: visible;
  border-radius: 26px;
  background: rgba(255,255,255,.67);
  box-shadow: 0 18px 45px rgba(19,80,84,.09), inset 0 0 42px rgba(231,250,248,.38);
}
.download-platform { display: none; }
.download-art {
  width: 205px;
  height: 145px;
  margin: 18px auto 5px;
}
.download-art-macos { width: 250px; height: 145px; }
.download-decor-play {
  top: -240px;
  right: -740px;
  width: 145px;
  height: 145px;
  opacity: .67;
}
.download-decor-play { transform: scale(.86) rotate(11deg); }
.download-decor-cube {
  right: -300px;
  bottom: -40px;
  width: 145px;
  height: 145px;
}
.download-card h3 { margin: 5px 0 6px; font-size: 31px; }
.download-card p { margin: 0 0 20px; font-size: 16px; }
.windows-download { width: 310px; min-width: 0; min-height: 56px; font-size: 17px; }

@media (max-width: 700px) {
  .download-wrap {
    width: 1000px;
    max-width: none;
    margin-left: calc(50% - 500px);
    padding-top: 88px;
  }
  .download-heading h2 { font-size: 62px; }
  .download-description { font-size: 18px; }
  .download-support { font-size: 17px; }
  .download-choice { margin-top: 32px; }
  .download-grid { grid-template-columns: repeat(2, 382px); width: 794px; gap: 30px; }
  .download-card { min-height: 355px; padding: 24px 30px 22px; }
  .download-art { width: 205px; height: 145px; margin-top: 18px; }
  .download-art-macos { width: 250px; height: 145px; }
  .download-decor-play { display: none; }
  .download-decor-cube { right: -300px; bottom: -40px; }
  .windows-download { width: 310px; min-height: 56px; }
}

.feature-copy h2 .feature-title-red { color: #f04a43; }
.feature-copy h2 .feature-title-cyan { color: #18bfc2; }
.workflow-visual { top: 133px; right: 57px; width: 927px; height: 708px; }
#workflowPanels { padding: 31px 48px 70px; }
.workflow-panel[data-panel="0"] { position: relative; }
.workflow-panel[data-panel="0"] .panel-kicker { position: absolute; top: 14px; left: 0; z-index: 2; margin: 0; }
.workflow-panel[data-panel="0"] .creation-grid {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  grid-template-columns: 1.11fr 1fr;
  gap: 43px;
  height: 458px;
}
.workflow-panel[data-panel="0"] .creation-prompt {
  min-height: 0;
  padding: 61px 0 0;
  overflow: visible;
  border: 0;
  background: transparent;
}
.workflow-panel[data-panel="0"] .prompt-label {
  display: block;
  color: #20292e;
  font-size: 16px;
  line-height: 1.55;
}
.workflow-panel[data-panel="0"] .prompt-box {
  min-height: 185px;
  margin-top: 12px;
  padding: 31px 30px;
  border: 2px solid transparent;
  border-radius: 18px;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(110deg, #ff4d49, #ff847d 45%, #20c4c6) border-box;
  color: #20292e;
  font-size: 22px;
  line-height: 1.8;
}
.workflow-panel[data-panel="0"] .creation-reference {
  min-height: 0;
  height: 458px;
  border-radius: 20px;
  background: #fff;
}
.workflow-panel[data-panel="0"] .creation-reference img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.23);
}
.workflow-panel[data-panel="0"] .creation-reference > span { display: none; }
.workflow-panel[data-panel="0"] .prompt-tags { display: none; }

@media (max-width: 700px) {
  .feature-copy { top: 0; left: 613px; width: 560px; max-width: none; }
  .feature-copy > .eyebrow,
  .feature-copy > h2,
  .feature-copy > p { visibility: hidden; }
  #featureSteps {
    position: absolute;
    top: 208px;
    left: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 444px;
    margin: 0;
  }
  .feature-step {
    width: 100%;
    height: 44px;
    min-height: 44px;
    grid-template-columns: 1fr;
    padding: 0 14px;
    border-radius: 6px;
    box-shadow: 0 5px 14px rgba(17, 24, 32, .08);
  }
  .feature-step > span { width: auto; height: auto; background: transparent; font-size: 16px; }
  .feature-step > div { display: none; }
  .feature-step .feature-arrow { position: absolute; right: 8%; font-size: 28px; }
  .workflow-visual { top: 93px; right: 72px; width: 927px; height: 770px; }
  .features[data-feature-index="2"] #workflowPanels { padding: 25px 48px 46px; }
  .workflow-panel[data-panel="2"] .finished-frame { height: 390px; }
  .workflow-panel[data-panel="2"] .finished-frame > img { padding: 0; }
  .workflow-panel[data-panel="2"] .finished-play { width: 70px; height: 70px; font-size: 24px; }
  .workflow-panel[data-panel="2"] .finished-underbar { min-height: 54px; }
  .workflow-panel[data-panel="2"] .finished-download { padding: 10px 18px; }
  .workflow-panel[data-panel="2"] .finished-meta { margin-top: 14px; }
  .workflow-panel[data-panel="2"] .finished-milestone { gap: 8px; font-size: 14px; }
  .features[data-feature-index="2"] .workflow-visual { width: 927px; right: 42px; }
  .features[data-feature-index="2"] #workflowPanels { padding-left: 48px; padding-right: 48px; }
}

/* Keep the two hero layers on the same fixed design canvas. */
.hero-canvas,
.hero-semantic-copy {
  inset: auto;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
}
#siteHeader { background: #fff; }
#siteHeader.scrolled { background: #fff; }
.contact-artboard::before {
  position: absolute;
  left: 50%;
  top: 265px;
  width: 410px;
  height: 510px;
  border: 1px solid rgba(255, 116, 108, .44);
  border-radius: 27px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 48px rgba(21, 83, 86, .11), inset 0 0 35px rgba(231, 250, 248, .4);
  content: "";
  transform: translateX(-50%);
}
.contact-qr { z-index: 2; }
.contact-logo { z-index: 2; }

/* Business page detail pass: rebuild the central QR card and the broad
 * reference light field with live text plus the supplied local art. */
.contact {
  overflow: hidden;
  background: #fbfcfc;
}
.contact::before {
  top: 31%;
  left: -14%;
  width: 128%;
  height: 68%;
  opacity: .92;
  background:
    radial-gradient(ellipse 29% 44% at 16% 66%, rgba(255, 116, 108, .29), transparent 70%),
    radial-gradient(ellipse 30% 45% at 84% 57%, rgba(30, 200, 202, .34), transparent 70%),
    linear-gradient(157deg, transparent 0 43%, rgba(247, 111, 103, .15) 44% 44.8%, transparent 46%),
    linear-gradient(22deg, transparent 0 54%, rgba(36, 196, 200, .18) 55% 55.8%, transparent 57%),
    repeating-linear-gradient(17deg, transparent 0 88px, rgba(247, 111, 103, .075) 91px 94px, transparent 97px 168px),
    repeating-linear-gradient(-15deg, transparent 0 108px, rgba(36, 196, 200, .085) 111px 114px, transparent 117px 188px);
  transform: rotate(-4deg);
  mask-image: linear-gradient(90deg, #000 0 24%, rgba(0,0,0,.68) 45%, rgba(0,0,0,.7) 68%, #000 100%);
}
.contact::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(151deg, transparent 0 49%, rgba(255, 115, 107, .10) 49.6% 50.1%, transparent 50.8%),
    linear-gradient(26deg, transparent 0 51%, rgba(31, 197, 199, .11) 51.4% 52%, transparent 52.6%);
}
.contact-grid { display: none; }
.contact-wrap {
  z-index: 1;
  width: min(1540px, calc(100% - 38px));
  padding-top: 78px;
}
.contact-copy { max-width: 900px; }
.contact-copy h2 {
  width: 760px;
  max-width: 100%;
  margin: 7px auto 14px;
  font-size: 62px;
  line-height: 1.3;
  letter-spacing: 0;
}
.contact-copy h2 #contactTitle,
.contact-copy h2 #contactAccent { display: block; }
.contact-copy h2 #contactAccent { color: #121c20; font-style: normal; }
.contact-copy h2 #contactAccent strong,
.contact-copy h2 #contactAccent b { font-weight: 900; font-style: normal; }
.contact-copy h2 #contactAccent strong { color: var(--red); }
.contact-copy h2 #contactAccent b { color: var(--cyan); }
.contact-copy p { font-size: 20px; line-height: 1.75; }
.contact-artboard::before {
  top: 358px;
  width: 380px;
  height: 378px;
  border: 1px solid rgba(255, 116, 108, .52);
  border-radius: 22px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 16px 44px rgba(21, 83, 86, .10), inset 0 0 28px rgba(231, 250, 248, .40);
}
.contact-artboard::after {
  position: absolute;
  left: 50%;
  top: 434px;
  width: 230px;
  height: 2px;
  border-radius: 2px;
  content: "";
  background: linear-gradient(90deg, var(--red) 0 50%, var(--cyan) 50% 100%);
  transform: translateX(-50%);
  z-index: 3;
}
.contact-qr {
  top: 459px;
  width: 180px;
  height: 180px;
}
.contact-logo { top: 388px; width: 126px; height: 45px; }
.contact-qr-caption {
  position: absolute;
  left: 50%;
  top: 672px;
  z-index: 3;
  width: 320px;
  color: #202b2e;
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
  transform: translateX(-50%);
}
.contact-reel { left: 8%; top: 218px; width: 100px; height: 100px; }
.contact-play { left: 16%; top: 142px; width: 110px; height: 110px; }
.contact-prompt { left: 4%; top: 333px; width: 220px; height: 132px; }
.contact-reference { left: 4%; top: 435px; width: 175px; height: 131px; }
.contact-cube { right: 21%; top: 342px; width: 85px; height: 85px; }
.contact-filmstrip { right: 8%; top: 451px; width: 360px; height: 132px; }

@media (max-width: 700px) {
  .contact-wrap {
    width: 760px;
    max-width: none;
    padding-top: 74px;
    left: 50%;
    transform: translateX(-50%);
  }
  .contact-copy { width: 760px; max-width: none; }
  .contact-copy h2 {
    width: 760px;
    max-width: none;
    margin-top: 22px;
    margin-bottom: 10px;
    font-size: 62px;
    line-height: 1.3;
  }
  .contact-copy p { width: 545px; max-width: none; font-size: 20px; line-height: 1.75; }
  .contact-artboard::before {
    top: 339px;
    width: 358px;
    height: 356px;
    border-radius: 20px;
  }
  .contact-artboard::after { top: 412px; width: 230px; }
  .contact-logo { top: 368px; width: 102px; height: 37px; }
  .contact-qr { top: 435px; width: 163px; height: 163px; }
  .contact-qr-caption { top: 635px; width: 300px; font-size: 16px; }
  .contact-art { display: none; }
  /* Keep the mobile crop clean: the old composition places the floating
   * illustrations outside the narrow viewport while the QR card remains centered. */
  .contact-artboard::before {
    width: 380px;
    width: 358px;
  }
}

/* Homepage detail pass: keep the reference composition on one shared
 * coordinate system while leaving all copy as live, crisp text. */
.hero {
  background:
    radial-gradient(circle at 90% 20%, rgba(255, 76, 73, .045), transparent 32%),
    radial-gradient(circle at 52% 85%, rgba(40, 205, 211, .06), transparent 40%),
    #fff;
}
.hero-light-flow {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero::before,
.hero::after {
  display: none !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  pointer-events: none;
  content: none;
}

.hero-semantic-copy,
.hero-semantic-copy h1,
.hero-semantic-copy p {
  max-width: none;
}
.hero-semantic-copy .eyebrow { top: 176px; left: 60px; }
.hero-semantic-copy h1 {
  top: 250px;
  left: 60px;
  width: 920px;
  font-size: 91px;
  line-height: 1.14;
}
.hero-semantic-copy p {
  top: 500px;
  left: 60px;
  width: 850px;
  font-size: 24px;
  line-height: 1.7;
  white-space: nowrap;
}
#heroSignals { top: 598px; left: 60px; }
#heroSignals span { padding-inline: 38px; font-size: 22px; }
#heroSignals span::before { display: none; }

.hero-art-person {
  right: -285px;
  bottom: -760px;
  width: 1050px;
  height: 1575px;
  clip-path: none;
  z-index: 4;
}
.hero-art-prompt { left: 655px; top: 18px; width: 312px; height: 234px; }
.hero-art-reference { left: 605px; top: 132px; width: 270px; height: 203px; }
.hero-art-video { left: 805px; top: 178px; width: 500px; height: 375px; }
.hero-art-filmstrip { left: 786px; top: 470px; width: 480px; height: 270px; }
.hero-art-progress { left: 750px; top: 593px; width: 422px; height: 225px; }
.hero-art-reel { left: 990px; top: 58px; width: 120px; height: 120px; }
.hero-art-play { left: 1158px; top: -3px; }
.hero-art-cube { left: 1198px; top: 425px; }

/* Reference-board alignment pass.  The old site establishes a 3344px-wide
 * desktop composition; these rules keep the replacement artwork in code and
 * live DOM while matching that shared visual rhythm at ordinary desktops. */
@media (min-width: 981px) {
  .hero-canvas,
  .hero-semantic-copy {
    width: 1672px;
    height: 869px;
  }

  .feature-canvas {
    width: 1672px;
    height: 941px;
  }

  .feature-copy {
    top: 116px;
    left: 70px;
  }

  .feature-copy > .eyebrow { font-size: 24px; }

  .feature-copy h2 {
    width: 610px;
    margin-top: 42px;
    font-size: 58px;
    line-height: 1.22;
  }

  .feature-copy p { font-size: 24px; }

  #featureSteps { margin-top: 51px; }

  .feature-step {
    grid-template-columns: 92px 1fr 28px;
    width: 610px;
    min-height: 120px;
    padding: 19px 24px;
  }

  .feature-step > span { width: 62px; height: 62px; font-size: 28px; }
  .feature-step b { font-size: 22px; }
  .feature-step small { font-size: 16px; line-height: 1.45; }

  .workflow-visual {
    top: 133px;
    right: 57px;
    width: 927px;
    height: 708px;
  }

  .workflow-frame { min-height: 670px; }

  .showcase-stage { padding-top: 44px; }
  .showcase-heading { margin-bottom: 28px; }
  .showcase-heading h2 { font-size: 62px; }
  .showcase-heading p { font-size: 18px; }
  #caseGallery { min-height: 610px; }
  .case-card { width: 350px; height: 570px; }
  .case-card.side-left { transform: translateX(calc(-50% - 365px)) scale(.88); }
  .case-card.side-right { transform: translateX(calc(-50% + 365px)) scale(.88); }

  .download-wrap { width: min(1000px, calc(100% - 60px)); padding-top: 90px; }
  .download-heading h2 { font-size: 62px; }
  .download-grid { width: 794px; gap: 30px; }
  .download-card { min-height: 355px; padding: 24px 30px 22px; }

  .contact-wrap { padding-top: 78px; }
  .contact-copy h2 { font-size: 62px; }
}

@media (max-width: 980px) {
  .hero-visual { transform: none; width: 100%; min-height: 0; margin: 0; }
}

@media (max-width: 700px) {
  /* The copy must share the same centered crop as the visual layer. */
  .hero-semantic-copy { width: 1672px; max-width: none; }
  .hero-semantic-copy .eyebrow { top: 188px; left: 70px; font-size: 24px; }
  .hero-semantic-copy h1 { top: 245px; left: 68px; width: 900px; font-size: 94px; line-height: 1.28; }
  .hero-semantic-copy p { top: 496px; left: 70px; width: 900px; font-size: 26px; white-space: nowrap; }
  #heroSignals { top: 584px; left: 70px; }
  #heroSignals span { padding-inline: 25px; font-size: 22px; }
  .hero-art-prompt { top: 20px; }
  .hero-art-video { top: 150px; }
  .hero-art-filmstrip { top: 442px; }
  .hero-art-progress { top: 571px; }
}

/* Step two detail pass: match the old director-composition geometry while
 * keeping every reference asset and all copy as live DOM content.  The
 * composition stays inside the shared panel instead of enlarging the card. */
.workflow-panel[data-panel="1"] {
  position: relative;
}
.features[data-feature-index="1"] #featureSteps { z-index: 6; }
.features[data-feature-index="1"] .feature-copy { z-index: 5; }
.workflow-bar { justify-content: space-between; }
#workflowBarKicker {
  display: none;
  color: #20292e;
  font-size: 25px;
  font-weight: 700;
  white-space: nowrap;
}
.features[data-feature-index="1"] #workflowBarKicker { display: inline-flex; align-items: center; }
.features[data-feature-index="1"] #workflowBarKicker::before {
  content: "✦";
  margin-right: 12px;
  color: #19bdc1;
  font-size: 27px;
}
.workflow-panel[data-panel="1"] .panel-kicker {
  display: none;
}
.workflow-panel[data-panel="1"] .director-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 458px;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse 35% 70% at 48% 41%, rgba(228, 252, 248, .9), transparent 70%),
    linear-gradient(118deg, rgba(255, 255, 255, .95), rgba(240, 253, 251, .86) 48%, rgba(255, 255, 255, .98));
  box-shadow: none;
  overflow: hidden;
}
.workflow-panel[data-panel="1"] .director-frame::before,
.workflow-panel[data-panel="1"] .director-frame::after {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  content: "";
  border-radius: 50%;
}
.workflow-panel[data-panel="1"] .director-frame::before {
  left: 4%;
  top: 30%;
  width: 82%;
  height: 57%;
  border: 3px solid rgba(255, 105, 99, .23);
  box-shadow: 0 0 0 8px rgba(255, 105, 99, .06), 0 0 0 16px rgba(255, 105, 99, .04);
  transform: rotate(-12deg);
}
.workflow-panel[data-panel="1"] .director-frame::after {
  left: 21%;
  top: 14%;
  width: 89%;
  height: 62%;
  border: 3px solid rgba(25, 189, 193, .2);
  box-shadow: 0 0 0 8px rgba(25, 189, 193, .05), 0 0 0 15px rgba(25, 189, 193, .035);
  transform: rotate(10deg);
}
.workflow-panel[data-panel="1"] .director-frame > .director-nature {
  top: -12px;
  left: -14px;
  width: 214px;
  height: 165px;
}
.workflow-panel[data-panel="1"] .director-frame > .director-player {
  top: 18px;
  left: 155px;
  width: 480px;
  height: 380px;
}
.workflow-panel[data-panel="1"] .director-frame > .director-product {
  left: 0;
  bottom: 50px;
  width: 214px;
  height: 161px;
}
.workflow-panel[data-panel="1"] .director-frame > .director-person-ref {
  right: 300px;
  bottom: 22px;
  width: 204px;
  height: 155px;
}
.workflow-panel[data-panel="1"] .director-frame > .director-person {
  right: 32px;
  bottom: -2px;
  width: 300px;
  height: 520px;
}
.workflow-panel[data-panel="1"] .panel-meta {
  position: absolute;
  top: 458px;
  right: 0;
  left: 0;
  margin: 0;
}
.workflow-panel[data-panel="1"] .director-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 0;
  min-height: 64px;
  padding: 0 40px;
}
.workflow-panel[data-panel="1"] .director-milestone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #8f989c;
  font-size: 16px;
  white-space: nowrap;
  padding-left: 0;
}
.workflow-panel[data-panel="1"] .director-milestone::before { display: none; }
.workflow-panel[data-panel="1"] .director-milestone:nth-child(2) { justify-self: center; }
.workflow-panel[data-panel="1"] .director-milestone:nth-child(3) { justify-self: end; }
.workflow-panel[data-panel="1"] .director-milestone b { font-weight: 600; }
.director-milestone-icon {
  display: inline-grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 2px solid #dce5e5;
  border-radius: 8px;
  background: rgba(255,255,255,.85);
}
.director-milestone-icon::before {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 3px solid #c5ced0;
  border-bottom: 3px solid #c5ced0;
  transform: rotate(-45deg) translate(1px, -1px);
}
.director-milestone.done { color: #727e83; }
.director-milestone.done .director-milestone-icon { border-color: #a7e9cb; }
.director-milestone.done .director-milestone-icon::before { border-color: #1dcc76; }
.director-milestone.current { color: #20292e; }
.director-milestone.current .director-milestone-icon { border-color: transparent; background: #19bdc1; }
.director-milestone.current .director-milestone-icon::before {
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 4px;
  transform: none;
}
.director-milestone.pending .director-milestone-icon::before { border-color: #a6b0b3; }
#workflowCaption { display: none; }

@media (max-width: 700px) {
  .features[data-feature-index="1"] .workflow-visual { right: 57px; }
  .features[data-feature-index="1"] .workflow-bar { padding-left: 45px; }
  .features[data-feature-index="1"] .feature-step.active {
    border: 1px solid #f75d56;
    background: #fff;
    color: #20292e;
  }
  .features[data-feature-index="1"] .feature-step.active > span {
    background: transparent;
    color: #19bdc1;
  }
  .workflow-panel[data-panel="1"] .panel-kicker {
    display: none;
  }
  .workflow-panel[data-panel="1"] .director-frame { top: 0; left: 0; width: 100%; height: 458px; }
  .workflow-panel[data-panel="1"] .director-frame > .director-nature { top: 95px; left: -10px; }
  .workflow-panel[data-panel="1"] .director-frame > .director-player { left: 215px; }
  .workflow-panel[data-panel="1"] .director-frame > .director-product { bottom: -4px; }
  .features[data-feature-index="1"] #workflowBarKicker { font-size: 25px; }
}

.features::before,
.features::after {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.features::before {
  background:
    radial-gradient(ellipse at 76% 25%, rgba(255, 225, 225, .58), transparent 32%),
    radial-gradient(ellipse at 36% 84%, rgba(210, 250, 250, .62), transparent 36%);
}

.features::after {
  display: block !important;
  opacity: .76;
  background: repeating-linear-gradient(137deg, transparent 0 26px, rgba(249, 104, 101, .24) 29px 33px, transparent 36px 59px);
  mask-image: radial-gradient(ellipse 58% 68% at 100% 9%, #000 0%, transparent 72%);
}

.features {
  background: #fafafa;
}

.feature-light-flow {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .92;
}

.feature-stage { z-index: 1; }
.feature-canvas { background: transparent; }

.workflow-panel[data-panel="1"] .panel-meta,
.workflow-panel[data-panel="2"] .finished-meta {
  display: none;
}

.workflow-panel[data-panel="1"] .director-frame {
  top: 0;
  left: 0;
  width: 100%;
  height: 458px;
}

.workflow-panel[data-panel="1"] .director-frame > .director-nature {
  top: 5px;
  left: 5px;
  width: 188px;
  height: 145px;
}

.workflow-panel[data-panel="1"] .director-frame > .director-player {
  top: 30px;
  left: 158px;
  width: 480px;
  height: 360px;
}

.workflow-panel[data-panel="1"] .director-frame > .director-product {
  left: 5px;
  bottom: 17px;
  width: 194px;
  height: 146px;
}

.workflow-panel[data-panel="1"] .director-frame > .director-person-ref {
  right: 184px;
  bottom: 18px;
  width: 190px;
  height: 145px;
}

.workflow-panel[data-panel="1"] .director-frame > .director-person {
  right: 12px;
  bottom: 0;
  width: 246px;
  height: 390px;
}

.workflow-panel[data-panel="2"] .finished-play { display: none; }

@media (max-width: 700px) {
  .workflow-panel[data-panel="1"] .director-frame {
    top: 0;
    left: 0;
    width: 100%;
    height: 390px;
  }
  .workflow-panel[data-panel="1"] .director-frame > .director-nature { top: 4px; left: 4px; width: 150px; height: 116px; }
  .workflow-panel[data-panel="1"] .director-frame > .director-player { top: 30px; left: 120px; width: 390px; height: 300px; }
  .workflow-panel[data-panel="1"] .director-frame > .director-product { left: 4px; bottom: 10px; width: 150px; height: 113px; }
  .workflow-panel[data-panel="1"] .director-frame > .director-person-ref { right: 146px; bottom: 10px; width: 150px; height: 114px; }
  .workflow-panel[data-panel="1"] .director-frame > .director-person { right: 8px; bottom: 0; width: 200px; height: 318px; }
}

@media (max-width: 980px) {
  .hero {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 18px 20px 0 !important;
  }

  .hero-visual,
  .hero-semantic-copy,
  .hero-canvas {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  .hero-semantic-copy {
    z-index: 2;
    order: 1;
    padding: 8px 2px 6px !important;
  }

  .hero-semantic-copy > *,
  .hero-semantic-copy h1,
  .hero-semantic-copy p,
  .hero-semantic-copy .eyebrow,
  #heroSignals {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    pointer-events: auto !important;
  }

  .hero-semantic-copy .eyebrow { font-size: 13px !important; }
  .hero-semantic-copy h1 {
    margin: 10px 0 12px !important;
    font-size: clamp(32px, 8.4vw, 46px) !important;
    line-height: 1.16 !important;
  }
  .hero-semantic-copy p {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  #heroSignals {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px 0 !important;
    margin-top: 16px !important;
  }
  #heroSignals span {
    min-height: 28px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  .hero-visual {
    z-index: 1;
    order: 2;
    margin-top: 8px !important;
  }

  .hero-canvas {
    height: min(78vw, 540px) !important;
    overflow: hidden !important;
  }

  .hero-canvas img { height: auto !important; }

  .hero-art-person {
    right: -10% !important;
    bottom: -22% !important;
    width: 62% !important;
    height: 130% !important;
  }
  .hero-art-prompt {
    left: 2% !important;
    top: 8% !important;
    width: 42% !important;
    transform: rotate(4deg) !important;
  }
  .hero-art-reference {
    left: 6% !important;
    top: 30% !important;
    width: 34% !important;
    transform: rotate(4deg) !important;
  }
  .hero-art-video {
    left: 16% !important;
    top: 20% !important;
    width: 58% !important;
    transform: rotate(5deg) !important;
  }
  .hero-art-filmstrip {
    left: 4% !important;
    top: auto !important;
    bottom: 10% !important;
    width: 54% !important;
    transform: rotate(6deg) !important;
  }
  .hero-art-progress {
    left: 10% !important;
    top: auto !important;
    bottom: -4% !important;
    width: 46% !important;
    transform: rotate(5deg) !important;
  }
  .hero-art-reel,
  .hero-art-play,
  .hero-art-cube { display: none !important; }
}

/* Visual polish overlay: keep the approved composition, restore motion and
 * tactile states that later restoration passes flattened. */
.hero-canvas img {
  will-change: transform;
}

@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  .hero-art-person { animation: hero-float 6.4s var(--ease-standard) infinite alternate; }
  .hero-art-prompt { animation: hero-card-float 5.6s var(--ease-standard) infinite alternate; }
  .hero-art-reference { animation: hero-card-float 6.2s var(--ease-standard) 180ms infinite alternate; }
  .hero-art-video { animation: hero-card-float 7s var(--ease-standard) 80ms infinite alternate; }
  .hero-art-filmstrip { animation: hero-card-float 6.8s var(--ease-standard) 240ms infinite alternate; }
  .hero-art-progress { animation: hero-card-float 5.8s var(--ease-standard) 320ms infinite alternate; }
  .hero-art-play { animation: hero-pulse 2.8s var(--ease-standard) infinite; }
}

@keyframes hero-float {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -12px, 0); }
}

@keyframes hero-card-float {
  from { transform: translate3d(0, 0, 0) rotate(var(--hero-tilt, 5deg)); }
  to { transform: translate3d(0, -8px, 0) rotate(var(--hero-tilt, 5deg)); }
}

@keyframes hero-pulse {
  0%, 100% { transform: rotate(14deg) scale(1); }
  50% { transform: rotate(14deg) scale(1.04); }
}

.hero-art-prompt { --hero-tilt: 5deg; }
.hero-art-reference { --hero-tilt: 5deg; }
.hero-art-video { --hero-tilt: 6deg; }
.hero-art-filmstrip { --hero-tilt: 7deg; }
.hero-art-progress { --hero-tilt: 6deg; }

.feature-step {
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.feature-step:hover:not(.active) {
  transform: translateX(4px);
}

.feature-step:active {
  transform: translateX(1px) scale(0.995);
}

.workflow-panel.active {
  animation: workflow-in 420ms var(--ease-standard);
}

.case-card {
  transition:
    transform var(--motion-normal) var(--ease-standard),
    opacity var(--motion-normal) var(--ease-standard),
    filter var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

.case-card-play {
  transition: transform var(--motion-fast) var(--ease-standard), opacity var(--motion-fast) ease;
}

.case-card.active:hover .case-card-play,
.case-card.active:focus-visible .case-card-play {
  transform: scale(1.08);
}

.case-card-copy {
  background: linear-gradient(180deg, transparent 0%, rgba(248, 255, 255, .18) 28%, rgba(16, 32, 36, .58) 100%);
}

.case-card-copy-title,
.case-card-copy-meta { color: #fff; }
.case-card-copy-meta { color: rgba(255, 255, 255, .78); }

.case-arrow {
  transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) ease, background var(--motion-fast) ease;
}

.case-arrow:hover:not(:disabled),
.case-arrow:focus-visible:not(:disabled) {
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 10px 26px rgba(24, 50, 60, .18);
}

.case-dot {
  transition: width var(--motion-fast) var(--ease-standard), background var(--motion-fast) ease;
}

.download-card {
  transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) ease, border-color var(--motion-fast) ease;
}

.download-card:hover:not(.disabled),
.download-card:focus-within:not(.disabled) {
  transform: translateY(-6px);
  border-color: rgba(26, 190, 193, .38);
  box-shadow: 0 22px 48px rgba(19, 80, 84, .12);
}

.windows-download,
.mac-download {
  transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) ease, filter var(--motion-fast) ease;
}

.windows-download:hover:not(.download-disabled-button),
.mac-download:hover:not(.download-disabled-button) {
  transform: translateY(-2px) scale(1.015);
  filter: saturate(1.06);
}

.windows-download:active:not(.download-disabled-button),
.mac-download:active:not(.download-disabled-button) {
  transform: translateY(0) scale(0.985);
}

.download-dialog-actions button,
.dialog-close {
  transition: transform var(--motion-fast) var(--ease-standard), background var(--motion-fast) ease;
}

.download-dialog-actions button:hover,
.dialog-close:hover {
  transform: translateY(-1px);
}

.download-dialog-confirm:hover {
  box-shadow: 4px 4px 0 var(--cyan), -3px -3px 0 var(--red);
}

.site-header {
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.site-header.scrolled {
  box-shadow: 0 8px 24px rgba(16, 32, 36, .06);
}

.js-ready .reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 620ms var(--ease-standard), transform 620ms var(--ease-standard);
}

.js-ready .reveal.visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 980px) {
  .hero-canvas img { animation: none !important; }
  .case-arrow:hover:not(:disabled),
  .case-arrow:focus-visible:not(:disabled) {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-canvas img,
  .feature-step,
  .case-card-play,
  .case-arrow,
  .download-card,
  .windows-download,
  .mac-download {
    animation: none !important;
    transition: none !important;
  }
  .hero-canvas img,
  .feature-step,
  .case-card-play,
  .download-card,
  .windows-download,
  .mac-download {
    transform: none !important;
  }
  .js-ready .reveal,
  .js-ready .reveal.visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Phone/tablet: abandon the 1672px design board and reflow as a vertical
 * reading layout. These rules must stay last so they beat restoration
 * passes that re-enable canvas scaling below 980px. */
@media (max-width: 980px) {
  html {
    scroll-snap-type: none;
  }

  body {
    font-size: 16px;
  }

  .page-section {
    scroll-snap-align: none;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #siteHeader .menu-toggle {
    width: 44px;
    height: 44px;
  }

  .features {
    height: auto !important;
    min-height: 0 !important;
    padding: 28px 18px 48px !important;
    overflow: visible !important;
  }

  .feature-stage,
  .feature-canvas {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .feature-copy,
  .workflow-visual {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-width: 0 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .feature-copy {
    padding: 0 !important;
  }

  .feature-copy > .eyebrow,
  .feature-copy > h2,
  .feature-copy > p {
    visibility: visible !important;
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
  }

  .feature-copy h2 {
    margin: 12px 0 10px !important;
    font-size: clamp(28px, 7.2vw, 36px) !important;
    line-height: 1.22 !important;
  }

  .feature-copy h2 > span {
    white-space: normal !important;
  }

  .feature-copy p {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  #featureSteps {
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
  }

  .feature-step {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 22px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  .feature-step > div {
    display: block !important;
  }

  .feature-step > span {
    width: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
  }

  .feature-step b {
    font-size: 16px !important;
  }

  .feature-step small {
    margin-top: 4px !important;
    font-size: 13px !important;
  }

  .feature-step .feature-arrow {
    position: static !important;
    font-size: 24px !important;
  }

  .feature-step:hover:not(.active),
  .feature-step:active {
    transform: none !important;
  }

  .workflow-visual {
    margin-top: 22px !important;
  }

  .workflow-frame {
    min-height: 0 !important;
    height: auto !important;
    border-radius: 16px !important;
  }

  .workflow-bar {
    height: auto !important;
    min-height: 48px;
    padding: 10px 16px !important;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: space-between !important;
  }

  .features[data-feature-index="1"] #workflowBarKicker,
  #workflowBarKicker {
    font-size: 14px !important;
    white-space: normal !important;
  }

  #workflowPanels {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 16px !important;
  }

  .features[data-feature-index="2"] #workflowPanels,
  .features[data-feature-index="2"] .workflow-visual {
    width: 100% !important;
    right: auto !important;
    padding: 16px !important;
  }

  .workflow-panel,
  .workflow-panel.active {
    height: auto !important;
    min-height: 0 !important;
  }

  .workflow-panel[data-panel="0"] .panel-kicker,
  .workflow-panel[data-panel="0"] .creation-grid {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
  }

  .workflow-panel[data-panel="0"] .panel-kicker {
    margin: 0 0 12px !important;
    font-size: 16px !important;
  }

  .workflow-panel[data-panel="0"] .creation-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    height: auto !important;
  }

  .workflow-panel[data-panel="0"] .creation-prompt {
    padding: 0 !important;
  }

  .workflow-panel[data-panel="0"] .prompt-box {
    min-height: 0 !important;
    padding: 16px !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .creation-reference,
  .workflow-panel[data-panel="0"] .creation-reference {
    display: block !important;
    height: 210px !important;
  }

  .workflow-panel[data-panel="0"] .creation-reference img {
    transform: none !important;
    object-fit: cover !important;
  }

  .workflow-panel[data-panel="1"] .director-frame {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: min(72vw, 360px) !important;
    overflow: hidden !important;
  }

  .workflow-panel[data-panel="1"] .director-frame > .director-nature {
    top: 4% !important;
    left: 2% !important;
    width: 32% !important;
    height: auto !important;
  }

  .workflow-panel[data-panel="1"] .director-frame > .director-player {
    top: 8% !important;
    left: 22% !important;
    width: 58% !important;
    height: auto !important;
    transform: none !important;
  }

  .workflow-panel[data-panel="1"] .director-frame > .director-product {
    left: 2% !important;
    bottom: 4% !important;
    width: 30% !important;
    height: auto !important;
  }

  .workflow-panel[data-panel="1"] .director-frame > .director-person-ref {
    right: 28% !important;
    bottom: 4% !important;
    width: 28% !important;
    height: auto !important;
    transform: none !important;
  }

  .workflow-panel[data-panel="1"] .director-frame > .director-person {
    right: 0 !important;
    bottom: 0 !important;
    width: 34% !important;
    height: 92% !important;
  }

  .workflow-panel[data-panel="1"] .panel-meta {
    position: static !important;
    top: auto !important;
    display: grid !important;
    margin-top: 8px !important;
  }

  .workflow-panel[data-panel="1"] .director-meta {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 10px 0 0 !important;
  }

  .workflow-panel[data-panel="1"] .director-milestone,
  .workflow-panel[data-panel="1"] .director-milestone:nth-child(2),
  .workflow-panel[data-panel="1"] .director-milestone:nth-child(3) {
    justify-self: start !important;
    white-space: normal !important;
    font-size: 14px !important;
  }

  .workflow-panel[data-panel="2"] .finished-frame {
    height: min(58vw, 280px) !important;
  }

  .workflow-panel[data-panel="2"] .finished-frame > img {
    transform: none !important;
    object-fit: cover !important;
  }

  .workflow-panel[data-panel="2"] .finished-underbar {
    flex-wrap: wrap;
    gap: 10px;
    min-height: 48px !important;
  }

  .workflow-panel[data-panel="2"] .finished-download {
    min-height: 44px;
    padding: 10px 18px !important;
  }

  .workflow-panel[data-panel="2"] .finished-meta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  .showcase {
    padding: 28px 16px 40px !important;
  }

  .showcase-stage {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
  }

  .showcase-heading {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    transform: none !important;
    pointer-events: none;
  }

  .showcase-heading h2 {
    white-space: normal !important;
    font-size: clamp(28px, 8vw, 40px) !important;
  }

  .showcase-heading p {
    white-space: normal !important;
    font-size: 15px !important;
  }

  .showcase-heading-beam {
    display: none !important;
  }

  #caseGallery {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    pointer-events: auto !important;
  }

  .case-viewport {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: min(78vw, 520px) !important;
    transform: none !important;
    overflow: visible !important;
  }

  .case-card.side-left,
  .case-card.side-right {
    display: none !important;
  }

  .case-card,
  .case-card.active {
    top: 50% !important;
    left: 50% !important;
    width: min(72%, 280px) !important;
    height: 100% !important;
    transform: translate(-50%, -50%) !important;
  }

  .case-arrow,
  .case-arrow:hover:not(:disabled),
  .case-arrow:focus-visible:not(:disabled) {
    top: auto !important;
    bottom: 10px !important;
    width: 44px !important;
    height: 44px !important;
    transform: none !important;
  }

  .case-arrow-prev,
  [data-case-prev] {
    left: 8px !important;
  }

  .case-arrow-next,
  [data-case-next] {
    right: 8px !important;
  }

  .case-pagination {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    display: flex !important;
    justify-content: center;
    margin-top: 14px;
    transform: none !important;
  }

  .download {
    padding: 32px 16px 48px !important;
  }

  .download-wrap {
    position: relative !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .download-heading h2 {
    width: auto !important;
    max-width: 100% !important;
    font-size: clamp(28px, 8vw, 40px) !important;
  }

  .download-description,
  .download-support {
    font-size: 15px !important;
  }

  .download-choice {
    margin-top: 22px !important;
  }

  .download-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    gap: 14px !important;
  }

  .download-card {
    width: 100% !important;
    min-height: 0 !important;
    padding: 22px 18px !important;
  }

  .download-card:hover:not(.disabled),
  .download-card:focus-within:not(.disabled) {
    transform: none !important;
  }

  .download-art,
  .download-art-macos {
    width: min(180px, 56vw) !important;
    height: auto !important;
  }

  .download-decor {
    display: none !important;
  }

  .download-card h3 {
    font-size: 22px !important;
  }

  .download-card p {
    font-size: 14px !important;
  }

  .windows-download,
  .mac-download {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
  }

  .windows-download:hover:not(.download-disabled-button),
  .mac-download:hover:not(.download-disabled-button) {
    transform: none !important;
  }

  .contact {
    padding: 32px 16px 56px !important;
  }

  .contact-wrap {
    position: relative !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    padding: 0 !important;
    transform: none !important;
  }

  .contact-copy,
  .contact-copy h2,
  .contact-copy p {
    width: auto !important;
    max-width: 100% !important;
  }

  .contact-copy h2 {
    margin: 10px 0 12px !important;
    font-size: clamp(28px, 8vw, 40px) !important;
  }

  .contact-copy p {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  .contact-artboard {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    margin-top: 28px !important;
    pointer-events: auto !important;
  }

  .contact-artboard::before,
  .contact-artboard::after,
  .contact-art {
    display: none !important;
  }

  .contact-logo,
  .contact-qr,
  .contact-qr-caption {
    position: static !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    transform: none !important;
  }

  .contact-logo {
    width: 110px !important;
    height: auto !important;
    margin: 0 auto 16px !important;
  }

  .contact-qr {
    width: min(180px, 58vw) !important;
    height: auto !important;
    margin: 0 auto !important;
    pointer-events: auto !important;
  }

  .contact-qr-caption {
    width: auto !important;
    margin: 14px auto 0 !important;
    font-size: 15px !important;
  }

  .footer-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: calc(100% - 32px);
  }

  .video-dialog {
    width: calc(100% - 24px);
  }

  .download-dialog {
    width: min(480px, calc(100% - 24px));
  }
}

/* Restore the workflow status layers that later restoration passes hid,
 * then give the three panels a bit more brand-color depth. */
.workflow-frame {
  background:
    radial-gradient(ellipse at 12% 18%, rgba(255, 77, 73, .08), transparent 34%),
    radial-gradient(ellipse at 88% 82%, rgba(26, 190, 193, .12), transparent 38%),
    rgba(255, 255, 255, .86);
  box-shadow: 0 22px 56px rgba(24, 50, 60, .12);
}

.workflow-bar {
  background: linear-gradient(90deg, rgba(255,255,255,.78), rgba(240, 252, 252, .72));
}

.workflow-panel[data-panel="0"] .prompt-box {
  box-shadow: 0 16px 36px rgba(24, 50, 60, .08);
}

.workflow-panel[data-panel="0"] .creation-reference {
  overflow: hidden;
  border: 1px solid rgba(26, 190, 193, .22);
  box-shadow: 0 18px 40px rgba(24, 50, 60, .12);
}

.workflow-panel[data-panel="0"] .creation-reference > span,
.creation-reference-label {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex !important;
  padding: 8px 13px;
  border-radius: 8px;
  background: rgba(17, 24, 32, .74);
  color: #fff;
  font-size: 13px;
}

.workflow-panel[data-panel="0"] .prompt-tags {
  position: absolute;
  left: 0;
  right: 48%;
  bottom: 18px;
  z-index: 3;
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
}

.workflow-panel[data-panel="0"] .prompt-tags span {
  padding: 7px 12px;
  border: 1px solid rgba(26, 190, 193, .28);
  border-radius: 99px;
  background: rgba(255,255,255,.88);
  color: #3e4b50;
  font-size: 13px;
}

.workflow-panel[data-panel="1"] .panel-meta,
.workflow-panel[data-panel="2"] .finished-meta {
  display: grid !important;
}

.workflow-panel[data-panel="1"] .director-frame {
  box-shadow: inset 0 0 0 1px rgba(26, 190, 193, .16);
}

.workflow-panel[data-panel="2"] .finished-frame {
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(24, 50, 60, .12);
}

.workflow-panel[data-panel="2"] .finished-underbar {
  margin-top: 8px;
}

.workflow-panel[data-panel="2"] .finished-download {
  background: linear-gradient(100deg, rgba(245, 87, 80, .95), rgba(24, 193, 198, .95));
  color: #fff;
}

@media (max-width: 980px) {
  .workflow-panel[data-panel="0"] .prompt-tags {
    position: static !important;
    margin-top: 12px;
  }

  .workflow-panel[data-panel="1"] .panel-meta,
  .workflow-panel[data-panel="2"] .finished-meta {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding: 0 !important;
  }

  .workflow-panel[data-panel="1"] .director-meta::before,
  .workflow-panel[data-panel="1"] .director-meta::after,
  .workflow-panel[data-panel="2"] .finished-meta::before,
  .workflow-panel[data-panel="2"] .finished-meta::after {
    display: none;
  }

  .director-live {
    top: 10px;
    right: 10px;
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* 0.1.13: live / generating / done states, a real progress track, harder red-cyan contrast. */
.workflow-panel[data-panel="0"] .prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workflow-panel[data-panel="0"] .prompt-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.workflow-panel[data-panel="0"] .prompt-live::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 5px rgba(243, 83, 80, .16);
  content: "";
  animation: workflow-live 1.6s var(--ease-standard) infinite;
}

.workflow-panel[data-panel="0"] .prompt-box {
  position: relative;
  border-width: 2px;
  box-shadow:
    0 16px 36px rgba(24, 50, 60, .08),
    0 0 0 4px rgba(243, 83, 80, .06);
}

.workflow-panel[data-panel="0"] .prompt-box::after {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 2px;
  height: 18px;
  background: var(--red);
  content: "";
  animation: workflow-caret 1s steps(1) infinite;
}

.workflow-panel[data-panel="0"] .prompt-tags span:nth-child(1) {
  border-color: rgba(243, 83, 80, .38);
  background: rgba(243, 83, 80, .08);
  color: #c13a38;
}

.workflow-panel[data-panel="0"] .prompt-tags span:nth-child(2) {
  border-color: rgba(26, 190, 193, .42);
  background: rgba(26, 190, 193, .1);
  color: #0f8f93;
}

.workflow-panel[data-panel="0"] .prompt-tags span:nth-child(3) {
  border-color: rgba(16, 25, 30, .16);
  background: #fff;
}

.director-live {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(16, 25, 30, .82);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}

.director-live::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(243, 83, 80, .55);
  content: "";
  animation: workflow-live 1.6s var(--ease-standard) infinite;
}

.workflow-panel[data-panel="1"] .director-meta,
.workflow-panel[data-panel="2"] .finished-meta {
  position: relative;
}

.workflow-panel[data-panel="1"] .director-meta::before,
.workflow-panel[data-panel="2"] .finished-meta::before {
  position: absolute;
  top: 15px;
  left: 56px;
  right: 56px;
  z-index: 0;
  height: 3px;
  border-radius: 99px;
  background: rgba(16, 25, 30, .1);
  content: "";
}

.workflow-panel[data-panel="1"] .director-meta::after,
.workflow-panel[data-panel="2"] .finished-meta::after {
  position: absolute;
  top: 15px;
  left: 56px;
  z-index: 0;
  height: 3px;
  border-radius: 99px;
  content: "";
}

.workflow-panel[data-panel="1"] .director-meta::after {
  width: 46%;
  background: linear-gradient(90deg, var(--red), var(--cyan));
}

.workflow-panel[data-panel="2"] .finished-meta::after {
  right: 56px;
  background: linear-gradient(90deg, var(--red), var(--cyan));
}

.workflow-panel[data-panel="1"] .director-milestone,
.workflow-panel[data-panel="2"] .finished-milestone {
  position: relative;
  z-index: 1;
}

.director-milestone.current,
.finished-milestone.current {
  color: #10191e;
}

.director-milestone.current .director-milestone-icon,
.finished-milestone.current .finished-milestone-icon {
  border-color: transparent;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(26, 190, 193, .18);
}

.director-milestone.current .director-milestone-icon::before,
.finished-milestone.current .finished-milestone-icon::before {
  color: #fff;
  border-color: #fff;
}

.director-milestone.done,
.finished-milestone.done {
  color: #3e4b50;
}

.director-milestone.done .director-milestone-icon,
.finished-milestone.done .finished-milestone-icon {
  border-color: #7ad8b6;
  background: #e8fbf2;
}

.workflow-panel[data-panel="2"] .finished-generated {
  color: #0f8f93;
  font-weight: 700;
}

.workflow-panel[data-panel="2"] .finished-download {
  box-shadow: 0 10px 22px rgba(243, 83, 80, .22);
}

@keyframes workflow-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(243, 83, 80, .45); }
  70% { box-shadow: 0 0 0 8px rgba(243, 83, 80, 0); }
}

@keyframes workflow-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .workflow-panel[data-panel="0"] .prompt-live::before,
  .director-live::before,
  .workflow-panel[data-panel="0"] .prompt-box::after {
    animation: none;
  }
}

/* 0.1.15: first-screen polish — hierarchy, CTA, nav, and card depth. */
#siteHeader {
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 1px 0 rgba(16, 25, 30, .06);
}

.desktop-nav a {
  letter-spacing: .02em;
}

.desktop-nav a.active {
  color: #10191e;
}

.hero-semantic-copy h1 {
  letter-spacing: -0.04em;
}

.hero-semantic-copy h1 em {
  background: none;
  color: #10191e;
  -webkit-background-clip: initial;
  background-clip: initial;
}

.hero-semantic-copy h1 em strong {
  color: var(--red);
  font-weight: 900;
}

.hero-semantic-copy h1 em b {
  color: var(--cyan);
  font-weight: 900;
}

.hero-semantic-copy p {
  color: #4a575d;
}

.hero-canvas::after {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 0;
  width: 520px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 190, 193, .16), transparent 68%);
  content: "";
  pointer-events: none;
}

.hero-art-prompt,
.hero-art-reference,
.hero-art-video,
.hero-art-filmstrip,
.hero-art-progress,
.hero-art-reel,
.hero-art-play,
.hero-art-cube {
  filter: drop-shadow(0 18px 28px rgba(24, 50, 60, .16));
}

@media (max-width: 980px) {
  .hero-canvas::after {
    width: 70%;
    height: 55%;
    right: -8%;
    bottom: -8%;
  }
}

/* 0.1.16: unstack the first-screen cards and restore their original tilt. */
@media (min-width: 981px) {
  .hero-art-prompt {
    left: 708px;
    top: 4px;
    width: 286px;
    height: 214px;
    z-index: 2;
    transform: rotate(5deg);
  }

  .hero-art-reference {
    left: 618px;
    top: 198px;
    width: 246px;
    height: 185px;
    z-index: 3;
    transform: rotate(5deg);
  }

  .hero-art-video {
    left: 838px;
    top: 148px;
    width: 500px;
    height: 375px;
    z-index: 1;
    transform: rotate(6deg);
  }

  .hero-art-filmstrip {
    left: 808px;
    top: 508px;
    width: 470px;
    height: 250px;
    z-index: 3;
    transform: rotate(7deg);
  }

  .hero-art-progress {
    left: 742px;
    top: 646px;
    width: 400px;
    height: 210px;
    z-index: 5;
    transform: rotate(6deg);
  }

  .hero-art-reel {
    left: 1040px;
    top: 24px;
    z-index: 4;
  }

  .hero-art-play {
    left: 1232px;
    top: -14px;
    z-index: 5;
    transform: rotate(14deg);
  }

  .hero-art-cube {
    left: 1270px;
    top: 388px;
    z-index: 5;
  }
}

/* 0.1.17: features page — unstack labels, park tags under the prompt, give steps real contrast. */
.feature-step {
  border-color: rgba(17, 24, 32, .08);
  background: rgba(255, 255, 255, .55);
  box-shadow: none;
}

.feature-step:hover:not(.active) {
  border-color: rgba(26, 190, 193, .28);
  background: #fff;
  box-shadow: 0 10px 24px rgba(24, 50, 60, .08);
}

.feature-step.active {
  border-color: rgba(243, 83, 80, .55);
  background: #fff;
  box-shadow:
    0 14px 32px rgba(24, 50, 60, .12),
    inset 5px 0 0 var(--red);
}

.feature-step > span {
  background: #eef2f3;
  color: #5b686e;
}

.feature-step.active > span {
  border-color: transparent;
  background: var(--red);
  color: #fff;
  box-shadow: 4px 4px 0 rgba(26, 190, 193, .32);
}

.feature-step.active b {
  color: #10191e;
}

.feature-step.active small {
  color: #4a575d;
}

.feature-step.active .feature-arrow {
  color: var(--cyan);
}

.workflow-frame {
  border: 1px solid rgba(16, 25, 30, .08);
  background:
    radial-gradient(ellipse at 10% 12%, rgba(255, 77, 73, .1), transparent 32%),
    radial-gradient(ellipse at 92% 88%, rgba(26, 190, 193, .16), transparent 36%),
    #fff;
  box-shadow: 0 28px 64px rgba(24, 50, 60, .16);
}

.workflow-bar {
  border-bottom: 1px solid rgba(16, 25, 30, .08);
  background: linear-gradient(90deg, rgba(255, 244, 243, .92), rgba(236, 252, 252, .9));
}

.workflow-panel[data-panel="0"] .creation-reference > span,
.creation-reference-label {
  display: none !important;
}

.workflow-panel[data-panel="0"] .prompt-tags {
  position: static !important;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.workflow-panel[data-panel="0"] .prompt-box {
  min-height: 168px;
}

.workflow-panel[data-panel="0"] .creation-reference {
  border: 1px solid rgba(16, 25, 30, .08);
  box-shadow: 0 22px 44px rgba(24, 50, 60, .14);
}

/* 0.1.18: unstack the contact-page orbit cards so they don't sit on the QR. */
@media (min-width: 981px) {
  .contact-art {
    filter: drop-shadow(0 16px 24px rgba(24, 50, 60, .14));
  }

  .contact-reel {
    left: 5%;
    top: 168px;
    width: 108px;
    height: 108px;
    z-index: 2;
  }

  .contact-play {
    left: 17%;
    top: 108px;
    width: 118px;
    height: 118px;
    z-index: 3;
    transform: rotate(-14deg);
  }

  .contact-prompt {
    left: 2%;
    top: 292px;
    width: 236px;
    height: 142px;
    z-index: 3;
    transform: rotate(-7deg);
  }

  .contact-reference {
    left: 7%;
    top: 508px;
    width: 196px;
    height: 146px;
    z-index: 4;
    transform: rotate(8deg);
  }

  .contact-cube {
    right: 8%;
    top: 268px;
    width: 96px;
    height: 96px;
    z-index: 2;
  }

  .contact-filmstrip {
    right: 2%;
    top: 498px;
    width: 340px;
    height: 148px;
    z-index: 3;
    transform: rotate(10deg);
  }
}

/* 0.1.19: desktop hover layer. Fine pointers only; floating art uses filter
 * so it does not fight the existing transform animations. */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  .hero-canvas img:not(.hero-art-person),
  .contact-art,
  .contact-qr,
  .contact-logo {
    pointer-events: auto;
    cursor: pointer;
  }

  .brand,
  .desktop-nav a,
  .workflow-frame,
  .creation-reference,
  .prompt-box,
  .director-frame,
  .finished-frame,
  .finished-download,
  .case-card,
  .contact-qr,
  .contact-logo {
    transition:
      filter var(--motion-fast) var(--ease-standard),
      box-shadow var(--motion-fast) var(--ease-standard),
      border-color var(--motion-fast) var(--ease-standard),
      background var(--motion-fast) var(--ease-standard),
      transform var(--motion-fast) var(--ease-standard),
      color var(--motion-fast) var(--ease-standard);
  }

  .hero-canvas img,
  .contact-art {
    transition: filter var(--motion-fast) var(--ease-standard);
  }

  .brand:hover {
    transform: translateY(-1px);
  }

  .hero-canvas img:not(.hero-art-person):hover {
    z-index: 8;
    filter: drop-shadow(0 26px 34px rgba(24, 50, 60, .28)) saturate(1.08) brightness(1.05);
  }

  .workflow-frame:hover {
    box-shadow: 0 32px 72px rgba(24, 50, 60, .2);
  }

  .creation-reference:hover,
  .prompt-box:hover {
    filter: saturate(1.04);
  }

  .director-frame:hover,
  .finished-frame:hover {
    filter: saturate(1.05) brightness(1.03);
  }

  .finished-download:hover {
    transform: translateY(-2px);
    filter: saturate(1.06);
  }

  .case-card:hover {
    filter: saturate(1.08) brightness(1.03);
  }

  .contact-art:hover {
    z-index: 6;
    filter: drop-shadow(0 22px 30px rgba(24, 50, 60, .26)) saturate(1.08) brightness(1.05);
  }

  .contact-qr:hover {
    filter: drop-shadow(0 12px 18px rgba(24, 50, 60, .16));
    transform: translateX(-50%) scale(1.03);
  }

  .contact-logo:hover {
    filter: drop-shadow(0 10px 16px rgba(24, 50, 60, .14));
    transform: translateX(-50%) translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand:hover,
  .finished-download:hover {
    transform: none;
  }

  .hero-canvas img:hover,
  .contact-art:hover,
  .case-card:hover,
  .director-frame:hover,
  .finished-frame:hover {
    filter: none;
  }

  .contact-qr:hover,
  .contact-logo:hover {
    filter: none;
    transform: translateX(-50%);
  }
}

/* 0.1.20: site-wide polish — denser type, solid cards, stronger red-cyan contrast.
 * Coordinates stay put. No pill CTAs. */
#siteHeader {
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 1px 0 rgba(16, 25, 30, .08);
}

.eyebrow,
.panel-kicker,
.download-eyebrow,
.feature-copy > .eyebrow,
.contact-copy .eyebrow {
  letter-spacing: .08em;
  font-weight: 800;
}

.hero-semantic-copy h1 {
  color: #0b1418;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}

.hero-semantic-copy p {
  color: #3a474d;
  font-weight: 500;
}

#heroSignals span:nth-child(2) {
  border-left-color: var(--cyan);
}

#heroSignals span:nth-child(3) {
  border-left-color: var(--red);
}

.feature-copy p,
.workflow-caption {
  color: #4a575d;
}

.feature-copy h2 {
  letter-spacing: -0.03em;
}

.workflow-frame {
  border-color: rgba(16, 25, 30, .1);
}

.showcase-heading h2 {
  letter-spacing: -0.03em;
}

.showcase-heading p {
  color: #5c6a70;
}

.case-card {
  box-shadow: 0 22px 50px rgba(16, 54, 60, .2), inset 0 0 0 2px rgba(255,255,255,.5);
}

.case-card.active {
  box-shadow: 0 28px 58px rgba(16, 54, 60, .26), 0 0 0 2px rgba(245, 83, 77, .34);
}

.download-card {
  background: #fff;
  border-color: rgba(16, 25, 30, .08);
  box-shadow: 0 18px 42px rgba(19, 80, 84, .1);
}

.download-heading h2 {
  letter-spacing: -0.03em;
}

.windows-download,
.mac-download {
  box-shadow: 4px 4px 0 rgba(26, 190, 193, .28), -3px -3px 0 rgba(243, 83, 80, .22);
}

.contact-copy h2 {
  letter-spacing: -0.03em;
}

.contact-copy p {
  color: #4a575d;
  font-weight: 500;
}

.contact-artboard::before {
  background: rgba(255, 255, 255, .94);
  border-color: rgba(255, 116, 108, .62);
  box-shadow: 0 22px 52px rgba(21, 83, 86, .14), inset 0 0 28px rgba(231, 250, 248, .35);
}

.contact-qr-caption {
  color: #3a474d;
  font-weight: 600;
}

/* 0.1.21: page ornaments. Reuse existing art and chrome. No board moves, no pill CTAs. */
.hero-semantic-copy .eyebrow::after,
.feature-copy > .eyebrow::after,
.contact-copy .eyebrow::after,
.download-eyebrow::after {
  display: inline-block;
  width: 10px;
  height: 3px;
  margin-left: 6px;
  background: var(--cyan);
  content: "";
  vertical-align: middle;
}

.workflow-bar::before {
  display: block;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 40px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 14px 0 0 var(--cyan), 28px 0 0 #202b31;
  content: "";
}

.workflow-bar b {
  margin-left: auto;
}

.workflow-caption {
  letter-spacing: .04em;
}

.showcase-heading-beam {
  height: 4px;
  opacity: 1;
  filter: none;
}

.case-empty::before {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border: 2px solid rgba(26, 190, 193, .4);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 77, 73, .12), transparent 62%),
    #fff;
  box-shadow: 0 10px 24px rgba(24, 50, 60, .1);
  color: var(--cyan);
  font-size: 16px;
  line-height: 1;
  content: "▶";
}

.contact-qr-caption::before {
  display: block;
  width: 42px;
  height: 3px;
  margin: 0 auto 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--red), var(--cyan));
  content: "";
}

@media (min-width: 981px) {
  .download-card {
    overflow: hidden;
  }

  .download-platform {
    display: flex;
    position: relative;
    z-index: 1;
    justify-content: center;
    margin-bottom: 4px;
    color: #7b878c;
    letter-spacing: .16em;
    font-size: 12px;
    font-weight: 800;
  }

  .download-decor {
    display: block;
    z-index: 0;
    opacity: .42;
    pointer-events: none;
  }

  .download-decor-play {
    top: 18px;
    right: 16px;
    width: 88px;
    height: 88px;
    transform: rotate(11deg);
  }

  .download-decor-cube {
    right: 8px;
    bottom: 12px;
    width: 112px;
    height: 112px;
  }

  .download-heading::after {
    display: block;
    width: 72px;
    height: 3px;
    margin: 16px auto 0;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--red), var(--cyan));
    content: "";
  }

  .contact-artboard::before {
    background-image:
      linear-gradient(180deg, rgba(255, 244, 243, .35), transparent 22%),
      linear-gradient(#fff, #fff);
  }
}

@media (max-width: 980px) {
  .workflow-bar::before {
    display: none;
  }

  .download-heading::after {
    display: none;
  }
}

/* 0.1.22: case preview should not stack a glass play button on the video. */
.case-card-play {
  display: none !important;
}

/* 0.1.23: park the download page without deleting it. Restore by removing
 * [hidden] here, the HTML hidden attribute, and the nav item in content.js. */
#download[hidden] {
  display: none !important;
}

/* 0.1.24: header jump to the live app. Right of the bar, not a hero pill. */
.header-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  margin-left: auto;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, #f2534c 0%, #19bdc1 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 3px 3px 0 rgba(26, 190, 193, .28), -2px -2px 0 rgba(243, 83, 80, .22);
}

.header-cta:hover,
.header-cta:focus-visible {
  color: #fff;
  filter: brightness(1.05);
}

.header-cta:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  .header-cta {
    transition: filter var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
  }

  .header-cta:hover {
    transform: translateY(-1px);
  }
}

@media (max-width: 980px) {
  .header-cta {
    display: none;
  }

  .mobile-menu.open {
    max-height: 420px;
  }

  .mobile-menu .header-cta-mobile {
    display: inline-flex;
    width: calc(100% - 16px);
    min-height: 46px;
    margin: 8px;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-cta:hover {
    transform: none;
  }
}


/* 13/14-inch laptops: keep the 1672 boards, but compact the non-scaled
 * pages and header so 1280x720 / 1366x768 / 1440x900 do not clip. */
@media (min-width: 981px) and (max-width: 1440px) {
  #siteHeader {
    padding: 0 clamp(16px, 3vw, 40px);
  }

  #siteHeader .brand img {
    width: 128px;
    max-height: 46px;
  }

  #siteHeader .desktop-nav {
    gap: clamp(18px, 2.4vw, 40px);
  }

  #siteHeader .desktop-nav a {
    font-size: 16px;
  }

  .header-cta {
    min-height: 36px;
    padding: 0 14px;
    font-size: 14px;
  }
}

@media (min-width: 981px) and (max-height: 900px) {
  .page-section {
    isolation: auto;
  }

  .hero-light-flow,
  .feature-light-flow {
    display: none;
  }

  .hero,
  .features,
  .showcase,
  .contact,
  .download {
    min-height: 0;
    height: calc(100vh - var(--header-height));
  }

  .case-card.side-left,
  .case-card.side-right {
    filter: none;
  }

  .showcase-stage {
    width: min(1280px, calc(100% - 48px));
    padding-top: 22px;
  }

  .showcase-heading {
    width: min(100%, 760px);
    gap: 14px;
    margin-bottom: 10px;
  }

  .showcase-heading h2 {
    font-size: 40px;
  }

  .showcase-heading p {
    margin-top: 0;
    font-size: 14px;
  }

  #caseGallery {
    min-height: 0;
    height: calc(100% - 92px);
  }

  .case-viewport {
    inset: 0 72px 28px;
  }

  .case-card {
    width: 240px;
    height: 392px;
  }

  .case-card.side-left {
    transform: translateX(calc(-50% - 236px)) scale(.84);
  }

  .case-card.side-right {
    transform: translateX(calc(-50% + 236px)) scale(.84);
  }

  .case-arrow {
    width: 46px;
    height: 46px;
  }

  .contact-wrap {
    width: min(1280px, calc(100% - 40px));
    padding-top: 18px;
  }

  .contact-copy h2 {
    margin: 8px 0 6px;
    font-size: 40px;
  }

  .contact-copy p {
    font-size: 16px;
    line-height: 1.55;
  }

  .contact-artboard {
    transform: scale(0.78);
    transform-origin: center 58%;
  }
}

@media (min-width: 981px) and (max-height: 760px) {
  .showcase-heading h2 {
    font-size: 34px;
  }

  .case-card {
    width: 210px;
    height: 344px;
  }

  .case-card.side-left {
    transform: translateX(calc(-50% - 200px)) scale(.82);
  }

  .case-card.side-right {
    transform: translateX(calc(-50% + 200px)) scale(.82);
  }

  .contact-copy h2 {
    font-size: 34px;
  }

  .contact-artboard {
    transform: scale(0.68);
    transform-origin: center 52%;
  }
}