:root {
  --a6-radius: 0.75rem;
  --a6-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
  --a6-title: #0f172a;
  --a6-text: #475569;
  --a6-blue: #bfe2ff;
  --a6-blue-2: #7ecbff;
  --a6-pink: #ffe1eb;
  --a6-pink-2: #ffd2df;
  --a6-peach: #ffe3cc;
  --a6-peach-2: #ffd7b3;
  --a6-white: #ffffff;
}

.area-6-cards {
  margin: 0 auto;
  padding: 1.5rem 1rem;
  max-width: 80rem;
  position: relative;
}

.area-6-cards__viewport {
  overflow: hidden;
  position: relative;
  margin: 0 40px; /* Add margin for buttons */
  padding-top: 4px;
}

.area-6-cards__list {
  display: flex; /* Changed from grid to flex for carousel */
  /* gap: 16px; Removed for Safari 13+ compatibility */
  width: max-content; /* Ensure it takes full width of content */
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.area-6-cards__item {
  width: 440px;
  height: 440px;
  flex: 0 0 auto; /* Prevent shrinking */
  position: relative;
  border-radius: var(--a6-radius);
  /* box-shadow: var(--a6-shadow); */
  overflow: hidden;
  background: #f6f7f9;
  max-width: 100%; /* Responsive fallback */
  margin-right: 16px; /* Use margin instead of gap for better compatibility */
}

.area-6-cards__item:last-child {
  margin-right: 0;
}

/* Mobile responsiveness for items */
@media (max-width: 520px) {
  .area-6-cards__item {
    width: 300px;
    height: 300px;
  }
  .area-6-cards__viewport {
      margin: 0 20px;
  }
}
@media (max-width: 380px) {
    .area-6-cards__item {
        width: 280px;
        height: 280px;
    }
}

.area-6-cards__header {
  padding: 1.25rem 1.25rem 0.5rem 1.25rem;
}

.area-6-cards__title {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--a6-title);
  font-weight: 700;
  letter-spacing: 0;
}

.area-6-cards__desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--a6-text);
}

.area-6-cards__media {
  position: relative;
  margin: 0;
  padding: 0 1.25rem 1.25rem 1.25rem;
  min-height: 12rem;
}

.area-6-cards__img {
  display: block;
  max-width: 100%;
  height: auto;
}

.area-6-cards__item--service {
  background: linear-gradient(180deg, #e6f4ff 0%, #d7efff 40%, #dff1ff 100%);
}

.area-6-cards__item--image {
  background: linear-gradient(180deg, #ffe8f1 0%, #ffe1ec 45%, #ffdbe6 100%);
}

.area-6-cards__item--doc {
  background: linear-gradient(180deg, #fff0e2 0%, #ffe7d4 50%, #ffe2ca 100%);
}

.area-6-cards__item--service img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 卡片 1 机器人与环 */
.area-6-cards__item--service .area-6-cards__media {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 14rem;
}

.area-6-cards__item--service .area-6-cards__img {
  width: 10.5rem;
  z-index: 1;
  filter: drop-shadow(0 0.25rem 0.75rem rgba(0, 0, 0, 0.12));
}

.area-6-cards__ring {
  position: absolute;
  width: 16.5rem;
  height: 16.5rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.area-6-cards__tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 1.125rem;
  background: #ffffff;
  color: #1e293b;
  font-size: 0.8125rem;
  line-height: 1;
  border: 0.0625rem solid #dbeafe;
  box-shadow: 0 0.25rem 0.75rem rgba(126, 203, 255, 0.25);
}

.area-6-cards__tag--tl {
  left: 1rem;
  top: 3.25rem;
}

.area-6-cards__tag--tr {
  right: 1rem;
  top: 2.25rem;
}

.area-6-cards__tag--bl {
  left: 2rem;
  bottom: 2rem;
}

.area-6-cards__tag--br {
  right: 1.25rem;
  bottom: 2.75rem;
}

/* 卡片 2 汉堡与飘散元素 */
.area-6-cards__item--image .area-6-cards__media {
  min-height: 14rem;
}

.area-6-cards__img--burger {
  width: 12.5rem;
  margin: 1rem auto 0 auto;
  filter: drop-shadow(0 0.5rem 1.25rem rgba(0, 0, 0, 0.15));
}

.area-6-cards__piece {
  position: absolute;
  display: block;
}

.area-6-cards__piece--patty {
  width: 5rem;
  left: 1.25rem;
  top: 2.75rem;
  transform: rotate(-6deg);
}

.area-6-cards__piece--lettuce {
  width: 4.5rem;
  right: 2.25rem;
  top: 2.25rem;
}

.area-6-cards__piece--tomato {
  width: 3.25rem;
  right: 2.25rem;
  bottom: 1.75rem;
}

.area-6-cards__dash {
  position: absolute;
}

.area-6-cards__dash--lettuce {
  right: 6.25rem;
  top: 2.75rem;
  opacity: 0.7;
}

/* 卡片 3 文案便签与铅笔 */
.area-6-cards__item--doc .area-6-cards__media {
  min-height: 14rem;
}

.area-6-cards__note {
  position: relative;
  width: 14rem;
  height: 9rem;
  margin: 1rem 5.5rem 0 1.25rem;
}

.area-6-cards__sheet {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  background: #fff3e6;
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.25rem rgba(255, 167, 107, 0.25);
}

.area-6-cards__sheet--1 {
  width: 11.75rem;
  height: 6.75rem;
  bottom: 0;
}

.area-6-cards__sheet--2 {
  width: 12.5rem;
  height: 7.25rem;
  bottom: 0.5rem;
  opacity: 0.7;
}

.area-6-cards__sheet--3 {
  width: 13.25rem;
  height: 7.75rem;
  bottom: 1rem;
  opacity: 0.45;
}

.area-6-cards__label {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  height: 2rem;
  display: flex;
  align-items: center;
  padding: 0 0.875rem;
  border-radius: 1rem;
  background: #ffffff;
  color: #0f172a;
  font-size: 0.8125rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
}

.area-6-cards__label-bar {
  display: inline-block;
  width: 4.25rem;
  height: 0.3125rem;
  margin-left: 0.5rem;
  border-radius: 0.25rem;
  background: #00d084;
  opacity: 0.45;
}

.area-6-cards__badge {
  position: absolute;
  left: 1rem;
  top: 3.5rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  border-radius: 1.125rem;
  background: #ffffff;
  color: #0f172a;
  font-size: 0.875rem;
  border: 0.0625rem solid #ffd9b8;
  box-shadow: 0 0.25rem 0.75rem rgba(255, 167, 107, 0.25);
}

.area-6-cards__badge-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.area-6-cards__img--pencil {
  position: absolute;
  right: 1rem;
  bottom: 1.25rem;
  width: 7.25rem;
  filter: drop-shadow(0 0.5rem 1.25rem rgba(0, 0, 0, 0.12));
}

/* 交互与动画 */
.area-6-cards__item {
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.area-6-cards__item:hover {
  transform: translateY(-0.125rem);
  /* box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12); */
}

.area-6-cards__tag,
.area-6-cards__piece,
.area-6-cards__img--pencil {
  transition: transform 320ms ease, opacity 320ms ease;
}

.area-6-cards__item--service:hover .area-6-cards__tag--tl {
  transform: translate(-0.125rem, -0.125rem);
}

.area-6-cards__item--service:hover .area-6-cards__tag--tr {
  transform: translate(0.125rem, -0.125rem);
}

.area-6-cards__item--service:hover .area-6-cards__tag--bl {
  transform: translate(-0.125rem, 0.125rem);
}

.area-6-cards__item--service:hover .area-6-cards__tag--br {
  transform: translate(0.125rem, 0.125rem);
}

.area-6-cards__item--image:hover .area-6-cards__piece--patty {
  transform: translateY(-0.25rem) rotate(-8deg);
}

.area-6-cards__item--image:hover .area-6-cards__piece--lettuce {
  transform: translateY(-0.25rem);
}

.area-6-cards__item--image:hover .area-6-cards__piece--tomato {
  transform: translateY(0.25rem);
}

.area-6-cards__item--doc:hover .area-6-cards__img--pencil {
  transform: translate(0.125rem, -0.125rem) rotate(-2deg);
}

/* 导航按钮样式 */
.area-6-cards__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.area-6-cards__btn:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08);
}

.area-6-cards__btn:active:not(:disabled) {
  transform: translateY(-50%) scale(0.95);
}

.area-6-cards__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f1f5f9;
}

.area-6-cards__btn--prev {
  left: 0;
}

.area-6-cards__btn--next {
  right: 0;
}

/* 响应式布局 */
@media (min-width: 48rem) {
  /* 768px */
  .area-6-cards__media {
    min-height: 15rem;
  }
}

@media (min-width: 64rem) {
  /* 1024px */
  .area-6-cards__header {
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
  }

  .area-6-cards__title {
    font-size: 1.375rem;
  }

  .area-6-cards__desc {
    font-size: 0.9375rem;
  }
}

@media (min-width: 90rem) {
  /* 1440px+ */
  .area-6-cards {
    max-width: 76rem;
  }

  .area-6-cards__media {
    min-height: 16rem;
  }

  .area-6-cards__img--burger {
    width: 13.5rem;
  }

  .area-6-cards__item--service .area-6-cards__img {
    width: 11.25rem;
  }
}

/* 可访问性与降级 */
.area-6-cards img {
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .area-6-cards__item,
  .area-6-cards__tag,
  .area-6-cards__piece,
  .area-6-cards__img--pencil,
  .area-6-cards__list {
    transition: none;
  }
}