/* =====================================================================
   北京星羽聚升国际贸易有限公司 · 官方网站
   设计语言：霞升 · 羽光 (Soft Dawn · Feather Light)
   ===================================================================== */

:root{
  /* —— 色彩：淡红为主、暖白通透 —— */
  --rose:#D8736E;          /* 淡绯红：主色/强调 */
  --rose-deep:#B14E48;     /* 深玫瑰：标题/重点 */
  --rose-mid:#E29A95;
  --blush:#FBE9E4;         /* 浅霞：浅色块底 */
  --blush-2:#F7DCD5;
  --cream:#FDF8F4;         /* 暖白：主背景 */
  --cream-2:#FBF1EA;
  --ink:#3B2B28;           /* 暖墨：正文 */
  --ink-soft:#6E5852;
  --gold:#C99B82;          /* 玫瑰金：发丝线/点缀 */
  --gold-soft:#E2C6B2;
  --line:rgba(201,155,130,.34);
  --white:#fff;

  --f-serif:"Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",serif;
  --f-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei","Heiti SC",sans-serif;
  --f-latin:"Cormorant Garamond",Georgia,"Times New Roman",serif;

  --maxw:1200px;
  --gut:clamp(20px,5vw,84px);
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 24px 60px -28px rgba(177,78,72,.32);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-sans);color:var(--ink);background:var(--cream);line-height:1.7;font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased}
svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--rose);color:var(--white)}
a:focus-visible,button:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--rose);color:#fff;padding:10px 18px;font-size:14px}
.skip:focus{left:12px;top:12px}

/* 羽星标识 */
.mk-feather{fill:none;stroke:var(--mk,var(--rose));stroke-width:2.2}
.mk-spine,.mk-barb{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round}
.mk-star{fill:var(--gold)}
.ic{fill:none;stroke:var(--ic,var(--rose));stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* 通用区块头 */
.eyebrow,.kicker{font-family:var(--f-latin);font-size:clamp(12px,1.1vw,14px);letter-spacing:.34em;text-transform:uppercase;color:var(--rose-deep)}
.kicker{display:inline-block;margin-bottom:18px;position:relative;padding-left:30px}
.kicker::before{content:"";position:absolute;left:0;top:50%;width:20px;height:1.5px;background:var(--gold)}
.sec-head{max-width:760px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
.sec-title{font-family:var(--f-serif);font-weight:700;font-size:clamp(1.9rem,4vw,3rem);line-height:1.25;letter-spacing:.02em;color:var(--ink)}
.sec-title i{font-style:normal;color:var(--rose);margin:0 .04em}
.sec-lead{margin-top:18px;color:var(--ink-soft);font-weight:400;font-size:clamp(.96rem,1.3vw,1.06rem)}

/* =====================================================================
   导航
   ===================================================================== */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);border-bottom:1px solid transparent}
.nav__inner{max-width:var(--maxw);margin:0 auto;padding:16px var(--gut);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px}
.brand__mark{width:34px;height:34px;flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1.12}
.brand__txt strong{font-family:var(--f-serif);font-weight:700;font-size:1.18rem;letter-spacing:.14em;color:var(--ink)}
.brand__txt em{font-family:var(--f-latin);font-style:normal;font-size:10.5px;letter-spacing:.2em;color:var(--rose-deep)}
.nav__links{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px)}
.nav__links a{font-size:15px;color:var(--ink);letter-spacing:.04em;position:relative;padding:4px 0;transition:color .3s var(--ease)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--rose);transition:width .35s var(--ease)}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--rose-deep)}
.nav__links a:hover::after,.nav__links a:focus-visible::after{width:100%}
.nav__lang{font-family:var(--f-latin);font-size:13px;letter-spacing:.08em;color:var(--rose-deep);border:1px solid var(--line);padding:3px 10px;border-radius:20px}
.nav__lang i{font-style:normal;opacity:.5;margin:0 2px}
.nav__lang span{opacity:.55}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav__toggle span{width:24px;height:2px;background:var(--ink);transition:.35s var(--ease);border-radius:2px}
.nav.is-stuck{background:rgba(253,248,244,.9);border-bottom-color:var(--line);box-shadow:0 8px 30px rgba(177,78,72,.06);-webkit-backdrop-filter:saturate(1.3) blur(10px);backdrop-filter:saturate(1.3) blur(10px)}

/* =====================================================================
   首屏（霞光）
   ===================================================================== */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:150px var(--gut) 100px;overflow:hidden;
  background:linear-gradient(168deg,var(--cream) 0%,#FBEAE4 46%,#F6D7CF 100%)}
.hero__glow{position:absolute;top:-22%;left:50%;transform:translateX(-50%);width:120vw;height:90vh;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,230,222,.9),rgba(248,206,198,.4) 55%,transparent 72%);
  animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}}
.hero__sparkle i{position:absolute;width:17px;height:17px;pointer-events:none;background:var(--gold);opacity:.5;animation:tw 4s ease-in-out infinite;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.6 8.8 8.8 2.6-8.8 2.6-2.6 8.8-2.6-8.8-8.8-2.6 8.8-2.6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.6 8.8 8.8 2.6-8.8 2.6-2.6 8.8-2.6-8.8-8.8-2.6 8.8-2.6z'/%3E%3C/svg%3E") center/contain no-repeat}
.hero__sparkle i:nth-child(2){animation-delay:.8s}.hero__sparkle i:nth-child(3){animation-delay:1.6s}
.hero__sparkle i:nth-child(4){animation-delay:2.4s}.hero__sparkle i:nth-child(5){animation-delay:3.2s}
@keyframes tw{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:.9;transform:scale(1.2)}}

.hero__inner{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;width:100%}
.hero__title{font-family:var(--f-serif);font-weight:700;font-size:clamp(2.9rem,7.6vw,5.6rem);line-height:1.08;letter-spacing:.04em;margin:.4em 0 .44em;color:var(--ink)}
.hero__title .line{display:block;overflow:hidden}
.hero__title em{font-style:normal;color:var(--rose-deep)}
.hero__sub{font-family:var(--f-serif);font-weight:500;font-size:clamp(1.1rem,2vw,1.55rem);color:var(--rose-deep);letter-spacing:.05em}
.hero__desc{margin-top:18px;max-width:38em;color:var(--ink-soft);font-weight:400;font-size:clamp(.98rem,1.3vw,1.08rem)}
.hero__cta{display:flex;align-items:center;gap:22px;margin-top:40px;flex-wrap:wrap}
.btn{font-size:15px;letter-spacing:.08em;transition:.4s var(--ease);cursor:pointer;border-radius:30px}
.btn--solid{background:var(--rose);color:#fff;padding:15px 38px;box-shadow:0 14px 30px -12px rgba(177,78,72,.6)}
.btn--solid:hover{background:var(--rose-deep);transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(177,78,72,.7)}
.btn--text{color:var(--rose-deep);padding-bottom:3px;border-bottom:1px solid transparent;border-radius:0}
.btn--text i{font-style:normal;display:inline-block;transition:transform .4s var(--ease)}
.btn--text:hover{border-bottom-color:var(--rose)}
.btn--text:hover i{transform:translateX(6px)}

.hero__metrics{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,68px);margin-top:clamp(46px,6vw,72px);padding-top:32px;border-top:1px solid var(--line);max-width:760px}
.hero__metrics dt{font-family:var(--f-latin);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.hero__metrics dd{font-family:var(--f-serif);font-weight:700;font-size:clamp(2rem,3.4vw,2.7rem);line-height:1;color:var(--rose-deep);display:flex;align-items:baseline;gap:.12em}
.hero__metrics dd.t{font-size:clamp(1.5rem,2.4vw,1.9rem)}
.hero__metrics dd i{font-style:normal;font-family:var(--f-sans);font-size:.9rem;font-weight:400;color:var(--ink-soft)}

.hero__mark{position:absolute;right:-4%;top:50%;transform:translateY(-50%);z-index:1;width:min(40vw,500px);pointer-events:none;opacity:.85;animation:floaty 7s ease-in-out infinite}
.hero__mark svg{width:100%;height:auto;filter:drop-shadow(0 20px 50px rgba(177,78,72,.18))}
@keyframes floaty{0%,100%{transform:translateY(-52%)}50%{transform:translateY(-46%)}}
.hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;font-family:var(--f-latin);font-size:13px;letter-spacing:.22em;color:var(--rose-deep);animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* =====================================================================
   关于我们
   ===================================================================== */
.about{padding:clamp(84px,11vw,150px) var(--gut);position:relative;background:var(--cream)}
.about>*,.business>*,.adv>*,.news>*{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.about__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(36px,6vw,84px);align-items:center}
.about__lead p{margin-top:1.4em;color:var(--ink-soft);font-size:clamp(1rem,1.3vw,1.1rem);line-height:2}
.about__lead p:first-child{margin-top:0;color:var(--ink);font-weight:400}
.mvv{display:flex;flex-direction:column;gap:16px}
.mvv li{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,2.6vw,30px) clamp(24px,3vw,34px);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.mvv li:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.mvv__k{font-family:var(--f-latin);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-deep)}
.mvv li p{font-family:var(--f-serif);font-weight:500;font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.5;margin-top:12px;color:var(--ink)}
.mvv--hl{background:linear-gradient(135deg,var(--rose),var(--rose-deep))!important;border-color:transparent!important;box-shadow:var(--shadow)}
.mvv--hl .mvv__k{color:rgba(255,255,255,.78)}
.mvv--hl p{color:#fff}

/* =====================================================================
   业务板块
   ===================================================================== */
.business{padding:clamp(84px,11vw,150px) var(--gut);background:linear-gradient(180deg,var(--cream),var(--blush))}
.biz{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.biz__card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:clamp(28px,3.2vw,40px);position:relative;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.biz__card::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--rose),var(--gold-soft));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.biz__ic{width:48px;height:48px;margin-bottom:22px}
.biz__no{position:absolute;top:clamp(26px,3vw,38px);right:clamp(26px,3vw,38px);font-family:var(--f-latin);font-size:1.5rem;color:var(--gold-soft);font-weight:600}
.biz__card h3{font-family:var(--f-serif);font-weight:700;font-size:clamp(1.15rem,1.7vw,1.4rem);color:var(--ink);line-height:1.4;display:flex;flex-direction:column;gap:5px}
.biz__card h3 em{font-family:var(--f-latin);font-style:normal;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-deep)}
.biz__card p{margin-top:15px;color:var(--ink-soft);font-size:.94rem;font-weight:400;line-height:1.85}
.biz__card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent}
.biz__card:hover::before{transform:scaleX(1)}
.biz__card:hover{--ic:var(--rose-deep)}

/* =====================================================================
   服务优势
   ===================================================================== */
.adv{padding:clamp(84px,11vw,150px) var(--gut);background:var(--blush)}
.adv__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,30px)}
.adv__item{text-align:left;padding:clamp(8px,1vw,14px) 0}
.adv__n{font-family:var(--f-latin);font-size:2.4rem;font-weight:600;color:var(--rose);line-height:1;display:block;margin-bottom:16px}
.adv__item h3{font-family:var(--f-serif);font-weight:700;font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--ink);position:relative;padding-bottom:14px;margin-bottom:14px}
.adv__item h3::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--gold)}
.adv__item p{color:var(--ink-soft);font-size:.92rem;font-weight:400;line-height:1.8}

/* =====================================================================
   新闻资讯
   ===================================================================== */
.news{padding:clamp(84px,11vw,150px) var(--gut);background:linear-gradient(180deg,var(--blush),var(--cream))}
.news .sec-head{text-align:center}
.news__list{max-width:var(--maxw);margin:0 auto;border-top:1px solid var(--line)}
.news__item{display:grid;grid-template-columns:96px 1fr 30px;align-items:center;gap:clamp(18px,3vw,40px);padding:clamp(22px,2.6vw,30px) clamp(6px,1.4vw,20px);border-bottom:1px solid var(--line);transition:background .4s var(--ease),padding-left .4s var(--ease)}
.news__date{font-family:var(--f-latin);text-align:center;color:var(--rose-deep);line-height:1.1}
.news__date b{display:block;font-size:2rem;font-weight:600}
.news__item{font-size:13px;letter-spacing:.05em}
.news__tag{display:inline-block;font-family:var(--f-latin);font-size:12px;letter-spacing:.1em;color:var(--rose-deep);border:1px solid var(--line);padding:2px 12px;border-radius:20px;margin-bottom:12px}
.news__item h3{font-family:var(--f-serif);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--ink);line-height:1.5}
.news__item p{margin-top:8px;color:var(--ink-soft);font-size:.92rem;font-weight:400}
.news__arr{font-style:normal;color:var(--rose);font-size:1.2rem;justify-self:end;transition:transform .4s var(--ease)}
.news__item:hover{background:var(--white);padding-left:clamp(16px,2vw,30px);border-radius:14px}
.news__item:hover .news__arr{transform:translateX(6px)}
.news__item--feat h3{font-weight:700;font-size:clamp(1.18rem,1.8vw,1.5rem)}

/* =====================================================================
   页脚
   ===================================================================== */
.footer{background:var(--ink);color:var(--cream);padding:clamp(64px,8vw,96px) var(--gut) 30px;position:relative}
.footer__top{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(30px,5vw,70px);padding-bottom:clamp(40px,5vw,58px);border-bottom:1px solid rgba(226,198,178,.18)}
.footer__mark{width:48px;height:48px;margin-bottom:18px}
.footer__mark{--mk:var(--rose-mid)}
.footer__name{font-family:var(--f-serif);font-weight:700;font-size:1.4rem;letter-spacing:.06em}
.footer__en{font-family:var(--f-latin);font-size:11px;letter-spacing:.2em;color:var(--gold-soft);margin-top:8px}
.footer__slogan{margin-top:18px;color:var(--rose-mid);font-family:var(--f-serif);letter-spacing:.08em}
.footer__col h4{font-family:var(--f-serif);font-weight:700;font-size:1.08rem;margin-bottom:20px;position:relative;padding-bottom:13px}
.footer__col h4::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;background:var(--gold)}
.footer__col p,.footer__col a{display:block;color:rgba(253,248,244,.72);font-size:.92rem;font-weight:400;margin-bottom:12px}
.footer__col a{transition:color .3s var(--ease)}
.footer__col a:hover{color:var(--rose-mid)}
.footer__col p a{display:inline;margin:0;color:inherit;transition:color .3s var(--ease)}
.footer__col p a:hover{color:var(--rose-mid)}
.footer__bar{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:24px}
.footer__bar p{font-family:var(--f-latin);font-size:12px;letter-spacing:.06em;color:rgba(226,198,178,.72)}

/* 返回顶部 */
.totop{position:fixed;right:24px;bottom:24px;z-index:50;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:var(--rose);color:#fff;border-radius:50%;font-size:18px;opacity:0;transform:translateY(14px);visibility:hidden;pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s,background .3s;box-shadow:0 12px 26px -10px rgba(177,78,72,.7)}
.totop.show{opacity:1;transform:none;visibility:visible;pointer-events:auto}
.totop:hover{background:var(--rose-deep)}

/* =====================================================================
   动效（JS 可用时才隐藏，避免无脚本空白）
   ===================================================================== */
.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal{opacity:0;transform:translateY(34px)}
.reveal.is-in{opacity:1;transform:none}
.biz .reveal.is-in,.adv .reveal.is-in,.news__list .reveal.is-in,.about .reveal.is-in{transition-delay:calc(var(--i,0) * .08s)}

/* 首屏入场（纯 CSS） */
.hero__title .line{display:block;will-change:transform}
.hero__inner>*{opacity:0;animation:rise .9s var(--ease) forwards}
.eyebrow{animation-delay:.05s}
.hero__title{animation-delay:.16s}
.hero__sub{animation-delay:.34s}
.hero__desc{animation-delay:.44s}
.hero__cta{animation-delay:.54s}
.hero__metrics{animation-delay:.64s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero__mark{opacity:0;animation:markin 1.4s var(--ease) .4s forwards}
@keyframes markin{from{opacity:0;transform:translateY(-46%) scale(.94)}to{opacity:.9;transform:translateY(-52%) scale(1)}}

/* =====================================================================
   响应式
   ===================================================================== */
@media (max-width:1280px){.hero__mark{width:40vw;opacity:.42;right:-8%}}
@media (max-width:1023px){
  .about__grid{grid-template-columns:1fr;gap:40px}
  .biz{grid-template-columns:repeat(2,1fr)}
  .adv__grid{grid-template-columns:repeat(2,1fr);gap:34px}
  .hero__mark{width:60vw;opacity:.5}
  .footer__top{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:900px){
  .nav__toggle{display:flex}
  .nav__links{position:fixed;inset:62px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;background:rgba(253,248,244,.98);padding:8px var(--gut) 26px;transform:translateY(-130%);visibility:hidden;transition:transform .5s var(--ease),visibility .5s;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .nav__links.is-open{transform:none;visibility:visible}
  .nav__links a{width:100%;padding:15px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nav__lang{margin-top:16px}
  .nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__toggle.is-open span:nth-child(2){opacity:0}
  .nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:640px){
  .hero{padding-top:128px}
  .hero__mark{display:none}
  .hero__metrics{gap:24px 36px}
  .biz{grid-template-columns:1fr}
  .adv__grid{grid-template-columns:1fr}
  .news__item,.news__item--feat{grid-template-columns:64px 1fr;gap:14px}
  .news__arr{display:none}
  .footer__top{grid-template-columns:1fr}
  .totop{right:14px;bottom:14px}
}

@media (max-width:480px){.eyebrow,.kicker{letter-spacing:.18em}.eyebrow{font-size:11px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .hero__inner>*,.hero__mark{opacity:1;animation:none}
  .hero__mark{transform:translateY(-50%)}
}