/* ============================================================
   视觉部 · VISUAL DEPT — style
   浅色系 / 强设计感 / 高交互
   ============================================================ */

:root{
  --bg:#f4f1ea;          /* 暖米白 */
  --bg-2:#ece7dc;
  --ink:#161412;         /* 墨黑 */
  --ink-soft:#5b564d;
  --line:#d8d2c4;
  --accent:#ff5436;      /* 朱红 */
  --accent-2:#3a6df0;
  --radius:18px;
  --ease:cubic-bezier(.16,1,.3,1);
  --font-disp:"Syne","Noto Serif SC",serif;
  --font-body:"Noto Sans SC",system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:none;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}

/* 细颗粒噪点底纹 */
body::before{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ 自定义光标 ============ */
.cursor{
  position:fixed;top:0;left:0;width:38px;height:38px;
  border:1px solid var(--ink);border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;z-index:10000;
  transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
  mix-blend-mode:difference;
}
.cursor-dot{
  position:fixed;top:0;left:0;width:5px;height:5px;background:var(--ink);
  border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:10001;
}
.cursor.is-hover{width:66px;height:66px;background:var(--ink);border-color:var(--ink)}
.cursor.is-view{
  width:92px;height:92px;background:var(--accent);border-color:var(--accent);
  mix-blend-mode:normal;
}
.cursor.is-view::after{content:"VIEW";color:#fff;font-family:var(--font-disp);font-weight:700;font-size:12px;letter-spacing:.1em}
@media (hover:none){ body{cursor:auto} .cursor,.cursor-dot{display:none} }

/* ============ 载入动画 ============ */
.loader{
  position:fixed;inset:0;z-index:10002;background:var(--ink);color:var(--bg);
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:6vw;transition:transform 1s var(--ease);
}
.loader.done{transform:translateY(-100%)}
.loader-inner{display:flex;align-items:baseline;justify-content:space-between;width:100%}
.loader-count{font-family:var(--font-disp);font-weight:800;font-size:clamp(4rem,18vw,16rem);line-height:.8}
.loader-label{font-family:var(--font-disp);font-weight:700;font-size:clamp(1rem,3vw,2rem);letter-spacing:.15em}

/* ============ 导航 ============ */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:9000;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,4vw,54px);
  mix-blend-mode:difference;color:#fff;
  transition:transform .5s var(--ease);
}
.nav.hide{transform:translateY(-120%)}
.nav-brand{font-family:var(--font-disp);font-weight:800;font-size:1.35rem;letter-spacing:.02em}
.brand-dot{color:var(--accent)}
.nav-links{display:flex;gap:32px}
.nav-links a{position:relative;font-size:.9rem;font-weight:500}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:currentColor;transition:width .4s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(255,255,255,.5);border-radius:100px;
  padding:9px 18px;font-size:.85rem;font-weight:500;
  transition:background .4s var(--ease),color .4s var(--ease),gap .3s var(--ease);
}
.nav-cta:hover{background:#fff;color:var(--ink);gap:14px}
.nav-cta svg{transition:transform .3s var(--ease)}
.nav-cta:hover svg{transform:translateX(3px)}
@media(max-width:720px){.nav-links{display:none}}

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 clamp(20px,4vw,54px) clamp(30px,4vw,54px)}
.hero-inner{width:100%}
.hero-top{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:min(6vh,60px);
  font-size:.82rem;letter-spacing:.06em;color:var(--ink-soft);text-transform:uppercase;
}
.hero-title{
  font-family:var(--font-disp);font-weight:800;
  font-size:clamp(3.4rem,15vw,17rem);line-height:.86;letter-spacing:-.02em;
}
.hero-title .line{display:block;overflow:hidden}
.hero-title .word{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease)}
.hero-title.in .word{transform:translateY(0)}
.hero-title .word:nth-child(2){transition-delay:.08s}
.hero-title .line:nth-child(2) .word{transition-delay:.14s}
.hero-title .line:nth-child(2) .word:nth-child(2){transition-delay:.22s}
.hero-title .emph{color:var(--accent);font-style:italic;font-family:"Noto Serif SC",serif;font-weight:700}
.hero-title .out{-webkit-text-stroke:1.5px var(--ink);color:transparent}

.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:min(6vh,54px);flex-wrap:wrap}
.hero-desc{font-size:clamp(1rem,1.5vw,1.25rem);color:var(--ink-soft);max-width:34ch;line-height:1.55}
.hero-scroll{display:flex;align-items:center;gap:14px;font-size:.85rem;letter-spacing:.05em}
.hero-scroll-circle{width:52px;height:52px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:background .4s var(--ease),color .4s var(--ease)}
.hero-scroll:hover .hero-scroll-circle{background:var(--ink);color:var(--bg)}
.hero-scroll-circle svg{animation:bob 1.8s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}

.hero-grain{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 80% 0%,rgba(255,84,54,.10),transparent 55%),
             radial-gradient(90% 80% at 0% 100%,rgba(58,109,240,.08),transparent 50%);}

/* ============ 跑马灯 ============ */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;overflow:hidden;white-space:nowrap;background:var(--ink);color:var(--bg)}
.marquee-track{display:inline-flex;align-items:center;gap:40px;animation:scroll 26s linear infinite;will-change:transform}
.marquee-track span{font-family:var(--font-disp);font-weight:700;font-size:clamp(1.6rem,4vw,3rem);letter-spacing:.02em}
.marquee-track .star{color:var(--accent);font-size:1.4rem}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============ 理念 ============ */
.intro{padding:clamp(80px,14vh,180px) clamp(20px,4vw,54px)}
.intro-text{
  font-family:var(--font-disp);font-weight:600;
  font-size:clamp(1.8rem,5.5vw,5rem);line-height:1.18;letter-spacing:-.01em;max-width:20ch;
}
.reveal-word{display:inline-block;opacity:.12;transition:opacity .5s var(--ease)}
.reveal-word.lit{opacity:1}
.reveal-word.emph{color:var(--accent)}

/* ============ 通用标题 ============ */
.section-head{padding:0 clamp(20px,4vw,54px);margin-bottom:clamp(40px,6vw,80px)}
.section-index{font-size:.82rem;letter-spacing:.1em;color:var(--ink-soft)}
.section-title{font-family:var(--font-disp);font-weight:800;font-size:clamp(2.4rem,7vw,6rem);line-height:.95;margin-top:12px;letter-spacing:-.02em}
.section-title em{font-style:italic;font-family:"Noto Serif SC",serif;color:var(--accent);font-weight:700}
.section-sub{color:var(--ink-soft);margin-top:16px;font-size:1.05rem}

/* ============ 业务列表 + 预览 ============ */
.work{padding-bottom:clamp(60px,8vw,120px)}
.work-layout{position:relative}
.work-list{list-style:none;border-top:1px solid var(--line)}
.work-item{
  position:relative;display:flex;align-items:center;gap:24px;
  padding:clamp(24px,3.4vw,44px) clamp(20px,4vw,54px);
  border-bottom:1px solid var(--line);
  transition:color .4s var(--ease);overflow:hidden;
}
.work-item::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .55s var(--ease);z-index:0}
.work-item:hover::before{transform:translateY(0)}
.work-item>*{position:relative;z-index:1}
.work-item:hover{color:var(--bg)}
.wi-num{font-family:var(--font-disp);font-weight:700;font-size:.95rem;color:var(--accent);width:40px;flex:none}
.wi-main{flex:1;display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.wi-title{font-family:var(--font-disp);font-weight:800;font-size:clamp(1.8rem,5vw,3.6rem);letter-spacing:-.01em;line-height:1;transition:transform .5s var(--ease)}
.work-item:hover .wi-title{transform:translateX(14px)}
.wi-tags{font-size:.9rem;color:var(--ink-soft);transition:color .4s var(--ease),transform .5s var(--ease)}
.work-item:hover .wi-tags{color:rgba(244,241,234,.6);transform:translateX(14px)}
.wi-arrow{flex:none;opacity:0;transform:translate(-10px,10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.work-item:hover .wi-arrow{opacity:1;transform:translate(0,0)}

/* AI/人工 分工标签 */
.wi-tail{
  flex:none;font-family:var(--font-disp);font-weight:700;font-size:.72rem;letter-spacing:.04em;
  padding:6px 12px;border:1px solid var(--line);border-radius:100px;color:var(--ink-soft);white-space:nowrap;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.work-item:hover .wi-tail{color:var(--accent);border-color:rgba(255,84,54,.5)}
@media(max-width:720px){.wi-tail{display:none}}

/* ============ 数据 ============ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:clamp(40px,6vw,80px) clamp(16px,2vw,30px);border-right:1px solid var(--line);text-align:center;transition:background .4s var(--ease)}
.stat:last-child{border-right:none}
.stat:hover{background:var(--bg-2)}
.stat-num{font-family:var(--font-disp);font-weight:800;font-size:clamp(2.6rem,7vw,5.5rem);line-height:1}
.stat-plus{font-family:var(--font-disp);font-weight:800;font-size:clamp(2rem,5vw,3.5rem);color:var(--accent)}
.stat-label{display:block;margin-top:14px;font-size:.9rem;color:var(--ink-soft);letter-spacing:.04em}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:none}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}}

/* ============ 工作流 SOP ============ */
.flow{padding:clamp(20px,4vw,54px) clamp(20px,4vw,54px) clamp(70px,10vw,140px)}
.flow-track{
  list-style:none;position:relative;
  display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  border-top:1px solid var(--line);
}
.flow-step{
  position:relative;padding:44px clamp(14px,1.6vw,26px) 10px;
  border-right:1px solid var(--line);
}
.flow-step:last-child{border-right:none}
.fs-node{
  position:absolute;top:-6px;left:clamp(14px,1.6vw,26px);
  width:11px;height:11px;border-radius:50%;background:var(--bg);
  border:2px solid var(--ink);transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.flow-step:hover .fs-node{background:var(--accent);border-color:var(--accent);transform:scale(1.25)}
.fs-num{font-family:var(--font-disp);font-weight:700;font-size:.9rem;color:var(--accent);letter-spacing:.04em}
.fs-title{font-family:var(--font-disp);font-weight:700;font-size:clamp(1.15rem,1.6vw,1.5rem);margin:10px 0 12px;line-height:1.1}
.fs-desc{color:var(--ink-soft);font-size:.92rem;line-height:1.6;min-height:4.6em}
.fs-meta{margin-top:16px;border-top:1px dashed var(--line);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.fs-meta div{display:flex;flex-direction:column;gap:3px}
.fs-meta dt{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);opacity:.75}
.fs-meta dd{font-family:var(--font-disp);font-weight:700;font-size:.92rem;line-height:1.25}
@media(max-width:980px){
  .flow-track{grid-template-columns:repeat(2,1fr)}
  .flow-step{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .flow-step:nth-child(2n){border-right:none}
}
@media(max-width:560px){
  .flow-track{grid-template-columns:1fr}
  .flow-step{border-right:none}
}

/* ============ 关于 ============ */
.about{padding:clamp(90px,14vh,200px) clamp(20px,4vw,54px)}
.about-tag{font-size:.82rem;letter-spacing:.1em;color:var(--ink-soft);margin-bottom:40px}
.about-text{font-family:var(--font-disp);font-weight:600;font-size:clamp(1.5rem,3.6vw,2.8rem);line-height:1.3;max-width:24ch;margin-bottom:clamp(50px,7vw,100px)}
.about-text em{font-style:italic;font-family:"Noto Serif SC",serif;color:var(--accent);font-weight:700}
.about-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,50px)}
.about-col{border-top:1px solid var(--ink);padding-top:22px}
.ac-index{font-family:var(--font-disp);font-weight:700;color:var(--accent);font-size:.9rem}
.about-col h4{font-family:var(--font-disp);font-weight:700;font-size:1.35rem;margin:14px 0 10px}
.about-col p{color:var(--ink-soft);font-size:.98rem;line-height:1.6}
@media(max-width:820px){.about-cols{grid-template-columns:1fr}}

/* ============ 合作 CTA ============ */
.contact{background:var(--ink);color:var(--bg);padding:clamp(90px,16vh,220px) clamp(20px,4vw,54px);border-radius:40px 40px 0 0;margin-top:20px}
.contact-inner{text-align:center}
.contact-eyebrow{font-size:.82rem;letter-spacing:.1em;color:rgba(244,241,234,.55)}
.contact-title{font-family:var(--font-disp);font-weight:800;font-size:clamp(2.6rem,9vw,8rem);line-height:.95;margin:24px 0 44px;letter-spacing:-.02em}
.contact-title em{font-style:italic;font-family:"Noto Serif SC",serif;color:var(--accent);font-weight:700}
.contact-mail{display:inline-block;font-family:var(--font-disp);font-weight:700;font-size:clamp(1.3rem,4vw,2.6rem);border-bottom:2px solid var(--accent);padding-bottom:6px;transition:color .4s var(--ease)}
.contact-mail:hover{color:var(--accent)}
.contact-meta{display:flex;justify-content:center;gap:clamp(30px,6vw,90px);margin-top:clamp(50px,8vw,90px);flex-wrap:wrap}
.cm-item{text-align:left}
.cm-label{display:block;font-size:.78rem;color:rgba(244,241,234,.5);letter-spacing:.06em;margin-bottom:6px}
.cm-value{font-family:var(--font-disp);font-weight:700;font-size:1.1rem}

/* ============ 页脚 ============ */
.footer{background:var(--ink);color:var(--bg);padding:0 clamp(20px,4vw,54px) 30px}
.footer-big{font-family:var(--font-disp);font-weight:800;font-size:clamp(4rem,26vw,24rem);line-height:.8;text-align:center;letter-spacing:-.02em;color:rgba(244,241,234,.08);padding:20px 0 30px}
.footer-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(244,241,234,.14);padding-top:24px;font-size:.85rem;color:rgba(244,241,234,.6);flex-wrap:wrap;gap:12px}
.footer-row a:hover{color:var(--bg)}

/* ============ reveal 通用 ============ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  .reveal{opacity:1;transform:none}
}