/*
  Home Premium (v2026.01.12)
  目标：让首页更大气：留白、层级、统一卡片质感
  仅对 body.pro-home 生效，避免影响其它页面
*/

:root{
  --pro-home-maxw: 1180px;
  --pro-home-radius: 18px;
  --pro-home-border: rgba(15,23,42,.08);
  --pro-home-shadow: 0 22px 60px rgba(15,23,42,.08);
}

/* 内容区宽度更“官网化” */
body.pro-home .content.content-full{ max-width: var(--pro-home-maxw); }

/* 首页通用区块：统一留白 */
body.pro-home .pro-home-section{ padding: 0; }
/* 重要：不要把区块留白拉太大（84px 会导致你截图那种“中间大空白”）。
   这里统一收敛到更紧凑的官网留白。 */
body.pro-home .pro-home-section .py-5{ padding-top: 44px !important; padding-bottom: 44px !important; }
body.pro-home .pro-home-section .py-4{ padding-top: 44px !important; padding-bottom: 44px !important; }
@media (max-width: 768px){
  body.pro-home .pro-home-section .py-5{ padding-top: 34px !important; padding-bottom: 34px !important; }
  body.pro-home .pro-home-section .py-4{ padding-top: 34px !important; padding-bottom: 34px !important; }
}

/* 通用标题风格 */
body.pro-home .pro-home-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(15,23,42,.62);
  background: rgba(45,126,255,.08);
  border: 1px solid rgba(45,126,255,.14);
  padding: 6px 12px;
  border-radius: 999px;
}
body.pro-home .pro-home-h2{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .2px;
  color: #0f172a;
}
body.pro-home .pro-home-section-sub{
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(15,23,42,.66) !important;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   Hero（仅首页）：强制变矮 + 内容上移
   目标：导航下面的大图不要占半屏，文案上移更像官网
   ========================= */
body.pro-home .pro-mk-hero.pro-mk-hero--photo.pro-home-hero{
  /* 关键：不要 vertical-center，否则会产生上下大空白 */
  align-items: flex-start !important;
  min-height: 340px !important;
  padding-top: 56px !important;
  padding-bottom: 44px !important;
}
body.pro-home .pro-mk-hero.pro-mk-hero--photo.pro-home-hero::before{
  background-position: right 78% !important;
}
/* 去掉左侧文案列自带的 py-4（会把首屏撑高） */
body.pro-home .pro-home-hero .col-lg-7.py-4{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
@media (max-width: 768px){
  body.pro-home .pro-mk-hero.pro-mk-hero--photo.pro-home-hero{
    min-height: 300px !important;
    padding-top: 52px !important;
    padding-bottom: 34px !important;
  }
}
}

/* Global Nodes 区块本身有 80px 上下留白（home-global-nodes.css），这里同样收敛 */
body.pro-home .pro-gn{ padding: 56px 0 !important; }
@media (max-width: 768px){
  body.pro-home .pro-gn{ padding: 44px 0 !important; }
}

/* OneUI 原生区块（为什么选择/服务增长）默认也会显得松：一起收敛 */
body.pro-home #one-versions .py-5,
body.pro-home #one-remastered .py-5,
body.pro-home #one-versions .py-4,
body.pro-home #one-remastered .py-4{
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}
@media (max-width: 575.98px){
  body.pro-home .pro-home-h2{ font-size: 26px; }
}

/* =========================
   Hero：更“大片感”
   ========================= */
body.pro-home .pro-home-hero{ position: relative; }
body.pro-home .pro-home-hero .pro-home-hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  padding: 7px 12px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
body.pro-home .pro-home-hero .pro-home-hero-title{
  margin-top: 12px;
  font-size: 56px;
  font-weight: 950;
  letter-spacing: .2px;
  line-height: 1.08;
  text-shadow: 0 14px 40px rgba(0,0,0,.35);
}
body.pro-home .pro-home-hero .pro-home-hero-sub{
  font-size: 16.5px;
  line-height: 1.95;
  color: rgba(255,255,255,.82);
  max-width: 640px;
  margin-top: 12px;
}
@media (max-width: 992px){
  body.pro-home .pro-home-hero .pro-home-hero-title{ font-size: 42px; }
}

body.pro-home .pro-home-hero .pro-home-hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 18px;
}
body.pro-home .pro-home-hero .pro-home-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 13px;
  font-weight: 750;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  padding: 8px 12px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

/* Hero 右侧推荐卡片：更轻的玻璃质感 */
body.pro-home .pro-home-hero-card{
  border-radius: var(--pro-home-radius);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  box-shadow: 0 26px 70px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
}
body.pro-home .pro-home-hero-card .block-content{ padding: 22px 22px; }
body.pro-home .pro-home-hero-mini{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(7,20,40,.28);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  margin-bottom: 12px;
}
body.pro-home .pro-home-hero-mini-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
body.pro-home .pro-home-hero-mini-body .text-muted{ color: rgba(255,255,255,.70) !important; }

/* =========================
   图文入口卡片：更厚重
   ========================= */
body.pro-home .pro-imgcard{ height: 168px; border-radius: 16px; }
body.pro-home .pro-imgcard-body{ padding: 20px; }
body.pro-home .pro-imgcard-icon{ width: 44px; height: 44px; border-radius: 14px; font-size: 17px; }
body.pro-home .pro-imgcard-title{ font-size: 17px; font-weight: 850; }
body.pro-home .pro-imgcard-desc{ font-size: 13.5px; opacity: .92; }

/* =========================
   价格卡片：更像 SaaS 价格表
   ========================= */
body.pro-home .pro-price-card{ border-radius: 16px; box-shadow: 0 18px 50px rgba(15,38,71,.10); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
body.pro-home .pro-price-card:hover{ transform: translateY(-3px); box-shadow: 0 26px 70px rgba(15,38,71,.14); border-color: rgba(45,126,255,.26); }
body.pro-home .pro-price-head{ background: linear-gradient(135deg, rgba(45,126,255,.10), rgba(248,251,255,1)); }

/* 默认把第 2 张卡做成“推荐”视觉（不改 HTML 也能生效） */
body.pro-home .pro-price-grid > div:nth-child(2) .pro-price-card{
  border-color: rgba(45,126,255,.30);
  box-shadow: 0 28px 78px rgba(45,126,255,.18);
}
body.pro-home .pro-price-grid > div:nth-child(2) .pro-price-head{
  background: linear-gradient(135deg, rgba(45,126,255,.18), rgba(248,251,255,1));
}

/* =========================
   统计/公告块：统一卡片质感
   ========================= */
body.pro-home #one-versions .block,
body.pro-home #one-remastered .block{
  border-radius: var(--pro-home-radius) !important;
  border: 1px solid var(--pro-home-border) !important;
  box-shadow: var(--pro-home-shadow) !important;
}

/* 公告表格：更轻、更易读 */
body.pro-home .table.table-bordered{ border-color: rgba(15,23,42,.08) !important; }
body.pro-home .table thead th{
  background: rgba(15,23,42,.03);
  border-color: rgba(15,23,42,.08) !important;
  font-weight: 850;
  color: rgba(15,23,42,.78);
}
body.pro-home .table tbody td{ border-color: rgba(15,23,42,.08) !important; }
body.pro-home .table-hover tbody tr:hover{ background: rgba(45,126,255,.04); }

/* =========================
   移动端吸底 CTA：更像官方“悬浮工具条”
   ========================= */
body.pro-home .pro-home-sticky-cta{
  position: sticky;
  bottom: 0;
  z-index: 1030;
  padding: 12px 12px 10px;
  background: rgba(255,255,255,.92);
  border-top: 1px solid rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
}
body.pro-home .pro-home-sticky-inner{ display:grid; gap:10px; }
body.pro-home .pro-home-sticky-full{ text-align:center; font-size: 13px; }


/* 进一步收紧首屏元素间距（减少占高） */
body.pro-home .pro-home-hero .pro-home-hero-title{
  margin-top: 10px !important;
  font-size: 50px !important;
  line-height: 1.05 !important;
}
body.pro-home .pro-home-hero .pro-home-hero-sub{
  line-height: 1.75 !important;
  margin-top: 10px !important;
}
body.pro-home .pro-home-hero .pro-home-hero-badges{
  margin-top: 14px !important;
  gap: 8px !important;
}
body.pro-home .pro-home-hero .pro-home-badge{
  padding: 7px 10px !important;
}
body.pro-home .pro-home-hero-cta{
  margin-top: 14px !important;
}
body.pro-home .pro-home-hero-cta--sub{
  margin-top: 10px !important;
}
@media (max-width: 992px){
  body.pro-home .pro-home-hero .pro-home-hero-title{
    font-size: 40px !important;
  }
}