/* ===== Inter 本地字体（避免 Google Fonts 加载失败）===== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./assets/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./assets/fonts/inter-700.woff2') format('woff2');
}
/*
Theme Name: Nuomi
Theme URI: https://nuomi.com
Author: Nuomi Team
Author URI: https://nuomi.com
Description: 1:1 澶嶅埢 NEUTRL Studio 椋庢牸鐨勭朝绫冲畼鏂逛富棰?Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nuomi
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ===================================
   璁捐绯荤粺 Tokens
   =================================== */

:root {
  /* 棰滆壊绯荤粺 */
  --bg-primary: #F0EFEB;
  --bg-secondary: #FAF5E8;
  --bg-white: #FFFFFF;
  
  --text-primary: rgba(0, 0, 0, 0.8);
  --text-secondary: rgba(0, 0, 0, 0.5);
  --text-tertiary: rgba(0, 0, 0, 0.6);
  --text-link: #882D17;
  --text-white: #FFFFFF;
  
  --accent-cta: #FF385C;
  
  /* 娓愬彉鑹插僵 */
  --gradient-1: #F5645A;
  --gradient-2: #FF9D7E;
  --gradient-3: #FFD4A6;
  --gradient-4: #FFEEC8;
  
  /* 杈规 */
  --border-light: rgba(0, 0, 0, 0.1);
  
  /* 閫忔槑鑹?*/
  --black-alpha-60: rgba(0, 0, 0, 0.6);
  --black-alpha-10: rgba(0, 0, 0, 0.1);
  --white-alpha-20: rgba(255, 255, 255, 0.2);
  --white-alpha-70: rgba(255, 255, 255, 0.7);
  --white-alpha-90: rgba(255, 255, 255, 0.9);
  
  /* 瀛椾綋绯荤粺 */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* 瀛楀彿 */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3rem;
  
  /* 闂磋窛 */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  
  /* 鍦嗚 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  
  /* 闃村奖 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  /* 杩囨浮 */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
}

/* ===================================
   鍩虹閲嶇疆
   =================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-cta);
}

/* ===================================
   鎺掔増
   =================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p {
  margin-bottom: 1rem;
}

/* ===================================
   鎸夐挳
   =================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

.btn-primary {
  background-color: var(--accent-cta);
  color: var(--text-white);
}

.btn-primary:hover {
  background-color: #e62e4d;
  color: var(--text-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--text-primary);
}

.btn-secondary:hover {
  background-color: var(--text-primary);
  color: var(--bg-primary);
}

/* ===================================
   瀹瑰櫒
   =================================== */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* ===================================
   瀵艰埅鏍?- 1:1 澶嶅埢 NEUTRL
   =================================== */

/* ===== 妗岄潰绔鑸?===== */
/* 瀵艰埅鏍忔暣浣?- 鎸夊師绔欏竷灞€ */
.nav--desktop {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  z-index: 999999;
  display: none;
  width: 100%;
  max-width: min(920px, calc(100vw - 32px));
  transform: translateX(-50%);
  align-items: center;
  justify-content: space-between;
  border-radius: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #FFFFFF;
  height: 59px;
  padding: 0;
}

@media (min-width: 768px) {
  .nav--desktop {
    display: flex;
  }
}

/* LOGO + MENU 容器 - Logo 和 Menu 并排在同一个 Brand 容器内 */
.nav__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 12px;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
}

.nav__logo {
  padding: 0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.nav__logo::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
  mix-blend-mode: screen;
  animation: logo-shine 3s linear infinite;
  pointer-events: none;
}
@keyframes logo-shine {
  0%   { left: -75%; }
  100% { left: 125%; }
}

.nav__logo svg {
  display: block;
}

/* nav 继承 brand 的高度，撑满整行 */
.nav__brand nav {
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

/* 菜单列表 - 和 Logo 同行排列 */
.nav__menu {
  display: flex;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  height: 100%;
  min-width: 0;
  flex-wrap: nowrap;
}

/* 最后一个菜单项右边留出与 actions 的间距 */
.nav__menu > .nav__item:last-child {
  margin-right: 8px;
}
.nav__item {
  display: flex;
  align-items: center;
  position: relative; /* 子菜单相对此元素定位 */
}

.nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 10px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8);
  text-decoration: none;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.nav__link:hover {
  color: #000000;
}

.nav__arrow {
  width: 16px;
  height: 16px;
  color: rgba(0, 0, 0, 0.5);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 鍙充晶鎿嶄綔鍖?- 鍜岃彍鍗曟湁鏄庢樉闂磋窛 */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 16px;
  flex: 0 0 auto;
  margin-left: 8px;
}

.nav__whatsapp {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav__whatsapp svg {
  width: 24px;
  height: 24px;
}

.nav__whatsapp-text {
  font-size: 15px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
}

.nav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  background: #FF385C;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav__cta:hover {
  background-color: #c91e4e;
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* 涓嬫媺鑿滃崟 */
.nav__dropdown {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  min-width: 200px;
  transform: translateY(8px);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #FFFFFF;
  padding: 8px;
  opacity: 0;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.nav__item--has-children:hover .nav__dropdown {
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
}

.nav__dropdown .nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  padding: 4px 20px 4px 4px;
  font-size: 14px;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav__dropdown .nav__link:hover {
  background-color: #F5F5F5;
}

.nav__link-icon {
  display: flex;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.nav__link-text {
  color: #000000CC;
  font-weight: 500;
}

.nav__whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9999px;
  background-color: transparent;
  color: #000000;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav__whatsapp:hover {
  background-color: #F0FFF4;
}

.nav__whatsapp:hover svg path {
  fill: #25D366;
}

.nav__whatsapp svg {
  width: 24px;
  height: 24px;
  transition: fill 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav__whatsapp-text {
  color: #000000;
  font-weight: 600;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 9999px;
  background: #FF385C;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav__cta:hover {
  background-color: #E62E4D;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 56, 92, 0.3);
}

/* ===== 绉诲姩绔鑸?===== */
.nav--mobile {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999998;
  background-color: transparent;
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav--mobile.is-scrolled {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.nav__mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  gap: 24px;
}

.nav__mobile-logo {
  display: flex;
  align-items: center;
}

.nav__mobile-logo img {
  height: 32px;
  width: auto;
}

.nav__mobile-logo {
  padding: 8px;
}

.nav__mobile-logo-text {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: #FFFFFF;
}

.nav__mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav__mobile-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}

.nav__mobile-toggle .hamburger-icon,
.nav__mobile-toggle .close-icon {
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav__mobile-toggle[aria-expanded="true"] .hamburger-icon {
  display: none;
}

.nav__mobile-toggle[aria-expanded="true"] .close-icon {
  display: block;
}

/* 绉诲姩绔彍鍗曢潰鏉?*/
.nav__mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999997;
  background-color: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

.nav__mobile-menu.is-open {
  transform: translateX(0);
}

.nav__mobile-menu-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 80px 20px 40px;
}

.nav__mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.nav__mobile-item {
  margin-bottom: 8px;
}

.nav__mobile-link {
  display: block;
  padding: 16px 20px;
  font-size: 18px;
  font-weight: 500;
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 12px;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav__mobile-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 绉诲姩绔簳閮ㄦ搷浣?*/
.nav__mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav__mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 12px;
  background-color: #FF385C;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav__mobile-cta:hover {
  background-color: #E62E4D;
  transform: translateY(-2px);
}

.nav__mobile-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav__mobile-whatsapp:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.nav__mobile-whatsapp svg {
  color: #25D366;
}

/* 绉诲姩绔殣钘忔闈㈠鑸?*/
@media (max-width: 767px) {
  .nav--desktop {
    display: none !important;
  }
}

/* 妗岄潰绔殣钘忕Щ鍔ㄥ鑸?*/
@media (min-width: 768px) {
  .nav--mobile {
    display: none !important;
  }
}

/* ===================================
    Hero 鍖哄煙
   =================================== */

.hero {
  position: relative;
  min-height: 100vh;
  padding-top: 128px;
  padding-bottom: 4rem;
  overflow: hidden;
}

.hero__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.hero__content {
  z-index: 2;
}

.hero__title {
  margin-bottom: 1.5rem;
}

.hero__title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
}

.hero__subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.hero__cta {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.hero__stat {
  text-align: center;
}

.hero__stat-number {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.hero__stat-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.hero__visual {
  position: relative;
  z-index: 1;
}

.hero__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}



/* 娓愬彉鑳屾櫙瑁呴グ */
.hero__gradient-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    100% 100% at 50% 50%,
    var(--gradient-1) 10%,
    var(--gradient-2) 25%,
    var(--gradient-3) 37%,
    var(--gradient-4) 50%
  );
  filter: blur(25px);
  opacity: 0.3;
  z-index: -1;
}

@media (max-width: 1024px) {
  .hero__container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .hero__visual {
    order: -1;
  }
}

@media (max-width: 768px) {
  .hero {
    padding-top: 104px;
  }
  
  .hero__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===================================
   鍝佺墝灞曠ず (Marquee)
   =================================== */

.brands-marquee {
  padding: 4rem 0;
  overflow: hidden;
  background-color: var(--bg-secondary);
}

.brands-marquee__track {
  display: flex;
  gap: 2rem;
  animation: marquee 25s linear infinite;
}

.brands-marquee__item {
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity var(--transition-base);
}

.brands-marquee__item:hover {
  opacity: 1;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* ===================================
   鏈嶅姟灞曠ず
   =================================== */

.services {
  padding: 5rem 0;
  background-color: var(--bg-primary);
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h2 {
  font-size: var(--text-4xl);
  margin-bottom: 0.5rem;
}

.section-header p {
  font-size: var(--text-lg);
  color: var(--text-secondary);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.service-card {
  padding: 2rem;
  background-color: var(--bg-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  transition: all var(--transition-base);
}

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

.service-card__icon {
  width: 64px;
  height: 64px;
  margin-bottom: 1.5rem;
}

.service-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.service-card__title {
  font-size: var(--text-2xl);
  margin-bottom: 0.75rem;
}

.service-card__description {
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.service-card__features {
  list-style: disc;
  padding-left: 1.25rem;
  color: var(--text-secondary);
}

.service-card__features li {
  margin-bottom: 0.5rem;
}

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

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
  
  .services {
    padding: 3rem 0;
  }
}

/* ===================================
   浣滃搧灞曠ず
   =================================== */

.work {
  padding: 5rem 0;
  background-color: var(--bg-secondary);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.work-item {
  background-color: var(--bg-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-light);
  transition: all var(--transition-base);
}

.work-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.work-item__thumbnail {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.work-item__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.work-item:hover .work-item__thumbnail img {
  transform: scale(1.05);
}

.work-item__content {
  padding: 1.5rem;
}

.work-item__title {
  font-size: var(--text-xl);
  margin-bottom: 0.5rem;
}

.work-item__category {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.section-cta {
  text-align: center;
}

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

@media (max-width: 768px) {
  .work-grid {
    grid-template-columns: 1fr;
  }
  
  .work {
    padding: 3rem 0;
  }
}

/* ===================================
   CTA 鍖哄煙
   =================================== */

.cta-section {
  padding: 5rem 0;
  background-color: var(--bg-primary);
}

.cta-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.cta-content h2 {
  font-size: var(--text-4xl);
  margin-bottom: 1rem;
}

.cta-content p {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .cta-section {
    padding: 3rem 0;
  }
  
  .cta-content h2 {
    font-size: var(--text-2xl);
  }
}

/* ===================================
   Footer
   =================================== */

.site-footer {
  background-color: var(--bg-secondary);
  padding: 4rem 0 2rem;
  border-top: 1px solid var(--border-light);
}

.footer__content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer__brand p {
  color: var(--text-secondary);
  margin-top: 1rem;
}

.footer__heading {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.footer__menu {
  list-style: none;
}

.footer__menu li {
  margin-bottom: 0.75rem;
}

.footer__menu a {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.footer__menu a:hover {
  color: var(--accent-cta);
}

.footer__bottom {
  padding-top: 2rem;
  border-top: 1px solid var(--border-light);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

@media (max-width: 768px) {
  .footer__content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ===================================
   Hero 锟斤拷锟斤拷 - 强锟狡革拷锟角ｏ拷2026-03-24锟斤拷
   =================================== */

.home-hero__title {
  max-width: 680px !important;
}

@media (min-width: 768px) {
  .home-hero__title {
    max-width: 680px !important;
  }
}

/* ===================================
   Hero Gradient - Neutrl Studio Style
   =================================== */

.home-hero__gradient {
    position: absolute;
    left: 0;
    top: 0;
    min-height: 836px;
    width: 100%;
    overflow-x: hidden;
    z-index: 0;
}

.gr-48 {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
}

.gr-48__radial {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -10;
    margin-top: 150px;
    aspect-ratio: 1 / 1;
    width: 636px;
    transform: translateX(-50%);
    border-radius: 9999px;
    filter: blur(25px);
    background: radial-gradient(100% 100% at 50% 50%, #F5645A 10%, #FF9D7E 25%, #FFD4A6 37%, #FFEEC8 50%);
}

.gr-48__overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 836px;
    width: 100%;
    background-image: linear-gradient(to bottom, #FAF5E8, rgba(250, 245, 232, 0));
}
/* ===================================
   About Section - 1:1 复刻 NEUTRL Studio
   =================================== */

.home-about {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
}
@media (min-width: 768px) {
    .home-about {
        margin-top: 160px;
    }
}
@media (min-width: 1200px) {
    .home-about {
        max-width: 1200px;
    }
}

.home-about__content {
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 32px);
    max-width: 831px;
    text-align: center;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 150%;
    color: rgba(51, 51, 51, 0.36);
}
@media (min-width: 768px) {
    .home-about__content {
        font-size: 44px;
    }
}

.home-about__content > div + div {
    margin-top: 36px;
}

.home-about__italic {
    font-style: italic;
}

.home-about__brand {
    font-family: "Styrene A", "Inter", sans-serif;
}

.home-about__avatar {
    position: relative;
    top: -4px;
    margin-left: 0.625rem;
    margin-right: 0.125rem;
    display: inline-block;
    height: 52px;
    width: 80px;
    overflow: hidden;
    border-radius: 9999px;
    vertical-align: middle;
}

.home-about__avatar-bg {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.home-about__avatar-img {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

/* ===================================
   Benefits Section - 1:1 复刻 NEUTRL Studio
   =================================== */

.home-benefits {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
    padding-left: 16px;
    padding-right: 16px;
}
@media (min-width: 768px) {
    .home-benefits {
        margin-top: 80px;
        max-width: 1200px;
        padding-left: 0;
        padding-right: 0;
    }
}

.home-benefits__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (min-width: 768px) {
    .home-benefits__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

/* Card */
.home-benefits__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-benefits__card-image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 16px;
}

.home-benefits__card-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-benefits__card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.home-benefits__card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 4px;
}

.home-benefits__card-label {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8);
    letter-spacing: 0.01em;
}
@media (min-width: 768px) {
    .home-benefits__card-label {
        font-size: 14px;
    }
}

.home-benefits__card-text {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 150%;
    color: rgba(0, 0, 0, 0.5);
    margin: 0;
}
@media (min-width: 768px) {
    .home-benefits__card-text {
        font-size: 13px;
    }
}

/* Stats Card */
.home-benefits__stats {
    width: 100%;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.home-benefits__stats-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.home-benefits__stats-header-item {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: rgba(0,0,0,0.4);
    padding: 8px 10px;
    text-align: right;
}

.home-benefits__stats-header-item--border {
    border-right: 1px solid rgba(0,0,0,0.08);
    text-align: left;
}

.home-benefits__stats-body {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: end;
    height: 75px;
    overflow: hidden;
}

.home-benefits__stats-chart {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.home-benefits__stats-value {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: rgba(0,0,0,0.8);
    padding: 8px 10px;
    text-align: right;
    position: relative;
    z-index: 1;
}

.home-benefits__stats-value--border {
    border-right: 1px solid rgba(0,0,0,0.08);
    text-align: left;
}

.home-benefits__stats-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.home-benefits__stats-footer-item {
    padding: 6px 10px;
}

.home-benefits__stats-footer-item--border {
    border-right: 1px solid rgba(0,0,0,0.08);
}

.home-benefits__stats-footer-item--value {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #606C38;
}

.home-benefits__stats-line {
    height: 2px;
    background: #882D17;
    border-radius: 999px;
    width: 80%;
}

/* Calendar Card */
.home-benefits__calendar {
    background: white;
    border-radius: 12px;
    padding: 12px;
    width: 100%;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.home-benefits__calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.home-benefits__calendar-selects {
    display: flex;
    gap: 4px;
}

.home-benefits__calendar-select {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(0,0,0,0.8);
}

.home-benefits__calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 10px;
}

.home-benefits__calendar-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.home-benefits__calendar-day-name {
    font-size: 9px;
    color: rgba(0,0,0,0.4);
    font-weight: 500;
}

.home-benefits__calendar-day-number {
    font-size: 11px;
    font-weight: 500;
    color: rgba(0,0,0,0.7);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.home-benefits__calendar-day-number--active {
    background: #882D17;
    color: white;
}

.home-benefits__calendar-footer {
    display: flex;
    justify-content: center;
}

.home-benefits__calendar-button {
    background: #882D17;
    color: white;
    border-radius: 999px;
    padding: 8px 20px;
    font-size: 12px;
    font-weight: 500;
    width: 100%;
    text-align: center;
}

/* Product Card */
.home-benefits__product {
    width: 100%;
    display: flex;
    justify-content: center;
}

.home-benefits__product-inner {
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}

.home-benefits__product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-benefits__product-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #882D17;
    border-radius: 999px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.home-benefits__product-badge-text {
    font-size: 10px;
    font-weight: 600;
    color: white;
}

.home-benefits__product-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
}

.home-benefits__product-blur {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(8px);
    background: rgba(255,255,255,0.3);
}

.home-benefits__product-name {
    position: relative;
    z-index: 1;
    font-size: 11px;
    font-weight: 600;
    color: white;
}

/* Tech Stack Card */
.home-benefits__tech-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 8px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.home-benefits__tech-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(0,0,0,0.03);
}

.home-benefits__tech-item--active {
    background: rgb(136, 45, 23);
}

.home-benefits__tech-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.home-benefits__tech-name {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgb(0,0,0);
}

.home-benefits__tech-name--light {
    color: white;
}

/* ===================================
   home-work / home-results / home-process / testimonials / callout
   1:1 复刻 NEUTRL Studio (2026-03-25)
   =================================== */

/* ---- home-work ---- */
.home-work { margin-top: 0; padding: 80px 0; overflow: hidden; }
@media(min-width:768px){ .home-work { margin-top: 0; padding: 80px 0; } }
.home-work__header { display:flex; align-items:center; justify-content:space-between; padding:0 16px; margin-bottom:24px; max-width:1200px; margin-left:auto; margin-right:auto; }
.home-work__title { font-family:'Playfair Display',Georgia,serif; font-size:28px; font-weight:300; color:rgba(0,0,0,0.8); }
@media(min-width:768px){ .home-work__title { font-size:36px; } }
.home-work__link { display:flex; align-items:center; gap:6px; font-size:14px; font-weight:500; color:#882D17; text-decoration:none; }
.home-work__link--mobile { display:flex; justify-content:center; margin-top:16px; }
@media(min-width:768px){ .home-work__link--mobile { display:none; } }
.home-work__link--desktop { display:none; }
@media(min-width:768px){ .home-work__link--desktop { display:flex; } }
.home-work__gallery--desktop { display:flex; flex-direction:column; gap:12px; }
.home-work__row { display:flex; overflow:hidden; align-items:stretch; }
.home-work__track { display:flex; gap:1rem; flex-shrink:0; animation:work-marquee-left 25s linear infinite; padding-right:16px; }
.home-work__row--reverse .home-work__track { animation:work-marquee-right 25s linear infinite; }
@keyframes work-marquee-left { 0% { transform:translateX(0); } 100% { transform:translateX(-100%); } }
@keyframes work-marquee-right { 0% { transform:translateX(-100%); } 100% { transform:translateX(0); } }
.home-work__item { flex-shrink:0; width:460px; border-radius:6px; overflow:hidden; }
@media (min-width:768px) { .home-work__item { width:588px; aspect-ratio:588/367.5; } }
.home-work__image { width:100%; height:100%; object-fit:cover; display:block; }

/* ---- home-results ---- */
.home-results { margin-top:0; padding:80px 16px; }
@media(min-width:768px){ .home-results { margin-top:0; padding:80px 0; } }
.home-results__container { max-width:1200px; margin:0 auto; }
.home-results__title { font-family:'Playfair Display',Georgia,serif; font-size:32px; font-weight:300; line-height:120%; color:rgba(0,0,0,0.8); margin-bottom:40px; text-align:center; }
@media(min-width:768px){ .home-results__title { font-size:44px; } }
.home-results__title-italic { font-style:italic; }
/* Grid: 整体圆角半透明大容器 */
.home-results__grid { display:flex; flex-direction:column; background:rgba(255,255,255,0.32); border-radius:20px; border:1px solid rgba(0,0,0,0.06); overflow:visible; }
@media(min-width:768px){ .home-results__grid { flex-direction:row; } }
/* 每张卡片透明背景，细线分隔 */
.home-results__card { flex:1; display:flex; flex-direction:column; border-bottom:1px solid rgba(0,0,0,0.08); }
@media(min-width:768px){ .home-results__card { border-bottom:none; border-right:1px solid rgba(0,0,0,0.08); } }
.home-results__card--last, .home-results__card:last-child { border:none !important; }
.home-results__card-content { padding:28px 28px 0; }
.home-results__card-title { font-size:15px; font-weight:600; color:rgba(0,0,0,0.8); margin-bottom:6px; }
.home-results__card-text { font-size:13px; color:rgba(0,0,0,0.5); line-height:150%; }
/* 插图区占位色块 */
.home-results__card-illustration { flex:1; min-height:140px; padding:0 24px 0; display:flex; align-items:flex-end; overflow:hidden; }
.home-results__card-placeholder { width:100%; height:100%; min-height:120px; border-radius:12px; background:rgba(136,45,23,0.06); }

/* ---- home-process ---- */
.home-process { margin-top:0; padding:80px 16px; }
@media(min-width:768px){ .home-process { margin-top:0; padding:80px 0; max-width:1200px; margin-left:auto; margin-right:auto; } }
.home-process__header { margin-bottom:32px; }
.home-process__label { display:inline-block; font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:rgba(0,0,0,0.4); margin-bottom:16px; }
.home-process__title { font-family:'Playfair Display',Georgia,serif; font-size:32px; font-weight:300; line-height:120%; color:rgba(0,0,0,0.8); }
@media(min-width:768px){ .home-process__title { font-size:44px; } }
.home-process__title-italic { font-style:italic; }
/* content: 圆角容器 + 背景图 */
.home-process__content { border-radius:20px; background-size:cover; background-position:center; overflow:hidden; }
/* steps: 横排 flex + 半透明背景 */
.home-process__steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; background:rgba(240,239,235,0.6); }
@media(min-width:768px){ .home-process__steps { flex-direction:row; min-height:528px; } }
/* 每个 step 等宽，纵向布局（header在上，body在下） */
.home-process__step { flex:1; display:flex; flex-direction:column; border-right:1px solid rgba(208,207,204,0.6); }
.home-process__step:last-child { border-right:none; }
/* step header: 编号+标题横排 */
.home-process__step-header { padding:12px 16px; display:flex; flex-direction:row; align-items:center; gap:5px; border-bottom:1px solid rgba(208,207,204,0.6); }
/* 编号：红色圆角药丸 */
.home-process__step-number { display:inline-block; background:#882D17; border-radius:9999px; padding:2px 8px; font-size:13px; font-weight:400; color:#fff; line-height:1.4; }
.home-process__step-title { font-family:'Playfair Display',Georgia,serif; font-size:18px; font-weight:300; color:rgba(0,0,0,0.8); }
/* step body: 占满剩余高度，相对定位放 SVG 背景 */
.home-process__step-body { flex:1; position:relative; display:flex; flex-direction:column; justify-content:center; padding:24px; overflow:hidden; min-height:300px; }
.home-process__step-bg { position:absolute; inset:0; width:100%; height:100%; }
.home-process__step-list { list-style:none; margin:0; padding:0; position:relative; z-index:1; display:flex; flex-direction:column; }
.home-process__step-item { font-size:13px; color:rgba(0,0,0,0.65); padding:10px 0; }
.home-process__step-item--border { border-bottom:1px solid rgba(0,0,0,0.08); }

/* ---- testimonials ---- */
.testimonials { padding:80px 16px 160px; }
@media(min-width:768px){ .testimonials { max-width:1200px; margin-left:auto; margin-right:auto; padding:80px 0 160px; } }
.testimonials__header { text-align:center; margin-bottom:40px; }
/* badge: 棕色背景圆角标签 */
.testimonials__badge { display:inline-block; background:rgba(171,85,8,0.08); border-radius:6px; padding:4px 10px; font-size:12px; font-weight:400; letter-spacing:0.16em; text-transform:uppercase; color:rgb(136,45,23); margin-bottom:16px; }
.testimonials__title { font-family:'Playfair Display',Georgia,serif; font-size:32px; font-weight:300; line-height:1.15; color:rgba(0,0,0,0.9); text-align:center; }
@media(min-width:768px){ .testimonials__title { font-size:40px; } }
.testimonials__title-italic { font-style:italic; }
/* grid: CSS columns 瀑布流，4列 */
.testimonials__grid { column-count:1; column-gap:16px; row-gap:16px; margin-top:40px; }
@media(min-width:640px){ .testimonials__grid { column-count:2; } }
@media(min-width:1024px){ .testimonials__grid { column-count:4; } }
/* 卡片：break-inside 防截断，白色半透明 */
.testimonials__card { break-inside:avoid; background:rgba(255,255,255,0.6); border-radius:12px; padding:16px 20px; display:flex; flex-direction:column; gap:16px; margin-bottom:16px; }
.testimonials__card-text { font-size:15px; line-height:1.4; color:rgb(85,85,85); margin:0; flex:1; }
.testimonials__card-footer { display:flex; align-items:center; gap:12px; margin-top:auto; }
.testimonials__card-avatar { width:32px; height:32px; border-radius:9999px; object-fit:cover; flex-shrink:0; }
.testimonials__card-info { display:flex; flex-direction:column; gap:1px; }
.testimonials__card-name { font-size:11px; font-weight:600; color:rgb(23,23,23); margin:0; }
.testimonials__card-role { font-size:12px; color:rgb(85,85,85); margin:0; }

/* ---- callout ---- */
.callout { margin-top:0; }
@media(min-width:768px){ .callout { margin-top:0; } }
.callout__wrapper { max-width:1200px; margin:0 auto; padding:0 16px; }
@media(min-width:768px){ .callout__wrapper { padding:0; } }
.callout__content { position:relative; border-radius:24px; overflow:hidden; display:flex; align-items:stretch; justify-content:center; min-height:600px; background-size:cover; background-position:center; }
.callout__inner { position:relative; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 24px; text-align:center; max-width:400px; }
.callout__title { font-family:'Playfair Display',Georgia,serif; font-size:36px; font-weight:300; color:rgba(0,0,0,0.8); margin-bottom:24px; }
@media(min-width:768px){ .callout__title { font-size:48px; } }
.callout__title--italic { font-style:italic; }
.callout__list { list-style:none; margin:0 0 32px; padding:0; display:flex; flex-direction:column; gap:12px; text-align:left; }
.callout__list-item { display:flex; align-items:center; gap:10px; font-size:15px; color:rgba(0,0,0,0.7); }
.callout__list-icon { display:flex; align-items:center; justify-content:center; width:20px; height:20px; background:#882D17; border-radius:50%; flex-shrink:0; }
.callout__button { display:inline-block; background:#882D17; color:#fff; border-radius:999px; padding:16px 32px; font-size:16px; font-weight:500; text-decoration:none; transition:opacity 0.2s; }
.callout__button:hover { opacity:0.85; color:#fff; }
.callout-animation--left, .callout-animation--right { position:absolute; top:0; bottom:0; width:200px; display:none; }
@media(min-width:1024px){ .callout-animation--left { display:block; left:0; } .callout-animation--right { display:block; right:0; } }
.callout-path--left, .callout-path--right { position:absolute; top:50%; transform:translateY(-50%); height:100%; }
.callout-path--left { left:0; }
.callout-path--right { right:0; }
.callout-path__item { position:absolute; display:flex; flex-direction:column; align-items:center; gap:8px; }
.callout-path__card { width:120px; border-radius:12px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,0.12); }
.callout-path__card-image { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.callout-path__card-label { font-size:11px; font-weight:500; color:rgba(0,0,0,0.5); text-align:center; }


/* ========================================================
   WORK PAGE - 从原站 work.css 直接引入 + 本地补丁
   ======================================================== */

/* ==========================================================================
   WORK ARCHIVE PAGE - BEM Convention with Tailwind @apply
   ========================================================================== */

/* ==========================================================================
   WORK PAGE
   ========================================================================== */

.work-archive {
    --tw-bg-opacity: 1;
    background-color: rgb(21 31 44 / var(--tw-bg-opacity, 1))
}

/* ==========================================================================
   WORK HERO
   ========================================================================== */

.work-hero {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%
}

.work-hero__video-wrapper {
    height: 100vh;
    width: 100%;
    overflow: hidden
}

.work-hero__video {
    height: 100%;
    width: 100%;
    --tw-scale-x: 1.25;
    --tw-scale-y: 1.25;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    -o-object-fit: cover;
       object-fit: cover;
    opacity: 0
}

.work-hero__overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%
}

.work-hero__overlay--bottom {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
    --tw-gradient-from: #151F2C var(--tw-gradient-from-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(21 31 44 / 0) var(--tw-gradient-to-position);
    --tw-gradient-to-position: 50%
}

.work-hero__overlay--top {
    --tw-bg-opacity: 0.45;
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
    --tw-gradient-from: #0000007A var(--tw-gradient-from-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-to-position: 90%
}

/* ==========================================================================
   WORK HEADER
   ========================================================================== */

.work-header {
    width: 100%
}

@media (min-width: 1200px) {

    .work-header {
        max-width: 1200px
    }
}

.work-header {
    position: relative;
    z-index: 10;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - var(--horizontal-edge-space));
    padding-top: 104px
}

@media (min-width: 768px) {

    .work-header {
        padding-top: 128px
    }
}

.work-header__wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 996px
}

.work-header__content {
    width: 100%;
    max-width: 612px
}

.work-header__badge {
    border-radius: 6px;
    background-color: #FFFFFF1F;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-family: Fragment Mono, monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    opacity: 0;
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    --tw-backdrop-blur: blur(16px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.work-header__title {
    margin-top: 1rem;
    font-family: Playfair Display, serif;
    font-size: 36px;
    font-weight: 300;
    line-height: 120%;
    letter-spacing: -0.01em;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

@media (min-width: 768px) {

    .work-header__title {
        font-size: 56px
    }
}

.work-header__title .split-word {
    --tw-translate-x: 0.75rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 0
}

.work-header__title-ampersand {
    font-family: Canela, sans-serif;
    font-weight: 400;
    font-style: italic
}

.work-header__title-italic {
    font-style: italic
}

.work-header__features {
    margin-top: 28px;
    display: flex;
    width: 100%;
    max-width: 360px;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.work-header__feature {
    display: flex;
    align-items: center;
    gap: 5px;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.work-header__feature-text {
    font-size: 15px;
    color: #FFFFFFB2
}

@media (min-width: 768px) {

    .work-header__feature-text {
        font-size: 17px
    }
}

/* ==========================================================================
   WORK MAIN / GRID
   ========================================================================== */

.work-main {
    width: 100%
}

@media (min-width: 1200px) {

    .work-main {
        max-width: 1200px
    }
}

.work-main {
    position: relative;
    z-index: 10;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
    width: calc(100% - var(--horizontal-edge-space));
    padding-bottom: 160px
}

@media (min-width: 768px) {

    .work-main {
        margin-top: 187px
    }
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem
}

@media (min-width: 768px) {

    .work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (min-width: 1024px) {

    .work-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

/* ==========================================================================
   WORK CARD
   ========================================================================== */

.work-card {
    aspect-ratio: 384/240;
    width: 100%;
    --tw-translate-y: 0.75rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-radius: 8px;
    background-color: rgb(255 255 255 / 0.05);
    opacity: 0;
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    --tw-backdrop-blur: blur(8px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.work-card__image-container {
    overflow: hidden;
    border-radius: 8px;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}

@media (min-width: 768px) {
    .work-card:hover .work-card__image-container {
        position: relative;
        --tw-scale-x: 1.05;
        --tw-scale-y: 1.05;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }
}

.work-card__link {
    display: block;
    overflow: hidden
}

.work-card__image {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}

.work-card__content {
    position: absolute;
    bottom: 0.625rem;
    left: 0.625rem
}

.work-card__categories {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    margin-bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem
}

.work-card__category {
    border-radius: 4px;
    --tw-bg-opacity: 1;
    background-color: rgb(240 239 235 / var(--tw-bg-opacity, 1));
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-family: Fragment Mono, monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    --tw-text-opacity: 1;
    color: rgb(85 85 85 / var(--tw-text-opacity, 1))
}

.work-card__title {
    border-radius: 8px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-color: #FFFFFF1F;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 12px;
    font-weight: 300;
    line-height: 120%;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --tw-backdrop-blur: blur(24px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    background-color: var(--work-text-color, rba(255,255,255,0.1))
}

.work-card__title-link {
    display: block
}

.work-card__excerpt {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    font-size: 15px;
    line-height: 150%;
    color: #00000099
}

/* ==========================================================================
   WORK EMPTY STATE
   ========================================================================== */

.work-empty {
    padding-top: 5rem;
    padding-bottom: 5rem;
    text-align: center
}

.work-empty__text {
    font-size: 18px;
    color: rgb(255 255 255 / 0.7)
}

.callout {
    overflow: hidden;
    /* Section wrapper */
}

.callout__wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1696px;
}

@media (min-width: 768px) {

    .callout__wrapper {
        height: 691px;
    }
}

.callout__content {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    height: 100%;
    width: calc(100% - 32px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    background-size: cover;
}

@media (min-width: 768px) {

    .callout__content {
        flex-direction: row;
    }
}

.callout__inner {
    position: relative;
    z-index: 10;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    max-width: 325px;
}

@media (min-width: 768px) {

    .callout__inner {
        max-width: 424px;
    }
}

.callout__title {
    text-align: center;
    font-family: Playfair Display, serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 115%;
    letter-spacing: -0.01em;
}

@media (min-width: 768px) {

    .callout__title {
        font-size: 56px;
    }
}

.callout__title--italic {
    font-style: italic;
}

.callout__list {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem;
    max-width: 362px;
}

.callout__list > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

@media (min-width: 768px) {

    .callout__list {
        margin-top: 1.75rem;
    }

    .callout__list > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1rem * var(--tw-space-y-reverse));
    }
}

.callout__list-item {
    display: flex;
    gap: 5px;
    font-size: 16px;
    line-height: 140%;
    color: #000000CC;
}

@media (min-width: 768px) {

    .callout__list-item {
        font-size: 18px;
    }
}

.callout__list-icon {
    margin-top: 3px;
    display: flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(136 45 23 / var(--tw-bg-opacity, 1));
}

.callout__button {
    margin-left: auto;
    margin-right: auto;
    margin-top: 28px;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 56 92 / var(--tw-bg-opacity, 1));
    padding-left: 52px;
    padding-right: 52px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 16px;
    font-weight: 600;
    line-height: 125%;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.callout__button:hover {
    background-color: rgb(255 56 92 / 0.9);
}

@media (min-width: 768px) {

    .callout__button {
        margin-top: 48px;
        padding-left: 60px;
        padding-right: 60px;
        padding-top: 18.5px;
        padding-bottom: 18.5px;
        font-size: 18px;
    }
}

.callout-animation--left {
    position: absolute;
    left: 123px;
    top: 50%;
    display: none;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (min-width: 768px) {

    .callout-animation--left {
        display: block;
    }
}

.callout-animation--right {
    position: absolute;
    top: 50%;
    display: none;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (min-width: 768px) {

    .callout-animation--right {
        display: block;
    }
}

.callout-animation--right {
    right: 123px;
}

.callout-path--left,
.callout-path--right {
    visibility: hidden;
}

.callout-path__item {
    position: absolute;
    aspect-ratio: 400/282;
    width: 400px;
    border-radius: 16px;
    background-color: #FFFFFF47;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.625rem;
    --tw-backdrop-blur: blur(4px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    will-change: transform;
}

.callout-path__card {
    aspect-ratio: 384/240;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.callout-path__card-image {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.callout-path__card-label {
    margin-top: 0.625rem;
    display: block;
    padding-left: 0.5rem;
    font-family: Fragment Mono, monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 125%;
    letter-spacing: 0.16em;
    color: #00000099;
}

.callout-marquee--mobile {
    display: block;
    width: 100%;
}

@media (min-width: 768px) {

    .callout-marquee--mobile {
        display: none;
    }
}

.callout-marquee__list {
    display: flex;
    width: -moz-max-content;
    width: max-content;
    align-items: stretch;
    padding-top: 30px;
    padding-bottom: 40px;
    animation: marquee-left 30s linear infinite;
}

.callout-marquee--mobile .callout-path__item {
    position: static;
    margin-right: 1rem;
    width: 280px;
    flex-shrink: 0;
}

@keyframes marquee-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
.faq {
    padding-top: 80px;
    padding-bottom: 80px;
}@media (min-width: 768px) {.faq {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

.faq__container {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    width: calc(100% - 96px);
    max-width: 976px;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {.faq__container {
        flex-direction: row;
        gap: 56px;
    }
}

.faq__title {
    font-family: Playfair Display, serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 115%;
    letter-spacing: -0.02em;
}

@media (min-width: 768px) {.faq__title {
        font-size: 44px;
    }
}

.dark .faq__title {
    --tw-text-opacity: 1;
    color: rgb(238 238 238 / var(--tw-text-opacity, 1));
}

.faq__title-ampersand {
    font-family: Canela, sans-serif;
}

.faq__grid {
    max-width: 824px;
    -moz-columns: 1;
         columns: 1;
    gap: 56px;
}

@media (min-width: 768px) {.faq__grid {
        -moz-columns: 2;
             columns: 2;
    }
}

.faq__item {
    border-bottom-width: 1px;
    border-color: #0000001F;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
}

.dark .faq__item {
    border-bottom-color: #FFFFFF1F;
}

.faq__button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: left;
}

.faq__question {
    font-size: 17px;
    font-weight: 500;
    line-height: 130%;
}

.dark .faq__question {
    --tw-text-opacity: 1;
    color: rgb(204 204 204 / var(--tw-text-opacity, 1));
}

.faq__icon {
    flex-shrink: 0;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.dark .faq__icon path {
    stroke: #FFFFFF52;
}

.faq__item.is-active .faq__icon {
    transform: rotate(180deg);
}


.faq__answer > p {
    overflow: hidden;
    padding-bottom: 1rem;
    font-size: 15px;
    line-height: 160%;
    color: rgb(0 0 0 / 0.7);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.dark .faq__answer > p {
    color: #CCCCCCB3;
}

.faq__item.is-active .faq__answer > p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.faq__spacer {
    height: 80px;
}



/* Hero 渐变占位（无视频时） */
.work-hero__video-wrapper--gradient {
    background: linear-gradient(160deg, #1a2a3e 0%, #0d1825 60%, #151f2c 100%);
}

/* 确保 work-archive 背景色正确（原站 #151F2C） */
.work-archive {
    background-color: #151F2C;
    min-height: 100vh;
}

/* work-header 在 hero 上方 */
.work-header {
    position: relative;
    z-index: 10;
}

/* work-card opacity/filter 覆盖（原站有 JS 动画，我们静态显示） */
.work-card {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    position: relative; /* 让 work-card__content 的 absolute 定位生效 */
    overflow: hidden;
}

.work-header__badge,
.work-header__features {
    opacity: 1 !important;
    filter: none !important;
}

.work-header__title .split-word {
    opacity: 1 !important;
    transform: none !important;
}


/* ========================================================
   SERVICE PAGES - 从原站 template-service.css 直接引入
   ======================================================== */

/**
 * Swiper 12.0.3
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: October 21, 2025
 */

:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}

:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-horizontal {
  touch-action: pan-y;
}

.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

/* Auto Height */

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 3D Effects */

.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d {
  perspective: 1200px;
  .swiper-slide,
  .swiper-cube-shadow {
    transform-style: preserve-3d;
  }
}

/* CSS Mode */

.swiper-css-mode {
  > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    &::-webkit-scrollbar {
      display: none;
    }
  }
  > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  &.swiper-horizontal {
    > .swiper-wrapper {
      scroll-snap-type: x mandatory;
    }
  }
  &.swiper-vertical {
    > .swiper-wrapper {
      scroll-snap-type: y mandatory;
    }
  }
  &.swiper-free-mode {
    > .swiper-wrapper {
      scroll-snap-type: none;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: none;
    }
  }
  &.swiper-centered {
    > .swiper-wrapper::before {
      content: '';
      flex-shrink: 0;
      order: 9999;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: center center;
      scroll-snap-stop: always;
    }
  }
  &.swiper-centered.swiper-horizontal {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      height: 100%;
      min-height: 1px;
      width: var(--swiper-centered-offset-after);
    }
  }
  &.swiper-centered.swiper-vertical {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      width: 100%;
      min-width: 1px;
      height: var(--swiper-centered-offset-after);
    }
  }
}

/* Slide styles start */

/* 3D Shadows */

.swiper-3d {
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom,
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
  .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper:not(.swiper-watch-progress),
.swiper-watch-progress .swiper-slide-visible {
  .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear;
  }
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Slide styles end */

:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 4px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;

  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);

  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  &.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }
  &.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
  }
  .swiper-navigation-disabled & {
    display: none !important;
  }
  svg {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    transform-origin: center;
    fill: currentColor;
    pointer-events: none;
  }
}
.swiper-button-lock {
  display: none;
}
.swiper-button-prev,
.swiper-button-next {
  top: var(--swiper-navigation-top-offset, 50%);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
}
.swiper-button-prev {
  left: var(--swiper-navigation-sides-offset, 4px);
  right: auto;
  .swiper-navigation-icon {
    transform: rotate(180deg);
  }
}
.swiper-button-next {
  right: var(--swiper-navigation-sides-offset, 4px);
  left: auto;
}
.swiper-horizontal {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-left: 0;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto;
  }
  .swiper-button-next,
  & ~ .swiper-button-next,
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    .swiper-navigation-icon {
      transform: rotate(180deg);
    }
  }
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    .swiper-navigation-icon {
      transform: rotate(0deg);
    }
  }
}
.swiper-vertical {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    left: var(--swiper-navigation-top-offset, 50%);
    right: auto;
    margin-left: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-top: 0;
  }
  .swiper-button-prev,
  ~ .swiper-button-prev {
    top: var(--swiper-navigation-sides-offset, 4px);
    bottom: auto;
    .swiper-navigation-icon {
      transform: rotate(-90deg);
    }
  }
  .swiper-button-next,
  ~ .swiper-button-next {
    bottom: var(--swiper-navigation-sides-offset, 4px);
    top: auto;
    .swiper-navigation-icon {
      transform: rotate(90deg);
    }
  }
}

:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
  &.swiper-pagination-hidden {
    opacity: 0;
  }
  .swiper-pagination-disabled > &,
  &.swiper-pagination-disabled {
    display: none !important;
  }
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
  .swiper-pagination-bullet {
    transform: scale(0.33);
    position: relative;
  }
  .swiper-pagination-bullet-active {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-main {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-prev {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.33);
  }
  .swiper-pagination-bullet-active-next {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-next-next {
    transform: scale(0.33);
  }
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  button& {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }
  .swiper-pagination-clickable & {
    cursor: pointer;
  }

  &:only-child {
    display: none !important;
  }
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
  .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block;
  }
  &.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    .swiper-pagination-bullet {
      display: inline-block;
      transition:
        200ms transform,
        200ms top;
    }
  }
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
  .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  }
  &.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    .swiper-pagination-bullet {
      transition:
        200ms transform,
        200ms left;
    }
  }
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition:
    200ms transform,
    200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
  .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top;
  }
  .swiper-rtl & .swiper-pagination-progressbar-fill {
    transform-origin: right top;
  }
  .swiper-horizontal > &,
  &.swiper-pagination-horizontal,
  .swiper-vertical > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0;
  }
  .swiper-vertical > &,
  &.swiper-pagination-vertical,
  .swiper-horizontal > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0;
  }
}
.swiper-pagination-lock {
  display: none;
}

/* ==========================================================================
   SERVICES HERO
   ========================================================================== */

.services-hero {
    width: 100%;
    overflow: hidden;
}

@media (min-width: 768px) {

    .services-hero {
        padding-bottom: 80px;
    }
}

.services-hero__container {
    width: 100%;
}

@media (min-width: 1200px) {

    .services-hero__container {
        max-width: 1200px;
    }
}

.services-hero__container {
    margin-left: auto;
    margin-right: auto;
    padding-top: 104px;
}

@media (min-width: 768px) {

    .services-hero__container {
        padding-top: 128px;
    }
}

.services-hero__content {
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - var(--horizontal-edge-space));
    max-width: 800px;
    text-align: center;
}

.services-hero__badge {
    border-radius: 6px;
    background-color: rgb(171 85 8 / var(--tw-bg-opacity, 1));
    --tw-bg-opacity: .08;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-family: Fragment Mono, monospace;
    font-size: 0.75rem;
    line-height: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    --tw-text-opacity: 1;
    color: rgb(136 45 23 / var(--tw-text-opacity, 1));
    opacity: 0;
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.services-hero__title {
    margin-top: 1rem;
    font-family: Playfair Display, serif;
    font-size: 36px;
    font-weight: 300;
    line-height: 120%;
    letter-spacing: -0.01em;
}

@media (min-width: 768px) {

    .services-hero__title {
        font-size: 56px;
    }
}

.services-hero__title .split-word {
    --tw-translate-x: 0.75rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 0;
}

.services-hero__filestream {
    position: relative;
    margin-top: 20px;
    height: 245px;
}

@media (min-width: 768px) {

    .services-hero__filestream {
        margin-top: 80px;
        height: 300px;
    }
}

.services-hero__mask {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 245px;
    width: 100%;
}

@media (min-width: 768px) {

    .services-hero__mask {
        height: 300px;
    }
}

.services-hero__mask[data-position="left"] {
    clip-path: inset(0 50% 0 0);
}

.services-hero__mask[data-position="right"] {
    clip-path: inset(0 0 0 50%);
}

.services-hero__scroller {
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    flex-wrap: nowrap;
    gap: 60px;
    will-change: transform;
}

.services-hero__card {
    aspect-ratio: 480/300;
    height: 245px;
    flex-shrink: 0;
    overflow: hidden;
}

@media (min-width: 768px) {

    .services-hero__card {
        height: 300px;
    }
}

.services-hero__mask[data-position="left"] .services-hero__card {
    font-family: Fragment Mono, monospace;
    font-size: 12px;
    line-height: 120%;
}

.services-hero__mask[data-position="right"] .services-hero__card {
    border-radius: 16px;
}

.services-hero__divider {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    height: 280px;
    width: 3px !important;
    --tw-translate-x: -50%;
    --tw-translate-y: -50%;
    transform: translate3d(-50%, -50%, 0) !important;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
}

@media (min-width: 768px) {
    .services-hero__divider {
        height: 340px;
    }
}

.service-hero__particle {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    height: 100%;
    width: 100%;
    z-index: 0;
}

.service-hero__particle canvas {
    height: 100%;
    width: 100%;
}

.service-hero__gate-particle {
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    height: 290px;
    z-index: 4;
}

@media (min-width: 768px) {
    .service-hero__gate-particle {
        height: 360px;
    }
}

.service-hero__gate-particle canvas {
    height: 100%;
    width: 100%;
}

.services-hero__mask {
    z-index: 1;
}

.services-hero__experience {
    width: 100%;
}

@media (min-width: 1200px) {

    .services-hero__experience {
        max-width: 1200px;
    }
}

.services-hero__experience {
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
}

.services-hero__experience-inner {
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - var(--horizontal-edge-space));
    max-width: 792px;
}

.services-hero__experience-title {
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 115%;
    letter-spacing: -0.02em;
    color: #0000007A;
}

.services-hero__experience-list {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.services-hero__experience-icon {
    width: 18px;
    height: 18px;
}

.services-hero__experience-icon img {
    height: 100%;
    width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.services-hero__experience-text {
    white-space: nowrap;
    font-size: 15px;
    line-height: 120%;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

/* ==========================================================================
   SERVICES GRID
   ========================================================================== */

.services-grid {
    width: 100%;
}

@media (min-width: 1200px) {

    .services-grid {
        max-width: 1200px;
    }
}

.services-grid {
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - var(--horizontal-edge-space));
}

.services-grid > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(80px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(80px * var(--tw-space-y-reverse));
}

.services-grid {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (min-width: 768px) {

    .services-grid > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(160px * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(160px * var(--tw-space-y-reverse));
    }
}

.services-grid__card {
    border-radius: 20px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 0.5rem;
}

.services-grid__card-inner {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
}

@media (min-width: 768px) {

    .services-grid__card-inner {
        flex-direction: row;
        gap: 99px;
    }
}

.services-grid__card-content {
    display: flex;
    width: 100%;
    max-width: 525px;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.5rem;
    padding-top: 0.25rem;
}

@media (min-width: 768px) {

    .services-grid__card-content {
        gap: 50px;
        padding-left: 2.5rem;
        padding-top: 38px;
        padding-bottom: 48px;
    }
}

.services-grid__card-header {
    width: calc(100% - 45px);
}

.services-grid__card-title {
    font-family: Playfair Display, serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 115%;
    letter-spacing: -0.02em;
    color: #000000CC;
}

@media (min-width: 768px) {

    .services-grid__card-title {
        font-size: 44px;
    }
}

.services-grid__card-desc {
    margin-top: 0.75rem;
    max-width: 320px;
    font-size: 14px;
    line-height: 140%;
    color: #00000099;
}

@media (min-width: 768px) {

    .services-grid__card-desc {
        margin-top: 1.25rem;
        font-size: 15px;
    }
}

.services-grid__outcomes {
    /* Container for outcomes */
}

.services-grid__outcomes-label {
    font-size: 14px;
    font-weight: 500;
    line-height: 115%;
    color: #04030169;
}

.services-grid__outcomes-list {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.services-grid__outcome {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    border-width: 1px;
    border-color: #0000001A;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 0.375rem;
    padding-right: 1rem;
}

.services-grid__outcome-icon {
    width: 1.75rem;
    height: 1.75rem;
    overflow: hidden;
    border-radius: 9999px;
}

.services-grid__outcome-icon img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.services-grid__outcome-text {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.02em;
    --tw-text-opacity: 1;
    color: rgb(85 85 85 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {

    .services-grid__outcome-text {
        font-size: 15px;
    }
}

.services-grid__card-image {
    position: relative;
    aspect-ratio: 3/2;
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 12px;
}

@media (min-width: 768px) {

    .services-grid__card-image {
        aspect-ratio: 1 / 1;
        width: 520px;
    }
}

.services-grid__card-image img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.services-grid__stats {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.5rem;
}

@media (min-width: 640px) {

    .services-grid__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {

    .services-grid__stats {
        margin-top: 0.5rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.services-grid__stat {
    border-radius: 12px;
    background-color: #00000008;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {

    .services-grid__stat {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.services-grid__stat-value {
    font-size: 24px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -0.02em;
    color: #000000CC;
}

@media (min-width: 768px) {

    .services-grid__stat-value {
        font-size: 28px;
    }
}

.services-grid__stat-label {
    margin-top: 2px;
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    color: #00000099;
}

/* ==========================================================================
   SERVICES PLATFORMS
   ========================================================================== */

.services-platforms {
    padding-top: 0px;
    padding-bottom: 80px;
}

@media (min-width: 768px) {

    .services-platforms {
        padding-top: 80px;
    }
}

.services-platforms__container {
    width: 100%;
}

@media (min-width: 1200px) {

    .services-platforms__container {
        max-width: 1200px;
    }
}

.services-platforms__container {
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - var(--horizontal-edge-space));
}

.services-platforms__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.services-platforms__title {
    max-width: 411px;
    font-family: Playfair Display, serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 115%;
    letter-spacing: -0.02em;
    color: #000000CC;
}

@media (min-width: 768px) {

    @media (min-width: 768px) {

        .services-platforms__title {
            max-width: 588px;
        }
    }

    .services-platforms__title {
        font-size: 44px;
    }
}

.services-platforms__title-italic {
    font-style: italic;
}

.services-platforms__cta--desktop {
    display: none;
    align-items: center;
    gap: 1rem;
    border-top-left-radius: 12px;
    border-top-width: 1px;
    border-left-width: 1px;
    border-color: #0000001A;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

@media (min-width: 768px) {

    .services-platforms__cta--desktop {
        display: flex;
    }
}

.services-platforms__cta--mobile {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

@media (min-width: 640px) {

    .services-platforms__cta--mobile {
        flex-direction: row;
    }
}

@media (min-width: 768px) {

    .services-platforms__cta--mobile {
        display: none;
    }
}

.services-platforms__cta-border {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 320px;
    border-radius: 16px;
    padding: 3px;
    background: linear-gradient(155deg, rgba(213, 74, 0, 1), rgba(252, 199, 89, 1) 50%, rgba(252, 199, 89, 1) 70%, rgba(225, 24, 36, 1) 110%);
}

.services-platforms__cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-radius: 14px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1rem;
}

.services-platforms__cta-text {
    width: 200px;
    font-size: 15px;
    line-height: 140%;
    --tw-text-opacity: 1;
    color: rgb(85 85 85 / var(--tw-text-opacity, 1));
}

.services-platforms__cta--mobile .services-platforms__cta-text {
    text-align: center;
}

@media (min-width: 768px) {

    .services-platforms__cta--mobile .services-platforms__cta-text {
        text-align: left;
    }
}

.services-platforms__cta-btn {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 56 92 / var(--tw-bg-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 15px;
    font-weight: 600;
    line-height: 100%;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.services-platforms__grid {
    margin-top: 2rem;
}

.services-platforms__list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    row-gap: 0.75rem;
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
}

@media (min-width: 640px) {

    .services-platforms__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {

    .services-platforms__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        row-gap: 1.25rem;
    }
}

.services-platforms__item {
    display: flex;
    height: 64px;
    align-items: center;
    gap: 0.75rem;
    border-top-left-radius: 28px;
    border-bottom-right-radius: 28px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}

.services-platforms__item-icon {
    max-height: 28px;
    max-width: 36px;
    -o-object-fit: contain;
       object-fit: contain;
}

.services-platforms__item-name {
    font-size: 17px;
    font-weight: 500;
    line-height: 125%;
    letter-spacing: -0.02em;
    color: #000000CC;
}

/* ==========================================================================
   SERVICES ADVANTAGE
   ========================================================================== */

.services-advantage {
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 80px;
}

@media (min-width: 768px) {

    .services-advantage {
        padding-top: 80px;
    }
}

@media (min-width: 1200px) {
}

.services-advantage__slider {
    overflow: visible;
}

.services-advantage__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.services-advantage__title {
    font-family: Playfair Display, serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 115%;
    letter-spacing: -0.02em;
    color: #000000CC;
}

@media (min-width: 768px) {

    .services-advantage__title {
        font-size: 44px;
    }
}

.services-advantage__title-brand {
    font-family: Styrene A, sans-serif;
}

.services-advantage__nav {
    display: flex;
    gap: 0.625rem;
}

.services-advantage__nav-btn {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 1px;
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.services-advantage__nav-btn path {
    stroke: #882D17;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.services-advantage__nav-btn.swiper-button-disabled {
    border-color: #0000001A;
    background-color: transparent;
}

.services-advantage__nav-btn.swiper-button-disabled path {
    stroke: #000;
    opacity: 0.32;
}

.services-advantage__slides {
    margin-top: 48px;
}

.services-advantage__slide {
    height: auto;
    max-width: 282px;
    border-radius: 16px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
}

.services-advantage__slide-title {
    font-size: 19px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: #000000CC;
}

.services-advantage__slide-image {
    height: 209px;
    width: 100%;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.services-advantage__slide-image img {
    height: 100%;
    width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.services-advantage__slide-desc {
    font-size: 15px;
    line-height: 140%;
    --tw-text-opacity: 1;
    color: rgb(85 85 85 / var(--tw-text-opacity, 1));
}

/* ==========================================================================
   SERVICES WHY
   ========================================================================== */

.why-us {
    padding-top: 0px;
    padding-bottom: 80px;
}

@media (min-width: 768px) {

    .why-us {
        padding-top: 80px;
    }
}

.why-us__container {
    width: 100%;
}

@media (min-width: 1200px) {

    .why-us__container {
        max-width: 1200px;
    }
}

.why-us__container {
    margin-left: auto;
    margin-right: auto;
}

.why-us__inner-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
}

@media (min-width: 768px) {

    .why-us__inner-container {
        width: calc(100% - var(--horizontal-edge-space));
    }
}

.why-us__heading {
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - var(--horizontal-edge-space));
    max-width: 300px;
    text-align: center;
    font-family: Playfair Display, serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 115%;
    letter-spacing: -0.02em;
    color: #000000CC;
}

@media (min-width: 768px) {

    .why-us__heading {
        width: 100%;
        max-width: -moz-max-content;
        max-width: max-content;
        font-size: 44px;
    }
}

.why-us__heading-span {
    font-family: Styrene A, sans-serif;
}

.why-us__grid--desktop {
    margin-top: 60px;
    display: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-left-width: 1px;
    border-left-color: #0000001A;
}

@media (min-width: 640px) {

    .why-us__grid--desktop {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {

    .why-us__grid--desktop {
        display: grid;
    }
}

.why-us__grid-item {
    display: flex;
    aspect-ratio: 200/120;
    align-items: center;
    justify-content: center;
    border-right-width: 1px;
    border-right-color: #0000001A;
}

.why-us__grid-item:nth-child(n+6) {
    border-top-width: 1px;
    border-top-color: #0000001A;
}

.why-us__grid-item img {
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
}

.why-us__marquee--mobile {
    margin-top: 40px;
    overflow: hidden;
}

@media (min-width: 768px) {

    .why-us__marquee--mobile {
        display: none;
    }
}

.why-us__marquee-track {
    display: flex;
    height: 36px;
    align-items: center;
    gap: 1.75rem;
    animation: marquee 20s linear infinite;
}

.why-us__marquee-item {
    height: auto;
    flex-shrink: 0;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}


.callout {
    overflow: hidden;
    /* Section wrapper */
}

.callout__wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1696px;
}

@media (min-width: 768px) {

    .callout__wrapper {
        height: 691px;
    }
}

.callout__content {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    height: 100%;
    width: calc(100% - 32px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    background-size: cover;
}

@media (min-width: 768px) {

    .callout__content {
        flex-direction: row;
    }
}

.callout__inner {
    position: relative;
    z-index: 10;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    max-width: 325px;
}

@media (min-width: 768px) {

    .callout__inner {
        max-width: 424px;
    }
}

.callout__title {
    text-align: center;
    font-family: Playfair Display, serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 115%;
    letter-spacing: -0.01em;
}

@media (min-width: 768px) {

    .callout__title {
        font-size: 56px;
    }
}

.callout__title--italic {
    font-style: italic;
}

.callout__list {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem;
    max-width: 362px;
}

.callout__list > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

@media (min-width: 768px) {

    .callout__list {
        margin-top: 1.75rem;
    }

    .callout__list > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1rem * var(--tw-space-y-reverse));
    }
}

.callout__list-item {
    display: flex;
    gap: 5px;
    font-size: 16px;
    line-height: 140%;
    color: #000000CC;
}

@media (min-width: 768px) {

    .callout__list-item {
        font-size: 18px;
    }
}

.callout__list-icon {
    margin-top: 3px;
    display: flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(136 45 23 / var(--tw-bg-opacity, 1));
}

.callout__button {
    margin-left: auto;
    margin-right: auto;
    margin-top: 28px;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 56 92 / var(--tw-bg-opacity, 1));
    padding-left: 52px;
    padding-right: 52px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 16px;
    font-weight: 600;
    line-height: 125%;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.callout__button:hover {
    background-color: rgb(255 56 92 / 0.9);
}

@media (min-width: 768px) {

    .callout__button {
        margin-top: 48px;
        padding-left: 60px;
        padding-right: 60px;
        padding-top: 18.5px;
        padding-bottom: 18.5px;
        font-size: 18px;
    }
}

.callout-animation--left {
    position: absolute;
    left: 123px;
    top: 50%;
    display: none;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (min-width: 768px) {

    .callout-animation--left {
        display: block;
    }
}

.callout-animation--right {
    position: absolute;
    top: 50%;
    display: none;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (min-width: 768px) {

    .callout-animation--right {
        display: block;
    }
}

.callout-animation--right {
    right: 123px;
}

.callout-path--left,
.callout-path--right {
    visibility: hidden;
}

.callout-path__item {
    position: absolute;
    aspect-ratio: 400/282;
    width: 400px;
    border-radius: 16px;
    background-color: #FFFFFF47;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.625rem;
    --tw-backdrop-blur: blur(4px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    will-change: transform;
}

.callout-path__card {
    aspect-ratio: 384/240;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.callout-path__card-image {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.callout-path__card-label {
    margin-top: 0.625rem;
    display: block;
    padding-left: 0.5rem;
    font-family: Fragment Mono, monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 125%;
    letter-spacing: 0.16em;
    color: #00000099;
}

.callout-marquee--mobile {
    display: block;
    width: 100%;
}

@media (min-width: 768px) {

    .callout-marquee--mobile {
        display: none;
    }
}

.callout-marquee__list {
    display: flex;
    width: -moz-max-content;
    width: max-content;
    align-items: stretch;
    padding-top: 30px;
    padding-bottom: 40px;
    animation: marquee-left 30s linear infinite;
}

.callout-marquee--mobile .callout-path__item {
    position: static;
    margin-right: 1rem;
    width: 280px;
    flex-shrink: 0;
}

@keyframes marquee-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
.faq {
    padding-top: 80px;
    padding-bottom: 80px;
}@media (min-width: 768px) {.faq {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

.faq__container {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    width: calc(100% - 96px);
    max-width: 976px;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {.faq__container {
        flex-direction: row;
        gap: 56px;
    }
}

.faq__title {
    font-family: Playfair Display, serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 115%;
    letter-spacing: -0.02em;
}

@media (min-width: 768px) {.faq__title {
        font-size: 44px;
    }
}

.dark .faq__title {
    --tw-text-opacity: 1;
    color: rgb(238 238 238 / var(--tw-text-opacity, 1));
}

.faq__title-ampersand {
    font-family: Canela, sans-serif;
}

.faq__grid {
    max-width: 824px;
    -moz-columns: 1;
         columns: 1;
    gap: 56px;
}

@media (min-width: 768px) {.faq__grid {
        -moz-columns: 2;
             columns: 2;
    }
}

.faq__item {
    border-bottom-width: 1px;
    border-color: #0000001F;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
}

.dark .faq__item {
    border-bottom-color: #FFFFFF1F;
}

.faq__button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: left;
}

.faq__question {
    font-size: 17px;
    font-weight: 500;
    line-height: 130%;
}

.dark .faq__question {
    --tw-text-opacity: 1;
    color: rgb(204 204 204 / var(--tw-text-opacity, 1));
}

.faq__icon {
    flex-shrink: 0;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.dark .faq__icon path {
    stroke: #FFFFFF52;
}

.faq__item.is-active .faq__icon {
    transform: rotate(180deg);
}



.faq__answer > p {
    overflow: hidden;
    padding-bottom: 1rem;
    font-size: 15px;
    line-height: 160%;
    color: rgb(0 0 0 / 0.7);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.dark .faq__answer > p {
    color: #CCCCCCB3;
}

.faq__item.is-active .faq__answer > p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.faq__spacer {
    height: 80px;
}



/* 本地补丁：静态显示（去掉 JS 动画初始状态）*/
.services-hero__badge,
.services-hero__title,
.services-hero__experience,
.services-grid__card,
.services-platforms,
.services-advantage {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}
.services-advantage__slide { display: none; }
.services-advantage__slide.is-active { display: flex; }

/* === Services 页面本地修复补丁 === */

/* 1. Hero mask 必须 clip 溢出内容 */
.services-hero__mask {
    overflow: hidden !important;
    position: relative !important;
}

/* 2. Hero 整体背景深色 */
.services-hero {
    background-color: #F0EFEB !important;
    color: rgba(0,0,0,0.85) !important;
    position: relative;
}

/* 3. services-grid 卡片间距 */
.services-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media(min-width:768px){
    .services-grid { gap: 32px; }
}

/* 4. services-grid__card-inner 桌面横排 */
@media(min-width:1024px){
    .services-grid__card-inner {
        flex-direction: row !important;
        align-items: center;
    }
    .services-grid__card--alt .services-grid__card-inner {
        flex-direction: row-reverse !important;
    }
}

/* 5. 静态显示（去掉 JS 动画初始隐藏） */
.services-hero__badge,
.services-hero__title .split-word,
.services-hero__experience,
.services-grid__card,
.services-platforms,
.services-advantage {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

/* ================================================================
   SERVICES PAGE — 精确排版修复（对标 neutrl.studio 测量值）
   ================================================================ */

/* 1. 页面背景色 */
body.page-template-page-service-webdesign,
body.page-template-page-service-webdev,
body.page-template-page-service-ecommerce,
.services-page {
    background-color: rgb(240, 239, 235) !important;
    color: rgb(0, 0, 0) !important;
}

/* 2. Hero — 浅色背景，黑色文字 */
.services-hero {
    background-color: #F0EFEB !important;
    color: rgb(0, 0, 0) !important;
    padding-bottom: 80px;
}
.services-hero__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 128px 120px 0;
}

/* 3. Hero badge — 棕色系 */
.services-hero__badge {
    background-color: rgba(171, 85, 8, 0.08) !important;
    color: rgb(136, 45, 23) !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-family: "Fragment Mono", monospace !important;
    letter-spacing: 1.56px !important;
    text-transform: uppercase !important;
    display: inline-block;
}

/* 4. Hero title — 黑色 Playfair Display 56px */
.services-hero__title {
    font-size: 56px !important;
    font-weight: 300 !important;
    font-family: "Playfair Display", Georgia, serif !important;
    color: rgba(0, 0, 0, 0.8) !important;
    line-height: 120% !important;
    margin-top: 16px !important;
    max-width: 700px;
}
.services-hero__title .italic,
.services-hero__title span.italic { font-style: italic; }

.services-hero__mask {
    position: absolute !important;
    top: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}
.services-hero__mask[data-position="right"] { left: 0; }
.services-hero__mask[data-position="left"]  { left: 0; }
.services-hero__scroller--images {
    display: flex !important;
    flex-direction: row !important;
    gap: 60px !important;
    position: absolute !important;
    top: 0; left: 0;
    animation: svc-scroll-left 30s linear infinite;
}
.services-hero__scroller--code {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    position: absolute !important;
    top: 0; left: 0;
    font-family: "Fragment Mono", monospace;
    font-size: 12px;
    color: rgba(0,0,0,0.3);
    line-height: 1.6;
    padding: 12px 16px;
    animation: svc-scroll-up 20s linear infinite;
}
.services-hero__card {
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0 !important;
}
.services-hero__card img { width: 100%; height: 100%; object-fit: cover; }
.whitespace-nowrap { white-space: nowrap; }
@keyframes svc-scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes svc-scroll-up {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

/* 6. Experience 区 */
.services-hero__experience {
    margin-top: 60px !important;
    background-color: transparent !important;
    padding: 0 !important;
}
.services-hero__experience-inner {
    max-width: 792px;
    margin: 0 auto;
    padding: 0 120px;
}
.services-hero__experience-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(0,0,0,0.48) !important;
}
.services-hero__experience-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 16px !important;
    list-style: none;
    padding: 0; margin-left: 0;
}
.services-hero__experience-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 9999px;
    background-color: rgba(171,85,8,0.12);
    flex-shrink: 0;
}
.services-hero__experience-icon svg { color: rgb(136,45,23); }

/* 7. services-grid — 精确排版 */
.services-grid {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 80px 120px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}
.services-grid__card {
    background-color: rgb(255,255,255) !important;
    border-radius: 20px !important;
    padding: 8px !important;
}
.services-grid__card-inner {
    display: flex !important;
    flex-direction: row !important;
    gap: 99px !important;
    align-items: stretch !important;
}
.services-grid__card--alt .services-grid__card-inner {
    flex-direction: row-reverse !important;
}
.services-grid__card-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 50px !important;
    padding: 38px 8px 48px 40px !important;
    max-width: 525px !important;
    flex: 1;
}
.services-grid__card-header { width: calc(100% - 45px); }
.services-grid__card-title {
    font-size: 44px !important;
    font-weight: 300 !important;
    font-family: "Playfair Display", Georgia, serif !important;
    color: rgba(0,0,0,0.8) !important;
    line-height: 115% !important;
    letter-spacing: -0.02em !important;
}
.services-grid__card-desc {
    margin-top: 20px !important;
    font-size: 15px !important;
    line-height: 140% !important;
    color: rgba(0,0,0,0.6) !important;
    max-width: 320px;
}
.services-grid__outcomes-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(4,3,1,0.41) !important;
}
.services-grid__outcomes-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 12px !important;
    list-style: none; padding: 0;
}
.services-grid__outcome {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    background-color: rgb(255,255,255) !important;
    padding: 6px 16px 6px 6px !important;
}
.services-grid__outcome-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(136,45,23,0.1);
    flex-shrink: 0;
}
.services-grid__outcome-icon svg { width: 14px; height: 14px; color: rgb(136,45,23); }
.services-grid__outcome-icon img { width: 100%; height: 100%; object-fit: contain; }
.services-grid__outcome-text {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: rgb(85,85,85) !important;
}
.services-grid__stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-top: 8px !important;
}
.services-grid__stat {
    background-color: rgba(0,0,0,0.03) !important;
    border-radius: 12px !important;
    padding: 24px 32px !important;
}
.services-grid__stat-value {
    font-size: 28px !important;
    font-weight: 500 !important;
    color: rgba(0,0,0,0.8) !important;
    line-height: 140%;
}
.services-grid__stat-label {
    font-size: 14px !important;
    color: rgba(0,0,0,0.6) !important;
    margin-top: 2px;
    line-height: 140%;
}
.services-grid__card-image {
    aspect-ratio: 1 / 1 !important;
    width: 520px !important;
    flex-shrink: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background-color: rgba(0,0,0,0.04);
}
.services-grid__card-image img {
    width: 100%; height: 100%; object-fit: cover;
}

/* 8. services-platforms */
.services-platforms {
    padding: 80px 0 !important;
    background-color: transparent !important;
}
.services-platforms__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 120px;
}
.services-platforms__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}
.services-platforms__title {
    font-size: 44px !important;
    font-weight: 300 !important;
    font-family: "Playfair Display", Georgia, serif !important;
    color: rgba(0,0,0,0.8) !important;
    max-width: 500px;
}
.services-platforms__title-italic { font-style: italic; }
.services-platforms__cta--desktop {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 8px;
    flex-shrink: 0;
}
.services-platforms__cta-text {
    font-size: 15px;
    color: rgba(0,0,0,0.6);
}
.services-platforms__cta-btn {
    display: inline-block;
    background-color: rgb(255,56,92);
    color: #fff;
    border-radius: 9999px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
.services-platforms__list {
    display: grid !important;
    grid-template-columns: repeat(4, auto) !important;
    gap: 20px 24px !important;
    margin-top: 40px;
    list-style: none; padding: 0;
}
.services-platforms__item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 28px !important;
    height: 64px;
    border-radius: 28px 8px !important;
    background-color: rgb(255,255,255) !important;
}
.services-platforms__item-icon { display: flex; align-items: center; }
.services-platforms__item-icon img { width: 24px; height: 24px; object-fit: contain; }
.services-platforms__item-name {
    font-size: 15px;
    font-weight: 500;
    color: rgba(0,0,0,0.8);
}
.services-platforms__cta--mobile { display: none; }

/* 9. services-advantage */
.services-advantage {
    padding: 80px 0 !important;
    background-color: transparent !important;
}
.services-advantage__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 48px;
}
.services-advantage__title {
    font-size: 44px !important;
    font-weight: 300 !important;
    font-family: "Playfair Display", Georgia, serif !important;
    color: rgba(0,0,0,0.8) !important;
}
.services-advantage__title-brand {
    font-family: "Styrene A", "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
}
.services-advantage__nav {
    display: flex;
    gap: 8px;
}
.services-advantage__nav-btn {
    width: 40px; height: 40px;
    border-radius: 9999px;
    border: 1px solid rgba(0,0,0,0.15);
    background: white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}
.services-advantage__nav-btn:hover { background: rgba(0,0,0,0.05); }
.services-advantage__slides {
    position: relative;
    min-height: 400px;
}
.services-advantage__slide {
    display: none !important;
    flex-direction: row;
    gap: 80px;
    align-items: center;
}
.services-advantage__slide.is-active {
    display: flex !important;
}
.services-advantage__slide-title {
    font-size: 19px !important;
    font-weight: 500 !important;
    color: rgba(0,0,0,0.8) !important;
    margin-bottom: 24px;
}
.services-advantage__slide-image {
    flex: 1;
    border-radius: 16px;
    overflow: hidden;
    max-width: 560px;
}
.services-advantage__slide-image img { width: 100%; height: auto; display: block; }
.services-advantage__slide-desc {
    font-size: 15px !important;
    color: rgb(85,85,85) !important;
    line-height: 160%;
    max-width: 400px;
}

/* Advantage slider JS */

/* 10. FAQ */
.faq {
    padding: 80px 0 !important;
    background-color: transparent !important;
}
.faq__container {
    max-width: 976px !important;
    margin: 0 auto !important;
    padding: 0 120px;
    display: flex !important;
    flex-direction: row !important;
    gap: 56px !important;
    align-items: flex-start;
}
.faq__title {
    font-size: 44px !important;
    font-weight: 300 !important;
    font-family: "Playfair Display", Georgia, serif !important;
    color: rgba(0,0,0,0.8) !important;
    line-height: 115%;
    flex-shrink: 0;
    max-width: 240px;
}
.faq__title-ampersand { font-family: "Canela", Georgia, serif; font-style: italic; }
.faq__grid {
    columns: 1 !important;
    max-width: 824px !important;
    flex: 1;
}
.faq__item {
    border-bottom: 1px solid rgba(0,0,0,0.12) !important;
}
.faq__button {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 16px 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}
.faq__question {
    font-size: 17px !important;
    font-weight: 500 !important;
    color: rgba(0,0,0,0.8) !important;
    line-height: 130%;
}
.faq__icon {
    flex-shrink: 0;
    transition: transform 0.3s;
    color: rgba(0,0,0,0.4);
}
.faq__item.is-active .faq__icon { transform: rotate(180deg); }

.faq__answer > p {
    overflow: hidden;
    padding-bottom: 16px;
    font-size: 15px;
    line-height: 160%;
    color: rgba(0,0,0,0.7);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.faq__item.is-active .faq__answer > p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

/* === Code scroller 隐藏（原站用 JS 控制，静态版直接隐藏左侧 code mask） === */
.services-hero__mask[data-position="left"] {
    display: none !important;
}
/* 右侧图片 mask 独占全宽 */
.services-hero__mask[data-position="right"] {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

/* === services-grid 精调 === */

/* 卡片内横排，图片区拉伸填满高度 */
.services-grid__card-inner {
    align-items: stretch !important;
}
.services-grid__card-image {
    aspect-ratio: unset !important;
    width: 460px !important;
    min-height: 400px !important;
    flex-shrink: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    align-self: stretch !important;
    background-color: rgba(0,0,0,0.04) !important;
}

/* outcomes 两行两列 */
.services-grid__outcomes-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
}
.services-grid__outcome {
    width: 100% !important;
}

/* card content 最大宽度放开，让两列正常撑开 */
.services-grid__card-content {
    max-width: none !important;
    flex: 1 !important;
    min-width: 0 !important;
    padding: 40px !important;
    gap: 32px !important;
}

/* card gap 缩小 */
.services-grid__card-inner {
    gap: 0 !important;
}

/* === services-grid stats 全宽修复（stats 是 card 直接子元素，不在 content 内） === */
.services-grid__card {
    display: flex !important;
    flex-direction: column !important;
}
.services-grid__card-inner {
    flex: 1;
}
.services-grid__stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 0 8px 8px !important;   /* 和 card 的 padding:8px 对齐，stats 贴底部 */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* === 最终精修：grid容器和outcome宽度 === */

/* grid 用 margin 而非 padding，让 card 撑满 1200px */
.services-grid {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 80px 0 !important;
    width: calc(100% - 240px) !important;
}

/* outcome pill 宽度：不用2列，用 flex-wrap 自动换行 */
.services-grid__outcomes-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 12px !important;
    grid-template-columns: unset !important;
}
.services-grid__outcome {
    width: auto !important;
    white-space: nowrap;
}

/* === 最终精修 v2 === */

/* outcomes 严格 2x2 grid，pill 内文字不换行 */
.services-grid__outcomes-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
    flex-wrap: unset !important;
    flex-direction: unset !important;
}
.services-grid__outcome {
    white-space: nowrap;
    min-width: 0;
}
.services-grid__outcome-text {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* stats 强制 3 列等分，确保铺满 inner 宽度 */
.services-grid__stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 8px 8px !important;
    margin-top: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.services-grid__stat {
    min-width: 0;
}

/* card-content max-width 放开一点，给 outcomes 足够宽度 */
.services-grid__card-content {
    max-width: 560px !important;
    padding: 40px 32px 40px 40px !important;
}

/* ===== PLATFORM PAGES CSS ===== */
/* ==========================================================================
   PLATFORM HERO
   ========================================================================== */



.platform-hero__bg {

    position: absolute;

    left: 0px;

    top: 0px;

    min-height: 836px;

    width: 100vw;

    overflow-x: hidden
}

.platform-hero__header {

    width: 100%
}

@media (min-width: 1200px) {

    .platform-hero__header {

        max-width: 1200px
    }
}

.platform-hero__header {

    margin-left: auto;

    margin-right: auto;

    padding-top: 104px
}

@media (min-width: 768px) {

    .platform-hero__header {

        width: calc(100% - var(--horizontal-edge-space));

        padding-top: 128px
    }
}

.platform-hero__content {

    margin-left: auto;

    margin-right: auto;

    max-width: 996px
}

.platform-hero__content-inner {

    margin-left: auto;

    margin-right: auto;

    width: calc(100% - var(--horizontal-edge-space));

    max-width: 690px
}

@media (min-width: 768px) {

    .platform-hero__content-inner {

        margin-left: 0px;

        margin-right: 0px;

        width: 100%
    }
}

.platform-hero__badge {

    border-radius: 6px;

    background-color: rgb(171 85 8 / var(--tw-bg-opacity, 1));

    --tw-bg-opacity: .08;

    padding-left: 0.625rem;

    padding-right: 0.625rem;

    padding-top: 0.25rem;

    padding-bottom: 0.25rem;

    font-family: Fragment Mono, monospace;

    font-size: 0.75rem;

    line-height: 1rem;

    text-transform: uppercase;

    letter-spacing: 0.13em;

    --tw-text-opacity: 1;

    color: rgb(136 45 23 / var(--tw-text-opacity, 1));

    opacity: 0;

    --tw-blur: blur(8px);

    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.platform-hero__title {

    margin-top: 1rem;

    font-family: Playfair Display, serif;

    font-size: 36px;

    font-weight: 300;

    line-height: 120%;

    letter-spacing: -0.01em
}

@media (min-width: 768px) {

    .platform-hero__title {

        font-size: 56px
    }
}

.platform-hero__title .split-word {

    --tw-translate-x: 0.75rem;

    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

    opacity: 0
}

.platform-hero__brand-wrapper {

    position: relative;

    margin-top: 60px;

    overflow: hidden;

    border-radius: 8px;

    padding-top: 0.75rem;

    padding-bottom: 0.75rem;

    opacity: 0
}

@media (min-width: 768px) {

    .platform-hero__brand-wrapper {

        margin-top: 100px;

        border-width: 1px;

        border-color: #0000001A
    }
}

.platform-hero__brand-track {

    display: flex
}

@keyframes marquee {

    0% {

        transform: translateX(0)
    }

    100% {

        transform: translateX(-100%)
    }
}

.platform-hero__brand-track {

    animation: marquee 25s linear infinite;

    align-items: center;

    gap: 36px
}

.platform-hero__brand-list {

    display: flex;

    flex-shrink: 0;

    align-items: center;

    gap: 36px
}

.platform-hero__brand-item {

    --tw-translate-x: 0.75rem;

    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

    -o-object-fit: contain;

       object-fit: contain;

    opacity: 0
}

.platform-hero__featured-wrapper--desktop {

    position: relative;

    margin-left: auto;

    margin-right: auto;

    margin-top: 2.5rem;

    display: none;

    aspect-ratio: 1440/675;

    width: calc(100% - var(--horizontal-edge-space))
}

@media (min-width: 768px) {

    .platform-hero__featured-wrapper--desktop {

        display: block
    }
}

.platform-hero__featured-wrapper--desktop .platform-hero__featured {

    margin-left: auto;

    margin-right: auto;

    height: auto;

    width: 100%;

    overflow: hidden;

    border-radius: 12px
}

@media (min-width: 768px) {

    .platform-hero__featured-wrapper--desktop .platform-hero__featured {

        border-radius: 28px
    }
}

.platform-hero__featured-wrapper--desktop .platform-hero__featured-image {

    height: auto;

    width: 100%;

    -o-object-fit: cover;

       object-fit: cover
}

.platform-hero__featured-wrapper--desktop .platform-hero__featured-card {

    width: 100%
}

@media (min-width: 1200px) {

    .platform-hero__featured-wrapper--desktop .platform-hero__featured-card {

        max-width: 1200px
    }
}

.platform-hero__featured-wrapper--desktop .platform-hero__featured-card {

    position: absolute;

    bottom: 64px;

    left: 50%;

    display: grid;

    width: calc(100% - 48px);

    --tw-translate-x: -50%;

    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

    gap: 1rem
}

@media (min-width: 768px) {

    .platform-hero__featured-wrapper--desktop .platform-hero__featured-card {

        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (min-width: 1024px) {

    .platform-hero__featured-wrapper--desktop .platform-hero__featured-card {

        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

.platform-hero__card {

    display: flex;

    gap: 0.5rem;

    border-radius: 12px;

    border-width: 1px;

    border-color: #FFFFFF29;

    background-color: #FFFFFF0D;

    padding-top: 14px;

    padding-bottom: 14px;

    padding-left: 18px;

    padding-right: 18px;

    --tw-backdrop-blur: blur(16px);

    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.platform-hero__card--dark {

    background-color: rgba(0,0,0,0.24)
}

.platform-hero__card-icon {

    width: 1.5rem;

    height: 1.5rem;

    flex-shrink: 0
}

.platform-hero__card-icon img {

    height: 100%;

    width: 100%;

    -o-object-fit: contain;

       object-fit: contain
}

.platform-hero__card-title {

    font-size: 16px;

    font-weight: 500;

    line-height: 130%;

    color: #FFFFFFCC
}

.platform-hero__card-desc {

    margin-top: 0.25rem;

    font-size: 15px;

    line-height: 130%;

    color: #FFFFFF99
}

.platform-hero__featured-wrapper--mobile {

    position: relative;

    z-index: 10;

    margin-left: auto;

    margin-right: auto;

    margin-top: 2rem;

    display: block;

    aspect-ratio: 1 / 1;

    width: calc(100% - var(--horizontal-edge-space));

    overflow: hidden;

    border-radius: 12px
}

@media (min-width: 768px) {

    .platform-hero__featured-wrapper--mobile {

        display: none
    }
}

.platform-hero__featured-wrapper--mobile .platform-hero__featured-image {

    height: 100%;

    width: 100%;

    -o-object-fit: cover;

       object-fit: cover
}

/* ==========================================================================
   PLATFORM WHY
   ========================================================================== */

.platform-why {

    overflow: hidden
}

.platform-why__container {

    width: 100%
}

@media (min-width: 1200px) {

    .platform-why__container {

        max-width: 1200px
    }
}

.platform-why__container {

    margin-left: auto;

    margin-right: auto;

    width: calc(100% - var(--horizontal-edge-space));

    overflow: visible !important;

    padding-top: 80px !important;

    padding-bottom: 80px !important
}

@media (min-width: 768px) {

    .platform-why__container {

        padding-top: 80px !important
    }
}

.platform-why__header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 48px
}





@media (min-width: 768px) {

    
}

.platform-why__desc {

    max-width: 384px;

    font-size: 16px;

    line-height: 150%;

    color: #00000099
}

.platform-why__nav {

    display: flex;

    gap: 0.625rem
}

.platform-why__nav-btn {

    display: flex;

    width: 48px;

    height: 48px;

    align-items: center;

    justify-content: center;

    border-radius: 9999px;

    border-width: 1px;

    border-color: transparent;

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms
}

.platform-why__nav-btn path {

    stroke: #882D17;

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms
}

.platform-why__nav-btn--disabled {

    border-color: #0000001A;

    background-color: transparent
}

.platform-why__nav-btn--disabled path {

    stroke: #000;

    opacity: 0.32
}

/* Swiper compatibility */

.platform-why__nav-btn.swiper-button-disabled {

    border-color: #0000001A;

    background-color: transparent
}

.platform-why__nav-btn.swiper-button-disabled path {

    stroke: #000;

    opacity: 0.32
}

.platform-why__slider {

    margin-top: 24px;

    overflow: visible
}

@media (min-width: 768px) {

    .platform-why__slider {

        margin-top: 2.5rem
    }
}

.platform-why__slide {

    height: auto !important;

    max-width: 282px;

    border-radius: 16px;

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));

    padding: 0.5rem
}

.platform-why__slide-image {

    aspect-ratio: 266/166.25;

    width: 100%;

    overflow: hidden;

    border-radius: 8px;

    background-color: #00000099
}

.platform-why__slide-image img {

    height: 100%;

    width: 100%;

    -o-object-fit: cover;

       object-fit: cover
}

.platform-why__slide-content {

    padding-left: 0.75rem;

    padding-right: 0.75rem;

    padding-top: 1rem;

    padding-bottom: 7.75px
}

.platform-why__slide-title {

    font-size: 17px;

    font-weight: 500;

    line-height: 130%;

    letter-spacing: -0.02em;

    color: #000000CC
}

/* ==========================================================================
   PLATFORM COMPARISON
   ========================================================================== */

.platform-comparison {

    padding-top: 40px;

    padding-bottom: 80px
}

@media (min-width: 768px) {

    .platform-comparison {

        padding-top: 80px
    }
}

.platform-comparison__container {

    width: 100%
}

@media (min-width: 1200px) {

    .platform-comparison__container {

        max-width: 1200px
    }
}

.platform-comparison__container {

    margin-left: auto;

    margin-right: auto
}

.platform-comparison__header {

    margin-left: auto;

    margin-right: auto;

    width: calc(100% - var(--horizontal-edge-space));

    max-width: 486px
}

.platform-comparison__badge {

    margin-left: auto;

    margin-right: auto;

    display: block;

    width: -moz-fit-content;

    width: fit-content;

    border-radius: 6px;

    background-color: rgb(171 85 8 / var(--tw-bg-opacity, 1));

    --tw-bg-opacity: .08;

    padding-left: 0.625rem;

    padding-right: 0.625rem;

    padding-top: 0.25rem;

    padding-bottom: 0.25rem;

    font-family: Fragment Mono, monospace;

    font-size: 0.75rem;

    line-height: 1rem;

    text-transform: uppercase;

    letter-spacing: 0.13em;

    --tw-text-opacity: 1;

    color: rgb(136 45 23 / var(--tw-text-opacity, 1))
}

.platform-comparison__title {

    margin-top: 1rem;

    text-align: center;

    font-family: Playfair Display, serif;

    font-size: 30px;

    font-weight: 300;

    line-height: 115%;

    letter-spacing: -0.02em;

    color: #000000CC
}

@media (min-width: 768px) {

    .platform-comparison__title {

        font-size: 44px
    }
}

.platform-comparison__content {

    margin-top: 1.5rem
}

@media (min-width: 768px) {

    .platform-comparison__content {

        margin-top: 2.5rem
    }
}

.platform-comparison__grid {

    margin-left: auto;

    margin-right: auto;

    display: grid;

    width: calc(100% - var(--horizontal-edge-space));

    max-width: 894px;

    grid-template-columns: repeat(1, minmax(0, 1fr));

    gap: 1.5rem
}

@media (min-width: 768px) {

    .platform-comparison__grid {

        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

/* Card Block */

.platform-comparison__card {

    position: relative;

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding-left: 1.25rem;

    padding-right: 1.25rem;

    padding-top: 1rem;

    padding-bottom: 1rem
}

.platform-comparison__card-bg {

    position: absolute;

    top: 0px;

    left: 0px;

    height: 100%;

    width: 100%;

    border-radius: 20px;

    background-image: linear-gradient(to top, var(--tw-gradient-stops));

    --tw-gradient-from: transparent var(--tw-gradient-from-position);

    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);

    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

    --tw-gradient-to: #FFFFFF80 var(--tw-gradient-to-position)
}

.platform-comparison__card--active .platform-comparison__card-bg {

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

/* Legacy support for .active class */

.platform-comparison__card.active .platform-comparison__card-bg {

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.platform-comparison__card-content {

    position: relative;

    z-index: 10;

    width: 100%
}

.platform-comparison__card-header {

    display: flex;

    align-items: center;

    gap: 6px
}

.platform-comparison__card-icon {

    position: relative;

    display: flex;

    max-height: 22px;

    flex-direction: column;

    justify-content: center
}

.platform-comparison__card-icon img {

    height: auto;

    max-height: 22px
}

.platform-comparison__card-title {

    font-size: 22px;

    font-weight: 500;

    line-height: 115%;

    letter-spacing: -0.04em
}

.platform-comparison__card-rating {

    margin-top: 1.5rem
}

.platform-comparison__card-rating > :not([hidden]) ~ :not([hidden]) {

    --tw-space-y-reverse: 0;

    margin-top: calc(11px * calc(1 - var(--tw-space-y-reverse)));

    margin-bottom: calc(11px * var(--tw-space-y-reverse))
}

.platform-comparison__card-action {

    margin-top: 1.25rem;

    display: block;

    width: 100%;

    cursor: pointer;

    border-radius: 9999px;

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));

    padding-left: 1rem;

    padding-right: 1rem;

    padding-top: 13px;

    padding-bottom: 13px;

    text-align: center;

    font-size: 15px;

    font-weight: 600;

    line-height: 100%;

    --tw-text-opacity: 1;

    color: rgb(255 56 92 / var(--tw-text-opacity, 1))
}

.platform-comparison__card--active .platform-comparison__card-action {

    --tw-bg-opacity: 1;

    background-color: rgb(255 56 92 / var(--tw-bg-opacity, 1));

    --tw-text-opacity: 1;

    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.platform-comparison__card.active .platform-comparison__card-action {

    --tw-bg-opacity: 1;

    background-color: rgb(255 56 92 / var(--tw-bg-opacity, 1));

    --tw-text-opacity: 1;

    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

/* Rating Block (nested within card) */

.platform-comparison__rating {

    margin-top: 7px;

    display: flex;

    gap: 0.25rem
}

.platform-comparison__rating-title {

    font-size: 15px;

    font-weight: 500;

    line-height: 115%;

    letter-spacing: -0.02em;

    --tw-text-opacity: 1;

    color: rgb(85 85 85 / var(--tw-text-opacity, 1))
}

.platform-comparison__rating-item {

    position: relative;

    width: 1.25rem;

    height: 1.25rem;

    border-radius: 9999px;

    border-width: 1.5px;

    border-color: #00000066
}

.platform-comparison__card--active .platform-comparison__rating-item:not(.platform-comparison__rating-item--inactive) {

    --tw-border-opacity: 1;

    border-color: rgb(136 45 23 / var(--tw-border-opacity, 1))
}

.platform-comparison__card.active .platform-comparison__rating-item:not(.inactive) {

    --tw-border-opacity: 1;

    border-color: rgb(136 45 23 / var(--tw-border-opacity, 1))
}

.platform-comparison__rating-dot {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 0.75rem;

    height: 0.75rem;

    --tw-translate-x: -50%;

    --tw-translate-y: -50%;

    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

    border-radius: 9999px;

    background-color: #00000066
}

.platform-comparison__card--active .platform-comparison__rating-dot {

    --tw-bg-opacity: 1;

    background-color: rgb(136 45 23 / var(--tw-bg-opacity, 1))
}

.platform-comparison__card.active .platform-comparison__rating-dot {

    --tw-bg-opacity: 1;

    background-color: rgb(136 45 23 / var(--tw-bg-opacity, 1))
}

/* ==========================================================================
   PLATFORM ADVANTAGE
   ========================================================================== */

.platform-advantage {

    padding-top: 0px;

    padding-bottom: 80px
}

@media (min-width: 768px) {

    .platform-advantage {

        padding-top: 80px;

        padding-bottom: 80px
    }
}

.platform-advantage__container {

    width: 100%
}

@media (min-width: 1200px) {

    .platform-advantage__container {

        max-width: 1200px
    }
}

.platform-advantage__container {

    margin-left: auto;

    margin-right: auto;

    width: calc(100% - var(--horizontal-edge-space))
}

.platform-advantage__flex {

    display: flex;

    width: 100%;

    flex-direction: column;

    gap: 1.75rem
}

@media (min-width: 1024px) {

    .platform-advantage__flex {

        flex-direction: row
    }
}

.platform-advantage__header {

    display: flex;

    align-items: center;

    gap: 0.375rem
}

@media (min-width: 768px) {

    .platform-advantage__header {

        margin-top: 1.5rem
    }
}

.platform-advantage__header-dot {

    width: 5px;

    height: 5px;

    border-radius: 9999px;

    --tw-bg-opacity: 1;

    background-color: rgb(136 45 23 / var(--tw-bg-opacity, 1))
}

.platform-advantage__title {

    max-width: 184px;

    flex-shrink: 0;

    font-size: 15px;

    font-weight: 500;

    line-height: 150%;

    letter-spacing: -0.02em;

    --tw-text-opacity: 1;

    color: rgb(136 45 23 / var(--tw-text-opacity, 1))
}

.platform-advantage__content {

    display: flex;

    min-height: 480px;

    flex: 1 1 0%;

    flex-direction: column;

    align-items: stretch
}

@media (min-width: 768px) {

    .platform-advantage__content {

        flex-direction: row;

        gap: 1.5rem
    }
}

.platform-advantage__card {

    display: flex;

    flex: 1 1 0%;

    flex-direction: column;

    justify-content: space-between;

    border-radius: 28px;

    background-color: #FFFFFF99;

    padding: 1.75rem
}

.platform-advantage__card:first-child {

    border-bottom-right-radius: 0px;

    border-bottom-left-radius: 0px
}

@media (min-width: 768px) {

    .platform-advantage__card:first-child {

        border-bottom-right-radius: 28px;

        border-bottom-left-radius: 28px
    }
}

.platform-advantage__card:last-child {

    border-top-left-radius: 0px;

    border-top-right-radius: 0px
}

@media (min-width: 768px) {

    .platform-advantage__card:last-child {

        border-top-left-radius: 28px;

        border-top-right-radius: 28px
    }
}

.platform-advantage__card--highlight {

    width: 100%;

    flex-shrink: 0;

    overflow: hidden;

    padding: 0px
}

@media (min-width: 768px) {

    .platform-advantage__card--highlight {

        max-width: 384px
    }
}

.platform-advantage__card-image {

    height: 100%;

    width: 100%;

    -o-object-fit: cover;

       object-fit: cover
}

.platform-advantage__stats {

    display: flex;

    gap: 18px
}

.platform-advantage__stat {

    border-left-width: 2px;

    border-left-color: #0000001A;

    padding-left: 0.625rem
}

.platform-advantage__stat-value {

    font-size: 24px;

    font-weight: 500;

    line-height: 120%;

    letter-spacing: -0.02em;

    color: #000000CC
}

.platform-advantage__stat-label {

    font-size: 14px;

    font-weight: 500;

    line-height: 140%;

    color: #0000007A
}

.platform-advantage__desc-wrapper {

    margin-top: 1.5rem;

    max-width: 420px
}

.platform-advantage__desc {

    max-width: 384px;

    font-size: 14px;

    font-weight: 500;

    line-height: 150%;

    color: #00000099
}

@media (min-width: 768px) {

    .platform-advantage__desc {

        font-size: 15px
    }
}

.platform-advantage__features {

    margin-top: 1.75rem;

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem
}

.platform-advantage__feature {

    display: flex;

    flex-wrap: nowrap;

    align-items: center;

    gap: 7px
}

.platform-advantage__feature-text {

    white-space: nowrap;

    font-size: 14px;

    font-weight: 500;

    line-height: 140%;

    color: #000000CC
}

@media (min-width: 768px) {

    .platform-advantage__feature-text {

        font-size: 15px
    }
}

/* ==========================================================================
   PLATFORM EXPERTISE
   ========================================================================== */

.platform-expertise {

    padding-top: 0px;

    padding-bottom: 80px
}

@media (min-width: 768px) {

    .platform-expertise {

        padding-top: 80px
    }
}

.platform-expertise__container {

    width: 100%
}

@media (min-width: 1200px) {

    .platform-expertise__container {

        max-width: 1200px
    }
}

.platform-expertise__container {

    margin-left: auto;

    margin-right: auto;

    width: calc(100% - var(--horizontal-edge-space))
}

.platform-expertise__header {

    margin-left: auto;

    margin-right: auto;

    width: 100%;

    max-width: 588px
}

.platform-expertise__badge {

    margin-left: auto;

    margin-right: auto;

    display: block;

    width: -moz-fit-content;

    width: fit-content;

    border-radius: 6px;

    background-color: rgb(171 85 8 / var(--tw-bg-opacity, 1));

    --tw-bg-opacity: .08;

    padding-left: 0.625rem;

    padding-right: 0.625rem;

    padding-top: 0.25rem;

    padding-bottom: 0.25rem;

    font-family: Fragment Mono, monospace;

    font-size: 0.75rem;

    line-height: 1rem;

    text-transform: uppercase;

    letter-spacing: 0.13em;

    --tw-text-opacity: 1;

    color: rgb(136 45 23 / var(--tw-text-opacity, 1))
}

.platform-expertise__title {

    margin-top: 1rem;

    text-align: center;

    font-family: Playfair Display, serif;

    font-size: 30px;

    font-weight: 300;

    line-height: 115%;

    letter-spacing: -0.02em;

    color: #000000CC
}

@media (min-width: 768px) {

    .platform-expertise__title {

        font-size: 44px
    }
}

.platform-expertise__list {

    margin-left: auto;

    margin-right: auto;

    margin-top: 40px;

    display: flex;

    max-width: 996px;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    -moz-column-gap: 2rem;

         column-gap: 2rem;

    row-gap: 1.75rem
}

@media (min-width: 768px) {

    .platform-expertise__list {

        margin-top: 60px
    }
}

.platform-expertise__item {

    display: flex;

    align-items: center;

    gap: 0.375rem
}

@media (min-width: 768px) {

    .platform-expertise__item {

        gap: 0.625rem
    }
}

.platform-expertise__item-icon {

    width: 28px;

    height: 28px;

    overflow: hidden;

    border-radius: 9999px
}

@media (min-width: 768px) {

    .platform-expertise__item-icon {

        width: 36px;

        height: 36px
    }
}

.platform-expertise__item-icon img {

    height: 100%;

    width: 100%;

    -o-object-fit: cover;

       object-fit: cover
}

.platform-expertise__item-text {

    font-size: 15px;

    line-height: 150%;

    color: #00000099
}

/* ==========================================================================
   PLATFORM WORK
   ========================================================================== */

.platform-work {

    display: block;

    overflow: hidden
}

.platform-work__container {

    position: relative;

    margin-left: auto;

    margin-right: auto;

    margin-top: 80px;

    margin-bottom: 80px;

    height: 640px;

    max-width: 1360px
}

@media (min-width: 768px) {

    .platform-work__container {

        height: 888px
    }
}

.platform-work__inner {

    position: relative;

    display: flex;

    height: 100%;

    align-items: center;

    justify-content: center
}

.platform-work__path {

    visibility: hidden;

    position: absolute;

    top: 50%;

    left: 50%;

    height: 100%;

    width: 800px;

    --tw-translate-x: -50%;

    --tw-translate-y: -50%;

    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@media (min-width: 768px) {

    .platform-work__path {

        width: 1200px
    }
}

.platform-work__card {

    position: absolute;

    aspect-ratio: 384/240;

    width: 254px;

    --tw-scale-x: .5;

    --tw-scale-y: .5;

    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

    overflow: hidden;

    border-radius: 8px;

    opacity: 0;

    --tw-blur: blur(8px);

    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

    will-change: transform
}

@media (min-width: 768px) {

    .platform-work__card {

        width: 384px
    }
}

.platform-work__card-image {

    height: 100%;

    width: 100%;

    -o-object-fit: cover;

       object-fit: cover
}

.platform-work__content {

    position: relative;

    z-index: 10;

    margin-left: auto;

    margin-right: auto;

    width: calc(100% - var(--horizontal-edge-space));

    max-width: 280px
}

@media (min-width: 768px) {

    .platform-work__content {

        width: 100%;

        max-width: 336px
    }
}

.platform-work__badge {

    margin-left: auto;

    margin-right: auto;

    display: block;

    width: -moz-fit-content;

    width: fit-content;

    border-radius: 6px;

    background-color: rgb(171 85 8 / var(--tw-bg-opacity, 1));

    --tw-bg-opacity: .08;

    padding-left: 0.625rem;

    padding-right: 0.625rem;

    padding-top: 0.25rem;

    padding-bottom: 0.25rem;

    font-family: Fragment Mono, monospace;

    font-size: 0.75rem;

    line-height: 1rem;

    text-transform: uppercase;

    letter-spacing: 0.13em;

    --tw-text-opacity: 1;

    color: rgb(136 45 23 / var(--tw-text-opacity, 1))
}

.platform-work__title {

    margin-top: 1rem;

    text-align: center;

    font-family: Playfair Display, serif;

    font-size: 30px;

    font-weight: 300;

    line-height: 115%;

    letter-spacing: -0.02em
}

@media (min-width: 768px) {

    .platform-work__title {

        font-size: 44px
    }
}

.platform-work__title-italic {

    font-style: italic
}

.platform-work__link {

    position: relative;

    margin-left: auto;

    margin-right: auto;

    margin-top: 1.5rem;

    display: flex;

    width: -moz-fit-content;

    width: fit-content;

    cursor: pointer;

    gap: 0.125rem;

    overflow: hidden;

    border-radius: 9999px;

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));

    padding-left: 1rem;

    padding-right: 1rem;

    padding-top: 9px;

    padding-bottom: 9px;

    font-size: 15px;

    font-weight: 500;

    line-height: 125%;

    --tw-text-opacity: 1;

    color: rgb(255 56 92 / var(--tw-text-opacity, 1));

    color: #000000CC
}

.platform-work__link-text {

    display: flex;

    transition-property: transform;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms;

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}

.platform-work__link-text svg {

    margin-left: 0.125rem
}

.platform-work__link:hover .platform-work__link-text {

    --tw-translate-y: -0.75rem;

    --tw-scale-x: .75;

    --tw-scale-y: .75;

    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.platform-work__link-blob {

    pointer-events: none;

    position: absolute;

    left: 50%;

    bottom: 0px;

    aspect-ratio: 1 / 1;

    width: calc(100% + 10px);

    --tw-translate-x: -50%;

    --tw-translate-y: 50%;

    --tw-scale-x: 0;

    --tw-scale-y: 0;

    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

    -webkit-user-select: none;

       -moz-user-select: none;

            user-select: none;

    border-radius: 9999px;

    --tw-bg-opacity: 1;

    background-color: rgb(255 56 92 / var(--tw-bg-opacity, 1));

    transition-property: transform;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 300ms;

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}

.platform-work__link:hover .platform-work__link-blob {

    --tw-scale-x: 1;

    --tw-scale-y: 1;

    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.platform-work__link-overlay {

    position: absolute;

    left: 50%;

    display: flex;

    width: 100%;

    --tw-translate-x: -50%;

    --tw-translate-y: 0.75rem;

    --tw-scale-x: .75;

    --tw-scale-y: .75;

    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

    justify-content: center;

    --tw-text-opacity: 1;

    color: rgb(255 255 255 / var(--tw-text-opacity, 1));

    transition-property: transform;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms;

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}

.platform-work__link-overlay svg {

    margin-left: 0.125rem
}

.platform-work__link:hover .platform-work__link-overlay {

    --tw-translate-y: 0px;

    --tw-scale-x: 1;

    --tw-scale-y: 1;

    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.platform-page__spacer {

    height: 80px
}


.testimonials {
    padding-top: 80px;
    padding-bottom: 80px
}
@media (min-width: 768px) {
    .testimonials {
        padding-bottom: 160px
    }
}

.testimonials__container {
    width: 100%
}

@media (min-width: 1200px) {
    .testimonials__container {
        max-width: 1200px
    }
}

.testimonials__container {
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 80px)
}

.testimonials__header {
    margin-left: auto;
    margin-right: auto;
    max-width: 486px
}

.testimonials__badge {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 6px;
    background-color: #AB550814;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    text-align: center;
    font-family: Fragment Mono, monospace;
    font-size: 11px;
    text-transform: uppercase;
    line-height: 115%;
    letter-spacing: 0.16em;
    --tw-text-opacity: 1;
    color: rgb(136 45 23 / var(--tw-text-opacity, 1))
}

@media (min-width: 768px) {
    .testimonials__badge {
        font-size: 12px
    }
}

.testimonials__title {
    margin-top: 0.625rem;
    text-align: center;
    font-family: Playfair Display, serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 115%;
    letter-spacing: -0.02em
}

@media (min-width: 768px) {
    .testimonials__title {
        font-size: 40px
    }
}

.testimonials__title-italic {
    font-style: italic
}

.testimonials__grid {
    margin-top: 32px;
    -moz-columns: 1;
         columns: 1;
    gap: 1rem
}

@media (min-width: 768px) {
    .testimonials__grid {
        margin-top: 40px;
        -moz-columns: 4;
             columns: 4
    }
}

.testimonials__card {
    margin-bottom: 1rem;
    display: flex;
    height: -moz-fit-content;
    height: fit-content;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 12px;
    border-bottom-width: 1px;
    border-color: #0000001A;
    background-color: #FFFFFF99;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem
}

.testimonials__card-text {
    font-size: 15px;
    line-height: 140%;
    --tw-text-opacity: 1;
    color: rgb(85 85 85 / var(--tw-text-opacity, 1))
}

.testimonials__card-footer {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem
}

.testimonials__card-footer div:first-child {
    flex-shrink: 0
}

.testimonials__card-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
    -o-object-fit: cover;
       object-fit: cover
}

.testimonials__card-info {
    font-size: 11px
}

.testimonials__card-name {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(23 23 23 / var(--tw-text-opacity, 1))
}

.testimonials__card-role {
    font-family: Fragment Mono, monospace;
    font-size: 12px;
    line-height: 125%;
    --tw-text-opacity: 1;
    color: rgb(85 85 85 / var(--tw-text-opacity, 1))
}

.callout {
    overflow: hidden;
    /* Section wrapper */
}

.callout__wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1696px;
}

@media (min-width: 768px) {

    .callout__wrapper {
        height: 691px;
    }
}

.callout__content {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    height: 100%;
    width: calc(100% - 32px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    background-size: cover;
}

@media (min-width: 768px) {

    .callout__content {
        flex-direction: row;
    }
}

.callout__inner {
    position: relative;
    z-index: 10;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    max-width: 325px;
}

@media (min-width: 768px) {

    .callout__inner {
        max-width: 424px;
    }
}

.callout__title {
    text-align: center;
    font-family: Playfair Display, serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 115%;
    letter-spacing: -0.01em;
}

@media (min-width: 768px) {

    .callout__title {
        font-size: 56px;
    }
}

.callout__title--italic {
    font-style: italic;
}

.callout__list {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem;
    max-width: 362px;
}

.callout__list > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

@media (min-width: 768px) {

    .callout__list {
        margin-top: 1.75rem;
    }

    .callout__list > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1rem * var(--tw-space-y-reverse));
    }
}

.callout__list-item {
    display: flex;
    gap: 5px;
    font-size: 16px;
    line-height: 140%;
    color: #000000CC;
}

@media (min-width: 768px) {

    .callout__list-item {
        font-size: 18px;
    }
}

.callout__list-icon {
    margin-top: 3px;
    display: flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(136 45 23 / var(--tw-bg-opacity, 1));
}

.callout__button {
    margin-left: auto;
    margin-right: auto;
    margin-top: 28px;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 56 92 / var(--tw-bg-opacity, 1));
    padding-left: 52px;
    padding-right: 52px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 16px;
    font-weight: 600;
    line-height: 125%;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.callout__button:hover {
    background-color: rgb(255 56 92 / 0.9);
}

@media (min-width: 768px) {

    .callout__button {
        margin-top: 48px;
        padding-left: 60px;
        padding-right: 60px;
        padding-top: 18.5px;
        padding-bottom: 18.5px;
        font-size: 18px;
    }
}

.callout-animation--left {
    position: absolute;
    left: 123px;
    top: 50%;
    display: none;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (min-width: 768px) {

    .callout-animation--left {
        display: block;
    }
}

.callout-animation--right {
    position: absolute;
    top: 50%;
    display: none;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (min-width: 768px) {

    .callout-animation--right {
        display: block;
    }
}

.callout-animation--right {
    right: 123px;
}

.callout-path--left,
.callout-path--right {
    visibility: hidden;
}

.callout-path__item {
    position: absolute;
    aspect-ratio: 400/282;
    width: 400px;
    border-radius: 16px;
    background-color: #FFFFFF47;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.625rem;
    --tw-backdrop-blur: blur(4px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    will-change: transform;
}

.callout-path__card {
    aspect-ratio: 384/240;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.callout-path__card-image {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.callout-path__card-label {
    margin-top: 0.625rem;
    display: block;
    padding-left: 0.5rem;
    font-family: Fragment Mono, monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 125%;
    letter-spacing: 0.16em;
    color: #00000099;
}

.callout-marquee--mobile {
    display: block;
    width: 100%;
}

@media (min-width: 768px) {

    .callout-marquee--mobile {
        display: none;
    }
}

.callout-marquee__list {
    display: flex;
    width: -moz-max-content;
    width: max-content;
    align-items: stretch;
    padding-top: 30px;
    padding-bottom: 40px;
    animation: marquee-left 30s linear infinite;
}

.callout-marquee--mobile .callout-path__item {
    position: static;
    margin-right: 1rem;
    width: 280px;
    flex-shrink: 0;
}

@keyframes marquee-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
.faq {
    padding-top: 80px;
    padding-bottom: 80px;
}@media (min-width: 768px) {.faq {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

.faq__container {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    width: calc(100% - 96px);
    max-width: 976px;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {.faq__container {
        flex-direction: row;
        gap: 56px;
    }
}

.faq__title {
    font-family: Playfair Display, serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 115%;
    letter-spacing: -0.02em;
}

@media (min-width: 768px) {.faq__title {
        font-size: 44px;
    }
}

.dark .faq__title {
    --tw-text-opacity: 1;
    color: rgb(238 238 238 / var(--tw-text-opacity, 1));
}

.faq__title-ampersand {
    font-family: Canela, sans-serif;
}

.faq__grid {
    max-width: 824px;
    -moz-columns: 1;
         columns: 1;
    gap: 56px;
}

@media (min-width: 768px) {.faq__grid {
        -moz-columns: 2;
             columns: 2;
    }
}

.faq__item {
    border-bottom-width: 1px;
    border-color: #0000001F;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
}

.dark .faq__item {
    border-bottom-color: #FFFFFF1F;
}

.faq__button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: left;
}

.faq__question {
    font-size: 17px;
    font-weight: 500;
    line-height: 130%;
}

.dark .faq__question {
    --tw-text-opacity: 1;
    color: rgb(204 204 204 / var(--tw-text-opacity, 1));
}

.faq__icon {
    flex-shrink: 0;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.dark .faq__icon path {
    stroke: #FFFFFF52;
}

.faq__item.is-active .faq__icon {
    transform: rotate(180deg);
}
.faq__answer {
    overflow: hidden;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq__item.is-active .faq__answer {
    grid-template-rows: 1fr;
    display: grid;
}

.faq__answer > p {
    overflow: hidden;
    padding-bottom: 1rem;
    font-size: 15px;
    line-height: 160%;
    color: rgb(0 0 0 / 0.7);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.dark .faq__answer > p {
    color: #CCCCCCB3;
}

.faq__item.is-active .faq__answer > p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.faq__spacer {
    height: 80px;
}

/**
 * Swiper 12.0.3
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: October 21, 2025
 */

:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}

:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-horizontal {
  touch-action: pan-y;
}

.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

/* Auto Height */

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 3D Effects */

.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d {
  perspective: 1200px;
  .swiper-slide,
  .swiper-cube-shadow {
    transform-style: preserve-3d;
  }
}

/* CSS Mode */

.swiper-css-mode {
  > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    &::-webkit-scrollbar {
      display: none;
    }
  }
  > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  &.swiper-horizontal {
    > .swiper-wrapper {
      scroll-snap-type: x mandatory;
    }
  }
  &.swiper-vertical {
    > .swiper-wrapper {
      scroll-snap-type: y mandatory;
    }
  }
  &.swiper-free-mode {
    > .swiper-wrapper {
      scroll-snap-type: none;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: none;
    }
  }
  &.swiper-centered {
    > .swiper-wrapper::before {
      content: '';
      flex-shrink: 0;
      order: 9999;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: center center;
      scroll-snap-stop: always;
    }
  }
  &.swiper-centered.swiper-horizontal {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      height: 100%;
      min-height: 1px;
      width: var(--swiper-centered-offset-after);
    }
  }
  &.swiper-centered.swiper-vertical {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      width: 100%;
      min-width: 1px;
      height: var(--swiper-centered-offset-after);
    }
  }
}

/* Slide styles start */

/* 3D Shadows */

.swiper-3d {
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom,
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
  .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper:not(.swiper-watch-progress),
.swiper-watch-progress .swiper-slide-visible {
  .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear;
  }
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Slide styles end */

:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 4px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;

  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);

  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  &.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }
  &.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
  }
  .swiper-navigation-disabled & {
    display: none !important;
  }
  svg {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    transform-origin: center;
    fill: currentColor;
    pointer-events: none;
  }
}
.swiper-button-lock {
  display: none;
}
.swiper-button-prev,
.swiper-button-next {
  top: var(--swiper-navigation-top-offset, 50%);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
}
.swiper-button-prev {
  left: var(--swiper-navigation-sides-offset, 4px);
  right: auto;
  .swiper-navigation-icon {
    transform: rotate(180deg);
  }
}
.swiper-button-next {
  right: var(--swiper-navigation-sides-offset, 4px);
  left: auto;
}
.swiper-horizontal {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-left: 0;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto;
  }
  .swiper-button-next,
  & ~ .swiper-button-next,
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    .swiper-navigation-icon {
      transform: rotate(180deg);
    }
  }
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    .swiper-navigation-icon {
      transform: rotate(0deg);
    }
  }
}
.swiper-vertical {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    left: var(--swiper-navigation-top-offset, 50%);
    right: auto;
    margin-left: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-top: 0;
  }
  .swiper-button-prev,
  ~ .swiper-button-prev {
    top: var(--swiper-navigation-sides-offset, 4px);
    bottom: auto;
    .swiper-navigation-icon {
      transform: rotate(-90deg);
    }
  }
  .swiper-button-next,
  ~ .swiper-button-next {
    bottom: var(--swiper-navigation-sides-offset, 4px);
    top: auto;
    .swiper-navigation-icon {
      transform: rotate(90deg);
    }
  }
}

:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
  &.swiper-pagination-hidden {
    opacity: 0;
  }
  .swiper-pagination-disabled > &,
  &.swiper-pagination-disabled {
    display: none !important;
  }
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
  .swiper-pagination-bullet {
    transform: scale(0.33);
    position: relative;
  }
  .swiper-pagination-bullet-active {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-main {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-prev {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.33);
  }
  .swiper-pagination-bullet-active-next {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-next-next {
    transform: scale(0.33);
  }
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  button& {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }
  .swiper-pagination-clickable & {
    cursor: pointer;
  }

  &:only-child {
    display: none !important;
  }
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
  .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block;
  }
  &.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    .swiper-pagination-bullet {
      display: inline-block;
      transition:
        200ms transform,
        200ms top;
    }
  }
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
  .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  }
  &.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    .swiper-pagination-bullet {
      transition:
        200ms transform,
        200ms left;
    }
  }
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition:
    200ms transform,
    200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
  .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top;
  }
  .swiper-rtl & .swiper-pagination-progressbar-fill {
    transform-origin: right top;
  }
  .swiper-horizontal > &,
  &.swiper-pagination-horizontal,
  .swiper-vertical > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0;
  }
  .swiper-vertical > &,
  &.swiper-pagination-vertical,
  .swiper-horizontal > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0;
  }
}
.swiper-pagination-lock {
  display: none;
}



/* ======================================================
   PLATFORM PAGES — 静态版布局补丁
   ====================================================== */

/* 1. platform-why slides — 横向 flex 排列（替换 Swiper） */
.platform-why__slider {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}
.platform-why__slide {
    flex-shrink: 0 !important;
    scroll-snap-align: start;
    max-width: 282px !important;
    width: 282px !important;
}

/* 2. platform-work — 静态版改为 grid 排列 */
.platform-work { padding: 0;
    background-color: transparent;
}
.platform-work__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}
.platform-work__inner {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    height: auto !important;
    align-items: unset !important;
    justify-content: unset !important;
}
.platform-work__inner > svg { display: none !important; }
.platform-work__card {
    position: static !important;
    aspect-ratio: 384/240 !important;
    width: 100% !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
.platform-work__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.platform-work__footer {
    margin-top: 32px;
    text-align: center;
}
.platform-work__link {
    display: inline-block;
    padding: 12px 32px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(0,0,0,0.8);
    text-decoration: none;
}

/* 3. platform-hero — 浅米色背景，横排布局 */

.platform-hero__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}
.platform-hero__content {
    flex: 1;
    max-width: 560px;
}
.platform-hero__badge {
    display: inline-block;
    background-color: rgba(171,85,8,0.08);
    color: rgb(136,45,23);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-family: "Fragment Mono", monospace;
    letter-spacing: 1.56px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.platform-hero__title {
    font-size: 56px !important;
    font-weight: 300 !important;
    font-family: "Playfair Display", Georgia, serif !important;
    color: rgba(0,0,0,0.8) !important;
    line-height: 115% !important;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}
.platform-hero__desc {
    font-size: 17px;
    line-height: 160%;
    color: rgba(0,0,0,0.6);
    margin-bottom: 32px;
}
.platform-hero__button {
    display: inline-block;
    background-color: rgb(255,56,92);
    color: white;
    padding: 14px 32px;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
.platform-hero__image {
    flex-shrink: 0;
    width: 480px;
    border-radius: 16px;
    overflow: hidden;
}
.platform-hero__image img { width: 100%; height: auto; display: block; }

/* 4. platform-why 容器 */
.platform-why {
    padding: 80px 0 40px;
    background-color: transparent;
}
.platform-why__container {
    padding-left: 120px !important;
    padding-right: 120px !important;
}
.platform-why__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.platform-why__nav {
    display: flex;
    gap: 8px;
}
.platform-why__nav-btn {
    width: 36px; height: 36px;
    border-radius: 9999px;
    border: 1px solid rgba(0,0,0,0.15);
    background: white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    stroke: rgba(0,0,0,0.6);
}
.platform-why__nav-btn svg path { stroke: rgba(0,0,0,0.6); }

/* 5. platform-comparison */
.platform-comparison {
    padding: 40px 0 80px;
    background-color: transparent;
}
.platform-comparison__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}
.platform-comparison__header {
    margin-bottom: 40px;
}
.platform-comparison__badge {
    display: inline-block;
    background-color: rgba(171,85,8,0.08);
    color: rgb(136,45,23);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-family: "Fragment Mono", monospace;
    letter-spacing: 1.56px;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.platform-comparison__title {
    font-size: 44px !important;
    font-weight: 300 !important;
    font-family: "Playfair Display", Georgia, serif !important;
    color: rgba(0,0,0,0.8) !important;
    line-height: 115%;
}
.platform-comparison__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    list-style: none; padding: 0;
}
.platform-comparison__card {
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.08);
    background: white;
    padding: 24px;
    position: relative;
    overflow: hidden;
}
.platform-comparison__card--highlight {
    border-color: rgba(136,45,23,0.3) !important;
    background: rgba(136,45,23,0.03) !important;
}
.platform-comparison__card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.platform-comparison__card-icon img {
    width: 32px; height: 32px;
    object-fit: contain;
}
.platform-comparison__card-title {
    font-size: 17px;
    font-weight: 500;
    color: rgba(0,0,0,0.8);
}
.platform-comparison__card-rating {
    list-style: none; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.platform-comparison__rating-title {
    font-size: 13px;
    color: rgba(0,0,0,0.48);
    font-weight: 400;
    margin-bottom: 4px;
}
.platform-comparison__rating {
    display: flex;
    gap: 4px;
}
.platform-comparison__rating-dot {
    width: 8px; height: 8px;
    border-radius: 9999px;
    background-color: rgba(0,0,0,0.12);
}
.platform-comparison__rating-dot--filled {
    background-color: rgb(136,45,23) !important;
}
.platform-comparison__rating-item { display: flex; }

/* 6. platform-advantage */
.platform-advantage {
    padding: 80px 0;
    background-color: transparent;
}
.platform-advantage__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}
.platform-advantage__flex {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
.platform-advantage__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    min-width: 172px;
    width: 172px;
    flex-shrink: 0;
}
.platform-advantage__header-dot {
    width: 8px; height: 8px;
    border-radius: 9999px;
    background-color: rgb(136,45,23);
    flex-shrink: 0;
}
.platform-advantage__title {
    font-size: 24px !important;
    font-weight: 500 !important;
    color: rgba(0,0,0,0.8) !important;
}
.platform-advantage__content { flex: 1; }
.platform-advantage__card {
    border-radius: 16px;
    background: rgba(255,255,255,0.6);
    padding: 28px;
}
.platform-advantage__stats {
    display: flex;
    gap: 18px;
    margin-bottom: 24px;
    list-style: none; padding: 0;
}
.platform-advantage__stat-value {
    font-size: 36px;
    font-weight: 500;
    color: rgba(0,0,0,0.8);
    display: block;
}
.platform-advantage__stat-label {
    font-size: 14px;
    color: rgba(0,0,0,0.5);
    margin-top: 2px;
}
.platform-advantage__desc {
    font-size: 15px;
    line-height: 160%;
    color: rgba(0,0,0,0.6);
    margin-bottom: 20px;
}
.platform-advantage__features {
    list-style: none; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.platform-advantage__feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: rgba(0,0,0,0.8);
}
.platform-advantage__image {
    flex-shrink: 0;
    width: 384px;
    border-radius: 16px;
    background: rgba(255,255,255,0.6);
    overflow: hidden;
    display: flex;
    align-items: stretch;
}
.platform-advantage__image img,
.platform-advantage__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 7. platform-expertise */
.platform-expertise {
    padding: 80px 0;
    background-color: transparent;
}
.platform-expertise__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}
.platform-expertise__header {
    margin-bottom: 40px;
}
.platform-expertise__badge {
    display: inline-block;
    background-color: rgba(171,85,8,0.08);
    color: rgb(136,45,23);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-family: "Fragment Mono", monospace;
    letter-spacing: 1.56px;
    margin-bottom: 12px;
}
.platform-expertise__title {
    font-size: 36px !important;
    font-weight: 300 !important;
    font-family: "Playfair Display", Georgia, serif !important;
    color: rgba(0,0,0,0.8) !important;
    max-width: 600px;
}
.platform-expertise__list {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 24px !important;
    list-style: none; padding: 0;
}
.platform-expertise__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: center;
}
.platform-expertise__item-icon img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain;
}
.platform-expertise__item-text {
    font-size: 14px;
    font-weight: 500;
    color: rgba(0,0,0,0.8);
}

/* === platform-hero 深色背景修复（匹配原站） === */

.platform-hero__header {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 128px 120px 80px !important;
    position: relative;
    z-index: 1;
}
.platform-hero__bg {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important;
    min-height: 600px !important;
    z-index: 0 !important;
    overflow: hidden !important;
}
.gr-48 {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 600px;
}
.platform-hero .gr-48__radial {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 60% 40%, rgba(136,45,23,0.25) 0%, rgba(21,31,44,0.9) 60%);
}
.platform-hero .gr-48__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(21,31,44,0.6);
}
.platform-hero__content {
    position: relative;
    z-index: 2;
}
.platform-hero__content-inner {
    max-width: 900px;
}
.platform-hero__badge {
    display: inline-block !important;
    background-color: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.6) !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-family: "Fragment Mono", monospace !important;
    letter-spacing: 1.56px !important;
    text-transform: uppercase !important;
    margin-bottom: 20px;
    border: none !important;
}
.platform-hero__title {
    font-size: 72px !important;
    font-weight: 300 !important;
    font-family: "Playfair Display", Georgia, serif !important;
    color: white !important;
    line-height: 108% !important;
    letter-spacing: -0.03em !important;
    max-width: 900px;
    margin-bottom: 40px;
}
.platform-hero__title .italic { font-style: italic; }

/* Brand logo scroller */
.platform-hero__brand-wrapper {
    overflow: hidden;
    width: 100vw;
    margin-left: -120px;
    padding: 40px 0 60px;
}
.platform-hero__brand-track {
    display: flex;
    width: max-content;
    animation: brand-scroll 25s linear infinite;
}
.platform-hero__brand-list {
    display: flex;
    align-items: center;
    gap: 64px;
    padding: 0 32px;
}
.platform-hero__brand-item {
    opacity: 0.5;
    filter: brightness(0) invert(1);
    object-fit: contain;
    flex-shrink: 0;
}
@keyframes brand-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 移除多余的 hero image 区域 */
.platform-hero__image { display: none !important; }
.platform-hero__desc { display: none !important; }
.platform-hero__button { display: none !important; }

/* === platform-hero: 强制显示（绕过原站 JS 动画初始 opacity:0） === */
.platform-hero__badge {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}
.platform-hero__brand-wrapper {
    opacity: 1 !important;
    transform: none !important;
}
.platform-hero__brand-item {
    opacity: 0.5 !important;
    transform: none !important;
}

/* === platform-work cards: 强制显示（绕过原站 GSAP 动画初始 opacity:0） === */
.platform-work__card {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

/* ===== FOOTER CSS ===== */
/* Footer Component - BEM Structure */

/* Block: footer */

.footer {

    background-color: #0000000A
}

html.dark .footer {

    --tw-bg-opacity: 1;

    background-color: rgb(18 26 37 / var(--tw-bg-opacity, 1))
}

/* Element: footer__container */

.footer__container {

    width: 100%
}

@media (min-width: 1200px) {

    .footer__container {

        max-width: 1200px
    }
}

.footer__container {

    margin-left: auto;

    margin-right: auto;

    width: calc(100% - var(--horizontal-edge-space));

    padding-top: 48px;

    padding-bottom: 48px
}

/* Element: footer__top */

.footer__top {

    display: flex;

    max-width: 282px;

    flex-direction: column;

    justify-content: space-between;

    gap: 48px
}

@media (min-width: 768px) {

    .footer__top {

        max-width: -moz-max-content;

        max-width: max-content;

        flex-direction: row
    }
}

/* Element: footer__brand */

.footer__brand {
    width: 282px;
}

.footer__brand-logo {

    display: block;

    --tw-text-opacity: 1;

    color: rgb(119 119 119 / var(--tw-text-opacity, 1))
}

html.dark .footer__brand-logo {

    display: block;

    --tw-text-opacity: 1;

    color: rgb(89 103 119 / var(--tw-text-opacity, 1))
}

.footer__brand-description {

    margin-top: 1.25rem;

    font-size: 15px;

    line-height: 140%;

    color: #00000099
}

html.dark .footer__brand-description {

    --tw-text-opacity: 1;

    color: rgb(89 103 119 / var(--tw-text-opacity, 1))
}

/* Element: footer__nav */

.footer__nav {

    display: flex;

    flex-direction: column;

    gap: 2rem
}

@media (min-width: 768px) {

    .footer__nav {

        flex-direction: row;

        gap: 48px
    }
}

/* Element: footer__nav-column */

.footer__nav-column {

    width: 180px
}

/* Element: footer__nav-group */

.footer__nav-group {

    margin-bottom: 48px
}

@media (min-width: 768px) {

    .footer__nav-group {

        margin-bottom: 48px
    }
}

/* Element: footer__nav-list */

.footer__nav-list {

    margin-top: 1rem
}

.footer__nav-list > :not([hidden]) ~ :not([hidden]) {

    --tw-space-y-reverse: 0;

    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));

    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}

.footer__nav-column.is-social-media .footer__nav-list {

    margin-top: 0px;

    display: flex;

    flex-direction: row-reverse;

    justify-content: flex-end;

    gap: 1.25rem
}

.footer__nav-column.is-social-media .footer__nav-list > :not([hidden]) ~ :not([hidden]) {

    --tw-space-y-reverse: 0;

    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));

    margin-bottom: calc(0px * var(--tw-space-y-reverse))
}

@media (min-width: 768px) {

    .footer__nav-column.is-social-media .footer__nav-list {

        margin-top: 1rem;

        flex-direction: column;

        gap: 0px
    }

    .footer__nav-column.is-social-media .footer__nav-list > :not([hidden]) ~ :not([hidden]) {

        --tw-space-y-reverse: 0;

        margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));

        margin-bottom: calc(1rem * var(--tw-space-y-reverse))
    }
}

.footer__nav-list + .footer__nav-list {

    margin-top: 2rem
}

@media (min-width: 768px) {

    .footer__nav-list + .footer__nav-list {

        margin-top: 2.5rem
    }
}

/* Element: footer__nav-title */

.footer__nav-title {

    font-size: 11px;

    font-weight: 500;

    text-transform: uppercase;

    line-height: 140%;

    letter-spacing: 0.12em;

    color: #00000099
}

.footer__nav-column.is-social-media .footer__nav-title {

    display: none
}

@media (min-width: 768px) {

    .footer__nav-column.is-social-media .footer__nav-title {

        display: block
    }
}

html.dark .footer__nav-title {

    --tw-text-opacity: 1;

    color: rgb(89 103 119 / var(--tw-text-opacity, 1))
}

/* Element: footer__nav-item */

.footer__nav-item, .footer .menu-item {

    font-size: 15px;

    line-height: 140%;

    --tw-text-opacity: 1;

    color: rgb(85 85 85 / var(--tw-text-opacity, 1));

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 300ms;

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}

.footer__nav-item:hover, .footer .menu-item:hover {

    --tw-text-opacity: 1;

    color: rgb(255 56 92 / var(--tw-text-opacity, 1))
}

html.dark .footer__nav-item, html.dark .footer .menu-item {

    --tw-text-opacity: 1;

    color: rgb(170 170 170 / var(--tw-text-opacity, 1))
}

/* Element: footer__nav-link */

.footer__nav-link {

    display: flex;

    align-items: center;

    gap: 7px
}

/* Element: footer__nav-icon */

.footer__nav-icon {

    display: block
}

.footer__nav-icon path {

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 300ms;

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}

.footer__nav-item:hover .footer__nav-icon path {

    fill: #FF385C
}

html.dark .footer__nav-icon path {

    fill: #AAAAAAAD
}

.footer__nav-column.is-social-media .footer__nav-icon {

    width: 1.5rem;

    height: 1.5rem
}

@media (min-width: 768px) {

    .footer__nav-column.is-social-media .footer__nav-icon {

        width: 1rem;

        height: 1rem
    }
}

.footer__nav-column.is-social-media .footer__nav-text {

    display: none
}

@media (min-width: 768px) {

    .footer__nav-column.is-social-media .footer__nav-text {

        display: inline
    }
}

/* Element: footer__bottom */

.footer__bottom {

    margin-top: 0;

    display: flex;

    flex-direction: column-reverse;

    align-items: flex-start;

    justify-content: space-between;

    gap: 0.75rem;

    padding-top: 48px
}

@media (min-width: 768px) {

    .footer__bottom {

        margin-top: 0;

        flex-direction: row;

        align-items: center !important;

        border-top-width: 1px;

        border-color: #0000001A
    }
}

.footer__bottom--dark {

    border-color: rgb(255 255 255 / 0.1)
}

/* Element: footer__copyright */

.footer__copyright {

    font-size: 13px;

    line-height: 140%;

    color: rgb(119 119 119);

    margin-bottom: 0
}

@media (min-width: 768px) {

    .footer__copyright {

        font-size: 14px
    }
}

/* Element: footer__impressum */

.footer__impressum {
    font-size: 11px;
    line-height: 160%;
    color: rgb(160 160 160);
    margin-top: 12px;
    text-align: center;
    letter-spacing: 0.01em;
}

html.dark .footer__copyright {

    --tw-text-opacity: 1;

    color: rgb(51 64 83 / var(--tw-text-opacity, 1))
}

/* Element: footer__legal */

.footer__legal {

    display: flex;

    align-items: center;

    gap: 1rem
}

/* Element: footer__legal-item */

.footer__legal-item {

    font-size: 13px;

    line-height: 140%;

    --tw-text-opacity: 1;

    color: rgb(119 119 119 / var(--tw-text-opacity, 1));

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 300ms;

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}

@media (min-width: 768px) {

    .footer__legal-item {

        font-size: 14px
    }
}

.footer__legal-item:hover {

    --tw-text-opacity: 1;

    color: rgb(255 56 92 / var(--tw-text-opacity, 1))
}

html.dark .footer__legal-item {

    --tw-text-opacity: 1;

    color: rgb(119 119 119 / var(--tw-text-opacity, 1))
}

/* Element: footer__copyright-break */

@media (min-width: 768px) {

    .footer__copyright-break {

        display: none
    }
}




/* ======================================================
   CALLOUT — 原站 1:1 还原（含两侧路径动画结构）
   ====================================================== */
.callout { overflow: hidden; }

.callout__wrapper { margin-left: auto; margin-right: auto; width: 100%; max-width: 1696px; }

@media (min-width: 768px) {
  .callout__wrapper { height: 691px; }
}

.callout__content { position: relative; margin-left: auto; margin-right: auto; display: flex; height: 100%; width: calc(100% - var(--horizontal-edge-space)); flex-direction: column; align-items: center; justify-content: center; border-radius: 28px; background-size: cover; }

@media (min-width: 768px) {
  .callout__content { flex-direction: row; }
}

.callout__inner { position: relative; z-index: 10; margin-left: auto; margin-right: auto; margin-top: 40px; max-width: 325px; }

@media (min-width: 768px) {
  .callout__inner { max-width: 424px; }
}

.callout__title { text-align: center; font-family: "Playfair Display", serif; font-size: 30px; font-weight: 300; line-height: 115%; letter-spacing: -0.01em; }

@media (min-width: 768px) {
  .callout__title { font-size: 56px; }
}

.callout__title--italic { font-style: italic; }

.callout__list { margin-left: auto; margin-right: auto; margin-top: 1.5rem; max-width: 362px; }

.callout__list > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); }

@media (min-width: 768px) {
  .callout__list { margin-top: 1.75rem; }
  .callout__list > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); }
}

.callout__list-item { display: flex; gap: 5px; font-size: 16px; line-height: 140%; color: rgba(0, 0, 0, 0.8); }

@media (min-width: 768px) {
  .callout__list-item { font-size: 18px; }
}

.callout__list-icon { margin-top: 3px; display: flex; width: 18px; height: 18px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(136 45 23 / var(--tw-bg-opacity, 1)); }

.callout__button { margin-left: auto; margin-right: auto; margin-top: 28px; display: block; width: fit-content; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(255 56 92 / var(--tw-bg-opacity, 1)); padding: 1rem 52px; font-size: 16px; font-weight: 600; line-height: 125%; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-duration: 300ms; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

.callout__button:hover { background-color: rgba(255, 56, 92, 0.9); }

@media (min-width: 768px) {
  .callout__button { margin-top: 48px; padding: 18.5px 60px; font-size: 18px; }
}

.callout-animation--left { position: absolute; left: 123px; top: 50%; display: none; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }

@media (min-width: 768px) {
  .callout-animation--left { display: block; }
}

.callout-animation--right { position: absolute; top: 50%; display: none; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }

@media (min-width: 768px) {
  .callout-animation--right { display: block; }
}

.callout-animation--right { right: 123px; }

.callout-path--left, .callout-path--right { visibility: hidden; }

.callout-path__item { position: absolute; aspect-ratio: 400 / 282; width: 400px; border-radius: 16px; background-color: rgba(255, 255, 255, 0.28); padding: 0.5rem 0.5rem 0.625rem; --tw-backdrop-blur: blur(4px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); will-change: transform; }

.callout-path__card { aspect-ratio: 384 / 240; width: 100%; overflow: hidden; border-radius: 8px; }

.callout-path__card-image { height: 100%; width: 100%; object-fit: cover; }

.callout-path__card-label { margin-top: 0.625rem; display: block; padding-left: 0.5rem; font-family: "Fragment Mono", monospace; font-size: 11px; font-weight: 700; text-transform: uppercase; line-height: 125%; letter-spacing: 0.16em; color: rgba(0, 0, 0, 0.6); }

.callout-marquee--mobile { display: block; width: 100%; }

@media (min-width: 768px) {
  .callout-marquee--mobile { display: none; }
}

.callout-marquee__list { display: flex; width: max-content; align-items: stretch; padding-top: 30px; padding-bottom: 40px; animation: 30s linear 0s infinite normal none running marquee-left; }

.callout-marquee--mobile .callout-path__item { position: static; margin-right: 1rem; width: 280px; flex-shrink: 0; }

/* ======================================================
   FOOTER — 补充样式
   ====================================================== */
.footer {
    margin-top: 80px;
}
.footer__top {
    display: flex;
    flex-direction: row;
    gap: 80px;
    justify-content: space-between;
    max-width: none;
}
.footer__brand { flex-shrink: 0; }
.footer__nav { gap: 48px; }
.footer__brand-logo { color: rgb(119,119,119); }

/* ======================================================
   SERVICES ADVANTAGE — 静态 grid 版（5 张卡片）
   ====================================================== */
.services-advantage__slides {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 16px !important;
    min-height: unset !important;
}
.services-advantage__slide {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    background-color: rgb(255,255,255) !important;
    border-radius: 16px !important;
    padding: 24px !important;
}
.services-advantage__slide-image {
    width: 100% !important;
    aspect-ratio: 4/3 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background-color: rgba(0,0,0,0.04);
    flex: 0 0 auto;
}
.services-advantage__slide-image img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.services-advantage__slide-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: rgba(0,0,0,0.8) !important;
    order: -1;
}
.services-advantage__slide-desc {
    font-size: 13px !important;
    color: rgba(0,0,0,0.6) !important;
    line-height: 150% !important;
    flex: 1;
}
/* 隐藏 slider nav（静态版不需要） */
.services-advantage__nav { display: none !important; }

/* ======================================================
   WORK PAGE — 卡片 grid 统一
   ====================================================== */
.work-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}
.work-card {
    border-radius: 8px !important;
    overflow: hidden !important;
    aspect-ratio: 384/240 !important;
    width: 100% !important;
    position: relative !important;
    background-color: rgba(0,0,0,0.06) !important;
}
.work-card img, .work-card .wp-post-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.work-card__label {
    position: absolute !important;
    bottom: 12px !important;
    left: 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: white !important;
    background-color: rgba(0,0,0,0.4) !important;
    border-radius: 4px !important;
    padding: 3px 8px !important;
    backdrop-filter: blur(4px);
}

/* HOME WORK section 也同步 */
.home-work__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}
.home-work__card {
    aspect-ratio: 384/240 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background-color: rgba(0,0,0,0.06) !important;
}

/* Advantage grid — 改为 3+2 两行，更宽松 */
.services-advantage__slides {
    grid-template-columns: repeat(3, 1fr) !important;
}
.services-advantage__slide:nth-child(4),
.services-advantage__slide:nth-child(5) {
    /* 第4、5个各占一格，但整行只有2个，向左对齐 */
}

/* 或者强制 5 列但 container 全宽 */
.services-advantage {
    padding: 80px 0 !important;
}
.services-advantage__slides {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 12px !important;
}
.services-advantage__slide {
    padding: 20px !important;
}
.services-advantage__slide-title {
    font-size: 14px !important;
}
.services-advantage__slide-desc {
    font-size: 12px !important;
}













/* ================================================
   home-hero 右侧 UI 卡 - 玻璃底板
   ================================================ */

/* bg/fg 图片全部隐藏，先做纯玻璃效果 */
.home-hero__image {
  display: none !important;
}
/* 图片容器 */
.home-hero__image--fg-container {
  position: relative;
  z-index: 1;
}

.home-hero__image--fg {
  display: none !important;
}

/* 玻璃底板 */
.home-hero__image-container {
  position: relative;
  border-radius: 20px;
  overflow: visible;
  clip-path: inset(0 round 20px);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.3),
    0 6px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ================================================
   home-hero brand logo 动效
   默认：统一黑色（grayscale + 颜色压黑）
   hover：恢复原色
   ================================================ */

/* logo 默认：原色半透明 */
.home-hero__brand {
  filter: grayscale(100%) opacity(55%);
  transition: filter 0.4s ease;
  cursor: pointer;
}

/* hover：恢复原色 */
.home-hero__brand:hover {
  filter: grayscale(0%) opacity(100%);
}

/* logo 统一高度，宽度自适应，覆盖原来各品牌固定尺寸 */
.home-hero__brand--fair-price,
.home-hero__brand--far-east,
.home-hero__brand--grab,
.home-hero__brand--nathan,
.home-hero__brand--bread-talk,
.home-hero__brand--jll,
.home-hero__brand--singtel,
.home-hero__brand--vivo {
  width: auto !important;
  height: 40px !important;
}




/* home-hero brands 无缝滚动修复 */
.home-hero__brands--desktop {
  display: flex !important;
  overflow: hidden !important;
}
.home-hero__brands-track {
  display: flex !important;
  flex-shrink: 0 !important;
  width: max-content !important;
  animation: hero-marquee 18s linear infinite !important;
}

@keyframes hero-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* benefits card 4 emoji icon 适配 */
.home-benefits__tech-icon--emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  width: 28px;
  height: 28px;
}

/* benefits 卡片色卡背景（去掉图片保留色调） */
.home-benefits__card-image {
  position: relative !important;
}
div.home-benefits__card-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.home-benefits__card-bg--1 { background: linear-gradient(135deg, #f8ebe6 0%, #ddb8a8 60%, #c89888 100%); }
.home-benefits__card-bg--2 { background: linear-gradient(180deg, #e4f1fb 0%, #b8daf2 50%, #8fc6ed 100%); }
.home-benefits__card-bg--3 { background: linear-gradient(135deg, #e2e4d8 0%, #c8c9be 50%, #a8a99e 100%); }
.home-benefits__card-bg--4 { background: linear-gradient(225deg, #ffffff 0%, #f8e8e4 50%, #f2d4ce 100%); }

/* Card 1: Visual Design overlay */
.prism-visual-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 4px;
}
.prism-visual-card__palette {
  display: flex;
  gap: 6px;
}
.prism-visual-card__swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.prism-visual-card__type {
  background: rgba(255,255,255,0.7);
  border-radius: 10px;
  padding: 10px 12px;
  backdrop-filter: blur(6px);
}
.prism-visual-card__type-row--lg {
  font-size: 32px;
  font-weight: 300;
  color: rgba(0,0,0,0.75);
  font-family: Inter, sans-serif;
  line-height: 1;
  margin-bottom: 4px;
}
.prism-visual-card__type-row--sm {
  font-size: 10px;
  color: rgba(0,0,0,0.45);
  letter-spacing: 0.04em;
}
.prism-visual-card__badge {
  display: inline-block;
  background: rgba(0,0,0,0.08);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 10px;
  color: rgba(0,0,0,0.5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-self: flex-start;
}

/* Card 3: Graphic Design overlay */
.prism-graphic-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  background: rgba(255,255,255,0.65);
  border-radius: 12px;
  padding: 14px;
  backdrop-filter: blur(6px);
}
.prism-graphic-card__logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.prism-graphic-card__brand-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(0,0,0,0.7);
}
.prism-graphic-card__items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prism-graphic-card__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(0,0,0,0.5);
  padding: 5px 8px;
  border-radius: 6px;
}
.prism-graphic-card__item--active {
  background: rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.75);
  font-weight: 500;
}
.prism-graphic-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* card3 website dev: mono 数字样式 */
.prism-visual-card__type-row--mono {
  font-family: 'Courier New', monospace !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  color: rgba(0,0,0,0.65) !important;
  letter-spacing: -0.02em;
}

/* process 区域排版优化 */
/* 取消条目横线 */
.home-process__step-item--border {
  border-bottom: none !important;
}

/* 条目间距统一、垂直居中 */
.home-process__step-list {
  gap: 0;
  justify-content: center;
}

.home-process__step-item {
  padding: 12px 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(0,0,0,0.6);
  text-align: center;
}

/* 内容区垂直居中 */
.home-process__step-body {
  justify-content: center;
  align-items: center;
  padding: 32px 20px;
}

/* step-list 居中对齐 */
.home-process__step-list {
  text-align: center;
  width: 100%;
}


.home-process__step-body--right .home-process__step-item {
  text-align: left;
}







/* ===== process 排版重置 ===== */
/* 文字居中，统一字号 */
.home-process__step-item {
  font-size: 12px !important;
  line-height: 1.55;
  color: rgba(0,0,0,0.6);
  text-align: center !important;
  padding: 8px 0;
}
.home-process__step-item--border {
  border-bottom: none !important;
}
.home-process__step-list {
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* 卡1、卡3：圆心在左(cx=0)，文字安全区在右侧 */
/* 卡片宽300，圆半径260，圆心x=0 → x=40时圆弧距离顶底约242px */
/* 文字区：从x=60开始，宽160，左右各留空保在圆弧内 */
.home-process__step:nth-child(1) .home-process__step-list,
.home-process__step:nth-child(3) .home-process__step-list {
  padding: 0 20px 0 80px;
}

/* 卡2、卡4：圆心在右(cx=300)，文字安全区在左侧 */
.home-process__step:nth-child(2) .home-process__step-list,
.home-process__step:nth-child(4) .home-process__step-list {
  padding: 0 80px 0 20px;
}

/* process 文字上移，限制在半圆中心区域 */
.home-process__step-body {
  justify-content: center !important;
  padding-top: 0 !important;
  padding-bottom: 60px !important;
}

.home-process__step-list {
  transform: translateY(-30px);
}

.home-process__step-item {
  font-size: 11.5px !important;
  padding: 6px 0 !important;
}

/* 卡1、3 缩短行宽，压在圆弧安全区内 */
.home-process__step:nth-child(1) .home-process__step-list,
.home-process__step:nth-child(3) .home-process__step-list {
  padding: 0 16px 0 72px !important;
}

/* 卡2、4 缩短行宽 */
.home-process__step:nth-child(2) .home-process__step-list,
.home-process__step:nth-child(4) .home-process__step-list {
  padding: 0 72px 0 16px !important;
}

/* ===== process 排版终版 ===== */
/* 重置字号 */
.home-process__step-item {
  font-size: 13px !important;
  line-height: 1.6;
  padding: 10px 0 !important;
  color: rgba(0,0,0,0.65);
}

/* 重置 list 上移和 body padding */
.home-process__step-list {
  transform: none !important;
}
.home-process__step-body {
  padding-bottom: 24px !important;
}

/* 卡1：左对齐 */
.home-process__step:nth-child(1) .home-process__step-item,
.home-process__step:nth-child(1) .home-process__step-list {
  text-align: left !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 卡2：右对齐 */
.home-process__step:nth-child(2) .home-process__step-item,
.home-process__step:nth-child(2) .home-process__step-list {
  text-align: right !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 卡3：左对齐 */
.home-process__step:nth-child(3) .home-process__step-item,
.home-process__step:nth-child(3) .home-process__step-list {
  text-align: left !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 卡4：右对齐 */
.home-process__step:nth-child(4) .home-process__step-item,
.home-process__step:nth-child(4) .home-process__step-list {
  text-align: right !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* process 卡1 分割线样式 */
.home-process__step-item--divider {
  border-bottom: 1px solid rgba(0,0,0,0.12) !important;
  padding-bottom: 14px !important;
  margin-bottom: 4px;
}

/* 分割线固定宽度，匹配各卡最长文字行 */
/* 卡1 左对齐，分割线153px */
.home-process__step:nth-child(1) .home-process__step-item--divider {
  width: 153px;
}

/* 卡2 右对齐，分割线199px，从右侧对齐 */
.home-process__step:nth-child(2) .home-process__step-item--divider {
  width: 199px;
  margin-left: auto;
}

/* 卡3 左对齐，分割线221px */
.home-process__step:nth-child(3) .home-process__step-item--divider {
  width: 221px;
}

/* 卡4 右对齐，分割线173px，从右侧对齐 */
.home-process__step:nth-child(4) .home-process__step-item--divider {
  width: 173px;
  margin-left: auto;
}

/* 修复卡2、卡4整体右对齐（flex列方向靠右） */
.home-process__step:nth-child(2) .home-process__step-list,
.home-process__step:nth-child(4) .home-process__step-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

/* 卡1、卡3整体左对齐 */
.home-process__step:nth-child(1) .home-process__step-list,
.home-process__step:nth-child(3) .home-process__step-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* 重置 margin-left: auto（改用 flex 控制，不需要了） */
.home-process__step:nth-child(2) .home-process__step-item--divider,
.home-process__step:nth-child(4) .home-process__step-item--divider {
  margin-left: 0 !important;
}

/* 卡2改为左对齐 */
.home-process__step:nth-child(2) .home-process__step-list {
  align-items: flex-start !important;
}
.home-process__step:nth-child(2) .home-process__step-item {
  text-align: left !important;
}
.home-process__step:nth-child(2) .home-process__step-item--divider {
  margin-left: 0 !important;
}

/* 卡2文字右对齐，靠右边，和卡3镜像对称 */
.home-process__step:nth-child(2) .home-process__step-list {
  align-items: flex-end !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.home-process__step:nth-child(2) .home-process__step-item {
  text-align: right !important;
}

/* 卡1、卡4文字居中 */
.home-process__step:nth-child(1) .home-process__step-list,
.home-process__step:nth-child(4) .home-process__step-list {
  align-items: center !important;
}
.home-process__step:nth-child(1) .home-process__step-item,
.home-process__step:nth-child(4) .home-process__step-item {
  text-align: center !important;
}

/* process 条目文字颜色对齐原站 */
.home-process__step-item {
  color: rgba(0,0,0,0.8) !important;
}

/* process 标题区对齐原站 */
.home-process__label {
  color: rgb(136,45,23) !important;
  font-weight: 400 !important;
  letter-spacing: 1.92px !important;
}
.home-process__title {
  font-size: 56px !important;
  color: rgb(0,0,0) !important;
  letter-spacing: -1.12px !important;
}

/* testimonials 标题对齐原站纯黑 */
.testimonials__title,
.testimonials__title-italic {
  color: rgb(0,0,0) !important;
}


/* testimonials 卡片 gap 对齐原站 */
.testimonials__card {
  gap: normal !important;
}

/* 卡2底部补齐对齐卡7 */
.testimonials__card:nth-child(2) {
  padding-bottom: 31px !important;
}

/* ===== 全面字体对齐原站 2026-03-28 ===== */

/* Hero h1 纯黑 */
.home-hero__title {
  color: rgb(0,0,0) !important;
}

/* Hero 统计文字 16px */
.dc__text {
  font-size: 16px !important;
}

/* Benefits 卡标签：Fragment Mono / 12px / uppercase / 0.96px / rgba(0,0,0,0.6) */
.home-benefits__card-label {
  font-family: 'Fragment Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.96px !important;
  color: rgba(0,0,0,0.6) !important;
}

/* Benefits 卡正文：17px / 500 / 纯黑 */
.home-benefits__card-text {
  font-size: 17px !important;
  font-weight: 500 !important;
  color: rgb(0,0,0) !important;
}

/* Work 标题：44px / letter-spacing -0.88px */
.home-work__title {
  font-size: 44px !important;
  letter-spacing: -0.88px !important;
}

/* Work 链接：15px / 400 / 纯黑 */
.home-work__link {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: rgb(0,0,0) !important;
}

/* Results 标题 letter-spacing */
.home-results__title {
  letter-spacing: -0.88px !important;
}

/* Results 卡标题：Inter / 17px / 600 / -0.34px */
.home-results__card-title {
  font-family: Inter, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.34px !important;
}

/* Results 卡正文：15px / rgba(0,0,0,0.6) / -0.3px */
.home-results__card-text {
  font-size: 15px !important;
  color: rgba(0,0,0,0.6) !important;
  letter-spacing: -0.3px !important;
}

/* Process 标签：Fragment Mono */
.home-process__label {
  font-family: 'Fragment Mono', monospace !important;
}

/* Process 步骤名：Inter / 500 / -0.36px */
.home-process__step-title {
  font-family: Inter, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.36px !important;
}

/* Process 数字：Fragment Mono */
.home-process__step-number {
  font-family: 'Fragment Mono', monospace !important;
}

/* Process 条目：15px */
.home-process__step-item {
  font-size: 15px !important;
}

/* Callout 标题：纯黑 */
.callout__title {
  color: rgb(0,0,0) !important;
}







/* ===== Benefits 卡片图片样式 ===== */
.home-benefits__card-overlay--img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background: transparent;
}

.home-benefits__card-img {
  width: 240px;
  height: 240px;
  object-fit: contain;
  display: block;
}


/* ===== Results 卡片插图图片 ===== */
.home-results__card-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px 24px;
}

.home-results__card-img {
  width: 100%;
  max-width: 200px;
  height: auto;
  object-fit: contain;
  display: block;
}



/* Work 页面视频强制显示（无 GSAP 动效时） */
.work-hero__video {
    opacity: 1 !important;
}

/* ============================================================
   WORK HERO 完整修复 — 对齐原站所有细节
   ============================================================ */

/* 定义边距变量（原站等效值） */
:root {
    --horizontal-edge-space: 48px;
}

/* badge：去掉 opacity:0 和 blur，直接显示 */
.work-header__badge {
    opacity: 1 !important;
    filter: none !important;
    background-color: #FFFFFF1F !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* features：去掉 opacity:0 和 blur，直接显示 */
.work-header__features {
    opacity: 1 !important;
    filter: none !important;
    max-width: 360px !important;
}

/* feature-text 颜色精确对齐 */
.work-header__feature-text {
    color: #FFFFFFB2 !important;
    font-size: 17px !important;
}

/* h1 split-word：无 GSAP，直接显示 */
.work-header__title .split-word {
    opacity: 1 !important;
    transform: none !important;
}

/* work-header wrapper 精确宽度 */
.work-header__wrapper {
    max-width: 996px !important;
}

.work-header__content {
    max-width: 612px !important;
}

/* 遮罩用标准 CSS 写法，不依赖 Tailwind 变量 */
.work-hero__overlay--bottom {
    background: linear-gradient(to top, #151F2C 0%, rgba(21,31,44,0) 50%) !important;
}

.work-hero__overlay--top {
    background: linear-gradient(to bottom, rgba(0,0,0,0.48) 0%, rgba(0,0,0,0) 90%) !important;
}

/* 顶部遮罩调亮 */
.work-hero__overlay--top {
    background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 90%) !important;
}

/* Work Hero 标题字体调整 */
.work-header__title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 400 !important;
}

/* Work Hero 标题 — Playfair Display 500 加粗 */
.work-header__title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 500 !important;
}

/* Work Hero 标题 — 最终锁定 */
.work-header__title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 500 !important;
    font-size: 56px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    color: #ffffff !important;
    margin-top: 1rem !important;
    text-shadow: 0 0 20px rgba(255,255,255,0.4), 0 2px 4px rgba(0,0,0,0.5) !important;
}

/* ampersand 也用 Playfair italic */
.work-header__title-ampersand {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
}

/* split-word 去掉 opacity:0 */
.work-header__title .split-word {
    opacity: 1 !important;
    transform: none !important;
}

/* 标题字色纯白加强 */
.work-header__title {
    color: #ffffff !important;
    text-shadow: 
        0 0 30px rgba(255,255,255,0.8),
        0 0 80px rgba(255,255,255,0.4),
        0 2px 4px rgba(0,0,0,0.3) !important;
}

/* hero-ils 图片显示 */
.home-hero__image--fg {
    display: block !important;
}

/* hero-ils 隐藏 */
.home-hero__image--fg {
    display: none !important;
}

/* hero-ils 显示 */
.home-hero__image--fg {
    display: block !important;
}

/* 图片居中，左右对称留玻璃边 */
.home-hero__image--fg-container {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 0 16px !important;
}

.home-hero__image--fg {
    display: block !important;
    width: calc(100% - 0px) !important;
    height: auto !important;
}

/* 图片尺寸修复 — 不强制撑满，保持图片原始尺寸居中 */
.home-hero__image--fg-container {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 0 16px !important;
}

.home-hero__image--fg {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
}

/* 图片上下左右留边 */
.home-hero__image--fg-container {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 16px 16px 16px 16px !important;
}

/* 下边距加大，露出按钮 */
.home-hero__image--fg-container {
    padding: 16px 16px 32px 16px !important;
}

/* 图片最高占容器80%，底部留给按钮 */
.home-hero__image--fg-container {
    padding: 16px 16px 0 16px !important;
    max-height: 80% !important;
    overflow: hidden !important;
}

.home-hero__image--fg {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: auto !important;
}

/* 按钮 absolute 定位 */
.home-hero__image-link {
    position: absolute !important;
    bottom: 1.25rem !important;
    left: 1.25rem !important;
    right: 1.25rem !important;
}

/* ================================================================
   FILESTREAM 终版 — 严格按原站规则，2026-03-30
   ================================================================ */


.services-hero__mask {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

.services-hero__mask[data-position="left"] {
    display: block !important;
    clip-path: inset(0 50% 0 0) !important;
}

.services-hero__mask[data-position="right"] {
    clip-path: inset(0 0 0 50%) !important;
}

/* scroller：JS 驱动，无 animation */
.services-hero__scroller--sync {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 60px !important;
    will-change: transform !important;
    animation: none !important;
}

/* 所有 card 统一尺寸：aspect-ratio + height，和原站一致 */
.services-hero__card--img,
.services-hero__card--code {
    aspect-ratio: 480 / 300 !important;
    flex-shrink: 0;
}

/* 右列：圆角 */
.services-hero__card--img {
    border-radius: 16px !important;
}

.services-hero__card--img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.services-hero__card--code .whitespace-nowrap {
    margin: 0 !important;
    display: block !important;
    white-space: nowrap !important;
    color: rgba(0,0,0,0.7) !important;
    padding: 0 !important;
    line-height: 120% !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}
.services-hero__card--code .whitespace-nowrap:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ===== filestream 清理版 — 只保留滚动，无底色，无粒子 ===== */
.services-hero__card--code {
    background: transparent !important;
    color: rgba(0,0,0,0.7) !important;
    font-family: 'Fragment Mono', monospace !important;
    font-size: 12px ;
    padding: 8px 12px ;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
/* 代码卡片垂直对齐修正：去掉 padding，从顶部开始，不截断 */
.services-hero__card--code {
    padding: 0 !important;
    vertical-align: top !important;
    display: flex !important;
    overflow: hidden !important;
    flex-direction: column;
    justify-content: space-between;
}
/* 代码卡片行高精确控制，确保不截断 */
.services-hero__card--code {
    line-height: 14.4px !important;
}

/* 左右对调：左边显示图片，右边显示代码 */
.services-hero__mask[data-position="left"] {
    clip-path: inset(0 50% 0 0) !important;
}
.services-hero__mask[data-position="right"] {
    clip-path: inset(0 0 0 50%) !important;
}

/* services-hero 标题区居中 + Playfair Display */
.services-hero__content {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.services-hero__title {
    font-family: "Playfair Display", Georgia, serif !important;
    font-weight: 300 !important;
    font-size: 56px !important;
    line-height: 115% !important;
    letter-spacing: -0.01em !important;
    color: rgba(0,0,0,0.85) !important;
    text-align: center !important;
    max-width: 720px !important;
    margin: 16px auto 0 !important;
}

.services-hero__title .italic {
    font-style: italic !important;
}


/* 图片 mask 需要 relative，particle canvas 才能精准覆盖图片区域 */
.services-hero__mask[data-position='left'] {
    position: relative;
}

/* particle canvas 定位修复：图片 mask 必须 relative，否则 canvas absolute 无法覆盖 */
.services-hero__mask[data-position='left'] {
    position: relative !important;
}

/* particle canvas 最终方案：canvas 挂在 filestream，clip-path 限左半，无需改 mask position */
/* 撤销之前错误加的 mask relative（避免布局问题） */
.services-hero__mask[data-position='left'] {
    position: absolute !important;
}

/* 原站顺序还原：left mask=左半代码，right mask=右半图片 */
.services-hero__mask[data-position='left'] {
    clip-path: inset(0 50% 0 0) !important;
}
.services-hero__mask[data-position='right'] {
    clip-path: inset(0 0 0 50%) !important;
}
/* 左列代码字体 */
.services-hero__mask[data-position='left'] .services-hero__card {
    font-family: 'Fragment Mono', monospace;
    font-size: 12px;
    line-height: 120%;
}
/* 右列图片圆角 */
.services-hero__mask[data-position='right'] .services-hero__card {
    border-radius: 16px;
}

/* ===== filestream 완전 재정리 — 원사이트 1:1 ===== */

/* mask: position absolute, z-index:1 (원사이트) */
.services-hero__mask {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

/* gate/bg particle: z-index:0 (scroller 아래) */
#gate-particle-container,
#bg-char-particle {
    z-index: 0 !important;
}


/* img card 圆角 */
.services-hero__card--img {
    border-radius: 16px !important;
    overflow: hidden !important;
}

.services-hero__card--img {
    border-radius: 16px !important;
    overflow: hidden !important;
}
#gate-particle-container, #bg-char-particle {
    display: none !important;
}

/* ===== scroller 清理：强制两列都横向，gap:60px ===== */
.services-hero__scroller {
    flex-direction: row !important;
    gap: 60px !important;
    animation: none !important;
}
.services-hero__scroller--sync {
    flex-direction: row !important;
    gap: 60px !important;
    animation: none !important;
}

/* scroller align-items: flex-start，卡片从顶部对齐 */
.services-hero__scroller {
    align-items: flex-start !important;
}

/* 恢复 bg-char-particle 显示 */
#bg-char-particle {
    display: block !important;
    z-index: 0 !important;
}

/* gate particle 恢复显示，z-index:0（在 scroller 下） */
#gate-particle-container {
    display: block !important;
    z-index: 0 !important;
}

/* gate particle 最终修正：DOM 在 mask 之后自然叠上，不需要高 z-index */
#gate-particle-container {
    display: block !important;
    z-index: 2 !important;
    pointer-events: none !important;
}
#gate-particle-container canvas {
    display: block !important;
}

/* experience 图标去掉底色圆圈 */
.services-hero__experience-icon {
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* ===== services-grid Tab 式重构 ===== */
#services-grid {
    display: block;
    flex-direction: unset ;
    gap: unset;
    padding: 80px 120px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Tab 导航 */
.sg-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 48px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding-bottom: 0;
}
.sg-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 12px 20px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgba(0,0,0,0.45);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    margin-bottom: -1px;
    white-space: nowrap;
}
.sg-tab:hover { color: rgba(0,0,0,0.75); }
.sg-tab.active {
    color: rgb(136,45,23);
    border-bottom-color: rgb(136,45,23);
    font-weight: 600;
}

/* Panel */
.sg-panel { display: none; }
.sg-panel.active { display: block; }

.sg-panel__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* 文字区 */
.sg-panel__tag {
    display: inline-block;
    font-family: 'Fragment Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: rgba(0,0,0,0.4);
    text-transform: uppercase;
    margin-bottom: 16px;
}
.sg-panel__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 36px;
    font-weight: 300;
    line-height: 1.2;
    color: rgba(0,0,0,0.85);
    margin: 0 0 20px;
}
.sg-panel__desc {
    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(0,0,0,0.6);
    margin: 0 0 28px;
}

/* 成果列表 */
.sg-panel__outcomes {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sg-panel__outcomes li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: rgba(0,0,0,0.7);
    font-family: Inter, sans-serif;
}
.sg-panel__outcomes li svg {
    flex-shrink: 0;
    color: rgb(136,45,23);
}

/* 统计数字 */
.sg-panel__stats {
    display: flex;
    gap: 32px;
    padding-top: 28px;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.sg-stat__val {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: rgba(0,0,0,0.85);
    line-height: 1;
    margin-bottom: 4px;
}
.sg-stat__label {
    display: block;
    font-size: 12px;
    color: rgba(0,0,0,0.45);
    line-height: 1.4;
}

/* 图片区 */
.sg-panel__visual {
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4/3;
}
.sg-panel__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 面板切换动画 */
.sg-panel {
    animation: sgFadeIn 0.3s ease;
}
@keyframes sgFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* services-grid 旧规则强制清除 */
#services-grid .services-grid__card,
#services-grid .services-grid__card-inner,
#services-grid .services-grid__card-content,
#services-grid .services-grid__card-image {
    display: none !important;
}

/* sg-panel 强制可见 */
#services-grid .sg-panel.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
}

/* sg-panel__content grid 强制 */
#services-grid .sg-panel__content {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 80px !important;
    align-items: center !important;
}

/* sg-panel__text 显示 */
#services-grid .sg-panel__text {
    display: block !important;
}

/* sg-panel__visual 显示 */
#services-grid .sg-panel__visual {
    display: block !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    aspect-ratio: 4/3 !important;
}
#services-grid .sg-panel__visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* services-grid 旧 space-y 规则清除 */
#services-grid > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.sg-panels {
    display: block !important;
}

/* ===== services-grid 粘性滚动卡片 sg2 ===== */
.sg2 {
    width: 100%;
    padding: 80px 0;
}
.sg2__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 120px;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 80px;
    align-items: start;
}

/* 左侧导航：sticky */
.sg2__nav {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sg2__nav-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: 16px;
    transition: border-color 0.2s, opacity 0.2s;
    opacity: 0.4;
}
.sg2__nav-item.active,
.sg2__nav-item:hover {
    opacity: 1;
    border-left-color: rgb(136,45,23);
}
.sg2__nav-num {
    font-family: 'Fragment Mono', monospace;
    font-size: 11px;
    color: rgb(136,45,23);
    line-height: 1.6;
    flex-shrink: 0;
}
.sg2__nav-title {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(0,0,0,0.85);
    line-height: 1.5;
}

/* 右侧卡片 */
.sg2__cards {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.sg2__card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.07);
    overflow: hidden;
    scroll-margin-top: 100px;
}
.sg2__card-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 360px;
}
.sg2__card-text {
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.sg2__card-tag {
    font-family: 'Fragment Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: rgba(0,0,0,0.35);
    text-transform: uppercase;
    margin-bottom: 12px;
    display: block;
}
.sg2__card-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    font-weight: 300;
    line-height: 1.25;
    color: rgba(0,0,0,0.85);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}
.sg2__card-desc {
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(0,0,0,0.55);
    margin: 0 0 24px;
    flex-grow: 1;
}
.sg2__outcomes {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sg2__outcomes li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-family: Inter, sans-serif;
    color: rgba(0,0,0,0.65);
}
.sg2__outcomes li svg {
    flex-shrink: 0;
    color: rgb(136,45,23);
}
.sg2__stats {
    display: flex;
    gap: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(0,0,0,0.07);
}
.sg2__stat-val {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: rgba(0,0,0,0.85);
    line-height: 1;
    margin-bottom: 4px;
}
.sg2__stat-label {
    display: block;
    font-size: 11px;
    color: rgba(0,0,0,0.4);
    line-height: 1.4;
    font-family: Inter, sans-serif;
}
.sg2__card-img {
    overflow: hidden;
    background: #f5f5f5;
}
.sg2__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (min-width: 768px) {
    .book-gallery-mobile {
        display: none;
    }
}

/* ===== Book 翻页卡片 ===== */
.book-section {
    padding: 80px 0;
}
.book-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 60px;
}

/* 书本容器 */
.book {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    perspective: 1800px;
}

/* 每一页 */
.book__page {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.77,0,0.175,1), opacity 0.4s ease;
    border-radius: 0 16px 16px 0;
    box-shadow: 4px 4px 32px rgba(0,0,0,0.12);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}
.book__page--active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
    transform: rotateY(0deg);
}
.book__page--flipping-out {
    opacity: 1;
    z-index: 3;
    transform: rotateY(-100deg);
    pointer-events: none;
}
.book__page--prev {
    opacity: 1;
    z-index: 1;
    transform: rotateY(-5deg);
    pointer-events: none;
}

/* 页面内容（正面）*/
.book__page-front {
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 0 16px 16px 0;
    overflow: hidden;
    background: #fff;
}

/* 左侧文字 */
.book__page-text {
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
}
.book__tag {
    font-family: 'Fragment Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: rgba(0,0,0,0.35);
    text-transform: uppercase;
    display: block;
    margin-bottom: 14px;
}
.book__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 26px;
    font-weight: 300;
    line-height: 1.3;
    color: rgba(0,0,0,0.85);
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}
.book__desc {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.65;
    color: rgba(0,0,0,0.5);
    margin: 0 0 18px;
}
.book__outcomes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.book__outcomes li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-family: Inter, sans-serif;
    color: rgba(0,0,0,0.6);
}
.book__outcomes li svg { flex-shrink:0; color: rgb(136,45,23); }

/* 统计 */
.book__stats {
    display: flex;
    gap: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(0,0,0,0.07);
    margin-top: 16px;
}
.book__stat-val {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: rgba(0,0,0,0.85);
    font-family: Inter, sans-serif;
    line-height: 1;
    margin-bottom: 3px;
}
.book__stat-label {
    display: block;
    font-size: 10px;
    color: rgba(0,0,0,0.4);
    font-family: Inter, sans-serif;
    line-height: 1.4;
}

/* 右侧图片 */
.book__page-img {
    position: relative;
    overflow: hidden;
    background: #f0ede8;
}
.book__page-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.book__page-num {
    position: absolute;
    bottom: 16px;
    right: 20px;
    font-family: 'Fragment Mono', monospace;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.1em;
}

/* 左侧书脊阴影 */
.book__page::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);
    z-index: 1;
    border-radius: 0 0 0 0;
    pointer-events: none;
}

/* 控制栏 */
.book__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;
}
.book__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 999px;
    padding: 10px 20px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(0,0,0,0.7);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.book__btn:hover:not(:disabled) {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.3);
}
.book__btn:disabled {
    opacity: 0.3;
    cursor: default;
}
.book__dots {
    display: flex;
    gap: 8px;
}
.book__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.15);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    padding: 0;
}
.book__dot.active {
    background: rgb(136,45,23);
    transform: scale(1.3);
}

/* ===== 封面样式 ===== */
.book__cover-front {
    display: grid !important;
    grid-template-columns: 1fr 200px !important;
    background: #151F2C !important;
    border-radius: 0 16px 16px 0 !important;
}
.book__cover-left {
    padding: 52px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
}
.book__cover-label {
    font-family: 'Fragment Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    margin-bottom: 24px;
}
.book__cover-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 36px;
    font-weight: 300;
    line-height: 1.25;
    color: #fff;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
    max-width: 480px;
}
.book__cover-sub {
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.45);
    margin: 0 0 36px;
}
.book__cover-toc {
    list-style: none;
    padding: 0;
    margin: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.book__cover-toc li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.book__cover-toc li:last-child { border-bottom: none; }
.book__cover-toc-num {
    font-family: 'Fragment Mono', monospace;
    font-size: 10px;
    color: rgb(255,180,120);
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.book__cover-brand {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 32px;
}

/* 右侧书脊区域 */
.book__cover-right {
    background: rgb(245,100,90);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0 16px 16px 0;
}
.book__cover-spine {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    z-index: 1;
}
.book__cover-spine span {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.book__cover-spine span:last-child {
    color: rgba(255,255,255,0.5);
}
.book__cover-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
}
.book__cover-circle--1 { width: 260px; height: 260px; top: -60px; right: -60px; }
.book__cover-circle--2 { width: 180px; height: 180px; bottom: -40px; left: -60px; }
.book__cover-circle--3 { width: 100px; height: 100px; top: 40%; right: 20px; }

/* ===== 关书动效 ===== */
.book--closed {
    animation: bookClose 0.8s cubic-bezier(0.77,0,0.175,1) forwards;
}
@keyframes bookClose {
    0%   { transform: perspective(1800px) rotateY(0deg); }
    50%  { transform: perspective(1800px) rotateY(-8deg) scale(0.97); }
    100% { transform: perspective(1800px) rotateY(0deg) scale(0.95); box-shadow: 2px 2px 12px rgba(0,0,0,0.08); }
}

/* 关书状态 */
.book--is-closed .book__page {
    opacity: 0 !important;
    pointer-events: none !important;
}
.book--is-closed .book__page--cover {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: rotateY(0deg) !important;
}

/* Next 按钮最后页变"Close" */
.book__btn--close {
    background: rgba(0,0,0,0.06) !important;
    border-color: rgba(0,0,0,0.2) !important;
}

/* 封面标题大字 */
.book__cover-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 52px !important;
    font-weight: 300 !important;
    line-height: 1.15 !important;
    color: #fff !important;
    margin: 0 0 32px !important;
    letter-spacing: -0.02em !important;
}
.book__cover-title em {
    font-style: italic !important;
    color: rgb(255,180,120) !important;
}

/* ===== 封面重排版 ===== */
.book__cover-front {
    display: grid !important;
    grid-template-columns: 1fr 120px !important;
    background: #151F2C !important;
    border-radius: 0 16px 16px 0 !important;
}
.book__cover-left {
    padding: 48px 52px 40px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 0 !important;
}
/* label 上方 */
.book__cover-label {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 16px !important;
}
/* 标题区 */
.book__cover-title {
    font-size: 58px !important;
    line-height: 1.1 !important;
    margin: 0 0 0 !important;
    flex-shrink: 0 !important;
}
/* 目录：两列横排 */
.book__cover-toc {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 32px !important;
    margin: 32px 0 0 !important;
    flex: 1 !important;
    align-content: end !important;
}
.book__cover-toc li {
    font-size: 12px !important;
    padding-bottom: 9px !important;
    gap: 10px !important;
}
/* PRISM 品牌字 */
.book__cover-brand {
    margin-top: 20px !important;
    font-size: 11px !important;
}

/* 右侧书脊：深棕红 */
.book__cover-right {
    background: rgb(136,45,23) !important;
    border-radius: 0 16px 16px 0 !important;
}
.book__cover-circle--1 { border-color: rgba(255,255,255,0.15) !important; }
.book__cover-circle--2 { border-color: rgba(255,255,255,0.1) !important; }
.book__cover-circle--3 { border-color: rgba(255,255,255,0.12) !important; }

/* italic 颜色换成浅暖色（深棕红背景下更协调）*/
.book__cover-title em {
    color: rgb(136,45,23) !important;
}

/* 目录序号颜色也换成深棕红系 */
.book__cover-toc-num {
    color: rgb(136,45,23) !important;
}

/* that win. 和目录序号 → 深棕红 */
.book__cover-title em {
    color: rgb(136,45,23) !important;
}
.book__cover-toc-num {
    color: rgb(136,45,23) !important;
}

/* 统一深棕红 rgb(136,45,23) */
.book__cover-title em,
.book__cover-toc-num {
    color: rgb(136,45,23) !important;
}

/* that win. 和序号 → 白色 */
.book__cover-title em,
.book__cover-toc-num {
    color: #ffffff !important;
}

/* 封面左侧圆角 */
.book__page--cover .book__page-front,
.book__page--cover .book__cover-front,
.book__page--cover .book__cover-left {
    border-radius: 16px 0 0 16px !important;
}
.book__page--cover {
    border-radius: 16px !important;
}
.book__cover-front {
    border-radius: 16px !important;
}

/* ===== Book 立体感 + 圆角全面修正 ===== */

/* 书本外壳：加厚阴影，轻微透视倾斜感 */
.book {
    filter: drop-shadow(0 24px 48px rgba(0,0,0,0.22)) drop-shadow(0 4px 12px rgba(0,0,0,0.12));
}

/* 所有页面统一圆角 */
.book__page {
    border-radius: 16px !important;
    overflow: hidden !important;
}
.book__page-front {
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* 封面四周圆角 */
.book__cover-front {
    border-radius: 16px !important;
    overflow: hidden !important;
}
.book__cover-left {
    border-radius: 16px 0 0 16px !important;
}
.book__cover-right {
    border-radius: 0 16px 16px 0 !important;
}

/* 书脊阴影（左边缘立体感）*/
.book__page::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 32px; height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.05) 60%, transparent 100%);
    z-index: 10;
    pointer-events: none;
    border-radius: 16px 0 0 16px;
}

/* 书本右侧高光（增加立体翻翘感）*/
.book__page::after {
    content: '';
    position: absolute;
    right: 0; top: 0;
    width: 2px; height: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.12), transparent 40%, rgba(0,0,0,0.08));
    z-index: 10;
    pointer-events: none;
}

/* 书本底部厚度感（多层阴影模拟书页叠加）*/
.book-wrap {
    position: relative;
}
.book-wrap::after {
    content: '';
    position: absolute;
    bottom: 44px;
    left: 60px; right: 60px;
    height: 12px;
    background: #d4cfc9;
    border-radius: 0 0 12px 12px;
    z-index: -1;
    transform: scaleX(0.98);
    filter: blur(1px);
}
.book-wrap::before {
    content: '';
    position: absolute;
    bottom: 40px;
    left: 60px; right: 60px;
    height: 16px;
    background: #c8c2bb;
    border-radius: 0 0 14px 14px;
    z-index: -2;
    transform: scaleX(0.96);
    filter: blur(2px);
}


/* 取消暖米色背景，恢复原来的 */
.book-section {
    background: transparent;
}

/* ===== Book 性能优化 ===== */

/* 1. 移除 book 上的 filter，改用 box-shadow（不影响子元素 GPU 层）*/
.book {
    filter: none !important;
    box-shadow: 0 24px 48px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.10) !important;
}

/* 2. will-change 提前告知浏览器 */
.book__page {
    will-change: transform, opacity;
}

/* 3. 反向翻页专用 class（替代 JS 动态写 transition）*/
.book__page--flipping-back {
    transition: transform 0.7s cubic-bezier(0.77,0,0.175,1) !important;
    transform: rotateY(0deg) !important;
    opacity: 1 !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

/* 裁掉四角白色尖角 */
.book {
    border-radius: 16px !important;
    overflow: hidden !important;
}
.book__page,
.book__page-front,
.book__cover-front {
    border-radius: 0 !important;
}

/* stats 三列等宽，排列统一 */
.book__stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(0,0,0,0.07) !important;
    margin-top: 16px !important;
}
.book__stat {
    padding-right: 16px !important;
    border-right: 1px solid rgba(0,0,0,0.06) !important;
}
.book__stat:last-child {
    border-right: none !important;
    padding-right: 0 !important;
    padding-left: 16px !important;
}
.book__stat:nth-child(2) {
    padding-left: 16px !important;
}
.book__stat-val {
    font-size: 18px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
}
.book__stat-label {
    font-size: 10px !important;
    line-height: 1.5 !important;
    margin-top: 3px !important;
}

/* 书页内容不超出边界 */
.book__page-text {
    padding: 32px 32px 28px !important;
    overflow: hidden !important;
    height: 100% !important;
    box-sizing: border-box !important;
}
.book__tag {
    margin-bottom: 8px !important;
}
.book__title {
    font-size: 22px !important;
    margin: 0 0 10px !important;
    line-height: 1.25 !important;
}
.book__desc {
    font-size: 12px !important;
    line-height: 1.6 !important;
    margin: 0 0 12px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.book__outcomes {
    gap: 5px !important;
    margin: 0 0 0 !important;
}
.book__outcomes li {
    font-size: 11px !important;
}
.book__stats {
    margin-top: 10px !important;
    padding-top: 12px !important;
    flex-shrink: 0 !important;
}
.book__stat-val {
    font-size: 16px !important;
}
.book__stat-label {
    font-size: 9px !important;
}

/* 消除书本倾斜 */
.book__page--prev {
    transform: rotateY(0deg) !important;
    opacity: 0 !important;
}
/* perspective 只在翻页时生效，平时不影响布局 */
.book {
    perspective: none !important;
}
.book__page {
    perspective: 1800px;
}

/* 还原 book perspective，只清掉 prev 倾斜 */
.book {
    perspective: 1800px !important;
}
.book__page {
    perspective: none !important;
}

/* 翻页速度放慢到 0.9s */
.book__page {
    transition: transform 0.9s cubic-bezier(0.77,0,0.175,1), opacity 0.4s ease !important;
}
.book__page--flipping-back {
    transition: transform 0.9s cubic-bezier(0.77,0,0.175,1) !important;
}

/* scroll-behavior: smooth 限定为锚点链接，不全局生效 */
html {
    scroll-behavior: auto !important;
}
a[href^='#'] {
    scroll-behavior: smooth;
}

/* experience-list 改为 4列网格，12个整齐排列 */
.services-hero__experience-list {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px 0 !important;
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
}
.services-hero__experience-text {
    font-size: 13px !important;
    white-space: nowrap !important;
}

/* experience-list 上7下5，两行排列 */
.services-hero__experience-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 4px !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}
.services-hero__experience-item {
    color: rgba(0,0,0,0.8);
    font-size: 15px;
}
.services-hero__experience-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    white-space: nowrap;
    flex: 0 0 auto;
    width: auto;
    background: transparent;
    border-radius: 0;
}
.services-hero__experience-text {
    font-size: 13px;
    white-space: nowrap;
}

/* 第8-12项（第二行）自动居中，不需要额外处理 */

/* 上7下5：第8个开始换行并整体居中 */
.services-hero__experience-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 6px !important;
    max-width: 880px !important;
    margin: 0 auto !important;
}
.services-hero__experience-item:nth-child(8) ~ .services-hero__experience-item:last-child {
    margin-right: auto !important;
}

/* 强制上7下5：用 Grid 7列，第二行从第2格开始 */
.services-hero__experience-list {
    display: grid !important;
    grid-template-columns: repeat(7, auto) !important;
    justify-content: center !important;
    gap: 8px 6px !important;
    max-width: 100% !important;
}
/* 第8个起另起一行，放在 grid-row 2，从第2列开始 */
.services-hero__experience-item:nth-child(8) {
    grid-row: 2;
    grid-column: 2 / span 1;
    margin-left: 0;
}
.services-hero__experience-item:nth-child(9)  { grid-row: 2; grid-column: 3; }
.services-hero__experience-item:nth-child(10) { grid-row: 2; grid-column: 4; }
.services-hero__experience-item:nth-child(11) { grid-row: 2; grid-column: 5; }
.services-hero__experience-item:nth-child(12) { grid-row: 2; grid-column: 6; }


/* Tech Stack 分组布局 */
.services-platforms__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 32px !important;
}
.sp-group__label {
    font-family: 'Fragment Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.35);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}
.services-platforms__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
.services-platforms__item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    transition: background 0.15s !important;
    text-decoration: none !important;
}
.services-platforms__item:hover {
    background: rgba(0,0,0,0.04) !important;
}
.services-platforms__item-name {
    font-family: Inter, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(0,0,0,0.75) !important;
}

/* 图标：圆形色块 + 首字母 */
.sp-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    font-family: Inter, sans-serif !important;
    flex-shrink: 0 !important;
    color: #fff !important;
}
.sp-icon::after { color: #fff; font-weight: 700; }

.sp-icon--next    { background: #000; }
.sp-icon--next::after    { content: 'N'; }
.sp-icon--react   { background: #61DAFB; }
.sp-icon--react::after   { content: 'R'; color: #000; }
.sp-icon--vue     { background: #42B883; }
.sp-icon--vue::after     { content: 'V'; }
.sp-icon--ts      { background: #3178C6; }
.sp-icon--ts::after      { content: 'TS'; font-size: 8px; }
.sp-icon--tailwind { background: #38BDF8; }
.sp-icon--tailwind::after { content: 'TW'; font-size: 8px; }

.sp-icon--node    { background: #339933; }
.sp-icon--node::after    { content: 'N'; }
.sp-icon--python  { background: #3776AB; }
.sp-icon--python::after  { content: 'Py'; font-size: 9px; }
.sp-icon--wp      { background: #21759B; }
.sp-icon--wp::after      { content: 'WP'; font-size: 8px; }
.sp-icon--shopify { background: #96BF48; }
.sp-icon--shopify::after { content: 'S'; }
.sp-icon--graphql { background: #E10098; }
.sp-icon--graphql::after { content: 'G'; }

.sp-icon--pg      { background: #336791; }
.sp-icon--pg::after      { content: 'PG'; font-size: 8px; }
.sp-icon--mongo   { background: #47A248; }
.sp-icon--mongo::after   { content: 'M'; }
.sp-icon--supabase { background: #3ECF8E; }
.sp-icon--supabase::after { content: 'S'; color: #000; }
.sp-icon--aws     { background: #FF9900; }
.sp-icon--aws::after     { content: 'AWS'; font-size: 7px; }
.sp-icon--vercel  { background: #000; }
.sp-icon--vercel::after  { content: '▲'; font-size: 11px; }

.sp-icon--openai  { background: #10A37F; }
.sp-icon--openai::after  { content: 'AI'; font-size: 8px; }
.sp-icon--claude  { background: #D97757; }
.sp-icon--claude::after  { content: 'C'; }
.sp-icon--stripe  { background: #6772E5; }
.sp-icon--stripe::after  { content: 'S'; }
.sp-icon--ga      { background: #F9AB00; }
.sp-icon--ga::after      { content: 'GA'; font-size: 8px; color: #000; }
.sp-icon--zapier  { background: #FF4A00; }
.sp-icon--zapier::after  { content: 'Z'; }

/* sp-icon 改为纯容器，不再用色块 */
.sp-icon {
    width: 28px !important;
    height: 28px !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.sp-icon::after {
    display: none !important;
}
.sp-icon img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Advantage 卡片视觉区 */
.adv-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 100%;
    padding: 24px;
}
.adv-visual__icon {
    color: rgba(0,0,0,0.65);
}
.adv-visual__tags,
.adv-visual__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.adv-visual__tags span,
.adv-visual__chips span {
    padding: 5px 14px;
    background: rgba(0,0,0,0.06);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(0,0,0,0.65);
    letter-spacing: 0.02em;
}
.adv-visual__stats {
    display: flex;
    gap: 32px;
}
.adv-visual__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.adv-num {
    font-size: 28px;
    font-weight: 700;
    color: rgba(0,0,0,0.8);
    line-height: 1;
}
.adv-label {
    font-size: 11px;
    color: rgba(0,0,0,0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.adv-visual__bar-wrap {
    width: 100%;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.adv-visual__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: rgba(0,0,0,0.45);
    width: 100%;
}
.adv-bar-track {
    flex: 1;
    height: 8px;
    background: rgba(0,0,0,0.07);
    border-radius: 4px;
    overflow: hidden;
}
.adv-bar-fill {
    height: 100%;
    border-radius: 4px;
}
.adv-bar-fill--before { width: 45%; background: rgba(0,0,0,0.2); }
.adv-bar-fill--after  { width: 78%; background: rgba(0,0,0,0.7); }

/* 4张卡片 → 4列等宽，居中对齐 */
.services-advantage__slides {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
}
.services-advantage__header {
    margin-bottom: 32px !important;
}

/* Advantage 4张卡各自颜色背景 */
.services-advantage__slide:nth-child(1) .adv-visual {
    background: linear-gradient(135deg, #E8F4E8 0%, #D4EDD4 100%);
    border-radius: 16px;
}
.services-advantage__slide:nth-child(2) .adv-visual {
    background: linear-gradient(135deg, #EDE8F8 0%, #DDD4F4 100%);
    border-radius: 16px;
}
.services-advantage__slide:nth-child(3) .adv-visual {
    background: linear-gradient(135deg, #FFF3E0 0%, #FFE8C0 100%);
    border-radius: 16px;
}
.services-advantage__slide:nth-child(4) .adv-visual {
    background: linear-gradient(135deg, #E0F0FF 0%, #C8E4FF 100%);
    border-radius: 16px;
}
.adv-visual {
    min-height: 180px !important;
}

/* 强制 4张卡全部静态显示，清除 absolute 定位遗留 */
.services-advantage__slides {
    position: static !important;
    min-height: unset !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
}
.services-advantage__slide {
    position: static !important;
    opacity: 1 !important;
    display: block !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
}
/* 颜色色块撑满卡片图片区域 */
.services-advantage__slide-image {
    width: 100% !important;
    height: 200px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
}
.adv-visual {
    width: 100% !important;
    height: 100% !important;
    min-height: unset !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}
/* 隐藏原来的左右导航箭头（4张全展示不需要） */
.services-advantage__nav {
    display: none !important;
}

/* 修正容器左右对称 */

/* 卡片等高，内部 flex 纵向撑满 */
.services-advantage__slide {
    display: flex !important;
    flex-direction: column !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}

/* 色块固定高度，内容居中不溢出 */
.services-advantage__slide-image {
    height: 180px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
}

/* 色块内部 flex 居中，padding 均匀 */
.adv-visual {
    padding: 20px !important;
    gap: 14px !important;
    justify-content: center !important;
    align-items: center !important;
}

/* icon 固定大小不溢出 */
.adv-visual__icon svg {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
}

/* 数字统计行不换行 */
.adv-visual__stats {
    gap: 16px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    justify-content: center !important;
}
.adv-num {
    font-size: 22px !important;
}

/* 描述文字 flex-grow 撑满剩余空间，上下对齐 */
.services-advantage__slide-desc {
    flex: 1 !important;
}

/* 强制 advantage 区域完全居中对称 */
.services-advantage {
    width: 100% !important;
    overflow: hidden !important;
}
.services-advantage__slider {
    width: 100% !important;
}
.services-advantage__slides {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
}

/* 统一 advantage 容器宽度与其他板块一致 */

/* advantage container - 与其他板块统一，只此一条 */
.services-advantage__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 120px;
    box-sizing: border-box;
}

/* 统一所有板块容器宽度 */
.services-platforms__container,
.services-advantage__container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 4张卡适配容器，不被截断 */
.services-advantage__slides {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    overflow: visible !important;
}
.services-advantage__slide {
    padding: 20px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.services-advantage__slide-title {
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 隐藏卡内图片区域 */
.services-advantage__slide-image {
    display: none !important;
}

/* 每张卡内顶部色块，纯 CSS 渲染 */







/* Next 按钮可点击状态字色变深棕红 */
.book__btn:not(:disabled) {
    color: rgb(136, 45, 23) !important;
}
.book__btn:not(:disabled) svg {
    stroke: rgb(136, 45, 23) !important;
}

/* Tech Stack 分组标签字色 → 深棕红 */
.sp-group__label {
    color: rgb(136, 45, 23) !important;
}

/* website-development 页面所有标题统一 Playfair Display */
.page-service-webdev h1,
.page-service-webdev h2,
.page-service-webdev h3,
.services-hero__title,
.services-platforms__title,
.services-advantage__title,
.faq__title,
.callout__title,
.services-advantage__slide-title,
.sg2__section-title,
.sg2__title {
    font-family: 'Playfair Display', Georgia, serif !important;
}

/* FAQ 标题强制 Playfair Display */
.faq__title {
    font-family: 'Playfair Display', Georgia, serif !important;
}

/* FAQ 标题 & 符号改用 Playfair Display italic，和标题统一 */
.faq__title-ampersand {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 300 !important;
}

/* 两列目录：最后一行（第5、第6项）都去掉底线 */
.book__cover-toc li:nth-last-child(-n+2) {
    border-bottom: none !important;
}

/* ── Visual Communication Tech Stack 横排 ── */
.vc-tools-grid {
    display: block !important;
    grid-template-columns: unset !important;
}
.vc-tools__list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.vc-tool__item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 16px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    position: relative;
}
.vc-tool__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}
.vc-tool__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.vc-tool__label {
    font-family: "Fragment Mono", monospace;
    font-size: 9px;
    color: rgb(255,180,120);
    background: rgba(255,180,120,0.1);
    border-radius: 4px;
    padding: 2px 6px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ── VC Tech Stack 横排 ── */
.sp-horizontal {
    display: block !important;
    grid-template-columns: unset !important;
}
.sp-list-horizontal {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 12px !important;
    flex-direction: row !important;
}
.sp-list-horizontal .services-platforms__item {
    flex-direction: row !important;
    width: auto !important;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 8px 14px !important;
    gap: 8px !important;
}
.sp-ai-badge {
    font-family: "Fragment Mono", monospace;
    font-size: 9px;
    color: rgb(136,45,23);
    background: rgba(136,45,23,0.12);
    border-radius: 4px;
    padding: 2px 5px;
    letter-spacing: 0.05em;
    margin-left: 2px;
}

/* ── 图标容器修复 ── */
.sp-list-horizontal .sp-icon {
    width: 20px !important;
    height: 20px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.sp-list-horizontal .sp-icon img,
.sp-list-horizontal .sp-icon svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
    display: block !important;
}


/* ── VC Masonry 瀑布流 ── */
.vc-masonry-wrap { padding:20px 20px 40px; }
.vc-masonry { position:relative; width:100%; }
.vc-masonry__item { position:absolute; top:0; left:0; cursor:pointer; border-radius:10px; overflow:hidden; will-change:transform,opacity; }
.vc-masonry__img { width:100%; height:100%; background-size:cover; background-position:center; border-radius:10px; transition:transform .4s ease; }
.vc-masonry__item:hover .vc-masonry__img { transform:scale(1.04); }
.vc-masonry__overlay { position:absolute; bottom:0; left:0; right:0; padding:20px 16px 14px; background:linear-gradient(to top,rgba(0,0,0,0.55),transparent); color:#fff; font-size:13px; font-weight:500; letter-spacing:.04em; border-radius:0 0 10px 10px; opacity:0; }
.vc-lb { display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; }
.vc-lb__bg { position:absolute; inset:0; background:rgba(0,0,0,0.88); backdrop-filter:blur(6px); }
.vc-lb__img { position:relative; max-width:88vw; max-height:84vh; border-radius:10px; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,0.5); z-index:1; }
.vc-lb__label { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.8); font-size:13px; letter-spacing:.06em; z-index:2; }
.vc-lb__close,.vc-lb__prev,.vc-lb__next { position:absolute; background:rgba(255,255,255,0.12); border:none; color:#fff; cursor:pointer; border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:18px; z-index:2; transition:background .2s; }
.vc-lb__close:hover,.vc-lb__prev:hover,.vc-lb__next:hover { background:rgba(255,255,255,0.25); }
.vc-lb__close { top:24px; right:24px; font-size:16px; }
.vc-lb__prev { left:24px; top:50%; transform:translateY(-50%); }
.vc-lb__next { right:24px; top:50%; transform:translateY(-50%); }

/* ── 大图左右翻页按钮 ── */
.vc-nav { position:absolute; top:0; width:30%; height:100%; z-index:5; cursor:pointer; display:flex; align-items:center; font-size:28px; color:rgba(255,255,255,0); transition:color .2s,background .2s; user-select:none; opacity:0; }
.vc-nav--prev { left:0; justify-content:flex-start; padding-left:20px; background:linear-gradient(to right,rgba(0,0,0,0.12),transparent); }
.vc-nav--next { right:0; justify-content:flex-end; padding-right:20px; background:linear-gradient(to left,rgba(0,0,0,0.12),transparent); }
.vc-brush__hero:hover .vc-nav { opacity:1; }
.vc-nav:hover { color:rgba(255,255,255,0.9) !important; }

/* ── Advantage 色卡 ── */
.adv-color-block { width:100%; height:200px; border-radius:12px; display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:16px; }
.adv-color-block img { width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; opacity:0.85; }


/* ── VC 瀑布墙突破父级 padding，宽度对齐 benefits 1200px ── */
.vc-masonry-wrap {
    width: calc(100% + 240px);
    max-width: 1200px;
    margin-left: -120px;
    margin-right: -120px;
}

/* ── Callout Prism 内容 ── */
.callout__content { position:relative; }
.callout__inner {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    pointer-events: none;
}
.callout__badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    padding: 5px 16px;
    margin-bottom: 24px;
    backdrop-filter: blur(4px);
}
.callout__title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 52px;
    font-weight: 300;
    line-height: 1.15;
    color: rgba(255,255,255,0.95);
    margin: 0 0 20px;
    text-shadow: 0 0 60px rgba(255,255,255,0.3), 0 2px 20px rgba(0,0,0,0.4);
    letter-spacing: -0.01em;
}
.callout__title em {
    font-style: italic;
    color: #fff;
    text-shadow: 0 0 80px rgba(255,220,180,0.6), 0 0 30px rgba(255,180,100,0.4);
}
.callout__sub {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,0.65);
    max-width: 440px;
    margin: 0 0 36px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.callout__cta {
    pointer-events: all;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 14px 36px;
    border-radius: 999px;
    text-decoration: none;
    backdrop-filter: blur(8px);
    transition: background 0.25s, border-color 0.25s, transform 0.2s;
    box-shadow: 0 0 30px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.2);
}
.callout__cta:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.6);
    transform: translateY(-2px);
    color: #fff;
}
@media (max-width: 768px) {
    .callout__title { font-size: 32px; }
    .callout__sub { font-size: 14px; }
}


/* ── Advantage 卡片悬停交互 ── */
.services-advantage__slide {
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
    cursor: default;
}
.services-advantage__slide:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.adv-color-block {
    transition: transform 0.35s ease;
    overflow: hidden;
}
.adv-color-block img {
    transition: none;
}
.services-advantage__slide-title {
    transition: color 0.25s ease;
}
.services-advantage__slide:hover .services-advantage__slide-title {
    color: #4a4a4a;
}
.services-advantage__slide-desc {
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0.75;
    transform: translateY(2px);
}
.services-advantage__slide:hover .services-advantage__slide-desc {
    opacity: 1;
    transform: translateY(0);
}


/* ── PRISM 手绘下划线动效 ── */
.home-about__brand-wrap {
    position: relative;
    display: inline;
}
.prism-underline {
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 14px;
    overflow: visible;
    pointer-events: none;
}
.prism-underline__path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: none;
}
.prism-underline__path.is-drawn {
    animation: draw-underline 1.0s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes draw-underline {
    to { stroke-dashoffset: 0; }
}


/* ── PRISM 双笔刷下划线 ── */
.prism-underline {
    position: absolute;
    left: -4px;
    bottom: -10px;
    width: calc(100% + 8px);
    height: 24px;
    overflow: visible;
    pointer-events: none;
}
.prism-underline__path {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
}
.prism-underline__path--1.is-drawn {
    animation: draw-underline 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}
.prism-underline__path--2.is-drawn {
    animation: draw-underline 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}


/* ── PRISM 回环笔刷线（覆盖旧版） ── */
.prism-underline {
    position: absolute !important;
    left: -8px !important;
    bottom: -14px !important;
    width: calc(100% + 16px) !important;
    height: 38px !important;
    overflow: visible !important;
    pointer-events: none !important;
}
.prism-underline__path {
    stroke-dasharray: 700 !important;
    stroke-dashoffset: 700 !important;
}
.prism-underline__path.is-drawn {
    animation: draw-underline 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards !important;
}


/* ── PRISM 下划线终版修复 ── */
.home-about__brand-wrap {
    position: relative !important;
    display: inline !important;
}
.prism-underline {
    position: absolute !important;
    left: -8px !important;
    bottom: -14px !important;
    width: calc(100% + 16px) !important;
    height: 38px !important;
    overflow: visible !important;
    pointer-events: none !important;
}
.prism-underline__path {
    stroke-dasharray: 700 !important;
    stroke-dashoffset: 700 !important;
    transition: none !important;
}
.prism-underline__path.is-drawn {
    animation: draw-underline-final 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards !important;
}
@keyframes draw-underline-final {
    to { stroke-dashoffset: 0; }
}



    to   { opacity:1; transform: translateX(0); }
}


/* ── Callout 棱镜光束重设计 ── */
.callout__inner {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 60px 40px;
    mix-blend-mode: normal;
}

/* badge：毛玻璃质感，随光束透亮 */
#callout-badge {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.7);
    backdrop-filter: blur(8px);
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

/* 标题：白色，光束扫过时局部高亮 */
.callout__title {
    font-size: clamp(2rem, 4vw, 3.2rem) !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    /* 光束感：文字有微弱发光 */
    text-shadow: 0 0 40px rgba(255,255,255,0.15);
    transition: text-shadow 0.5s ease;
}
.callout__title em {
    font-style: italic !important;
    color: rgba(255,255,255,0.6) !important;
}

/* 副文字：半透明，柔和 */
.callout__sub {
    font-size: 15px !important;
    color: rgba(255,255,255,0.5) !important;
    max-width: 480px;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* CTA 按钮：初始透明边框，随光束变色 */
#callout-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 14px 32px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    text-decoration: none !important;
    border: 1.5px solid rgba(255,255,255,0.3) !important;
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
    backdrop-filter: blur(12px);
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s !important;
    cursor: pointer;
}
#callout-cta:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.5) !important;
}


/* ── Masonry Lightbox ── */
#vc-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}
#vc-lightbox.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}
.vc-lb__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(6px);
}
.vc-lb__stage {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90vw;
    max-height: 90vh;
}
.vc-lb__img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.6);
    animation: lb-in 0.25s cubic-bezier(0.2,0,0.2,1);
}
@keyframes lb-in {
    from { opacity:0; transform: scale(0.92); }
    to   { opacity:1; transform: scale(1); }
}
.vc-lb__close {
    position: fixed;
    top: 24px; right: 28px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 20px;
    width: 44px; height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.vc-lb__close:hover { background: rgba(255,255,255,0.2); }
.vc-lb__prev, .vc-lb__next {
    position: fixed;
    top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 22px;
    width: 48px; height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.vc-lb__prev { left: 24px; }
.vc-lb__next { right: 24px; }
.vc-lb__prev:hover, .vc-lb__next:hover { background: rgba(255,255,255,0.22); }
.vc-lb__label {
    position: fixed;
    bottom: 28px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* ── work 页面 callout 深色背景 ── */
.work-archive .callout,
.work-archive .callout__wrapper {
    background: #151F2C !important;
}


/* ── work 页面 callout 和 body 之间空隙填深色 ── */
.work-archive {
    background: #151F2C !important;
    padding-bottom: 0 !important;
}
.work-archive .callout {
    background: #151F2C !important;
    margin: 0 !important;
    padding: 80px 0 !important;
}
.work-archive .callout__wrapper {
    background: #151F2C !important;
}
body:has(.work-archive) {
    background: #151F2C !important;
}


/* ── work 页面 FAQ 深色背景白色文字 ── */
.work-archive .faq {
    background: #151F2C !important;
}
.work-archive .faq__title {
    color: #fff !important;
}
.work-archive .faq__title-ampersand {
    color: rgba(255,255,255,0.4) !important;
}
.work-archive .faq__question {
    color: rgba(255,255,255,0.9) !important;
}
.work-archive .faq__answer p {
    color: rgba(255,255,255,0.55) !important;
}
.work-archive .faq__button {
    color: rgba(255,255,255,0.9) !important;
    border-color: rgba(255,255,255,0.1) !important;
}
.work-archive .faq__button svg path {
    stroke: rgba(255,255,255,0.6) !important;
}
.work-archive .faq__item {
    border-color: rgba(255,255,255,0.1) !important;
}

/* ── work 页面页脚文字白色 ── */
.work-archive + footer,
.work-archive ~ footer {
    background: #151F2C !important;
}


/* ── work FAQ ampersand 白色 ── */
.work-archive .faq__title-ampersand {
    color: rgba(255,255,255,0.85) !important;
}


/* ── work 页面 footer 深色背景白色文字 ── */
.work-archive ~ .site-footer,
.page-template-page-work .site-footer {
    background: #151F2C !important;
    border-top-color: rgba(255,255,255,0.08) !important;
}
.work-archive ~ .site-footer,
.work-archive ~ .site-footer a,
.work-archive ~ .site-footer p,
.work-archive ~ .site-footer span,
.work-archive ~ .site-footer li,
.work-archive ~ .site-footer h1,
.work-archive ~ .site-footer h2,
.work-archive ~ .site-footer h3,
.work-archive ~ .site-footer h4 {
    color: rgba(255,255,255,0.75) !important;
}
.work-archive ~ .site-footer a:hover {
    color: #fff !important;
}
.work-archive ~ .site-footer .site-footer__divider,
.work-archive ~ .site-footer hr {
    border-color: rgba(255,255,255,0.1) !important;
}


/* ── work 页面 footer 链接强制白色 ── */
.work-archive ~ .site-footer a {
    color: rgba(255,255,255,0.7) !important;
}
.work-archive ~ .site-footer a:hover {
    color: #fff !important;
}
.work-archive ~ .site-footer .site-footer__nav-link,
.work-archive ~ .site-footer .footer-nav__link,
.work-archive ~ .site-footer li a,
.work-archive ~ .site-footer .footer__link {
    color: rgba(255,255,255,0.7) !important;
}
.work-archive ~ .site-footer .site-footer__heading,
.work-archive ~ .site-footer .footer__heading,
.work-archive ~ .site-footer .footer-nav__heading {
    color: rgba(255,255,255,0.4) !important;
    letter-spacing: 0.1em;
}


/* ── work 页面 body class 定位 footer ── */
body.work-page-dark .site-footer {
    background: #151F2C !important;
    border-top-color: rgba(255,255,255,0.08) !important;
}
body.work-page-dark .site-footer *:not(svg):not(path) {
    color: rgba(255,255,255,0.7) !important;
}
body.work-page-dark .site-footer a:hover {
    color: #fff !important;
}


/* ── work 页面 footer 正确选择器（.footer 不是 .site-footer）── */
body.work-page-dark .footer {
    background: #151F2C !important;
    border-top-color: rgba(255,255,255,0.08) !important;
}
body.work-page-dark .footer__brand-description,
body.work-page-dark .footer__nav-title,
body.work-page-dark .footer__nav-text,
body.work-page-dark .footer__nav-link,
body.work-page-dark .footer__nav-link span,
body.work-page-dark .footer__bottom,
body.work-page-dark .footer__bottom-text,
body.work-page-dark .footer__bottom a,
body.work-page-dark .footer__legal,
body.work-page-dark .footer__legal a,
body.work-page-dark .footer p,
body.work-page-dark .footer span,
body.work-page-dark .footer li,
body.work-page-dark .footer a {
    color: rgba(255,255,255,0.7) !important;
}
body.work-page-dark .footer__nav-title {
    color: rgba(255,255,255,0.35) !important;
}
body.work-page-dark .footer a:hover,
body.work-page-dark .footer__nav-link:hover span {
    color: #fff !important;
}
body.work-page-dark .footer__divider,
body.work-page-dark .footer hr {
    border-color: rgba(255,255,255,0.1) !important;
    background: rgba(255,255,255,0.1) !important;
}


/* ── work 页面 footer logo 反色为白 ── */
body.work-page-dark .footer__brand-logo {
    filter: invert(1) brightness(2) !important;
}


/* ── VC Masonry 三列等高网格 ── */
.vc-masonry-v3-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: end;
}
.vc-masonry-v3-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.vc-masonry-v3-col .vc-masonry__item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}
.vc-masonry-v3-col .vc-masonry__img {
    background-size: cover;
    background-position: center;
    width: 100%;
    border-radius: 12px;
}




/* ── services-platforms 宽度对齐 1200px ── */
.services-platforms__container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}


/* ── VC 工具板块 v2 ── */
.vc-platforms__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
.vc-platforms__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 48px;
}
.vc-platforms__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 42px;
    font-weight: 300;
    line-height: 1.2;
    color: rgba(0,0,0,0.85);
    margin: 0;
}
.vc-platforms__title-em {
    font-style: italic;
    color: rgba(0,0,0,0.5);
    font-size: 36px;
}
.vc-platforms__cta {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 500;
    color: rgba(0,0,0,0.5);
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    padding-bottom: 2px;
    transition: color 0.2s;
    white-space: nowrap;
    margin-bottom: 8px;
}
.vc-platforms__cta:hover {
    color: rgba(0,0,0,0.85);
}
.vc-platforms__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.vc-platforms__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 12px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.vc-platforms__item:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.vc-platforms__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.vc-platforms__icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.vc-platforms__name {
    font-size: 14px;
    font-weight: 500;
    color: rgba(0,0,0,0.75);
    white-space: nowrap;
}


/* ── VC 工具行标签 ── */
.vc-platforms__row-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.35);
    margin: 0 0 16px;
}


/* ── VC 工具行标签颜色：深棕红 ── */
.vc-platforms__row-label {
    color: #882D17 !important;
}


/* ── VC Talk to us 链接深棕红 ── */
.vc-platforms__cta {
    color: #882D17 !important;
    border-bottom-color: #882D17 !important;
}
.vc-platforms__cta:hover {
    color: #6a2010 !important;
}


/* === 板块间距修复：platforms -> advantage 间距统一 === */
.services-platforms {
    padding-top: 80px !important;
    padding-bottom: 0 !important;
}
.services-advantage {
    padding-top: 80px !important;
}


/* === 技术栈标题 3行->2行 === */
.services-platforms__title {
    max-width: 600px !important;
}


/* === VC 工具板块 CTA 按钮 === */
.vc-platforms__cta-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
}
.vc-platforms__cta-label {
    font-size: 15px;
    font-weight: 400;
    color: rgba(0,0,0,0.55);
    text-align: right;
    line-height: 1.4;
    margin: 0;
}
.vc-platforms__cta-btn {
    display: inline-block;
    background: #FF3F6C;
    color: #fff !important;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 36px;
    border-radius: 9999px;
    text-decoration: none !important;
    border: none;
    transition: background 0.2s, transform 0.2s;
    white-space: nowrap;
}
.vc-platforms__cta-btn:hover {
    background: #e0305a;
    transform: translateY(-2px);
}


/* === Shopify Hero 背景改为首页同色 #F0EFEB === */
.services-hero {
    background-color: #F0EFEB !important;
    color: rgba(0,0,0,0.85) !important;
}
.services-hero__title em {
    font-style: italic;
    font-weight: 300;
}


/* === Shopify/eCommerce Hero 背景强制覆盖 === */
body .services-hero,
html body .services-hero {
    background-color: #F0EFEB !important;
    background-image: none !important;
    color: rgba(0,0,0,0.85) !important;
}


/* === Shopify Hero 深色遮罩+文字全部覆盖 === */
.platform-hero .gr-48__radial,
.platform-hero .gr-48__overlay {
    display: none !important;
}
.platform-hero__badge {
    background-color: rgba(136,45,23,0.08) !important;
    color: rgb(136,45,23) !important;
}
.platform-hero__title {
    color: rgba(0,0,0,0.85) !important;
}
.platform-hero__desc {
    color: rgba(0,0,0,0.6) !important;
}
.platform-hero__stats-number,
.platform-hero__stats-label {
    color: rgba(0,0,0,0.85) !important;
}


/* ========================================
   Shopify Hero 板块
   ======================================== */
.shopify-hero {
    background-color: #F0EFEB;
    padding: 120px 0 80px;
}
.shopify-hero__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}
.shopify-hero__badge {
    display: inline-block;
    background-color: rgba(136,45,23,0.08);
    color: #882D17;
    font-family: "Fragment Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 6px;
    margin-bottom: 24px;
}
.shopify-hero__title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 56px;
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: rgba(0,0,0,0.85);
    margin: 0 0 28px;
    max-width: 800px;
}
.shopify-hero__title .italic {
    font-style: italic;
}
.shopify-hero__desc {
    font-size: 17px;
    line-height: 1.65;
    color: rgba(0,0,0,0.55);
    max-width: 560px;
    margin: 0 0 36px;
}
.shopify-hero__cta {
    display: inline-block;
    background: #882D17;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 32px;
    border-radius: 9999px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}
.shopify-hero__cta:hover {
    background: #6e2412;
    transform: translateY(-2px);
}
.shopify-hero__features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 72px;
    padding-top: 48px;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.shopify-hero__feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.shopify-hero__feature-icon {
    width: 44px;
    height: 44px;
    background: rgba(136,45,23,0.07);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.shopify-hero__feature-title {
    font-size: 15px;
    font-weight: 600;
    color: rgba(0,0,0,0.85);
    margin: 0 0 6px;
    line-height: 1.3;
}
.shopify-hero__feature-desc {
    font-size: 13px;
    color: rgba(0,0,0,0.5);
    line-height: 1.55;
    margin: 0;
}


/* === Shopify platform-hero 对齐 services-hero 标准参数 === */
.platform-hero__header {
    background-color: transparent !important;
    padding: 128px 0 80px !important;
}
.platform-hero__content {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.platform-hero__content-inner {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.platform-hero__badge {
    display: inline-block !important;
    background-color: rgba(136,45,23,0.08) !important;
    color: #882D17 !important;
    font-family: "Fragment Mono", monospace !important;
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}
.platform-hero__title {
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: 56px !important;
    font-weight: 300 !important;
    line-height: 115% !important;
    letter-spacing: -0.01em !important;
    color: rgba(0,0,0,0.85) !important;
    text-align: center !important;
    max-width: 720px !important;
    margin: 16px auto 0 !important;
}
.platform-hero__title .italic {
    font-style: italic !important;
}


/* === platform-why 6卡片网格 === */
.platform-why {
    padding: 80px 0 40px;
    background-color: #F0EFEB;
}
.platform-why__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}
.platform-why__header {
    margin-bottom: 56px;
}
.platform-why__badge {
    display: inline-block;
    background-color: rgba(136,45,23,0.08);
    color: #882D17;
    font-family: "Fragment Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.platform-why__title .italic {
    font-style: italic;
}
.platform-why__desc {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(0,0,0,0.5);
    max-width: 600px;
    margin: 0;
}
.platform-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.platform-why__card {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid rgba(0,0,0,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.platform-why__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.07);
}
.platform-why__card-icon {
    width: 48px;
    height: 48px;
    background: rgba(136,45,23,0.07);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.platform-why__card-title {
    font-size: 17px;
    font-weight: 600;
    color: rgba(0,0,0,0.85);
    margin: 0 0 10px;
    line-height: 1.3;
}
.platform-why__card-desc {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(0,0,0,0.5);
    margin: 0;
}


/* === platform-why header 排版修正：badge在标题上方 === */
.platform-why__header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    max-width: 640px !important;
    margin-bottom: 56px !important;
}
.platform-why__badge {
    margin-bottom: 16px !important;
}

.platform-why__desc {
    margin: 0 !important;
}


/* === platform-why header 统一居中布局 === */
.platform-why__header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    max-width: 700px !important;
    margin: 0 auto 56px !important;
}
.platform-why__badge {
    margin-bottom: 16px !important;
}

.platform-why__desc {
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: rgba(0,0,0,0.5) !important;
    margin: 0 !important;
    text-align: center !important;
}


/* === platform-why header 左标题+右副标题两列布局 === */
.platform-why__header {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 60px !important;
    text-align: left !important;
    max-width: 100% !important;
    margin: 0 0 48px !important;
}

.platform-why__badge {
    margin-bottom: 16px !important;
}

.platform-why__title .italic {
    font-style: italic !important;
}
.platform-why__desc {
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: rgba(0,0,0,0.5) !important;
    margin: 0 !important;
    max-width: 380px !important;
    text-align: left !important;
    flex-shrink: 1 !important;
}


/* === platform-why 最终布局修正 === */
.platform-why__container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
.platform-why__header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 60px !important;
    text-align: left !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 0 48px !important;
}

.platform-why__badge {
    margin-bottom: 16px !important;
}

.platform-why__desc {
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: rgba(0,0,0,0.5) !important;
    margin: 0 !important;
    max-width: 380px !important;
    text-align: left !important;
    flex-shrink: 1 !important;
}


/* platform-why title 字体缩小到2行 */



/* platform-why title 容器宽度控制换行，不改字体 */




/* platform-why title 对齐 vc-platforms__title：42px，容器控制2行 */




/* === 三个服务子页面标题统一：Hero 56px，其他板块 44px === */
.services-hero__title {
    font-size: 56px !important;
}
.services-advantage__title,
.services-process__title,
.services-work__title,
.services-expertise__title,
.services-grid__title,
.vc-platforms__title,
.vc-tools__title {
    font-size: 44px !important;
    font-family: "Playfair Display", Georgia, serif !important;
    font-weight: 300 !important;
    line-height: 115% !important;
    letter-spacing: -0.02em !important;
}


/* === 导航下拉 hover 宽度统一 === */
.nav__dropdown .nav__link {
    padding: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


/* platform-why title 56px，Playfair，对齐其他页面 */



/* [已移除] Shopify Hero max-width 560px 错误规则 */


/* Shopify Hero container 去掉左右 padding，标题全宽显示 */
.page-platform-shopify .services-hero__container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* === Shopify Hero 区：只用 page-platform-shopify 限定，清空所有干扰 === */
.page-platform-shopify .services-hero {
    background-color: #F0EFEB;
    padding: 0;
}
.page-platform-shopify .services-hero__container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 128px 0 80px !important;
    text-align: center !important;
}
.page-platform-shopify .services-hero__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.page-platform-shopify .services-hero__title {
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: 56px !important;
    font-weight: 300 !important;
    line-height: 115% !important;
    letter-spacing: -0.01em !important;
    color: rgba(0,0,0,0.85) !important;
    text-align: center !important;
    max-width: 720px !important;
    margin: 16px auto 0 !important;
}
.page-platform-shopify .services-hero__title .italic {
    font-style: italic !important;
}


/* platform-why title 改回 44px */



/* platform-why title 2行显示 */



/* platform-why header-left 宽度对齐标题2行 */



/* === platform-why title & header-left 最终规则 === */
.platform-why__title {
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: 44px !important;
    font-weight: 300 !important;
    line-height: 115% !important;
    letter-spacing: -0.02em !important;
    color: rgba(0,0,0,0.85) !important;
    margin: 0 !important;
    text-align: left !important;
    max-width: 360px !important;
}
.platform-why__title .italic {
    font-style: italic !important;
}
.platform-why__header-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex-shrink: 0 !important;
    max-width: 360px !important;
}


/* === Shopify Hero 视频背景 === */

.platform-hero__video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
}
.platform-hero__video-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.45) !important;
    z-index: 1 !important;
}
.platform-hero__header {
    position: relative !important;
    z-index: 2 !important;
}
.platform-hero--video .platform-hero__title,
.platform-hero--video .platform-why__badge {
    color: #fff !important;
}


/* Hero 视频背景：去掉 header 白色背景，文字改白色 */
.platform-hero__header {
    background-color: transparent !important;
    background: transparent !important;
}
.platform-hero__title {
    color: #ffffff !important;
}
.platform-hero__badge {
    background-color: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
}
.platform-hero__content {
    background: transparent !important;
}
.platform-hero__content-inner {
    background: transparent !important;
}


/* Hero 视频铺满到顶，去掉顶部白边 */

.platform-hero__video {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}
.page-platform-shopify .site-main,
.page-platform-shopify main {
    background: transparent !important;
}


/* 去掉 platform-page 顶部白边 */



/* === platform-hero 视频背景最终规则 === */
.platform-hero {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    min-height: 600px !important;
}


/* === platform-hero 视频背景：照搬 work-hero 模式 === */

.platform-hero {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
.platform-hero__video-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 0 !important;
}
.platform-hero__video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
}
.platform-hero__video-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 1 !important;
}
.platform-hero__header {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
    background-color: transparent !important;
}


/* 隐藏 platform-hero__bg，让视频完整透出 */
.platform-hero__bg {
    display: none !important;
}


/* Shopify 页面：body 和 site 背景全黑，消除白边 */



/* platform-hero 往上顶，消除白边 */
.page-platform-shopify .platform-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.page-platform-shopify .platform-hero {
    margin-top: 0 !important;
}

/* === Shopify Hero 最终覆盖 === */
.page-platform-shopify .platform-hero__header {
    background: transparent !important;
    background-color: transparent !important;
    padding: 128px 120px 80px !important;
}
.page-platform-shopify .platform-hero__header .platform-hero__bg,
.page-platform-shopify .platform-hero__header .gr-48 {
    display: none !important;
}
.page-platform-shopify .platform-hero__title {
    color: #fff !important;
    font-size: 56px !important;
    text-align: left !important;
}
.page-platform-shopify .platform-hero__badge {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

/* pricing header 对齐修正 */
.platform-comparison__header {
    max-width: 800px !important;
    text-align: center !important;
}


/* Results 插画缩小 */
.home-results__card-illustration svg {
    padding: 16px;
    box-sizing: border-box;
}

/* 图1缩小10% */
.home-results__card:first-child .home-results__card-illustration svg {
    transform: scale(1.05);
    transform-origin: bottom center;
}

/* 图4脚超出卡片底部 */
.home-results__card--last .home-results__card-illustration {
    overflow: visible;
}
.home-results__card--last .home-results__card-illustration svg {
    margin-bottom: -80px;
    margin-top: -40px;
    overflow: visible;
    transform: scale(1.1);
    transform-origin: bottom center;
}


/* Shopify Features 新卡片布局 */
.platform-why__card--new {
    padding: 0;
    overflow: hidden;
}
.platform-why__card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    background: #f0ede8;
    margin-bottom: 0;
}
.platform-why__card-image .platform-why__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.platform-why__card-body {
    padding: 0 4px;
}


/* ── Global Scrollbar ── */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(136, 45, 23, 0.35) transparent;
}
::-webkit-scrollbar {
    width: 2px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(136, 45, 23, 0.35);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(136, 45, 23, 0.65);
}


/* 瀑布流图片填满 */
.vc-masonry__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.vc-masonry__img a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}
.vc-masonry__img a:hover img {
    transform: scale(1.03);
}
/* GLightbox 关闭按钮确保显示 */
.gclose {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 999999 !important;
}

/* 桌面端隐藏移动端断行 */
.br-mobile { display: none; }