/* =========================================================
   男春宝颗粒 · 国潮盛世
   四屏 / 一屏一个信息点 / 深色科技风
   ========================================================= */

:root{
  --bg:      #08090A;
  --bg-2:    #0C0E10;
  --fg:      #F2F2F0;
  --fg-2:    rgba(242,242,240,.56);
  --fg-3:    rgba(242,242,240,.32);
  --line:    rgba(255,255,255,.09);
  --gold:    #C8A96B;
  --warn:    #D9A441;

  --ease:    cubic-bezier(.22,.61,.36,1);
  --pad:     clamp(24px, 6vw, 96px);
  --font:    "PingFang SC","HarmonyOS Sans SC","Source Han Sans SC",
             "Microsoft YaHei Light","Microsoft YaHei",system-ui,
             -apple-system,"Segoe UI",Roboto,sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:16px; line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ol,ul{ list-style:none; }

/* ---------- 滚动进度 ---------- */
.progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:120;
  background:linear-gradient(90deg,var(--gold),#E8D3A9);
  transition:width .1s linear;
}

/* ---------- 导航 ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .4s var(--ease);
}
.nav.solid{
  background:rgba(8,9,10,.72);
  backdrop-filter:saturate(1.6) blur(18px);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:1560px; margin:0 auto; padding:0 var(--pad);
  height:72px; display:flex; align-items:center; gap:32px;
  transition:height .4s var(--ease);
}
.nav.solid .nav-in{ height:62px; }

.brand{ display:flex; align-items:baseline; gap:10px; flex:none; }
.brand-zh{ font-size:16px; font-weight:600; letter-spacing:.16em; }
.brand-en{ font-size:8.5px; letter-spacing:.24em; color:var(--fg-3); font-weight:500; }

.nav-links{ display:flex; align-items:center; gap:34px; margin-left:auto; }
.nav-links a{
  font-size:13.5px; color:var(--fg-2); letter-spacing:.06em;
  position:relative; padding:4px 0; transition:color .25s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .3s var(--ease);
}
.nav-links a:hover{ color:var(--fg); }
.nav-links a:hover::after{ width:100%; }
.nav-links a.on{ color:var(--fg); }

.burger{
  display:none; width:36px; height:36px; margin-left:auto;
  background:none; border:0; cursor:pointer; padding:9px 4px;
  flex-direction:column; justify-content:space-between;
}
.burger span{
  display:block; height:1px; background:var(--fg); width:100%;
  transition:transform .3s var(--ease), opacity .2s;
}
.burger.x span:nth-child(1){ transform:translateY(8.5px) rotate(45deg); }
.burger.x span:nth-child(2){ transform:translateY(-8.5px) rotate(-45deg); }

/* ---------- 屏 ---------- */
.pane{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(96px,14vh,170px) 0;
  overflow:hidden;
}
.pane-in{ max-width:1020px; margin:0 auto; padding:0 var(--pad); width:100%; }
.pane-in.wide{ max-width:1560px; }

.sec-no{
  display:block; font-size:11px; letter-spacing:.28em;
  color:var(--gold); font-weight:600;
  margin-bottom:clamp(24px,4vh,44px);
}

h2{
  font-size:clamp(30px,4.2vw,56px);
  font-weight:600; line-height:1.16; letter-spacing:-.022em;
}
h2.big{
  font-size:clamp(38px,6.8vw,96px);
  letter-spacing:-.035em; line-height:1.03;
}

.lead{
  font-size:clamp(15px,1.25vw,17px);
  color:var(--fg-2); line-height:1.95; max-width:54ch;
  font-weight:300;
}

/* ---------- 一 · 首屏 ---------- */
.pane-hero{
  background:
    radial-gradient(1200px 800px at 72% 18%, #16211F 0%, transparent 62%),
    radial-gradient(900px 700px at 12% 92%, #1A1614 0%, transparent 60%),
    var(--bg);
}
.hero-glow{
  position:absolute; width:min(78vw,900px); aspect-ratio:1;
  right:-14vw; top:50%; transform:translateY(-50%);
  background:radial-gradient(circle, rgba(200,169,107,.16) 0%, rgba(200,169,107,.04) 42%, transparent 68%);
  filter:blur(30px); pointer-events:none;
}
.hero-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  mask-image:radial-gradient(circle at 62% 46%, #000 12%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 62% 46%, #000 12%, transparent 72%);
}
.pane-hero .pane-in{ position:relative; z-index:2; }

.hero-co{
  font-size:clamp(11px,.95vw,13px); letter-spacing:.32em;
  color:var(--fg-2); font-weight:300;
  margin-bottom:clamp(26px,4.5vh,46px);
}
.hero-title{
  font-size:clamp(56px,13.5vw,196px);
  line-height:.94; letter-spacing:-.045em; font-weight:600;
  display:flex; flex-direction:column;
}
.hero-title .thin{
  font-weight:200; color:var(--fg-3);
  letter-spacing:.02em; font-size:.62em;
  margin-top:.12em; padding-left:.06em;
}
.hero-desc{
  margin-top:clamp(26px,5vh,50px);
  font-size:clamp(13px,1.1vw,15px);
  color:var(--fg-2); letter-spacing:.14em; font-weight:300;
}
.cue{
  position:absolute; bottom:clamp(28px,5vh,52px); left:var(--pad); z-index:3;
}
.cue i{
  display:block; width:1px; height:56px;
  background:linear-gradient(180deg, transparent, var(--fg-3) 42%, transparent);
  animation:scrollCue 2.4s var(--ease) infinite;
  transform-origin:top;
}
@keyframes scrollCue{
  0%{ transform:scaleY(0); opacity:0; }
  35%{ opacity:1; }
  75%{ transform:scaleY(1); opacity:1; }
  100%{ transform:scaleY(1); opacity:0; }
}

/* ---------- 二 · 产品 ---------- */
.pane-product{ background:var(--bg-2); }

.prod-wrap{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,90px); align-items:center;
}

.pv{
  position:relative; width:100%; aspect-ratio:1/1.06;
  border:1px solid var(--line); border-radius:2px;
  display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(560px 400px at 50% 40%, #1B2422 0%, transparent 66%),
    linear-gradient(160deg,#101415 0%,#0A0C0D 100%);
}
.pv-glow{
  position:absolute; width:64%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(200,169,107,.24) 0%, transparent 66%);
  filter:blur(46px);
}
.pv-lines{
  position:absolute; inset:0; opacity:.55;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 50%, #000 18%, transparent 74%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 18%, transparent 74%);
}
.pv-box{
  position:relative; z-index:2;
  width:min(78%,330px); aspect-ratio:240/170;
  border:1px solid rgba(200,169,107,.38);
  border-radius:3px; overflow:hidden;
  background:#0B0B0C;
  box-shadow:
    0 0 60px rgba(200,169,107,.12),
    0 24px 48px rgba(0,0,0,.55),
    0 4px 12px rgba(0,0,0,.4);
  transform:perspective(900px) rotateX(2deg);
}
.pv-box svg{ display:block; width:100%; height:100%; }
.pv-tip{
  position:absolute; bottom:14px; right:16px; z-index:3;
  font-size:10px; letter-spacing:.16em; color:rgba(242,242,240,.22);
}

.prod-info h2{ margin-bottom:8px; }
.brand{
  font-size:13px; letter-spacing:.28em; color:var(--gold);
  margin-bottom:clamp(20px,3.5vh,34px); font-weight:500;
}
.brand .reg{ font-size:9px; letter-spacing:0; vertical-align:super; margin-left:2px; }
.prod-info .lead{ margin-bottom:clamp(28px,4.5vh,44px); }

.spec{ border-top:1px solid var(--line); }
.spec > div{
  display:flex; align-items:baseline; gap:20px;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.spec dt{
  flex:none; width:72px;
  font-size:10.5px; letter-spacing:.2em; color:var(--fg-3); font-weight:500;
}
.spec dd{ font-size:clamp(14px,1.15vw,15.5px); color:var(--fg); line-height:1.6; }
.todo{ color:var(--warn) !important; font-size:13.5px !important; }

.legal{
  margin-top:24px; font-size:11.5px; color:var(--fg-3); letter-spacing:.04em;
}

/* ---------- 三 · 传承 ---------- */
.pane-heritage{ background:var(--bg); }
.pane-heritage h2{ margin-bottom:20px; }
.pane-heritage .lead{ margin-bottom:clamp(44px,7vh,76px); max-width:58ch; }

.timeline{
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);
}
.timeline li{
  position:relative;
  padding:34px 22px 0 0;
}
.timeline li::before{
  content:""; position:absolute; top:-2.5px; left:0;
  width:5px; height:5px; border-radius:50%; background:var(--gold);
}
.t-year{
  display:block;
  font-size:clamp(26px,2.8vw,40px);
  font-weight:600; letter-spacing:-.03em; line-height:1;
  font-variant-numeric:tabular-nums;
  margin-bottom:14px;
}
.t-tag{
  display:inline-block;
  font-size:10px; letter-spacing:.22em; color:var(--gold);
  font-weight:600; margin-bottom:12px;
  padding-bottom:8px; border-bottom:1px solid rgba(200,169,107,.32);
}
.timeline p{
  font-size:12.8px; color:var(--fg-2); line-height:1.85; font-weight:300;
}
.h-note{
  margin-top:clamp(44px,7vh,76px);
  font-size:13px; color:var(--fg-2); line-height:1.95;
  padding-left:20px; border-left:1px solid var(--gold);
  max-width:64ch; font-weight:300;
}

/* ---------- 四 · 联系 ---------- */
.pane-contact{ background:var(--bg-2); }
.contact-cols{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,90px); align-items:start;
}
.contact-cols h2{ margin-bottom:24px; font-size:clamp(28px,3.8vw,50px); }
.todo-note{
  margin-top:26px; font-size:12.5px; color:var(--warn);
  line-height:1.85; padding-left:16px;
  border-left:1px solid rgba(217,164,65,.4);
}

.contacts{ border-top:1px solid var(--line); }
.ct{
  display:flex; flex-direction:column; gap:10px;
  padding:20px 0; border-bottom:1px solid var(--line);
  transition:color .25s;
}
a.ct:hover .ct-v{ color:var(--gold); }
.ct-k{ font-size:10.5px; letter-spacing:.24em; color:var(--fg-3); font-weight:500; }
.ct-v{
  font-size:clamp(16px,1.6vw,21px); font-weight:400;
  letter-spacing:-.01em; line-height:1.45; transition:color .25s;
}

/* ---------- 页脚 ---------- */
.foot{ background:var(--bg-2); border-top:1px solid var(--line); padding:36px 0; }
.foot-in{
  max-width:1560px; margin:0 auto; padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  font-size:11.5px; color:var(--fg-3); letter-spacing:.06em;
}

/* ---------- 滚动淡入 ---------- */
html.js .reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
html.js .reveal.in{ opacity:1; transform:none; }

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

/* =========================================================
   响应式
   ========================================================= */
@media (max-width: 1080px){
  .prod-wrap{ gap:44px; }
  .flow li{ padding-right:18px; }
}

@media (max-width: 860px){
  .pane{ min-height:auto; padding:clamp(88px,15vh,130px) 0; }
  .pane-hero{ min-height:100svh; }

  .nav-links{
    position:fixed; inset:62px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(8,9,10,.97);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    padding:8px var(--pad) 22px;
    transform:translateY(-120%); opacity:0; pointer-events:none;
    transition:transform .4s var(--ease), opacity .3s;
    margin-left:0;
  }
  .nav-links.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links a{ padding:16px 0; border-bottom:1px solid var(--line); font-size:15px; }
  .nav-links a:last-child{ border-bottom:0; }
  .nav-links a::after{ display:none; }
  .burger{ display:flex; }

  .prod-wrap{ grid-template-columns:1fr; gap:36px; }
  .pv{ aspect-ratio:4/3; }

  .timeline{ grid-template-columns:1fr 1fr; border-top:0; }
  .timeline li{
    border-top:1px solid var(--line);
    padding:26px 18px 0 0;
  }
  .timeline li:nth-child(2n){ padding-right:0; padding-left:18px; }
  .timeline li:nth-child(2n)::before{ left:18px; }

  .contact-cols{ grid-template-columns:1fr; gap:38px; }
  .foot-in{ flex-direction:column; align-items:flex-start; gap:10px; }
}

@media (max-width: 560px){
  .hero-title{ font-size:clamp(48px,15.5vw,74px); }
  h2.big{ font-size:clamp(32px,9.5vw,46px); }
  .brand-en{ display:none; }
  .lead{ font-size:14.5px; }
  .timeline{ grid-template-columns:1fr; }
  .timeline li{ padding:24px 0 0; }
  .timeline li:nth-child(2n){ padding-left:0; }
  .timeline li:nth-child(2n)::before{ left:0; }
  .t-year{ font-size:30px; }
  .spec dt{ width:64px; }
  .ct-v{ font-size:16px; }
}