/* ============================================================
   宫藏黄金 - 官方国风视觉体系 v2（对标 gongcang9999.com）
   克制国风：宣纸米白70% + 墨棕文字20% + 宫红鎏金10%
   【后期可调整】
   ============================================================ */
:root{
  --crimson:#A51E25;--crimson-l:#C03A3A;
  --gild:#D3B278;--gild-l:#E4C895;
  --xuanzhi:#F8F4EB;--card:#F3EDE2;--dark:#231815;
  --mohei:#231815;--palm:#614D45;--light:#8A756B;
  --ochre:#DDD2C4;--dark-line:#42342E;
  --navy:#003D74;--bright-yellow:#FFDE12;
  --grad:linear-gradient(110deg,#A51E25,#D3B278);
  --hero-glow:radial-gradient(circle at top center,rgba(165,30,37,.07),transparent 70%);
  --dark-bg:linear-gradient(180deg,#231815,#2E201B);
}
*{margin:0;padding:0;box-sizing:border-box}
[x-cloak]{display:none!important}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif;
  background:var(--xuanzhi);color:var(--mohei);line-height:1.7;font-size:16px;
}
h1,h2,h3,.serif{
  font-family:"Noto Serif SC","Songti SC","Source Han Serif SC","STSong",serif;
  font-weight:700;letter-spacing:.02em;
}
a{color:inherit;text-decoration:none;transition:color .25s}
img{max-width:100%;display:block}

/* ===== Layout ===== */
.min-h-screen{min-height:100vh}
.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1;min-width:0}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.items-start{align-items:flex-start}
.items-end{align-items:flex-end}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}
.grid{display:grid}
.hidden{display:none}.block{display:block}.inline-block{display:inline-block}
.relative{position:relative}.absolute{position:absolute}.sticky{position:sticky}
.fixed{position:fixed}.top-0{top:0}.inset-0{top:0;right:0;bottom:0;left:0}
.z-50{z-index:50}.z-10{z-index:10}
.mx-auto{margin-left:auto;margin-right:auto}
.w-6{width:1.5rem}.h-6{height:1.5rem}.w-full{width:100%}
.h-40{height:10rem}.max-h-16{max-height:4rem}.max-h-24{max-height:6rem}.max-h-32{max-height:8rem}
.min-w-0{min-width:0}

/* spacing */
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}
.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-x-14{column-gap:3.5rem}.gap-y-4{row-gap:1rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}
.mb-16{margin-bottom:4rem}
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}
.mx-4{margin-left:1rem;margin-right:1rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.px-10{padding-left:2.5rem;padding-right:2.5rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.py-24{padding-top:6rem;padding-bottom:6rem}
.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-10{padding:2.5rem}
.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}
.pb-4{padding-bottom:1rem}
.space-y-1>*+*{margin-top:.25rem}.space-y-2>*+*{margin-top:.5rem}
.space-y-3>*+*{margin-top:.75rem}.space-y-4>*+*{margin-top:1rem}
.space-y-6>*+*{margin-top:1.5rem}
.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}
.max-w-7xl{max-width:80rem}

/* ===== Colors ===== */
.text-mohei{color:var(--mohei)}.text-palm{color:var(--palm)}.text-light{color:var(--light)}
.text-crimson{color:var(--crimson)}.text-gild{color:var(--gild)}.text-gild-l{color:var(--gild-l)}
.text-navy{color:var(--navy)}.text-bright-yellow{color:var(--bright-yellow)}
.bg-xuanzhi{background:var(--xuanzhi)}.bg-card{background:var(--card)}.bg-dark{background:var(--dark)}
.bg-gild{background:var(--gild)}
.bg-navy{background:var(--navy)}.bg-bright-yellow{background:var(--bright-yellow)}
.bg-dark-grad{background:var(--dark-bg)}
.bg-crimson{background:var(--crimson)}
.border-ochre{border-color:var(--ochre)}.border-gild{border-color:var(--gild)}
.border-crimson{border-color:var(--crimson)}
.border-t{border-top-width:1px}.border-b{border-bottom-width:1px}.border{border-width:1px}
.opacity-30{opacity:.3}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}
.opacity-80{opacity:.8}.opacity-90{opacity:.9}

/* ===== Brand Components ===== */
.gild-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.card-brand{
  background:var(--card);border:1px solid var(--ochre);border-radius:10px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.card-brand:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(165,30,37,.08)}
.card-series{background:linear-gradient(180deg,#3A2819 0%,#231815 100%);border:1px solid rgba(211,178,120,.4);box-shadow:0 4px 20px rgba(0,0,0,.18);min-height:280px;display:flex;flex-direction:column;justify-content:center;position:relative}
.card-series:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.28);border-color:rgba(211,178,120,.7)}
/* 各系列专属渐变背景（无封面图时的fallback） */
.card-series-bg-1{background:linear-gradient(135deg,#5B3A29 0%,#2A1A10 40%,#1A0E08 100%)}
.card-series-bg-2{background:linear-gradient(135deg,#5A1820 0%,#2A0E14 40%,#180808 100%)}
.card-series-bg-3{background:linear-gradient(135deg,#3B2A18 0%,#241A10 40%,#141008 100%)}
.card-series-bg-4{background:linear-gradient(135deg,#2C3A52 0%,#182235 40%,#0A0E18 100%)}
/* 背景封面图 */
.series-bgimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55;transition:opacity .4s ease,transform .5s ease;z-index:1}
.card-series:hover .series-bgimg{opacity:.7;transform:scale(1.06)}
/* 渐变遮罩（保证文字可读） */
.series-mask{position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,24,21,.35) 0%,rgba(35,24,21,.75) 60%,rgba(35,24,21,.92) 100%);z-index:2}
/* 卡片四角装饰纹（回纹角饰） */
.series-corner{position:absolute;width:24px;height:24px;border:2px solid var(--gild);opacity:.55;transition:opacity .3s;z-index:5}
.series-corner-tl{top:10px;left:10px;border-right:none;border-bottom:none}
.series-corner-tr{top:10px;right:10px;border-left:none;border-bottom:none}
.series-corner-bl{bottom:10px;left:10px;border-right:none;border-top:none}
.series-corner-br{bottom:10px;right:10px;border-left:none;border-top:none}
.card-series:hover .series-corner{opacity:.85}
/* 底部装饰带（VISI标准） */
.series-band{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60%;height:3px;background:linear-gradient(90deg,transparent,var(--gild-l),transparent);opacity:.7;z-index:5}
/* 标题下方分隔线 */
.series-divider{width:44px;height:1px;background:rgba(228,200,149,.7);margin:0 auto;position:relative}
.series-divider::before,.series-divider::after{content:"";width:5px;height:5px;background:var(--gild-l);border-radius:50%;position:absolute;top:-2px;box-shadow:0 0 6px rgba(228,200,149,.5)}
.series-divider::before{left:-11px}.series-divider::after{right:-11px}
.window-frame{border-color:rgba(228,200,149,.7);background:rgba(211,178,120,.08)}
.card-dark{background:var(--dark-bg);border:1px solid var(--dark-line);border-radius:10px}
.btn-primary{background:var(--crimson);color:#fff;border:none;border-radius:8px;padding:10px 24px;transition:background .25s;cursor:pointer;font-size:15px}
.btn-primary:hover{background:var(--crimson-l)}
.btn-gild{background:var(--grad);color:#fff;border:none;border-radius:8px;padding:10px 24px;cursor:pointer;font-size:15px}
.btn-ghost{background:transparent;border:1px solid var(--gild);color:var(--mohei);border-radius:8px;padding:10px 24px;transition:background .25s;cursor:pointer;font-size:15px}
.btn-ghost:hover{background:rgba(211,178,120,.08)}
.rounded{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}
.rounded-full{border-radius:9999px}.rounded-t{border-top-left-radius:.5rem;border-top-right-radius:.5rem}
.shadow-sm{box-shadow:0 1px 3px rgba(0,0,0,.06)}.shadow{box-shadow:0 2px 8px rgba(0,0,0,.06)}
.transition{transition:all .25s ease}.cursor-pointer{cursor:pointer}.outline-none{outline:none}

/* ===== 国风装饰 ===== */
.hero-bg{background:var(--hero-glow),var(--xuanzhi)}
.cloud-ornament{display:inline-block;width:24px;height:12px;background:var(--gild);opacity:.4;border-radius:50%/100% 100% 0 0}
.divider-ornament{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto}
.divider-ornament::before,.divider-ornament::after{content:"";height:1px;width:60px;background:var(--ochre)}
.window-frame{width:56px;height:56px;border:2px solid var(--gild);border-radius:9999px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;background:rgba(211,178,120,.06)}
.product-frame{padding:10px;background:var(--card);border:1px solid var(--ochre);border-radius:8px;display:inline-block;width:100%}
.tag-gild{display:inline-block;padding:2px 12px;border:1px solid var(--gild);border-radius:9999px;font-size:12px;color:var(--gild);background:rgba(211,178,120,.06)}

/* ===== FAQ 折叠面板 ===== */
details.faq-item{list-style:none;cursor:pointer}
details.faq-item > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;font-weight:600;user-select:none}
details.faq-item > summary::-webkit-details-marker{display:none}
details.faq-item > summary::after{content:"";width:20px;height:20px;flex-shrink:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 4v12m-6-6h12' stroke='%23A51E25' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;transition:transform .25s ease}
details.faq-item[open] > summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10h12' stroke='%23A51E25' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");transform:rotate(180deg)}
details.faq-item > summary:hover{background:rgba(165,30,37,.04)}
details.faq-item[open]{border-color:var(--gild);box-shadow:0 4px 16px rgba(211,178,120,.12)}

/* ===== VISI 品牌辅助图形 ===== */
/* 龟背六边形纹（SI手册标准背板纹样） */
.pattern-hexagon{
  background-color:var(--dark);
  background-image:
    radial-gradient(circle at 50% 0,transparent 8px,var(--gild) 8px,var(--gild) 9px,transparent 9px),
    radial-gradient(circle at 0 50%,transparent 8px,var(--gild) 8px,var(--gild) 9px,transparent 9px),
    radial-gradient(circle at 100% 50%,transparent 8px,var(--gild) 8px,var(--gild) 9px,transparent 9px),
    radial-gradient(circle at 50% 100%,transparent 8px,var(--gild) 8px,var(--gild) 9px,transparent 9px);
  background-size:28px 32px;
  background-position:0 0,0 0,0 0,0 0;
}
.pattern-hexagon-red{
  background-color:var(--crimson);
  background-image:radial-gradient(circle,rgba(35,24,21,.15) 1px,transparent 1.5px);
  background-size:12px 12px;
}
/* 回纹/工字几何边纹（SI手册章节页装饰带） */
.pattern-fret{
  background-image:repeating-linear-gradient(90deg,var(--gild) 0,var(--gild) 2px,transparent 2px,transparent 8px,var(--gild) 8px,var(--gild) 10px,transparent 10px,transparent 16px);
  height:6px;opacity:.5;
}
/* 装饰带（SI手册页眉/页脚标准装饰） */
.deco-band{
  height:8px;background:var(--gild);opacity:.3;border-radius:1px;
}
.deco-band-dotted{
  height:6px;background-image:radial-gradient(circle,var(--gild) 1px,transparent 1.5px);background-size:10px 6px;opacity:.4;
}
/* 深色章节分隔条（SI手册 PART.B/C 章节页风格） */
.section-divider-dark{
  background:var(--dark);border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line);
  padding:20px 0;text-align:center;position:relative;
}
.section-divider-dark::before,.section-divider-dark::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);width:200px;height:1px;background:var(--gild);opacity:.3;
}
.section-divider-dark::before{top:6px}.section-divider-dark::after{bottom:6px}
/* 发光金字效果（SI手册内雕发光字工艺） */
.text-glow-gild{
  color:var(--gild);text-shadow:0 0 10px rgba(211,178,120,.4),0 0 22px rgba(211,178,120,.15);
}
/* 金色金属框效果（SI手册拉丝香槟金金属框） */
.frame-gild-metal{
  border:2px solid var(--gild);border-radius:8px;
  box-shadow:0 0 0 1px rgba(211,178,120,.15) inset,0 4px 16px rgba(211,178,120,.08);
}

/* ===== Font sizes ===== */
.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}
.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}
.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-5xl{font-size:3rem}
.text-6xl{font-size:3.5rem}
.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-disc{list-style-type:disc}.list-inside{list-style-position:inside}

/* ===== Grid ===== */
.grid-cols-1{grid-template-columns:1fr}
.grid-cols-2{grid-template-columns:repeat(2,1fr)}
.grid-cols-3{grid-template-columns:repeat(3,1fr)}
.grid-cols-4{grid-template-columns:repeat(4,1fr)}
.grid-cols-7{grid-template-columns:repeat(7,1fr)}
.md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
.md\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
.md\:grid-cols-4{grid-template-columns:repeat(4,1fr)}
.md\:flex{display:flex}

/* hover */
.hover\:crimson:hover{color:var(--crimson)}
.hover\:gild:hover{color:var(--gild)}
.hover\:border-gild:hover{border-color:var(--gild)}
.hover\:bg-gild-08:hover{background:rgba(211,178,120,.08)}

/* opacity variants for text */
.text-palm-40{color:rgba(97,77,69,.4)}.text-palm-50{color:rgba(97,77,69,.5)}
.text-palm-60{color:rgba(97,77,69,.6)}.text-palm-70{color:rgba(97,77,69,.7)}
.text-light-50{color:rgba(138,117,107,.5)}.text-light-60{color:rgba(138,117,107,.6)}
.text-gild-l-80{color:rgba(228,200,149,.8)}
.text-ochre-80{color:rgba(221,210,196,.8)}.text-ochre-60{color:rgba(221,210,196,.6)}
.bg-crimson-06{background:rgba(165,30,37,.06)}
.bg-gild-20{background:rgba(211,178,120,.2)}.bg-gild-06{background:rgba(211,178,120,.06)}
.bg-dark-60{background:rgba(35,24,21,.6)}
.bg-xuanzhi-90{background:rgba(248,244,235,.92)}
.border-ochre-20{border-color:rgba(221,210,196,.2)}
.border-ochre-30{border-color:rgba(221,210,196,.3)}
.border-dark-line{border-color:var(--dark-line)}
.border-gild-30{border-color:rgba(211,178,120,.3)}
.backdrop-blur-md{backdrop-filter:blur(10px)}
.flex-shrink-0{flex-shrink:0}

/* ===== Responsive ===== */
@media(max-width:768px){
  .md\:hidden{display:none!important}
  .md\:flex{display:flex}
  .md\:grid-cols-2,.md\:grid-cols-3,.md\:grid-cols-4{grid-template-columns:1fr!important}
  .grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:1fr}
  .grid-cols-7{grid-template-columns:repeat(3,1fr)}
  .py-24{padding-top:3rem;padding-bottom:3rem}
  .py-20{padding-top:2.5rem;padding-bottom:2.5rem}
  .text-6xl{font-size:2rem}.text-5xl{font-size:1.75rem}.text-4xl{font-size:1.5rem}
}
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
input,textarea{font-family:inherit;font-size:15px}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fade-in{animation:fadeIn .4s ease}