/* ==========================================================================
   HSST · 版面密度 + 视觉冲击力增强层
   v20261008a  |  与 hsst-type-scale 配套
   目标：消除相邻区块的叠加留白，并强化首屏张力、层级对比、交互反馈
   原则：只做「视觉表现」与「间距折叠」，不改结构、不改文案、不动响应式断点逻辑
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────
   0. 基础质感
   ───────────────────────────────────────────────────────────── */
html:root:root {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: no-preference) {
  html:root:root { scroll-behavior: smooth; }
}
html:root:root ::selection { background: #D4AF37; color: #12121c; }
html:root:root :focus-visible { outline: 2px solid #D4AF37; outline-offset: 2px; }

/* ─────────────────────────────────────────────────────────────
   1. 密度：折叠「相邻区块」的叠加内边距
      原来是 上块 padding-bottom 40 + 下块 padding-top 40 = 80px 空白；
      折叠后为 24 + 24 = 48px，区块内部节奏不变，仅消除叠加。
   ───────────────────────────────────────────────────────────── */
html:root:root body .section-padding:has(+ .section-padding),
html:root:root body .section-padding:has(+ section.section-padding) {
  padding-bottom: 24px !important;
}
html:root:root body .section-padding + .section-padding {
  padding-top: 24px !important;
}
/* 同色背景相邻时进一步合并（避免同底色区块间出现无意义分隔） */
html:root:root body .bg-off-white + .bg-off-white,
html:root:root body .bg-light-gray + .bg-light-gray {
  padding-top: 20px !important;
}
/* 区块头与内容之间不再双重留白 */
html:root:root body .section-header-center + *:not(.section-header-center) {
  margin-top: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   2. 层级：标题与眉标
   ───────────────────────────────────────────────────────────── */
html:root:root body h1,
html:root:root body h2,
html:root:root body .section-title,
html:root:root body .art-h2 {
  letter-spacing: -0.015em;
}
/* 金色眉标：细横线 + 字距 */
html:root:root body .section-subtitle,
html:root:root body .section-header-center .label,
html:root:root body .art-kicker,
html:root:root body .cs2-kicker,
html:root:root body [class*="kicker"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #B8860B !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: none;
}
html:root:root body .section-subtitle::before,
html:root:root body .section-header-center .label::before,
html:root:root body .art-kicker::before,
html:root:root body .cs2-kicker::before,
html:root:root body [class*="kicker"]::before {
  content: "";
  width: 26px;
  height: 2px;
  background: linear-gradient(90deg, #D4AF37, rgba(212, 175, 55, 0.15));
  border-radius: 2px;
  flex: none;
}
/* 区块主标题下压一条极细金色渐隐线，制造"重磅"感 */
html:root:root body .section-header-center h2,
html:root:root body .section-header-center .section-title {
  position: relative;
  padding-bottom: 14px;
}
html:root:root body .section-header-center h2::after,
html:root:root body .section-header-center .section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 54px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(135deg, #E8C84A 0%, #B8860B 100%);
}
/* 左对齐标题：金色竖条 */
html:root:root body .art-h2 { border-left-color: #D4AF37 !important; }
/* 正文描述收窄到舒适行长 */
html:root:root body .section-desc,
html:root:root body .section-header-center p.sub,
html:root:root body .section-header-center .sub {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* ─────────────────────────────────────────────────────────────
   3. 首屏：影视级遮罩 + 标题金线
   ───────────────────────────────────────────────────────────── */
html:root:root body .art-hero,
html:root:root body .project-hero,
html:root:root body .news-hero,
html:root:root body .solution-hero,
html:root:root body .honors-hero,
html:root:root body .page-hero,
html:root:root body .v2-hero,
html:root:root body .hsst-cmp-page-hero {
  position: relative;
  isolation: isolate;
}
/* 顶部控光 + 底部压深，让白色标题在任何照片上都跳出来 */
html:root:root body .art-hero::after,
html:root:root body .project-hero::after,
html:root:root body .news-hero::after,
html:root:root body .solution-hero::after,
html:root:root body .honors-hero::after,
html:root:root body .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(6, 6, 14, 0.20) 0%, rgba(6, 6, 14, 0) 60%),
    linear-gradient(180deg, rgba(6, 6, 14, 0.06) 0%, rgba(6, 6, 14, 0) 42%, rgba(6, 6, 14, 0.52) 100%);
}
html:root:root body .art-hero-content,
html:root:root body .project-hero-overlay,
html:root:root body .news-hero-content,
html:root:root body .solution-hero .container,
html:root:root body .honors-hero .container {
  position: relative;
  z-index: 2;
}
/* 首屏大标题：金色装饰线 + 更强字重和投影 */
html:root:root body .art-hero h1,
html:root:root body .project-hero-title,
html:root:root body .news-hero-title,
html:root:root body .solution-hero h1,
html:root:root body .honors-hero h1,
html:root:root body .page-hero h1 {
  font-weight: 800 !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
html:root:root body .art-hero h1::after,
html:root:root body .solution-hero h1::after,
html:root:root body .honors-hero h1::after,
html:root:root body .page-hero h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 14px;
  border-radius: 3px;
  background: linear-gradient(135deg, #E8C84A 0%, #B8860B 100%);
}
/* 背景图极缓慢推拉（Ken Burns）—— 已移除。
   原因：hero 的 background 多为「單層 url()」或「多層 url()+漸層」混合，
   在不確知圖層數量的前提下改寫 background-size/background-position 會
   造成圖層錯配（拉伸變形或整層消失）。視覺衝擊改由上方靜態影視級遮罩承擔。 */

/* 產品 / 分類頁首屏：本站刻意保留「背景圖完整顯示、無深色遮罩」（設計決策），
   文字可讀性由 premium 层 12.1b 定義：
     標題 = 鮮黃 #ffd400 + 2px 深色描邊（paint-order: stroke fill）
     副標題／描述 = 深藍 #0a2a6b + 白色光暈（深色石紋靠白光暈突圍）
   淺色大理石（米黃、白色系）上金色標題會「糊掉」，
   故此處只「單向加強」標題的深色描邊與投影，不改底色、不加遮罩。 */
html:root:root body .product-hero-title {
  -webkit-text-stroke: 2.5px rgba(6, 6, 14, .74) !important;
  text-shadow: 0 2px 6px rgba(6, 6, 14, .55), 0 8px 30px rgba(6, 6, 14, .45) !important;
}
/* 副標題／描述「不再覆寫」：premium 12.1b 的
     color:#0a2a6b + text-shadow: 白 1px/3px + 0 0 10px .85
   已是為「深淺石紋皆可讀」調校過的實測值。
   曾在此多疊一層 `0 2px 10px rgba(255,255,255,.7)`，
   實測在淺色大理石上會把深藍字的筆畫「洗淡」，故移除，回歸設計系統原值。 */
/* 只給「文字區塊」加一層聚光暗暈（而非全寬遮罩）—— 已回退。
   實測：淺色石紋上確實能救回標題對比，但深色石紋上會同時壓暗
   原本靠「白色光暈」突圍的深藍副標與描述，兩頭不討好。
   本站首屏遮罩「刻意 100% 透明」是既定的設計決策，此處不推翻，
   僅保留上方對標題描邊／陰影的強化（單向加強，任何底色皆不吃虧）。 */

/* ─────────────────────────────────────────────────────────────
   4. 卡片：统一悬浮语言
   ───────────────────────────────────────────────────────────── */
html:root:root body .news-card,
html:root:root body .stone-card,
html:root:root body .service-card,
html:root:root body .pain-point-card,
html:root:root body .overview-card,
html:root:root body .why-card,
html:root:root body .sol-quick-card,
html:root:root body .solutions-card,
html:root:root body .project-card,
html:root:root body .trust-item,
html:root:root body .client-logo-item,
html:root:root body .cs2-mat-card,
html:root:root body .role-card,
html:root:root body .flow-step,
html:root:root body .cs2-card {
  transition: transform .38s cubic-bezier(.2, .7, .3, 1),
              box-shadow .38s cubic-bezier(.2, .7, .3, 1),
              border-color .38s ease !important;
}
html:root:root body .news-card:hover,
html:root:root body .stone-card:hover,
html:root:root body .service-card:hover,
html:root:root body .pain-point-card:hover,
html:root:root body .overview-card:hover,
html:root:root body .why-card:hover,
html:root:root body .sol-quick-card:hover,
html:root:root body .solutions-card:hover,
html:root:root body .project-card:hover,
html:root:root body .trust-item:hover,
html:root:root body .client-logo-item:hover,
html:root:root body .cs2-mat-card:hover,
html:root:root body .role-card:hover,
html:root:root body .flow-step:hover,
html:root:root body .cs2-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 46px rgba(14, 14, 28, .16), 0 0 0 1px rgba(212, 175, 55, .35) !important;
}
/* 卡片内图片统一裁切比例，避免出现"图片没铺满"的留白 */
html:root:root body .news-card-image,
html:root:root body .stone-card-img,
html:root:root body .gallery-item,
html:root:root body .project-card-img,
html:root:root body .cs2-mat-card .ph,
html:root:root body .news-spotlight-img {
  overflow: hidden;
}
html:root:root body .news-card-image .bg,
html:root:root body .gallery-item img,
html:root:root body .stone-card-img img,
html:root:root body .project-card-img img,
html:root:root body .cs2-mat-card img {
  transition: transform .7s cubic-bezier(.2, .7, .3, 1) !important;
}
html:root:root body .news-card:hover .bg,
html:root:root body .gallery-item:hover img,
html:root:root body .stone-card:hover .stone-card-img img,
html:root:root body .project-card:hover .project-card-img img,
html:root:root body .cs2-mat-card:hover img {
  transform: scale(1.07);
}

/* ─────────────────────────────────────────────────────────────
   5. 按钮：金色质感 + 扫光
   ───────────────────────────────────────────────────────────── */
html:root:root body .btn-gold,
html:root:root body .btn-primary,
html:root:root body .primary-btn,
html:root:root body .cta-btn,
html:root:root body .art-btn,
html:root:root body .jd-btn {
  background-image: linear-gradient(135deg, #E8C84A 0%, #D4AF37 45%, #B8860B 100%) !important;
  color: #14141f !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(184, 134, 11, .55) !important;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease, filter .3s ease !important;
}
html:root:root body .btn-gold:hover,
html:root:root body .btn-primary:hover,
html:root:root body .primary-btn:hover,
html:root:root body .cta-btn:hover,
html:root:root body .art-btn:hover,
html:root:root body .jd-btn:hover {
  transform: translateY(-2px);
  filter: saturate(1.12) brightness(1.05);
  box-shadow: 0 14px 30px rgba(184, 134, 11, .38) !important;
}
html:root:root body .btn-gold::after,
html:root:root body .btn-primary::after,
html:root:root body .primary-btn::after,
html:root:root body .cta-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  transition: left .65s cubic-bezier(.2, .7, .3, 1);
  pointer-events: none;
}
html:root:root body .btn-gold:hover::after,
html:root:root body .btn-primary:hover::after,
html:root:root body .primary-btn:hover::after,
html:root:root body .cta-btn:hover::after {
  left: 150%;
}
html:root:root body .btn-outline-white:hover,
html:root:root body .btn-outline:hover {
  background: rgba(212, 175, 55, .14) !important;
  border-color: #D4AF37 !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────
   6. 深色区块与 CTA：层次与光感
   ───────────────────────────────────────────────────────────── */
html:root:root body .cta-dark,
html:root:root body .cta-section.cta-home {
  background-image:
    radial-gradient(90% 130% at 88% 0%, rgba(212, 175, 55, .16) 0%, rgba(212, 175, 55, 0) 55%),
    linear-gradient(135deg, #14142a 0%, #1e1e38 55%, #101024 100%) !important;
}
/* ─────────────────────────────────────────────────────────────
   6b. 表單區（.hsst-form-zone）恢復淺色背景＋黑色文字
   此前被誤套深色漸層（與本檔 6. 同組選擇器），導致全站 350+ 頁
   「立即開始／工程諮詢」區暗底暗字不可讀——與 premium-20260902.css
   內 .hsst-form-zone 專屬規則（隱私副文 #5C574F、成功塊白底、提交鈕
   #1A1A2E）的「淺底」設計意圖直接衝突。改回淺底，統一全站背景。
   ───────────────────────────────────────────────────────────── */
html:root:root body .hsst-form-zone:not(.bg-off-white):not(.cta-home) {
  background: transparent !important;
}
/* 表單區內描邊按鈕：淺底改用深金描邊＋黑字（沿用模組48 白底黑字金框規範），
   保證對比度；hover 填金底黑字，與 .btn-filled 一致。 */
html:root:root body .hsst-form-zone .btn-outline {
  color: #1A1A2E !important;
  border-color: #D4AF37 !important;
}
html:root:root body .hsst-form-zone .btn-outline:hover {
  background: #D4AF37 !important;
  color: #111 !important;
}
/* 表單區內金色小標（kicker）與內文連結：原 #D4AF37 在淺底對比不足，
   改為深金 #8A6D1F 保證可讀；連結加底線以區分。 */
html:root:root body .hsst-form-zone .project-section-subtitle {
  color: #8A6D1F !important;
}
html:root:root body .hsst-form-zone a:not(.btn-filled):not(.btn-outline) {
  color: #8A6D1F !important;
  text-decoration: underline;
}
/* ─────────────────────────────────────────────────────────────
   6c. 表單區（.hsst-form-zone）排版重整：消除「大量留白」
   - 區塊背景由整條全寬色帶改為「居中卡片」：內層 .container /
     .project-container / .sample-form-container 承載淺底＋邊框＋圓角，
     去除兩側空白感，統一全站視覺；
   - 含 .cta-grid 的頁面（工程案例等）由「auto-fill 幻影第三欄＋垂直置中」
     改為單欄：推銷文案（標題＋說明＋按鈕）作為整寬標頭，表單居中收窄，
     徹底消除左欄高低落差造成的留白；
   - 手機端單欄堆疊、卡片內距收斂。
   - 排除 .cta-home（首頁深色 CTA 保持原樣）。
   ───────────────────────────────────────────────────────────── */
html:root:root body .hsst-form-zone:not(.bg-off-white):not(.cta-home) .container,
html:root:root body .hsst-form-zone:not(.bg-off-white):not(.cta-home) .project-container,
html:root:root body .hsst-form-zone:not(.bg-off-white):not(.cta-home) .sample-form-container {
  background: #FAF8F5 !important;
  border: 1px solid #ECE4D7 !important;
  border-radius: 20px !important;
  padding: 48px !important;
  max-width: 1104px !important;
}
html:root:root body .hsst-form-zone:not(.bg-off-white):not(.cta-home) .container.text-center,
html:root:root body .hsst-form-zone:not(.bg-off-white):not(.cta-home) .project-container.text-center {
  text-align: center !important;
}
/* 單欄：推銷文案標頭 + 居中收窄表單 */
html:root:root body .hsst-form-zone .cta-grid {
  grid-template-columns: 1fr !important;
  gap: 26px !important;
  align-items: stretch !important;
  margin-top: 6px !important;
}
html:root:root body .hsst-form-zone .cta-info { text-align: center; }
html:root:root body .hsst-form-zone .cta-buttons { justify-content: center; }
html:root:root body .hsst-form-zone .project-section-title,
html:root:root body .hsst-form-zone .project-section-subtitle { text-align: center; }
/* 表單鋪滿卡片寬＝頁面內容區同寬（此前 640px 居中收窄，兩側大量留白，
   產品頁欄位網格更因寬度不足塌成單列） */
html:root:root body .hsst-form-zone:not(.cta-home) .hsst-form {
  max-width: 100% !important;
  margin: 0 auto !important;
}
/* 產品頁表單欄位網格（.specs-dimensions-grid 同類名也用於規格卡，
   此處僅限表單區作用域）：鋪滿後固定兩欄成對（姓名|公司、郵箱|電話），
   手機回退單欄 */
html:root:root body .hsst-form-zone:not(.cta-home) .specs-dimensions-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}
@media (max-width: 768px) {
  html:root:root body .hsst-form-zone:not(.cta-home) .specs-dimensions-grid {
    grid-template-columns: 1fr !important;
  }
}
/* 產品 / 資料頁表單區標頭也居中，與工程案例統一 */
html:root:root body .hsst-form-zone:not(.cta-home) .container > h2,
html:root:root body .hsst-form-zone:not(.cta-home) .container > p,
html:root:root body .hsst-form-zone:not(.cta-home) .sample-form-container > h2,
html:root:root body .hsst-form-zone:not(.cta-home) .sample-form-container > p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* 手機 */
@media (max-width: 900px) {
  html:root:root body .hsst-form-zone:not(.bg-off-white):not(.cta-home) .container,
  html:root:root body .hsst-form-zone:not(.bg-off-white):not(.cta-home) .project-container,
  html:root:root body .hsst-form-zone:not(.bg-off-white):not(.cta-home) .sample-form-container {
    padding: 32px 20px !important;
    border-radius: 16px !important;
  }
}
/* 数字 / 统计：金色渐变字 */
html:root:root body .stat-item strong,
html:root:root body .trust-item strong,
html:root:root body .stat-number,
html:root:root body .news-hero span strong {
  background-image: linear-gradient(135deg, #F0D77A 0%, #D4AF37 55%, #B8860B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800 !important;
}

/* ─────────────────────────────────────────────────────────────
   7. 图文 / 清单：收紧行距与分隔线
   ───────────────────────────────────────────────────────────── */
html:root:root body table { border-collapse: collapse; }
html:root:root body table th,
html:root:root body table td { padding-top: 10px; padding-bottom: 10px; }
/* 規格表格（.tech-specs-table 為外層 wrapper div，class 原本屬於 table 本身）：
   內層 <table> 此前僅在 ≤768px 媒體查詢內才有 width:100%，
   桌面端收縮為內容寬（600–1000px），與頁面內容區（1104px）兩側出現大空洞。
   全斷點統一鋪滿父容器寬度，與頁寬一致。 */
html:root:root body .tech-specs-table > table { width: 100% !important; }
html:root:root body ul.hsst-dense li,
html:root:root body .flow-step p,
html:root:root body .pain-point-card p,
html:root:root body .service-card p { line-height: 1.7; }
html:root:root body img,
html:root:root body svg,
html:root:root body video { max-width: 100%; }

/* ─────────────────────────────────────────────────────────────
   8. 入场动画：渐进增强（无 JS / 爬虫一律可见）
   ───────────────────────────────────────────────────────────── */
html:root:root .fade-in {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}
html:root:root.js .fade-in {
  opacity: 0 !important;
  transform: translateY(18px) !important;
}
html:root:root.js .fade-in.visible {
  opacity: 1 !important;
  transform: none !important;
}
html:root:root .aos-init,
html:root:root .aos-animate {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ─────────────────────────────────────────────────────────────
   9. 页脚：收紧并增强层次
   ───────────────────────────────────────────────────────────── */
html:root:root body footer .ft-grid5,
html:root:root body footer .footer-grid { align-content: start; }
html:root:root body footer a { transition: color .25s ease, transform .25s ease; }
html:root:root body footer a:hover { color: #E8C84A !important; }

/* ─────────────────────────────────────────────────────────────
   10. 移动端：进一步收紧但不破坏可点区域
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  html:root:root body .section-padding:has(+ .section-padding) { padding-bottom: 16px !important; }
  html:root:root body .section-padding + .section-padding { padding-top: 16px !important; }
  html:root:root body .section-header-center { margin-bottom: 16px !important; }
  html:root:root body .section-header-center h2::after,
  html:root:root body .section-header-center .section-title::after { width: 44px; height: 2px; }
  html:root:root body .art-hero h1::after { width: 54px; margin-top: 10px; }
}