/* ============================================================
   极轴智控 — 首页样张 v2
   首页只做品牌调性：一句话 + 产品一角，不描述产品。
   配色纪律：黑 / 白 / 橘，橘色同屏不超过三处。
   ============================================================ */

:root{
  --ink:        #0A0B0D;
  --ink-2:      #0F1114;
  --paper:      #F4F3F0;
  --fg:         #FFFFFF;
  --fg-dim:     #9AA1A9;
  --fg-dimmer:  #676E76;
  --line:       rgba(255,255,255,.11);
  --line-2:     rgba(255,255,255,.06);
  --orange:     #FF6A1A;
  --orange-soft:#FF8A47;

  --pad:   clamp(20px, 5vw, 72px);
  --gap:   clamp(80px, 11vw, 170px);
  --maxw:  1320px;

  --font: "PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans CJK SC",
          "Microsoft YaHei","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-display: "Inter","Segoe UI Variable Display","Segoe UI","Helvetica Neue",
                  Arial,sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

/* 只有在 JS 可用时才隐藏待入场元素——脚本挂了也不会白屏 */
.js .reveal{ opacity:0; transform:translateY(16px); }
.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}

body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--font);
  font-size:16px;
  line-height:1.7;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,ol,figure{ margin:0; }

@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

.eyebrow{
  font-size:12.5px; font-weight:600; letter-spacing:.2em;
  color:var(--orange);
}

/* ── 按钮 / 文字链 ─────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; padding:0 26px; border-radius:2px;
  font-size:15px; font-weight:600; letter-spacing:.02em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.btn--solid{ background:var(--orange); color:#fff; }
.btn--solid:hover{ background:var(--orange-soft); transform:translateY(-1px); }
.btn--line{ border-color:var(--line); color:var(--fg); }
.btn--line:hover{ border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.04); }
.btn--lg{ height:54px; padding:0 34px; font-size:16px; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; color:var(--fg-dim);
  transition:color .25s var(--ease);
}
.link-arrow span{ transition:transform .3s var(--ease); }
.link-arrow:hover{ color:var(--fg); }
.link-arrow:hover span{ transform:translateX(4px); }

/* ── 导航 ───────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto; z-index:50;
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.nav.is-stuck{
  background:rgba(10,11,13,.72);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--line-2);
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--pad); height:68px;
  display:flex; align-items:center; gap:32px;
}
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
/* .brand__mark：导航左侧的 logo 位，logo 定稿前先不画。
   定稿后把图案放这儿（图片用 <img>，图形继续用 CSS 都行），
   尺寸按 22px 左右留白，别顶到右边字。 */
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__text b{ font-size:15px; font-weight:700; letter-spacing:.06em; }
.brand__text i{
  font-style:normal; font-size:9px; letter-spacing:.22em;
  color:var(--fg-dimmer); font-family:var(--font-display);
}
.nav__links{ display:flex; gap:30px; }
.nav__links a{
  position:relative; font-size:14.5px; color:var(--fg-dim);
  transition:color .22s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px;
  height:1px; background:var(--orange);
  transition:right .3s var(--ease);
}
.nav__links a:hover{ color:var(--fg); }
.nav__links a:hover::after,
.nav__links a[aria-current]::after{ right:0; }
.nav__links a[aria-current]{ color:var(--fg); }
.nav__toggle{ display:none; }

/* ── 首屏 ───────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  padding:120px var(--pad) 0;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
/* 宽屏下 hero 与导航同宽对齐：否则超宽屏上文字贴最左、产品图贴最右，中间空一大块 */
.hero{
  padding-left:calc(max(0px, (100% - var(--maxw)) / 2) + var(--pad));
  padding-right:calc(max(0px, (100% - var(--maxw)) / 2) + var(--pad));
}
.hero__spot{
  position:absolute; right:-6%; bottom:-16%;
  width:min(1200px, 88vw); aspect-ratio:1.3/1;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.10), rgba(255,255,255,.025) 56%, transparent 80%),
    radial-gradient(closest-side at 52% 72%, rgba(255,106,26,.15), transparent 64%);
  pointer-events:none;
}
/* 和 .hero 用同一个居中偏移：绝对定位锚在 padding box 上，加 padding 挪不动它 */
.hero__spot{ right:calc(-6% + max(0px, (100% - var(--maxw)) / 2)); }
.hero__text{ position:relative; z-index:2; max-width:min(600px, 46vw); }
.hero__title{
  margin-top:24px;
  font-size:clamp(38px, 5.4vw, 78px);
  font-weight:800; line-height:1.14; letter-spacing:-.03em;
}
.hero__desc{ margin-top:22px; font-size:16px; color:var(--fg-dim); }
.hero__actions{
  display:flex; align-items:center; gap:28px;
  margin-top:38px; flex-wrap:wrap;
}

/* 产品图从右下角溢出画面，只露一角，不解释产品
   图片是实拍全幅：底色已对齐 --ink，左右上三面都是黑，看不出边 */
.hero__figure{
  position:absolute; z-index:1;
  right:-8vw; bottom:-6%;
  width:min(1100px, 70vw);
  margin:0; pointer-events:none;
}
.hero__figure{ right:calc(-8vw + max(0px, (100% - var(--maxw)) / 2)); }
.hero__figure img{ display:block; width:100%; }

/* ── 品牌陈述 ───────────────────────────────────────────── */
.statement{ padding:var(--gap) var(--pad); }
.statement__text{
  max-width:1080px; margin:0 auto; text-align:center;
  font-size:clamp(23px, 3.2vw, 44px);
  font-weight:600; line-height:1.5; letter-spacing:-.015em;
  text-wrap:balance;
  color:#EDEFF1;
}


/* ── 结尾 ───────────────────────────────────────────────── */
.cta{ padding:0 var(--pad) var(--gap); }
.cta__inner{
  max-width:760px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.cta__title{
  font-size:clamp(28px, 4.2vw, 56px);
  font-weight:800; line-height:1.12; letter-spacing:-.025em;
  text-wrap:balance;
}
.cta__desc{ margin-top:22px; color:var(--fg-dim); font-size:15.5px; max-width:52ch; }
.cta__inner .btn{ margin-top:38px; }
.cta__note{ margin-top:20px; font-size:13px; color:var(--fg-dimmer); letter-spacing:.04em; }

/* ── 404 页 ─────────────────────────────────────────────── */
.err{ padding:150px var(--pad) clamp(90px,12vw,170px); }
.err__inner{ max-width:var(--maxw); margin:0 auto; }
.err__title{
  margin-top:20px;
  font-size:clamp(34px, 4.6vw, 62px);
  font-weight:800; line-height:1.1; letter-spacing:-.03em;
}
.err__desc{ margin-top:20px; max-width:54ch; color:var(--fg-dim); font-size:15.5px; }

/* ── 页脚 ───────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--line-2); padding:0 var(--pad); }
.foot__inner{
  max-width:var(--maxw); margin:0 auto; padding:64px 0 56px;
  display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:40px;
}
.foot__brand{ display:flex; flex-direction:column; gap:12px; max-width:38ch; }
.foot__brand b{ font-size:15px; letter-spacing:.04em; }
.foot__brand span{ font-size:13.5px; color:var(--fg-dimmer); line-height:1.75; }
.foot__col{ display:flex; flex-direction:column; gap:10px; }
.foot__col h3{
  font-size:11px; font-weight:700; letter-spacing:.2em;
  color:var(--fg-dimmer); text-transform:uppercase; margin-bottom:4px;
}
.foot__col a,.foot__col span{ font-size:14px; color:var(--fg-dim); transition:color .2s var(--ease); }
.foot__col a:hover{ color:var(--fg); }
.foot__bar{
  max-width:var(--maxw); margin:0 auto;
  padding:22px 0 30px; border-top:1px solid var(--line-2);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:12.5px; color:var(--fg-dimmer);
}
.foot__bar a:hover{ color:var(--fg-dim); }

/* ── 响应式 ─────────────────────────────────────────────── */
@media (max-width:900px){
  .hero{ justify-content:flex-start; padding-top:130px; }
  .hero__text{ max-width:none; }
  /* 光晕跟着产品图走，别飘在图下面 */
  .hero__spot{ right:auto; left:50%; transform:translateX(-50%); top:34%; bottom:auto; width:124vw; opacity:.8; }
  /* 移动端改为居中铺满，两侧各溢出一截，同样是「一角」的意思 */
  .hero__figure{
    position:static; width:118%; margin:44px -9% -34px;
  }
  .foot__inner{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
}

@media (max-width:720px){
  .nav__inner{ height:60px; gap:16px; }
  .nav__links{
    position:absolute; left:var(--pad); right:var(--pad); top:calc(100% + 8px);
    flex-direction:column; gap:2px; padding:10px;
    background:rgba(16,17,20,.96);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--line); border-radius:2px;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav__links.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav__links a{ padding:11px 8px; font-size:15px; }
  .nav__links a::after{ display:none; }
  .nav__cta{ display:none; }
  .nav__toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:40px; height:34px; padding:0; background:none;
    border:1px solid var(--line); border-radius:2px; cursor:pointer;
  }
  .nav__toggle span{
    display:block; height:1.5px; width:16px; margin:0 auto; background:var(--fg);
    transition:transform .25s var(--ease), opacity .25s var(--ease);
  }
  .nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }


  .statement__text br{ display:none; }
  .foot__inner{ grid-template-columns:1fr; gap:32px; padding:48px 0 40px; }
}
/* ============================================================
   产品列表 + 产品介绍页
   ============================================================ */

/* 抬头（列表页和详情页共用） */
.page-head{ padding:150px var(--pad) 0; }
.page-head__inner{ max-width:var(--maxw); margin:0 auto; }
.page-head__title{
  margin-top:20px;
  font-size:clamp(34px, 4.6vw, 62px);
  font-weight:800; line-height:1.1; letter-spacing:-.03em;
}
.page-head__desc{ margin-top:20px; max-width:54ch; color:var(--fg-dim); font-size:15.5px; }

/* ── 产品列表：一行一个产品，点进去看介绍 ────────────── */
.list{ padding:clamp(44px,5vw,70px) var(--pad) var(--gap); }
.list__inner{ max-width:var(--maxw); margin:0 auto; border-top:1px solid var(--line); }
.list__item{
  display:flex; align-items:baseline; gap:20px;
  padding:27px 2px;
  border-bottom:1px solid var(--line);
  transition:padding-left .3s var(--ease), background .3s var(--ease);
}
.list__item:hover{ padding-left:14px; background:rgba(255,255,255,.025); }
.list__name{
  font-size:clamp(19px, 2.2vw, 29px);
  font-weight:700; letter-spacing:-.015em; color:var(--fg);
}
.list__model{
  margin-left:auto; flex:none;
  font-family:var(--font-display); font-size:12px; font-weight:700;
  letter-spacing:.14em; color:var(--fg-dimmer);
  transition:color .25s var(--ease);
}
.list__arrow{
  flex:none; color:var(--fg-dimmer);
  transition:transform .3s var(--ease), color .25s var(--ease);
}
.list__item:hover .list__model{ color:var(--fg-dim); }
.list__item:hover .list__arrow{ transform:translateX(5px); color:var(--orange); }

/* ── 产品介绍页 ─────────────────────────────────────────── */
.crumb{ font-size:13px; color:var(--fg-dimmer); }
.crumb a{ color:var(--fg-dim); transition:color .2s var(--ease); }
.crumb a:hover{ color:var(--fg); }
.crumb em{ font-style:normal; margin:0 9px; opacity:.45; }

.detail-head{ padding:140px var(--pad) 0; }
.detail-head__inner{ max-width:var(--maxw); margin:0 auto; }
.detail-head__title{
  margin-top:20px;
  font-size:clamp(32px, 4.4vw, 58px);
  font-weight:800; line-height:1.1; letter-spacing:-.03em;
}
.detail-head__model{
  margin-top:16px;
  font-family:var(--font-display); font-size:12.5px; font-weight:700;
  letter-spacing:.18em; color:var(--orange);
}
.detail-head__desc{ margin-top:22px; max-width:56ch; color:var(--fg-dim); font-size:16px; }

.detail-media{ padding:clamp(40px,5vw,72px) var(--pad) 0; }
.detail-media__inner{
  max-width:var(--maxw); margin:0 auto; aspect-ratio:16/9;
  display:grid; place-items:center; overflow:hidden;
  border:1px solid var(--line); background:var(--ink-2);
  background-image:radial-gradient(closest-side at 50% 56%, rgba(255,255,255,.075), transparent 76%);
}
.detail-media img{ max-width:80%; max-height:82%; width:auto; height:auto; }
.detail-media__ph{
  font-family:var(--font-display); font-size:clamp(26px, 4vw, 54px);
  font-weight:700; letter-spacing:.06em; color:rgba(255,255,255,.15);
}

.detail-body{ padding:clamp(52px,6vw,92px) var(--pad) var(--gap); }
.detail-body__inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(36px,5vw,84px); align-items:start;
}
.prose p{ color:var(--fg-dim); font-size:15.5px; line-height:1.85; }
.prose p + p{ margin-top:18px; }
.prose strong{ color:var(--fg); font-weight:700; }
.prose .todo{ color:var(--fg-dimmer); }

.spec{ width:100%; border-collapse:collapse; }
.spec caption{
  text-align:left; padding-bottom:16px;
  font-size:11.5px; font-weight:700; letter-spacing:.2em;
  color:var(--fg-dimmer); text-transform:uppercase;
}
.spec th,.spec td{
  text-align:left; vertical-align:top;
  padding:14px 0; border-top:1px solid var(--line); font-size:14px;
}
.spec th{ width:40%; color:var(--fg-dimmer); font-weight:500; }
.spec td{ color:var(--fg); }

.contact-box{
  margin-top:46px; padding:26px 28px;
  border:1px solid var(--line); background:var(--ink-2);
  display:flex; align-items:center; gap:24px;
}
.contact-box__qr{ width:118px; height:auto; flex:none; border-radius:8px; }
.contact-box__label{
  font-size:11.5px; font-weight:700; letter-spacing:.2em; color:var(--orange);
}
.contact-box__main{ margin-top:14px; font-size:19px; font-weight:700; }
.contact-box__note{ margin-top:12px; font-size:13.5px; color:var(--fg-dimmer); }

/* ── 微信二维码：白底方块，深色页面里当一张卡片用 ───────────
   二维码本身有静默区，只加圆角和一点留白，不额外镶边框，
   免得页面上出现第二个「白框」。 */
.qr{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.cta__inner .qr{ margin-top:36px; }
.qr__img{ width:clamp(148px, 15vw, 180px); height:auto; border-radius:8px; }
.qr__cap{ font-size:13px; color:var(--fg-dimmer); letter-spacing:.04em; }

/* ── 正文小标题 + 包含哪些部分 ───────────────────────────── */
.prose__h{
  margin-top:44px; padding-top:26px; border-top:1px solid var(--line-2);
  font-size:19px; font-weight:800; letter-spacing:-.01em;
}
.parts{ margin:0; }
.parts dt{ margin-top:20px; font-size:14.5px; font-weight:700; color:var(--fg); }
.parts dd{ margin:6px 0 0; font-size:14.5px; line-height:1.75; color:var(--fg-dim); }

/* ── 能开设哪些实验：三段式目录，整段全宽 ───────────────── */
.labs-sec{ padding:0 var(--pad) var(--gap); }
.labs-sec__inner{ max-width:var(--maxw); margin:0 auto; }
.labs-sec__title{ font-size:clamp(24px, 3.2vw, 38px); font-weight:800; letter-spacing:-.022em; }
.labs-sec__lead{ margin-top:16px; max-width:62ch; font-size:15.5px; line-height:1.8; color:var(--fg-dim); }
.labs{ width:100%; border-collapse:collapse; margin-top:38px; }
.labs th,.labs td{ text-align:left; vertical-align:top; }
.labs thead th{
  padding:0 24px 14px 0;
  font-size:11.5px; font-weight:700; letter-spacing:.2em;
  color:var(--fg-dimmer); border-bottom:1px solid var(--line);
}
.labs td{
  padding:18px 24px 18px 0; border-bottom:1px solid var(--line-2);
  font-size:14.5px; line-height:1.65; color:var(--fg-dim);
}
.labs tbody tr td:first-child{ color:var(--fg); }
.labs-sec__note{ margin-top:26px; max-width:70ch; font-size:13.5px; line-height:1.8; color:var(--fg-dimmer); }

/* ── 产品资料图（暗底海报，和页面同底色） ─────────────────
   海报底色已经对齐 --ink，所以这一段的底色也用 --ink，
   图片边缘看不出来，读起来就是「图直接长在页面上」。 */
.shots{ background:var(--ink); padding:clamp(56px,7vw,104px) var(--pad); }
.shots__inner{ max-width:var(--maxw); margin:0 auto; }
.shots__eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.2em;
  color:var(--fg-dimmer); margin-bottom:clamp(22px,3vw,38px);
}
.shots__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(18px,2.6vw,40px);
}
.shots__item{ margin:0; }
.shots__item--wide{ grid-column:1 / -1; }
.shots__item img{ display:block; width:100%; height:auto; }
/* 首图横跨两栏，但按 1:1 显示，不把 1024 的源图拉大 */
.shots__item--wide img{ max-width:1024px; margin:0 auto; }

@media (max-width:1000px){
  .detail-body__inner{ grid-template-columns:1fr; gap:44px; }
}
@media (max-width:560px){
  /* 窄屏放不下「码在左、字在右」，改成上下排 */
  .contact-box{ flex-direction:column; align-items:flex-start; }
  .labs td,.labs thead th{ padding-right:14px; }
}
@media (max-width:720px){
  .shots__grid{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .page-head,.detail-head{ padding-top:110px; }
  .list__item{ flex-wrap:wrap; gap:6px 16px; }
  .list__model{ margin-left:0; }
  .list__arrow{ display:none; }
}
/* ── 主题锁定（部署适配）────────────────────────────────────
   万小智平台会在页面里注入自带应用 CSS：:root{--background:0 0% 100%}
   与 body{background-color:hsl(var(--background)); color:hsl(var(--foreground))}，
   会把设计稿的深色底刷成白色。这里用 !important 把黑底白字锁回来，
   与样式表前后顺序无关，本地预览 / 自有服务器 / 万小智三处表现一致。 */
body{ background:var(--ink) !important; color:var(--fg) !important; }
html{ background:#0A0B0D; }