/* ==========================================================================
   上海泰沃展示设计有限公司 · 官网样式
   设计基调：克制的工业感 + 品牌红点睛；深浅交替分区，突出实拍素材
   ========================================================================== */

:root{
  --ink:#0b0d12;
  --ink-2:#151922;
  --ink-3:#1e242f;
  --paper:#ffffff;
  --paper-2:#f4f5f7;
  --brand:#e62129;
  --brand-d:#b81a12;
  --brand-l:#ff5b4d;
  --text:#1b1f27;
  --muted:#6b7280;
  --muted-2:#9aa3af;
  --line:#e5e8ed;
  --line-d:rgba(255,255,255,.12);
  --r:14px;
  --r-lg:20px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 12px 32px -12px rgba(16,24,40,.18);
  --shadow-lg:0 24px 64px -24px rgba(16,24,40,.32);
  --wrap:1200px;
  --hdr-h:76px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 12px); -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); color:var(--text); background:var(--paper);
  line-height:1.7; font-size:16px; letter-spacing:.01em;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; line-height:1.25; letter-spacing:-.01em; font-weight:700}
p{margin:0}
ul,ol,dl,dd,figure,blockquote{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit; cursor:pointer}
::selection{background:var(--brand); color:#fff}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:999; background:#fff; padding:10px 16px; border-radius:8px}

/* ---------- 通用 ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 14px;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-l);
}
.eyebrow::before{content:""; width:22px; height:2px; background:currentColor; border-radius:2px}
.eyebrow--dark{color:var(--brand)}

.sec{padding:96px 0}
.sec--paper{background:var(--paper-2)}
.sec--ink{background:var(--ink); color:#fff}
.sec--ink .sec__sub{color:#a7b0bd}
.sec--brand{background:linear-gradient(135deg,#c8130b 0%,var(--brand) 52%,#ff5d43 100%); color:#fff}

.sec__hd{max-width:760px; margin-bottom:48px}
.sec--ink .sec__hd h2,.sec--brand .sec__hd h2{color:#fff}
.sec__hd h2{font-size:clamp(28px,3.4vw,42px); letter-spacing:-.02em}
.sec__sub{margin-top:14px; color:var(--muted); font-size:17px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:52px; padding:0 28px; border-radius:999px; border:1px solid transparent;
  font-weight:600; font-size:15.5px; transition:transform .22s, box-shadow .22s, background .22s, border-color .22s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--brand{background:var(--brand); color:#fff; box-shadow:0 12px 28px -12px rgba(225,37,27,.75)}
.btn--brand:hover{background:var(--brand-d); box-shadow:0 18px 36px -14px rgba(225,37,27,.85)}
.btn--ghost{border-color:rgba(255,255,255,.32); color:#fff; background:rgba(255,255,255,.04)}
.btn--ghost:hover{border-color:#fff; background:rgba(255,255,255,.12)}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1)}
.reveal.is-in{opacity:1; transform:none}

/* ---------- 顶栏 ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:80; height:var(--hdr-h);
  background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s, background .25s, box-shadow .25s;
}
.hdr.is-stuck{border-bottom-color:var(--line); box-shadow:0 8px 28px -20px rgba(16,24,40,.4)}
.hdr__in{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; height:100%;
  display:flex; align-items:center; gap:24px;
}
.brand{display:flex; align-items:center; gap:12px; flex-shrink:0}
.brand__logo{height:40px; width:auto}
.brand__txt{display:flex; flex-direction:column; line-height:1.25; border-left:1px solid var(--line); padding-left:12px}
.brand__txt b{font-size:14.5px; font-weight:700; letter-spacing:.02em}
.brand__txt i{font-style:normal; font-size:11.5px; color:var(--muted); letter-spacing:.14em}

.nav{margin-left:auto; display:flex; align-items:center; gap:2px}
.nav a{
  position:relative; padding:9px 14px; border-radius:9px; font-size:15px; font-weight:500; color:#333a45;
  transition:color .2s, background .2s;
}
.nav a:hover{color:var(--brand); background:rgba(225,37,27,.06)}
.nav a.is-active{color:var(--brand); font-weight:600}

.hdr__cta{
  display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px;
  border-radius:999px; background:var(--ink); color:#fff; font-size:14.5px; font-weight:600;
  transition:background .22s, transform .22s; flex-shrink:0;
}
.hdr__cta svg{width:16px; height:16px; fill:currentColor}
.hdr__cta:hover{background:var(--brand); transform:translateY(-1px)}

.hdr__burger{display:none; width:44px; height:44px; border:1px solid var(--line); background:#fff; border-radius:11px; margin-left:auto}
.hdr__burger span{display:block; width:18px; height:2px; background:var(--text); margin:3.5px auto; border-radius:2px; transition:transform .25s, opacity .2s}
.hdr__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.hdr__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hdr__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---------- 首屏 ---------- */
.hero{
  position:relative; overflow:hidden; background:var(--ink); color:#fff;
  padding:calc(var(--hdr-h) + 84px) 0 96px;
}
.hero__glow{
  position:absolute; inset:-30% -10% auto -10%; height:120%;
  background:
    radial-gradient(46% 46% at 18% 26%, rgba(225,37,27,.34), transparent 68%),
    radial-gradient(38% 40% at 82% 12%, rgba(72,110,255,.20), transparent 70%),
    radial-gradient(40% 46% at 62% 92%, rgba(225,37,27,.16), transparent 72%);
  filter:blur(10px); pointer-events:none;
}
.hero__in{position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:64px; align-items:center}

.hero h1{font-size:clamp(34px,5vw,60px); letter-spacing:-.035em; margin-bottom:22px}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(96deg,var(--brand-l),#ff9a70 60%,#ffd08a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lead{color:#c3cbd8; font-size:17.5px; max-width:34em}
.hero__btns{display:flex; gap:14px; margin:34px 0 0; flex-wrap:wrap}

.hero__stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  margin-top:48px; padding-top:32px; border-top:1px solid var(--line-d);
}
.hero__stats b{display:block; font-size:clamp(24px,2.6vw,32px); font-weight:700; letter-spacing:-.02em}
.hero__stats b small{font-size:.5em; margin-left:2px; color:var(--brand-l)}
.hero__stats span{display:block; margin-top:4px; font-size:13px; color:#8e99a8}

.hero__mosaic{
  display:grid; gap:14px;
  grid-template-columns:1.25fr .9fr;
  grid-template-rows:repeat(3,minmax(0,1fr));
  aspect-ratio:1/1.02;
}
.hero__mosaic .m{
  overflow:hidden; border-radius:var(--r); border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}
.hero__mosaic img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.hero__mosaic .m:hover img{transform:scale(1.06)}
.m1{grid-column:1; grid-row:1/3}
.m2{grid-column:2; grid-row:1/2}
.m3{grid-column:2; grid-row:2/3}
.m4{grid-column:1; grid-row:3/4}
.m5{grid-column:2; grid-row:3/4}

/* ---------- 关于 ---------- */
.about{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:start}
.about__body p{font-size:16.5px; color:#3a424f; margin-bottom:18px}
.about__body b{color:var(--text); font-weight:700}
.about__cards{display:grid; gap:14px}
.about__cards li{
  position:relative; padding:24px 26px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); transition:transform .25s, box-shadow .25s, border-color .25s;
}
.about__cards li:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:#f0c9c6}
.about__cards .num{
  position:absolute; right:22px; top:16px; font-size:13px; font-weight:700; letter-spacing:.1em; color:#c8ced8;
}
.about__cards h3{font-size:19px; margin-bottom:8px}
.about__cards h3::after{content:""; display:block; width:26px; height:3px; margin-top:10px; background:var(--brand); border-radius:2px}
.about__cards p{color:var(--muted); font-size:15px}

/* ---------- 核心能力 ---------- */
.caps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.cap{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 30px 30px;
  box-shadow:var(--shadow); transition:transform .3s, box-shadow .3s, border-color .3s;
}
.cap:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:#f0c9c6}
.cap__ico{
  width:54px; height:54px; border-radius:15px; display:grid; place-items:center; margin-bottom:22px;
  background:linear-gradient(140deg,rgba(225,37,27,.12),rgba(225,37,27,.04)); color:var(--brand);
}
.cap__ico svg{width:26px; height:26px; fill:currentColor}
.cap h3{font-size:21px; margin-bottom:12px}
.cap > p{color:var(--muted); font-size:15.5px; margin-bottom:20px}
.ticks{display:grid; gap:9px; padding-top:20px; border-top:1px dashed var(--line)}
.ticks li{position:relative; padding-left:24px; font-size:14.5px; color:#414a58}
.ticks li::before{
  content:""; position:absolute; left:0; top:.52em; width:13px; height:7px;
  border-left:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(-45deg) scale(.85); border-radius:1px;
}

/* ---------- 生产基地 ---------- */
.workshops{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:44px;
}
.workshops li{
  background:var(--ink-3); border:1px solid var(--line-d); border-radius:var(--r);
  padding:20px 14px; text-align:center; transition:border-color .25s, background .25s, transform .25s;
}
.workshops li:hover{border-color:rgba(225,37,27,.6); background:#222833; transform:translateY(-3px)}
.workshops b{display:block; font-size:26px; color:var(--brand-l); letter-spacing:-.02em; line-height:1.2}
.workshops span{display:block; margin-top:6px; font-size:13.5px; color:#c3cbd8}

.gallery{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.g{
  position:relative; overflow:hidden; border-radius:var(--r); margin:0;
  border:1px solid var(--line-d); background:#000;
}
.g--wide{grid-column:span 2; grid-row:span 2}
.g img{width:100%; height:100%; object-fit:cover; min-height:190px; transition:transform .8s cubic-bezier(.2,.7,.3,1), opacity .3s}
.g--wide img{min-height:394px}
.g:hover img{transform:scale(1.05)}
.g figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:28px 18px 14px;
  font-size:13.5px; color:#fff; background:linear-gradient(transparent,rgba(6,8,12,.86));
}

/* ---------- 案例 ---------- */
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px}
.filters button{
  height:42px; padding:0 20px; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:#3a424f; font-size:14.5px; font-weight:500;
  transition:all .22s;
}
.filters button:hover{border-color:var(--brand); color:var(--brand)}
.filters button.is-on{background:var(--ink); border-color:var(--ink); color:#fff}
.filters button.is-on:hover{background:var(--brand); border-color:var(--brand); color:#fff}

.cases{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.card{
  position:relative; display:block; width:100%; text-align:left; padding:0; border:0; background:transparent;
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow);
  transition:transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.card__media{position:relative; aspect-ratio:16/11; overflow:hidden; background:#0f1218}
.card__media img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.card:hover .card__media img{transform:scale(1.07)}
.card__media::after{
  content:""; position:absolute; inset:auto 0 0 0; height:62%;
  background:linear-gradient(transparent,rgba(6,8,12,.9));
}
.card__badge{
  position:absolute; z-index:2; left:14px; top:14px; height:28px; padding:0 12px;
  display:inline-flex; align-items:center; border-radius:999px;
  background:rgba(255,255,255,.92); color:var(--ink); font-size:12px; font-weight:700; letter-spacing:.02em;
  backdrop-filter:blur(6px);
}
.card__zoom{
  position:absolute; z-index:2; right:14px; top:14px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; background:rgba(225,37,27,.95); color:#fff; font-size:15px;
  opacity:0; transform:scale(.8); transition:opacity .25s, transform .25s;
}
.card:hover .card__zoom{opacity:1; transform:none}
.card__body{position:absolute; z-index:2; left:0; right:0; bottom:0; padding:20px 20px 18px; color:#fff}
.card__body h3{font-size:18px; letter-spacing:-.01em; margin-bottom:5px}
.card__body p{font-size:13px; color:#c3cbd8; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
.card__more{margin-top:10px; font-size:12.5px; color:var(--brand-l); font-weight:600}

.cases__note{margin-top:34px; font-size:14px; color:var(--muted); text-align:center}

/* ---------- 服务承诺 ---------- */
.sec--brand .promise{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:56px; align-items:center}
.sec--brand blockquote p{font-size:clamp(24px,3vw,36px); font-weight:700; letter-spacing:-.02em; line-height:1.35}
.sec--brand blockquote cite{display:block; margin-top:16px; font-style:normal; font-size:14.5px; color:rgba(255,255,255,.82)}
.promise__list{display:grid; gap:12px}
.promise__list li{
  background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r); padding:18px 22px; backdrop-filter:blur(4px);
  transition:background .25s, transform .25s;
}
.promise__list li:hover{background:rgba(255,255,255,.18); transform:translateX(4px)}
.promise__list b{display:block; font-size:16px; margin-bottom:4px}
.promise__list span{font-size:14px; color:rgba(255,255,255,.85)}

/* ---------- 联系 ---------- */
.contact{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.ccard{
  display:block; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px 30px; box-shadow:var(--shadow); transition:transform .28s, box-shadow .28s, border-color .28s;
}
a.ccard:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:#f0c9c6}
.ccard--main{background:linear-gradient(150deg,var(--ink),#222936); color:#fff; border-color:transparent}
.ccard__k{display:block; font-size:13px; letter-spacing:.1em; color:var(--muted); margin-bottom:12px}
.ccard--main .ccard__k{color:#98a3b2}
.ccard__v{display:block; font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1.25}
.ccard__v--sm{font-size:18px; font-weight:600; line-height:1.5; word-break:break-word}
.ccard--main .ccard__v{color:#fff}
.ccard__d{display:block; margin-top:12px; font-size:13.5px; color:var(--muted)}
.ccard--main .ccard__d{color:#98a3b2}

/* ---------- 页脚 ---------- */
.ftr{background:var(--ink); color:#fff; padding:64px 0 0}
.ftr__in{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:48px; padding-bottom:48px}
.ftr__brand img{height:48px; width:auto; margin-bottom:18px}
.ftr__brand p{font-size:14px; color:#98a3b2; line-height:1.8}
.ftr__meta{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 32px}
.ftr__meta div{border-top:1px solid var(--line-d); padding-top:12px}
.ftr__meta dt{font-size:12.5px; color:#7f8a99; margin-bottom:5px}
.ftr__meta dd{font-size:14.5px; color:#dfe4ea}
.ftr__meta div:last-child{grid-column:1/-1}
.ftr__bar{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line-d); padding-top:22px; padding-bottom:22px;
  font-size:13px; color:#7f8a99;
}
.ftr__bar-l{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap}
/* ICP 备案号（法定展示项，链接工信部） */
.ftr__icp{
  color:#7f8a99; text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.ftr__icp:hover{color:#e8ecf1; border-bottom-color:currentColor}

/* ---------- 灯箱 ---------- */
.lb{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:rgba(6,8,12,.92); backdrop-filter:blur(6px); padding:56px 76px;
  animation:lbIn .22s ease;
}
@keyframes lbIn{from{opacity:0} to{opacity:1}}
.lb[hidden]{display:none}
.lb__stage{max-width:min(1180px,100%); margin:0; text-align:center}
.lb__stage img{
  max-height:76vh; width:auto; margin-inline:auto; border-radius:12px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
}
.lb__stage figcaption{margin-top:16px; color:#dfe4ea; font-size:15px}
.lb__close{
  position:absolute; top:20px; right:24px; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.08); color:#fff;
  font-size:24px; line-height:1; display:grid; place-items:center; transition:background .2s;
}
.lb__close:hover{background:var(--brand); border-color:var(--brand)}
.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.08); color:#fff;
  font-size:28px; line-height:1; display:grid; place-items:center; transition:background .2s;
}
.lb__nav:hover{background:var(--brand); border-color:var(--brand)}
.lb__nav--prev{left:18px}
.lb__nav--next{right:18px}
body.lb-open{overflow:hidden}

/* ---------- 回到顶部 ---------- */
.totop{
  position:fixed; right:24px; bottom:28px; z-index:70; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; background:var(--ink); color:#fff; font-size:18px;
  box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .28s, transform .28s, visibility .28s, background .22s;
}
.totop.is-on{opacity:1; visibility:visible; transform:none}
.totop:hover{background:var(--brand)}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:1080px){
  .hero__in{grid-template-columns:1fr; gap:48px}
  .hero__mosaic{aspect-ratio:16/10; max-width:620px}
  .about{grid-template-columns:1fr; gap:40px}
  .caps{grid-template-columns:1fr}
  .workshops{grid-template-columns:repeat(3,minmax(0,1fr))}
  .contact{grid-template-columns:1fr}
  .sec--brand .promise{grid-template-columns:1fr; gap:36px}
  .cases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr__in{grid-template-columns:1fr; gap:36px}
}

@media (max-width:820px){
  :root{--hdr-h:66px}
  .sec{padding:72px 0}
  .brand__txt{display:none}
  .nav{
    position:fixed; inset:var(--hdr-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line); padding:10px 16px 18px;
    box-shadow:0 24px 40px -28px rgba(16,24,40,.5);
    transform:translateY(-12px); opacity:0; visibility:hidden; transition:all .25s;
  }
  .nav.is-open{transform:none; opacity:1; visibility:visible}
  .nav a{padding:14px 6px; border-bottom:1px solid var(--line); border-radius:0; font-size:16px}
  .nav a:last-child{border-bottom:0}
  .hdr__burger{display:block}
  .hdr__cta span{display:none}
  .hdr__cta{padding:0 14px}
  .hero{padding-top:calc(var(--hdr-h) + 56px)}
  .hero__stats{grid-template-columns:repeat(2,1fr); gap:22px 16px}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g--wide{grid-column:span 2; grid-row:auto}
  .g--wide img{min-height:220px}
  .workshops{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lb{padding:64px 14px; }
  .lb__nav{width:44px; height:44px; font-size:24px}
  .lb__nav--prev{left:6px}
  .lb__nav--next{right:6px}
  .ftr__meta{grid-template-columns:1fr}
}

@media (max-width:560px){
  .wrap{padding-inline:18px}
  .cases{grid-template-columns:1fr}
  .hero__mosaic{gap:10px}
  .hero__btns .btn{flex:1 1 100%}
  .sec__hd{margin-bottom:34px}
}

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

@media print{
  .hdr,.totop,.lb,.filters{display:none}
  .sec{padding:24px 0; break-inside:avoid}
  body{color:#000}
}