/* ==========================================================================
   CstoneCloud Theme — Homepage Layer (v2)
   设计基线：cloud.tencent.com 实测
     · 首屏：浅蓝 #E0EFFF 底 + 深色标题 40px/500（不是深色底白字）
     · 区块：padding 60px 0；12px 灰 tag + 32px/500 标题
     · 卡片：白底 + 1px #E5E6EB 边线 + 4px 圆角；hover 才浮起 0 4px 12px rgba(0,65,171,.12)
   Loaded AFTER cst-core.css
   ========================================================================== */

/* ==================== 1. Hero ==================== */
.cst-hero{position:relative;background:var(--cst-brand-100);overflow:hidden;}
.cst-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 430px at 80% 4%,rgba(38,119,255,.22),rgba(38,119,255,0) 68%),radial-gradient(680px 380px at 8% 96%,rgba(0,162,237,.16),rgba(0,162,237,0) 70%);}
.cst-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(0,82,217,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,82,217,.055) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 72%);mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 72%);}
/* 首屏两列：左文 / 右「主打产品速览卡」。窄屏在下方媒体查询里回退为单列 */
.cst-hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:64px 20px 68px;}
.cst-hero__main{min-width:0;}
.cst-hero h1{font-size:40px;line-height:1.28;font-weight:500;color:var(--cst-title);margin:0 0 16px;max-width:760px;}
.cst-hero h1 em{font-style:normal;color:var(--cst-brand);}
.cst-hero__tag{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:14px;background:#fff;color:var(--cst-brand);font-size:13px;font-weight:500;margin-bottom:18px;box-shadow:var(--cst-shadow-xs);}
.cst-hero__tag i{font-size:12px;}
.cst-hero__lead{font-size:15px;line-height:1.8;color:var(--cst-text);margin:0 0 26px;max-width:580px;}
.cst-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px;}
.cst-hero__points{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;}
.cst-hero__points li{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--cst-text);}
.cst-hero__points i{color:var(--cst-ok);font-size:13px;}

/* 首屏右侧主打产品速览卡（替代原「全球机房节点」面板——更轻、转化导向） */
.cst-hero__card{position:relative;width:100%;max-width:460px;justify-self:end;background:#fff;border:1px solid var(--cst-line);border-radius:var(--cst-radius-s);padding:26px;box-shadow:var(--cst-shadow);}
.cst-hero__card-tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:11px;background:var(--cst-grad);color:#fff;font-size:11px;font-weight:500;margin-bottom:14px;}
.cst-hero__card-tag i{font-size:10px;}
.cst-hero__card-title{font-size:19px;font-weight:500;color:var(--cst-title);margin:0 0 6px;}
.cst-hero__card-sub{font-size:13px;color:var(--cst-text-2);margin:0 0 16px;}
.cst-hero__card-list{list-style:none;margin:0 0 20px;padding:0;}
.cst-hero__card-list li{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--cst-text);line-height:1.6;margin-bottom:8px;}
.cst-hero__card-list i{color:var(--cst-ok);font-size:12px;margin-top:4px;flex:0 0 auto;}
.cst-hero__card-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--cst-line-2);}
.cst-hero__card-link{font-size:13px;color:var(--cst-text-2);text-decoration:none;}
.cst-hero__card-link:hover{color:var(--cst-brand);text-decoration:none;}
.cst-hero__card-link i{font-size:11px;}

/* ==================== 2. 信任指标（腾讯云式的细分隔线数字条） ==================== */
.cst-stats{background:#fff;border-bottom:1px solid var(--cst-line-2);}
.cst-stats__grid{display:grid;grid-template-columns:repeat(4,1fr);}
.cst-stat{padding:26px 18px;text-align:center;border-right:1px solid var(--cst-line-2);}
.cst-stat:last-child{border-right:0;}
.cst-stat__num{font-size:32px;font-weight:500;color:var(--cst-brand);line-height:1.2;}
.cst-stat__num span{font-size:18px;}
.cst-stat__label{font-size:13px;color:var(--cst-text-2);margin-top:6px;line-height:1.6;}

/* ==================== 3. 产品矩阵样式已移除 ====================
   原手写 6 卡「产品矩阵」区块已删除，改为展示真实产品组（.cst-home-products，见第 11 节）。 */

/* ==================== 4. 核心卖点 ==================== */
.cst-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px;}
.cst-feat{background:#fff;border:1px solid var(--cst-line);border-radius:var(--cst-radius-s);padding:24px;transition:box-shadow .25s,border-color .25s;}
.cst-feat:hover{border-color:var(--cst-brand-200);box-shadow:var(--cst-shadow);}
.cst-feat__ico{width:40px;height:40px;border-radius:var(--cst-radius-s);background:var(--cst-brand-50);color:var(--cst-brand);display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:14px;}
.cst-feat h3,.cst-feat h4{font-size:16px;font-weight:500;color:var(--cst-title);margin:0 0 8px;}
.cst-feat p{font-size:13px;line-height:1.7;color:var(--cst-text-2);margin:0;}

/* ==================== 5. 全球节点 ==================== */
.cst-locs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px;}
.cst-loc{background:#fff;border:1px solid var(--cst-line);border-radius:var(--cst-radius-s);padding:18px 20px;transition:all .25s;}
.cst-loc:hover{border-color:var(--cst-brand-200);box-shadow:var(--cst-shadow);}
.cst-loc__code{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:22px;padding:0 6px;border-radius:var(--cst-radius-xs);background:var(--cst-brand-50);color:var(--cst-brand);font-size:11px;font-weight:500;margin-bottom:10px;}
.cst-loc__name{font-size:15px;font-weight:500;color:var(--cst-title);margin-bottom:4px;}
.cst-loc__line{font-size:12px;color:var(--cst-text-2);line-height:1.6;}

/* ==================== 6. 适用场景 ==================== */
.cst-scenes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:36px;}
/* 结构：<i class="... cst-scene__big"> + <h4> + <p> 三个平级子元素；用 grid 把图标排到左侧、跨两行 */
.cst-scene{position:relative;display:grid;grid-template-columns:46px 1fr;column-gap:16px;row-gap:6px;align-items:start;background:#fff;border:1px solid var(--cst-line);border-radius:var(--cst-radius-s);padding:24px;overflow:hidden;transition:all .25s;}
.cst-scene:hover{border-color:var(--cst-brand-200);box-shadow:var(--cst-shadow);}
.cst-scene i.cst-scene__big{grid-row:1 / span 2;width:46px;height:46px;border-radius:var(--cst-radius-s);display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--cst-brand-50);color:var(--cst-brand);}
.cst-scene h3,.cst-scene h4{font-size:16px;font-weight:500;color:var(--cst-title);margin:0;}
.cst-scene p{font-size:13px;line-height:1.7;color:var(--cst-text-2);margin:0;}
.cst-scene--1 i.cst-scene__big{background:#F2F7FF;color:#0052D9;}
.cst-scene--2 i.cst-scene__big{background:#E6F9F1;color:#00AF66;}
.cst-scene--3 i.cst-scene__big{background:#FFF3E6;color:#FF7D00;}
.cst-scene--4 i.cst-scene__big{background:#F0F0FF;color:#5B5BD6;}

/* ==================== 7. 四步流程 ==================== */
.cst-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px;}
.cst-step{position:relative;background:#fff;border:1px solid var(--cst-line);border-radius:var(--cst-radius-s);padding:24px;transition:all .25s;}
.cst-step:hover{border-color:var(--cst-brand-200);box-shadow:var(--cst-shadow);transform:translateY(-2px);}
.cst-step__no{width:30px;height:30px;border-radius:50%;background:var(--cst-grad);color:#fff;font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.cst-step h3,.cst-step h4{font-size:15px;font-weight:500;color:var(--cst-title);margin:0 0 8px;}
.cst-step p{font-size:13px;line-height:1.7;color:var(--cst-text-2);margin:0;}

/* ==================== 8. FAQ ==================== */
.cst-faq{max-width:900px;margin:36px auto 0;border-top:1px solid var(--cst-line);}
.cst-faq__item{border-bottom:1px solid var(--cst-line);}
/* .cst-faq__q 在模板里是 <button>，必须显式清掉浏览器默认样式 */
.cst-faq__q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:20px 0;font-family:inherit;font-size:15px;font-weight:500;color:var(--cst-title);text-align:left;background:transparent;border:0;cursor:pointer;}
.cst-faq__q i{color:var(--cst-text-2);font-size:13px;transition:transform .25s;flex:0 0 auto;}
.cst-faq__item.is-open .cst-faq__q i{transform:rotate(180deg);color:var(--cst-brand);}
.cst-faq__a{display:none;padding:0 0 20px;font-size:14px;line-height:1.8;color:var(--cst-text-2);}
.cst-faq__item.is-open .cst-faq__a{display:block;}

/* ==================== 9. 底部 CTA ==================== */
.cst-cta{background:var(--cst-brand-100);border:1px solid var(--cst-brand-200);border-radius:var(--cst-radius-s);padding:44px 40px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.cst-cta__txt h2,.cst-cta__txt h3{font-size:26px;font-weight:500;color:var(--cst-title);margin:0 0 8px;}
.cst-cta__txt p{font-size:14px;color:var(--cst-text);margin:0;}
.cst-cta__btns{display:flex;gap:12px;flex-wrap:wrap;}

/* ==================== 10. 客户中心快捷入口（.cst-quick） ==================== */
.cst-quick{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:32px;}
.cst-quick a{display:flex;flex-direction:column;align-items:center;gap:9px;padding:22px 12px;background:#fff;border:1px solid var(--cst-line);border-radius:var(--cst-radius-s);color:var(--cst-text);font-size:13px;text-decoration:none;text-align:center;transition:all .2s;}
.cst-quick a i{font-size:18px;color:var(--cst-brand);}
.cst-quick a:hover{border-color:var(--cst-brand);color:var(--cst-brand);box-shadow:var(--cst-shadow);transform:translateY(-2px);}

/* ==================== 11. 原生 WHMCS 区块（全部产品线 / 域名搜索） ==================== */
.cst-home-products .card{transition:box-shadow .25s,border-color .25s;}
.cst-home-products .card:hover{border-color:var(--cst-brand-200);box-shadow:var(--cst-shadow);}
.cst-home-products .ico-container{width:44px;height:44px;margin:0 auto 14px;border-radius:var(--cst-radius-s);background:var(--cst-brand-50);color:var(--cst-brand);display:flex;align-items:center;justify-content:center;font-size:18px;}
.cst-home-products .card-title{font-size:16px;font-weight:500;margin-bottom:8px;}
.cst-home-products .text-muted{font-size:13px;line-height:1.7;}

/* ===== 域名搜索 / 注册 / 转入（.cst-domain）
   不要再叫 .home-domain-search：custom.css 里那个类名带了
   background-color:#004fac !important + ::after 蓝色斜切，深蓝底上 TLD 标签看不清。 ===== */
.cst-domain{background:#fff;border:1px solid var(--cst-line);border-radius:var(--cst-radius-s);padding:40px 40px 32px;}
.cst-domain__title{font-size:24px;font-weight:500;color:var(--cst-title);margin:0 0 20px;text-align:center;}
.cst-domain__form{display:flex;gap:10px;flex-wrap:wrap;max-width:900px;margin:0 auto;}
.cst-domain__input{flex:1 1 320px;height:44px;padding:0 14px;font-size:14px;min-width:0;}
.cst-domain__btns{display:flex;gap:8px;flex-wrap:wrap;}
.cst-domain__btns .cst-btn{height:44px;padding:0 22px;font-size:14px;}
.cst-domain__meta{text-align:right;margin:10px auto 0;max-width:900px;}
.cst-domain__link{font-size:13px;color:var(--cst-text-2);text-decoration:none;}
.cst-domain__link:hover{color:var(--cst-brand);text-decoration:none;}
.cst-domain__tlds{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0;padding:0;justify-content:center;}
.cst-domain__tlds li{display:flex;align-items:baseline;gap:8px;padding:9px 16px;border:1px solid var(--cst-brand-100);border-radius:var(--cst-radius-xs);background:var(--cst-brand-50);font-size:13px;}
.cst-domain .tld-hm-20i{font-weight:500;color:var(--cst-brand);}
.cst-domain .price-hm-20i{color:var(--cst-text-2);font-size:12px;}
/* custom.css 里有一条未限定作用域的 .domainchecker-homepage-captcha p{color:#fff}，浅底上会变白字 */
.cst-domain .domainchecker-homepage-captcha p{color:var(--cst-text-2);}

/* ==================== 12. 响应式 ==================== */
@media (max-width:1199.98px){
  .cst-hero__inner{padding:52px 20px 56px;}
  .cst-hero h1{font-size:34px;}
  .cst-feats{grid-template-columns:repeat(2,1fr);}
  .cst-locs{grid-template-columns:repeat(3,1fr);}
  .cst-steps{grid-template-columns:repeat(2,1fr);}
  .cst-quick{grid-template-columns:repeat(3,1fr);}
  .cst-footer__grid{grid-template-columns:1.4fr 1fr 1fr;gap:28px;}
}
@media (max-width:991.98px){
  .cst-hero__inner{grid-template-columns:1fr;gap:36px;padding:44px 20px 48px;}
  .cst-hero__card{max-width:100%;justify-self:stretch;}
  .cst-footer__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:767.98px){
  .cst-hero h1{font-size:26px;line-height:1.35;}
  .cst-hero__lead{font-size:14px;}
  .cst-section,.cst-sec-block{padding:44px 0;}
  .cst-h2,.cst-section h2{font-size:24px;}
  .cst-stats__grid{grid-template-columns:repeat(2,1fr);}
  .cst-stat{border-bottom:1px solid var(--cst-line-2);}
  .cst-stat:nth-child(2n){border-right:0;}
  .cst-feats,.cst-locs,.cst-steps,.cst-scenes{grid-template-columns:1fr;}
  .cst-quick{grid-template-columns:repeat(2,1fr);}
  .cst-cta{padding:32px 22px;}
  .cst-cta__txt h2{font-size:21px;}
  .cst-domain{padding:26px 20px 24px;}
  .cst-domain__title{font-size:20px;}
  .cst-domain__form{flex-direction:column;}
  .cst-domain__input{flex:1 1 auto;width:100%;}
  .cst-domain__btns{width:100%;}
  .cst-domain__btns .cst-btn{flex:1;}
  .cst-domain__meta{text-align:center;}
  .cst-footer__grid{grid-template-columns:1fr;}
}