/* CubeCloud 主题 · 产品营销页 */
.ccp-hero { background: linear-gradient(150deg, #14181F 0%, #1A222E 55%, #16202F 100%); padding: 60px 0 64px; margin-top: 0; }
.ccp-hero-grid { display: grid; grid-template-columns: 6fr 5fr; gap: 48px; align-items: center; }
.ccp-hero-copy h1 { font-size: 38px; font-weight: 800; color: #fff; letter-spacing: 1px; }
.ccp-hero-copy p { margin: 16px 0 26px; font-size: 14px; color: rgba(255,255,255,.68); max-width: 520px; }
.ccp-hero-btns { display: flex; gap: 14px; }
.ccp-hero-area { margin-top: 30px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.75); }
.ccp-hero-area .cc-ico { color: var(--cc-primary); }
.ccp-hero-visual img { width: 100%; }

.ccp-tabs { position: sticky; top: var(--cc-nav-h); z-index: 800; background: #fff; box-shadow: 0 1px 0 var(--cc-line-2); }
.ccp-tabs.is-float-top { top: 88px; }
.ccp-tabs-inner { display: flex; gap: 34px; overflow-x: auto; }
.ccp-tabs-inner a { position: relative; padding: 17px 2px; font-size: 15px; font-weight: 500; color: var(--cc-text-1); white-space: nowrap; }
.ccp-tabs-inner a:hover { color: var(--cc-primary); }
.ccp-tabs-inner a.is-on { color: var(--cc-primary); }
.ccp-tabs-inner a.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--cc-primary); }

.cc-adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cc-adv-item { text-align: center; padding: 30px 22px; border-radius: var(--cc-radius-md); transition: all .3s var(--cc-ease); }
.cc-adv-item:hover { background: #fff; box-shadow: var(--cc-shadow-1); }
.cc-adv-item .cc-strip-icon { margin: 0 auto 16px; }
.cc-adv-item h3 { font-size: 17px; font-weight: 700; color: var(--cc-text-1); }
.cc-adv-item p { margin-top: 12px; font-size: 13px; color: var(--cc-text-3); text-align: justify; }

.ccp-scene { position: relative; padding: 88px 0; }
.ccp-scene-band { position: absolute; left: 0; right: 0; top: 0; height: 62%; background: var(--cc-gradient); }
.ccp-scene .cc-head { position: relative; }
.ccp-scene .cc-head h2, .ccp-scene .cc-head p { color: #fff; }
.ccp-scene .cc-head p { color: rgba(255,255,255,.7); }
.ccp-scene-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ccp-scene-card { background: #fff; border-radius: var(--cc-radius-md); box-shadow: var(--cc-shadow-2); padding: 34px 26px; transition: all .3s var(--cc-ease); }
.ccp-scene-card:hover { transform: translateY(-5px); }
.ccp-scene-card h3 { font-size: 18px; font-weight: 700; color: var(--cc-text-1); }
.ccp-scene-card h3::after { content: ""; display: block; width: 32px; height: 3px; border-radius: 3px; background: var(--cc-primary); margin-top: 12px; }
.ccp-scene-card p { margin-top: 14px; font-size: 13px; color: var(--cc-text-3); }

.ccp-voice { display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.ccp-voice-row { display: flex; gap: 14px; width: max-content; animation: ccpVoice 36s linear infinite; }
.ccp-voice-row span {
  padding: 9px 20px; border-radius: var(--cc-radius-pill); font-size: 13px; color: var(--cc-text-1);
  white-space: nowrap;
}
@keyframes ccpVoice { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 992px) {
  .ccp-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .ccp-hero-copy h1 { font-size: 28px; }
  .ccp-tabs { top: 60px; }
  .cc-adv-grid { grid-template-columns: 1fr; }
  .cc-adv-grid[style] { grid-template-columns: 1fr !important; }
  .ccp-scene-grid { grid-template-columns: 1fr; }
  .ccp-voice-row { animation-duration: 24s; }
}

/* 快速入门步骤数字徽章（替代 ①②③ 文字符号） */
.cc-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; margin-right: 8px;
  background: var(--cc-primary-bg); color: var(--cc-primary);
  font-size: 12px; font-weight: 700; vertical-align: -4px;
}