/* FlipGo 品牌方案 · 皮肤
   银灰 + 墨 + 纸白，三色。直角。语言：镌刻、网孔、金属。
   主手法：出血克制，用「镌刻」大号步骤数字 + 紧密材质画廊；标题一层极淡金属渐变（只在本页）。
   招牌动作：推导三步（本页唯一的钉住场景：rail step 模式，条目叠在同一格里交叉淡入，像翻方案）+ 画廊 hover 微缩放。 */

html[data-skin="flipgo-brand"]{
  --fb-silver:#C3C4C8;
  --fb-ink:#16181B;
  --fb-paper:#F4F4F2;
  --ink:var(--fb-ink);
  --mute:color-mix(in srgb,var(--fb-ink) 62%,var(--fb-silver));
  --line:color-mix(in srgb,var(--fb-ink) 14%,var(--fb-paper));
  --skin-paper:var(--fb-paper);
  --skin-ground:var(--fb-silver);
  --skin-ground-fg:var(--fb-ink);
  --skin-accent:var(--fb-ink);
  --skin-stretch:74%;
  --fb-engrave:color-mix(in srgb,var(--fb-silver) 72%,var(--fb-ink));
  --fb-lip:0 1px 0 #fff,0 -1px 0 color-mix(in srgb,var(--fb-ink) 22%,transparent);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"])[data-skin="flipgo-brand"]{
    --ink:var(--fb-paper);
    --mute:color-mix(in srgb,var(--fb-silver) 78%,var(--fb-ink));
    --line:color-mix(in srgb,var(--fb-silver) 16%,var(--fb-ink));
    --skin-paper:var(--fb-ink);
    --skin-accent:var(--fb-silver);
    --fb-engrave:var(--fb-silver);
    --fb-lip:0 -1px 0 #000,0 1px 0 color-mix(in srgb,var(--fb-paper) 16%,transparent);
  }
}
:root[data-theme="dark"][data-skin="flipgo-brand"]{
  --ink:var(--fb-paper);
  --mute:color-mix(in srgb,var(--fb-silver) 78%,var(--fb-ink));
  --line:color-mix(in srgb,var(--fb-silver) 16%,var(--fb-ink));
  --skin-paper:var(--fb-ink);
  --skin-accent:var(--fb-silver);
  --fb-engrave:var(--fb-silver);
  --fb-lip:0 -1px 0 #000,0 1px 0 color-mix(in srgb,var(--fb-paper) 16%,transparent);
}

/* 开场：品牌名一层极淡的金属高光（开场底色浅/深色模式都是银灰，字是墨） */
html[data-skin="flipgo-brand"] .chero__brand{align-self:flex-start;
  background:linear-gradient(104deg,var(--fb-ink) 0%,var(--fb-ink) 30%,color-mix(in srgb,var(--fb-ink) 62%,var(--fb-silver)) 47%,var(--fb-ink) 60%,color-mix(in srgb,var(--fb-ink) 88%,var(--fb-silver)) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ---------- 01 推导：钉住三步 ---------- */
.fb-derive{--rail-len:270vh;--scene-after:clamp(24px,3vw,48px);margin-top:clamp(56px,7vw,104px)}
.fb-derive .tag{background:var(--skin-paper)}
.fb-step{display:grid;grid-template-columns:minmax(0,1fr);row-gap:10px}
.fb-step__no{font-family:"Archivo",var(--cn);font-weight:800;font-stretch:72%;font-size:clamp(104px,15vw,180px);line-height:.78;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--fb-engrave);text-shadow:var(--fb-lip)}
.fb-step__label{font-family:var(--cn);font-weight:800;font-size:clamp(26px,2.8vw,42px);line-height:1.2;margin-top:clamp(8px,1.2vw,18px)}
.fb-step__cap{font-family:var(--mono);font-size:12px;letter-spacing:.08em;line-height:1.5;color:var(--mute)}
/* 静态（无 JS / reduced-motion）：三张竖排，完整可读 */
.fb-derive .rail__view{overflow:visible;scroll-snap-type:none;padding-bottom:0}
.fb-derive .rail__track{flex-direction:column;width:auto;gap:clamp(40px,5vw,64px)}
.fb-derive .rail__item{width:100%}
/* 动效：条目叠在同一格，上一张淡出、下一张浮进来 */
.rail-pin .fb-derive[data-rail] .rail__track{display:grid;transform:none;transition:none}
.rail-pin .fb-derive .rail__item{grid-area:1 / 1;opacity:0;transform:translateY(22px) scale(.985);transition:opacity .6s ease,transform .8s var(--out);pointer-events:none}
.rail-pin .fb-derive .rail__item.is-past{opacity:0;transform:translateY(-14px) scale(.985)}
.rail-pin .fb-derive .rail__item.is-on{opacity:1;transform:none;pointer-events:auto}
.rail-pin .fb-derive .rail__steps > *{transform:translateY(.4em)}
.rail-pin .fb-derive .rail__steps > .is-on{transform:none}
.rail-pin .fb-derive .rail__bar{left:0;right:auto;width:calc(33.333% - 16px);color:var(--ink)}

/* ---------- 02 设计考量：大字引文 ---------- */
.fb-quote{padding-top:clamp(40px,6vw,96px);padding-bottom:clamp(96px,11vw,170px)}
.fb-quote__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px clamp(16px,2.4vw,32px);border-top:1px solid var(--ink);padding-top:16px}
.fb-quote__h{grid-column:1 / span 3;display:flex;flex-direction:column;gap:6px;color:var(--mute)}
.fb-quote__h b{font-weight:400;font-size:11px}
.fb-quote__q{grid-column:4 / -1;margin:0}
.fb-quote__q p{font-family:var(--cn);font-weight:800;font-size:clamp(30px,4.2vw,50px);line-height:1.28;letter-spacing:-.005em;text-wrap:balance}
.fb-quote__rest{grid-column:4 / span 7;margin-top:clamp(12px,2vw,28px)}
.fb-quote__p{font-size:clamp(18px,1.6vw,22px);line-height:1.8;color:var(--mute);max-width:32em}
.fb-quote__p strong{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--fb-silver);text-decoration-thickness:.32em;text-underline-offset:-.12em;text-decoration-skip-ink:none}

/* ---------- 03 应用：紧密 4 列材质画廊 ---------- */
.fb-apps{--stagger:60ms}
.fb-apps__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.fb-apps__grid .pic .pic__btn{background:color-mix(in srgb,var(--fb-silver) 30%,transparent)}
.fb-apps__grid .tag{background:var(--skin-paper);font-size:10.5px;padding:5px 9px 4px}
.fb-apps__grid .pic--tag-in figcaption{left:10px;bottom:10px;max-width:calc(100% - 20px)}
/* 第 12 格：网孔金属板 + 索引 */
.fb-apps__end{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:16px;padding:clamp(14px,1.6vw,22px);aspect-ratio:16 / 9;background-color:var(--fb-silver);color:var(--fb-ink);
  background-image:radial-gradient(circle,color-mix(in srgb,var(--fb-ink) 22%,transparent) 0 1.15px,transparent 1.6px);background-size:8px 8px;background-position:4px 4px}
.fb-apps__end .mono{display:inline-flex;align-items:baseline;gap:10px;background:var(--fb-silver);padding:4px 8px 3px;margin:-4px -8px}
.fb-apps__end .mono b{font-family:"Archivo",var(--cn);font-weight:800;font-stretch:74%;font-size:clamp(28px,2.6vw,40px);letter-spacing:0;line-height:1}
.fb-apps__end .btn{color:var(--fb-ink);border-color:var(--fb-ink);background:var(--fb-silver)}

@media (max-width: 899px){
  .fb-derive{--rail-len:250vh}
  .fb-step{grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:end}
  .fb-step__no{font-size:clamp(76px,24vw,120px);grid-row:1 / span 2}
  .fb-step__label{margin-top:0;font-size:24px}
  .rail-pin .fb-derive .rail__bar{width:auto;right:0}
  .fb-quote__h{grid-column:1 / -1;flex-direction:row;gap:10px}
  .fb-quote__q,.fb-quote__rest{grid-column:1 / -1}
  .fb-apps__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .fb-apps__grid .tag{font-size:9.5px;padding:4px 7px 3px}
  .fb-apps__grid .pic--tag-in figcaption{left:6px;bottom:6px;max-width:calc(100% - 12px)}
  .fb-apps__end .btn{font-size:12px}
}