/* ============================================================
   智学云 · light-flow.css  v3
   全站轻量流式统一层（由 nav.js 在 theme.css 之后注入）
   ------------------------------------------------------------
   方向：Option C「深空蓝白」—— 高对比、克制金、层次分明的
         高端 SaaS 浅色系统；在统一浅底之上加入极淡 Aurora 呼吸光，
         让页面摆脱平淡、呈现深度与质感。
   v3 增量（在 v2 之上，纯 CSS、零 HTML/JS 改动）：
     · 把站点已有的「金光跟随 / 标题描金 / 入场揭示」动效扩展到
       全部 light-flow 卡片类，消除「部分卡片不动」的割裂感；
     · 卡片静止态双层内描边、标题极克制描金渐变、soft 区微光网格、
       CTA 玻璃拟态，进一步拉满精致度与深度。
   约束：不改 HTML、不改功能逻辑、不进入 workspace / app 后台页。
   ============================================================ */

:root{
  /* 浅色表面色阶（与品牌藏青/暗金协调） */
  --lf-bg-0:#ffffff;          /* 主底 */
  --lf-bg-1:#f0f4fa;          /* 模块交替底：比旧 #f7f9fd 更冷、对比更明显 */
  --lf-bg-2:#e6edf7;          /* 页脚/CTA 锚点底 */
  --lf-line:#d4dde8;          /* 分隔线 */
  --lf-line-soft:#e4ebf5;     /* 轻分隔 */
  --lf-gold:#b8893e;
  --lf-gold-deep:#8a6428;
  --lf-ink:#0d1730;
  --lf-ink-2:#3a445c;
  --lf-muted:#5a6478;
  --lf-shadow:0 6px 28px rgba(13,23,48,.07);
  --lf-shadow-hover:0 16px 48px rgba(13,23,48,.14);
  --lf-radius:18px;

  /* 区块节奏 */
  --lf-section-py:96px;
  --lf-section-py-sm:68px;
  --lf-head-mb:64px;
}

/* ---------- 1. 区块节奏、浅色表面与 Aurora 深度 ---------- */
.section{
  position:relative;
  padding:var(--lf-section-py) 0;
  background:var(--lf-bg-0);
  border-top:1px solid transparent;
  overflow:hidden;
}
/* 交替模块底：与纯白形成清晰但克制的冷暖对比 */
.section.soft,.section--soft{
  background:var(--lf-bg-1);
  border-top:none;
  border-bottom:none;
}
/* 连续 section 之间用实色细线分隔，强化模块边界 */
.section + .section{border-top-color:var(--lf-line)}
.section > .wrap{position:relative;z-index:1}

/* 极淡 Aurora 呼吸光：仅 transform/opacity 动画，GPU 友好 */
.section::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(1200px 900px at 15% 25%,rgba(13,23,48,.035),transparent 60%),
    radial-gradient(1000px 800px at 85% 75%,rgba(184,137,62,.045),transparent 58%);
  will-change:transform,opacity;
  animation:lfAurora 26s ease-in-out infinite alternate;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){.section::before{animation:none}}
@keyframes lfAurora{
  0%{transform:translate(-16px,-10px) rotate(0deg);opacity:.72}
  100%{transform:translate(16px,10px) rotate(1.5deg);opacity:1}
}

/* ---------- 2. 字体层级与视觉重心 ---------- */
h1,h2,h3,h4,h5,h6{
  color:var(--lf-ink);
  font-weight:700;
  line-height:1.22;
}
.sec-head{
  max-width:800px;
  margin:0 auto var(--lf-head-mb);
  text-align:center;
}
.sec-head h2,.sec-head h3{
  font-family:var(--font-serif,'Noto Serif SC',serif);
  font-size:clamp(30px,3.4vw,42px);
  letter-spacing:.01em;
  word-break:keep-all;
}
.sec-head p,.sec-head .sub{
  margin-top:18px;
  font-size:17px;
  line-height:1.85;
  color:var(--lf-muted);
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-sans,'Noto Sans SC',sans-serif);
  font-size:13px;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--lf-gold-deep);
  text-transform:uppercase;
  margin-bottom:16px;
}
.eyebrow::before{
  content:'';
  width:28px;
  height:2px;
  background:linear-gradient(90deg,var(--lf-gold),rgba(184,137,62,.55));
  border-radius:2px;
}
.eyebrow::after{
  content:'';
  width:28px;
  height:2px;
  background:linear-gradient(90deg,var(--lf-gold),rgba(184,137,62,.55));
  border-radius:2px;
}
.sec-head.center .eyebrow::before,.sec-head.center .eyebrow::after,.hero-inner .eyebrow::before,.hero-inner .eyebrow::after{display:none}

/* 正文与长文可读性 */
.lede,.prose p,.doc p,main .section p{
  line-height:1.85;
  color:var(--lf-ink-2);
}
.prose h2,.doc h2,.article h2{
  font-family:var(--font-serif,'Noto Serif SC',serif);
  font-size:clamp(24px,2.6vw,32px);
  margin:44px 0 18px;
  color:var(--lf-ink);
  word-break:keep-all;
}
.prose h3,.doc h3,.article h3{
  font-size:clamp(20px,2.1vw,26px);
  margin:32px 0 14px;
  color:var(--lf-ink);
  word-break:keep-all;
}
.prose ul,.doc ul,.article ul,.checklist{
  margin:16px 0;
  padding-left:1.4em;
}
.prose li,.doc li,.article li,.checklist li{
  margin-bottom:12px;
  line-height:1.75;
  color:var(--lf-ink-2);
}

/* ---------- 3. 卡片与内容模块：材质、悬浮与金边 ---------- */
.card,.pcard,.adv,.cert,.article,.case,.caseidx,.dl-card,.feature,.role,.scenario,.step,.tier,.contact-form-card,.login-card,.spec,.ecard,.bpoint,.backer,.award,.logo-cell,.ovalue .ov,.stat{
  background:var(--lf-bg-0);
  border:1px solid var(--lf-line-soft);
  border-radius:var(--lf-radius);
  box-shadow:var(--lf-shadow);
  transition:transform .38s var(--ease,cubic-bezier(.22,.61,.36,1)),
             box-shadow .38s var(--ease,cubic-bezier(.22,.61,.36,1)),
             border-color .38s var(--ease,cubic-bezier(.22,.61,.36,1));
}
.card:hover,.pcard:hover,.adv:hover,.cert:hover,.article:hover,.case:hover,.caseidx:hover,.dl-card:hover,.feature:hover,.role:hover,.scenario:hover,.step:hover,.tier:hover,.contact-form-card:hover,.login-card:hover,.spec:hover,.ecard:hover,.bpoint:hover,.backer:hover,.award:hover,.logo-cell:hover,.ovalue .ov:hover{
  transform:translateY(-6px);
  box-shadow:var(--lf-shadow-hover);
  border-color:var(--lf-gold);
}
/* stat 作为展示卡，只提升静态质感，不位移（避免数字跳动感） */
.stat{transition:border-color .35s,box-shadow .35s}
.stat:hover{border-color:var(--lf-gold);box-shadow:var(--lf-shadow-hover)}

/* ---------- 4. CTA 行动模块：强化视觉重心 ---------- */
.cta,.cta.reveal{
  position:relative;
  background:var(--lf-bg-0);
  border:1px solid var(--lf-line-soft);
  border-top:4px solid var(--lf-gold);
  border-radius:var(--lf-radius);
  box-shadow:var(--lf-shadow);
  padding:56px 40px;
  text-align:center;
  overflow:hidden;
}
.cta h2,.cta.reveal h2{
  font-family:var(--font-serif,'Noto Serif SC',serif);
  font-size:clamp(26px,3vw,36px);
  color:var(--lf-ink);
}
.cta p,.cta.reveal p{
  max-width:640px;
  margin:16px auto 0;
  font-size:16.5px;
  color:var(--lf-muted);
}

/* ---------- 5. 按钮与链接：一致过渡 ---------- */
.btn,.btn-primary,.btn-gold,.btn-ghost,.btn-light,.btn-outline,.button{
  transition:transform .28s var(--ease,cubic-bezier(.22,.61,.36,1)),
             box-shadow .28s var(--ease,cubic-bezier(.22,.61,.36,1)),
             background .28s,color .28s,border-color .28s;
}
a:not(.btn):not(.nav-link):not(.logo):not(.sb-item){
  transition:color .22s;
}

/* ---------- 6. 统计数字模块 ---------- */
.stats{
  display:grid;
  gap:20px;
}
.stat{
  text-align:center;
  padding:30px 18px;
}
.stat b{
  font-family:var(--font-serif,'Noto Serif SC',serif);
  font-size:clamp(32px,3.2vw,44px);
  color:var(--lf-ink);
  line-height:1.1;
}
.stat em{font-style:normal;color:var(--lf-gold-deep);margin-left:2px}
.stat span{display:block;margin-top:10px;font-size:13.5px;color:var(--lf-muted)}

/* ---------- 7. 表格与列表可读性 ---------- */
.tbl,table{border-collapse:separate;border-spacing:0}
.tbl th,.tbl td,table th,table td{padding:13px 15px;line-height:1.65}
.checklist li{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;font-size:15.5px}
.checklist .ck{flex:none;margin-top:2px}

/* ---------- 8. 标签 chip ---------- */
.tag,.tags span,.chip{
  border:1px solid var(--lf-line-soft);
  transition:background .22s,border-color .22s,color .22s;
}
.tag:hover,.tags span:hover,.chip:hover{
  background:var(--lf-bg-1);
  border-color:var(--lf-gold);
  color:var(--lf-ink);
}

/* ---------- 9. 页脚：作为浅底视觉落点 ---------- */
footer,.foot{
  background:var(--lf-bg-2)!important;
  color:var(--lf-ink-2)!important;
  border-top:1px solid var(--lf-line)!important;
}
footer h5,footer h4,footer .logo,footer strong{color:var(--lf-ink)!important}
footer a{color:var(--lf-ink-2)!important;transition:color .22s}
footer a:hover{color:var(--lf-gold-deep)!important}
footer .foot-bottom{border-top:1px solid var(--lf-line)!important;color:var(--lf-muted)!important}
footer .foot-note{color:var(--lf-muted)!important}

/* ---------- 10. v3 高端增量：金光跟随 / 标题描金 / 双层描边 / 网格 / 玻璃 CTA ---------- */

/* 10.1 把站点已有的「光标金光跟随」扩展到所有 light-flow 卡片（含此前未覆盖类）
        —— 直接作用于卡片选择器组（无需 HTML 加类），与 motion.css 同源、零 HTML 改动。
        注：用 ::after 避免与 motion.css 在 .pcard 等上的 ::before 光泽冲突。 */
.card,.pcard,.adv,.cert,.article,.case,.caseidx,.dl-card,.feature,.role,.scenario,.step,.tier,.contact-form-card,.login-card,.spec,.ecard,.bpoint,.backer,.award,.logo-cell,.ovalue .ov{
  position:relative;overflow:hidden;
}
.card::after,.pcard::after,.adv::after,.cert::after,.article::after,.case::after,.caseidx::after,.dl-card::after,.feature::after,.role::after,.scenario::after,.step::after,.tier::after,.contact-form-card::after,.login-card::after,.spec::after,.ecard::after,.bpoint::after,.backer::after,.award::after,.logo-cell::after,.ovalue .ov::after{
  content:'';
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%),rgba(184,137,62,.12),transparent 42%);
  opacity:0;transition:opacity .45s var(--ease,cubic-bezier(.22,.61,.36,1));
}
.card:hover::after,.pcard:hover::after,.adv:hover::after,.cert:hover::after,.article:hover::after,.case:hover::after,.caseidx:hover::after,.dl-card:hover::after,.feature:hover::after,.role:hover::after,.scenario:hover::after,.step:hover::after,.tier:hover::after,.contact-form-card:hover::after,.login-card:hover::after,.spec:hover::after,.ecard:hover::after,.bpoint:hover::after,.backer:hover::after,.award:hover::after,.logo-cell:hover::after,.ovalue .ov:hover::after{
  opacity:1;
}
.card > *,.pcard > *,.adv > *,.cert > *,.article > *,.case > *,.caseidx > *,.dl-card > *,.feature > *,.role > *,.scenario > *,.step > *,.tier > *,.contact-form-card > *,.login-card > *,.spec > *,.ecard > *,.bpoint > *,.backer > *,.award > *,.logo-cell > *,.ovalue .ov > *{
  position:relative;z-index:2;
}

/* 10.2 标题极克制描金渐变（仅大标题 .sec-head h2，静止偏藏青、hover 金；缓慢流光但克制）
        —— 比纯色更「贵」，且不影响正文可读性 */
.sec-head h2{
  background:linear-gradient(100deg,var(--lf-ink) 0%,var(--lf-ink) 42%,var(--lf-gold-deep) 55%,var(--lf-ink) 70%,var(--lf-ink) 100%);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  transition:background-position .8s var(--ease,cubic-bezier(.22,.61,.36,1));
}
.sec-head h2:hover{background-position:100% center}

/* 10.3 卡片静止态双层内描边：1px 浅边 + 内发丝高光，精致而不抢戏 */
.card,.pcard,.adv,.cert,.article,.case,.caseidx,.dl-card,.feature,.role,.scenario,.step,.tier,.contact-form-card,.login-card,.spec,.ecard,.bpoint,.backer,.award,.logo-cell,.ovalue .ov,.stat{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 4px rgba(13,23,48,.04),var(--lf-shadow);
}
.card:hover,.pcard:hover,.adv:hover,.cert:hover,.article:hover,.case:hover,.caseidx:hover,.dl-card:hover,.feature:hover,.role:hover,.scenario:hover,.step:hover,.tier:hover,.contact-form-card:hover,.login-card:hover,.spec:hover,.ecard:hover,.bpoint:hover,.backer:hover,.award:hover,.logo-cell:hover,.ovalue .ov:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 4px rgba(13,23,48,.05),var(--lf-shadow-hover);
}

/* 10.4 soft 区极淡微光网格：纯静态 background-image，零动画、零性能负担；
        给「工程感/精密感」，比纯色块更耐看 */
.section.soft::after,.section--soft::after{
  content:'';
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(13,23,48,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(13,23,48,.022) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 78%);
}
.section > .wrap{position:relative;z-index:1}

/* 10.5 CTA 玻璃拟态：半透明白 + 模糊，叠在 Aurora 上更显「层」
        —— 不支持 backdrop-filter 时回退为实底（见下方 @supports 守卫） */
.cta,.cta.reveal{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(14px) saturate(118%);
          backdrop-filter:blur(14px) saturate(118%);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cta,.cta.reveal{background:var(--lf-bg-0)}
}

/* 10.6 修复：hover 位移不与 .reveal 未入场态冲突（避免卡片在揭示前突跳） */
.reveal:not(.in).card,
.reveal:not(.in).pcard,
.reveal:not(.in).adv,
.reveal:not(.in).cert,
.reveal:not(.in).article,
.reveal:not(.in).case,
.reveal:not(.in).feature,
.reveal:not(.in).role,
.reveal:not(.in).scenario,
.reveal:not(.in).step,
.reveal:not(.in).tier,
.reveal:not(.in).spec,
.reveal:not(.in).ecard{
  transform:translateY(24px) scale(.985);
}

/* ---------- 11. 响应式节奏 ---------- */
@media(max-width:980px){
  :root{--lf-section-py:var(--lf-section-py-sm)}
  .sec-head{margin-bottom:46px}
  .sec-head h2,.sec-head h3{font-size:clamp(26px,4.8vw,34px)}
  .cta,.cta.reveal{padding:44px 28px}
}
@media(max-width:560px){
  .wrap{padding:0 20px}
  .prose h2,.doc h2,.article h2{margin-top:34px}
  .stats{grid-template-columns:repeat(2,1fr)}
}

/* ---------- 11. 尊重减少动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  .card,.pcard,.adv,.cert,.article,.case,.caseidx,.dl-card,.feature,.role,.scenario,.step,.tier,.contact-form-card,.login-card,.spec,.ecard,.bpoint,.backer,.award,.logo-cell,.ovalue .ov,.stat,.btn,.button,a,.tag,.chip{
    transition:none!important;
  }
  .section::before{animation:none}
  .card::after,.pcard::after,.adv::after,.cert::after,.article::after,.case::after,.caseidx::after,.dl-card::after,.feature::after,.role::after,.scenario::after,.step::after,.tier::after,.contact-form-card::after,.login-card::after,.spec::after,.ecard::after,.bpoint::after,.backer::after,.award::after,.logo-cell::after,.ovalue .ov::after{display:none!important}
  .section.soft::after,.section--soft::after{display:none!important}
  .sec-head h2{background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;color:var(--lf-ink)!important}
}