/* ==========================================================================
   本翼资本官网 - 组件样式
   包含：导航栏、Hero、Footer、卡片、表格等
   ========================================================================== */

/* ----- 导航栏 ----- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: all 0.4s var(--ease-out);
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--ink-200);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: var(--space-8);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.nav__logo-img {
  height: 44px;
  width: auto;
}

.nav__brand-text {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-900);
}

.nav__brand-text small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--red-700);
  text-transform: uppercase;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav__item {
  position: relative;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-700);
  border-radius: var(--rounded);
  transition: all 0.3s var(--ease-out);
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--red-700);
}

.nav__item--has-menu:hover .nav__link {
  color: var(--red-700);
}

.nav__caret {
  margin-left: 0.25rem;
  width: 10px;
  height: 10px;
  opacity: 0.6;
  transition: transform 0.3s var(--ease-out);
}

.nav__item--has-menu:hover .nav__caret {
  transform: rotate(180deg);
}

.nav__submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 200px;
  background: #FFFFFF;
  border-radius: var(--rounded-md);
  border: 1px solid var(--ink-200);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s var(--ease-out);
}

.nav__item--has-menu:hover .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(4px);
}

.nav__submenu a {
  display: block;
  padding: 0.625rem 1rem;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  border-radius: var(--rounded-sm);
}

.nav__submenu a:hover {
  background: var(--red-50);
  color: var(--red-700);
}

.nav__cta {
  flex-shrink: 0;
}

.nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--rounded);
  background: var(--ink-100);
  align-items: center;
  justify-content: center;
}

.nav__toggle svg {
  width: 20px;
  height: 20px;
  stroke: var(--ink-800);
}

/* Mobile menu */
@media (max-width: 1024px) {
  .nav__menu,
  .nav__cta .btn {
    display: none;
  }
  .nav__toggle {
    display: flex;
  }
  .nav__toggle .nav__toggle-close {
    display: none;
  }
  .nav__toggle[aria-expanded="true"] .nav__toggle-open {
    display: none;
  }
  .nav__toggle[aria-expanded="true"] .nav__toggle-close {
    display: block;
  }
}

@media (min-width: 1025px) {
  .nav__mobile-menu {
    display: none;
  }
}

/* 移动端抽屉菜单：贴合 fixed 头部底边向下滑出 */
.nav__mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 76px);
  max-height: calc(100dvh - 76px); /* iOS Safari 地址栏收展时跟随可视高度 */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #FFFFFF; /* 纯色背景：规避 WebKit backdrop-filter + fixed 层级下的重绘 bug */
  border-bottom: 1px solid var(--ink-200);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  /* 打开时 visibility 零延迟立即显示；关闭时等淡出动画结束后再隐藏，
     不依赖「离散属性 50% 翻转」规则（旧 WebKit 实现有 bug 会导致菜单打不开） */
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0s linear 0.35s;
}

.nav__mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.nav__mobile-menu-inner {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--container-pad, 1.5rem) var(--space-5);
}

.nav__mobile-link {
  display: flex;
  align-items: center;
  padding: 0.875rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-800);
  border-bottom: 1px solid var(--ink-100);
}

.nav__mobile-link.is-active {
  color: var(--red-700);
}

.nav__mobile-group .nav__mobile-link {
  border-bottom: none;
  padding-bottom: 0.5rem;
}

.nav__mobile-sublinks {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--ink-100);
  padding-bottom: var(--space-2);
}

.nav__mobile-sublinks a {
  padding: 0.5rem 0 0.5rem var(--space-4);
  font-size: var(--fs-sm);
  color: var(--ink-600);
}

.nav__mobile-cta {
  margin-top: var(--space-4);
  justify-content: center;
}

/* ----- Hero ----- */
.hero {
  position: relative;
  padding: 10rem 0 6rem;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(251, 146, 60, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 60%, rgba(185, 28, 28, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFBFB 60%);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(185, 28, 28, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185, 28, 28, 0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 40%, transparent 100%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 1rem;
  background: #FFFFFF;
  border: 1px solid var(--red-200);
  border-radius: var(--rounded-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--red-700);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.hero__eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-600);
  animation: wing-pulse 2s ease-in-out infinite;
}

.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.75rem, 6.5vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink-900);
}

.hero__title .accent {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}

.hero__title .accent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 4px;
  background: var(--gradient-brand);
  opacity: 0.2;
  border-radius: var(--rounded-full);
}

.hero__subtitle {
  margin-top: var(--space-6);
  font-size: var(--fs-lg);
  color: var(--ink-600);
  max-width: 540px;
  line-height: 1.7;
}

.hero__cta {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

.hero__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px dashed var(--ink-200);
}

.metric__value {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--red-700);
  line-height: 1;
}

.metric__label {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--ink-500);
  letter-spacing: var(--tracking-wide);
}

/* Hero 视觉 */
.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1.05;
}

.hero__visual-main {
  position: absolute;
  inset: 0;
  border-radius: var(--rounded-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.22), rgba(185, 28, 28, 0.18));
  isolation: isolate;
  z-index: 0;
}

.hero__visual-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  mix-blend-mode: normal;
  animation: slow-zoom 20s ease-in-out infinite alternate;
}

/* 红色色调罩层：覆盖在图片上方，强度适中 */
.hero__visual-main::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.32) 0%, rgba(220, 38, 38, 0.40) 60%, rgba(185, 28, 28, 0.46) 100%);
  mix-blend-mode: multiply;
  opacity: 0.72;
  pointer-events: none;
}

.hero__visual-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, transparent 40%, rgba(127, 29, 29, 0.45) 100%);
}

.hero__visual-text {
  position: absolute;
  bottom: var(--space-6);
  left: var(--space-6);
  right: var(--space-6);
  color: #FFFFFF;
  z-index: 3;
}

.hero__visual-text strong {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.3;
}

.hero__visual-text span {
  font-size: var(--fs-sm);
  opacity: 0.8;
  display: block;
  margin-top: var(--space-2);
}

.hero__floating-card {
  position: absolute;
  top: 1.5rem;
  right: -1rem;
  padding: 1rem 1.25rem;
  background: #FFFFFF;
  border-radius: var(--rounded-md);
  box-shadow: var(--shadow-lg);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  animation: float 6s ease-in-out infinite;
}

.hero__floating-card .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #10B981;
  position: relative;
}

.hero__floating-card .dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #10B981;
  opacity: 0.4;
  animation: wing-pulse 1.8s ease-in-out infinite;
}

.hero__floating-card div {
  font-size: var(--fs-sm);
}

.hero__floating-card strong {
  display: block;
  font-weight: 600;
  color: var(--ink-900);
}

.hero__floating-card small {
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

.hero__floating-stat {
  position: absolute;
  bottom: 2rem;
  left: -2rem;
  padding: 1rem 1.25rem;
  background: var(--ink-900);
  color: #FFFFFF;
  border-radius: var(--rounded-md);
  box-shadow: var(--shadow-lg);
  z-index: 3;
  animation: float 7s ease-in-out infinite -3s;
}

.hero__floating-stat strong {
  display: block;
  font-size: var(--fs-2xl);
  font-family: var(--font-serif);
  color: var(--brand-orange);
  line-height: 1;
}

.hero__floating-stat span {
  font-size: var(--fs-xs);
  opacity: 0.7;
  letter-spacing: var(--tracking-wide);
}

@media (max-width: 1024px) {
  .hero {
    padding: 7rem 0 4rem;
  }
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
  .hero__visual {
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .hero__floating-card,
  .hero__floating-stat {
    display: none;
  }
  .hero__metrics {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .hero__metrics {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* ----- Eagle Wing SVG decorative pattern ----- */
.wing-pattern {
  position: absolute;
  opacity: 0.06;
  color: var(--red-900);
  pointer-events: none;
}

.wing-pattern--top-right {
  top: -40px;
  right: -40px;
  width: 220px;
  height: 220px;
  transform: rotate(-15deg);
}

.wing-pattern--bottom-left {
  bottom: -60px;
  left: -60px;
  width: 280px;
  height: 280px;
  transform: rotate(155deg);
}

/* ----- Section Header ----- */
.section-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.section-header.section-header--left {
  text-align: left;
}

.section-header__intro {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--red-700);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.section-header--left .section-header__intro {
  justify-content: flex-start;
}

.section-header__intro::before,
.section-header__intro::after {
  content: '';
  width: 32px;
  height: 1.5px;
  background: var(--red-700);
  opacity: 0.5;
}

.section-header__title {
  font-family: var(--font-serif);
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.section-header__subtitle {
  margin: var(--space-4) auto 0;
  max-width: 80ch;
  font-size: var(--fs-lg);
  color: var(--ink-600);
  text-wrap: wrap;
}

/* ----- Product Cards ----- */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
}

.product-card {
  position: relative;
  padding: var(--space-10);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--ink-50) 100%);
  border: 1px solid var(--ink-200);
  border-radius: var(--rounded-xl);
  overflow: hidden;
  transition: all 0.5s var(--ease-out);
  display: flex;
  flex-direction: column;
  min-height: 480px;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(185, 28, 28, 0.2);
  border-color: var(--red-200);
}

.product-card--featured {
  background: linear-gradient(180deg, var(--ink-900) 0%, #2D0808 100%);
  color: #FFFFFF;
  border-color: transparent;
}

.product-card--featured h3,
.product-card--featured strong {
  color: #FFFFFF;
}

.product-card--featured p {
  color: rgba(255, 255, 255, 0.7);
}

.product-card__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--rounded-md);
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
  position: relative;
}

.product-card__icon svg {
  width: 32px;
  height: 32px;
  color: #FFFFFF;
}

.product-card--featured .product-card__icon {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.product-card__tag {
  display: inline-flex;
  padding: 0.375rem 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--red-700);
  background: var(--red-50);
  border-radius: var(--rounded-full);
  margin-bottom: var(--space-3);
  align-self: flex-start;
}

.product-card--featured .product-card__tag {
  background: var(--gradient-brand);
  color: #FFFFFF;
}

.product-card h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

.product-card h3 small {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-500);
  margin-top: var(--space-2);
  letter-spacing: var(--tracking-wide);
}

.product-card--featured h3 small {
  color: rgba(255, 255, 255, 0.5);
}

.product-card__desc {
  font-size: var(--fs-base);
  line-height: 1.7;
  margin: var(--space-4) 0 var(--space-6);
}

.product-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  flex-grow: 1;
}

.product-card__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--ink-600);
}

.product-card--featured .product-card__features li {
  color: rgba(255, 255, 255, 0.8);
}

.product-card__features li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background: var(--red-700);
  border-radius: 50%;
  background-image:
    radial-gradient(circle at 50% 50%, #FFFFFF 30%, transparent 35%),
    linear-gradient(135deg, var(--brand-orange), var(--red-700));
  position: relative;
}

.product-card__features li svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--brand-orange);
}

.product-card__features--dark li svg {
  color: var(--brand-orange);
}

.product-card__footer {
  padding-top: var(--space-6);
  border-top: 1px dashed var(--ink-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-card--featured .product-card__footer {
  border-top-color: rgba(255, 255, 255, 0.15);
}

.product-card__cta {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--red-700);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.product-card--featured .product-card__cta {
  color: var(--brand-orange);
}

.product-card__cta::after {
  content: '→';
  transition: transform 0.3s var(--ease-out);
}

.product-card:hover .product-card__cta::after {
  transform: translateX(4px);
}

.product-card__media {
  position: absolute;
  bottom: -20px;
  right: -20px;
  opacity: 0.08;
  width: 240px;
  height: 240px;
  pointer-events: none;
}

.product-card__media svg {
  width: 100%;
  height: 100%;
  color: var(--red-900);
}

.product-card--featured .product-card__media {
  opacity: 0.15;
  color: var(--brand-orange);
}

/* ----- Footer ----- */
.site-footer {
  background: var(--ink-900);
  color: var(--ink-300);
  padding: var(--space-16) 0 var(--space-8);
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-brand);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

@media (max-width: 768px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
  /* 手机端隐藏冗余导航栏（抽屉菜单已覆盖），保留品牌、联系方式与底部备案 */
  .footer__grid > div:nth-child(2),
  .footer__grid > div:nth-child(3) {
    display: none;
  }
}

@media (max-width: 480px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

.footer__brand-block {
  max-width: 360px;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.footer__logo img {
  height: 36px;
}

.footer__logo-text {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: #FFFFFF;
}

.footer__tagline {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.3;
  margin-bottom: var(--space-4);
}

.footer__tagline small {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  margin-top: var(--space-2);
  letter-spacing: 0.1em;
}

.footer__desc {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.footer__heading {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-5);
  text-transform: uppercase;
}

.footer__list li {
  margin-bottom: var(--space-3);
}

.footer__list a {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s var(--ease-out);
}

.footer__list a:hover {
  color: var(--brand-orange);
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-3);
  line-height: 1.5;
}

.footer__contact-item svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--brand-orange);
  margin-top: 2px;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.4);
}

.footer__qr {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.footer__qr img {
  width: 64px;
  height: 64px;
  border-radius: var(--rounded-sm);
  background: #FFFFFF;
  padding: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.footer__qr span {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.footer__bottom-right {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.footer__bottom-links {
  display: flex;
  gap: var(--space-6);
}

.footer__bottom-links a:hover {
  color: var(--brand-orange);
}

/* ----- About Page ----- */
.about-hero {
  padding: 12rem 0 4rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(185, 28, 28, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, #FFFAF5 0%, #FFFFFF 100%);
  text-align: center;
  position: relative;
}

.about-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-200), transparent);
}

.about-tabs {
  position: sticky;
  top: 76px;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ink-200);
  margin-bottom: var(--space-8);
}

.about-tabs__list {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.about-tabs__list::-webkit-scrollbar {
  display: none;
}

.about-tab {
  padding: 0.625rem 1.25rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-600);
  border-radius: var(--rounded-full);
  white-space: nowrap;
  transition: all 0.3s var(--ease-out);
}

.about-tab:hover {
  color: var(--red-700);
  background: var(--red-50);
}

.about-tab.is-active {
  background: var(--red-700);
  color: #FFFFFF;
}

@media (max-width: 768px) {
  .about-tabs {
    top: 60px;
  }
}

/* Stats Strip */
.stats-strip {
  background: var(--gradient-deep);
  color: #FFFFFF;
  padding: var(--space-12) 0;
  position: relative;
  overflow: hidden;
}

.stats-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.5;
  pointer-events: none;
}

.stats-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .stats-strip__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

.stat-cell {
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 var(--space-4);
}

.stat-cell:last-child {
  border-right: none;
}

@media (max-width: 768px) {
  .stat-cell:nth-child(2) {
    border-right: none;
  }
  .stat-cell {
    padding: 0 var(--space-2);
  }
}

.stat-cell__value {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  background: linear-gradient(180deg, #FFFFFF 0%, #FECACA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

.stat-cell__suffix {
  font-size: 0.5em;
  color: var(--brand-orange);
  vertical-align: top;
}

.stat-cell__label {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: var(--tracking-wide);
}

/* ----- Timeline ----- */
.timeline {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding-left: var(--space-12);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--red-700) 0%, var(--brand-orange) 100%);
}

.timeline-item {
  position: relative;
  padding-bottom: var(--space-12);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -1.625rem;
  top: 0.5rem;
  width: 16px;
  height: 16px;
  background: #FFFFFF;
  border: 3px solid var(--red-700);
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--red-50);
}

.timeline-item__year {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--gradient-brand);
  color: #FFFFFF;
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  font-weight: 700;
  border-radius: var(--rounded-sm);
  margin-bottom: var(--space-3);
}

.timeline-item__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: var(--space-2);
}

.timeline-item__desc {
  font-size: var(--fs-base);
  color: var(--ink-600);
  line-height: 1.7;
  max-width: 600px;
}

/* ----- Team Grid ----- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

.team-card {
  background: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--rounded-lg);
  padding: var(--space-6);
  text-align: center;
  transition: all 0.3s var(--ease-out);
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--red-200);
}

.team-card__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--gradient-brand);
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: #FFFFFF;
}

.team-card--featured .team-card__avatar {
  width: 140px;
  height: 140px;
  font-size: 3.5rem;
}

.team-card__name {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink-900);
}

.team-card__role {
  font-size: var(--fs-sm);
  color: var(--red-700);
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
}

.team-card__bio {
  font-size: var(--fs-sm);
  color: var(--ink-600);
  line-height: 1.6;
}

.team-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  justify-content: center;
  margin-top: var(--space-3);
}

.team-card__tag {
  padding: 0.125rem 0.5rem;
  font-size: var(--fs-xs);
  color: var(--ink-700);
  background: var(--ink-100);
  border-radius: var(--rounded-sm);
}

/* ----- Culture values ----- */
.culture-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .culture-grid {
    grid-template-columns: 1fr;
  }
}

.culture-card {
  position: relative;
  padding: var(--space-8);
  background: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--rounded-lg);
  text-align: center;
  transition: all 0.4s var(--ease-out);
  overflow: hidden;
}

.culture-card:hover {
  border-color: var(--red-300);
  transform: translateY(-4px);
}

.culture-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-brand);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}

.culture-card:hover::before {
  opacity: 1;
}

.culture-card__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--red-50);
  color: var(--red-700);
}

.culture-card__icon svg {
  width: 28px;
  height: 28px;
}

.culture-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.culture-card__desc {
  font-size: var(--fs-sm);
  color: var(--ink-600);
  line-height: 1.7;
}

/* ----- Advantages ----- */
.advantages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

@media (max-width: 1024px) {
  .advantages-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

.advantage-card {
  position: relative;
  padding: var(--space-10);
  background: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--rounded-lg);
  overflow: hidden;
  transition: all 0.5s var(--ease-out);
}

.advantage-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--red-50) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}

.advantage-card:hover::before {
  opacity: 1;
}

.advantage-card__num {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 4rem;
  font-weight: 700;
  color: var(--red-100);
  line-height: 1;
  letter-spacing: -0.05em;
  margin-bottom: var(--space-4);
  position: relative;
}

.advantage-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
  position: relative;
}

.advantage-card__list {
  position: relative;
}

.advantage-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--fs-sm);
  color: var(--ink-600);
  border-top: 1px dashed var(--ink-200);
}

.advantage-card__list li:first-child {
  border-top: none;
}

.advantage-card__list li::before {
  content: '';
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--red-600);
  flex-shrink: 0;
}

/* ----- News ----- */
.news-page-hero {
  padding: 12rem 0 4rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(185, 28, 28, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, #FFFAF5 0%, #FFFFFF 100%);
  text-align: center;
}

.news-tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-12);
  flex-wrap: wrap;
}

.news-tab {
  padding: 0.625rem 1.25rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-600);
  border: 1px solid var(--ink-200);
  border-radius: var(--rounded-full);
  transition: all 0.3s var(--ease-out);
}

.news-tab.is-active,
.news-tab:hover {
  background: var(--red-700);
  border-color: var(--red-700);
  color: #FFFFFF;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1024px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}

.news-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--rounded-lg);
  overflow: hidden;
  transition: all 0.3s var(--ease-out);
  display: flex;
  flex-direction: column;
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.news-card__image {
  aspect-ratio: 16 / 9;
  background: var(--gradient-brand);
  position: relative;
  overflow: hidden;
}

.news-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.news-card__image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink-900);
  opacity: 0.5;
}

.news-card__image-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: 0.1em;
  z-index: 2;
}

.news-card__category {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: var(--space-3);
  padding: 0.25rem 0.625rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  background: var(--red-700);
  color: #FFFFFF;
  border-radius: var(--rounded-sm);
}

.news-card__body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-card__date {
  font-size: var(--fs-xs);
  color: var(--ink-400);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-3);
}

.news-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-900);
  margin-bottom: var(--space-3);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card:hover .news-card__title {
  color: var(--red-700);
}

.news-card__excerpt {
  font-size: var(--fs-sm);
  color: var(--ink-500);
  line-height: 1.6;
  margin-bottom: var(--space-4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--red-700);
  margin-top: auto;
}

.news-card__read-more::after {
  content: '→';
  transition: transform 0.3s var(--ease-out);
}

.news-card:hover .news-card__read-more::after {
  transform: translateX(4px);
}

/* ----- Job / Recruitment ----- */
.join-hero {
  padding: 12rem 0 4rem;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(185, 28, 28, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(251, 146, 60, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #FFFAF5 0%, #FFFFFF 100%);
  text-align: center;
}

.track-switch {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--space-12);
  background: var(--ink-100);
  padding: var(--space-1);
  border-radius: var(--rounded-full);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.track-switch__btn {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-600);
  border-radius: var(--rounded-full);
  transition: all 0.3s var(--ease-out);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.track-switch__btn.is-active {
  background: var(--gradient-brand);
  color: #FFFFFF;
  box-shadow: var(--shadow-red);
}

.job-card {
  background: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--rounded-lg);
  padding: var(--space-8);
  transition: all 0.3s var(--ease-out);
}

.job-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--red-200);
}

.job-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px dashed var(--ink-200);
  gap: var(--space-4);
}

.job-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: var(--space-2);
}

.job-card__meta {
  display: flex;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--ink-500);
  flex-wrap: wrap;
}

.job-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.job-card__meta svg {
  width: 14px;
  height: 14px;
}

.job-card__type {
  flex-shrink: 0;
  padding: 0.375rem 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--red-50);
  color: var(--red-700);
  border-radius: var(--rounded-full);
  letter-spacing: var(--tracking-wide);
}

.job-card__section {
  margin-bottom: var(--space-5);
}

.job-card__section-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: var(--space-3);
}

.job-card__section-label::before {
  content: '';
  width: 4px;
  height: 16px;
  background: var(--gradient-brand);
  border-radius: var(--rounded-sm);
}

.job-card__list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--ink-600);
  line-height: 1.7;
  margin-bottom: var(--space-2);
}

.job-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-500);
}

.job-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px dashed var(--ink-200);
}

.job-card__email {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-700);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.job-card__email svg {
  width: 16px;
  height: 16px;
  color: var(--red-700);
}

/* Benefits Grid */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .benefits-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .benefits-grid {
    grid-template-columns: 1fr;
  }
}

.benefit-pill {
  position: relative;
  padding: var(--space-5);
  background: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--rounded-md);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: all 0.3s var(--ease-out);
}

.benefit-pill:hover {
  border-color: var(--red-300);
  background: var(--red-50);
  transform: translateY(-2px);
}

.benefit-pill__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--rounded);
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.benefit-pill__icon svg {
  width: 18px;
  height: 18px;
  color: #FFFFFF;
}

.benefit-pill__name {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink-900);
  display: block;
}

.benefit-pill__desc {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  display: block;
  margin-top: 2px;
}

/* ----- Contact Page ----- */
.contact-hero {
  padding: 12rem 0 4rem;
  background:
    linear-gradient(180deg, rgba(15,15,25,0.80) 0%, rgba(35,15,20,0.90) 100%),
    url(../images/office/hero-towers.jpg) center/cover no-repeat;
  color: #FFFFFF;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.contact-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(251, 146, 60, 0.15) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 60%, rgba(185, 28, 28, 0.25) 0%, transparent 50%);
  pointer-events: none;
}

.contact-hero__inner {
  position: relative;
  z-index: 2;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
}

.contact-visual {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.contact-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-6);
  background: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--rounded-lg);
  transition: all 0.3s var(--ease-out);
}

.contact-item:hover {
  border-color: var(--red-200);
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}

.contact-item__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--red-50);
  border-radius: var(--rounded-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red-700);
}

.contact-item__icon svg {
  width: 22px;
  height: 22px;
}

.contact-item__body {
  flex: 1;
}

.contact-item__label {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: var(--space-2);
}

.contact-item__value {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.4;
}

.contact-item__value small {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink-500);
  margin-top: var(--space-1);
}

.map-card {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--rounded-lg);
  overflow: hidden;
  background: var(--ink-100);
  box-shadow: var(--shadow-md);
}

.map-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-card--towers {
  aspect-ratio: 4 / 3;
  max-height: 420px;
}

.map-card--towers .map-card__img {
  object-position: center 30%;
  filter: saturate(0.9) contrast(1.05) brightness(0.95);
}

.map-card--towers::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(185, 28, 28, 0.18) 0%, transparent 45%),
    linear-gradient(225deg, rgba(30, 58, 138, 0.18) 0%, transparent 45%),
    linear-gradient(180deg, transparent 50%, rgba(10, 6, 12, 0.55) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.map-card--towers .map-card__overlay {
  z-index: 2;
}

.map-card__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

.map-card__pin svg {
  width: 40px;
  height: 40px;
  color: var(--red-700);
  filter: drop-shadow(0 4px 12px rgba(185, 28, 28, 0.4));
}

.map-card__pin span {
  background: var(--red-700);
  color: #FFFFFF;
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--rounded-sm);
  white-space: nowrap;
}

.map-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-6);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.7));
  color: #FFFFFF;
}

.map-card__overlay h5 {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  color: #FFFFFF;
  margin-bottom: var(--space-1);
}

.map-card__overlay p {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.8);
}

.map-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.map-stats > div {
  padding: var(--space-4);
  background: var(--ink-50);
  border-radius: var(--rounded-md);
  text-align: center;
}

.map-stats > div > div:first-child {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  color: var(--red-700);
  font-weight: 700;
}

.map-stats > div > div:last-child {
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

@media (max-width: 480px) {
  .map-stats { grid-template-columns: repeat(3, 1fr); }
  .map-stats > div { padding: var(--space-3); }
  .map-stats > div > div:first-child { font-size: var(--fs-lg); }
}

/* ----- Media matrix on contact page ----- */
.platform-card {
  background: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--rounded-md);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  transition: all 0.3s var(--ease-out);
}

.platform-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--red-200);
}

.platform-card__logo {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--rounded);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #FFFFFF;
}

.platform-card__logo svg {
  width: 22px;
  height: 22px;
}

.platform-card--douyin .platform-card__logo { background: #000; }
.platform-card--kuaishou .platform-card__logo { background: #FF4907; }
.platform-card--wechat .platform-card__logo { background: #04BE02; }

.platform-card__body {
  flex: 1;
  min-width: 0;
}

.platform-card__title {
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--ink-900);
  line-height: 1.3;
}

.platform-card__title small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-500);
  font-weight: 400;
  margin-top: 4px;
}

.platform-card__qr {
  width: 56px;
  height: 56px;
  background: var(--ink-100);
  border-radius: var(--rounded-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--ink-400);
  flex-shrink: 0;
  border: 1px dashed var(--ink-300);
}

/* ==========================================================================
   新增：首页全屏轮播、本翼产品 Tab、私募基金占位
   ========================================================================== */

/* ----- Hero 全屏轮播 ----- */
.hero-carousel {
  position: relative;
  height: 100vh;
  min-height: 640px;
  max-height: 1080px;
  overflow: hidden;
  background: var(--ink-900);
  transition: opacity 0.4s ease;
}

.hero-carousel__slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s var(--ease-in-out), visibility 1s;
  z-index: 1;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hero-slide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  filter: brightness(0.88) saturate(0.9) contrast(1.05);
}

.hero-slide.is-active .hero-slide__img {
  animation: heroKenBurns 6.5s ease-out forwards;
}

@keyframes heroKenBurns {
  from { transform: scale(1.05) translate(0, 0); }
  to { transform: scale(1.15) translate(-1.5%, -1%); }
}

.hero-slide__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(5, 3, 8, 0.12);
  pointer-events: none;
}

.hero-slide__content {
  position: relative;
  z-index: 10;
  align-self: flex-start;
  margin-top: 64vh;
  padding: var(--space-6) var(--space-8);
  color: #FFFFFF;
  max-width: 720px;
}

.hero-slide__content--right {
  position: absolute;
  left: auto;
  right: var(--container-pad);
  top: 64vh;
  margin-top: 0;
  text-align: right;
}

.hero-slide__content--right .hero-slide__cta {
  justify-content: flex-end;
}

/* 标题已烧入轮播图，HTML 层隐藏避免重影；保留按钮用于交互 */
.hero-slide__eyebrow,
.hero-slide__title,
.hero-slide__subtitle {
  display: none;
}

.hero-slide__cta {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

/* 文字始终可见（取消淡入，避免初始状态不显示） */
.hero-slide__content > * {
  opacity: 1;
  transform: translateY(0);
}

.hero-slide.is-active .hero-slide__content > * {
  opacity: 1;
  transform: translateY(0);
}

/* 轮播控制 */
.hero-carousel__dots {
  position: absolute;
  left: var(--container-pad);
  bottom: var(--space-8);
  z-index: 10;
  display: flex;
  gap: var(--space-3);
}

.hero-carousel__dot {
  width: 40px;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--rounded-full);
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
}

.hero-carousel__dot.is-active {
  width: 64px;
  background: var(--brand-orange);
}

.hero-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  backdrop-filter: blur(4px);
}

.hero-carousel__arrow:hover {
  background: rgba(255, 255, 255, 0.25);
}

.hero-carousel__arrow svg {
  width: 20px;
  height: 20px;
}

.hero-carousel__arrow--prev { left: var(--container-pad); }
.hero-carousel__arrow--next { right: var(--container-pad); }

.hero-carousel__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 10;
}

.hero-carousel__progress-bar {
  height: 100%;
  width: 0%;
  background: var(--gradient-brand);
  transition: width 0.1s linear;
}

/* ----- Hero 防闪烁 + 背景视频模式（后台「首页配置」） ----- */
.hero-pending .hero-carousel {
  opacity: 0;
}

.hero-carousel--video .hero-carousel__slides,
.hero-carousel--video .hero-carousel__dots,
.hero-carousel--video .hero-carousel__progress,
.hero-carousel--video .hero-carousel__arrow {
  display: none;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--ink-900);
  cursor: pointer; /* 点击视频区域切换播放/暂停 */
}

.hero-video__media {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 完整展示整幅画面：宽于 16:9 的屏幕左右留边，窄于的上下留边，底色融合 */
  filter: brightness(0.88) saturate(0.9) contrast(1.05);
}

.hero-video__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(5, 3, 8, 0.12);
  pointer-events: none;
}

.hero-video__sound {
  position: absolute;
  right: var(--container-pad);
  bottom: 32px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(5, 3, 8, 0.35);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.hero-video__sound:hover {
  background: rgba(5, 3, 8, 0.6);
}

.hero-video__sound svg {
  width: 20px;
  height: 20px;
}

/* 中央播放按钮：暂停时显示，播放中淡出（点击画面可再暂停） */
.hero-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(5, 3, 8, 0.35);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s, opacity 0.2s;
}

.hero-video__play:hover {
  background: rgba(5, 3, 8, 0.6);
  transform: translate(-50%, -50%) scale(1.06);
}

.hero-video__play svg {
  width: 30px;
  height: 30px;
  margin-left: 3px; /* 三角形光学居中 */
}

.hero-video.is-playing .hero-video__play {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .hero-carousel {
    min-height: 560px;
  }
  .hero-video__play {
    width: 64px;
    height: 64px;
  }
  .hero-video__play svg {
    width: 26px;
    height: 26px;
  }
  .hero-slide__content {
    margin-top: 58vh;
    padding-top: 0;
    justify-content: flex-start;
  }
  .hero-carousel__arrow {
    display: none;
  }
  .hero-carousel__dots {
    left: var(--container-pad);
    right: var(--container-pad);
    justify-content: center;
  }
}

/* ----- 本翼产品 Tab ----- */
.product-tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-12);
  flex-wrap: wrap;
}

.product-tab {
  padding: 0.75rem 1.5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-600);
  background: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--rounded-full);
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
}

.product-tab:hover {
  border-color: var(--red-300);
  color: var(--red-700);
}

.product-tab.is-active {
  background: var(--gradient-brand);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: var(--shadow-red);
}

.product-panel {
  display: none;
}

.product-panel.is-active {
  display: block;
  animation: fadeIn 0.5s var(--ease-out);
}

.private-fund-placeholder {
  text-align: center;
  padding: var(--space-20) var(--space-8);
  background: var(--ink-50);
  border: 1px dashed var(--ink-300);
  border-radius: var(--rounded-xl);
}

.private-fund-placeholder svg {
  width: 64px;
  height: 64px;
  color: var(--red-700);
  margin: 0 auto var(--space-6);
}

.private-fund-placeholder h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  color: var(--ink-900);
  margin-bottom: var(--space-3);
}

.private-fund-placeholder p {
  color: var(--ink-500);
  max-width: 480px;
  margin: 0 auto;
}

/* ===== 私募基金产品卡片 ===== */
.private-fund-intro {
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: var(--ink-600);
  max-width: 760px;
  margin-bottom: var(--space-8);
}

.fund-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

@media (max-width: 768px) {
  .fund-grid { grid-template-columns: 1fr; }
}

.fund-card {
  background: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--rounded-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.fund-card:hover {
  border-color: var(--red-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.fund-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.fund-card__type {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--red-700);
  background: var(--red-100);
  border-radius: var(--rounded-full);
}

.fund-card__no {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-xs);
  color: var(--ink-400);
  letter-spacing: 0.05em;
}

.fund-card__name {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-900);
  margin-bottom: var(--space-5);
}

.fund-card__meta {
  display: flex;
  gap: var(--space-8);
  margin: auto 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--ink-100);
}

.fund-card__meta dt {
  font-size: var(--fs-xs);
  color: var(--ink-400);
  letter-spacing: var(--tracking-wide);
  margin-bottom: 2px;
}

.fund-card__meta dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-700);
}

/* Agent 专栏增强 */
#agent-column .news-card__image-text {
  letter-spacing: 0.1em;
}

/* ============ 资质荣誉 · 证书分组轨道 ============ */

.qual-track-wrap {
  margin-top: var(--space-12);
}

.qual-track-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--ink-200);
  margin-bottom: var(--space-5);
}

.qual-track-head__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.qual-track-head__count {
  display: inline-block;
  padding: 0.15rem 0.625rem;
  background: var(--red-100);
  color: var(--red-700);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--rounded-full);
}

.qual-track-head__sub {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

.qual-track {
  position: relative;
}

.qual-track__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-300) transparent;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.qual-track__viewport::-webkit-scrollbar { height: 6px; }
.qual-track__viewport::-webkit-scrollbar-track { background: transparent; }
.qual-track__viewport::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 3px; }

.qual-track__list {
  list-style: none;
  margin: 0;
  padding: var(--space-2) var(--space-1) var(--space-4);
  display: flex;
  gap: var(--space-4);
  flex-wrap: nowrap;
}

.qual-card {
  flex: 0 0 auto;
  width: 180px;
  scroll-snap-align: start;
}

.qual-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.qual-card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--rounded-md);
  overflow: hidden;
  background: linear-gradient(135deg, #FAF7F2 0%, #F0E9DE 100%);
  border: 1px solid var(--ink-200);
  box-shadow: var(--shadow);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.3s var(--ease-out);
}

.qual-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}

.qual-card__link:hover .qual-card__img {
  border-color: var(--red-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.qual-card__link:hover .qual-card__img img {
  transform: scale(1.04);
}

.qual-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(185, 28, 28, 0);
  border-radius: var(--rounded-md);
  pointer-events: none;
  transition: background 0.3s var(--ease-out);
  top: 0;
  height: auto;
  aspect-ratio: 3/4;
  display: none;
}

.qual-card__label {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-700);
  text-align: center;
  padding: 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.6em;
}

.qual-card--patent .qual-card__img {
  border-color: var(--red-300);
}

/* 横屏证书/备案（双软、备案图等）——按 3:2 横屏展示，object-fit: contain 完整显示 */
.qual-card--landscape {
  width: 360px;
}
.qual-card--landscape .qual-card__img {
  aspect-ratio: 3 / 2;
  background: var(--ink-100);
}
.qual-card--landscape .qual-card__img img {
  object-fit: contain;
  padding: 0;
}

.qual-card__badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: 0.15rem 0.5rem;
  background: var(--red-700);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: var(--rounded-sm);
  z-index: 2;
}

/* 箭头按钮 */
.qual-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-65%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--ink-200);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-700);
  z-index: 3;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  padding: 0;
}

.qual-arrow svg {
  width: 18px;
  height: 18px;
}

.qual-arrow:hover {
  background: var(--red-700);
  color: #FFFFFF;
  border-color: var(--red-700);
}

.qual-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink-400);
}

.qual-arrow--prev { left: -10px; }
.qual-arrow--next { right: -10px; }

/* Lightbox */
.qual-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(5, 3, 8, 0.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}

.qual-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.qual-lightbox__figure {
  margin: 0;
  max-width: min(900px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.qual-lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--rounded-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.qual-lightbox__caption {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  color: #FFFFFF;
  text-align: center;
  letter-spacing: 0.02em;
}

.qual-lightbox__close,
.qual-lightbox__nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  padding: 0;
}

.qual-lightbox__close:hover,
.qual-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.05);
}

.qual-lightbox__close svg,
.qual-lightbox__nav svg {
  width: 22px;
  height: 22px;
}

.qual-lightbox__close { top: var(--space-6); right: var(--space-6); }
.qual-lightbox__nav--prev { left: var(--space-6); top: 50%; transform: translateY(-50%); }
.qual-lightbox__nav--next { right: var(--space-6); top: 50%; transform: translateY(-50%); }
.qual-lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.05); }
.qual-lightbox__nav--next:hover { transform: translateY(-50%) scale(1.05); }

/* 响应式 */
@media (max-width: 768px) {
  .qual-card { width: 150px; }
  .qual-card--landscape { width: 280px; }
  .qual-card--landscape .qual-card__img { aspect-ratio: 16 / 10; }
  .qual-track-head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .qual-arrow { width: 38px; height: 38px; }
  .qual-arrow--prev { left: 4px; }
  .qual-arrow--next { right: 4px; }
  .qual-lightbox__nav--prev { left: var(--space-3); }
  .qual-lightbox__nav--next { right: var(--space-3); }
  .qual-lightbox__close { top: var(--space-3); right: var(--space-3); }
}

@media (max-width: 480px) {
  .qual-card { width: 130px; }
  .qual-card--landscape { width: 240px; }
  .qual-track__list { gap: var(--space-3); }
}

/* 现有 4 格统计的响应式（保留） */
@media (max-width: 768px) {
  .qualifications-grid { grid-template-columns: 1fr 1fr !important; }
  #about .about-grid { grid-template-columns: 1fr !important; gap: var(--space-12) !important; }
}

@media (max-width: 480px) {
  .qualifications-grid { grid-template-columns: 1fr !important; }
}