@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Map Sans";
  src: url("./fonts/mapsans-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --page-width: 1440px;
  --page-height: 8761px;
  --margin: 40px;
  --sidebar: 352px;
  --column-gap: 80px;
  --content: 928px;
  --media-radius: 16px;
  --hero-frame-radius: 24px;
  --surface: rgba(255, 255, 255, 0.07);
  --muted: #909090;
  --accent: #b273c0;
  --menu-width: 205px;
  --menu-height: 60px;
  --contact-width: 143px;
  --contact-height: 48px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: var(--page-width);
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
  background: #050505;
}

body {
  margin: 0;
  min-width: var(--page-width);
  overscroll-behavior-y: none;
  background: #050505;
  color: #fff;
  font-family: "Inter", "PingFang SC", sans-serif;
  font-optical-sizing: none;
}

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

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

.page-shell {
  position: relative;
  width: var(--page-width);
  height: var(--page-height);
  margin: 0 auto;
  overflow: clip;
  background: #050505;
}

.site-header {
  position: fixed;
  top: 0;
  left: 50%;
  width: var(--page-width);
  height: 88px;
  z-index: 100;
  transform: translateX(-50%);
  pointer-events: none;
}

.site-header > * {
  pointer-events: auto;
}

.brand {
  position: absolute;
  left: 40px;
  top: 32px;
  font-family: "Map Sans", "PingFang SC", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 0.9;
}

.menu-button {
  position: absolute;
  left: calc(50% + 0.5px - var(--menu-width) / 2);
  top: 16px;
  width: var(--menu-width);
  height: var(--menu-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  letter-spacing: -0.32px;
  border: 0;
  border-radius: 17.84px;
  background: rgba(21, 21, 21, 0.8);
  color: #fff;
  font-family: "Inter", "PingFang SC", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 0.9;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
  box-shadow: none;
  will-change: transform;
}

/* 参考组件使用连续圆角；不支持时按原站 0.892 系数回退。 */
@supports (corner-shape: superellipse(1.2)) {
  .menu-button {
    corner-shape: superellipse(1.2);
    border-radius: 20px;
  }
}

.menu-button > .menu-label {
  width: 47px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-icon {
  display: grid;
  width: 12px;
  height: 12px;
  grid-template-columns: repeat(2, 5.33px);
  grid-template-rows: repeat(2, 5.33px);
  gap: 1.34px;
}

.menu-icon i {
  border-radius: 1px;
  background: #fff;
}

.contact-button {
  position: relative;
  width: var(--contact-width);
  height: var(--contact-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #000;
  font-family: "Inter", "PingFang SC", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.32px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 300ms cubic-bezier(0.44, 0, 0.56, 1);
}

.contact-button .contact-icon {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  transform: rotate(0deg) scale(1);
  transition: transform 300ms cubic-bezier(0.44, 0, 0.56, 1);
}

.contact-button span {
  width: 91px;
  height: 16px;
  flex: 0 0 91px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transform: scale(1);
  filter: blur(0px);
  transition:
    transform 300ms cubic-bezier(0.44, 0, 0.56, 1),
    filter 300ms cubic-bezier(0.44, 0, 0.56, 1),
    color 300ms cubic-bezier(0.44, 0, 0.56, 1);
}

/* 参考页的悬浮序列：中间态 300 毫秒后进入稳定态。 */
.contact-button[data-contact-hover] {
  background-color: #e6e6e6;
}

.contact-button[data-contact-hover] span {
  color: #3b3b3b;
  transform: scale(0.9);
}

.contact-button[data-contact-hover="middle"] .contact-icon {
  transform: rotate(45deg) scale(0.8);
  transition-timing-function: cubic-bezier(0.5, 0, 0.88, 0.77);
}

.contact-button[data-contact-hover="middle"] span {
  filter: blur(4px);
  transition:
    transform 500ms cubic-bezier(0.44, 0, 0.56, 1),
    filter 500ms cubic-bezier(0.44, 0, 0.56, 1),
    color 300ms cubic-bezier(0.44, 0, 0.56, 1);
}

.contact-button[data-contact-hover="active"] .contact-icon {
  transform: rotate(90deg) scale(1.2);
  transition-timing-function: cubic-bezier(0.12, 0.23, 0.5, 1);
}

.contact-button[data-contact-hover="active"] span {
  filter: blur(0px);
  transition:
    transform 500ms cubic-bezier(0.76, 0, 0.61, 1),
    filter 500ms cubic-bezier(0.76, 0, 0.61, 1),
    color 300ms cubic-bezier(0.44, 0, 0.56, 1);
}

.site-header > .contact-button {
  position: absolute;
  right: 40px;
  top: 16px;
}

.hero {
  position: absolute;
  inset: 0 0 auto;
  height: 1608px;
  isolation: isolate;
  overflow: clip;
  background: #050505;
}

.hero-stage {
  position: sticky;
  top: 0;
  z-index: 0;
  width: 1440px;
  height: 100vh;
  min-height: 760px;
  max-height: 906px;
  overflow: hidden;
}

.hero-light-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #44204f 0%, #2e1439 42%, #120a19 68%, #050505 82%, #050505 100%);
}

.hero-rays {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 848px;
  z-index: 2;
  color: #fff;
  transform: translateZ(0) scale3d(var(--hero-content-scale, 1), var(--hero-content-scale, 1), 1);
  opacity: var(--hero-content-opacity, 1);
  transform-origin: 50% 360px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.hero-content > * {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.hero h1 {
  position: absolute;
  top: 248px;
  left: 184px;
  width: 1072px;
  height: 64px;
  margin: 0;
  font-family: "Map Sans", "PingFang SC", sans-serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 64px;
  letter-spacing: 1.28px;
  text-align: center;
  white-space: nowrap;
}

.hero-meta {
  position: absolute;
  top: 344px;
  left: 184px;
  width: 1072px;
  height: 16px;
  margin: 0;
  font-family: "Map Sans", "PingFang SC", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.4px;
  text-align: center;
}

.hero-copy {
  position: absolute;
  top: 520px;
  width: 312px;
  font-size: 16px;
  line-height: 24px;
}

.hero-copy-left {
  left: 328px;
}

.hero-copy-right {
  left: 800px;
}

.hero-media {
  position: absolute;
  left: 37.7778px;
  top: 711px;
  width: 1364.4444px;
  height: 792.2222px;
  border-radius: var(--hero-frame-radius);
  background: radial-gradient(ellipse at 45% 0%, #f5c9ff 30%, #d49ee0 50%, #b273c0 70%);
  z-index: 4;
  transform: translate3d(0, var(--hero-media-y, -39.6111px), 0) scale3d(var(--hero-media-scale, 0.9), var(--hero-media-scale, 0.9), 1);
  transform-origin: 50% 50%;
  will-change: transform;
}

.hero-showreel {
  position: absolute;
  left: 86.6667px;
  top: 73.3333px;
  width: 1191.1111px;
  height: 645.5556px;
  display: block;
  object-fit: cover;
  border-radius: var(--media-radius);
  background: rgba(255, 255, 255, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .hero-rays { opacity: 0.92; }
}

.portfolio-section {
  position: absolute;
  left: 472px;
  width: var(--content);
}

.portfolio-section h2 {
  height: 16px;
  margin: 0 0 16px;
  font-family: "Map Sans", "PingFang SC", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 16px;
}

.media-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.media-placeholder {
  overflow: hidden;
}

.media-stack > .media-placeholder {
  width: 100%;
  border-radius: var(--media-radius);
}

.media-placeholder > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overview-media img {
  object-position: center;
}

.overview-media img {
  object-fit: cover;
  border-radius: 0;
}

/* 资源自带透明圆角，容器底色和内阴影会从边缘透出。 */
.overview-media > .dark-panel {
  background: transparent;
  box-shadow: none;
}

.dark-panel {
  background: #171717;
  box-shadow: none;
}


.overview-section {
  top: 1632px;
}

.media-01 { height: 619px; }
.media-02 { height: 619px; }
.media-03 { height: 619px; }

.challenge-section {
  top: 3609px;
}


.challenge-section h2,
.marketing-section h2 {
  margin-bottom: 24px;
}

.challenge-section .media-stack {
  gap: 24px;
}

.marketing-section {
  top: 5338px;
}

.media-08 {
  position: relative;
  height: 1250px;
}
.media-09 {
  position: relative;
  height: 576px;
}

.website-label {
  position: absolute;
  z-index: 2;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #714a79;
  color: #f1c5e6;
  font-family: "Map Sans", "PingFang SC", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 16px;
}

.website-showcase {
  position: absolute;
  left: 56px;
  top: 64px;
  width: 817px;
  height: 1122px;
}

.website-showcase img {
  border-radius: var(--media-radius);
  position: absolute;
  display: block;
  object-fit: cover;
}

.website-desktop { left: 1px; top: 0; width: 816px; height: 552px; }
.website-tablet { left: 0; top: 680px; width: 535px; height: 378px; }
.website-mobile { left: 559px; top: 680px; width: 258px; height: 378px; }
.website-label-desktop { left: 718px; top: 576px; width: 99px; }
.website-label-tablet { left: 445px; top: 1082px; width: 90px; }
.website-label-mobile { left: 727px; top: 1082px; width: 90px; }

.social-post-row {
  position: absolute;
  left: 152px;
  top: 64px;
  width: 624px;
  height: 432px;
  display: flex;
  gap: 24px;
}

.social-post-crop {
  border-radius: var(--media-radius);
  position: relative;
  width: 192px;
  height: 384px;
  flex: 0 0 auto;
  overflow: hidden;
}

.social-post-crop img {
  position: absolute;
  left: -221px;
  top: -8px;
  width: 897px;
  height: 557px;
  max-width: none;
  object-fit: cover;
}

.section-card-rail {
  position: fixed;
  left: calc(50% - 680px);
  top: 224px;
  z-index: 20;
  width: var(--sidebar);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 8px, 0);
  transform-origin: 50% 0;
  transition:
    opacity 180ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 280ms;
}

.section-card-rail.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition-delay: 60ms, 0ms, 0s;
}

.section-card-rail.is-boundary {
  position: absolute;
  left: 40px;
  top: var(--rail-boundary-top);
}

.rail-card {
  --rail-motion-duration: 480ms;
  width: 282px;
  height: 56px;
  flex: 0 0 auto;
  align-self: center;
  padding: 0 24px;
  overflow: clip;
  border-radius: 12px;
  background: var(--surface);
  opacity: 0.8;
  will-change: width, height, padding, border-radius;
  transition:
    width var(--rail-motion-duration) cubic-bezier(0.22, 1, 0.36, 1),
    height var(--rail-motion-duration) cubic-bezier(0.22, 1, 0.36, 1),
    padding var(--rail-motion-duration) cubic-bezier(0.22, 1, 0.36, 1),
    border-radius var(--rail-motion-duration) cubic-bezier(0.22, 1, 0.36, 1),
    opacity var(--rail-motion-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.rail-card.is-active {
  opacity: 1;
  width: 352px;
  padding: 32px 24px;
  border-radius: 16px;
}

.rail-overview.is-active { height: var(--overview-card-height, 560px); padding-right: 32px; overflow: visible; }

.rail-overview .rail-card-content,
.rail-overview.is-active .rail-label { width: 296px; }
.rail-challenge.is-active { height: var(--challenge-card-height, 400px); }
.rail-marketing.is-active { height: var(--marketing-card-height, 352px); }

.rail-label {
  width: 234px;
  height: 56px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 16px;
  line-height: 24px;
  transition: height var(--rail-motion-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.rail-card.is-active .rail-label {
  width: 304px;
  height: 12px;
}

.rail-card-content {
  width: 304px;
  margin-top: 40px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -8px, 0);
  will-change: opacity, transform;
  transition:
    opacity var(--rail-motion-duration) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--rail-motion-duration) cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear var(--rail-motion-duration);
}

.rail-card.is-active .rail-card-content {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}

.rail-card h3 {
  height: 32px;
  margin: 0;
  font-family: "Map Sans", "PingFang SC", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.rail-overview .overview-summary {
  height: auto;
  margin-top: 32px;
}

.rail-marketing .rail-card-content h3 {
  height: 41px;
  line-height: 0.9;
}

.rail-marketing .rail-card-content > p {
  height: 144px;
  margin: 32px 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  line-height: 24px;
}

.footer-intro > span,
.footer-links span {
  display: block;
  color: var(--muted);
  font-size: 16px;
  line-height: 16px;
}

.footer-intro > span {
  display: flex;
  align-items: center;
  height: 16px;
  color: #fff;
  font-family: "Inter", "PingFang SC", sans-serif;
  line-height: 0.9;
}

.footer-links span {
  color: #9b9b9b;
  font-family: "Inter", "PingFang SC", sans-serif;
  font-weight: 400;
  line-height: 0.9;
}

.overview-summary {
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  line-height: 24px;
}

.overview-summary p {
  margin-bottom: 16px;
}

.overview-summary strong {
  display: block;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

.overview-summary ul,
.overview-summary ol {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.overview-summary li::before {
  content: "· ";
}

.overview-summary .challenge-list {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 24px;
  list-style: decimal;
}

.overview-summary .challenge-list li::before {
  content: none;
}

.overview-summary .challenge-list a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.overview-summary .challenge-list a:hover,
.overview-summary .challenge-list a:focus-visible {
  color: #fff;
}

.challenge-group {
  padding-top: 13px;
}

.metric-with-detail {
  position: relative;
  width: max-content;
  max-width: 100%;
}

.metric-label {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: help;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.metric-label:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.5);
  outline-offset: 3px;
}

.metric-tooltip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 2;
  width: max-content;
  max-width: 272px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  color: #030303;
  font-size: 13px;
  line-height: 18px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.metric-with-detail:hover .metric-tooltip,
.metric-with-detail:focus-within .metric-tooltip {
  opacity: 1;
  transform: translateY(0);
}

.challenge-card-content {
  position: relative;
  height: var(--challenge-content-height, 288px);
  overflow: hidden;
}

.challenge-track {
  display: flex;
  flex-direction: column;
  gap: 40px;
  transform: translate3d(0, var(--challenge-track-y, 0), 0);
  will-change: transform;
}

.challenge-item {
  position: relative;
  flex: 0 0 288px;
  display: flex;
  flex-direction: column;
  gap: 31px;
}

.challenge-item:last-child {
  flex-basis: 307px;
  gap: 26px;
}

.challenge-item h3 {
  height: 41px;
  line-height: 0.9;
}

.challenge-copy {
  height: 216px;
  overflow: visible;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  line-height: 24px;
}

.challenge-item:last-child .challenge-copy {
  height: 240px;
}

.challenge-copy p {
  margin: 0;
}

.challenge-item:not(:last-child) .challenge-copy p + p {
  margin-top: 24px;
}

.project-navigation {
  position: absolute;
  left: 810px;
  top: 7940px;
  display: flex;
  gap: 40px;
}

.project-navigation a {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  font-family: "Inter", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 0.9;
  gap: 8px;
  transition: background 160ms ease;
}

.project-navigation a:first-child {
  width: 119px;
  justify-content: center;
}

.project-navigation a:last-child {
  width: 134px;
  justify-content: center;
}

.project-navigation img {
  display: block;
  width: 6px;
  height: 8px;
  flex: 0 0 6px;
}

.project-navigation a:last-child img {
  transform: rotate(180deg);
}

.project-navigation a:hover {
  background: rgba(255, 255, 255, 0.2);
}

.site-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1440px;
  height: 573px;
  overflow: hidden;
}

.footer-top {
  margin-left: 41px;
  width: 1250px;
  height: 136px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-intro {
  width: 381px;
  height: 120px;
}

.footer-intro strong {
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 24px;
  font-family: "Inter", "PingFang SC", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 48px;
}

.footer-links {
  width: 323px;
  display: flex;
  gap: 142px;
  font-family: "Inter", "PingFang SC", sans-serif;
}

.footer-links > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  line-height: 16px;
}

.footer-links > div:first-child { width: 97px; }
.footer-links > div:last-child { width: 84px; }

.footer-links a,
.footer-links span {
  display: flex;
  align-items: center;
  height: 16px;
  line-height: 0.9;
}

.footer-links span {
  height: 16px;
  margin-bottom: 20px;
}

.footer-contact {
  position: absolute;
  left: 41px;
  top: 216px;
}

.footer-meta {
  position: absolute;
  left: 0;
  top: 288px;
  width: 1360px;
  display: flex;
  justify-content: space-between;
  color: #9b9b9b;
  font-size: 12px;
  line-height: 16px;
}

.footer-meta > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-legal {
  align-items: flex-end;
}

.footer-word-mask {
  position: absolute;
  left: 0;
  top: 312px;
  width: 1440px;
  height: 261px;
  overflow: hidden;
}

.footer-word {
  position: absolute;
  left: 0;
  top: -53px;
  width: 1440px;
  height: 378px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: transparent;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 15.079%,
    rgba(255, 0, 34, 0.6) 62.857%,
    rgba(255, 125, 78, 0.85) 83.333%
  );
  background-clip: text;
  -webkit-background-clip: text;
  font-family: "Map Sans", "PingFang SC", sans-serif;
  font-size: 360px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -7.2px;
  text-align: center;
  white-space: nowrap;
}


/* 保时捷案例：稿件 600:395 的内容与紫色材质。 */
.menu-button { left: calc(50% - var(--menu-width) / 2); }

.overview-summary p { margin: 0 0 8px; }
.overview-summary ul { margin-bottom: 8px; }
.challenge-group { padding-top: 0; }
.material-board { position: relative; height: 1080px; }
.packaging-board { position: relative; height: 553px; }
.material-board, .packaging-board, .social-panel { background: radial-gradient(ellipse at 45% 0%, #1f2031 0%, #141523 35%, #090914 70%); }
.material-grid { position: absolute; left: 56px; top: 64px; width: 816px; height: 948px; }
.material-heading, .fixed-model-label, .material-sample > div { background: #714a79; color: #f1c5e6; font-family: "Inter", "PingFang SC", sans-serif; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: 0; }
.material-heading { position: absolute; left: 0; top: 0; width: 356px; height: 56px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; padding: 16px; }
.vehicle-studies { position: absolute; left: 0; top: 80px; width: 356px; display: flex; flex-direction: column; gap: 24px; }
.vehicle-studies img { display: block; width: 356px; height: 200px; border-radius: var(--media-radius); object-fit: cover; }
.figure-sizing { position: absolute; left: 380px; top: 0; width: 356px; height: 280px; border-radius: var(--media-radius); background: linear-gradient(#b273c0, #fff2ff); display: flex; justify-content: center; align-items: center; overflow: hidden; }
.figure-sizing img { display: block; width: 246.667px; height: 176px; object-fit: contain; }
.fixed-model-label { position: absolute; left: 760px; top: 0; width: 56px; height: 280px; border-radius: 8px; padding: 16px 7px; display: flex; flex-direction: column; justify-content: space-between; text-align: center; }
.figure-study { position: absolute; left: 380px; top: 300px; width: 136px; height: 648px; border-radius: var(--media-radius); background: linear-gradient(#b273c0 30%, #fff2ff); overflow: hidden; }
.figure-study img { display: block; width: 136px; height: 648px; }
.material-sample { position: absolute; left: 540px; width: 276px; height: 200px; }
.sample-coating { top: 300px; } .sample-paint { top: 524px; } .sample-paper { top: 748px; }
.material-sample > div { height: 56px; padding: 16px; display: flex; justify-content: space-between; align-items: center; border-radius: 8px 8px 0 0; }
.material-sample img { display: block; width: 276px; height: 144px; border-radius: 0 0 var(--media-radius) var(--media-radius); object-fit: cover; }
.packaging-video { position: absolute; left: 56px; top: 64px; width: 256px; height: 425px; overflow: hidden; border-radius: var(--media-radius); }
.packaging-video video { position: absolute; top: -28px; left: 0; width: 256px; height: 455px; object-fit: cover; }
.packaging-models { position: absolute; left: 336px; top: 64px; width: 536px; height: 425px; border-radius: var(--media-radius); background: linear-gradient(#af70c8, #fff2ff); padding: 52px 48px 45px; display: flex; gap: 48px; }
.packaging-models > div { position: relative; flex: 0 0 193px; height: 322px; }
.packaging-models > div:last-child { flex-basis: 194px; }
.packaging-models img { display: block; width: 100%; height: 100%; object-fit: contain; }
.marketing-pair { display: flex; gap: 16px; width: 928px; height: 608px; }
.marketing-pair img { display: block; width: 456px; height: 608px; object-fit: cover; border-radius: var(--media-radius); }
.website-panel { background: linear-gradient(#1e1d2e, #11111e); }

.challenge-section h2 { margin-bottom: 16px; }

.menu-status { margin-left: 24px; width: 75px; height: 16px; display: flex; align-items: center; justify-content: center; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 400; line-height: .9; letter-spacing: -0.24px; color: #909090; white-space: nowrap; flex-shrink: 0; }

/* 视频操作按钮始终可见，图标随实际播放状态切换。 */
.hero-video-player {
  position: absolute;
  left: 86.6667px;
  top: 73.3333px;
  width: 1191.1111px;
  height: 645.5556px;
  overflow: hidden;
  border-radius: var(--media-radius);
}
.hero-video-player .hero-showreel {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
[data-video-player] video { cursor: pointer; }
.video-toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(21,21,21,.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background-color 160ms ease;
}
.video-toggle:hover { background: rgba(40,40,40,.94); }
.video-toggle:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.video-toggle img { display: block; width: 22px; height: 22px; filter: invert(1); }
.video-toggle .video-pause-icon { display: none; }
[data-playback-state="playing"] .video-toggle .video-play-icon { display: none; }
[data-playback-state="playing"] .video-toggle .video-pause-icon { display: block; }

.hero-meta .inter-text { font-family: "Inter", "PingFang SC", sans-serif; }

.video-sound-toggle {
  position: absolute;
  right: 72px;
  bottom: 16px;
  z-index: 3;
  height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 22px;
  background: rgba(21,21,21,.8);
  color: #fff;
  font: 500 12px/1 "Inter", "PingFang SC", sans-serif;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.video-sound-toggle:hover { background: rgba(40,40,40,.94); }
.video-sound-toggle:focus-visible { outline: 2px solid white; outline-offset: 3px; }

/* 完整成果文案与悬浮说明沿用兔年页面的文字交互。 */
.overview-summary .business-metrics { margin: 0 0 16px; font-weight: 400; }
.business-metrics li { position: relative; padding-left: 16px; width: 100%; }
.business-metrics li::before { position: absolute; left: 0; }
.business-metrics .metric-label { display: inline; text-align: left; }
.metric-tooltip { font-weight: 400; visibility: hidden; pointer-events: auto; }
.metric-tooltip::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 8px; }
.metric-with-detail:not(.tooltip-dismissed):hover .metric-tooltip,
.metric-with-detail:not(.tooltip-dismissed):focus-within .metric-tooltip { visibility: visible; }
.metric-with-detail.tooltip-dismissed .metric-tooltip { opacity: 0; visibility: hidden; }
.challenge-item, .challenge-item:last-child { flex: 0 0 auto; gap: 32px; }
.challenge-item .challenge-copy, .challenge-item:last-child .challenge-copy { height: auto; }
.challenge-copy p + p { margin-top: 24px; }
.marketing-copy { margin-top: 32px; color: rgba(255,255,255,.5); font-size: 16px; line-height: 24px; }
.marketing-copy p { margin: 0; }
.marketing-copy p + p { margin-top: 24px; }

.social-post-column { width: 192px; flex: 0 0 192px; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.social-post-column:nth-child(2) .social-post-crop img { left: -216px; top: 0; }
.social-platform-logo { display: block; height: 16px; object-fit: contain; }
.logo-instagram { width: 72px; }
.logo-platform { width: 20px; }
.logo-x { width: 16px; }

/* 参考 https://midu.design/kiwebank 页脚：右移 8px，透明度 60%，双向过渡 0.3s。 */
.footer-links a {
  padding-left: 0;
  opacity: 1;
  white-space: nowrap;
  transition: padding-left 0.3s cubic-bezier(0.44, 0, 0.56, 1),
              opacity 0.3s cubic-bezier(0.44, 0, 0.56, 1);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  padding-left: 8px;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .footer-links a { transition: none; }
}