/* 外层全屏容器 */
.full-width-container {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
:root {
  --left-box-width: 500px;
  --box-width: 1400px;
}
@media (max-width: 1400px) {
  :root {
    --left-box-width: 450px;
    --box-width: 1280px;
  }
}
@media (max-width: 1280px) {
  :root {
    --left-box-width: 400px;
    --box-width: 1024px;
  }
}
@media (max-width: 1024px) {
  :root {
    --left-box-width: 300px;
    --box-width: 900px;
  }
}
/* 主内容容器 */
.main-container {
  max-width: var(--box-width);
  margin: 0 auto;
  padding: 2rem 0;
  position: relative;
  width: var(--box-width);
  /* background-color: #f00; */
}
/* 内容布局 */
.content-layout {
  display: flex;
  position: relative;
  min-height: var(--box-height);
}
/* 左侧内容 */
.left-content {
  flex: 0 0 var(--left-box-width);
  z-index: 10;
  position: relative;
}
.right-content {
  flex: 1;
}
/* 右侧轮播容器延伸到浏览器边 */
.right-content-full {
  flex: 0 0 calc(100% - var(--left-box-width));
  position: relative;
  margin-left: calc(var(--left-box-width) - 100%);
  /* 关键: 将轮播图拉回右侧 */
}
.edge-carousel-wrapper {
  position: absolute;
  left: 100%;
  /* 从左侧内容结束处开始 */
  top: 0;
  width: calc(100vw - ((100vw - var(--box-width)) / 2) - var(--left-box-width));
  /* 精确计算 */
  height: calc(var(--box-height) - 32px);
  overflow: hidden;
}
.swiper-extend-right {
  /* 轮播图延伸到屏幕边缘 */
}
.swiper-extend-right .controls-container {
  width: calc(var(--box-width) - var(--left-box-width));
}
.swiper-extend-right .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-extend-right .slide-content {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  color: white;
  z-index: 2;
}
.swiper-prev,
.swiper-next {
  width: 40px;
  height: 40px;
  border: 1px solid #d4d5d5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-prev:hover,
.swiper-next:hover {
  background-color: #7226ff;
  color: #fff;
}
.swiper-prev {
  border-radius: 20px 0 0 20px;
}
.swiper-next {
  border-radius: 0 20px 20px 0;
}
.hover-item {
  background: linear-gradient(138deg, #b243e6cc, #7228eccc);
  display: none;
}
.swiper-slide:hover .default-item {
  display: none;
}
.swiper-slide:hover .hover-item {
  display: flex;
}
/* Navigation Styles */
header {
  background-color: #000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
header .logo-square {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #A740BF;
  margin: 0 2px;
  vertical-align: middle;
}
header .active .nav-link {
  color: #A740BF;
}
header .nav-link {
  position: relative;
  transition: color 0.3s ease;
  padding: 0.5rem 0;
}
header .nav-link:hover,
header .nav-link.active {
  color: #A740BF;
}
header .nav-link:hover::after {
  transform: scaleX(1);
}
.section-title {
  font-size: 54px;
  color: #7226ff;
  line-height: 1.2;
  font-weight: bold;
}
.btn-primary {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  background-color: #7226ff;
  color: #fff;
  border-radius: 30px;
  width: 100px;
  height: 34px;
  font-size: 14px;
}
/* =========================================
           SHARED UTILITIES & BASE STYLES
           ========================================= */
/* Smooth flex transition for all accordion cards */
.accordion-card {
  transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
  /* Critical for keeping flex ratios strict */
}
/* Content Transition Base */
.content-expanded,
.content-collapsed {
  transition: opacity 0.3s 0.2s;
  /* Delay opacity to wait for flex growth */
}
/* Hide Scrollbar */
::-webkit-scrollbar {
  display: none;
}
/* Vertical Text Mode */
.writing-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.2em;
}
.banner-swiper .swiper-slide {
  opacity: 1;
  transform: none;
}
/* Banner 文字动画 */
.banner-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.banner-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}
.banner-animate[data-animation="fade-left"] {
  transform: translateX(-30px);
}
.banner-animate[data-animation="fade-left"].animate-in {
  transform: translateX(0);
}
.banner-animate[data-animation="fade-right"] {
  transform: translateX(30px);
}
.banner-animate[data-animation="fade-right"].animate-in {
  transform: translateX(0);
}
.banner-animate[data-animation="zoom"] {
  transform: scale(0.8);
}
.banner-animate[data-animation="zoom"].animate-in {
  transform: scale(1);
}
/* =========================================
           1. FEATURE SECTION (Top)
           Logic: Left item expanded by default.
           ========================================= */
/* Default State: Left Expanded */
.feature-group .content-expanded {
  display: none;
}
.feature-group .content-collapsed {
  display: flex;
}
.feature-group .feature-card.left-card {
  flex: 1;
}
.feature-group .feature-card.left-card:hover,
.feature-group .feature-card.active {
  flex: 2;
}
.feature-group .feature-card.left-card:hover .content-collapsed,
.feature-group .feature-card.active .content-collapsed {
  display: none;
}
.feature-group .feature-card.left-card:hover .content-expanded,
.feature-group .feature-card.active .content-expanded {
  display: flex;
}
.tech-card:first-child {
  flex: 3;
}
.tech-card:first-child .content-expanded {
  display: flex;
  opacity: 1;
}
.tech-card:first-child .content-collapsed {
  display: none;
  opacity: 0;
}
/* Default State: Others Collapsed */
.tech-card:not(:first-child) {
  flex: 1;
}
.tech-card:not(:first-child) .content-expanded {
  display: none;
  opacity: 0;
}
.tech-card:not(:first-child) .content-collapsed {
  display: flex;
  opacity: 1;
}
/* Interaction: Container Hover -> Collapse First Item if not hovering it */
.tech-group:hover .tech-card:first-child:not(:hover) {
  flex: 1;
}
.tech-group:hover .tech-card:first-child:not(:hover) .content-expanded {
  display: none;
  opacity: 0;
}
.tech-group:hover .tech-card:first-child:not(:hover) .content-collapsed {
  display: flex;
  opacity: 1;
}
/* Interaction: Item Hover -> Expand Self */
.tech-card:hover {
  flex: 3;
}
.tech-card:hover .content-expanded {
  display: flex;
  opacity: 1;
}
.tech-card:hover .content-collapsed {
  display: none;
  opacity: 0;
}
/* =========================================
           3. VALUES SECTION (Middle)
           Logic: Middle (2nd) item expanded by default.
           ========================================= */
/* Default State: Middle Item Expanded */
.value-card:nth-child(2) {
  flex: 3;
}
.value-card:nth-child(2) .content-expanded {
  display: flex;
  opacity: 1;
}
.value-card:nth-child(2) .content-collapsed {
  display: none;
  opacity: 0;
}
/* Default State: Others Collapsed */
.value-card:not(:nth-child(2)) {
  flex: 1;
}
.value-card:not(:nth-child(2)) .content-expanded {
  display: none;
  opacity: 0;
}
.value-card:not(:nth-child(2)) .content-collapsed {
  display: flex;
  opacity: 1;
}
/* Interaction: Container Hover -> Collapse Middle Item if not hovering it */
.value-group:hover .value-card:nth-child(2):not(:hover) {
  flex: 1;
}
.value-group:hover .value-card:nth-child(2):not(:hover) .content-expanded {
  display: none;
  opacity: 0;
}
.value-group:hover .value-card:nth-child(2):not(:hover) .content-collapsed {
  display: flex;
  opacity: 1;
}
/* Interaction: Item Hover -> Expand Self */
.value-card:hover {
  flex: 3;
}
.value-card:hover .content-expanded {
  display: flex;
  opacity: 1;
}
.value-card:hover .content-collapsed {
  display: none;
  opacity: 0;
}
.bg-dialog {
  background: linear-gradient(181deg, #D09BFF, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff);
}
.bg-button-gra {
  background: linear-gradient(90deg, #7628FF, #CE4EFF);
}
.bg-fielg {
  background: linear-gradient(90deg, #ce4effeb, #7628ffeb);
}
.bg-fielg1 {
  background: linear-gradient(134deg, #ce4effeb, #7628ffeb);
}
.app-field .item .item-hover {
  display: none;
}
.app-field .item:hover .item-hover {
  display: flex;
}
.app-field .item:hover .item-default {
  display: none;
}