/* ============================================
   Robot Companion Page — 小伴 · RUMI
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Source Han Sans SC', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: #FFFFFF;
  color: #0A0A0A;
  overflow-x: hidden;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
button { border: none; background: none; cursor: pointer; font: inherit; }
/* Navbar links: universal horizontal centering */
.navbar-a .navbar-links,
.navbar-scroll .navbar-links {
  left: 50%;
  transform: translateX(-50%);
}

.highlight { color: #F07C44; }

/* ========================
   Unified layout
   ======================== */
.section-container {
  max-width: 1660px;
  margin: 0 auto;
  position: relative;
}
/* 内容区居中：文字、卡片网格等 */
.area4-language .section-container > *,
.area5-explanation > *,
.area7-behavior .section-container > *,
.area10-specs .section-container > * {
  max-width: min(1104px, 92%);
  margin-left: auto;
  margin-right: auto;
}
/* 轮播区不受内容宽度限制 */
.carousel-area,
.area7-carousel {
  max-width: none !important;
}
.area7-nav {
  max-width: min(1104px, 92%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* 羽化：覆盖容器内、内容区外的两侧 */
.section-container::before,
.section-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc((100% - min(1104px, 92%)) / 2);
  z-index: 5;
  pointer-events: none;
}
.section-container::before {
  left: 0;
  background: linear-gradient(to right, #FFFFFF, transparent);
}
.section-container::after {
  right: 0;
  background: linear-gradient(to left, #FFFFFF, transparent);
}
.area4-language .section-container::before,
.area4-language .section-container::after {
  display: none;
}

/* Section nav link centering (PC, page-specific) */
.navbar-links--section {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  gap: 1.5vw;
}

/* Frosted glass sub-navbar — override shared navbar.css defaults for stronger effect */
.navbar-scroll {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Active state on section nav (小伴导航栏) — 颜色与首页 navbarB 对齐 */
.navbar-links--section a.active,
.navbar-links--section a.active:visited {
  color: #F18956 !important;
  opacity: 1 !important;
  font-weight: 500;
}

/* ========================
   Area 1: Hero
   ======================== */
.area1-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}
.area1-hero .hero-bg {
  position: absolute;
  inset: 0;
}
.area1-hero .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.area1-hero .hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 180px;
}
.hero-title {
  display: flex;
  align-items: baseline;
  gap: 20px;
}
.hero-title-zh {
  font-family: 'Source Han Sans SC', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
}
.hero-title-dot {
  font-family: 'Poppins', sans-serif;
  font-size: 40px;
  font-weight: 600;
  color: #fff;
}
.hero-title-en {
  font-family: 'Poppins', sans-serif;
  font-size: 40px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 2px;
}
.hero-subtitle {
  font-size: 20px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 1px;
  margin-top: 8px;
  margin-bottom: 24px;
}

/* ========================
   Area 2: 全模态感知矩阵
   ======================== */
.area2-modal {
  background: #FFFFFF;
  padding: 160px 0 120px;
}
.area2-main-title {
  max-width: min(1104px, 92%);
  margin: 0 auto 80px;
  font-size: 56px;
  font-weight: 700;
  color: #333333;
  letter-spacing: 0.05em;
}

/* Carousel shared */
.carousel-area {
  position: relative;
}
.carousel-track-wrapper {
  position: relative;
  overflow: hidden;
  padding-bottom: 24px;
}
.carousel-track {
  display: flex;
  gap: 40px;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Upper carousel cards */
.carousel-card {
  flex-shrink: 0;
  width: 671px;
  background: #fff;
  border-radius: 32px;
  box-shadow: 0 4px 20px rgba(48, 104, 156, 0.1);
  overflow: hidden;
}
.carousel-card-img {
  width: 100%;
  height: 538px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.carousel-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel-card-icon {
  display: flex;
  justify-content: flex-start;
  padding: 24px 0 16px 32px;
}
.carousel-card-icon img {
  width: 48px;
  height: 48px;
}
.carousel-card-text {
  padding: 0 32px 32px;
}
.carousel-card-text .text-strong {
  display: inline;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #333;
}
.carousel-card-text .text-normal {
  display: inline;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgba(51, 51, 51, 0.7);
}

/* Carousel nav arrows */
.carousel-nav {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  margin-top: 40px;
  max-width: min(1104px, 92%);
  margin-left: auto;
  margin-right: auto;
}

/* Medium card */
.area2-medium {
  margin-top: 120px;
  display: flex;
  justify-content: center;
}
.area2-medium-card {
  width: 1104px;
  background: #fff;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(48, 104, 156, 0.1);
}
.area2-medium-img {
  width: 100%;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.area2-medium-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.area2-medium-icon {
  display: flex;
  justify-content: flex-start;
  padding: 24px 0 16px 32px;
}
.area2-medium-icon img {
  width: 48px;
  height: 48px;
}
.area2-medium-text {
  padding: 0 32px 32px;
}
.area2-medium-text .text-strong {
  display: inline;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #333;
}
.area2-medium-text .text-normal {
  display: inline;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgba(51, 51, 51, 0.7);
}

/* Down carousel cards */
.carousel-area--down {
  margin-top: 80px;
}
.carousel-card--down {
  width: 436px;
  padding-bottom: 0;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
}
.carousel-card--down .carousel-card-img {
  height: 567px;
  background: #FFFAEF;
  border-radius: 32px;
  overflow: hidden;
}
.carousel-card-label {
  padding: 32px 48px 0;
  font-size: 24px;
  font-weight: 700;
  color: #F07C44;
  letter-spacing: 0.05em;
}
.carousel-card-divider {
  margin: 20px 48px;
  border-top: 1px dashed rgba(51, 51, 51, 0.1);
}
.carousel-card-details {
  padding: 0 48px 32px;
}
.detail-row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 12px;
}
.detail-row:last-child {
  margin-bottom: 0;
}
.detail-bold {
  font-size: 16px;
  font-weight: 700;
  color: rgba(51, 51, 51, 0.7);
  white-space: nowrap;
}
.detail-light {
  font-size: 16px;
  font-weight: 400;
  color: rgba(51, 51, 51, 0.5);
}


/* ========================
   Area 3 & 6: Teaser sections
   ======================== */
.area-teaser {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.teaser-bg {
  width: 100%;
}
.teaser-bg img {
  width: 100%;
  height: auto;
  display: block;
}
.teaser-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.teaser-subtitle {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #fff;
  margin-bottom: 16px;
}
.teaser-title {
  font-size: 56px;
  font-weight: 700;
  line-height: 56px;
  letter-spacing: 2.8px;
  color: #fff;
  text-align: center;
}

/* ========================
   Area 6: Video Carousel
   ======================== */
.area6-video-carousel {
  background: #FFFFFF;
  padding: 0 0 160px;
}
.area6-video-carousel > .area-teaser {
  margin-top: 120px;
}
.area6-carousel-container {
  max-width: 1660px;
  margin: 0 auto;
}
.area6-header {
  text-align: center;
  margin-top: 120px;
  margin-bottom: 80px;
  max-width: min(1104px, 92%);
  margin-left: auto;
  margin-right: auto;
}
.area6-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 48px;
}
.area6-title-dark { color: #333; }
.area6-title-accent { color: #F07C44; }
.area6-subtitle {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgba(51, 51, 51, 0.7);
}
.area6-subtitle strong {
  color: #333;
  font-weight: 500;
}
.area6-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1660 / 780;
  overflow: visible;
}
.area6-slide {
  position: absolute;
  top: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #f0f0f0;
  will-change: transform, opacity, left, top, width, height;
  transition:
    transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.4s ease,
    left 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    top 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    width 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    height 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Center: ~1000/1660 = 60.24% wide, 648/780 = 83.08% high, vertically centered */
.area6-slide--active {
  left: calc(50% - 30.12%);
  width: 60.24%;
  height: 83.08%;
  top: 8.46%;
  opacity: 1;
  z-index: 2;
}

/* Side: ~580/1660 = 34.94%, height ~375/780 = 48% */
.area6-slide--prev {
  left: -17.47%;
  width: 34.94%;
  height: 48%;
  top: 26%;
  opacity: 0.7;
  z-index: 1;
}
.area6-slide--next {
  left: 82.53%;
  width: 34.94%;
  height: 48%;
  top: 26%;
  opacity: 0.7;
  z-index: 1;
}

/* Offscreen: pushed fully outside the viewport, opacity 0.
   Used by slides that are not in the active/prev/next triad.
   Position values are --prev/--next's left shifted by one slide width (34.94%). */
.area6-slide--offscreen-left {
  left: -52.41%;
  width: 34.94%;
  height: 48%;
  top: 26%;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
.area6-slide--offscreen-right {
  left: 117.47%;
  width: 34.94%;
  height: 48%;
  top: 26%;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}

.area6-slide-media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.area6-slide-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text below slides, inside viewport — positioned by JS */
.area6-slide-text {
  position: absolute;
  overflow: hidden;
  text-align: left;
  opacity: 0.5;
  z-index: 1;
  transition:
    left 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    width 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    top 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.4s ease;
}
.area6-slide-text--active {
  opacity: 1;
  z-index: 2;
}
.area6-text-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #F07C44;
}
.area6-text-divider {
  width: 40px;
  height: 2px;
  background: #F07C44;
  margin: 20px 0;
}
.area6-text-desc {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(51, 51, 51, 0.7);
}

/* Area 6 nav */
.area6-nav {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  margin-top: 160px;
  max-width: min(1104px, 92%);
  margin-left: auto;
  margin-right: auto;
}

/* ========================
   Area 4: 语言体系
   ======================== */
.area4-language {
  background: #F7F0EA;
  padding: 120px 0 160px;
}
.area4-container {
  max-width: 1660px;
  margin: 0 auto;
}
.area4-title-img {
  display: block;
  width: 100%;
  max-width: min(1104px, 92%);
  margin: 0 auto 60px;
  border-radius: 24px;
}
.area4-main-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 0.05em;
  color: #333;
  margin-bottom: 60px;
  text-align: center;
}
.area4-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-bottom: 80px;
}
.area4-card {
  background: #fff;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(48, 104, 156, 0.1);
  text-align: center;
}
.area4-card-primary {
  display: inline;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #333;
}
.area4-card-secondary {
  display: inline;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgba(51, 51, 51, 0.7);
}
.area4-sub-titles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-bottom: 48px;
}
.area4-sub-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 0.05em;
  color: #333;
  text-align: center;
}
.area4-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.area4-detail-item {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.area4-detail-card {
  background: #fff;
  border-radius: 24px;
  padding: 48px 40px;
  box-shadow: 0 4px 20px rgba(48, 104, 156, 0.1);
  text-align: center;
}
.area4-detail-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.area4-detail-icon img {
  width: 84px;
  height: 84px;
  object-fit: contain;
}
.area4-detail-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #333;
  text-align: center;
}
.area4-detail-desc {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgba(51, 51, 51, 0.7);
}
.area4-slogan-section {
  background: #FFFFFF;
  padding: 80px 0;
}
.area4-slogan {
  text-align: center;
  max-width: min(1104px, 92%);
  margin: 0 auto;
}
.area4-slogan-tag {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #232222;
  margin-bottom: 16px;
}
.area4-slogan-text {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #F07C44;
}

/* ========================
   Area 5: 眼睛情绪
   ======================== */
.area5-eyes {
  background: #FFFFFF;
}
.area5-eye-bg {
  position: relative;
  width: 100%;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0px,
    black 30px,
    black calc(100% - 30px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0px,
    black 30px,
    black calc(100% - 30px),
    transparent 100%
  );
}
.area5-eye-bg > img {
  width: 100%;
  height: auto;
  display: block;
}

/* 单容器双眼：由 companion-vision-source 视频帧分别绘制到两个 canvas */
.eye-video-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.eye-video-container canvas {
  position: absolute;
  width: 20%;
  aspect-ratio: 1;
  object-fit: cover;
  clip-path: circle(45% at 50% 50%);
  transform-origin: center;
}

/* 右眼（画面左侧）— 水平 22%，垂直 45% 为圆心 */
.eye-video-container .eye-right {
  left: 22%;
  top: 45%;
  transform: translate(-50%, -50%) scale(1.6);
}

/* 左眼（画面右侧）— 水平 77%，垂直 45% 为圆心 */
.eye-video-container .eye-left {
  left: 77%;
  top: 45%;
  transform: translate(-50%, -50%) scale(1.6);
}

/* 单一视频源：仅作为 canvas 绘图输入，不直接显示 */
.companion-vision-source {
  position: absolute;
  width: 2px;
  height: 2px;
  opacity: 0;
  pointer-events: none;
  top: 0;
  left: 0;
  z-index: -1;
}

/* Explanation section */
.area5-explanation {
  padding: 120px 0;
}
.area5-explain-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #333;
  margin-bottom: 48px;
}
.area5-explain-text {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgba(51, 51, 51, 0.7);
  margin-top: 48px;
}
.area5-eye-layers {
  margin-top: 80px;
  max-width: 1104px;
  margin-left: auto;
  margin-right: auto;
  padding: 48px;
  border-radius: 48px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
.area5-eye-layers img {
  width: 100%;
  border-radius: 16px;
}
.area5-features {
  max-width: 1200px;
  margin: 80px auto 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
}
.area5-feature {
  text-align: center;
}
.area5-feature-name {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #F07C44;
  margin-bottom: 12px;
}
.area5-feature-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(51, 51, 51, 0.7);
}

/* ========================
   Area 7: 行为交互
   ======================== */
.area7-behavior {
  background: #FFFFFF;
  padding: 120px 0 160px;
}
.area7-container {
  max-width: 1660px;
  margin: 0 auto;
}
.area7-header {
  text-align: center;
  margin-bottom: 80px;
}
.area7-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 48px;
}
.area7-title-dark { color: #333; }
.area7-title-accent { color: #F07C44; }
.area7-subtitle {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgba(51, 51, 51, 0.7);
  max-width: 900px;
  margin: 0 auto;
}
.area7-subtitle strong {
  color: #333;
  font-weight: 500;
}

/* Behavior carousel — homepage area6 style */
.area7-carousel {
  position: relative;
  width: 100%;
}
.area7-viewport {
  position: relative;
  width: 100%;
  /* 1660px 宽时，内容高度 = 606(视频) + 120(文字区) = 726px */
  aspect-ratio: 1660 / 780;
  overflow: visible;
}

/*
 * 百分比基准（1660px容器）：
 *   中间卡片: 936px = 56.39%
 *   侧卡片全宽: 724px = 43.61%，可见半宽 362px = 21.81%
 *   间距: 40px = 2.41%
 */

.area7-slide {
  position: absolute;
  top: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 20px rgba(48, 104, 156, 0.1);
  display: flex;
  flex-direction: column;
  will-change: transform, opacity, left, width, height;
  transition:
    transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.4s ease,
    left 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    width 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    height 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Center (active) slide: 936x606 */
.area7-slide--active {
  left: calc(50% - 28.19%);
  width: 56.39%;
  height: 100%;
  opacity: 1;
  z-index: 2;
}

/* Prev: show right half (362x470 visible) */
.area7-slide--prev {
  left: -21.81%;
  width: 43.61%;
  height: 77.67%;  /* 470/606 ratio of visible height relative to center */
  top: 11.16%;
  opacity: 0.7;
  z-index: 1;
  clip-path: inset(0 0 0 50%);
}

/* Next: show left half (362x470 visible) */
.area7-slide--next {
  left: 78.20%;
  width: 43.61%;
  height: 77.67%;
  top: 11.16%;
  opacity: 0.7;
  z-index: 1;
  clip-path: inset(0 50% 0 0);
}

/* Hidden slide */
.area7-slide--hidden {
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  left: -21.81%;
  width: 43.61%;
  height: 77.67%;
  top: 11.16%;
}

/* Slide internals */
.area7-slide-media {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  background: #f0f0f0;
  overflow: hidden;
}
.area7-slide-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Play button */
.area7-play-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  z-index: 10;
  cursor: pointer;
}

/* Slide info text */
.area7-slide-info {
  padding: 32px;
}
.area7-slide--prev .area7-slide-info,
.area7-slide--next .area7-slide-info,
.area7-slide--hidden .area7-slide-info {
  display: none;
}
.area7-slide-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.05em;
  color: #F07C44;
  margin-bottom: 20px;
}
.area7-slide-divider {
  width: 40px;
  height: 2px;
  background: #F07C44;
  margin-bottom: 20px;
}
.area7-slide-desc {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(51, 51, 51, 0.7);
}

/* Behavior nav */
.area7-nav {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  margin-top: 40px;
}

/* ========================
   Area 8: 服饰设计
   ======================== */
.area8-clothing {
  background: #FFFFFF;
  padding: 0 0 120px;
}
.area8-container {
  max-width: 1660px;
  margin: 0 auto;
}
/* area8 teaser reuses .area-teaser styles */

/* Clothing carousel */
.area8-carousel {
  margin-top: 120px;
  position: relative;
  overflow: hidden;
}
.area8-carousel-track {
  display: flex;
  gap: 40px;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.area8-card {
  flex-shrink: 0;
  width: 426px;
  background: #f9f8f5;
  border-radius: 24px;
  overflow: hidden;
}
.area8-card-img {
  width: 100%;
  height: 569px;
}
.area8-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Clothing nav */
.area8-nav {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  margin-top: 40px;
  max-width: min(1104px, 92%);
  margin-left: auto;
  margin-right: auto;
}

/* ========================
   Area 9: 多场景
   ======================== */
.area9-scenes {
  display: flex;
  flex-direction: column;
}
.area9-panel {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.area9-panel-bg {
  width: 100%;
}
.area9-panel-bg img {
  width: 100%;
  height: auto;
  display: block;
}
.area9-panel-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.area9-panel-title {
  font-size: 56px;
  font-weight: 700;
  line-height: 56px;
  letter-spacing: 2.8px;
  color: #fff;
}

/* Area 9: Vertical Scroll Indicator */
/* ★ 可调参数 */
.area9-indicator {
  --indicator-right: 40px;            /* 距图片右边缘 */
  --indicator-dot-size: 10px;         /* 圆点直径 */
  --indicator-bar-width: 10px;        /* 长条宽度 */
  --indicator-bar-height: 32px;       /* 激活长条高度 */
  --indicator-color-active: rgba(255, 255, 255, 0.5);
  --indicator-color-inactive: rgba(255, 255, 255, 0.2);
  --indicator-gap: 12px;              /* 圆点和长条之间的间距 */

  position: fixed;
  right: var(--indicator-right);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--indicator-gap);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.area9-indicator.visible {
  opacity: 1;
}
.area9-dot {
  width: var(--indicator-dot-size);
  height: var(--indicator-dot-size);
  border-radius: 999px;
  background: var(--indicator-color-inactive);
  transition: width 0.3s ease, height 0.3s ease, background 0.3s ease;
}
.area9-dot.active {
  width: var(--indicator-bar-width);
  height: var(--indicator-bar-height);
  background: var(--indicator-color-active);
}

/* ========================
   Area 10: 具体参数
   ======================== */
.area10-specs {
  background: #FFFFFF;
  padding: 160px 0 80px;
}
.area10-container {
  max-width: 1660px;
  margin: 0 auto;
}
.area10-main-title {
  font-size: 56px;
  font-weight: 700;
  line-height: 56px;
  letter-spacing: 2.8px;
  color: #333;
  margin-bottom: 80px;
}

.area10-robot-img {
  background: #F9F8F5;
  border-radius: 32px;
  margin: 0 auto 80px;
  padding: 40px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
}
.area10-robot-placeholder {
  height: 808px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.area10-robot-placeholder img {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
}

.area10-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 60px;
  column-gap: 20px;
}
.area10-spec-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.spec-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
}
.spec-icon svg {
  width: 100%;
  height: 100%;
}
.spec-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.spec-title {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 8px;
}
.spec-value {
  display: block;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.8px;
  line-height: 1.5;
  color: #333;
}

/* ========================
   Footer (white bg)
   ======================== */
.page-footer {
  background: #fff;
  padding: 80px 2.41% 60px;
}
.footer-inner {
  max-width: 1660px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  text-align: left;
}
.footer-brand svg {
  fill: #333;
  display: block;
}
.footer-copyright {
  font-size: 14px;
  font-weight: 250;
  color: rgba(51, 51, 51, 0.5);
  line-height: 1.5;
  text-align: left;
  display: block;
  max-width: 100%;
}
.footer-icp {
  color: #333;
  text-decoration: underline;
}
.footer-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.btn-footer {
  display: inline-flex;
  padding: 14px 20px;
  align-items: center;
  gap: 10px;
  border-radius: 20px;
  border: 0.8px solid rgba(51, 51, 51, 0.2);
  background: rgba(51, 51, 51, 0.05);
  font-size: 12px;
  font-weight: 400;
  color: #333;
  letter-spacing: 0.6px;
  transition: background 0.2s;
}
.btn-footer:hover {
  background: rgba(51, 51, 51, 0.1);
}

/* ========================
   Scroll Reveal
   ======================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================
   Responsive
   ======================== */
@media (max-width: 1200px) {
  .area10-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .area5-features {
    grid-template-columns: repeat(3, 1fr);
  }
  .carousel-card {
    width: 55vw;
  }
  .carousel-card-img {
    height: 44vw;
  }
  .carousel-card--down {
    width: 36vw;
  }
  .carousel-card--down .carousel-card-img {
    height: 46vw;
  }
  .navbar-links--section {
    gap: 1vw;
  }
  .navbar-links--section a {
    font-size: 11px;
  }
}
@media (max-width: 768px) {
  .area10-grid {
    grid-template-columns: 1fr;
  }
  .area4-grid,
  .area4-detail-grid,
  .area4-sub-titles {
    grid-template-columns: 1fr;
  }
  .area5-features {
    grid-template-columns: repeat(2, 1fr);
  }
  .area5-explain-title,
  .area5-explain-text {
    margin-left: auto;
  }
  .area4-slogan-text {
    font-size: 36px;
  }
  .carousel-card {
    width: 340px;
  }
  .carousel-card--down {
    width: 340px;
  }
  .carousel-card-img {
    height: 300px;
  }
  .carousel-card--down .carousel-card-img {
    height: 340px;
  }
  .area8-card {
    width: 320px;
  }
  .area8-card-img {
    height: 420px;
  }
  .teaser-title {
    font-size: 32px;
    line-height: 32px;
  }
  .teaser-subtitle {
    font-size: 12px;
  }
  /* Area 1: Hero — mobile */
  .area1-hero .hero-content {
    padding-top: 87px;
  }
  .hero-title {
    gap: 8px;
  }
  .hero-title-zh {
    font-weight: 500;
  }
  /* Area 2: 全模态感知矩阵 — mobile */
  .area2-modal {
    padding: 18.99vw 0 18.99vw;
  }
  .area2-main-title {
    font-size: 8.44vw;
    letter-spacing: 0.42vw;
    margin-bottom: 8.44vw;
  }
  /* Upper cards: stack vertically, no carousel */
  .carousel-area--up .carousel-track-wrapper {
    overflow: visible;
  }
  .carousel-area--up .carousel-track {
    flex-direction: column;
    gap: 7.92vw;
    transform: none !important;
  }
  .carousel-area--up .carousel-card {
    width: calc(100vw - 10.55vw);
    margin: 0 auto;
    border-radius: 6.33vw;
    flex-shrink: 1;
  }
  .carousel-area--up .carousel-card-img {
    height: auto;
    aspect-ratio: 339 / 272;
  }
  .carousel-area--up .carousel-nav {
    display: none;
  }
  /* Down carousel: keep arrows, adjust spacing */
  .carousel-card--down {
    width: calc(100vw - 10.55vw);
    margin: 0 auto;
  }
  .carousel-card--down .carousel-card-img {
    height: auto;
    aspect-ratio: 339 / 279;
  }
  .carousel-area--down .carousel-nav {
    margin-top: 8.44vw;
  }
  /* Shared card styles */
  .carousel-card-img {
    height: auto;
    aspect-ratio: 339 / 272;
  }
  .carousel-card-icon {
    padding: 3.17vw 6.33vw 0;
  }
  .carousel-card-icon img {
    width: 8.44vw;
    height: 8.44vw;
  }
  .carousel-card-text {
    padding: 0 6.33vw 6.33vw;
  }
  .carousel-card-text .text-strong {
    font-size: 3.69vw;
    line-height: 1.5;
  }
  .carousel-card-text .text-normal {
    font-size: 3.69vw;
    line-height: 1.5;
  }
  .area2-medium-text .text-strong {
    font-size: 3.69vw;
    line-height: 1.5;
  }
  .area2-medium-text .text-normal {
    font-size: 3.69vw;
    line-height: 1.5;
  }
  .carousel-card-label {
    font-size: 3.69vw;
  }
  .detail-bold {
    font-size: 3.69vw;
  }
  .detail-light {
    font-size: 3.69vw;
  }
  .carousel-arrow-btn {
    width: 6.33vw;
    height: 6.33vw;
  }
  .carousel-arrow-btn svg {
    width: 6.33vw;
    height: 6.33vw;
  }
  .area2-medium {
    margin-top: 15.83vw;
  }
  .area2-medium-card {
    width: calc(100vw - 10.55vw);
  }
  .area2-medium-img {
    height: 105.54vw;
  }

  /* --- Footer --- */
  .page-footer {
    padding: 56px 0 56px 20px;
  }
  .footer-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-brand {
    gap: 12px;
    margin-bottom: 36px;
  }
  .footer-actions {
    gap: 22px;
    margin-bottom: 56px;
  }
}

/* ========================
   Mobile: 379px breakpoint
   ======================== */
@media (max-width: 379px) {
  /* --- Area 4: 语言体系 --- */
  .area4-language {
    padding: 0;
  }
  .area4-language .section-container > * {
    max-width: calc(100% - 10.55vw);
  }

  /* Cover image → 36px gap to title */
  .area4-title-img {
    margin: 0 auto 9.50vw;
    border-radius: 4.22vw;
  }

  /* "语言系统" title: 20px bold #333 */
  .area4-main-title {
    font-size: 5.28vw;
    line-height: 5.28vw;
    letter-spacing: 0.05em;
    margin-bottom: 3.17vw;
  }

  /* 4-card grid: 2×2, each ~164×100, 12px gap */
  .area4-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3.17vw;
    margin-bottom: 9.50vw;
  }
  .area4-card {
    height: 26.39vw;
    padding: 2.64vw 3.17vw;
    border-radius: 4.22vw;
    box-shadow: 0 0.53vw 3.17vw rgba(48, 104, 156, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .area4-card br {
    display: none;
  }
  .area4-card-primary,
  .area4-card-secondary {
    display: block;
    font-size: 3.69vw;
    line-height: 1.3;
    letter-spacing: 0.02em;
  }
  .area4-card-primary {
    font-weight: 700;
    color: #333;
  }
  .area4-card-secondary {
    font-weight: 400;
    color: rgba(51, 51, 51, 0.7);
  }

  /* Sub-titles side by side: 20px bold #333 */
  .area4-sub-titles {
    grid-template-columns: 1fr 1fr;
    gap: 3.17vw;
    margin-bottom: 3.17vw;
  }
  .area4-sub-title {
    font-size: 5.28vw;
    line-height: 5.28vw;
  }

  /* Detail cards: 2-col, each ~164×108, 12px gap */
  .area4-detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3.17vw;
  }
  .area4-detail-item {
    gap: 2.11vw;
  }
  .area4-detail-card {
    padding: 2.64vw 3.17vw;
    border-radius: 4.22vw;
    box-shadow: 0 0.53vw 3.17vw rgba(48, 104, 156, 0.08);
  }
  .area4-detail-icon {
    margin-bottom: 1.58vw;
  }
  .area4-detail-icon img {
    width: 6.86vw;
    height: 6.86vw;
  }
  .area4-detail-title {
    font-size: 3.69vw;
    line-height: 1.3;
    color: #333;
  }
  .area4-detail-desc {
    font-size: 3.17vw;
    line-height: 1.4;
    color: rgba(51, 51, 51, 0.7);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* --- Area 4 Slogan (transition to Area 5) --- */
  .area4-slogan-section {
    padding: 19.00vw 0 0;
  }
  .area4-slogan {
    max-width: calc(100% - 10.55vw);
  }
  .area4-slogan-tag {
    font-size: 3.17vw;
    font-weight: 700;
    color: #333;
    margin-bottom: 4.22vw;
  }
  .area4-slogan-text {
    font-size: 8.44vw;
    line-height: 1.3;
    color: #F07C44;
  }

  /* --- Area 5: 眼睛情绪设计 (后半部分) --- */
  /* 56px after eye image, 72px before area6 */
  .area5-explanation {
    padding: 56px 0 72px;
  }
  /* Override centered max-width from base */
  .area5-explanation > * {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  /* "眼睛情绪设计" title: 24px bold #333 */
  .area5-explain-title {
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: 0.05em;
    margin: 0 44px 10px;
  }
  /* Paragraph: 14px regular #333 70%, 44px side margins */
  .area5-explain-text {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: rgba(51, 51, 51, 0.7);
    margin: 0 44px;
  }
  /* Layers image: 36px gap above, max 12px side margins */
  .area5-eye-layers {
    margin: 36px 12px 0;
    max-width: none;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .area5-eye-layers img {
    border-radius: 12px;
  }

  /* --- Area 6: 行为交互 (Video Carousel) --- */
  /* Section: 72px bottom before next section */
  .area6-video-carousel {
    padding: 0 0 72px;
  }
  .area6-video-carousel > .area-teaser {
    margin-top: 0;
  }
  /* Header: 56px after teaser, 36px before carousel */
  .area6-header {
    margin: 56px auto 36px;
  }
  /* Title: 24px bold, two colors already set */
  .area6-title {
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 10px;
  }
  /* Subtitle: 14px regular 70%, strong 14px medium 100% */
  .area6-subtitle {
    font-size: 14px;
    line-height: 1.5;
  }
  .area6-subtitle strong {
    font-size: 14px;
    font-weight: 500;
    color: #333;
  }

  /* Carousel: center 316×204, sides 247×160, 14px gap, vertically centered */
  .area6-viewport {
    aspect-ratio: auto;
    height: 204px;
  }
  .area6-slide--active {
    left: calc(50% - 158px);
    width: 316px;
    height: 204px;
    top: 0;
  }
  .area6-slide--prev {
    left: calc(50% - 158px - 14px - 247px);
    width: 247px;
    height: 160px;
    top: 22px;
  }
  .area6-slide--next {
    left: calc(50% + 158px + 14px);
    width: 247px;
    height: 160px;
    top: 22px;
  }
  /* Mobile offscreen: pushed fully outside the viewport.
     Mobile prev/next use fixed px (247×160, gap 14px, center card 316×204
     centered at 50%). Offscreen positions shift one more card width + gap
     beyond prev/next. */
  .area6-slide--offscreen-left {
    left: calc(50% - 158px - 14px - 247px - 14px - 247px);
    width: 247px;
    height: 160px;
    top: 22px;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
  }
  .area6-slide--offscreen-right {
    left: calc(50% + 158px + 14px + 247px + 14px);
    width: 247px;
    height: 160px;
    top: 22px;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
  }

  /* Text: compact for narrow screens, side texts hidden */
  .area6-slide-text {
    top: calc(100% + 12px);
  }
  .area6-slide-text--active {
    opacity: 1;
  }
  .area6-text-title {
    font-size: 16px;
    margin-bottom: 16px;
  }
  .area6-text-divider {
    display: none;
  }
  .area6-text-desc {
    font-size: 12px;
    line-height: 1.5;
  }

  /* Nav: 24px gap above, right-aligned, 24×24 buttons, 22px apart, 20px from right edge */
  .area6-nav {
    margin: 24px 20px 0 auto;
    max-width: none;
    gap: 22px;
  }
  .area6-nav .carousel-arrow-btn {
    width: 24px;
    height: 24px;
  }
  .area6-nav .carousel-arrow-btn svg {
    width: 24px;
    height: 24px;
  }

  /* --- Area 8: 服饰设计 --- */
  /* Section bottom spacing */
  .area8-clothing {
    padding: 0 0 72px;
  }
  /* Carousel: 36px after teaser */
  .area8-carousel {
    margin-top: 36px;
  }
  /* Track: 20px left margin, 20px gap between cards */
  .area8-carousel-track {
    gap: 20px;
    padding-left: 20px;
  }
  /* Card: 256×342 */
  .area8-card {
    width: 256px;
    border-radius: 16px;
  }
  .area8-card-img {
    height: 342px;
  }
  /* Nav: 20px after carousel, right-aligned, 24×24 buttons, 22px apart, 20px from right */
  .area8-nav {
    margin: 20px 20px 0 auto;
    max-width: none;
    gap: 22px;
  }
  .area8-nav-btn {
    width: 24px;
    height: 24px;
  }
  .area8-nav-btn svg {
    width: 24px;
    height: 24px;
  }

  /* --- Area 10: 具体参数 --- */
  /* Section: 36px bottom before footer */
  .area10-specs {
    padding: 14.78vw 0 9.50vw;
  }
  /* Override centered max-width */
  .area10-specs .section-container > * {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  /* Title: 32px bold #000, 20px side margin */
  .area10-main-title {
    font-size: 8.44vw;
    line-height: 1.3;
    letter-spacing: 0.05em;
    color: #000;
    margin: 0 5.28vw 9.50vw;
  }
  /* Robot image: 249×339, centered, 20px side margins */
  .area10-robot-img {
    margin: 0 5.28vw 9.50vw;
    min-height: auto;
    padding: 0;
    background: none;
    border-radius: 0;
  }
  .area10-robot-placeholder {
    max-width: 65.70vw;
    margin: 0 auto;
  }
  .area10-robot-placeholder img {
    width: 65.70vw;
    height: 89.45vw;
  }
  /* Card grid: 2 columns, 32px side margins, 20px h-gap, 32px v-gap */
  .area10-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 5.28vw;
    row-gap: 8.44vw;
    max-width: calc(100% - 16.89vw);
    margin: 0 auto;
  }
  /* Card: min-height 134px */
  .area10-spec-item {
    min-height: 35.36vw;
  }
  /* Logo: 40×40 */
  .spec-icon {
    width: 10.55vw;
    height: 10.55vw;
    margin-bottom: 3.17vw;
  }
  /* Title: 14px bold #333 */
  .spec-title {
    font-size: 3.69vw;
    letter-spacing: 0.05em;
    line-height: 1.3;
    margin-bottom: 1.06vw;
  }
  /* Value: 12px regular, Poppins for English/numbers */
  .spec-value {
    font-family: 'Poppins', 'Source Han Sans SC', sans-serif;
    font-size: 3.17vw;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.02em;
  }

  /* ========================
     Narrow-screen tweaks (≤379px)
     ======================== */

  /* --- Area 2: title centered, 3-row stack with 30px gaps, 277×360 portrait images --- */
  .area2-main-title {
    text-align: center;
  }
  .carousel-area--up .carousel-track {
    gap: 30px;
  }
  .area2-medium {
    margin-top: 30px;
  }
  .carousel-area--down {
    margin-top: 20px;
  }
  .carousel-area--up .carousel-card,
  .area2-medium-card,
  .carousel-card--down {
    width: 73.09vw;
  }
  .carousel-area--up .carousel-card-img,
  .area2-medium-img,
  .carousel-card--down .carousel-card-img {
    aspect-ratio: 277 / 360;
    height: auto;
  }
  .area2-medium-img {
    height: auto;
  }

  /* --- Area 3 / Area5-6 transition / Area 8: teaser image height 508px @ 379px --- */
  .area-teaser .teaser-bg img {
    height: 134.0vw;
    object-fit: cover;
  }

  /* --- Area 9: panel title 24px, nav indicator mini style --- */
  .area9-panel-title {
    font-size: 24px;
    line-height: 1.3;
  }
  .area9-indicator {
    --indicator-right: 8px;
    --indicator-dot-size: 4px;
    --indicator-bar-width: 4px;
    --indicator-bar-height: 13px;
    --indicator-gap: 4px;
  }

  /* --- Area 10: title centered, padding 72/36 --- */
  .area10-specs {
    padding: 19.0vw 0 9.50vw;
  }
  .area10-main-title {
    text-align: center;
  }
}