/* ==========================================================================
   华想科技 · 官网样式
   设计语言：深色影音质感 + 金色点缀 + 衬线标题（对齐参考站 /services）
   配色取自参考站实际 tokens
   ========================================================================== */

:root{
  /* 深色基调 */
  --base:#0d0d0f;          /* 页面底色 */
  --surface:#17171b;       /* 卡片 */
  --surface-alt:#1e1e23;   /* 次级卡片 */
  --line:#2a2a30;          /* 描边 */

  /* 文字 */
  --ink:#f5f2ec;           /* 主文字（暖白） */
  --ink-muted:#9b978e;     /* 次文字 */

  /* 金色主色 */
  --gold:#c8a45c;
  --gold-hover:#e3c088;

  /* 浅色（奶油）区块 */
  --paper:#f7f5f1;
  --paper-ink:#1a1a1e;
  --paper-muted:#5c5a55;

  --radius:4px;
  --nav-h:80px;
  --maxw:1200px;

  /* 可由后台覆盖的品牌色（用于 logo 换色） */
  --logo-color:var(--ink);

  /* 金底之上的文字色（金底深字，明暗模式通用） */
  --on-accent:#1d1607;

  color-scheme:dark;

  --font-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-display:"Noto Serif SC","Source Han Serif SC","Songti SC",SimSun,serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-card:0 1px 2px rgba(0,0,0,.4);
  --shadow-card-hover:0 18px 40px -12px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--base);color:var(--ink);
  font-family:var(--font-sans);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;line-height:1.25}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--gold);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- 布局 ---------- */
.section-container{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%}
.section{padding:96px 0;position:relative}
@media(min-width:768px){.section{padding:128px 0}}
.section--base{background:var(--base)}
.section--surface{background:var(--surface)}
.section--paper{background:var(--paper);color:var(--paper-ink)}
.section--tight{padding:56px 0}

/* ---------- 标题 ---------- */
.display{font-family:var(--font-display)}
.h-xl{font-size:clamp(30px,4.4vw,48px);font-weight:700;line-height:1.15}
.h-lg{font-size:clamp(26px,3.2vw,36px);font-weight:600;line-height:1.2}
.h-md{font-size:22px;font-weight:600}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:13px;letter-spacing:.28em;
  color:var(--gold);text-transform:uppercase;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.7}
.lead{color:var(--ink-muted);font-size:18px}
.section--paper .lead{color:var(--paper-muted)}
.muted{color:var(--ink-muted)}
.text-center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
.max-w-2xl{max-width:672px}
.max-w-3xl{max-width:768px}

/* ---------- 按钮 ---------- */
.gold-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--gold);color:var(--on-accent);
  padding:14px 34px;font-weight:500;font-size:15px;border:0;
  border-radius:var(--radius);cursor:pointer;
  transition:all .3s var(--ease);
}
.gold-btn:hover{background:var(--gold-hover);transform:translateY(-2px)}
.ghost-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 30px;font-weight:500;font-size:15px;
  border:1px solid var(--line);color:var(--ink);background:transparent;
  border-radius:var(--radius);cursor:pointer;transition:all .3s var(--ease);
}
.ghost-btn:hover{border-color:var(--gold);color:var(--gold)}
.section--paper .ghost-btn{border-color:rgba(0,0,0,.18);color:var(--paper-ink)}
.section--paper .ghost-btn:hover{border-color:var(--gold);color:#a8823a}
.btn-text{
  display:inline-flex;align-items:center;gap:8px;color:var(--gold);
  font-size:14px;font-weight:500;transition:gap .3s var(--ease);
}
.btn-text:hover{gap:14px}

/* ---------- 头部 ---------- */
.hx-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(13,13,15,.95);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-card);
  transition:background .3s var(--ease);
}
.hx-header.is-top{background:rgba(13,13,15,.75)}
.hx-header .inner{
  max-width:var(--maxw);margin:0 auto;padding:0 24px;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:12px}
.brand__mark{
  /* 宽高由 JS 按 logo 实际比例自适应（支持方形图标 / 横向字标） */
  display:inline-block;                 /* span 默认 inline，不设则宽高失效 */
  width:34px;height:34px;max-width:190px;flex-shrink:0;
  background-color:var(--logo-color);
  -webkit-mask:var(--logo-mask) center/contain no-repeat;
  mask:var(--logo-mask) center/contain no-repeat;
  transition:background-color .3s var(--ease);
}
.brand__mark--img{background:none;-webkit-mask:none;mask:none}
.brand__mark--img img{width:100%;height:100%;object-fit:contain}
/* 横向字标 logo 时，隐藏重复的品牌文字 */
.brand.is-wordmark .brand__name{display:none}
.brand__name{
  font-family:var(--font-display);font-size:20px;font-weight:700;
  letter-spacing:.06em;color:var(--ink);
}
.nav{display:none}
@media(min-width:1024px){
  .nav{display:flex;align-items:center;gap:40px}
  .hx-burger{display:none}
}
.nav__link{
  position:relative;font-size:15px;color:var(--ink);
  transition:color .3s var(--ease);padding:4px 0;
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;
  background:var(--gold);transition:width .3s var(--ease);
}
.nav__link:hover,.nav__link.is-active{color:var(--gold)}
.nav__link:hover::after,.nav__link.is-active::after{width:100%}
.hx-header .gold-btn{padding:10px 22px;font-size:14px}
.hx-burger{
  background:none;border:0;color:var(--ink);font-size:22px;padding:6px;
  cursor:pointer;line-height:1;
}
.hx-drawer{
  position:fixed;inset:var(--nav-h) 0 0 0;z-index:55;
  background:rgba(13,13,15,.98);backdrop-filter:blur(12px);
  display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:30px;
}
.hx-drawer.is-open{display:flex;animation:fadeIn .25s ease}
.hx-drawer .nav__link{font-size:18px}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  justify-content:center;overflow:hidden;padding:var(--nav-h) 0 0;
}
.hero__bg{position:absolute;inset:0;z-index:0}
/* 实景背景图（虚化 + 缓慢缓推），对齐参考站 hero 图 + 深色蒙版 */
.hero__photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(2.5px) saturate(.95);
  transform-origin:center;
  animation:heroKenburns 28s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes heroKenburns{from{transform:scale(1.06)}to{transform:scale(1.16)}}
.hero__scene{
  position:absolute;inset:0;
  background:
    radial-gradient(1100px 620px at 78% 12%, rgba(200,164,92,.16), transparent 62%),
    radial-gradient(760px 520px at 12% 88%, rgba(200,164,92,.08), transparent 60%),
    linear-gradient(150deg,#101014 0%,#0d0d0f 46%,#08080a 100%);
}
/* 有背景图时，底色交给照片，scene 只保留金色光晕 */
.hero--photo .hero__scene{
  background:
    radial-gradient(1100px 620px at 78% 12%, rgba(200,164,92,.14), transparent 62%),
    radial-gradient(760px 520px at 12% 88%, rgba(200,164,92,.08), transparent 60%);
}
.hero__scene::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);
}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(13,13,15,.42),rgba(13,13,15,.5),rgba(13,13,15,.8))}
.hero__inner{position:relative;z-index:10;text-align:center}
.hero__title{font-size:clamp(34px,5.6vw,64px);font-weight:700;line-height:1.12;letter-spacing:.01em}
.hero__title .g{color:var(--gold)}
.hero__sub{margin-top:24px;color:var(--ink-muted);font-size:clamp(15px,1.4vw,18px);max-width:640px;margin-left:auto;margin-right:auto}
.hero__cta{margin-top:40px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero__scroll{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:10;
  color:var(--ink-muted);font-size:12px;letter-spacing:.2em;display:flex;
  flex-direction:column;align-items:center;gap:8px;
}
.hero__scroll span{width:1px;height:36px;background:linear-gradient(var(--gold),transparent);animation:scrollLine 2s infinite}

/* 页面内页小 Hero（对齐参考站：pt-32 pb-20 / md:pt-40 md:pb-32） */
.page-hero{
  position:relative;padding:128px 0 80px;overflow:hidden;
}
.page-hero__eyebrow{
  color:var(--gold);font-family:var(--font-sans);font-size:14px;
  letter-spacing:4px;line-height:20px;margin:0 0 16px;text-transform:uppercase;
}
.page-hero .h-xl{line-height:1.05}
.page-hero .lead{line-height:1.56}
.page-hero__bg{position:absolute;inset:0;background:
  radial-gradient(760px 420px at 74% 0%, rgba(200,164,92,.14), transparent 60%),
  linear-gradient(180deg,#111115,#0d0d0f);}
.page-hero__bg::after{content:"";position:absolute;inset:0;background:rgba(13,13,15,.75)}
/* 内页 hero 实景背景图（虚化），对齐参考站 bg-base/75 */
.page-hero__photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(3px) saturate(.95);transform:scale(1.06);
  pointer-events:none;
}
@media(min-width:768px){
  .page-hero{padding:160px 0 128px}
  .page-hero__photo{filter:blur(2.5px) saturate(.95)}
}

/* ---------- 卡片 ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:transform .35s var(--ease),border-color .3s var(--ease),box-shadow .35s var(--ease);
}
.card:hover{transform:translateY(-6px);border-color:rgba(200,164,92,.5);box-shadow:var(--shadow-card-hover)}
.card__pad{padding:26px}
.card--alt{background:var(--surface-alt)}
.card__title{font-size:19px;font-weight:600;color:var(--ink);margin-bottom:8px;font-family:var(--font-display)}
.card__desc{color:var(--ink-muted);font-size:14px}

.grid{display:grid;gap:32px}
@media(min-width:768px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
}
.grid--gap-sm{gap:20px}

/* ---------- 媒体位（渐变场景 + 产品图） ---------- */
.media{
  position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--line);
  background:
    radial-gradient(122% 96% at 50% 24%, rgba(255,255,255,.96), rgba(255,255,255,0) 64%),
    radial-gradient(150% 120% at 50% 104%, rgba(200,164,92,.16), transparent 62%),
    linear-gradient(168deg,#efebe4 0%,#e3ded5 54%,#d1cdc3 100%);
  display:flex;align-items:center;justify-content:center;
}
.media--16-10{aspect-ratio:16/10}
.media--4-3{aspect-ratio:4/3}
.media--7-5{aspect-ratio:7/5}
.media--1-1{aspect-ratio:1/1}
.media__img{max-width:78%;max-height:78%;object-fit:contain;filter:drop-shadow(0 22px 34px rgba(58,48,32,.30))}
.media__glow{
  position:absolute;width:62%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(200,164,92,.24),transparent 68%);
  filter:blur(10px);
}
.media__tag{position:absolute;left:16px;bottom:14px;font-size:12px;letter-spacing:.14em;color:var(--gold);font-family:var(--font-display)}

/* ---------- 特性列表 ---------- */
.feature{display:flex;align-items:flex-start;gap:14px}
.feature__mark{color:var(--gold);font-size:14px;line-height:1.9;flex-shrink:0}
.feature__txt{color:var(--ink);font-size:14.5px;line-height:1.7}
.section--paper .feature__txt{color:var(--paper-ink)}

/* 分隔线 */
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- 合作品牌（六边形 logo 墙） ---------- */
.co-brands{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:22px 12px;--hex-w:212px;
}
.co-brand{display:block;width:var(--hex-w);text-align:center;text-decoration:none;color:inherit}
.co-brand__hex{
  position:relative;display:block;width:var(--hex-w);height:calc(var(--hex-w) * .866);
  /* 外层裁成六边形 + 金色渐变底，内层再裁一次 → 得到 1px 金色描边 */
  background:linear-gradient(168deg,rgba(200,164,92,.55),rgba(200,164,92,.08) 46%,rgba(200,164,92,.36));
  padding:1px;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  -webkit-clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  transition:transform .5s var(--ease),filter .5s var(--ease),background .5s var(--ease);
}
.co-brand__in{
  position:relative;display:grid;place-items:center;width:100%;height:100%;overflow:hidden;
  background:var(--surface);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  -webkit-clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  transition:background .5s var(--ease);
}
.co-brand__in::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(72% 64% at 50% 4%,rgba(200,164,92,.22),transparent 68%);
}
.co-brand__in img{
  position:relative;max-width:66%;max-height:70%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.34));transition:transform .5s var(--ease);
}
.co-brand__mono{position:relative;font-family:var(--font-display);font-size:44px;line-height:1;color:var(--gold)}
.co-brand__name{
  display:block;margin-top:16px;font-family:var(--font-display);font-size:18px;
  letter-spacing:.06em;color:var(--ink);transition:color .4s var(--ease);
}
.co-brand__en{margin-top:6px;font-size:10px;letter-spacing:.32em;color:var(--ink-muted);text-transform:uppercase}
.co-brand:hover .co-brand__hex{
  transform:translateY(-6px);
  filter:drop-shadow(0 18px 28px rgba(200,164,92,.34));
  background:linear-gradient(168deg,rgba(227,192,136,.9),rgba(200,164,92,.5) 46%,rgba(200,164,92,.75));
}
.co-brand:hover .co-brand__in::before{opacity:1}
.co-brand:hover .co-brand__in img{transform:scale(1.08)}
.co-brand:hover .co-brand__name{color:var(--gold)}
@media(max-width:900px){.co-brands{--hex-w:180px}}
@media(max-width:560px){.co-brands{--hex-w:calc(50vw - 30px);gap:18px 10px}.co-brand__name{font-size:16px;margin-top:12px}}

/* 合作网络背景（淡金连线纹理） */
.section--mesh{overflow:hidden}
.section--mesh::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='420' viewBox='0 0 560 420'%3E%3Cg fill='none' stroke='%23c8a45c' stroke-opacity='.22'%3E%3Cpath d='M40 66 L186 32 L330 104 L474 44'/%3E%3Cpath d='M40 66 L128 208 L330 104'/%3E%3Cpath d='M128 208 L64 344 L262 320 L330 104'/%3E%3Cpath d='M262 320 L474 44'/%3E%3Cpath d='M474 44 L506 236 L330 104'/%3E%3Cpath d='M64 344 L506 236'/%3E%3C/g%3E%3Cg fill='%23c8a45c' fill-opacity='.4'%3E%3Ccircle cx='40' cy='66' r='2.6'/%3E%3Ccircle cx='186' cy='32' r='2'/%3E%3Ccircle cx='330' cy='104' r='3'/%3E%3Ccircle cx='474' cy='44' r='2.2'/%3E%3Ccircle cx='128' cy='208' r='2.4'/%3E%3Ccircle cx='262' cy='320' r='2.2'/%3E%3Ccircle cx='64' cy='344' r='2.6'/%3E%3Ccircle cx='506' cy='236' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size:560px 420px;
  -webkit-mask-image:radial-gradient(118% 88% at 50% 42%,#000 26%,transparent 76%);
  mask-image:radial-gradient(118% 88% at 50% 42%,#000 26%,transparent 76%);
}

/* 合作数据：中心数字环（数据来自后台「站点设置」前的统计占位） */
.hub{
  margin-top:96px;max-width:900px;margin-inline:auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:48px;
}
.hub__stat{position:relative;text-align:center}
.hub__stat-num{
  font-family:var(--font-display);font-size:clamp(30px,3.6vw,42px);font-weight:700;
  line-height:1.1;color:var(--ink);
}
.hub__stat-num .u{color:var(--gold);font-size:.58em;margin-left:2px}
.hub__stat-label{margin-top:10px;font-size:13px;letter-spacing:.2em;color:var(--ink-muted)}
.hub__stat:first-child::after,
.hub__stat:last-child::after{content:"";position:absolute;top:38%;width:30px;height:1px}
.hub__stat:first-child::after{right:-39px;background:linear-gradient(90deg,transparent,rgba(200,164,92,.55))}
.hub__stat:last-child::after{left:-39px;background:linear-gradient(270deg,transparent,rgba(200,164,92,.55))}
.hub__ring{
  position:relative;flex:none;display:grid;place-items:center;
  width:clamp(184px,22vw,232px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(200,164,92,.15),rgba(200,164,92,.04) 62%,transparent 78%);
  border:1px solid rgba(200,164,92,.28);
}
.hub__ring::before{
  content:"";position:absolute;inset:-18px;border-radius:50%;
  border:1px dashed rgba(200,164,92,.26);animation:hub-spin 46s linear infinite;
}
.hub__ring::after{
  content:"";position:absolute;inset:16px;border-radius:50%;
  border:1px solid rgba(200,164,92,.2);
}
@keyframes hub-spin{to{transform:rotate(360deg)}}
.hub__ring-in{position:relative;z-index:1;text-align:center}
.hub__num{font-family:var(--font-display);font-size:clamp(40px,5.4vw,60px);font-weight:700;line-height:1;color:var(--gold)}
.hub__num .hub__u{font-size:.46em;margin-left:2px}
.hub__cap{margin-top:12px;font-size:13px;letter-spacing:.28em;color:var(--ink-muted)}
@media(max-width:760px){
  .hub{grid-template-columns:1fr;gap:34px;margin-top:64px}
  .hub__stat::after{display:none!important}
  .hub__ring{order:-1;margin-inline:auto}
}

/* 统计（联系页复用） */
.stat{text-align:center;flex:1;position:relative;padding:6px 0}
.stat__num{font-family:var(--font-display);font-size:clamp(32px,4vw,46px);font-weight:700;color:var(--ink)}
.stat__num .u{color:var(--gold);font-size:.6em;margin-left:2px}
.stat__label{margin-top:8px;color:var(--ink-muted);font-size:14px}
.stat+.stat::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:32px;background:rgba(200,164,92,.3)}
@media(max-width:640px){.stat+.stat::before{display:none}}

/* ---------- 服务流程 ---------- */
.process{display:flex;flex-direction:column;gap:34px}
@media(min-width:900px){.process{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:0}}
.process__step{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
.process__dot{
  width:64px;height:64px;border-radius:50%;background:rgba(200,164,92,.1);
  border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:20px;font-family:var(--font-display);font-weight:700;margin-bottom:16px;
}
.process__no{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--gold);margin-bottom:4px}
.process__title{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--paper-ink);margin-bottom:4px}
.process__desc{color:var(--paper-muted);font-size:12.5px;max-width:130px}
.process__line{display:none}
@media(min-width:900px){.process__line{display:block;flex:1;height:1px;background:rgba(200,164,92,.3);margin:32px 16px 0;align-self:flex-start}}

/* ---------- 时间线 ---------- */
.timeline{position:relative;max-width:768px;margin:0 auto}
.timeline__axis{position:absolute;left:19px;top:0;bottom:0;width:1px;background:var(--line)}
@media(min-width:768px){.timeline__axis{left:50%}}
.timeline__item{position:relative;display:flex;gap:24px;padding:18px 0}
.timeline__item:nth-child(even){flex-direction:row}
@media(min-width:768px){
  .timeline__item{width:50%}
  .timeline__item:nth-child(odd){margin-left:auto;flex-direction:row}
  .timeline__item:nth-child(even){margin-right:auto;flex-direction:row-reverse;text-align:right}
}
.timeline__dot{
  position:relative;z-index:10;width:16px;height:16px;border-radius:50%;
  background:var(--gold);border:2px solid var(--base);flex-shrink:0;margin:6px 0 0 12px;
}
@media(min-width:768px){.timeline__dot{margin:6px -8px 0}}
.timeline__body{flex:1}
.timeline__year{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--gold);margin-bottom:6px}
.timeline__txt{color:var(--ink-muted);font-size:14.5px}

/* ---------- 表单 ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;color:var(--ink-muted);letter-spacing:.04em}
.input,.textarea,.select{
  width:100%;background:rgba(0,0,0,.25);border:1px solid var(--line);
  border-radius:var(--radius);padding:13px 15px;font-size:15px;color:var(--ink);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.input::placeholder,.textarea::placeholder{color:#6d6a64}
.input:focus,.textarea:focus,.select:focus{outline:0;border-color:var(--gold);background:rgba(0,0,0,.35)}
.textarea{min-height:120px;resize:vertical}
.form--paper .field label{color:var(--paper-muted)}
.form--paper .input,.form--paper .textarea,.form--paper .select{
  background:#fff;border-color:rgba(0,0,0,.14);color:var(--paper-ink)}
.form--paper .input::placeholder,.form--paper .textarea::placeholder{color:#a8a49c}

/* ---------- 产品中心 ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{
  padding:9px 20px;border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--ink-muted);font-size:14px;cursor:pointer;transition:all .25s var(--ease);
}
.chip:hover{color:var(--ink);border-color:rgba(200,164,92,.4)}
.chip.is-active{background:var(--gold);color:var(--on-accent);border-color:var(--gold)}
.chip .n{opacity:.6;margin-left:6px;font-size:12px}

.pgrid{display:grid;gap:22px;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.pgrid{grid-template-columns:repeat(4,1fr)}}
.pcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
  display:flex;flex-direction:column;
}
.pcard:hover{transform:translateY(-5px);border-color:rgba(200,164,92,.5);box-shadow:var(--shadow-card-hover)}
.pcard__img{
  position:relative;aspect-ratio:1/1;padding:18px;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(122% 96% at 50% 24%, rgba(255,255,255,.96), rgba(255,255,255,0) 64%),
    radial-gradient(150% 120% at 50% 104%, rgba(200,164,92,.16), transparent 62%),
    linear-gradient(168deg,#efebe4 0%,#e3ded5 54%,#d1cdc3 100%);
  border-bottom:1px solid rgba(0,0,0,.10);
  transition:filter .35s var(--ease);
}
.pcard__img img{
  max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 16px 20px rgba(58,48,32,.26));
  transition:transform .4s var(--ease);
}
.pcard:hover .pcard__img{filter:brightness(1.035)}
.pcard:hover .pcard__img img{transform:scale(1.06) translateY(-2px)}
.pcard__body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.pcard__cat{font-size:11px;letter-spacing:.12em;color:var(--gold);font-family:var(--font-display)}
.pcard__name{font-size:14.5px;line-height:1.5;color:var(--ink);font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:44px}
.pcard__foot{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.pcard__price{font-family:var(--font-display);color:var(--gold);font-size:19px;font-weight:700}
.pcard__price small{font-size:12px;color:var(--ink-muted);font-weight:400}
.pcard__model{font-size:11.5px;color:#6d6a64;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%}
.pempty{padding:60px 0;text-align:center;color:var(--ink-muted)}

/* 详情弹窗 */
.pmodal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:20px}
.pmodal.is-open{display:flex;animation:fadeIn .2s ease}
.pmodal__mask{position:absolute;inset:0;background:rgba(6,6,8,.82);backdrop-filter:blur(4px)}
.pmodal__box{
  position:relative;width:min(880px,100%);max-height:88vh;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  display:grid;gap:0;
}
@media(min-width:768px){.pmodal__box{grid-template-columns:1fr 1fr}}
.pmodal__media{
  padding:34px;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(122% 96% at 50% 24%, rgba(255,255,255,.96), rgba(255,255,255,0) 64%),
    radial-gradient(150% 120% at 50% 104%, rgba(200,164,92,.16), transparent 62%),
    linear-gradient(168deg,#efebe4 0%,#e3ded5 54%,#d1cdc3 100%);
}
.pmodal__media img{max-height:360px;object-fit:contain;filter:drop-shadow(0 20px 28px rgba(58,48,32,.28))}
.pmodal__info{padding:34px}
.pmodal__cat{font-size:12px;letter-spacing:.14em;color:var(--gold);font-family:var(--font-display)}
.pmodal__name{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--ink);margin:10px 0 6px;line-height:1.4}
.pmodal__model{font-size:13px;color:var(--ink-muted);margin-bottom:18px}
.pmodal__price{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--gold);margin-bottom:20px}
.pmodal__price small{font-size:14px;color:var(--ink-muted);font-weight:400}
.pmodal__spec{font-size:14px;color:var(--ink-muted);line-height:1.8;border-top:1px solid var(--line);padding-top:18px;white-space:pre-wrap}
.pmodal__close{
  position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid var(--line);color:var(--ink);cursor:pointer;font-size:18px;line-height:1;
}
.pmodal__close:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- 页脚 ---------- */
.hx-footer{background:var(--base);border-top:1px solid var(--line)}
.footer__main{
  max-width:var(--maxw);margin:0 auto;padding:64px 24px;
  display:grid;gap:48px;grid-template-columns:1fr;
}
@media(min-width:768px){.footer__main{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer__main{grid-template-columns:1.4fr 1fr 1.2fr 1fr}}
.footer__desc{color:var(--ink-muted);font-size:14px;line-height:1.8;margin-top:20px;max-width:320px}
.footer__title{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--ink);margin-bottom:22px}
.footer__link{
  display:inline-block;color:var(--ink-muted);font-size:14px;margin-bottom:13px;
  position:relative;transition:color .3s var(--ease);
}
.footer__link::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--gold);transition:width .3s var(--ease)}
.footer__link:hover{color:var(--gold)}
.footer__link:hover::after{width:100%}
.footer__contact{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.footer__contact i{color:var(--gold);font-style:normal;font-size:13px;margin-top:3px}
.footer__contact span{color:var(--ink-muted);font-size:14px;line-height:1.6}
.footer__qr{
  width:112px;height:112px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  overflow:hidden;transition:transform .3s var(--ease);
}
.footer__qr:hover{transform:scale(1.05)}
.footer__qr img{width:100%;height:100%;object-fit:contain}
.footer__qr-ph{color:var(--gold);font-size:12px;text-align:center;padding:8px}
.footer__bottom{border-top:1px solid var(--line)}
.footer__bottom .inner{max-width:var(--maxw);margin:0 auto;padding:22px 24px;text-align:center;color:var(--ink-muted);font-size:12.5px}

/* ---------- 悬浮咨询 ---------- */
.float{position:fixed;right:22px;bottom:26px;z-index:70;display:flex;flex-direction:column;gap:12px}
.float a{
  width:50px;height:50px;border-radius:50%;background:var(--surface);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:18px;
  transition:all .3s var(--ease);cursor:pointer;
}
.float a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}
.float .totop{opacity:0;pointer-events:none}
.float .totop.is-on{opacity:1;pointer-events:auto}

/* ---------- 面包屑 / 次要元素 ---------- */
.pill{display:inline-block;padding:5px 14px;border:1px solid rgba(200,164,92,.35);border-radius:999px;color:var(--gold);font-size:12px;letter-spacing:.12em}

/* ---------- 动画 ---------- */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes scrollLine{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1)}100%{transform:scaleY(.2);transform-origin:bottom}}
[data-anim]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-anim].is-in{opacity:1;transform:none}
.animate-fade-up{animation:fadeUp .7s var(--ease) both}
@media(prefers-reduced-motion:reduce){
  .hero__photo{animation:none;transform:scale(1.06)}
  .hero__scroll span{animation:none}
}

/* ---------- 工具 ---------- */
.flex{display:flex}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.flex-col{flex-direction:column}
.gap-3{gap:12px}
.mt-4{margin-top:16px}
.mt-6{margin-top:24px}
.mb-4{margin-bottom:16px}
.mb-6{margin-bottom:24px}
.mb-8{margin-bottom:32px}
.hidden{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ==========================================================================
   日间模式（在 <html data-theme="light"> 时启用）
   仅覆盖颜色 token 与少量硬编码深色区块，结构与动画不变
   ========================================================================== */
html[data-theme="light"]{
  color-scheme:light;
  /* 浅色基调 */
  --base:#f6f4ef;          /* 页面底色（暖白） */
  --surface:#ffffff;       /* 卡片 */
  --surface-alt:#f1ede4;   /* 次级卡片 */
  --line:#e4ded2;          /* 描边 */
  --ink:#211f1a;           /* 主文字（近黑） */
  --ink-muted:#6e6a60;     /* 次文字 */

  /* 浅色区块（暖奶油色带，与浅底拉开层次） */
  --paper:#efe8d9;
  --paper-ink:#211f1a;
  --paper-muted:#6e6a60;

  --shadow-card:0 1px 2px rgba(40,33,20,.08);
  --shadow-card-hover:0 18px 40px -14px rgba(40,33,20,.22);
}

/* 头部 / 抽屉：浅色玻璃 */
html[data-theme="light"] .hx-header{background:rgba(246,244,239,.92)}
html[data-theme="light"] .hx-header.is-top{background:rgba(246,244,239,.72)}
html[data-theme="light"] .hx-drawer{background:rgba(246,244,239,.98)}

/* 首页 Hero：浅色蒙版 + 浅色底，保证深色文字可读 */
html[data-theme="light"] .hero__overlay{
  background:linear-gradient(to bottom, rgba(246,244,239,.6), rgba(246,244,239,.72), rgba(246,244,239,.85));
}
html[data-theme="light"] .hero__scene{
  background:
    radial-gradient(1100px 620px at 78% 12%, rgba(200,164,92,.14), transparent 62%),
    radial-gradient(760px 520px at 12% 88%, rgba(200,164,92,.08), transparent 60%),
    linear-gradient(150deg,#f9f7f2 0%,#f3efe8 50%,#ece6da 100%);
}

/* 内页 Hero：在照片之上叠加浅色蒙版（文字层 z-index:10 已在其上） */
html[data-theme="light"] .page-hero::before{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(to bottom, rgba(246,244,239,.62), rgba(246,244,239,.72), rgba(246,244,239,.85));
}
html[data-theme="light"] .page-hero__bg::after{background:transparent}

/* 默认表单（非 paper）在浅色下用浅底深字 */
html[data-theme="light"] .input,
html[data-theme="light"] .textarea,
html[data-theme="light"] .select{background:rgba(33,31,26,.04);color:var(--ink)}
html[data-theme="light"] .input::placeholder,
html[data-theme="light"] .textarea::placeholder{color:#9a958a}
html[data-theme="light"] .input:focus,
html[data-theme="light"] .textarea:focus,
html[data-theme="light"] .select:focus{background:rgba(33,31,26,.06)}

/* 产品弹窗遮罩 / 关闭按钮 */
html[data-theme="light"] .pmodal__mask{background:rgba(40,33,20,.42)}
html[data-theme="light"] .pmodal__close{background:rgba(33,31,26,.06);border-color:var(--line)}

/* ---------- 日间 / 夜间切换按钮 ---------- */
.theme-toggle{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all .3s var(--ease);
}
.theme-toggle:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.theme-toggle svg{width:20px;height:20px;display:block}
.theme-toggle .tt-moon{display:none}
html[data-theme="light"] .theme-toggle .tt-sun{display:none}
html[data-theme="light"] .theme-toggle .tt-moon{display:block}
.hx-drawer .theme-toggle{margin-bottom:8px}