@charset "UTF-8";
/* =========================================================
   發財繡業 · 刺绣发财·鎏金工厂模板
   色系：石墨黑 #16181d / 暖米白 #f1eee7 / 香槟金 #c9a86e / 深绯红 #a2372e（仅点缀）
   定位：高端正规工厂——大面积碳灰+香槟金，红色只留给产品本身
   覆写系统变量 + 重样式：导航 / Hero / 统计 / 材质故事 / 引语 / CTA / 页脚
   ========================================================= */
:root{
  --bg:#16181d; --bg-2:#101216;
  --surface:rgba(241,238,231,.045); --surface-2:rgba(241,238,231,.085);
  --border:rgba(201,168,110,.22); --border-strong:rgba(201,168,110,.45);
  --text:#f1eee7; --muted:#b5b0a4; --faint:#8b8679;
  --c1:#c9a86e; --c2:#a2372e; --c3:#e0c79a;
  --grad:linear-gradient(115deg,#c9a86e 0%,#a8834e 100%);
  --fc-cream:#f1eee7; --fc-red:#a2372e; --fc-gold:#c9a86e; --fc-green:#23262d;
  --fc-serif:"Noto Serif SC","Songti SC",STSong,Georgia,serif;
}
body{background:var(--bg);color:var(--text);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif}

/* ---------- 金线装饰分隔 ---------- */
.fc-stitch{display:flex;align-items:center;gap:12px;max-width:min(1180px,92vw);margin:0 auto;padding:6px 0}
.fc-stitch::before,.fc-stitch::after{content:"";flex:1;border-top:2px dashed rgba(201,168,110,.38)}
.fc-stitch i{width:8px;height:8px;border-radius:50%;background:var(--fc-gold);box-shadow:0 0 10px rgba(201,168,110,.7)}

/* ---------- 导航（石墨底金线） ---------- */
.q-header{background:rgba(16,18,22,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.q-logo__mark,.q-logo__text{font-family:var(--fc-serif);color:var(--fc-cream)}
.q-logo__text b{color:var(--fc-red)}
.q-logo__sub{color:var(--fc-gold)}
.q-nav__link{color:var(--muted)}
.q-nav__link:hover,.q-nav__link.is-active{color:var(--fc-gold)}
.q-header__phone{background:var(--fc-red);color:var(--fc-cream);border-radius:999px;padding:9px 18px;font-weight:600;transition:.3s}
.q-header__phone:hover{background:#832a23;transform:translateY(-1px)}

/* ---------- 字幕跑马灯（石墨底香槟金） ---------- */
.q-ticker{background:#1a1d23;border-bottom:1px solid var(--border);color:var(--fc-gold)}
.q-ticker__track i{background:var(--fc-red)}

/* ---------- Hero：發財贴片在左，文案在右 ---------- */
.q-hero{overflow:hidden}
.q-hero__slider+.q-container{position:relative;z-index:2}
.q-hero__slider+.q-container .q-hero__copy{margin-left:auto;text-align:right}
.q-hero__slider+.q-container .q-hero__tags{justify-content:flex-end}
.q-hero__slider+.q-container .q-hero__cta{justify-content:flex-end}
.q-hero__slider+.q-container .q-kicker{display:inline-block;background:rgba(201,168,110,.12);border:1px solid var(--border-strong);color:var(--fc-gold);padding:6px 14px;border-radius:999px;letter-spacing:.2em}
.q-hero__mask{background:linear-gradient(270deg,rgba(22,24,29,.94) 0%,rgba(22,24,29,.72) 42%,rgba(22,24,29,.12) 75%,rgba(22,24,29,0) 100%)}
.q-hero__dots button{background:rgba(241,238,231,.35)}
.q-hero__dots button.on{background:var(--fc-gold)}
.q-hero__title{font-family:var(--fc-serif);text-shadow:0 4px 24px rgba(0,0,0,.5)}
.q-hero__title em{font-style:normal;color:#b8402f;text-shadow:0 0 1px #7c271c,0 2px 0 #7c271c,0 3px 0 #672018,0 10px 26px rgba(162,55,46,.45)}
.q-kicker{color:var(--fc-gold);letter-spacing:.28em}
.q-hero__sub{color:var(--muted)}
.q-hero__tags span{border:1px dashed var(--border-strong);background:rgba(201,168,110,.07)}

/* ---------- 按钮（香槟金实底 → 亮金 hover） ---------- */
.q-btn--grad{background:var(--grad);color:#17130b;border:1px solid rgba(224,199,154,.6);box-shadow:0 10px 26px -12px rgba(201,168,110,.55)}
.q-btn--grad:hover{background:linear-gradient(115deg,#d8bc86 0%,#bb9660 100%);transform:translateY(-2px)}
.q-btn--ghost{border:1px solid var(--border-strong);color:var(--fc-gold)}

/* ---------- 统计（金线顶边卡片） ---------- */
.q-stats{background:linear-gradient(180deg,var(--bg) 0%,#1a1d23 100%)}
.q-stats .stat,.q-stats__item{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--fc-gold);border-radius:var(--radius)}
.q-stats .stat b,.q-stats__num{font-family:var(--fc-serif);color:var(--fc-gold)}
.q-stats .stat span,.q-stats__label{color:var(--muted)}

/* ---------- 材质故事（本模板自带样式：base 无 ht-* 需自绘） ---------- */
.ht-story{padding:84px 0}
.ht-story__inner{width:min(1180px,92vw);margin:0 auto}
.ht-sec-head{text-align:center;margin-bottom:56px}
.ht-kick{font-size:12px;letter-spacing:.32em;color:var(--fc-gold);font-weight:600;text-transform:uppercase}
.ht-sec-head h2{font-family:var(--fc-serif);font-size:clamp(30px,4.4vw,48px);line-height:1.2;margin:16px 0 10px}
.ht-sec-head h2 em{font-style:normal;color:#b8402f;text-shadow:0 2px 0 #672018}
.ht-sec-head p{color:var(--muted)}
.ht-story__item{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;margin-bottom:72px}
.ht-story__item.is-rev .ht-story__media{order:2}
.ht-story__media{position:relative}
.ht-story__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border);box-shadow:0 30px 60px -30px rgba(0,0,0,.75)}
.ht-story__media::after{content:"";position:absolute;inset:14px;border:2px dashed rgba(201,168,110,.4);border-radius:calc(var(--radius) - 6px);pointer-events:none}
.ht-story__body h3{font-family:var(--fc-serif);font-size:26px;margin-bottom:14px}
.ht-story__body h3::before{content:"◆";color:var(--fc-gold);margin-right:10px;font-size:18px}
.ht-story__body p{color:var(--muted);line-height:1.9;font-size:15.5px}
.ht-story__stat{display:inline-flex;align-items:baseline;gap:10px;margin-top:22px;padding:14px 22px;background:var(--surface);border:1px solid var(--border);border-radius:14px}
.ht-story__stat b{font-family:var(--fc-serif);font-size:30px;color:var(--fc-gold)}
.ht-story__stat small{color:var(--fc-gold);letter-spacing:.1em}

/* ---------- 工艺引语 ---------- */
.ht-quote{padding:70px 0;background:#1a1d23;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ht-quote__inner{width:min(860px,92vw);margin:0 auto;text-align:center}
.ht-quote blockquote{font-family:var(--fc-serif);font-size:clamp(20px,2.8vw,28px);line-height:1.7;color:var(--fc-cream)}
.ht-quote blockquote::before{content:"❝";display:block;color:var(--fc-gold);font-size:34px;margin-bottom:10px}
.ht-quote__by{margin-top:18px;color:var(--fc-gold);letter-spacing:.18em;font-size:14px}

/* ---------- CTA（香槟金底深字，沉稳大气） ---------- */
.q-cta{background:linear-gradient(135deg,#c9a86e 0%,#a8834e 100%);border:1px solid rgba(224,199,154,.7);border-radius:calc(var(--radius) + 6px);padding:64px 8vw;text-align:center;position:relative;overflow:hidden}
.q-cta::before{content:"發";position:absolute;right:-24px;bottom:-40px;font-family:var(--fc-serif);font-size:220px;color:rgba(23,19,11,.09);transform:rotate(-8deg)}
.q-cta h2{font-family:var(--fc-serif);font-size:clamp(28px,4vw,44px);color:#17130b}
.q-cta p{color:rgba(23,19,11,.78);margin-top:14px}
.q-cta p strong{color:#4d3811}
.q-cta .q-btn--grad{background:#17130b;color:var(--fc-gold);border-color:#17130b;box-shadow:0 10px 26px -12px rgba(23,19,11,.6)}
.q-cta .q-btn--grad:hover{background:#2a2216;color:#e0c79a;transform:translateY(-2px)}

/* ---------- 页脚 ---------- */
.q-footer{background:#0c0e11;border-top:1px solid var(--border);color:var(--muted)}
.q-footer a:hover{color:var(--fc-gold)}

/* ---------- 通用标题 em（深绯红立体） ---------- */
.q-title em,.q-desc em{font-style:normal;color:#b8402f;text-shadow:0 2px 0 #672018}
.q-title{font-family:var(--fc-serif)}

/* ---------- 动效 ---------- */
.q-reveal{opacity:0;transform:translateY(26px);transition:.9s cubic-bezier(.2,.7,.2,1)}
.q-reveal.in{opacity:1;transform:none}
.fc-float{animation:fcFloat 5s ease-in-out infinite}
@keyframes fcFloat{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-10px) rotate(.6deg)}}
@media (max-width:860px){
  .ht-story__item{grid-template-columns:1fr;gap:26px}
  .ht-story__item.is-rev .ht-story__media{order:0}
  .q-hero__slider+.q-container .q-hero__copy{margin-left:0;text-align:left}
  .q-hero__slider+.q-container .q-hero__tags,.q-hero__slider+.q-container .q-hero__cta{justify-content:flex-start}
}

/* =========================================================
   首屏：代码动效「發財」割绒贴片（main.js 注入 SVG，本文件只管样式与关键帧）
   流程：针沿金色针迹走 → 發/財 描边针迹 → 绒面填充起绒 → RICH 金字 → 循环
   ========================================================= */
.fc-patch-wrap{width:100%;max-width:560px;margin:0 auto;display:block;filter:drop-shadow(0 30px 50px rgba(0,0,0,.55))}
.fc-patch{width:100%;height:auto;display:block;animation:fcBob 5.2s ease-in-out infinite}
@keyframes fcBob{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-9px) rotate(.4deg)}}

/* 绣字：先描边（针迹）后填充（起绒） */
.fc-zi{fill:#b7302a;stroke:#8f221b;stroke-width:4;fill-opacity:0;stroke-dasharray:720;stroke-dashoffset:720}
.fc-zi--1{animation:fcZi1 9s ease-in-out infinite}
.fc-zi--2{animation:fcZi2 9s ease-in-out infinite}
@keyframes fcZi1{
  0%{stroke-dashoffset:720;fill-opacity:0}
  5%{stroke-dashoffset:620}
  46%{stroke-dashoffset:0;fill-opacity:0}
  58%{fill-opacity:0}
  70%{fill-opacity:1}
  92%{stroke-dashoffset:0;fill-opacity:1}
  97%,100%{stroke-dashoffset:720;fill-opacity:0}
}
@keyframes fcZi2{
  0%{stroke-dashoffset:720;fill-opacity:0}
  10%{stroke-dashoffset:620}
  50%{stroke-dashoffset:0;fill-opacity:0}
  61%{fill-opacity:0}
  73%{fill-opacity:1}
  92%{stroke-dashoffset:0;fill-opacity:1}
  97%,100%{stroke-dashoffset:720;fill-opacity:0}
}
.fc-rich{fill:#b99654;stroke:#8f7238;stroke-width:2;fill-opacity:0;stroke-dasharray:340;stroke-dashoffset:340;animation:fcRich 9s ease-in-out infinite}
@keyframes fcRich{
  0%,56%{stroke-dashoffset:340;fill-opacity:0}
  72%{stroke-dashoffset:0;fill-opacity:0}
  78%{fill-opacity:0}
  86%{fill-opacity:1}
  93%{fill-opacity:1}
  98%,100%{stroke-dashoffset:340;fill-opacity:0}
}

/* 金色针迹线：缝纫 crawline，起绒后隐去 */
.fc-thread{stroke-dasharray:7 6;animation:fcThread 9s linear infinite}
@keyframes fcThread{
  0%{stroke-dashoffset:0;opacity:.95}
  55%{opacity:.95}
  62%{opacity:0}
  94%{opacity:0}
  100%{stroke-dashoffset:-238;opacity:.95}
}

/* 针：沿针迹路径自动巡航（offset-path），起绒后收针 */
.fc-needle{offset-path:path('M110,200 C210,120 320,250 300,330 C280,410 150,380 190,290 C240,170 420,150 450,260 C480,360 350,430 310,330 C270,240 420,420 520,470');offset-rotate:auto;animation:fcNeedle 9s linear infinite}
@keyframes fcNeedle{
  0%{offset-distance:0%;opacity:1}
  70%{offset-distance:100%;opacity:1}
  78%,100%{opacity:0}
}
@supports not (offset-path: path('M0,0 L1,1')){.fc-needle{display:none}}

/* 减少动效：直接呈现绣好的成品 */
@media (prefers-reduced-motion: reduce){
  .fc-patch,.fc-zi--1,.fc-zi--2,.fc-rich,.fc-thread,.fc-needle{animation:none}
  .fc-zi,.fc-rich{stroke-dashoffset:0;fill-opacity:1}
  .fc-thread{opacity:0}
  .fc-needle{opacity:0}
}

/* =========================================================
   Story 代码动效（main.js 注入）：绣花机刺绣 / 定制 LOGO 绣片
   + story.php 实际输出类 .ht-split（与 .ht-story 同款式，补齐渲染）
   ========================================================= */
.ht-split{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;margin-bottom:72px}
.ht-split.rev .ht-split__pic{order:2}
.ht-split__pic{position:relative}
.ht-split__pic img,.fx-box svg{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border);box-shadow:0 30px 60px -30px rgba(0,0,0,.75);display:block}
.fx-box svg{aspect-ratio:auto;background:transparent}
.ht-split__pic::after{content:"";position:absolute;inset:14px;border:2px dashed rgba(201,168,110,.4);border-radius:calc(var(--radius) - 6px);pointer-events:none}
.ht-split__txt h3{font-family:var(--fc-serif);font-size:26px;margin-bottom:14px}
.ht-split__txt h3::before{content:"◆";color:var(--fc-gold);margin-right:10px;font-size:18px}
.ht-split__txt p{color:var(--muted);line-height:1.9;font-size:15.5px}
.ht-stat-row{display:inline-flex;align-items:baseline;gap:10px;margin-top:22px;padding:14px 22px;background:var(--surface);border:1px solid var(--border);border-radius:14px}
.ht-stat-row b{font-family:var(--fc-serif);font-size:30px;color:var(--fc-gold)}
.ht-stat-row span{color:var(--fc-gold);letter-spacing:.1em}
@media (max-width:860px){.ht-split{grid-template-columns:1fr;gap:26px}.ht-split.rev .ht-split__pic{order:0}}

/* --- 动效 A：电脑绣花机（针头横移 + 布面花纹渐进绣出） --- */
.fx-head{animation:fxSlide 4.5s ease-in-out infinite alternate}
@keyframes fxSlide{from{transform:translateX(0)}to{transform:translateX(250px)}}
.fx-pat{stroke-dasharray:520;stroke-dashoffset:520;animation:fxPat 9s ease-in-out infinite}
@keyframes fxPat{0%{stroke-dashoffset:520}55%{stroke-dashoffset:0}86%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:520}}
.fx-pat2{opacity:0;animation:fxPat2 9s ease-in-out infinite}
@keyframes fxPat2{0%,40%{opacity:0}55%,86%{opacity:1}96%,100%{opacity:0}}
.fx-lamp{animation:fxLamp 1.4s ease-in-out infinite}
@keyframes fxLamp{0%,100%{opacity:.25}50%{opacity:1}}

/* --- 动效 B：定制 LOGO 绣片（GQ 描边→起绒 → YOUR LOGO 收尾） --- */
.fx-gq{fill-opacity:0;stroke-dasharray:640;stroke-dashoffset:640;animation:fxGq 9s ease-in-out infinite}
@keyframes fxGq{
  0%{stroke-dashoffset:640;fill-opacity:0}
  8%{stroke-dashoffset:540}
  46%{stroke-dashoffset:0;fill-opacity:0}
  58%{fill-opacity:0}
  70%{fill-opacity:1}
  93%{stroke-dashoffset:0;fill-opacity:1}
  98%,100%{stroke-dashoffset:640;fill-opacity:0}
}
.fx-ylogo{fill-opacity:0;stroke-dasharray:420;stroke-dashoffset:420;animation:fxYlogo 9s ease-in-out infinite}
@keyframes fxYlogo{
  0%,56%{stroke-dashoffset:420;fill-opacity:0}
  74%{stroke-dashoffset:0;fill-opacity:0}
  80%{fill-opacity:0}
  88%{fill-opacity:1}
  94%{fill-opacity:1}
  99%,100%{stroke-dashoffset:420;fill-opacity:0}
}
.fx-needle2{offset-path:path('M160,120 C220,64 360,64 420,120 C462,168 420,238 280,248 C160,238 128,168 160,120');offset-rotate:auto;animation:fxNeedle2 9s linear infinite}
@keyframes fxNeedle2{0%{offset-distance:0%;opacity:1}70%{offset-distance:100%;opacity:1}78%,100%{opacity:0}}
@supports not (offset-path: path('M0,0 L1,1')){.fx-needle2{display:none}}

/* --- 减少动效：直接呈现绣好的成品 --- */
@media (prefers-reduced-motion: reduce){
  .fx-head,.fx-pat,.fx-pat2,.fx-lamp,.fx-gq,.fx-ylogo,.fx-needle2{animation:none}
  .fx-pat{stroke-dashoffset:0}
  .fx-pat2{opacity:1}
  .fx-gq,.fx-ylogo{stroke-dashoffset:0;fill-opacity:1}
  .fx-needle2{opacity:0}
}