/* ============================================================
   Home — 芯烨 · 能源基础设施三维拆解 主页
   ============================================================ */

body{ background:var(--sky-100); }

/* ---------------- 导航 ---------------- */
.hnav{
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; gap:16px;
  padding:18px 38px;
  transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s;
}
.hnav.is-scrolled{
  padding:11px 38px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 1px 0 rgba(22,41,61,.07), 0 12px 34px -26px rgba(16,44,70,.5);
}
.hnav__spacer{ flex:1; }
.hnav__links{ display:flex; align-items:center; gap:4px; }
.hnav__link{
  padding:7px 14px; border-radius:99px;
  font-size:12.5px; font-weight:600; color:var(--text-2);
  transition:.25s var(--ease);
}
.hnav__link:hover{ color:var(--ink); background:rgba(255,255,255,.72); }
.hnav__link.is-on{ color:var(--ink); }
.hnav__cta{
  margin-left:10px;
  padding:8px 18px; border-radius:99px;
  font-size:12.5px; font-weight:600;
  color:#241a08;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep));
  box-shadow:0 10px 24px -14px rgba(168,130,74,.9);
  transition:.3s var(--ease);
}
.hnav__cta:hover{ transform:translateY(-1px); box-shadow:0 16px 30px -14px rgba(168,130,74,.95); }

/* ---------------- Hero ---------------- */
.hero{
  position:relative; height:100vh; min-height:660px;
  overflow:hidden;
  background:
    radial-gradient(110% 85% at 72% 18%, #EDF6FD 0%, #E9F3FB 40%, #D5E8F6 76%, #C9E0F2 100%);
}
.hero__grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(62,143,201,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62,143,201,.09) 1px, transparent 1px);
  background-size:84px 84px;
  -webkit-mask-image:radial-gradient(75% 70% at 62% 45%, #000 0%, transparent 80%);
  mask-image:radial-gradient(75% 70% at 62% 45%, #000 0%, transparent 80%);
}
.hero__glow{
  position:absolute; right:2%; top:6%; width:62vw; height:62vw;
  background:radial-gradient(circle, rgba(198,161,91,.16) 0%, rgba(198,161,91,0) 60%);
  pointer-events:none;
}

/* 3D 舞台 */
.hero__stage{
  position:absolute; right:0; top:0; width:68%; height:100%;
  transition:opacity .22s var(--ease);
}
/* 切站时不要淡到 0：全透明那一下露出来的是浅底，看起来就是白闪。
   留 55% 让旧画面在，新场景建完再接上，读起来是一次暗换而不是空白。 */
.hero__stage.is-fading{ opacity:.55; }
#home-canvas{ width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
#home-canvas:active{ cursor:grabbing; }

/* 左侧文案 */
.hero__copy{
  position:absolute; left:6.5%; top:50%; transform:translateY(-50%);
  width:min(480px, 40%); z-index:5;
}
.hero__kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:10.5px; font-weight:600; letter-spacing:.26em;
  color:var(--gold-deep); text-transform:uppercase;
}
.hero__kicker::before{ content:""; width:26px; height:1px; background:var(--gold); }

.hero__title{
  font-family:var(--serif);
  font-size:clamp(38px, 4.6vw, 66px);
  font-weight:700; line-height:1.14; letter-spacing:.02em;
  color:var(--ink); margin:20px 0 0;
}
.hero__title em{
  font-style:normal; color:var(--gold-deep);
  position:relative; white-space:nowrap;
}
.hero__title em::after{
  content:""; position:absolute; left:0; right:0; bottom:6px; height:8px;
  background:linear-gradient(90deg, rgba(198,161,91,.28), rgba(198,161,91,0));
  z-index:-1;
}

.hero__sub{
  margin-top:22px; font-size:14px; line-height:1.95;
  color:var(--text-2); max-width:400px;
}
.hero__sub b{ color:var(--ink); font-weight:600; }

.hero__cur{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:26px; padding:5px 15px 5px 5px;
  border-radius:99px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(255,255,255,.94);
  box-shadow:0 8px 22px -18px rgba(16,44,70,.55);
}
.hero__cur-no{
  font-family:var(--mono); font-size:10px; font-weight:700;
  color:#241a08;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep));
  padding:2px 8px; border-radius:99px; letter-spacing:.06em;
}
.hero__cur-name{
  font-size:11.5px; font-weight:600; color:var(--text); letter-spacing:.02em;
}

.hero__stats{
  display:flex; gap:20px; margin-top:16px;
}
.hero__stat span{
  display:block; font-size:9.5px; letter-spacing:.16em;
  color:var(--text-3); text-transform:uppercase; margin-bottom:3px;
}
.hero__stat b{
  font-family:var(--mono); font-size:16px; font-weight:600; color:var(--ink);
  letter-spacing:-.01em;
}
.hero__stat b i{ font-style:normal; font-size:10px; color:var(--text-3); margin-left:2px; }

.hero__actions{ display:flex; align-items:center; gap:12px; margin-top:30px; }
.hero__enter{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border-radius:99px;
  font-size:13.5px; font-weight:600; color:#241a08;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep));
  box-shadow:0 16px 36px -16px rgba(168,130,74,.95);
  transition:.3s var(--ease);
}
.hero__enter:hover{ transform:translateY(-2px); box-shadow:0 22px 44px -18px rgba(168,130,74,1); }
.hero__enter .ar{ transition:transform .3s var(--ease); }
.hero__enter:hover .ar{ transform:translateX(4px); }

.hero__hint{
  font-size:11px; color:var(--text-3); letter-spacing:.02em;
  display:flex; align-items:center; gap:6px;
}

/* ---------------- 底部切换条 ---------------- */
.hero__dock{
  position:absolute; left:6.5%; bottom:38px; z-index:6;
  display:flex; align-items:center; gap:12px;
}
.dock-arrow{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.9);
  color:var(--text-2);
  box-shadow:0 6px 16px -10px rgba(16,44,70,.5);
  transition:.25s var(--ease);
}
.dock-arrow:hover{ background:#fff; color:var(--ink); transform:scale(1.06); }

.scards{ display:flex; gap:9px; }
.scard{
  position:relative; width:150px;
  padding:12px 14px 13px;
  border-radius:13px; text-align:left;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 10px 26px -22px rgba(16,44,70,.6);
  transition:.35s var(--ease);
  overflow:hidden;
}
.scard:hover{ transform:translateY(-3px); background:rgba(255,255,255,.92); }
.scard.is-on{
  /* 2026-10-30：选中态由深蓝改为全站金色体系，与 .hnav__cta / 站点主按钮一致 */
  background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep));
  border-color:rgba(168,130,74,.78);
  box-shadow:0 18px 40px -22px rgba(176,138,71,.62);
  transform:translateY(-3px);
}
.scard__no{
  font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  color:var(--text-3);
}
.scard.is-on .scard__no{ color:rgba(36,26,8,.62); }
.scard__name{
  display:block; font-size:12.5px; font-weight:700; color:var(--ink);
  margin-top:3px; letter-spacing:.01em;
}
.scard.is-on .scard__name{ color:#241a08; }
.scard__meta{
  display:block; font-size:9.5px; color:var(--text-3); margin-top:2px;
  font-family:var(--mono);
}
.scard.is-on .scard__meta{ color:rgba(36,26,8,.58); }
.scard__bar{
  position:absolute; left:0; bottom:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transition:width .3s linear;
}
.scard.is-on .scard__bar{ width:100%; background:rgba(36,26,8,.45); }

/* 序号 */
.hero__count{
  position:absolute; right:38px; bottom:40px; z-index:6;
  font-family:var(--mono); font-size:11px; color:var(--text-3);
  letter-spacing:.1em;
}
.hero__count b{ color:var(--ink); font-size:15px; }

/* 滚动提示 */
.hero__scroll{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  font-size:9px; letter-spacing:.3em; color:var(--text-3);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  z-index:5; pointer-events:none;
}
.hero__scroll i{
  display:block; width:1px; height:26px;
  background:linear-gradient(180deg, rgba(22,41,61,.35), transparent);
}

/* ---------------- 内容区 ---------------- */
.about{
  position:relative; z-index:2;
  padding:96px 0 80px;
  background:linear-gradient(180deg, #FFFFFF 0%, #F7FBFE 100%);
  border-top:1px solid rgba(22,41,61,.06);
}
.wrap{ width:min(1180px, calc(100% - 80px)); margin:0 auto; }

.about__head{ max-width:640px; }
.about__head h2{
  font-family:var(--serif); font-size:clamp(26px,3vw,38px);
  font-weight:700; line-height:1.3; color:var(--ink); margin:14px 0 0;
  letter-spacing:.02em;
}
.about__head p{
  margin-top:16px; font-size:13.5px; line-height:2; color:var(--text-2);
}

.cards3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  margin-top:48px;
}
.vcard{
  padding:26px 24px 24px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(22,41,61,.07);
  box-shadow:0 16px 40px -32px rgba(16,44,70,.55);
  transition:.35s var(--ease);
  position:relative; overflow:hidden;
}
.vcard::after{
  content:""; position:absolute; left:0; top:0; width:3px; height:0;
  background:linear-gradient(180deg,var(--gold),var(--gold-soft));
  transition:height .45s var(--ease);
}
.vcard:hover{ transform:translateY(-4px); box-shadow:0 28px 56px -34px rgba(16,44,70,.55); }
.vcard:hover::after{ height:100%; }
.vcard__ico{
  width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(62,143,201,.10), rgba(62,143,201,.03));
  color:var(--cyan-deep);
  margin-bottom:16px;
}
.vcard h3{
  font-family:var(--serif); font-size:17px; font-weight:700; color:var(--ink);
  letter-spacing:.02em;
}
.vcard__tag{
  font-size:9.5px; letter-spacing:.18em; color:var(--gold-deep);
  text-transform:uppercase; margin-top:4px;
}
.vcard p{ margin-top:12px; font-size:12.5px; line-height:1.95; color:var(--text-2); }
.vcard__key{
  margin-top:16px; padding-top:14px; border-top:1px solid rgba(22,41,61,.07);
  font-size:11px; color:var(--text-3);
}
.vcard__key b{ color:var(--ink); font-family:var(--mono); font-weight:600; }

/* ---------------- 页脚 ---------------- */
.foot{
  padding:40px 0 34px;
  background:#0A1622; color:rgba(232,236,239,.72);
}
.foot__row{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
}
.foot .brand__text b{ color:#F2F5F8; }
.foot .brand__text span{ color:rgba(232,236,239,.42); }
.foot__creed{
  flex:1; text-align:center; min-width:320px;
  font-size:10.5px; letter-spacing:.10em;
  color:rgba(214,199,172,.72);
}
.foot__creed b{ color:var(--gold-soft); font-weight:600; letter-spacing:.06em; }
.foot__meta{ font-size:10px; color:rgba(232,236,239,.38); letter-spacing:.04em; }

/* ---------------- 响应式 ---------------- */
@media (max-width:1180px){
  .hero__copy{ left:5%; width:44%; }
  .hero__stage{ width:64%; }
  .scard{ width:132px; }
}

@media (max-width:980px){
  .hnav{ padding:14px 22px; }
  .hnav.is-scrolled{ padding:10px 22px; }
  .hnav__link{ display:none; }

  .hero{ height:auto; min-height:0; padding:96px 0 40px; }
  .hero__stage{
    position:relative; width:100%; height:52vh; min-height:340px;
    margin-top:8px;
  }
  .hero__copy{
    position:relative; left:auto; top:auto; transform:none;
    width:min(560px, calc(100% - 44px)); margin:0 auto;
  }
  .hero__title{ font-size:clamp(32px,7vw,46px); }
  .hero__stats{ gap:20px; }
  .hero__dock{
    position:relative; left:auto; bottom:auto;
    width:calc(100% - 44px); margin:6px auto 0;
    overflow-x:auto; padding-bottom:4px;
  }
  .scards{ flex:1; }
  .scard{ width:auto; flex:1; min-width:112px; }
  .hero__count, .hero__scroll{ display:none; }
  .hero__grid{ opacity:.7; }

  .about{ padding:64px 0 56px; }
  .wrap{ width:calc(100% - 44px); }
  .cards3{ grid-template-columns:1fr; gap:14px; margin-top:32px; }
}

@media (max-width:620px){
  .hero__stats{ flex-wrap:wrap; gap:14px 22px; }
  .hero__stat b{ font-size:14px; }
  .hero__actions{ flex-direction:column; align-items:flex-start; gap:14px; }
  .hero__enter{ width:100%; justify-content:center; }
  .scard{ min-width:100px; padding:10px 11px; }
  .scard__name{ font-size:11.5px; }
  .dock-arrow{ display:none; }
  .foot__row{ flex-direction:column; align-items:flex-start; gap:12px; }
}