/* ============================================================
   科瑞 KR-8 · AMG G-Class 式影院级单页（还原版）
   纯黑底 · 全屏影像 · 四字诗化标题 · 左侧 pager · 斜切转场
   ============================================================ */
:root{
  --black:#000;
  --ink:#0a0b0c;
  --paper:#f3f2ef;
  --silver:#c9cccf;
  --mute:rgba(243,242,239,.62);
  --line:rgba(243,242,239,.22);
  /* 英文字体在前：拉丁字符逐字回退命中 Archivo，永不落入中文字体 */
  --serif:'Archivo','Noto Serif SC',Georgia,serif;
  --sans:'Archivo','Noto Sans SC',-apple-system,'Segoe UI',sans-serif;
  --display:'Anton','Noto Serif SC',Georgia,sans-serif;  /* 英文标题展示字 */
  --body-en:'Archivo','Noto Serif SC',sans-serif;        /* 英文正文字 */
  /* 影像炭银调（沿用项目体系） */
  --grade:saturate(.55) contrast(1.06) brightness(.81);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--black);color:var(--paper);
  font-family:var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,video{display:block}
a{color:inherit;text-decoration:none}
sup{font-size:.5em;vertical-align:super}

/* ---------- 顶部导航（黑底常驻）---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:64px;padding:0 32px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  background:rgba(0,0,0,.9);backdrop-filter:blur(8px);
  transition:background .4s ease;
}
.nav.solid{background:#000}
.nav__left{display:flex;align-items:center;gap:30px;justify-self:start}
.nav__menu{
  display:flex;background:none;border:0;cursor:pointer;
  flex-direction:column;gap:5px;width:22px;padding:0;
}
.nav__menu span{height:1.5px;background:var(--paper);display:block;width:100%}
.nav__links{display:flex;gap:30px}
.nav__links a{font-size:13px;letter-spacing:.04em;color:var(--silver);transition:color .25s}
.nav__links a:hover{color:var(--paper)}
.nav__logo{justify-self:center}
.nav__logo img{height:44px;width:auto;object-fit:contain}
/* 中英切换 segmented（圆角胶囊）*/
.nav__lang{justify-self:end;display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.nav__lang button{
  background:none;border:0;cursor:pointer;color:var(--silver);
  font-family:var(--sans);font-size:12px;letter-spacing:.04em;padding:7px 18px;transition:.25s;
}
.nav__lang button.on{background:var(--paper);color:#000}

/* ---------- 通用屏 ---------- */
/* 板块满屏；从 #speed 起改为 sticky 堆叠——下一屏从下方升起盖住上一屏 */
.screen{position:sticky;top:0;width:100%;height:100vh;overflow:hidden}
#stats{position:relative}   /* 参数屏照常滚动，堆叠从 #speed 开始 */
.screen__media{position:absolute;inset:0;z-index:1}
.media__el{width:100%;height:100%;object-fit:cover;filter:var(--grade)}
.media__scrim{position:absolute;inset:0;z-index:2}
.media__scrim--hero{
  background:radial-gradient(120% 90% at 50% 30%,transparent 40%,rgba(0,0,0,.55) 100%),
             linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,rgba(0,0,0,.6));
}
.media__scrim--left{
  background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.4) 42%,transparent 70%),
             linear-gradient(0deg,rgba(0,0,0,.5),transparent 35%);
}
.media__scrim--bottom{
  background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.35) 40%,transparent 68%),
             linear-gradient(0deg,rgba(0,0,0,.8),transparent 46%);
}

/* 文案块（左上角） */
.screen__copy{position:absolute;z-index:5;max-width:560px}
.copy--tl{left:88px;top:24vh}
.copy__title{
  font-family:var(--serif);font-weight:900;
  font-size:clamp(30px,3.6vw,56px);line-height:1.18;letter-spacing:.04em;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.copy__lead{
  margin-top:22px;font-family:var(--serif);font-size:clamp(14px,1.1vw,17px);line-height:2;color:var(--silver);
  font-weight:400;letter-spacing:.02em;
}
.copy__body{
  margin-top:22px;font-family:var(--serif);font-size:14px;line-height:2;color:var(--mute);
  font-weight:400;max-width:430px;
}

/* 标题展示字：英文用 Anton（大写·有气势），中文用思源宋体 Heavy */
html[lang="en"] .copy__title,
html[lang="en"] .hero__brand,
html[lang="en"] .hero__model,
html[lang="en"] .stats__name{
  font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;
}
html[lang="en"] .copy__title{line-height:1.08}
html[lang="zh-CN"] .copy__title,
html[lang="zh-CN"] .hero__brand,
html[lang="zh-CN"] .hero__model,
html[lang="zh-CN"] .stats__name{
  font-family:var(--serif);font-weight:900;text-transform:none;letter-spacing:.04em;
}

/* 正文：英文用 Archivo（工业无衬线），中文用思源宋体 */
html[lang="en"] .copy__lead,
html[lang="en"] .copy__body,
html[lang="en"] .hero__sub,
html[lang="en"] .contact__offer{
  font-family:var(--body-en);font-weight:400;
}
html[lang="zh-CN"] .copy__lead,
html[lang="zh-CN"] .copy__body,
html[lang="zh-CN"] .hero__sub,
html[lang="zh-CN"] .contact__offer{
  font-family:var(--serif);font-weight:400;
}

/* ---------- 数字滚动实力带（#speed 左下角）---------- */
.figures{
  position:absolute;z-index:5;left:88px;bottom:9vh;
  list-style:none;display:flex;align-items:flex-end;gap:0;flex-wrap:wrap;
}
.figures li{padding:0 38px;border-right:1px solid var(--line)}
.figures li:first-child{padding-left:0}
.figures li:last-child{border-right:0}
.figures__num{
  display:block;font-family:var(--serif);font-weight:900;
  font-size:clamp(26px,2.6vw,42px);line-height:1;letter-spacing:.01em;
  color:var(--paper);font-variant-numeric:tabular-nums;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.figures__cap{
  display:block;margin-top:12px;font-family:var(--sans);font-weight:400;
  font-size:14px;letter-spacing:.14em;color:var(--silver);
}

/* ---------- 文案内按钮（板块 CTA）---------- */
.copy__btn{margin-top:32px}

/* ---------- 工艺亮点带（#detail 左下角）---------- */
.crafts{
  position:absolute;z-index:5;left:88px;bottom:9vh;
  list-style:none;display:flex;align-items:flex-end;gap:0;flex-wrap:wrap;
}
.crafts li{padding:0 34px;border-right:1px solid var(--line)}
.crafts li:first-child{padding-left:0}
.crafts li:last-child{border-right:0}
.crafts b{
  display:block;font-family:var(--serif);font-weight:900;
  font-size:clamp(18px,1.8vw,26px);line-height:1.1;letter-spacing:.02em;color:var(--paper);
  text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.crafts span{
  display:block;margin-top:9px;font-family:var(--sans);font-weight:400;
  font-size:12px;letter-spacing:.1em;color:var(--silver);
}

/* ---------- 认证标识带（#capability 左下角）---------- */
.certs{position:absolute;z-index:5;left:88px;bottom:9vh}
.certs__label{
  display:block;margin-bottom:16px;font-family:var(--sans);font-weight:400;
  font-size:12px;letter-spacing:.2em;color:var(--silver);
}
.certs__row{list-style:none;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.certs__row li{
  width:62px;height:62px;border-radius:12px;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}
.certs__row img{width:74%;height:74%;object-fit:contain;display:block}

/* ---------- HERO（钉住式转场轨道）---------- */
.hero{position:relative;height:240vh;background:#000}
.hero__stage{position:sticky;top:0;height:100vh;overflow:hidden}
/* 标题：上方居中两行 */
.hero__top{
  position:absolute;z-index:5;left:0;right:0;top:15vh;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hero__title{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-family:var(--serif);font-weight:900;line-height:1.05;
  text-shadow:0 4px 50px rgba(0,0,0,.55);
}
.hero__brand{font-size:clamp(36px,4.6vw,68px);letter-spacing:.06em}
.hero__model{font-size:clamp(36px,4.8vw,72px);letter-spacing:.06em;font-weight:900}
.hero__sub{
  margin-top:20px;font-family:var(--serif);font-weight:400;
  font-size:clamp(16px,1.5vw,22px);letter-spacing:.16em;color:var(--paper);
}
/* 按钮 + 斜切滚动提示：下方居中 */
.hero__bottom{
  position:absolute;z-index:5;left:0;right:0;bottom:8vh;
  display:flex;flex-direction:column;align-items:center;
}
/* AMG 式斜切块滚动提示：平行四边形向下流动 */
.scrollhint{position:relative;width:20px;height:40px;margin-top:34px}
.scrollhint i{
  position:absolute;left:0;width:18px;height:10px;background:var(--paper);
  transform:skewX(-16deg);opacity:0;
  animation:slatdrop 2.1s cubic-bezier(.6,0,.2,1) infinite;
}
.scrollhint i:nth-child(2){animation-delay:1.05s}
@keyframes slatdrop{
  0%{opacity:0;top:0}
  25%{opacity:1}
  60%{opacity:1}
  100%{opacity:0;top:24px}
}

/* ---------- Hero /// logo 遮罩转场 ----------
   hero 媒体用「有限 5 斜杠 logo」SVG 作 mask（no-repeat 居中）；
   JS 按滚动进度把 mask-size 从超大（一条铺满全屏=完整画面）缩到最终居中（完整 logo 悬于黑底）。*/
.hero__media{
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  will-change:-webkit-mask-size,mask-size;
}

/* ---------- 参数屏 ---------- */
.stats{background:#050506;display:flex;align-items:center;justify-content:center}
.stats__bg{position:absolute;inset:0;z-index:1;overflow:hidden}
/* ① 淡 K 纹理：平铺品牌 K，顶部强、向下渐隐 */
.stats__bg-pattern{
  position:absolute;inset:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 170'%3E%3Cg transform='translate(33,25)' fill='%23ffffff'%3E%3Cpolygon points='6,0 30,0 30,120 6,120'/%3E%3Cpolygon points='30,46 78,0 104,0 30,66'/%3E%3Cpolygon points='30,54 30,74 104,120 78,120'/%3E%3C/g%3E%3C/svg%3E");
  background-size:92px 92px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 26%,transparent 70%);
  mask-image:linear-gradient(180deg,#000 0%,#000 26%,transparent 70%);
}
/* ② 星点点缀 */
.stats__bg-stars{
  position:absolute;inset:0;opacity:.55;
  background:radial-gradient(1.4px 1.4px at 20% 26%,rgba(255,255,255,.5) 50%,transparent),
            radial-gradient(1.2px 1.2px at 72% 18%,rgba(255,255,255,.4) 50%,transparent),
            radial-gradient(1.5px 1.5px at 40% 64%,rgba(255,255,255,.4) 50%,transparent),
            radial-gradient(1.1px 1.1px at 86% 56%,rgba(255,255,255,.32) 50%,transparent),
            radial-gradient(1.3px 1.3px at 56% 40%,rgba(255,255,255,.36) 50%,transparent),
            radial-gradient(1px 1px at 12% 78%,rgba(255,255,255,.28) 50%,transparent),
            radial-gradient(1.2px 1.2px at 90% 84%,rgba(255,255,255,.3) 50%,transparent);
}
/* ③ 产品背光：柔和影棚光（中性冷白、低透明，非荧光）*/
.stats__bg-glow{
  position:absolute;inset:0;
  background:radial-gradient(58% 46% at 50% 50%,
            rgba(196,206,216,.18),rgba(150,160,170,.07) 42%,transparent 70%);
}
/* ④ 地面光晕：产品底部横向柔光 */
.stats__bg-floor{
  position:absolute;inset:0;
  background:radial-gradient(70% 26% at 50% 74%,rgba(180,190,200,.14),transparent 62%);
}
.stats__inner{position:relative;z-index:5;width:100%;max-width:1180px;padding:0 40px;text-align:center}
.stats__head{margin-top:2vh}
.stats__name{font-family:var(--serif);font-weight:900;font-size:clamp(22px,2.4vw,34px);letter-spacing:.05em}
.stats__price{margin-top:10px;font-size:13px;color:var(--silver);letter-spacing:.04em}
/* 机型切换器（整屏内容左右滑动：标题/副标/图/参数全换）*/
.pslider{position:relative;width:100%;max-width:1180px;margin:0 auto}
.pslider__viewport{overflow:hidden;cursor:grab}
.pslider__viewport:active{cursor:grabbing}
.pslider__track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.pslide{flex:0 0 100%;padding:0 60px}
.pslide__head{margin-top:1vh}
.pslide__img{margin:2.4vh auto 0;display:flex;align-items:center;justify-content:center}
.pslide__img img{
  display:block;width:auto;height:auto;max-width:min(600px,62%);max-height:48vh;
  object-fit:contain;pointer-events:none;-webkit-user-drag:none;user-select:none;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.7)) saturate(.85) contrast(1.04);
}
.pslide .stats__row{margin-top:2.4vh}
/* 箭头：整个切换器两侧、垂直居中 */
.pslider__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:48px;height:48px;border:1px solid var(--line);border-radius:50%;
  background:rgba(0,0,0,.25);backdrop-filter:blur(3px);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s;
}
.pslider__arrow:hover{background:var(--paper);border-color:var(--paper)}
.pslider__arrow::before{content:"";width:10px;height:10px;border-top:1.5px solid var(--paper);border-right:1.5px solid var(--paper)}
.pslider__arrow:hover::before{border-color:#000}
.pslider__arrow--prev{left:0}
.pslider__arrow--prev::before{transform:rotate(-135deg);margin-left:4px}
.pslider__arrow--next{right:0}
.pslider__arrow--next::before{transform:rotate(45deg);margin-right:4px}
.stats__row{
  list-style:none;display:flex;justify-content:center;align-items:center;
  gap:0;flex-wrap:wrap;margin-top:1vh;
}
.stats__row li{padding:0 30px;text-align:center;border-right:1px solid var(--line)}
.stats__row li:last-child{border-right:0}
.stats__row b{display:block;font-weight:400;font-size:13px;color:var(--silver);letter-spacing:.04em}
.stats__row span{display:block;margin-top:7px;font-family:var(--serif);font-size:18px;color:var(--paper)}
.stats__cta a{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--paper)}
.stats__cta i{font-style:normal;font-size:16px}
.stats__btn{margin-top:3vh}

/* ---------- 特性标签行 ---------- */
.feature__tabs{
  position:absolute;z-index:6;left:0;right:0;bottom:9vh;
  list-style:none;display:flex;justify-content:center;gap:56px;
  flex-wrap:nowrap;
}
.feature__tabs li{
  position:relative;width:150px;padding:20px 0 0;font-size:15px;
  color:var(--silver);letter-spacing:.04em;cursor:pointer;transition:color .25s;
}
/* 每个 tab 顶部各自一截宽线（AMG 式分段，非连续整线）*/
.feature__tabs li::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:1px;
  background:var(--line);transition:background .25s,height .25s;
}
.feature__tabs li:hover{color:var(--paper)}
.feature__tabs li.on{color:var(--paper);font-weight:600}
.feature__tabs li.on::before{background:var(--paper);height:2px}
/* 切换：图用叠加层交叉淡化（不透出底层），文案单独淡入 */
.feature--swap .copy__title,
.feature--swap .copy__body{transition:opacity .4s ease}
.feature--swap.swapping .copy__title,
.feature--swap.swapping .copy__body{opacity:0}
.media__el--swap{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:1;opacity:0;transition:opacity .5s ease;
}

/* ---------- CTA / 整线交付 ---------- */
.contact__offer{margin-top:22px;font-family:var(--serif);font-weight:400;font-size:14px;line-height:2.1;color:var(--silver)}
.contact__btns{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-block;padding:14px 38px;font-size:13px;letter-spacing:.08em;
  border:1px solid rgba(243,242,239,.55);border-radius:2px;
  transition:background .3s,color .3s,border-color .3s;cursor:pointer;
}
.btn--ghost:hover{background:var(--paper);color:#000;border-color:var(--paper)}
.btn--solid{background:var(--paper);color:#000;border-color:var(--paper)}
.btn--solid:hover{background:transparent;color:var(--paper)}
/* 圆形 pill（Hero 同款）*/
.btn--pill{
  border-radius:999px;padding:16px 62px;font-size:14px;letter-spacing:.1em;
  border:1px solid rgba(243,242,239,.6);background:rgba(0,0,0,.12);
  backdrop-filter:blur(2px);
}
.btn--pill:hover{background:var(--paper);color:#000;border-color:var(--paper)}

/* ---------- 页脚 ---------- */
.foot{background:#000;padding:70px 88px 40px}
.foot__legal p{font-size:12px;line-height:1.9;color:rgba(243,242,239,.4);max-width:1000px;margin-bottom:8px}
.foot__bar{
  margin-top:40px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  font-size:12px;color:var(--silver);
}
.foot__links{display:flex;gap:28px}
.foot__links a:hover{color:var(--paper)}

/* ---------- 进场动效 ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- 响应式 ---------- */
/* 平板：收窄左边距 */
@media (max-width:1180px){
  .copy--tl{left:56px}
  .figures,.crafts,.certs{left:56px}
  .foot{padding:60px 56px 36px}
}

/* 手机 / 窄屏 */
@media (max-width:900px){
  .nav{padding:0 18px;grid-template-columns:auto 1fr auto}
  .nav__menu{display:flex}
  /* 汉堡下拉菜单 */
  .nav__links{
    display:flex;position:fixed;top:64px;left:0;right:0;flex-direction:column;gap:0;
    background:#000;border-top:1px solid var(--line);
    transform:translateY(-14px);opacity:0;pointer-events:none;
    transition:opacity .28s ease,transform .28s ease;
  }
  .nav.menu-open .nav__links{transform:none;opacity:1;pointer-events:auto}
  .nav__links a{padding:17px 24px;font-size:15px;color:var(--paper);border-bottom:1px solid var(--line)}
  /* 文案改顶部锚定，避让底部数据带 */
  .copy--tl{left:24px;right:24px;top:13vh;bottom:auto;max-width:none}
  .copy__title{font-size:clamp(26px,7vw,38px);letter-spacing:.02em}
  .copy__lead,.copy__body{font-size:14px;max-width:none}
  .copy__btn{margin-top:24px}
  /* 特性 tab：按内容宽横向滚动（作指示器，滑动板块切换）*/
  .feature__tabs{left:24px;right:0;bottom:5vh;gap:22px;justify-content:flex-start;
    overflow-x:auto;flex-wrap:nowrap;padding-right:24px;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;scroll-behavior:smooth}
  .feature__tabs::-webkit-scrollbar{display:none}
  .feature__tabs li{width:auto;min-width:max-content;padding:12px 0 0;white-space:nowrap;font-size:14px}
  /* 可滑动提示（置于 tab 行上方右侧，避免重叠）*/
  .feature::after{
    content:"‹ swipe ›";position:absolute;z-index:5;right:24px;bottom:calc(5vh + 52px);
    font-family:var(--sans);font-size:11px;letter-spacing:.18em;color:var(--silver);
    opacity:.45;pointer-events:none;
  }
  /* 数字带 / 工艺带：2×2 网格 */
  .figures,.crafts{left:24px;right:24px;bottom:5vh;display:grid;grid-template-columns:1fr 1fr;
    gap:18px 22px;align-items:start}
  .figures li,.crafts li{padding:0;border-right:0}
  .figures__num{font-size:clamp(22px,7vw,32px)}
  .figures__cap{font-size:12px;letter-spacing:.06em;margin-top:7px}
  .crafts b{font-size:clamp(15px,5vw,20px)}
  /* 认证带 */
  .certs{left:24px;right:24px;bottom:5vh}
  .certs__label{margin-bottom:12px}
  .certs__row{gap:10px}
  .certs__row li{width:48px;height:48px;border-radius:10px}
  /* 参数屏 */
  .stats__inner{padding:0 24px}
  .stats__name{font-size:clamp(18px,5vw,26px)}
  .pslide{padding:0 30px}
  .pslide__img img{max-width:82%;max-height:34vh}
  .pslider__arrow{width:38px;height:38px}
  .pslide .stats__row{margin-top:2vh}
  .stats__row{margin-top:2vh}
  .stats__row li{padding:8px 14px;border-right:0}
  /* HERO */
  .hero__top{top:16vh}
  .hero__brand{font-size:clamp(24px,7.5vw,40px)}
  .hero__model{font-size:clamp(24px,7vw,40px)}
  .hero__sub{font-size:clamp(13px,3.6vw,17px);letter-spacing:.1em;padding:0 24px;text-align:center}
  /* 页脚 */
  .foot{padding:50px 24px 30px}
  .foot__bar{flex-direction:column;align-items:flex-start;gap:14px}
  .foot__links{gap:20px;flex-wrap:wrap}
}

/* 小屏手机 */
@media (max-width:560px){
  .copy--tl{top:12vh}
  .copy__title{font-size:clamp(23px,8vw,32px)}
  .copy__lead,.copy__body{line-height:1.85}
  .figures,.crafts{gap:14px 16px}
  .figures__cap{letter-spacing:.04em}
  .certs__row li{width:44px;height:44px}
  .btn{padding:13px 28px}
  .btn--pill{padding:14px 46px}
  .contact__btns{gap:12px}
}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}