/* 版权所有 © 八艾云 (www.8a.hk) 保留所有权利 */
/* base.css - common foundation (vars+reset+container+section+CTA+btns+animation) */
/* byc 八艾云 公共门户 main.css */

:root {
  /* 主色板 (theme-color #2B6DE8 + SVG inline 提取) */
  --byc-primary:        #2B6DE8;
  --byc-primary-dark:   #1E5BC6;
  --byc-primary-light:  #4A8AF4;
  --byc-primary-50:     #EBF3FF;
  --byc-primary-100:    #D6E7FF;
  /* 强调色 (橙) */
  --byc-accent:         #FF6A00;
  --byc-accent-light:   #FF9500;
  /* 辅色 (紫/青/绿/粉/红) */
  --byc-purple:         #8B5CF6;
  --byc-cyan:           #06B6D4;
  --byc-green:          #10B981;
  --byc-pink:           #EC4899;
  --byc-red:            #EF4444;
  /* 文字 */
  --byc-text:           #1A1F36;
  --byc-text-sec:       #5A6178;
  --byc-text-mut:       #8C92A4;
  /* 背景 / 边框 */
  --byc-bg:             #FFFFFF;
  --byc-bg-light:       #F7F8FA;
  --byc-bg-dark:        #1A1F36;
  --byc-border:         #E8EBF0;
  --byc-border-strong:  #D4D9E3;
  /* 渐变 */
  --byc-grad-primary:   linear-gradient(135deg, #2B6DE8 0%, #5B8DEF 100%);
  --byc-grad-accent:    linear-gradient(135deg, #FF6A00 0%, #FF9500 100%);
  --byc-grad-dark:      linear-gradient(180deg, #1A1F36 0%, #252B42 100%);
  --byc-grad-hero:      linear-gradient(120deg, #2B6DE8 0%, #5466E0 45%, #8B5CF6 100%);
  /* 阴影 */
  --byc-sd-sm:          0 1px 3px rgba(0,0,0,0.08);
  --byc-sd-md:          0 4px 12px rgba(0,0,0,0.10);
  --byc-sd-lg:          0 8px 24px rgba(0,0,0,0.12);
  --byc-sd-xl:          0 16px 40px rgba(0,0,0,0.15);
  --byc-sd-pri:         0 8px 24px rgba(43,109,232,0.25);
  /* 圆角 */
  --byc-r-sm: 4px;  --byc-r-md: 8px;  --byc-r-lg: 12px;  --byc-r-xl: 16px;  --byc-r-2xl: 24px;  --byc-r-full: 9999px;
  /* 字体 */
  --byc-font: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', tahoma, 'Helvetica Neue', Arial, sans-serif;
  --byc-trans: all 0.25s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--byc-font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--byc-text);
  background: var(--byc-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; transition: var(--byc-trans); }
ul, ol { list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.byc-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .byc-container { padding: 0 24px; } }
@media (min-width: 1400px) { .byc-container { max-width: 1360px; } }

.byc-main { padding-top: 70px; }

/* Icon 渐变方块 (产品/方案卡通用) */
/* 全栈 UCloud 主蓝单色, 撤多彩 (紫/青/绿/橙/粉/红) — 全部统一 #3860F4 */
.byc-ico-blue   { background: linear-gradient(135deg, #3860F4 0%, #6B85F8 100%); }
.byc-ico-purple { background: linear-gradient(135deg, #3860F4 0%, #6B85F8 100%); }
.byc-ico-cyan   { background: linear-gradient(135deg, #3860F4 0%, #6B85F8 100%); }
.byc-ico-green  { background: linear-gradient(135deg, #3860F4 0%, #6B85F8 100%); }
.byc-ico-orange { background: linear-gradient(135deg, #3860F4 0%, #6B85F8 100%); }
.byc-ico-pink   { background: linear-gradient(135deg, #3860F4 0%, #6B85F8 100%); }
.byc-ico-red    { background: linear-gradient(135deg, #3860F4 0%, #6B85F8 100%); }

/* Section 通用 */
.byc-sec { padding: 64px 0; }
@media (min-width: 768px) { .byc-sec { padding: 80px 0; } }
.byc-sec-light { background: var(--byc-bg-light); }
.byc-sec-dark { background: var(--byc-grad-dark); color: #fff; }

.byc-sec-head { text-align: center; margin-bottom: 48px; }
.byc-sec-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px;
  background: linear-gradient(135deg, rgba(43,109,232,0.10), rgba(139,92,246,0.10));
  border: 1px solid rgba(43,109,232,0.15);
  border-radius: var(--byc-r-full);
  font-size: 13px; font-weight: 600;
  color: var(--byc-primary);
  margin-bottom: 16px;
}
.byc-sec-badge svg { width: 16px; height: 16px; }
.byc-sec-dark .byc-sec-badge { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.20); }
.byc-sec-title { font-size: clamp(28px, 4vw, 40px); font-weight: 700; color: var(--byc-text); margin-bottom: 16px; }
.byc-sec-dark .byc-sec-title { color: #fff; }
.byc-sec-desc { font-size: 16px; color: var(--byc-text-sec); max-width: 600px; margin: 0 auto; }
.byc-sec-dark .byc-sec-desc { color: rgba(255,255,255,0.7); }

/* Features Grid (核心优势 8 卡 — home + 19 产品/方案页共享) */
.byc-feats { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .byc-feats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .byc-feats { grid-template-columns: repeat(4, 1fr); } }
.byc-feat {
  text-align: center;
  padding: 32px 20px;
  background: #fff;
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-xl);
  transition: var(--byc-trans);
}
.byc-feat:hover { border-color: var(--byc-primary-100); box-shadow: var(--byc-sd-md); transform: translateY(-4px); }
.byc-feat-ico {
  width: 64px; height: 64px; margin: 0 auto 20px;
  background: var(--byc-primary-50);
  border-radius: var(--byc-r-xl);
  display: flex; align-items: center; justify-content: center;
  transition: var(--byc-trans);
}
.byc-feat-ico svg { width: 32px; height: 32px; color: var(--byc-primary); }
.byc-feat:hover .byc-feat-ico { background: var(--byc-grad-primary); }
.byc-feat:hover .byc-feat-ico svg { color: #fff; }
.byc-feat h3 { font-size: 17px; font-weight: 600; color: var(--byc-text); margin-bottom: 8px; }
.byc-feat p { font-size: 13px; color: var(--byc-text-mut); line-height: 1.6; }
.byc-sec-dark .byc-feat { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); }
.byc-sec-dark .byc-feat:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); }
.byc-sec-dark .byc-feat-ico { background: rgba(255,255,255,0.08); }
.byc-sec-dark .byc-feat-ico svg { color: #fff; }
.byc-sec-dark .byc-feat h3 { color: #fff; }
.byc-sec-dark .byc-feat p { color: rgba(255,255,255,0.7); }

/* CTA */
.byc-cta { background: var(--byc-grad-primary); padding: 64px 0; text-align: center; }
.byc-cta-title { font-size: clamp(28px, 4vw, 40px); font-weight: 700; color: #fff; margin-bottom: 16px; }
.byc-cta-desc { font-size: 17px; color: rgba(255,255,255,0.85); margin-bottom: 32px; }
.byc-cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.byc-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px;
  font-size: 16px; font-weight: 600;
  border-radius: var(--byc-r-lg);
  transition: var(--byc-trans);
}
.byc-cta-btn-white { color: var(--byc-primary); background: #fff; box-shadow: var(--byc-sd-lg); }
.byc-cta-btn-white:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,0.2); color: var(--byc-primary); }
.byc-cta-btn-ghost { color: #fff; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); }
.byc-cta-btn-ghost:hover { background: rgba(255,255,255,0.25); transform: translateY(-3px); color: #fff; }

/* 公共按钮 (用于 host/db/buy 等子页, 保留) */
.byc-btn-primary-lg, .byc-btn-ghost-lg {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 28px;
  font-size: 15px; font-weight: 600;
  border-radius: 8px;
  transition: var(--byc-trans);
}
.byc-btn-primary-lg { background: var(--byc-grad-primary); color: #fff; box-shadow: 0 4px 12px rgba(43,109,232,0.25); }
.byc-btn-primary-lg:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(43,109,232,0.4); color: #fff; }
.byc-btn-ghost-lg { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.byc-btn-ghost-lg:hover { background: rgba(255,255,255,0.25); }

/* 动画 */
@keyframes bycFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.byc-fade-in { animation: bycFadeIn 0.6s ease forwards; }