/* ============================================================
   KCK.CASA — Design System (2026-09-02)
   Aesthetic direction: "Refined European Industrial"
     - A factory-direct B2B brand that leads with verifiable
       engineering specs, wrapped in European refinement.
     - Display: Fraunces (variable old-style serif) — characterful,
       European, reads as refined at large optical sizes.
     - Body/UI: Inter — technical clarity for spec-heavy content.
     - Signature: hairline gold rules, numbered index markers,
       warm grain on dark surfaces, generous negative space.

   Loaded AFTER pages.css so it can define shared primitives;
   page-specific files (collection.css / pages-contact.css) load
   later via extra_css and win where they need to.
   ============================================================ */

:root{
  /* Type */
  

  /* Palette — extends the existing kck tokens */
  --kck-navy-deep: #0f1430;
  --kck-sand:      #f4f2ec;
  --kck-surface:   #ffffff;
  --kck-hairline:  rgba(26, 31, 61, .10);
  --kck-hairline-strong: rgba(26, 31, 61, .18);

  /* Elevation */
  --kck-shadow-sm: 0 1px 2px rgba(26, 31, 61, .04);
  --kck-shadow:    0 10px 30px -12px rgba(26, 31, 61, .18);
  --kck-shadow-lg: 0 34px 68px -26px rgba(26, 31, 61, .32);

  /* Motion */
  --kck-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Display heading ---------- */
.kck-display{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight:var(--fw-semibold);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--kck-navy, #1a1f3d);
}

/* ---------- Eyebrow / kicker ---------- */
.kck-eyebrow{
  display: inline-block;

  font-size: 11px;
  font-weight:var(--fw-semibold);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kck-gold, #D4A843);
}

/* ---------- Section head ---------- */
.kck-sec-head{ margin-bottom: 40px; }
.kck-sec-head .kck-eyebrow{ margin-bottom: 12px; }
.kck-sec-head h2{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight:var(--fw-semibold);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--kck-navy, #1a1f3d);
  margin: 0 0 12px;
}
.kck-sec-head p{
  font-size:var(--fs-md);
  line-height: 1.7;
  color: var(--kck-ink-soft, #565b6e);
  max-width: 62ch;
  margin: 0;
}

/* ---------- Hairline rule with gold accent ---------- */
.kck-rule{
  height: 1px;
  background: var(--kck-hairline);
  border: 0;
  margin: 0;
}
.kck-rule--gold{
  height: 2px;
  background: linear-gradient(90deg, var(--kck-gold, #D4A843) 0%, var(--kck-gold, #D4A843) 18%, var(--kck-hairline) 18%);
}

/* ---------- Spec chip (technical datasheet energy) ---------- */
.kck-chip{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--kck-hairline);
  border-radius: 999px;
  background: var(--kck-surface);
  font-size: 12.5px;
  color: var(--kck-ink-soft, #565b6e);
  line-height: 1;
  white-space: nowrap;
}
.kck-chip b{

  font-weight:var(--fw-semibold);
  font-size: 13.5px;
  color: var(--kck-navy, #1a1f3d);
}

/* ---------- Numbered index marker ---------- */
.kck-index{

  font-size: 11px;
  font-weight:var(--fw-semibold);
  letter-spacing: .16em;
  color: var(--kck-gold, #D4A843);
  font-variant-numeric: tabular-nums;
}

/* ---------- Warm grain overlay (dark surfaces) ---------- */
.kck-grain{ position: relative; }
.kck-grain::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .04;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Scroll reveal ---------- */
.kck-reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s var(--kck-ease), transform .75s var(--kck-ease);
  will-change: opacity, transform;
}
.kck-reveal.is-in{ opacity: 1; transform: none; }
.kck-reveal[data-d="1"]{ transition-delay: .07s; }
.kck-reveal[data-d="2"]{ transition-delay: .14s; }
.kck-reveal[data-d="3"]{ transition-delay: .21s; }
.kck-reveal[data-d="4"]{ transition-delay: .28s; }
.kck-reveal[data-d="5"]{ transition-delay: .35s; }
.kck-reveal[data-d="6"]{ transition-delay: .42s; }

@media (prefers-reduced-motion: reduce){
  .kck-reveal{ opacity: 1; transform: none; transition: none; }
}

/* ---------- Chip row (spec strip) ---------- */
.kck-chip-row{ display: flex; flex-wrap: wrap; gap: 10px; }

/* ============================================================
   全站统一页面头图 —— 各页内联同一套 class，样式集中在本文件
   取代此前三套各自为政的实现：
     .kck-coll-hero（系列页）/ .kck-cert-hero（认证页）/ .kck-contact-hero（联系页）
   以及老模板的 .breadcrumb-area（关于 / FAQ / 材料 / 产品等页面）。
   ============================================================ */
.kck-page-hero{
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(115% 125% at 88% 6%, rgba(212, 168, 67, .17) 0%, rgba(212, 168, 67, 0) 56%),
        linear-gradient(160deg, var(--kck-navy-deep, #0f1430) 0%, var(--kck-navy, #1a1f3d) 58%, #20264a 100%);
    color: #fff;
    padding: 88px 0 80px;
}
/* 底部金色 hairline：与 CTA 区、hero 分隔符同一语言 */
.kck-page-hero .container{ position: relative; z-index: 2 }
.kck-page-hero-inner{ max-width: 920px; }
.kck-page-hero .kck-eyebrow{ margin-bottom: 18px; }
.kck-page-hero h1{
    font-size: clamp(34px, 5.4vw, 68px);
    color: #fff;
    margin: 0 0 20px;
}
.kck-page-lead{
    font-size: clamp(15px, 1.32vw, 18px);
    line-height: 1.72;
    color: rgba(255, 255, 255, .82);
    max-width: 64ch;
    margin: 0 0 28px;
}
/* hero 内的 chip：半透明玻璃感 + 金色数值 */
.kck-page-hero .kck-chip{
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .78);
    backdrop-filter: blur(2px);
}
.kck-page-hero .kck-chip b{ color: var(--kck-gold, #D4A843); }

@media (max-width: 991px){
    .kck-page-hero{ padding: 62px 0 56px; }
}
@media (max-width: 640px){
    .kck-page-hero{ padding: 48px 0 44px; }
    .kck-page-hero h1{ margin-bottom: 16px; }
    .kck-page-lead{ margin-bottom: 22px; }
    .kck-page-hero .kck-chip{ font-size:var(--fs-xs); padding: 6px 11px; }
}

/* ---------- Light page hero（与 .breadcrumb-area 同一视觉语言）----------
   用于：产品列表 / 关于 / 联系 / 材料 / 搜索（头部改浅色，不再用深底白字）。
   其余 hero 页（FAQ / 认证 / 系列 / 门店 / professionals 等）不受影响。 */
.kck-page-hero--light{
    background: var(--kck-bg, #fbfaf7);
    color: var(--kck-ink, #1f2230);
    padding: 50px 0 46px;   /* 与 .breadcrumb-ptb-1 同节奏 */
}
.kck-page-hero--light .kck-eyebrow{
    color: var(--kck-gold-600, #b88a2e);   /* 金 400 在米白底上对比不足，用深一档 */
    font-size:var(--fs-xs);
    margin-bottom: 8px;
}
.kck-page-hero--light h1{
    font-size: clamp(1.5rem, 3vw, 2.25rem);   /* 与 .breadcrumb-title h1 完全一致 */
    color: var(--kck-navy, #1a1f3d);
    margin: 0 0 10px;
}
.kck-page-hero--light .kck-page-lead{
    color: var(--kck-ink-soft, #565b6e);
    font-size: var(--fs-base, .875rem);
    line-height: 1.7;
    margin: 0;
}
@media (max-width: 991px){
    .kck-page-hero--light{ padding: 34px 0 30px; }
}
@media (max-width: 640px){
    .kck-page-hero--light{ padding: 30px 0 26px; }
}

/* ---------- Dark CTA band (shared by collections / certifications) ---------- */
.kck-cta-band{
    position: relative;
    overflow: hidden;
    margin-top: 76px;
    background:
        radial-gradient(100% 140% at 12% 0%, rgba(212, 168, 67, .20) 0%, rgba(212, 168, 67, 0) 60%),
        linear-gradient(150deg, var(--kck-navy-deep, #0f1430) 0%, var(--kck-navy, #1a1f3d) 100%);
    color: #fff;
}
.kck-cta-band .container{ position: relative; z-index: 2; max-width: 1200px; }
.kck-cta-band-inner{ padding: 82px 0; max-width: 740px; }
.kck-cta-band-inner .kck-eyebrow{ margin-bottom: 16px; }
.kck-cta-band-inner h2{

    font-optical-sizing: auto;
    font-weight:var(--fw-semibold);
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.14;
    letter-spacing: -.01em;
    color: #fff;
    margin: 0 0 16px;
}
.kck-cta-band-inner p{
    font-size:var(--fs-md);
    line-height: 1.72;
    color: rgba(255, 255, 255, .78);
    margin: 0 0 30px;
    max-width: 60ch;
}
.kck-cta-actions{ display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 991px){
    .kck-cta-band{ margin-top: 54px; }
    .kck-cta-band-inner{ padding: 60px 0; }
}

/* ---------- Buttons shared ---------- */
.kck-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 6px;

  font-size: 13px;
  font-weight:var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .25s var(--kck-ease), color .25s var(--kck-ease),
              border-color .25s var(--kck-ease), transform .25s var(--kck-ease);
}
.kck-btn--gold{ background: var(--kck-gold, #D4A843); color: var(--kck-navy-deep); }
.kck-btn--gold:hover{ background: #e0b455; transform: translateY(-2px); }
.kck-btn--navy{ background: var(--kck-navy, #1a1f3d); color: #fff; }
.kck-btn--navy:hover{ background: var(--kck-navy-deep); transform: translateY(-2px); }
.kck-btn--ghost{ background: transparent; color: var(--kck-navy, #1a1f3d); border-color: var(--kck-hairline-strong); }
.kck-btn--ghost:hover{ border-color: var(--kck-gold, #D4A843); color: var(--kck-gold, #D4A843); }