/*
 * 算力之光 CPLIGHT 首页 — 手机版复刻样式（<1024px）
 *
 * 原站手机端是 uni-app 编译的 H5，所有尺寸用 rpx 书写（750rpx = 屏幕宽度）。
 * 这里用 1rem = 100rpx 还原同一套缩放：源码里的 28rpx 写作 .28rem。
 *
 * uni-app 的规则是视口越宽 rpx 越大，到 960px 才锁死；但本页 ≥1024px 会切到
 * PC 版（见 pc.css），所以这里提前在 560px 锁定 375px 基准（1rpx = 0.5px），
 * 让平板拿到一列干净的手机版，而不是被拉伸到巨大字号。
 */

html {
  font-size: calc(100vw / 7.5);          /* 1rem = 100rpx */
  -webkit-text-size-adjust: 100%;
}

@media (min-width: 560px) {
  html { font-size: 50px; }              /* 1rpx = 0.5px，与原站桌面端一致 */
}

body {
  margin: 0;
  background: #ededed;
  font-size: .34rem;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
    Segoe UI, Arial, Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei",
    sans-serif;
  color: #333;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

img { border: 0; }

/* 页面骨架 ------------------------------------------------------------- */

.h5-prototype-home {
  position: relative;
  width: 100%;
  max-width: 7.5rem;                     /* 750rpx，桌面端收成手机宽度居中 */
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: calc(1.28rem + env(safe-area-inset-bottom));
  background: #f6f7fb;
  color: #333;
  overflow-x: hidden;
}

/* 头部 ----------------------------------------------------------------- */

.h5-fixed-header {
  position: fixed;
  left: 50%;
  top: 0;
  z-index: 60;
  width: 100%;
  max-width: 7.5rem;
  background: #fff;
  box-shadow: 0 .06rem .24rem rgba(17, 17, 17, .06);
  transform: translateX(-50%);
}

.h5-header-spacer { height: 1.2rem; }

.h5-topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1.2rem;
  padding: 0 .32rem;
  background: hsla(0, 0%, 100%, .96);
  border-bottom: 1px solid #ececec;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.h5-logo-link {
  display: block;
  text-decoration: none;
}

.h5-logo {
  display: block;
  width: 3rem;
  height: auto;
}

.h5-menu-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: .8rem;
  height: .8rem;
  border: 1px solid #f0d9cb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.h5-menu-line {
  width: .36rem;
  height: .04rem;
  margin: .04rem 0;
  background: #111;
  border-radius: 9.99rem;
}

.h5-mobile-menu {
  position: relative;
  z-index: 2;
  display: none;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 .16rem .48rem rgba(17, 17, 17, .1);
  overflow: hidden;
}

.h5-mobile-menu-open { display: block; }

.h5-mobile-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: .88rem;
  padding: 0 .28rem;
  color: #111;
  font-size: .28rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid #f1f1f1;
}

.h5-mobile-menu-item:last-child { border-bottom: 0; }

.h5-mobile-menu-arrow {
  width: .14rem;
  height: .14rem;
  border-top: .03rem solid #999;
  border-right: .03rem solid #999;
  transform: rotate(45deg);
}

/* 搜索 ----------------------------------------------------------------- */

.h5-search {
  display: flex;
  gap: .16rem;
  padding: .24rem .32rem;
  background: #fff;
}

.h5-search-input {
  flex: 1;
  min-width: 0;
  height: .84rem;
  line-height: .84rem;
  padding: 0 .24rem;
  border: 1px solid #ffd1bd;
  border-radius: 8px;
  color: #777;
  font-size: .28rem;
  background: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.h5-search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.08rem;
  height: .84rem;
  border-radius: 8px;
  background: #ff761a;
  color: #fff;
  font-size: .3rem;
  font-weight: 700;
  cursor: pointer;
}

.h5-search-button-icon {
  width: .38rem;
  height: .38rem;
  fill: #fff;
}

/* 主视觉 --------------------------------------------------------------- */

.h5-hero {
  position: relative;
  overflow: hidden;
  padding: .52rem .32rem .36rem;
  background: linear-gradient(180deg, #fff5ef, #fff);
}

.h5-hero::after {
  position: absolute;
  right: -1.16rem;
  bottom: .16rem;
  width: 3.8rem;
  height: 3rem;
  background: url(/statics/brand/cat/gpu.svg) 50% / cover no-repeat;
  opacity: .18;
  content: "";
}

.h5-hero-copy {
  position: relative;
  z-index: 1;
}

.h5-hero-title {
  display: block;
  color: #111;
  font-size: .6rem;
  line-height: 1.2;
  font-weight: 900;
}

.h5-hero-title span { color: #ff761a; }

.h5-hero-lead {
  display: block;
  margin-top: .2rem;
  color: #3b3b3b;
  font-size: .3rem;
  line-height: 1.7;
}

.h5-hero-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .2rem;
  margin-top: .36rem;
}

.h5-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: .84rem;
  padding: 0 .16rem;
  border-radius: 8px;
  font-size: .28rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.h5-button-light {
  color: #e95513;
  background: #fff;
  border: 1px solid #ffb894;
}

.h5-button-primary {
  color: #fff;
  background: #ff761a;
  border: 1px solid #ff761a;
}

/* 区块通用 ------------------------------------------------------------- */

.h5-section { padding: .38rem .32rem 0; }

.h5-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .2rem;
  margin-bottom: .24rem;
}

.h5-section-title {
  color: #111;
  font-size: .42rem;
  line-height: 1.3;
  font-weight: 900;
}

.h5-section-more {
  flex-shrink: 0;
  color: #e95513;
  font-size: .26rem;
  font-weight: 700;
  cursor: pointer;
}

/* 平台核心服务入口 ----------------------------------------------------- */

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

.h5-quick-card {
  min-height: 1.96rem;
  padding: .28rem;
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 8px;
  box-shadow: 0 .12rem .36rem rgba(0, 0, 0, .04);
  cursor: pointer;
}

.h5-quick-icon {
  display: block;
  width: .64rem;
  height: .64rem;
  object-fit: contain;
}

.h5-quick-title {
  display: block;
  margin-top: .2rem;
  color: #111;
  font-size: .3rem;
  line-height: 1.35;
  font-weight: 800;
}

.h5-quick-desc {
  display: block;
  margin-top: .12rem;
  color: #777;
  font-size: .24rem;
  line-height: 1.45;
}

/* 轮播容器（还原 uni-swiper 的横向滑动） ------------------------------- */

.h5-swiper-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .3s ease-out;
  will-change: transform;
}

.h5-swiper-item {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

/* 产品与服务 ----------------------------------------------------------- */

.h5-category-swiper {
  height: 6rem;
  overflow: hidden;
}

.h5-category-page {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .16rem;
  align-content: start;
}

.h5-category-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  cursor: pointer;
}

.h5-category-image {
  width: 100%;
  height: 1.44rem;
  background: #f5f5f5;
}

.h5-category-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                     /* 原站 mode="aspectFill" */
}

.h5-category-body { padding: .18rem .16rem .2rem; }

.h5-category-title {
  display: block;
  color: #111;
  font-size: .26rem;
  line-height: 1.35;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.h5-category-desc {
  display: -webkit-box;
  margin-top: .1rem;
  color: #777;
  font-size: .2rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.h5-category-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  margin-top: .08rem;
  padding-bottom: .04rem;
}

.h5-category-control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: .56rem;
  height: .56rem;
  color: #e95513;
  background: #fff;
  border: 1px solid #ffd0bb;
  border-radius: 8px;
  font-size: .3rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.h5-category-arrow {
  display: block;
  color: inherit;
  font-size: .3rem;
  line-height: 1;
  font-weight: 900;
}

.h5-category-dots {
  display: flex;
  align-items: center;
  gap: .1rem;
}

.h5-category-dot {
  width: .12rem;
  height: .12rem;
  background: #ffd0bb;
  border-radius: 9.99rem;
  transition: all .2s ease;
  cursor: pointer;
}

.h5-category-dot-active {
  width: .36rem;
  background: #ff761a;
}

/* 一站式算力采购 ------------------------------------------------------- */

.h5-step-list {
  display: grid;
  gap: .2rem;
}

.h5-step-card {
  display: grid;
  grid-template-columns: .76rem minmax(0, 1fr);
  gap: .24rem;
  padding: .28rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
}

.h5-step-index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: .68rem;
  height: .68rem;
  color: #fff;
  background: #ff761a;
  border-radius: 8px;
  font-size: .3rem;
  font-weight: 900;
}

.h5-step-copy { min-width: 0; }

.h5-step-title {
  display: block;
  color: #111;
  font-size: .3rem;
  line-height: 1.35;
  font-weight: 800;
}

.h5-step-desc {
  display: block;
  margin-top: .1rem;
  color: #777;
  font-size: .26rem;
  line-height: 1.5;
}

/* 入驻 CPLIGHT --------------------------------------------------------- */

.h5-merchant-card {
  padding: .4rem;
  color: #fff;
  background: linear-gradient(135deg, #ff761a, #f04416 58%, #1b3554 150%);
  border-radius: 8px;
  box-shadow: 0 .16rem .48rem rgba(17, 17, 17, .08);
}

.h5-merchant-title {
  display: block;
  color: #fff;
  font-size: .42rem;
  line-height: 1.3;
  font-weight: 900;
}

.h5-merchant-desc {
  display: block;
  margin-top: .16rem;
  color: hsla(0, 0%, 100%, .88);
  font-size: .28rem;
  line-height: 1.7;
}

.h5-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: .16rem;
  margin-top: .28rem;
}

.h5-tag {
  padding: .12rem .18rem;
  color: #fff;
  background: hsla(0, 0%, 100%, .16);
  border-radius: 8px;
  font-size: .24rem;
  line-height: 1.2;
}

.h5-merchant-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .16rem;
  margin-top: .32rem;
}

.h5-white-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.56rem;
  height: .8rem;
  padding: 0 .28rem;
  color: #e95513;
  background: #fff;
  border-radius: 8px;
  font-size: .28rem;
  font-weight: 800;
  cursor: pointer;
}

/* 常见问题 ------------------------------------------------------------- */

.h5-faq-list {
  display: grid;
  gap: .16rem;
}

.h5-faq-item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.h5-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .2rem;
  padding: .28rem;
  color: #111;
  font-size: .28rem;
  line-height: 1.45;
  font-weight: 800;
}

.h5-faq-question span:first-child {
  flex: 1;
  min-width: 0;
}

.h5-faq-arrow {
  flex-shrink: 0;
  width: .18rem;
  height: .18rem;
  border-right: .03rem solid #777;
  border-bottom: .03rem solid #777;
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.h5-faq-arrow-open { transform: rotate(225deg); }

.h5-faq-answer {
  display: none;
  padding: 0 .28rem .28rem;
  color: #777;
  font-size: .26rem;
  line-height: 1.65;
}

.h5-faq-item-open .h5-faq-answer { display: block; }

/* 移动端入口 ----------------------------------------------------------- */

.h5-mobile-list {
  display: grid;
  gap: .2rem;
}

.h5-mobile-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.84rem;
  gap: .28rem;
  align-items: center;
  padding: .28rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  cursor: pointer;
}

.h5-mobile-copy { min-width: 0; }

.h5-mobile-title {
  display: block;
  color: #111;
  font-size: .32rem;
  line-height: 1.35;
  font-weight: 800;
}

.h5-mobile-desc {
  display: block;
  margin-top: .16rem;
  color: #777;
  font-size: .26rem;
  line-height: 1.55;
}

.h5-mobile-qr {
  width: 1.84rem;
  height: 1.84rem;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.h5-mobile-qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 合作伙伴 ------------------------------------------------------------- */

.h5-partner-section { padding-bottom: .16rem; }

.h5-partner-swiper {
  height: 2.4rem;
  overflow: hidden;
}

.h5-partner-page {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .16rem;
  align-content: start;
}

.h5-partner-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.08rem;
  padding: .18rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
}

.h5-partner-logo {
  display: block;
  width: 100%;
  height: .72rem;
  object-fit: contain;                   /* 原站 mode="aspectFit" */
}

.h5-partner-controls { margin-top: .12rem; }

/* 页脚 ----------------------------------------------------------------- */

.h5-footer {
  margin-top: .12rem;
  padding: .36rem .32rem .4rem;
  background: #fff;
}

.h5-footer-title {
  display: block;
  margin-bottom: .2rem;
  color: #111;
  font-size: .3rem;
  line-height: 1.35;
  font-weight: 800;
}

.h5-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .16rem;
}

.h5-contact-card {
  min-width: 0;
  padding: .2rem;
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
}

.h5-contact-label {
  display: block;
  margin-bottom: .06rem;
  color: #888;
  font-size: .22rem;
  line-height: 1.4;
}

.h5-contact-value {
  display: block;
  color: #333;
  font-size: .24rem;
  line-height: 1.45;
  font-weight: 700;
  word-break: break-word;
}

.h5-legal {
  display: grid;
  gap: .06rem;
  margin-top: .24rem;
  padding-top: .24rem;
  color: #888;
  border-top: 1px solid #eee;
  font-size: .22rem;
  line-height: 1.7;
}

/* 吸底操作栏 ----------------------------------------------------------- */

.h5-sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .16rem;
  width: 100%;
  max-width: 7.5rem;
  padding: .2rem .24rem calc(.2rem + env(safe-area-inset-bottom));
  background: hsla(0, 0%, 100%, .98);
  border-top: 1px solid #ececec;
  box-shadow: 0 -.16rem .48rem rgba(0, 0, 0, .08);
  transform: translateX(-50%);
}

.h5-sticky-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .06rem;
  min-width: 0;
  height: .88rem;
  padding: 0 .12rem;
  border-radius: 8px;
  font-size: .24rem;
  line-height: 1.2;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.h5-sticky-action span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.h5-sticky-icon {
  flex-shrink: 0;
  width: .28rem;
  height: .28rem;
  fill: currentColor;
}

.h5-mini-grid-icon {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .04rem;
  width: .28rem;
  height: .28rem;
  color: currentColor;
}

.h5-mini-grid-icon div {
  width: 100%;
  height: 100%;
  border: .03rem solid currentColor;
  border-radius: .02rem;
}

.h5-sticky-action.demand-link,
.h5-sticky-action.plain-link {
  color: #e95513;
  background: #fff6f1;
  border: 1px solid #ffd0bb;
}

.h5-sticky-action.mini-link {
  color: #fff;
  background: #ff761a;
  border: 1px solid #ff761a;
}

/* 轻量点按反馈（原站由 uni-app 的 hover-class 提供） ------------------- */

.h5-button:active,
.h5-white-button:active,
.h5-quick-card:active,
.h5-category-card:active,
.h5-mobile-card:active,
.h5-sticky-action:active,
.h5-category-control:active,
.h5-search-button:active { opacity: .88; }

/* 平板：手机版收成居中一列（与原站桌面端用 iframe 呈现的效果一致） ----- */

@media (min-width: 560px) {
  body { background: #ededed; }
  .h5-prototype-home {
    min-height: 100vh;
    box-shadow: 0 0 20px rgba(0, 0, 0, .06);
  }
}

/* ===== 全芯联储适配：语义化标签、链接卡片与描边图标 ===================== */
/* :where() 让这些重置的优先级为 0，不会盖掉上面按类名写的间距与颜色 */
:where(.h5-prototype-home) :where(h1, h2, p) { margin: 0; font: inherit; }
:where(.h5-prototype-home) a { color: inherit; text-decoration: none; }

.h5-quick-card,
.h5-category-card,
.h5-contact-card { display: block; }

.h5-hero-title { font-size: .6rem; }
.h5-section-title { font-size: .42rem; font-weight: 900; }

.h5-menu-button,
.h5-category-control { padding: 0; font: inherit; cursor: pointer; }

/* 旧规则按实心图标写的 fill，描边图标需要改回 none */
.h5-search-button-icon { fill: none; color: #fff; width: .4rem; height: .4rem; }
.h5-sticky-icon { fill: none; }

.h5-legal a { color: inherit; }
.h5-powered a { color: #ff761a; }