/* ============================================
  __   ___   _ _   ___   _____   ___  
  \ \ / / | | | \ | \ \ / / _ \ / _ \ 
   \ V /| | | |  \| |\ V / | | | | | |
    | | | |_| | |\  | | || |_| | |_| |
    |_|  \___/|_| \_| |_| \___/ \___/ 
                                    
   YUNYOO 自定义样式
   ============================================ */

/* --- 全局主色调覆盖 (#b074d1) --- */
:root {
  --tblr-primary: #b074d1;
  --tblr-primary-rgb: 176, 116, 209;
  --tblr-primary-fg: #fff;
  --tblr-link-color: #b074d1;
  --tblr-link-hover-color: #9a5cbf;
}

/* --- 页面背景 --- */
html {
  /* Tabler 的 ::-webkit-scrollbar 会强制使用经典滚动条，导致浏览器自动给 html
     添加 margin-left（等于滚动条宽度），从而产生左侧空白。显式重置为 0 修复此问题。 */
  margin-left: 0 !important;
  /* 锚点跳转时预留顶栏高度，防止内容被固定导航栏遮挡 喵了个咪的 */
  scroll-padding-top: 72px;
}
html, body {
  overflow-x: clip;
}
body {
  background-color: #fff !important;
}

/* --- 子页面 page-header-border 微调 --- */
.page-header-border {
  padding-top: clamp(1.5rem, 4vw, 2.5rem) !important;
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem) !important;
  background-color: transparent !important;
}
.page-header-border .page-title {
  font-size: clamp(1.5rem, 3.5vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.page-header-border .breadcrumb {
  font-size: 0.8125rem;
  margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
}
.page-header-border .page-subtitle {
  font-size: clamp(0.875rem, 1.5vw, 0.875rem);
  color: var(--tblr-secondary);
  margin-top: clamp(0.5rem, 1.5vw, 0.75rem);
}
@media (max-width: 767.98px) {
  .page-header-border > .container-xl {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* --- 新闻列表卡片间距与排版 --- */
/* 修正 Bootstrap .card-link + .card-link 的 margin-left 导致错位 */
.news-card-list .card-link + .card-link {
  margin-left: 0;
}
/* --- 新闻卡片：上方分隔线 + hover 浮现 --- */
.news-card {
  border: none !important;
  border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  position: relative;
  z-index: 0;
}
.news-card:first-child {
  border-top: none !important;
}
/* --- 新闻卡片：悬停动效 --- */
.news-card {
  transition: background 0.2s ease;
}
.news-card:hover {
  background: rgba(0, 0, 0, 0.015) !important;
}
.news-card .card-title {
  transition: color 0.15s ease;
}
.news-card:hover .card-title {
  color: var(--tblr-primary) !important;
}
.news-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.news-card-footer .icon-sm {
  width: 0.875rem;
  height: 0.875rem;
}
.news-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-list .card .card-body {
  padding: 1.75rem 1.5rem;
}
.news-card-list .card .card-title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 0.375rem;
}
.news-card-list .card .text-secondary {
  font-size: 0.875rem;
  line-height: 1.7;
}
.news-card-list .card + .card {
  margin-top: 0 !important;
}
/* --- 要不要来一杯美式 --- */

/* --- 右侧分类筛选选中样式（与 navbar 一致） --- */
.news-sidebar-filter.list-group {
  gap: 2px;
  padding: 0 0.5rem;
}
.news-sidebar-filter .list-group-item {
  padding: 0.4375rem 0.875rem;
  font-size: 0.875rem;
  border-radius: var(--tblr-border-radius);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.news-sidebar-filter .list-group-item:hover,
.news-sidebar-filter .list-group-item:focus {
  background-color: rgba(var(--tblr-primary-rgb), 0.10);
  color: var(--tblr-primary);
}
.news-sidebar-filter .list-group-item.active {
  background-color: rgba(var(--tblr-primary-rgb), 0.18) !important;
  color: var(--tblr-primary) !important;
  border-color: transparent !important;
  font-weight: 600;
}
.news-sidebar-filter .list-group-item.active small {
  color: var(--tblr-primary) !important;
}

/* --- 文章详情页 --- */
/* 阅读更多推荐卡片 */
.article-recommend-card {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  text-decoration: none !important;
}
.article-recommend-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(var(--tblr-primary-rgb), 0.3) !important;
}

/* --- 全局字体 --- */
@import url("https://rsms.me/inter/inter.css");

/* --- 导航栏 --- */
.navbar-yunyoo {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: none;
  transition: background 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* 沉浸态：页面顶部时导航栏完全透明，与 hero 渐变融合 */
.navbar-yunyoo.navbar-immersive {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom-color: transparent !important;
}
/* 下滑后恢复白色半透明 + 底部阴影 */
.navbar-yunyoo:not(.navbar-immersive) {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
/* 导航栏内容区域宽度（max-width: 64rem = 1024px） */
.navbar-yunyoo > .container-xl {
  /* max-width: 76rem; */
  padding-left: 1rem;
  padding-right: 1rem;
}
/* 一级菜单文字与图标粗细统一 */
.navbar-yunyoo .nav-link {
  font-weight: 600;
}
/* 一级菜单图标描边粗细 */
.navbar-yunyoo .nav-link .icon {
  stroke-width: 2.25;
}
/* 二级菜单图标粗细统一 + 颜色与文字同步 */
.navbar-yunyoo .dropdown-item .icon {
  stroke-width: 2.25;
  color: inherit;
}

/* Logo 样式 */
.navbar-brand-yunyoo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  margin-right: 0.5rem;
  flex-shrink: 0;
}
.navbar-brand-yunyoo:hover {
  text-decoration: none;
}
.navbar-brand-yunyoo img {
  height: 50px;
  width: auto;
}

/* --- 下拉菜单动画（桌面端 + 移动端通用） --- */
.navbar-yunyoo .dropdown-menu {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  visibility: hidden;
  display: block !important;
  pointer-events: none;
}
.navbar-yunyoo .dropdown-menu.show,
.navbar-yunyoo .nav-item.dropdown:hover > .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

/* --- 悬停自动展开下拉菜单（仅桌面端） --- */
@media (min-width: 992px) {
  /* 确保父级定位上下文 */
  .navbar-yunyoo .nav-item.dropdown {
    position: relative;
  }

  /* 强制覆盖 Bootstrap Popper 的定位，使下拉菜单紧贴导航项下方 */
  .navbar-yunyoo .nav-item.dropdown > .dropdown-menu {
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(8px) !important;
    margin-top: 0 !important;
    position: absolute !important;
  }
  .navbar-yunyoo .nav-item.dropdown:hover > .dropdown-menu,
  .navbar-yunyoo .nav-item.dropdown > .dropdown-menu.show {
    transform: translateY(0) !important;
  }

  /* 箭头旋转动画 */
  .navbar-yunyoo .nav-item.dropdown > .dropdown-toggle::after {
    transition: transform 0.25s ease;
  }
  .navbar-yunyoo .nav-item.dropdown:hover > .dropdown-toggle::after,
  .navbar-yunyoo .nav-item.dropdown > .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(135deg);
  }

  /* --- 桌面端一级菜单（nav-link）选中样式 ---
     与二级菜单 dropdown-item 保持一致的圆角紫色高亮 */
  .navbar-yunyoo .nav-link {
    border-radius: var(--tblr-border-radius);
    padding: 0.4375rem 0.625rem;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .navbar-yunyoo .nav-link:hover,
  .navbar-yunyoo .nav-link:focus {
    background-color: rgba(var(--tblr-primary-rgb), 0.10);
    color: var(--tblr-primary);
  }
  .navbar-yunyoo .nav-link:active {
    background-color: rgba(var(--tblr-primary-rgb), 0.18);
    color: var(--tblr-primary);
  }
  /* 图标颜色跟随文字 */
  .navbar-yunyoo .nav-link .icon {
    color: inherit;
  }
}

/* 移动端取消动画定位覆盖 */
@media (max-width: 991.98px) {
  .navbar-yunyoo .dropdown-menu {
    display: none !important;
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    position: static !important;
  }
  .navbar-yunyoo .dropdown-menu.show {
    display: block !important;
  }
}

/* =====================================================================
   产品 Mega Dropdown（横向二级分类）
   =====================================================================
   层级结构：
     .dropdown-menu-product             ← 第1层：下拉面板，控制整体宽度
       └─ .product-columns              ← 第2层：Flex 横向容器，二级分类并排
            ├─ .product-category-section ← 云服务器 (flex:2, 占约 67%)
            │    ├─ .product-category-header  ← 标题 + 描述
            │    └─ .product-items-grid       ← CSS columns 自动分列的三级产品
            │         └─ .product-region-group ← 地区分组 (break-inside:avoid)
            └─ .product-category-section ← 专用服务器 (flex:1, 占约 33%)
                 └─ 同上结构 (单列显示)

   移动端 (<992px)：列改竖向堆叠，三级产品强制单列，竖线分隔改横线。
   ===================================================================== */

/* 第1层：下拉面板容器
   - min/max-width 控制面板宽度，按需修改
   - 如新增二级分类导致内容更多，可加大 max-width */
.dropdown-menu-product {
  min-width: 780px;
  max-width: 860px;
  padding: 1rem 0.75rem;   /* 上下 1rem，左右 0.75rem */
}
/* 移动端：面板撑满屏幕宽度 */
@media (max-width: 991.98px) {
  .dropdown-menu-product {
    min-width: 100%;
    max-width: 100%;
  }
}

/* 第2层：横向 Flex 容器 —— 让二级分类（云服务器 / 专用服务器）水平并排
   - display:flex 控制水平排列
   - 如需列间距，修改 gap 值（当前为 0，靠 border-right 分隔）
   - 新增二级分类只需在 HTML 中添加 .product-category-section，自动加入 flex 布局 */
.product-columns {
  display: flex;
  gap: 0;
}
/* 移动端：改为竖向堆叠 */
@media (max-width: 991.98px) {
  .product-columns {
    flex-direction: column;
  }
}

/* 二级分类区块（每个 section 就是一列）
   - flex:1 为默认份数（专用服务器用此值）
   - min-width:0 防止 flex 子项溢出
   - 宽度比例说明：
       :first-child  flex:2  ←→  :last-child flex:1  =  约 67%:33%
       改成 flex:3 / flex:1 则为 75%:25%
       都用 flex:1 则 50%:50% 等分
   - 如有三个二级分类，可用 :nth-child(n) 单独设 flex 值 */
.product-category-section {
  flex: 1;
  min-width: 0;
  padding: 0 0.25rem;
}
/* 第一列（云服务器）内容多，分配 2 份宽度 */
.product-category-section:first-child {
  flex: 2;
}
/* 列之间的竖线分隔（非最后一列才显示） */
.product-category-section:not(:last-child) {
  border-right: 1px solid var(--tblr-border-color);
  margin-right: 0.25rem;
  padding-right: 0.5rem;
}
/* 移动端：竖线改横线，竖向堆叠 */
@media (max-width: 991.98px) {
  .product-category-section:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--tblr-border-color);
    margin-right: 0;
    padding-right: 0.25rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
  }
}

/* 二级分类头部区域（标题 + 介绍文案）
   对应 HTML: a.product-category-header > .product-category-title + .product-category-desc
   使用 <a> 标签包裹，点击可跳转到对应分类页面 */
.product-category-header {
  display: block;
  padding: 0.5rem 0.5rem 0.375rem;
  margin-bottom: 0.25rem;
  text-decoration: none;
  color: inherit;
  border-radius: var(--tblr-border-radius);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.product-category-header:hover {
  background-color: rgba(var(--tblr-primary-rgb), 0.10);
  text-decoration: none;
  color: inherit;
}
.product-category-header:hover .product-category-title {
  color: var(--tblr-primary);
}
.product-category-header:active {
  background-color: rgba(var(--tblr-primary-rgb), 0.18);
}

/* 分类标题（如 "云服务器"、"专用服务器"）
   - display:flex 让 SVG 图标与文字对齐
   - 修改字号：调整 font-size */
.product-category-title {
  font-size: 0.8125rem;   /* 13px */
  font-weight: 700;
  color: var(--tblr-body-color);
  display: flex;
  align-items: center;
  margin-bottom: 0.125rem;
}

/* 分类描述文案（标题下方的灰色小字） */
.product-category-desc {
  font-size: 0.7rem;      /* 11.2px */
  color: var(--tblr-secondary);
  line-height: 1.45;
  margin-bottom: 0.25rem;
}

/* 三级产品列表：CSS columns 自动分列
   - columns: <列数> <每列最小宽度>
     当前 "2 220px" = 最多 2 列，每列至少 220px；空间不足则自动变 1 列
     改成 "3 180px" 可允许 3 列（需同时加大面板 max-width）
   - max-height：超出此高度出现滚动条，按需调大/调小
   - overflow-y:auto：内容超出时自动显示纵向滚动条 */
.product-items-grid {
  columns: 2 220px;       /* 2列，每列最小 220px */
  column-gap: 0.25rem;    /* 列间距 */
  max-height: 420px;      /* 最大高度，超出滚动 */
  overflow-y: auto;
}
/* 专用服务器产品少 → 强制单列显示
   如后续产品增多，可改为 "columns: 2 200px" 恢复自动分列 */
.product-category-section:last-child .product-items-grid {
  columns: 1;
}
/* 地区分组防截断 —— 确保一个地区的标题和产品不会被分到两列
   如果某个地区产品特别多仍被截断，检查该 region-group 的总高度是否超过列高 */
.product-region-group {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;  /* Safari 兼容 */
  margin-bottom: 0.25rem;              /* 地区分组之间增加间距 */
}

/* 三级地区标题（如 "🇭🇰 香港"、"🇺🇸 美国"）
   - text-transform:uppercase + letter-spacing 让英文地区名更醒目
   - 如不需要大写效果，去掉 text-transform 即可 */
.product-region-title {
  font-size: 0.6875rem;   /* 11px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(var(--tblr-primary-rgb), 0.8);  /* 浅紫色，80% 透明度 */
  padding: 0.375rem 0.5rem 0.125rem;
  margin-top: 0.125rem;
}

/* 单个产品项（如 "香港九龙 - 云悠高性价比大陆优化"）
   HTML 结构: a.dropdown-item > strong(产品名) + span.text-secondary(描述)
   - display:flex + align-items:baseline 让产品名和描述基线对齐
   - white-space:normal 允许描述文字换行 */
.dropdown-menu-product .dropdown-item {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;          /* 产品名与描述之间的间距 */
  font-size: 0.8125rem;   /* 13px */
  padding: 0.375rem 0.5rem; /* 上下从 0.25rem 增加到 0.375rem */
  border-radius: var(--tblr-border-radius);
  white-space: normal;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dropdown-menu-product .dropdown-item:hover,
.dropdown-menu-product .dropdown-item:focus {
  background-color: rgba(var(--tblr-primary-rgb), 0.10);
  color: var(--tblr-primary);
}
.dropdown-menu-product .dropdown-item:active,
.dropdown-menu-product .dropdown-item.active {
  background-color: rgba(var(--tblr-primary-rgb), 0.18);
  color: var(--tblr-primary);
}
/* 产品名（加粗，不缩小） */
.dropdown-menu-product .dropdown-item strong {
  flex-shrink: 0;
  font-weight: 600;
}
/* 产品描述（灰色小字） */
.dropdown-menu-product .dropdown-item .text-secondary {
  font-size: 0.75rem;     /* 12px */
}

/* 移动端：三级产品强制单列，取消高度限制 */
@media (max-width: 991.98px) {
  .product-items-grid {
    columns: 1;
    max-height: none;
  }
}

/* --- 导航栏所有下拉菜单项统一圆角选中样式 ---
   让支持、状态、关于等普通下拉菜单的 hover/active 效果
   与产品下拉菜单一致（圆角矩形背景高亮） */
.navbar-yunyoo .dropdown-menu {
  padding: 0.375rem;             /* 面板内边距，给 item 圆角留出呼吸空间 */
  overflow: hidden;              /* 防止选中样式溢出 */
}
/* 产品面板单独恢复较大的内边距（覆盖上面的通用规则） */
.navbar-yunyoo .dropdown-menu.dropdown-menu-product {
  padding: 1rem 0.75rem;         /* 上下 1rem，左右 0.75rem */
}
.navbar-yunyoo .dropdown-menu .dropdown-item {
  border-radius: var(--tblr-border-radius);
  margin: 0.125rem 0;            /* 上下间距加大，选中状态不拥挤 */
  padding: 0.4375rem 0.625rem;   /* 内边距加大，点击区域更宽裕 */
  font-weight: 600;              /* 与产品下标题粗细一致 */
  transition: background-color 0.15s ease, color 0.15s ease;
}
.navbar-yunyoo .dropdown-menu .dropdown-item:hover,
.navbar-yunyoo .dropdown-menu .dropdown-item:focus {
  background-color: rgba(var(--tblr-primary-rgb), 0.10);
  color: var(--tblr-primary);
}
.navbar-yunyoo .dropdown-menu .dropdown-item:active,
.navbar-yunyoo .dropdown-menu .dropdown-item.active {
  background-color: rgba(var(--tblr-primary-rgb), 0.18);
  color: var(--tblr-primary);
}

/* --- 状态指示器（小巧纯文字样式） --- */
.status-indicator-badge {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  margin-top: -0.25rem;
  margin-left: -0.2rem;
  vertical-align: super;
}
.status-indicator-badge.status-up {
  color: var(--tblr-success);
}
.status-indicator-badge.status-down {
  color: var(--tblr-orange);
}

/* --- 右侧按钮区域 --- */
.navbar-auth-buttons {
  margin-left: auto;
}
.navbar-auth-buttons .btn {
  --tblr-btn-padding-x: 0.8rem;
  --tblr-btn-padding-y: 0.35rem;
  font-size: 0.8125rem;          /* 13px，稍小于默认 */
  border: none;
  box-shadow: none;
}
.navbar-auth-buttons .btn .icon {
  width: 1rem;                    /* 图标缩小 */
  height: 1rem;
}
.navbar-auth-buttons .btn + .btn {
  margin-left: 0.25rem;           /* 按钮间距缩小 */
}
/* 注册按钮：淡紫背景 + 紫色文字，hover 变为实色紫 */
.btn-register {
  background-color: rgba(var(--tblr-primary-rgb), 0.2);
  color: var(--tblr-primary);
  border: none;
}
.btn-register:hover,
.btn-register:focus {
  background-color: var(--tblr-primary);
  color: #fff;
}
.btn-register:active {
  background-color: var(--tblr-link-hover-color);
  color: #fff;
}

/* --- 移动端 Toggler 按钮缩小 --- */
@media (max-width: 991.98px) {
  .navbar-yunyoo .navbar-toggler {
    width: 1.75rem;              /* 整体按钮缩小（默认 2rem） */
    height: 1.75rem;
    padding: 0;
    border: none;
    box-shadow: none;
  }
  .navbar-yunyoo .navbar-toggler:focus {
    box-shadow: none;
  }
  .navbar-yunyoo .navbar-toggler-icon {
    width: 1.1em;                /* 仅缩小宽度，不改变 height（Tabler 用 2px 画线） */
  }
}

/* --- 移动端下拉菜单适配 --- */
@media (max-width: 991.98px) {
  /* 用内层包裹容器添加视觉样式，避免影响 collapse 的高度过渡动画 */
  .navbar-yunyoo .navbar-collapse {
    margin-top: 0.5rem;
  }
  .navbar-yunyoo .navbar-collapse > .navbar-nav,
  .navbar-yunyoo .navbar-collapse > .navbar-auth-buttons {
    background: #fff;
    padding: 0.75rem 1rem;
    border-radius: var(--tblr-border-radius);
    box-shadow: var(--tblr-box-shadow);
  }
  .navbar-yunyoo .navbar-collapse > .navbar-auth-buttons {
    margin-top: 0.5rem;
    margin-left: 0;
  }

  /* --- 移动端一级菜单（nav-link）选中/点击样式 ---
     触摸设备上 :hover/:focus 会粘滞，仅用 :active 做瞬时反馈 */
  .navbar-yunyoo .nav-link {
    border-radius: var(--tblr-border-radius);
    padding: 0.4375rem 0.625rem;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .navbar-yunyoo .nav-link:hover,
  .navbar-yunyoo .nav-link:focus {
    background-color: transparent;
    color: inherit;
  }
  .navbar-yunyoo .nav-link:active {
    background-color: rgba(var(--tblr-primary-rgb), 0.15);
    color: var(--tblr-primary);
  }

  /* --- 移动端下拉菜单项样式同步 ---
     覆盖 Tabler 在 mobile 下对 dropdown-item 的默认样式 */
  .navbar-yunyoo .dropdown-menu {
    padding: 0.25rem 0;
    border: none;
    box-shadow: none;
    background: transparent;
  }
  .navbar-yunyoo .dropdown-menu .dropdown-item {
    border-radius: var(--tblr-border-radius);
    margin: 0.125rem 0;
    padding: 0.4375rem 0.625rem;
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .navbar-yunyoo .dropdown-menu .dropdown-item:hover,
  .navbar-yunyoo .dropdown-menu .dropdown-item:focus {
    background-color: rgba(var(--tblr-primary-rgb), 0.10);
    color: var(--tblr-primary);
  }
  .navbar-yunyoo .dropdown-menu .dropdown-item:active,
  .navbar-yunyoo .dropdown-menu .dropdown-item.active {
    background-color: rgba(var(--tblr-primary-rgb), 0.18);
    color: var(--tblr-primary);
  }
  .navbar-yunyoo .dropdown-menu .dropdown-item .icon {
    color: inherit;
  }
}
/* --- 要不要再来一杯美式? --- */

/* ============================================
   首页 Hero 区域（tabler风格）
   ============================================ */

/* Hero 主容器：线性渐变背景（顶部浅紫渐变到白色） */
/* margin-top 负值让 hero 延伸到 navbar 后面，实现沉浸式效果 */
/* 使用 oklab 色彩空间插值，感知均匀，消除色阶断层 */
.hero {
  position: relative;
  overflow: hidden;
  margin-top: -5rem;
  padding: calc(clamp(6rem, 10vw, 8rem) + 5rem) 0 clamp(7.5rem, 14vw, 11rem);
  min-height: 82vh;
  display: flex;
  align-items: center;
  text-align: center;
  background: linear-gradient(in oklab 180deg, #f3eef8 0%, #f8f5fb 25%, #fcfafd 60%, #fdfcfe 100%);
  --glow-x: 50%;
  --glow-y: 40%;
}
@media (hover: hover) {
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
      ellipse 75% 65% at var(--glow-x) var(--glow-y),
      rgba(var(--tblr-primary-rgb), 0.25) 0%,
      rgba(var(--tblr-primary-rgb), 0.14) 28%,
      rgba(var(--tblr-primary-rgb), 0.05) 52%,
      transparent 73%
    );
    pointer-events: none;
    z-index: 0;
  }
}

/* Hero 底部渐变过渡遮罩，消除与下方区域的硬切 */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8rem;
  background: linear-gradient(to bottom, transparent, #fff);
  z-index: 1;
  pointer-events: none;
}

/* 保证内容层在光晕之上 */
.hero > .container-xl {
  position: relative;
  z-index: 1;
}

/* 大标题 — 响应式字号：移动端 2rem → 桌面端 3.25rem */
.hero-title {
  font-size: clamp(2.5rem, 8vw, 3.75rem);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1e293b;
  margin-bottom: 0;
}
.hero-title + .hero-title {
  margin-top: clamp(0.5rem, 1.5vw, 0.75rem);
}

/* SVG 手绘下划线 */
.hero-title-underline {
  position: relative;
  display: inline-block;
}
.hero-underline-svg {
  position: absolute;
  bottom: -0.15em;
  left: -2%;
  width: 104%;
  height: 0.45em;
  fill: var(--tblr-primary);
  opacity: 0.5;
  z-index: -1;
}

/* 描述文字 — 居中、限宽、柔和灰色 云忧 */
.hero-description {
  color: #656d77;
  font-size: clamp(0.9375rem, 2vw, 1.25rem);
  max-width: 40rem;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
  line-height: 1.7;
}

/* CTA 按钮组 */
.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--tblr-primary);
  color: #fff;
  border: none;
  font-weight: 600;
}
.hero-btn-primary:hover {
  background-color: var(--tblr-link-hover-color);
  color: #fff;
}
.hero-btn-primary .icon,
.hero-btn-primary svg {
  width: 1.25rem;
  height: 1.25rem;
}
.hero-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid #d0d5dd;
  color: #1e293b;
  font-weight: 600;
}
.hero-btn-outline:hover {
  border-color: var(--tblr-primary);
  color: var(--tblr-primary);
  background-color: rgba(var(--tblr-primary-rgb), 0.06);
}
.hero-btn-outline .icon,
.hero-btn-outline svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* 动态渐变 Canvas（由 hero-gradient.js 创建并驱动） */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* 移动端适配 */
@media (max-width: 767.98px) {
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  .hero-buttons .btn {
    width: 100%;
    max-width: 18rem;
  }
}

/* ============================================
   云游四大特性卡片区域
   ============================================ */
.section-features {
  margin-top: -3rem;
  padding: 0 0 4rem;
  position: relative;
  z-index: 2;
  background: transparent;
}
.section-features .card-feature {
  border: none;
  border-radius: var(--tblr-border-radius-lg);
  box-shadow: none;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  height: 100%;
  background: transparent;
}

.section-features .card-feature .card-body {
  padding: 2rem 1.5rem;
}
.section-features .card-feature .avatar {
  border: none;
  box-shadow: none;
}
.section-features .card-feature .card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.section-features .card-feature .text-secondary {
  font-size: 1rem;
  line-height: 1.6;
}

/* ============================================
   可用区域
   ============================================ */
.section-regions {
  padding: 4rem 0;
}
.section-regions .card {
  border: none;
  border-radius: var(--tblr-border-radius-lg);
  box-shadow: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(176, 116, 209, 0.05) 0%, rgba(176, 116, 209, 0.025) 40%, rgba(176, 116, 209, 0.008) 70%, transparent 100%);
}

/* Marker pulse animation */
@keyframes marker-pulse {
  0% {
    r: 6;
    opacity: 0.6;
  }
  50% {
    r: 14;
    opacity: 0;
  }
  100% {
    r: 6;
    opacity: 0;
  }
}
.jvm-marker {
  filter: drop-shadow(0 0 4px rgba(176, 116, 209, 0.5));
}

.marker-pulse-ring {
  animation: pulse-ring 2.5s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes pulse-ring {
  0% {
    r: 6;
    stroke-opacity: 0.6;
  }
  70% {
    r: 18;
    stroke-opacity: 0;
  }
  100% {
    r: 18;
    stroke-opacity: 0;
  }
}
/* Tooltip theme color */
.jvm-tooltip {
  background: var(--tblr-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0.375rem !important;
  padding: 0.25rem 0.625rem !important;
  font-size: 0.8125rem !important;
  font-family: var(--tblr-body-font-family) !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 8px rgba(176, 116, 209, 0.35) !important;
}

/* Map wrapper & overlay stats */
.map-wrapper {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
}

.map-overlay-stats {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  padding: 0.5rem 1rem;
  z-index: 10;
}

.map-stat {
  font-size: 0.875rem;
  color: var(--tblr-secondary);
  white-space: nowrap;
}

.map-stat strong {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--tblr-primary);
}

.map-stat-divider {
  width: 1px;
  height: 1.25rem;
  background: var(--tblr-border-color);
}

@media (min-width: 992px) {
  .map-overlay-stats {
    gap: 1rem;
    padding: 0.75rem 1.5rem;
  }
  .map-stat {
    font-size: 1rem;
  }
  .map-stat strong {
    font-size: 1.375rem;
  }
  .map-stat-divider {
    height: 1.5rem;
  }
}

/* ===== 产品展示区 ===== */
.section-products {
  padding: 4rem 0;
}
/* 产品卡片 */
.card-product {
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
  background: linear-gradient(165deg, rgba(176, 116, 209, 0.08) 0%, rgba(176, 116, 209, 0.02) 40%, transparent 70%) #fff;
}
.card-product:hover {
  border-color: var(--tblr-primary);
  box-shadow: 0 4px 24px rgba(176, 116, 209, 0.12);
}
.product-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--tblr-body-color);
  margin-bottom: 0.25rem;
}
.product-desc {
  font-size: 0.8125rem;
  color: var(--tblr-secondary);
  margin-bottom: 1rem;
}

/* 规格列表 */
.product-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.product-specs li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  padding: 0.375rem 0;
  border-bottom: 1px dashed var(--tblr-border-color);
}
.product-specs li span {
  color: var(--tblr-secondary);
}
.product-specs li strong {
  color: var(--tblr-body-color);
  font-weight: 600;
}

/* 价格 */
.product-price {
  margin-bottom: 1rem;
  text-align: right;
}
.price-amount {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--tblr-primary);
  letter-spacing: -0.02em;
}
.price-unit {
  font-size: 0.875rem;
  color: var(--tblr-secondary);
  margin-left: 0.125rem;
}
.price-daily {
  font-size: 0.75rem;
  color: var(--tblr-secondary);
  margin-top: 0.25rem;
}

/* === 独立服务器横向卡片 === */
.card-product-ds .card-body {
  padding: 1.25rem 1.5rem;
  gap: 1.5rem;
}
.ds-card-info {
  flex: 0 0 180px;
}
.ds-tier-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 2rem;
  background: rgba(var(--tblr-primary-rgb), 0.1);
  color: var(--tblr-primary);
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.ds-tier-badge--top {
  background: linear-gradient(135deg, rgba(176, 116, 209, 0.2), rgba(111, 66, 193, 0.2));
  color: var(--tblr-primary);
}
.ds-card-specs {
  flex: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.ds-card-specs li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  font-size: 0.8125rem;
  padding: 0 1.1rem;
  border-right: 1px dashed var(--tblr-border-color);
}
.ds-card-specs li:first-child {
  padding-left: 0;
  flex: 1.25;
}
.ds-card-specs li:last-child {
  border-right: none;
}
.ds-card-specs li span {
  color: var(--tblr-secondary);
  font-size: 0.75rem;
}
.ds-card-specs li strong {
  color: var(--tblr-body-color);
  font-weight: 600;
}
.ds-barebone-thumb {
  width: 100%;
  height: auto;
  margin-top: -0.25rem;
  border-radius: 3px;
  opacity: 0.88;
}
.ds-card-price {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.ds-card-price .product-price {
  text-align: right;
  margin-bottom: 0.75rem;
}
@media (max-width: 991.98px) {
  .card-product-ds .card-body {
    gap: 1rem;
  }
  .ds-card-info {
    flex: none;
    width: 100%;
  }
  .ds-card-specs {
    width: 100%;
    flex-direction: column;
  }
  .ds-card-specs li {
    flex: none;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-height: 3rem;
    padding: 0.375rem 0;
    border-right: none;
    border-bottom: 1px dashed var(--tblr-border-color);
  }
  .ds-card-specs li:last-child {
    border-bottom: none;
  }
  .ds-card-specs li span {
    font-size: 0.8125rem;
  }
  .ds-card-specs li strong {
    text-align: right;
  }
  .ds-barebone-thumb {
    display: none;
  }
  .ds-card-price {
    flex: none;
    width: 100%;
    align-items: flex-start;
  }
  .ds-card-price .product-price {
    text-align: left;
  }
  .ds-card-price .btn {
    width: 100%;
  }
}
.ds-card-model {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tblr-secondary);
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  margin-bottom: 0.2rem;
  letter-spacing: 0.01em;
}

/* === 移动端适配 === */
@media (max-width: 575.98px) {
  .product-name {
    font-size: 1.1rem;
  }
  .price-amount {
    font-size: 1.5rem;
  }
}

/* === 合作伙伴 Logo 展示 === */
.section-partners {
  padding: 4rem 0;
}
.card-partner {
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  box-shadow: none;
  height: 100%;
  overflow: hidden;
}
.partner-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.partner-desc {
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}

/* 无缝滚动容器 */
.logo-marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.logo-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 20s linear infinite;
}
.logo-track-reverse {
  animation-name: marquee-scroll-reverse;
}
.logo-marquee:hover .logo-track {
  animation-play-state: paused;
}
.logo-slide {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 0.5rem 1.25rem;
  flex-shrink: 0;
}

/* Logo 图片：灰度 + hover 显色 */
.logo-img {
  height: 28px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.45);
  transition: filter 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  flex-shrink: 0;
}
.logo-img:hover {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.08);
}

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

/* 右侧 CTA 卡片几何装饰 */
.card-partner-cta {
  position: relative;
  overflow: hidden;
}
.card-partner-cta::before {
  content: '';
  position: absolute;
  width: 215px;
  height: 215px;
  bottom: -80px;
  right: -80px;
  border-radius: 50%;
  background: var(--tblr-primary);
  opacity: 0.1;
  pointer-events: none;
}

/* 右侧品牌介绍 + CTA */
.partner-cta {
  padding: 2rem 1.75rem;
}
.partner-cta-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
.partner-cta-desc {
  font-size: 0.875rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.partner-cta-stats {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.partner-cta-stat {
  font-size: 0.8125rem;
  color: var(--tblr-secondary);
}
.partner-cta-stat strong {
  font-weight: 800;
  color: var(--tblr-primary);
}
.partner-cta-stat-divider {
  width: 1px;
  height: 14px;
  background: var(--tblr-border-color);
  flex-shrink: 0;
}

/* 移动端适配 */
@media (max-width: 991.98px) {
  .logo-img {
    height: 22px;
  }
  .logo-slide {
    gap: 1.75rem;
  }
}

/* ===== 终端模拟区 ===== */
.section-terminal {
  padding: 4rem 0;
}
/* 终端列 */
.terminal-col {
  position: relative;
}
/* 终端窗口 */
.terminal-window {
  border-radius: var(--tblr-border-radius-lg);
  overflow: hidden;
  background: #fafbfc;
  border: 1px solid var(--tblr-border-color);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  position: absolute;
  top: 0;
  left: calc(var(--tblr-gutter-x) * 0.5);
  right: calc(var(--tblr-gutter-x) * 0.5);
  bottom: 0;
  display: flex;
  flex-direction: column;
}
.terminal-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  background: #f0f1f3;
  border-bottom: 1px solid var(--tblr-border-color);
}
.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.terminal-dot-red { background: #ff5f57; }
.terminal-dot-yellow { background: #febc2e; }
.terminal-dot-green { background: #28c840; }
.terminal-header-title {
  margin-left: 8px;
  font-size: 0.7rem;
  color: #8b949e;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}
/* 圆环进度条 */
.terminal-progress {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  opacity: 1;
  transition: opacity 0.6s ease;
}
.terminal-progress.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.terminal-progress-text {
  font-size: 0.625rem;
  font-weight: 600;
  color: #8b949e;
  font-family: 'SF Mono', 'Fira Code', monospace;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.4s ease;
}
.terminal-progress.is-done .terminal-progress-text {
  color: #28c840;
}
.terminal-progress svg {
  width: 18px;
  height: 18px;
  transform: rotate(-90deg);
  display: block;
  transition: transform 0.4s ease;
}
.terminal-progress.is-done svg {
  transform: rotate(-90deg) scale(1.15);
}
/* 撒花粒子 */
.confetti-dot {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  animation: confetti-burst ease-out forwards;
}
@keyframes confetti-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--cx), var(--cy)) scale(0.3);
  }
}
.terminal-progress-bg {
  fill: none;
  stroke: rgba(0, 0, 0, 0.06);
  stroke-width: 3;
}
.terminal-progress-ring {
  fill: none;
  stroke: var(--tblr-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 97.39;
  stroke-dashoffset: 97.39;
  transition: stroke-dashoffset 0.3s ease, stroke 0.4s ease;
}
.terminal-progress.is-done .terminal-progress-ring {
  stroke: #28c840;
}
/* 重播按钮 */
.terminal-replay {
  margin-left: auto;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  color: #8b949e;
  cursor: pointer;
  padding: 2px 0;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease;
  opacity: 0;
}
.terminal-replay.is-visible {
  display: flex;
  animation: replay-fade-in 0.5s ease forwards;
}
.terminal-replay:hover {
  color: var(--tblr-primary);
  transform: scale(1.08);
}
.terminal-replay:hover svg {
  transform: rotate(-30deg);
  transition: transform 0.25s ease;
}
@keyframes replay-fade-in {
  from { opacity: 0; transform: translateX(6px); }
  to { opacity: 1; transform: translateX(0); }
}
.terminal-body {
  padding: 14px 16px;
  flex: 1;
  height: 0;
  overflow-y: auto;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Menlo', 'Consolas', monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #24292f;
  scrollbar-width: none;
  -ms-overflow-style: none;
  outline: none;
}
.terminal-body::-webkit-scrollbar {
  width: 6px;
}
.terminal-body::-webkit-scrollbar-track {
  background: transparent;
}
.terminal-body::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.2s;
}
/* 仅鼠标悬停且非自动输出状态时显示滚动条 */
.terminal-body:not(.is-auto-scrolling):hover {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.1) transparent;
}
.terminal-body:not(.is-auto-scrolling):hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
}

/* 终端文本颜色（浅色主题） */
.t-green { color: #1a7f37; }
.t-yellow { color: #9a6700; }
.t-blue { color: #0969da; }
.t-cyan { color: #0598bc; }
.t-red { color: #cf222e; }
.t-purple { color: #8250df; }
.t-dim { color: #8b949e; }
.t-white { color: #24292f; }
.t-bold { font-weight: 700; }

/* 光标闪烁 */
.terminal-cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--tblr-primary);
  animation: cursor-blink 1s step-end infinite;
  vertical-align: text-bottom;
  margin-left: 2px;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* 终端行 */
.terminal-line {
  white-space: pre-wrap;
  word-break: break-all;
}

/* 右侧部署时间线 */
.deploy-timeline {
  position: relative;
  padding: 0;
}
.deploy-step {
  position: relative;
  display: flex;
  padding-bottom: 1.5rem;
}
.deploy-step.is-last {
  padding-bottom: 0;
}
/* 竖线 */
.deploy-step::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 0;
  width: 2px;
  background: var(--tblr-border-color);
}
.deploy-step.is-last::before {
  display: none;
}
/* 图标圆点 */
.deploy-step-icon {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--tblr-border-color);
  background: var(--tblr-bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--tblr-secondary);
  z-index: 1;
}
.deploy-step-icon.is-done {
  border-color: var(--tblr-primary);
  background: rgba(var(--tblr-primary-rgb), 0.1);
  color: var(--tblr-primary);
}
/* 内容 */
.deploy-step-content {
  margin-left: 12px;
  min-width: 0;
  flex: 1;
}
.deploy-step-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.deploy-step-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tblr-secondary);
}
.deploy-step.is-last .deploy-step-label {
  color: var(--tblr-secondary);
}
.deploy-card.is-done .deploy-step.is-last .deploy-step-label {
  color: var(--tblr-primary);
}

/* 动画状态 */
.deploy-step .deploy-step-icon {
  transition: none;
}
.deploy-step::before {
  transition: none;
}
.deploy-step .deploy-step-content {
  transition: none;
}

/* 动画播放中：所有步骤先变淡 */
.deploy-card.is-animating .deploy-step .deploy-step-icon {
  border-color: var(--tblr-border-color);
  background: var(--tblr-bg-surface);
  color: var(--tblr-secondary);
}
.deploy-card.is-animating .deploy-step .deploy-step-content {
  opacity: 0.4;
}
.deploy-card.is-animating .deploy-step::before {
  background: var(--tblr-border-color);
}

/* 动画完成后：全部点亮（永久状态） */
.deploy-card.is-done .deploy-step .deploy-step-icon {
  border-color: var(--tblr-primary);
  background: rgba(var(--tblr-primary-rgb), 0.1);
  color: var(--tblr-primary);
}
.deploy-card.is-done .deploy-step .deploy-step-content {
  opacity: 1;
}
.deploy-card.is-done .deploy-step::before {
  background: var(--tblr-primary);
}

/*
 * 累积式高亮 — 4s 播放一次，停留在完成态
 * 通过 JS 添加 .is-animating 类触发
 */

/* ── 图标高亮 ── */
.deploy-card.is-animating .deploy-step:nth-child(1) .deploy-step-icon {
  animation: deploy-icon-s1 4s ease-in-out 1 forwards;
}
.deploy-card.is-animating .deploy-step:nth-child(2) .deploy-step-icon {
  animation: deploy-icon-s2 4s ease-in-out 1 forwards;
}
.deploy-card.is-animating .deploy-step:nth-child(3) .deploy-step-icon {
  animation: deploy-icon-s3 4s ease-in-out 1 forwards;
}
.deploy-card.is-animating .deploy-step:nth-child(4) .deploy-step-icon {
  animation: deploy-icon-s4 4s ease-in-out 1 forwards;
}

@keyframes deploy-icon-s1 {
  0%, 5%  { border-color: var(--tblr-border-color); background: var(--tblr-bg-surface); color: var(--tblr-secondary); }
  15%, 100% { border-color: var(--tblr-primary); background: rgba(var(--tblr-primary-rgb), 0.1); color: var(--tblr-primary); }
}
@keyframes deploy-icon-s2 {
  0%, 25% { border-color: var(--tblr-border-color); background: var(--tblr-bg-surface); color: var(--tblr-secondary); }
  35%, 100% { border-color: var(--tblr-primary); background: rgba(var(--tblr-primary-rgb), 0.1); color: var(--tblr-primary); }
}
@keyframes deploy-icon-s3 {
  0%, 45% { border-color: var(--tblr-border-color); background: var(--tblr-bg-surface); color: var(--tblr-secondary); }
  55%, 100% { border-color: var(--tblr-primary); background: rgba(var(--tblr-primary-rgb), 0.1); color: var(--tblr-primary); }
}
@keyframes deploy-icon-s4 {
  0%, 65% { border-color: var(--tblr-border-color); background: var(--tblr-bg-surface); color: var(--tblr-secondary); }
  75%, 100% { border-color: var(--tblr-primary); background: rgba(var(--tblr-primary-rgb), 0.1); color: var(--tblr-primary); }
}

/* ── 内容透明度 ── */
.deploy-card.is-animating .deploy-step:nth-child(1) .deploy-step-content {
  animation: deploy-text-s1 4s ease-in-out 1 forwards;
}
.deploy-card.is-animating .deploy-step:nth-child(2) .deploy-step-content {
  animation: deploy-text-s2 4s ease-in-out 1 forwards;
}
.deploy-card.is-animating .deploy-step:nth-child(3) .deploy-step-content {
  animation: deploy-text-s3 4s ease-in-out 1 forwards;
}
.deploy-card.is-animating .deploy-step:nth-child(4) .deploy-step-content {
  animation: deploy-text-s4 4s ease-in-out 1 forwards;
}

@keyframes deploy-text-s1 {
  0%, 5%  { opacity: 0.4; }
  15%, 100% { opacity: 1; }
}
@keyframes deploy-text-s2 {
  0%, 25% { opacity: 0.4; }
  35%, 100% { opacity: 1; }
}
@keyframes deploy-text-s3 {
  0%, 45% { opacity: 0.4; }
  55%, 100% { opacity: 1; }
}
@keyframes deploy-text-s4 {
  0%, 65% { opacity: 0.4; }
  75%, 100% { opacity: 1; }
}

/* ── 竖线高亮 ── */
.deploy-card.is-animating .deploy-step:nth-child(1)::before {
  animation: deploy-line-s1 4s ease-in-out 1 forwards;
}
.deploy-card.is-animating .deploy-step:nth-child(2)::before {
  animation: deploy-line-s2 4s ease-in-out 1 forwards;
}
.deploy-card.is-animating .deploy-step:nth-child(3)::before {
  animation: deploy-line-s3 4s ease-in-out 1 forwards;
}

@keyframes deploy-line-s1 {
  0%, 5%  { background: var(--tblr-border-color); }
  15%, 100% { background: var(--tblr-primary); }
}
@keyframes deploy-line-s2 {
  0%, 25% { background: var(--tblr-border-color); }
  35%, 100% { background: var(--tblr-primary); }
}
@keyframes deploy-line-s3 {
  0%, 45% { background: var(--tblr-border-color); }
  55%, 100% { background: var(--tblr-primary); }
}
.deploy-step-time {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--tblr-secondary);
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 7px;
  border-radius: 4px;
  line-height: 1.5;
}
.deploy-step.is-last .deploy-step-time {
  background: rgba(0, 0, 0, 0.04);
  color: var(--tblr-secondary);
}
.deploy-card.is-done .deploy-step.is-last .deploy-step-time {
  background: rgba(var(--tblr-primary-rgb), 0.1);
  color: var(--tblr-primary);
}
.deploy-step-title {
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.125rem;
  color: var(--tblr-body-color);
}
.deploy-step-desc {
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 0;
}
/* CTA */
.deploy-cta {
  margin-top: auto;
  padding-top: 0.5rem;
}
/* 部署卡片 */
.deploy-card {
  height: 100%;
}
.deploy-card .card-body {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.25rem 1.75rem;
}
.deploy-card .card-header {
  background: transparent;
  border-bottom: none;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
}
.deploy-card .card-header .card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tblr-secondary);
  letter-spacing: 0.02em;
}
/* 立即部署箭头 */
.deploy-cta-arrow {
  transition: transform 0.3s ease;
}
.deploy-card.is-done:hover .deploy-cta-arrow {
  animation: deploy-arrow-poke 0.8s ease-in-out infinite;
}
@keyframes deploy-arrow-poke {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

/* 终端桌面端尺寸 */
@media (min-width: 992px) {
  .terminal-col {
    flex: 0 0 55%;
    max-width: 55%;
  }
  .deploy-col {
    flex: 0 0 45%;
    max-width: 45%;
  }
}
/* 终端移动端适配 */
@media (max-width: 991.98px) {
  .terminal-col {
    position: static;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .deploy-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .terminal-window {
    position: static;
    max-width: 100%;
  }
  .terminal-body {
    height: 260px;
    flex: none;
    font-size: 0.7rem;
    padding: 12px;
  }
  .deploy-card {
    margin-top: 0;
  }
}

/* Terminal Feature Cards */
.card-terminal-feature {
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  background: var(--tblr-bg-surface);
  transition: box-shadow 0.3s, transform 0.3s;
  height: 100%;
}
.card-terminal-feature:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.card-terminal-feature .card-title {
  font-size: 1.1rem;
  font-weight: 700;
}
.card-terminal-feature .card-body {
  display: flex;
  flex-direction: column;
}
.card-terminal-feature .text-secondary {
  font-size: 0.9rem;
  line-height: 1.6;
  flex: 1;
}
.terminal-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(176, 116, 209, 0.12);
  color: #b074d1;
  flex-shrink: 0;
}

/* Icon scrolling strip */
.feature-icon-strip {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  border-radius: 8px;
}
.feature-icon-track {
  display: flex;
  gap: 10px;
  align-items: center;
  width: max-content;
  animation: scrollIcons 20s linear infinite;
  animation-play-state: paused;
}
.card-terminal-feature:hover .feature-icon-track {
  animation-play-state: running;
}
.feature-icon-item {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  border: none;
  color: var(--tblr-secondary);
  transition: color 0.2s;
}
.feature-icon-item img,
.feature-icon-item svg {
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity 0.3s, filter 0.3s;
}
.card-terminal-feature:hover .feature-icon-item {
  background: transparent;
  border-color: transparent;
}
.card-terminal-feature:hover .feature-icon-item img,
.card-terminal-feature:hover .feature-icon-item svg {
  opacity: 1;
  filter: grayscale(0);
}
@keyframes scrollIcons {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 767.98px) {
  .feature-icon-strip {
    display: none;
  }
}

/* ================================================================
   关于我们运悠页面
   ================================================================ */

/* Hero */
.about-hero {
  position: relative;
  overflow: hidden;
  margin-top: -5rem;
  padding: calc(clamp(5rem, 9vw, 8rem) + 5rem) 0 clamp(3rem, 10vw, 11rem);
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.about-hero > .container-xl {
  position: relative;
  z-index: 1;
}
.about-hero-text {
  padding-top: clamp(0rem, 3vw, 2.5rem);
}
.about-hero-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tblr-primary);
  margin-bottom: 1rem;
}
.about-hero-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tblr-body-color);
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
  line-height: 1.15;
}
.about-hero-desc {
  font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
  line-height: 1.8;
  color: var(--tblr-secondary);
  margin: 0;
  max-width: 34rem;
}
/* hero green-check list */
.hero-checks {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.hero-check-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--tblr-secondary);
}
.hero-check-icon {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0cbc87;
  flex-shrink: 0;
}
.hero-check-icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 11px;
  height: 11px;
  stroke-width: 3.5;
  color: #fff;
}
.about-hero-btns {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.about-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: var(--tblr-primary);
  border: 1px solid var(--tblr-primary);
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.about-hero-btn:hover {
  background: #9b5fbe;
  border-color: #9b5fbe;
  color: #fff;
  text-decoration: none;
  transform: translateY(1px);
}
.about-hero-btn-outline {
  background: transparent;
  color: var(--tblr-body-color);
  border: 1px solid #d0d5dd;
}
.about-hero-btn-outline:hover {
  border-color: var(--tblr-primary);
  color: var(--tblr-primary);
  background: rgba(var(--tblr-primary-rgb), 0.06);
}
.about-hero-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-hero-illustration img {
  width: 100%;
  max-width: clamp(300px, 40vw, 480px);
  height: auto;
}
@media (max-width: 991.98px) {
  .about-hero > .container-xl {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .about-hero-text {
    text-align: left;
  }
  .about-hero-title,
  .about-hero-desc {
    text-align: left;
  }
  .about-hero-btn {
    display: flex;
    justify-content: center;
  }
  .about-hero-btns {
    justify-content: flex-start;
  }
  .about-hero-stats {
    justify-content: center;
  }
  .about-hero-desc {
    display: block;
    max-width: none;
    margin-bottom: 2rem;
  }
  .about-hero-illustration {
    margin-top: 1.5rem;
    justify-content: center;
  }
}

/* 使命愿景 */
.about-mission {
  padding: 3.5rem 0 4rem;
}
.about-mission-card.about-contact-card {
  position: relative;
  padding: 3.25rem 3rem 3rem;
  overflow: hidden;
  background:
    linear-gradient(155deg, rgba(var(--tblr-primary-rgb), 0.035) 0%, transparent 60%),
    var(--tblr-bg-surface);
}
.about-mission-pattern {
  position: absolute;
  bottom: -10px;
  right: -20px;
  width: 280px;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.about-mission-deco {
  position: absolute;
  font-size: 5.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--tblr-primary);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  font-family: Georgia, 'Times New Roman', serif;
}
.about-mission-deco-open {
  top: -0.125rem;
  left: 1.25rem;
}
.about-mission-deco-close {
  bottom: -0.75rem;
  right: 1.25rem;
}
.about-mission-prose {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.about-mission-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0;
}
.about-mission-sep::before {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--tblr-primary-rgb), 0.28), transparent);
}
.about-mission-text {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--tblr-body-color);
  margin: 0;
}
.about-mission-text:first-child {
  font-size: 1rem;
  color: var(--tblr-body-color);
}
@media (max-width: 767.98px) {
  .about-mission {
    padding: 2.5rem 0 3rem;
  }
  .about-mission-card.about-contact-card {
    padding: 2rem 1.5rem 1.75rem;
  }
  .about-mission-pattern {
    width: 180px;
  }
  .about-mission-deco {
    font-size: 4rem;
  }
  .about-mission-deco-open {
    left: 0.75rem;
  }
  .about-mission-deco-close {
    right: 0.75rem;
  }
}

/* 服务介绍 */
.about-services {
  padding: 3.5rem 0 4rem;
}
.about-service-card {
  display: flex;
  flex-direction: column;
}
.about-service-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.625rem;
}
.about-service-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(var(--tblr-primary-rgb), 0.1);
  color: var(--tblr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.about-service-icon svg {
  width: 20px;
  height: 20px;
}
.about-service-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tblr-body-color);
  margin: 0;
}
.about-service-desc {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--tblr-secondary);
  margin: 0;
  flex: 1;
}
.about-service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tblr-primary);
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: gap 0.25s ease;
}
.about-service-link:hover {
  color: var(--tblr-primary);
  gap: 0.625rem;
}
.about-service-link svg {
  transition: transform 0.25s ease;
}
.about-service-link:hover svg {
  transform: translateX(2px);
}
@media (max-width: 767.98px) {
  .about-services {
    padding: 2.5rem 0 3rem;
  }
}

/* 关键数据 */
.about-hero-stats {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2rem;
}
.about-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.about-hero-stat-num {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--tblr-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.about-hero-stat-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--tblr-secondary);
  white-space: nowrap;
}
.about-hero-stat-divider {
  width: 1px;
  height: 1.75rem;
  background: var(--tblr-border-color);
  flex-shrink: 0;
}
@media (max-width: 767.98px) {
  .about-hero-stats {
    gap: 1rem;
    margin-top: 1.5rem;
  }
  .about-hero-stat-num {
    font-size: 1.0625rem;
  }
}

/* 时间线 Section */
/* ===== 关于页 时间线 ===== */
.about-timeline {
  padding: 2.5rem 0 3rem;
}
.section-title {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tblr-body-color);
}
.section-desc {
  font-size: 1rem;
  max-width: 36rem;
  margin: 1rem auto 0;
}
@media (max-width: 767.98px) {
  .section-title {
    font-size: 1.75rem;
  }
  .section-desc {
    margin-top: 0.5rem;
  }
}

/* 图标改为实心小圆点 */
.about-timeline .timeline {
  --tblr-timeline-icon-size: 0.625rem;
  margin-bottom: 0;
}
.about-timeline .timeline-event-icon {
  width: var(--tblr-timeline-icon-size) !important;
  height: var(--tblr-timeline-icon-size) !important;
  background: var(--tblr-primary) !important;
  border-radius: 50% !important;
  top: 0.375rem;
}
/* 逐段竖线：与圆点重叠消除缝隙，最后一个事件不画线 */
.about-timeline .timeline-event:not(:last-child)::before {
  top: 0.375rem;
  bottom: calc(-1.25rem - 0.375rem - 0.125rem);
}
/* 年份标签的连接线 — 上下大幅延伸覆盖 margin 间隙 */
.about-timeline .timeline-year-label::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  bottom: -1.5rem;
  left: calc(var(--tblr-timeline-icon-size, 0.625rem) / 2);
  width: var(--tblr-border-width, 1px);
  background-color: var(--tblr-border-color);
}
.about-timeline .timeline-year-label:first-child::before {
  top: 50%;
}
.about-timeline .timeline-event:not(:last-child) {
  margin-bottom: 1.25rem;
}

/* 年份分组标签 — 显示在时间线上 */
.about-timeline .timeline-year-label {
  list-style: none;
  position: relative;
  padding: 0.25rem 0;
  margin-top: -0.75rem;
  margin-bottom: 0.75rem;
}
.about-timeline .timeline-year-label:first-child {
  margin-top: 0;
}
.about-timeline .timeline-year-label:first-child::before {
  top: 50%;
}
.about-timeline .timeline-year-label > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--tblr-primary);
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: 1rem;
  padding: 0.125rem 0.75rem;
  position: relative;
  z-index: 5;
  letter-spacing: 0.04em;
  /* 以时间线竖线中心对齐 */
  left: calc(var(--tblr-timeline-icon-size, 0.625rem) / 2);
  transform: translateX(-50%);
}

/* 日期显示在最左侧 */
.about-timeline .timeline-event-date {
  position: absolute;
  right: calc(100% + 1rem);
  top: 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tblr-secondary);
  white-space: nowrap;
  text-align: right;
  width: 4rem;
}

/* 为日期腾出左侧空间 */
.about-timeline .timeline {
  margin-left: 5.5rem;
}
@media (max-width: 575.98px) {
  .about-timeline .timeline {
    margin-left: 4.5rem;
  }
  .about-timeline .timeline-event-date {
    right: calc(100% + 0.625rem);
    width: 3.5rem;
    font-size: 0.6875rem;
  }
  .about-timeline .timeline-year-label > span {
    font-size: 0.6875rem;
  }
}

/* 事件内容 */
.about-timeline .timeline-event-body {
  margin-left: calc(var(--tblr-timeline-icon-size, 0.625rem) + 1rem);
}
.about-timeline .timeline-event-body h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.125rem;
  color: var(--tblr-body-color);
}
.about-timeline .timeline-event-body p {
  font-size: 0.8125rem;
  margin-bottom: 0;
}

/* "未来" 虚线图标 */
.about-timeline .timeline-event-icon-future {
  background: transparent !important;
  border: 2px dashed var(--tblr-border-color);
  width: var(--tblr-timeline-icon-size) !important;
  height: var(--tblr-timeline-icon-size) !important;
}

/* 折叠/展开 */
.about-timeline .timeline-event-collapsed {
  display: none;
}
.about-timeline.is-expanded .timeline-event-collapsed {
  display: list-item;
}

/* 收起动画：同时缩高度 + 淡出，按钮自然流动 */
.about-timeline .timeline-event.is-collapsing,
.about-timeline .timeline-year-label.is-collapsing {
  opacity: 0 !important;
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  transition: opacity 0.3s ease,
              max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 展开/收起按钮 */
.timeline-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  padding: 0.4rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tblr-secondary);
  background: var(--tblr-bg-surface);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  line-height: 1.5;
}
.timeline-toggle-btn:hover {
  color: var(--tblr-primary);
  border-color: var(--tblr-primary);
  box-shadow: 0 2px 8px rgba(var(--tblr-primary-rgb), 0.12);
}
.timeline-toggle-btn:active {
  transform: scale(0.97);
}
.timeline-toggle-btn.is-disabled {
  pointer-events: none;
  opacity: 0.6;
}
.timeline-toggle-icon {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.about-timeline.is-expanded .timeline-toggle-icon {
  transform: rotate(180deg);
}

/* 滚动入场动画 */
.about-timeline .timeline-event[data-aos] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.about-timeline .timeline-event[data-aos].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 企业信息 */
.about-company {
  padding: 1rem 0 4rem;
}
.about-company-card {
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  padding: 2rem 2.5rem;
}
.about-company-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tblr-secondary);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.about-company-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tblr-body-color);
  word-break: break-word;
}
@media (max-width: 767.98px) {
  .about-company-card {
    padding: 1.5rem;
  }
}

/* 联系我们 */
.about-contact {
  padding: 2.5rem 0 4rem;
}
.about-contact-card {
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  padding: 1.75rem 2rem;
  height: 100%;
}
.about-contact-card-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tblr-secondary);
  margin-bottom: 1rem;
}
.about-contact-email-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
}
.about-contact-email-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.about-contact-email-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tblr-body-color);
}
.about-contact-email-label svg {
  color: var(--tblr-secondary);
}
.about-contact-email-desc {
  font-size: 0.8125rem;
  color: var(--tblr-secondary);
  padding-left: 1.75rem;
}
.about-contact-email-sla {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tblr-green);
  padding-left: 1.75rem;
  margin-top: 0.125rem;
}
.about-contact-ticket-sla {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tblr-green);
  margin-top: 0.25rem;
}
.about-contact-email-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}
.about-contact-email-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tblr-primary);
  background: rgba(var(--tblr-primary-rgb), 0.08);
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.about-contact-email-pill:hover {
  background: rgba(var(--tblr-primary-rgb), 0.15);
  color: var(--tblr-primary);
  text-decoration: none;
}
.about-contact-email-pill svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.about-contact-email-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--tblr-border-color);
  border-radius: 6px;
  background: transparent;
  color: var(--tblr-secondary);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.about-contact-email-copy:hover {
  background: rgba(var(--tblr-primary-rgb), 0.08);
  color: var(--tblr-primary);
  border-color: rgba(var(--tblr-primary-rgb), 0.3);
}
.about-contact-email-copy.copied {
  background: rgba(var(--tblr-green-rgb, 47, 179, 68), 0.1);
  color: var(--tblr-green);
  border-color: rgba(var(--tblr-green-rgb, 47, 179, 68), 0.3);
}
.about-contact-divider {
  height: 1px;
  background: var(--tblr-border-color);
  margin: 0.25rem 0;
}
.about-contact-ticket {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(165deg, rgba(176, 116, 209, 0.07) 0%, rgba(176, 116, 209, 0.03) 50%, transparent 80%) #fff;
}
.about-contact-dept-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.about-contact-dept-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}
.about-contact-dept-item > svg {
  color: var(--tblr-primary);
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.about-contact-dept-text {
  flex: 1;
  min-width: 0;
}
.about-contact-dept-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tblr-body-color);
  line-height: 1.3;
}
.about-contact-dept-desc {
  font-size: 0.8125rem;
  color: var(--tblr-secondary);
  margin-top: 0.125rem;
}
.about-contact-ticket-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tblr-border-color);
}
.about-contact-ticket-action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tblr-primary);
  text-decoration: none;
  transition: gap 0.2s;
}
.about-contact-ticket-action:hover {
  gap: 0.625rem;
  text-decoration: none;
}
.about-contact-social-card {
  margin-top: 1rem;
}
.about-contact-social {
  display: flex;
  gap: 1.5rem;
}
.about-contact-social-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  flex: 1;
  color: inherit;
  text-decoration: none;
  padding: 0.75rem;
  border-radius: 8px;
  transition: background 0.2s;
}
.about-contact-social-item:hover {
  background: rgba(176, 116, 209, 0.06);
  text-decoration: none;
  color: inherit;
}
.about-contact-social-item svg {
  flex-shrink: 0;
  color: var(--tblr-primary);
  margin-top: 0.125rem;
}
.about-contact-social-text {
  flex: 1;
  min-width: 0;
}
.about-contact-social-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tblr-body-color);
  line-height: 1.3;
}
.about-contact-social-desc {
  font-size: 0.75rem;
  color: var(--tblr-secondary);
  margin-top: 0.125rem;
}
@media (max-width: 767.98px) {
  .about-contact-card {
    padding: 1.25rem 1rem;
  }
  .about-contact-social {
    flex-direction: column;
    gap: 0.5rem;
  }
  .about-contact-social-item {
    padding: 0.5rem;
  }
  .about-contact-email-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0;
  }
  .about-contact-email-actions {
    padding-left: 1.75rem;
  }
  .about-contact-email-item:first-of-type {
    padding-top: 0.375rem;
  }
  .about-contact-email-item:last-of-type {
    padding-bottom: 0.25rem;
  }
  .about-contact-divider {
    margin: 0.125rem 0;
  }
}

/* ============================================
   全站 Footer
   ============================================ */
.site-footer {
  padding: 3.5rem 0 0;
  margin-top: 4rem;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  background: #f8f9fb;
  border-top: 1px solid var(--tblr-border-color);
}

/* 品牌区 */
.site-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.site-footer-logo img {
  height: 36px;
  width: auto;
}
.site-footer-company {
  font-size: 1.3125rem;
  font-weight: 800;
  color: var(--tblr-body-color);
  margin: 0.5rem 0 0;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.site-footer-address {
  font-size: 0.8125rem;
  color: var(--tblr-secondary);
  line-height: 1.75;
  margin: 0.125rem 0 0;
}

/* 支付方式图标 */
.site-footer-payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.875rem;
}
.site-footer-payments img {
  height: 26px;
  width: auto;
  border-radius: 3px;
  border: 1px solid var(--tblr-border-color);
  padding: 0;
  background: #fff;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.site-footer-payments img:hover {
  opacity: 1;
}

/* 列标题 */
.site-footer-heading {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tblr-body-color);
  margin-bottom: 1.125rem;
}

/* 联系方式列表 */
.site-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: inherit;
}
.site-footer-links li {
  font-size: 0.9375rem;
  color: var(--tblr-secondary);
  line-height: 1.6;
}
.site-footer-label {
  display: inline-block;
  min-width: 2.75rem;
  color: var(--tblr-secondary);
  font-weight: 500;
  margin-right: 0.375rem;
}
.site-footer-links a {
  color: var(--tblr-body-color);
  text-decoration: none;
}
.site-footer-links a:hover {
  color: var(--tblr-primary);
}
.site-footer-more {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tblr-primary) !important;
  margin-top: 0.375rem;
}

/* 社交媒体列表 */
.site-footer-socials {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: inherit;
}
.site-footer-socials a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--tblr-body-color);
  text-decoration: none;
}
.site-footer-socials a:hover {
  color: var(--tblr-primary);
}
.site-footer-socials svg {
  flex-shrink: 0;
  color: var(--tblr-secondary);
  transition: color 0.15s;
}
.site-footer-socials a:hover svg {
  color: var(--tblr-primary);
}

/* 社交图标按钮（圆角矩形，hover 向左展开显示名称） */
.site-footer-social-icons {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.site-footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-width: 34px;
  padding: 0 8px;
  border-radius: 8px;
  background: rgba(var(--tblr-primary-rgb), 0.1);
  color: var(--tblr-primary);
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  transition: background 0.3s, color 0.3s;
}
.site-footer-social-icon:hover {
  text-decoration: none;
}
.site-footer-social-icon svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.site-footer-social-label {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  transition: max-width 0.35s ease, opacity 0.25s ease, margin 0.35s ease;
  margin-left: 0;
}
.site-footer-social-icon:hover .site-footer-social-label {
  max-width: 80px;
  opacity: 1;
  margin-left: 8px;
}
/* Telegram */
.site-footer-social-icon[title="Telegram"]:hover {
  background: #4dbcee;
  color: #fff;
}
/* Discord */
.site-footer-social-icon[title="Discord"]:hover {
  background: #7983f5;
  color: #fff;
}
/* X */
.site-footer-social-icon[title="X"]:hover {
  background: #444;
  color: #fff;
}

/* "更多联系方式" 独立链接 */
.site-footer .site-footer-more {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tblr-primary) !important;
  margin-top: 0.75rem;
  text-decoration: none;
}
.site-footer .site-footer-more:hover {
  text-decoration: underline;
}

/* 底部版权栏 */
.site-footer-bottom {
  margin-top: 3rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--tblr-border-color);
}
.site-footer-copyright {
  font-size: 0.875rem;
  color: var(--tblr-secondary);
}
.site-footer-bottom-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 2rem;
}
.site-footer-bottom-links a {
  font-size: 0.875rem;
  color: var(--tblr-secondary);
  text-decoration: none;
}
.site-footer-bottom-links a:hover {
  color: var(--tblr-primary);
}

/* Footer 响应式 */
@media (max-width: 767.98px) {
  .site-footer {
    padding: 2rem 0 0;
    margin-top: 3rem;
  }
  .site-footer > .container-xl {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .site-footer-brand {
    margin-bottom: 0.5rem;
  }
  .site-footer-bottom {
    margin-top: 1.5rem;
  }
  .site-footer-bottom .row > div {
    text-align: center;
  }
  .site-footer-bottom-links {
    justify-content: center;
    margin-top: 0.5rem;
  }
}

/* ===== 为什么选择 ===== */
.why-choose {
  padding: 5rem 0 6rem;
}
.why-choose-content {
  min-height: 420px;
  align-items: center;
}
.why-choose-text {
  margin-bottom: 2.5rem;
}
.why-choose-heading {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: var(--tblr-body-color);
}
.why-choose-keyword {
  display: inline-block;
  color: var(--tblr-primary);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.why-choose-keyword.fade-out {
  opacity: 0;
  transform: translateY(8px);
}
.why-choose-desc {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--tblr-secondary);
  min-height: 5.5em;
  transition: opacity 0.35s ease;
}
.why-choose-desc.fade-out {
  opacity: 0;
}
.why-choose-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.why-choose-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: 8px;
  background: transparent;
  color: var(--tblr-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.why-choose-tab:hover {
  border-color: var(--tblr-primary);
  color: var(--tblr-primary);
}
.why-choose-tab.active {
  background: var(--tblr-primary);
  border-color: var(--tblr-primary);
  color: #fff;
}
.why-choose-tab {
  position: relative;
  overflow: hidden;
}
.why-choose-tab-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0 1px 1px 0;
}
.why-choose-tab.active .why-choose-tab-progress {
  animation: whyProgress 6s linear forwards;
}
.why-choose-tab.active:hover .why-choose-tab-progress {
  animation-play-state: paused;
}
@keyframes whyProgress {
  from { width: 0; }
  to { width: 100%; }
}
.why-choose-compare {
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  min-height: 260px;
  justify-content: center;
  transition: opacity 0.35s ease;
}
.why-choose-compare.fade-out {
  opacity: 0;
}
.compare-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.compare-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tblr-body-color);
}
.compare-bar-wrap {
  height: 10px;
  background: var(--tblr-bg-surface-secondary, rgba(0,0,0,0.04));
  border-radius: 6px;
  overflow: hidden;
}
.compare-bar {
  height: 100%;
  border-radius: 6px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.compare-bar-muted {
  background: var(--tblr-secondary);
  opacity: 0.35;
}
.compare-bar-primary {
  background: var(--tblr-primary);
}
.compare-value {
  font-size: 0.875rem;
  font-weight: 700;
}
.compare-value-muted {
  color: var(--tblr-secondary);
}
.compare-value-primary {
  color: var(--tblr-primary);
}
/* segmented bar for 云悠 月/年付 */
.compare-item-range {
  gap: 0.3rem;
}
.compare-bar-segment {
  display: flex;
  gap: 0;
}
.compare-bar-segment .compare-bar {
  border-radius: 6px;
}
.compare-seg-year {
  border-radius: 6px !important;
}
.compare-seg-month {
  border-radius: 0 6px 6px 0 !important;
  margin-left: -3px;
}
.compare-bar-primary-light {
  background: var(--tblr-primary);
  opacity: 0.3;
}
.compare-seg-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.compare-seg-label-year {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--tblr-primary);
}
.compare-seg-label-month {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tblr-secondary);
}
.compare-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  background: rgba(var(--tblr-primary-rgb), 0.12);
  color: var(--tblr-primary);
  vertical-align: middle;
  margin-left: 0.25rem;
}
/* tighter gap for multibar (3+ items) */
.why-choose-compare:has(.compare-item:nth-child(3)) {
  gap: 1rem;
}
.why-choose-compare:has(.compare-item:nth-child(3)) .compare-item {
  gap: 0.3rem;
}
.why-choose-compare:has(.compare-item:nth-child(3)) .compare-bar-wrap {
  height: 8px;
}
.why-choose-compare:has(.compare-item:nth-child(3)) .compare-label {
  font-size: 0.75rem;
}
.why-choose-compare:has(.compare-item:nth-child(3)) .compare-value {
  font-size: 0.8125rem;
}
/* cursor-hover panel for 方便 */
.cp-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: 0.625rem;
}
/* info row: OS + product id + status + IP */
.cp-info {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.cp-os-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}
.cp-info-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.cp-info-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--tblr-body-color);
  line-height: 1.2;
}
.cp-info-meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  line-height: 1;
}
.cp-info-id {
  font-size: 0.75rem;
  color: var(--tblr-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cp-info-sep {
  color: var(--tblr-border-color);
  font-size: 0.75rem;
}
.cp-info-status {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--tblr-green);
}
.cp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tblr-green);
  flex-shrink: 0;
  animation: cpDotPulse 2s ease-in-out infinite;
}
@keyframes cpDotPulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.cp-info-ip {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--tblr-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  flex-shrink: 0;
}
/* action buttons — flat row */
.cp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.cp-action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--tblr-border-color);
  border-radius: 8px;
  color: var(--tblr-secondary);
  background: transparent;
  cursor: default;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.cp-action svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.cp-action-label {
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.cp-action.is-hover {
  border-color: var(--tblr-primary);
  color: var(--tblr-primary);
  background: rgba(var(--tblr-primary-rgb), 0.05);
}
/* sparklines */
.cp-sparks {
  display: flex;
  gap: 4rem;
  width: 90%;
  margin: 0 auto;
}
.cp-spark {
  flex: 1;
  min-width: 0;
}
.cp-spark-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tblr-secondary);
  margin-bottom: 0.125rem;
}
.cp-spark-val {
  font-weight: 400;
}
.cp-spark-svg {
  width: 100%;
  height: 28px;
  display: block;
}
/* cursor */
.cp-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 21px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.cp-cursor.is-visible {
  opacity: 1;
}
/* terminal mode for 自由 — root shell session */
.cp-term {
  background: #1b1f23;
  border-radius: 10px;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.cp-term-bar {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: #262b30;
}
.cp-term-dots {
  display: flex;
  gap: 0.375rem;
}
.cp-term-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.cp-term-dot-r { background: #ff5f57; }
.cp-term-dot-y { background: #febc2e; }
.cp-term-dot-g { background: #28c840; }
.cp-term-title {
  flex: 1;
  text-align: center;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  margin-right: 42px;
}
.cp-term-body {
  padding: 0.875rem 1rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: #e6e6e6;
}
.cp-term-line {
  opacity: 0;
  animation: cpTermLineIn 0.3s ease forwards;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes cpTermLineIn {
  to { opacity: 1; }
}
.cp-term-prompt {
  color: #0cbc87;
  margin-right: 0.5rem;
}
.cp-term-cmd {
  color: #e6e6e6;
}
.cp-term-out {
  color: rgba(230, 230, 230, 0.55);
}
.cp-term-key {
  color: #ffbd6b;
}
.cp-term-cursor {
  display: inline-block;
  width: 7px;
  height: 0.95em;
  background: #e6e6e6;
  vertical-align: -0.12em;
  margin-left: 2px;
  animation: cpTermBlink 1.05s step-end infinite;
}
@keyframes cpTermBlink {
  50% { opacity: 0; }
}
/* tenancy mode for 安全 — physical isolation */
.cp-tenancy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: end;
}
.cp-tn-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cp-tn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tblr-secondary);
}
.cp-tn-head-solo {
  color: var(--tblr-primary);
}
.cp-tn-rack {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 8px;
  padding: 5px;
  display: grid;
  gap: 4px;
}
.cp-tn-rack-shared {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  background: rgba(0, 0, 0, 0.04);
}
.cp-tn-rack-solo {
  background: rgba(var(--tblr-primary-rgb), 0.13);
  position: relative;
  overflow: hidden;
}
.cp-tn-rack-solo::before,
.cp-tn-rack-solo::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.cp-tn-rack-solo::before {
  top: -30%;
  right: -20%;
  width: 70%;
  height: 140%;
  background: radial-gradient(circle, rgba(var(--tblr-primary-rgb), 0.14), transparent 70%);
}
.cp-tn-rack-solo::after {
  bottom: -40%;
  left: -15%;
  width: 60%;
  height: 130%;
  background: radial-gradient(circle, rgba(var(--tblr-primary-rgb), 0.10), transparent 70%);
}
.cp-tn-cell {
  border-radius: 4px;
  opacity: 0;
  transform: scale(0.96);
  animation: cpTnCellIn 0.7s ease-out forwards;
}
@keyframes cpTnCellIn {
  to { opacity: 1; transform: scale(1); }
}
.cp-tn-cell-other {
  background: rgba(0, 0, 0, 0.12);
}
.cp-tn-cell-self {
  position: relative;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tblr-primary) 88%, #fff) 0%,
    var(--tblr-primary) 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--tblr-primary-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  color: #fff;
  overflow: hidden;
}
.cp-tn-self-header {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.cp-tn-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.05) 50%, transparent 60%);
  background-size: 250% 100%;
  background-position: 250% 0;
  animation: cpTnShine 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cpTnShine {
  0%, 100% { background-position: 250% 0; }
  60%      { background-position: -80% 0; }
}
.cp-tn-self-icon {
  width: 22px;
  height: 22px;
  opacity: 0.95;
  position: relative;
  z-index: 1;
}
.cp-tn-self-text {
  position: relative;
  z-index: 1;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.cp-tn-self-list {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 1;
}
.cp-tn-self-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.35;
}
.cp-tn-self-list li b {
  display: inline-block;
  font-weight: 700;
  color: #fff;
  margin-right: 6px;
  letter-spacing: 0.02em;
}
.cp-tn-self-list li svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.95;
}
@media (max-width: 575.98px) {
  .cp-tn-self-list li {
    font-size: 0.7rem;
  }
}
/* badges mode for 自由 — capability unlock wall */
.cp-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 12px;
  padding: 4px 0 0;
  position: relative;
}
.cp-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(6px);
  animation: cpBadgeIn 0.35s ease-out forwards;
}
@keyframes cpBadgeIn {
  to { opacity: 1; transform: translateY(0); }
}
.cp-badge-ring {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(var(--tblr-primary-rgb), 0.10);
  border: 1.5px solid rgba(var(--tblr-primary-rgb), 0.22);
  color: var(--tblr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cp-badge-icon {
  width: 24px;
  height: 24px;
}
/* unlock state: ring brightens, icon turns white. Pure color transition, no overlay. */
.cp-badge {
  --unlock-delay: 0.6s;
}
.cp-badge:nth-child(1) { --unlock-delay: 0.45s; }
.cp-badge:nth-child(2) { --unlock-delay: 0.55s; }
.cp-badge:nth-child(3) { --unlock-delay: 0.65s; }
.cp-badge:nth-child(4) { --unlock-delay: 0.75s; }
.cp-badge:nth-child(5) { --unlock-delay: 0.85s; }
.cp-badge:nth-child(6) { --unlock-delay: 0.95s; }
.cp-badge .cp-badge-ring {
  animation: cpBadgeUnlock 0.35s ease-out forwards;
  animation-delay: var(--unlock-delay);
}
@keyframes cpBadgeUnlock {
  to {
    background: var(--tblr-primary);
    border-color: var(--tblr-primary);
    box-shadow: 0 4px 14px rgba(var(--tblr-primary-rgb), 0.32);
    color: #fff;
  }
}
.cp-badge-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tblr-secondary);
  text-align: center;
  line-height: 1.2;
}
.cp-badges-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 4px;
  opacity: 0;
  animation: cpBadgesFooterIn 0.35s ease-out forwards;
  animation-delay: 1.15s;
}
@keyframes cpBadgesFooterIn {
  to { opacity: 1; }
}
.cp-badges-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(var(--tblr-primary-rgb), 0.12);
  color: var(--tblr-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.cp-badges-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tblr-primary);
  box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), 0.18);
  animation: cpBadgesDotPulse 1.6s ease-in-out infinite;
}
@keyframes cpBadgesDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--tblr-primary-rgb), 0.05); }
}
@media (max-width: 575.98px) {
  .cp-badges { gap: 12px 8px; }
  .cp-badge-ring { width: 42px; height: 42px; }
  .cp-badge-icon { width: 20px; height: 20px; }
  .cp-badge-label { font-size: 0.7rem; }
}

/* blocks mode for 灵活 */
.compare-blocks {
  display: flex;
  gap: 0.5rem;
}
.compare-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  flex: 1;
}
.compare-block-muted {
  background: rgba(0, 0, 0, 0.06);
  color: var(--tblr-secondary);
}
.compare-block-primary {
  background: rgba(var(--tblr-primary-rgb), 0.12);
  color: var(--tblr-primary);
}
.compare-blocks-animated .compare-block:nth-child(1) { animation: bp1 6s ease-in-out infinite; }
.compare-blocks-animated .compare-block:nth-child(2) { animation: bp2 6s ease-in-out infinite; }
.compare-blocks-animated .compare-block:nth-child(3) { animation: bp3 6s ease-in-out infinite; }
.compare-blocks-animated .compare-block:nth-child(4) { animation: bp4 6s ease-in-out infinite; }
@keyframes bp1 {
  0%   { flex: 2.2; }
  15%  { flex: 1; }
  100% { flex: 1; }
}
@keyframes bp2 {
  0%   { flex: 1; }
  15%  { flex: 2.2; }
  40%  { flex: 2.2; }
  55%  { flex: 1; }
  100% { flex: 1; }
}
@keyframes bp3 {
  0%   { flex: 1; }
  40%  { flex: 1; }
  55%  { flex: 2.2; }
  70%  { flex: 2.2; }
  85%  { flex: 1; }
  100% { flex: 1; }
}
@keyframes bp4 {
  0%   { flex: 1; }
  70%  { flex: 1; }
  85%  { flex: 2.2; }
  100% { flex: 2.2; }
}

/* ===== FAQ 常见问题 ===== */
.about-faq {
  padding: 4rem 0;
}
.about-faq .about-contact-card {
  padding: 0;
  overflow: hidden;
  height: auto;
}
.about-faq .accordion {
  --tblr-accordion-border-color: var(--tblr-border-color);
}
.about-faq .accordion-item {
  border-left: 0;
  border-right: 0;
  border-color: var(--tblr-border-color);
}
.about-faq .accordion-item:first-child {
  border-top: 0;
}
.about-faq .accordion-item:last-child {
  border-bottom: 0;
}
.about-faq .accordion-button {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tblr-body-color);
  padding: 1.125rem 1.75rem;
  background: transparent;
  box-shadow: none;
  gap: 0.625rem;
  justify-content: flex-start;
  text-align: left;
}
.about-faq .accordion-button:not(.collapsed) {
  color: var(--tblr-primary);
  background: transparent;
  box-shadow: none;
}
.about-faq .accordion-button::after {
  display: none;
}
.about-faq .accordion-button-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--tblr-secondary);
  transition: transform 0.2s ease, color 0.2s ease;
}
.about-faq .accordion-button-toggle .icon {
  width: 1.125rem;
  height: 1.125rem;
}
.about-faq .accordion-button:not(.collapsed) .accordion-button-toggle {
  transform: rotate(180deg);
  color: var(--tblr-primary);
}
.about-faq .accordion-body {
  padding: 0 1.75rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.7;
}
@media (max-width: 767.98px) {
  .about-faq .accordion-button {
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
  }
  .about-faq .accordion-body {
    padding: 0 1.25rem 1rem;
    font-size: 0.8125rem;
  }
}

/* ===== 为什么选择 — 移动端适配 ===== */
@media (max-width: 991.98px) {
  .why-choose {
    padding: 3rem 0 3.5rem;
  }
  .why-choose-content {
    min-height: auto;
  }
  .why-choose-heading {
    font-size: 1.75rem;
  }
  .why-choose-desc {
    font-size: 1rem;
    min-height: auto;
  }
  .why-choose-text {
    margin-bottom: 1.5rem;
  }
  /* stacked: add spacing before compare panel */
  .why-choose-content > [class*="col-lg-5"] {
    margin-top: 2rem;
  }
  .why-choose-compare {
    min-height: auto;
  }
  /* sparklines wider on tablet */
  .cp-sparks {
    width: 100%;
    gap: 2.5rem;
  }
}
@media (max-width: 767.98px) {
  .why-choose {
    padding: 2.5rem 0 3rem;
  }
  .why-choose-heading {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  .why-choose-desc {
    font-size: 0.9375rem;
    line-height: 1.75;
  }
  .why-choose-tabs {
    gap: 0.375rem;
  }
  .why-choose-tab {
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
  }
  .why-choose-tab svg {
    width: 16px;
    height: 16px;
  }
  .why-choose-compare {
    padding: 1.25rem 1rem;
    gap: 1.25rem;
    border-radius: 12px;
  }
  /* cursor panel */
  .cp-info {
    gap: 0.5rem;
  }
  .cp-os-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }
  .cp-action {
    height: 2.5rem;
    border-radius: 6px;
  }
  .cp-action svg {
    width: 16px;
    height: 16px;
  }
  .cp-action-label {
    font-size: 0.5625rem;
  }
  .cp-sparks {
    gap: 2rem;
  }
  .cp-spark-svg {
    height: 24px;
  }
  /* hide cursor on touch */
  .cp-cursor {
    display: none;
  }
  /* blocks mode */
  .compare-blocks {
    gap: 0.375rem;
  }
  .compare-block {
    padding: 0.3rem 0.5rem;
    font-size: 0.6875rem;
  }
}
@media (max-width: 575.98px) {
  .why-choose-tab {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    gap: 0.25rem;
  }
  .cp-actions {
    gap: 0.25rem;
  }
  .cp-action {
    height: 2.25rem;
    gap: 0.125rem;
  }
  .cp-action svg {
    width: 14px;
    height: 14px;
  }
  .cp-action-label {
    font-size: 0.5rem;
  }
  .cp-sparks {
    gap: 1.5rem;
  }
  .cp-spark-head {
    font-size: 0.6875rem;
  }
}

/* === 返回顶部按钮 === */
#back-to-top {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 9999;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
#back-to-top.btt-visible {
  opacity: 1;
  pointer-events: auto;
}

/* --- 报告滥用页 Hero 邮箱组件 --- */
.abuse-email-widget {
  display: inline-flex;
  align-items: center;
  margin-top: 1.5rem;
  margin-bottom: 0;
  border: 1px solid rgba(var(--tblr-primary-rgb), 0.3);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(var(--tblr-primary-rgb), 0.06);
}
.abuse-email-address {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tblr-primary);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.abuse-email-address:hover {
  background: rgba(var(--tblr-primary-rgb), 0.08);
  color: var(--tblr-primary);
  text-decoration: none;
}
.abuse-email-address svg {
  opacity: 0.65;
  flex-shrink: 0;
}
.abuse-email-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-left: 1px solid rgba(var(--tblr-primary-rgb), 0.2);
  border-radius: 0;
  background: transparent;
  color: var(--tblr-primary);
  opacity: 0.6;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  flex-shrink: 0;
}
.abuse-email-copy:hover {
  background: rgba(var(--tblr-primary-rgb), 0.1);
  opacity: 1;
}
.abuse-email-copy.copied {
  background: rgba(var(--tblr-green-rgb, 47, 179, 68), 0.1);
  color: var(--tblr-green);
  opacity: 1;
}

/* --- 报告滥用页 处理态度 & 违规范围 Section --- */
.abuse-policy {
  padding: 3.5rem 0 4rem;
}
/* 左侧：处理流程步骤 */
.abuse-policy-lead {
  font-size: 0.9375rem;
  color: var(--tblr-secondary);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.abuse-violation-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tblr-body-color);
  margin-bottom: 0.375rem;
}
.abuse-policy-prose {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.abuse-policy-prose-block p {
  font-size: 1rem;
  color: var(--tblr-secondary);
  line-height: 1.8;
  margin: 0;
}
.abuse-policy-prose-heading {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #b074d1;
  margin-bottom: 0.5rem;
}
.abuse-policy-steps {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.abuse-policy-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.abuse-policy-step-num {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  background: rgba(var(--tblr-primary-rgb), 0.1);
  color: var(--tblr-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}
.abuse-policy-step-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tblr-body-color);
  margin-bottom: 0.2rem;
}
.abuse-policy-step-desc {
  font-size: 0.8125rem;
  color: var(--tblr-secondary);
  line-height: 1.6;
}
/* 政策区域：大框内，中间竖分割线 */
.abuse-policy-row {
  align-items: stretch;
}
.abuse-policy-col {
  padding: 0.5rem 2.5rem 0.5rem 0.5rem;
}
.abuse-policy-col--right {
  padding: 0.5rem 0.5rem 0.5rem 2.5rem;
  border-left: 1px solid var(--tblr-border-color);
}
@media (max-width: 991.98px) {
  .abuse-policy-col,
  .abuse-policy-col--right {
    padding: 1.5rem 0;
  }
  .abuse-policy-col--right {
    border-left: none;
    border-top: 1px solid var(--tblr-border-color);
  }
}

/* 右侧：违规行为列表（色块标签风格） */
.abuse-violation-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.abuse-violation-item {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  padding: 0.625rem 0;
  margin-bottom: 0;
}
.abuse-violation-item:last-child {
  padding-bottom: 0;
}
.abuse-violation-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  color: #b074d1;
  opacity: 0.75;
  display: flex;
  align-items: center;
  justify-content: center;
}
.abuse-violation-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tblr-body-color);
  margin-bottom: 0.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.abuse-violation-title::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 1em;
  border-radius: 2px;
  background: #b074d1;
  flex-shrink: 0;
  opacity: 0.85;
}
.abuse-violation-desc {
  font-size: 0.8125rem;
  color: var(--tblr-secondary);
  line-height: 1.6;
}

/* --- 外链指示箭头：带 target="_blank" 的下拉菜单项右上角显示小箭头 --- */
.navbar-yunyoo .dropdown-menu .dropdown-item[target="_blank"] {
  position: relative;
}
.navbar-yunyoo .dropdown-menu .dropdown-item[target="_blank"]::after {
  content: '↗';
  position: absolute;
  top: 0.35em;
  right: 0.6em;
  font-size: 0.85em;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.navbar-yunyoo .dropdown-menu .dropdown-item[target="_blank"]:hover::after,
.navbar-yunyoo .dropdown-menu .dropdown-item[target="_blank"]:focus::after {
  opacity: 0.6;
}

/* --- 认证页面（登录 / 注册） --- */
.auth-page {
  background-color: #f5eefb !important;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.auth-page .page-center {
  flex: 1;
  padding: 1.5rem 0;
}
/* 移动端：卡片铺满并留出边距 */
@media (max-width: 767.98px) {
  .auth-page .container-tight {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .card-auth .card-body {
    padding: 2rem 1.25rem !important;
  }
  .card-auth .card-body > h2 {
    font-size: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .card-auth .form-footer {
    margin-top: 1.5rem !important;
    padding-bottom: 0.5rem !important;
  }
}
.card-auth {
  overflow: hidden;
}
.card-auth::before {
  content: "";
  display: block;
  height: 6px;
  background-color: var(--tblr-primary);
  line-height: 0;
  font-size: 0;
}
.card-auth .card-body > h2 {
  font-size: 2rem !important;
  margin-bottom: 2rem !important;
}