/* =========================================================================
   components.css — 导航 / 抽屉 / Hero / 玻璃卡 / 按钮 / 表单 / 页脚 / 步骤条 / 光晕
   （design-spec §4 各组件、§5 响应式、§7 无障碍）
   ========================================================================= */

/* ====================== 顶部导航（design-spec §4.1） ====================== */
.site-header{
  position:sticky; top:0; z-index:100;
  height:var(--header-h);
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-border);
}
.nav{
  height:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  gap:var(--sp-6);
}
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark{ width:32px; height:32px; flex-shrink:0; }
.brand-text{ font-size:18px; font-weight:700; color:var(--text-100); letter-spacing:.01em; white-space:nowrap; }
.brand-en{ color:var(--accent-orange); font-weight:700; }

.nav-links{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav-links li{ display:flex; }
.nav-link{
  font-size:15px; font-weight:500; line-height:1;
  color:var(--text-200);
  padding:8px 12px;
  border-radius:var(--radius-sm);
  transition:color .2s, background .2s;
  min-height:44px; display:inline-flex; align-items:center;
}
.nav-link:hover{ color:var(--text-100); background:var(--accent-purple-soft); }
.nav-link[aria-current="page"]{
  color:var(--text-100);
  border-bottom:2px solid var(--accent-orange);
  border-radius:0;
}

.nav-actions{ display:flex; align-items:center; gap:var(--sp-3); margin-left:var(--sp-2); }

/* 语言按钮（design-spec §4.1） */
.lang-btn{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--glass-border-strong);
  color:var(--text-100);
  padding:6px 14px;
  border-radius:var(--radius-pill);
  font-size:15px; font-weight:500; line-height:1;
  min-height:36px;
  transition:border-color .2s, background .2s;
}
.lang-btn .lang-sep{ color:var(--text-300); }
.lang-btn .lang-zh,.lang-btn .lang-en{ transition:color .2s, font-weight .2s; }
.lang-btn.is-zh .lang-zh{ color:var(--accent-orange); font-weight:700; }
.lang-btn.is-en .lang-en{ color:var(--accent-orange); font-weight:700; }
.lang-btn:not(.is-zh):not(.is-en) .lang-zh{ color:var(--accent-orange); font-weight:700; }
.lang-btn:hover{ border-color:var(--accent-purple); background:var(--accent-purple-soft); }

.nav-cta{ padding:10px 20px; }

/* 汉堡按钮（移动端） */
.hamburger{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  border:1px solid var(--glass-border-strong);
  border-radius:var(--radius-sm);
  color:var(--text-100);
}
.hamburger svg{ width:22px; height:22px; }
.hamburger:hover{ border-color:var(--accent-purple); }

/* ====================== 移动端抽屉（design-spec §4.1） ====================== */
.drawer-backdrop{
  position:fixed; inset:0; z-index:150;
  background:rgba(10,10,18,0.6);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.drawer-backdrop.open{ opacity:1; visibility:visible; }

.drawer{
  position:fixed; top:0; right:0; z-index:160;
  width:280px; max-width:85vw; height:100%;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-left:1px solid var(--glass-border);
  box-shadow:-8px 0 40px rgba(0,0,0,0.5);
  transform:translateX(100%);
  transition:transform .3s ease;
  display:flex; flex-direction:column;
  padding:var(--sp-4);
  overflow-y:auto;
}
.drawer.open{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-4); }
.drawer-close{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--glass-border-strong); border-radius:var(--radius-sm); color:var(--text-100);
}
.drawer-close:hover{ border-color:var(--accent-purple); }
.drawer-nav{ display:flex; flex-direction:column; }
.drawer-nav a{
  display:flex; align-items:center; min-height:48px;
  padding:10px 12px; border-radius:var(--radius-sm);
  color:var(--text-100); font-size:16px; font-weight:500;
}
.drawer-nav a:hover{ background:var(--accent-purple-soft); }
.drawer-nav a[aria-current="page"]{ color:var(--accent-orange); }
.drawer-actions{ margin-top:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); }
.drawer-actions .btn{ width:100%; justify-content:center; }
.drawer-lang{ align-self:flex-start; }

/* ====================== Hero（design-spec §4.2） ====================== */
.hero{ padding-block:var(--sp-24) var(--sp-16); }
.hero-grid{
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:var(--sp-12);
  align-items:center;
}
.hero-copy .hero-h1{ margin-bottom:var(--sp-6); }
.hero-copy .lead{ margin-bottom:var(--sp-8); max-width:34ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }

/* 右栏倾斜层叠竖版海报卡阵 */
.hero-posters{
  position:relative;
  height:520px;
  perspective:1200px;
}
.poster-card{
  position:absolute;
  width:200px;
  aspect-ratio:9/16;
  border-radius:var(--radius);
  background:linear-gradient(160deg,#2A1640,#0A0A12);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  display:flex; align-items:flex-end;
  padding:16px;
  transition:transform .35s ease, box-shadow .35s ease;
  will-change:transform;
}
.poster-card .poster-word{
  font-size:18px; font-weight:700; color:var(--text-100);
  letter-spacing:.04em;
  text-shadow:0 2px 12px rgba(0,0,0,0.6);
}
.poster-card .poster-glow{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120px 120px at 80% 12%, rgba(255,122,0,0.28), transparent 70%);
}
/* 6 张错位 rotate + translateZ 层叠 */
.poster-card.p1{ transform:rotate(-10deg) translate(-30px,-40px) translateZ(0); }
.poster-card.p2{ transform:rotate(-4deg)  translate(120px,-70px) translateZ(40px); background:linear-gradient(160deg,#3A1A55,#150A28); }
.poster-card.p3{ transform:rotate(6deg)   translate(180px,40px)  translateZ(20px); background:linear-gradient(160deg,#2A1640,#0A0A12); }
.poster-card.p4{ transform:rotate(-7deg)  translate(10px,60px)   translateZ(60px); background:linear-gradient(160deg,#43206A,#1A0B2E); }
.poster-card.p5{ transform:rotate(10deg)  translate(150px,140px)  translateZ(10px); background:linear-gradient(160deg,#2A1640,#0A0A12); }
.poster-card.p6{ transform:rotate(-2deg)  translate(60px,180px)  translateZ(80px); background:linear-gradient(160deg,#37185A,#130A24); }

.hero-posters:hover .poster-card:not(:hover){ transform:translateZ(0) scale(.98); }
.poster-card:hover{
  transform:translateY(-10px) rotate(0) scale(1.04) !important;
  box-shadow:0 16px 48px rgba(255,122,0,0.25);
  z-index:5;
}
.poster-card:focus-visible{ transform:translateY(-10px) rotate(0) scale(1.04) !important; z-index:5; }

/* ====================== Hero 响应式 ====================== */
@media (max-width:1023px){
  .hero-grid{ grid-template-columns:6fr 6fr; gap:var(--sp-8); }
}
@media (max-width:639px){
  .hero-grid{ grid-template-columns:1fr; gap:var(--sp-8); }
  .hero-copy .lead{ max-width:none; }
  .hero-posters{ height:360px; transform:none; }
  /* 移动端减到 3–4 张，整齐平铺，避免溢出 */
  .poster-card{ width:130px; }
  .poster-card.p1{ transform:rotate(-6deg) translate(0,0) translateZ(0); }
  .poster-card.p2{ transform:rotate(4deg)  translate(135px,10px) translateZ(20px); }
  .poster-card.p3{ transform:rotate(-3deg) translate(60px,160px) translateZ(10px); }
  .poster-card.p4,
  .poster-card.p5,
  .poster-card.p6{ display:none; }
}

/* reduced-motion：Hero 卡阵关闭动效，静态平铺 */
@media (prefers-reduced-motion:reduce){
  .hero-posters{ height:auto; display:flex; flex-wrap:wrap; gap:var(--sp-3); perspective:none; }
  .poster-card{
    position:relative; inset:auto; width:140px; height:auto;
    transform:none !important; transition:none !important;
  }
  .hero-posters:hover .poster-card:not(:hover){ transform:none !important; }
  .poster-card:hover,.poster-card:focus-visible{ transform:none !important; box-shadow:var(--glass-shadow); }
  @media (max-width:639px){
    .poster-card.p4,.poster-card.p5,.poster-card.p6{ display:flex; }
  }
}

/* ====================== 玻璃卡网格变体（design-spec §4.3） ====================== */
/* 四宫格（商务合作模式）：桌面 span 3，平板 span 6，移动 1/-1 */
.grid-4 > .glass{ grid-column:span 3; }
@media (max-width:1023px){ .grid-4 > .glass{ grid-column:span 6; } }
@media (max-width:639px){ .grid-4 > .glass{ grid-column:1/-1; } }

/* 数据与能力四卡：桌面 span 6（2×2），移动单列 */
.grid-2 > .glass{ grid-column:span 6; }
@media (max-width:639px){ .grid-2 > .glass{ grid-column:1/-1; } }

/* 合规矩阵 5 卡：桌面 span 2 一行 5 张，平板 span 4，移动单列 */
.grid-5 > .glass{ grid-column:span 2; }
@media (max-width:1023px){ .grid-5 > .glass{ grid-column:span 4; } }
@media (max-width:639px){ .grid-5 > .glass{ grid-column:1/-1; } }

/* 自适应网格（创作者工作台 5 模块等不定数量卡片） */
.grid-auto{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--gutter); }
@media (max-width:639px){ .grid-auto{ grid-template-columns:1fr; } }

/* 卡片内：图标 + 标题 + 说明 */
.card-icon{ width:28px; height:28px; margin-bottom:var(--sp-3); color:var(--accent-purple); }
.card-icon svg{ width:28px; height:28px; }
.card-title{ font-size:22px; font-weight:600; margin-bottom:var(--sp-2); }
.card-desc{ font-size:15px; color:var(--text-200); line-height:1.6; }

/* 数据四卡大数字 */
.stat-num{ font-size:36px; font-weight:800; color:var(--text-100); line-height:1.1; margin-bottom:var(--sp-2); }
.stat-num.placeholder-num{ font-size:24px; font-weight:700; }
.stat-label{ font-size:13px; color:var(--text-200); letter-spacing:.01em; }

/* ====================== 按钮（design-spec §4.4） ====================== */
.btn{
  font-size:15px; font-weight:600; line-height:1; letter-spacing:.01em;
  border-radius:var(--radius);
  padding:14px 28px;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background .2s, box-shadow .2s, transform .1s, border-color .2s;
  border:1px solid transparent;
  min-height:44px;           /* 触控 ≥44px */
}
.btn-primary{ background:var(--accent-orange); color:var(--on-accent); }
.btn-primary:hover{ background:var(--accent-orange-hover); box-shadow:0 8px 24px rgba(255,122,0,0.35); }
.btn-primary:active{ background:var(--accent-orange-active); transform:translateY(1px); }
.btn-primary:disabled{ background:rgba(255,122,0,0.4); color:rgba(10,10,18,0.5); cursor:not-allowed; box-shadow:none; transform:none; }
.btn-primary:focus-visible{ outline:2px solid var(--focus-orange); outline-offset:2px; }

.btn-secondary{ background:transparent; color:var(--text-100); border-color:var(--glass-border-strong); }
.btn-secondary:hover{ border-color:var(--accent-purple); background:var(--accent-purple-soft); }
.btn-secondary:focus-visible{ outline:2px solid var(--accent-purple); outline-offset:2px; }

.btn-text{ background:none; color:var(--accent-orange); padding:8px 4px; min-height:44px; }
.btn-text:hover{ text-decoration:underline; }

.btn-block{ width:100%; }

/* ====================== 表单（design-spec §4.5） ====================== */
.form{ display:flex; flex-direction:column; gap:var(--sp-6); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); }
@media (max-width:639px){ .form-row{ grid-template-columns:1fr; } }

.field{ display:flex; flex-direction:column; }
.field > label{
  display:block;
  font-size:14px; font-weight:500;
  color:var(--text-100);
  margin-bottom:var(--sp-2);
}
.field .req{ color:var(--sem-error); margin-left:2px; }
.field .hint{ font-size:13px; color:var(--text-200); margin-top:6px; }

.input, .select, .textarea{
  width:100%;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--glass-border-strong);
  border-radius:var(--radius);
  color:var(--text-100);
  font-size:16px;
}
.input,.select{ height:48px; padding:12px 14px; }
.textarea{ padding:12px 14px; min-height:120px; resize:vertical; line-height:1.6; }
.select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B9B4CC' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }
.input::placeholder,.textarea::placeholder{ color:var(--text-300); }

.input:focus,.select:focus,.textarea:focus{
  border-color:var(--accent-purple);
  box-shadow:0 0 0 3px var(--accent-purple-soft);
  outline:none;
}
/* 错误态 */
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea{
  border-color:var(--sem-error);
  box-shadow:0 0 0 3px rgba(255,92,92,0.20);
}
.field-error{ color:var(--sem-error); font-size:13px; margin-top:6px; display:none; }
.field.has-error .field-error{ display:block; }

/* 单选 chip（合作类型，design-spec §4.5） */
.chip-group{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.chip-option{ position:relative; }
.chip-option input{ position:absolute; opacity:0; width:1px; height:1px; }
.chip{
  display:inline-flex; align-items:center; min-height:44px;
  border:1px solid var(--glass-border-strong);
  border-radius:var(--radius-pill);
  padding:10px 18px;
  color:var(--text-200);
  font-size:15px; font-weight:500;
  cursor:pointer;
  transition:border-color .2s, background .2s, color .2s;
}
.chip-option input:checked + .chip,
.chip-option input:focus-visible + .chip{
  border-color:var(--accent-orange);
  background:rgba(255,122,0,0.15);
  color:var(--accent-orange);
}
.chip-option input:focus-visible + .chip{ outline:2px solid var(--accent-purple); outline-offset:2px; }

/* 蜜罐隐藏字段（design-spec §4.5） */
.hp-field{
  position:absolute; left:-9999px; top:0;
  width:1px; height:0; opacity:0; overflow:hidden;
}

/* 提交状态提示（design-spec §4.5） */
.form-feedback{ display:none; }
.form-feedback.show{ display:block; }
.form-feedback .fb-inner{
  padding:var(--sp-4) var(--sp-6);
  border-radius:var(--radius);
  border-left:4px solid var(--sem-success);
  background:rgba(61,220,132,0.08);
  color:var(--sem-success);
  font-size:15px; line-height:1.6;
}
.form-feedback.is-error .fb-inner{
  border-left-color:var(--sem-error);
  background:rgba(255,92,92,0.08);
  color:var(--sem-error);
}

/* ====================== 步骤条（design-spec §4.7） ====================== */
.steps{ display:flex; gap:0; counter-reset:step; }
.step{ flex:1; text-align:center; position:relative; padding-inline:var(--sp-2); }
.step-badge{
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent-orange),var(--accent-purple));
  color:var(--on-accent);
  font-size:18px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto var(--sp-3);
  position:relative; z-index:2;
}
.step:not(:last-child)::after{
  content:""; position:absolute;
  top:24px; left:50%; width:100%; height:2px;
  background:var(--glass-border-strong); z-index:1;
}
.step-title{ font-size:16px; font-weight:600; color:var(--text-100); margin-bottom:4px; }
.step-desc{ font-size:13px; color:var(--text-200); }
@media (max-width:639px){
  .steps{ flex-direction:column; gap:var(--sp-6); text-align:left; }
  .step{ display:flex; align-items:center; gap:var(--sp-3); text-align:left; }
  .step-badge{ margin:0; flex-shrink:0; }
  .step:not(:last-child)::after{ display:none; }
}

/* ====================== 区块 CTA / 双 CTA ====================== */
.cta-row{ display:flex; flex-wrap:wrap; gap:var(--sp-6); }
.cta-card{ flex:1 1 280px; display:flex; flex-direction:column; gap:var(--sp-4); }
.cta-card .cta-desc{ font-size:17px; color:var(--text-100); font-weight:500; }

/* 次级链接行（关于页） */
.sublinks{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.sublink{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  padding:10px 18px; border:1px solid var(--glass-border-strong);
  border-radius:var(--radius-pill); color:var(--text-200); font-weight:500;
  transition:border-color .2s, color .2s, background .2s;
}
.sublink:hover{ border-color:var(--accent-purple); color:var(--text-100); background:var(--accent-purple-soft); }

/* ====================== 页脚（design-spec §4.6） ====================== */
.site-footer{
  border-top:1px solid var(--glass-border);
  padding:var(--sp-16) 0 var(--sp-8);
  background:rgba(10,10,18,0.5);
  margin-top:var(--sp-24);
}
.footer-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--sp-6); }
.footer-brand{ grid-column:span 4; }
.footer-brand .brand-text{ font-size:18px; margin-bottom:var(--sp-3); }
.footer-tagline{ font-size:14px; color:var(--text-200); line-height:1.6; max-width:30ch; }
.footer-col{ grid-column:span 2; }
.footer-col h4{ font-size:14px; font-weight:600; color:var(--text-100); margin-bottom:var(--sp-3); letter-spacing:.02em; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:14px; color:var(--text-200); transition:color .2s; min-height:32px; display:inline-flex; align-items:center; }
.footer-col a:hover{ color:var(--text-100); }
.footer-social{ display:flex; gap:var(--sp-2); margin-top:var(--sp-3); }
.social-link{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--glass-border-strong); border-radius:var(--radius-sm);
  color:var(--text-200); transition:border-color .2s, color .2s;
}
.social-link:hover{ border-color:var(--accent-purple); color:var(--text-100); }
.social-link svg{ width:20px; height:20px; }

.footer-bottom{
  border-top:1px solid var(--glass-border);
  margin-top:var(--sp-8);
  padding-top:var(--sp-6);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3);
  font-size:13px; color:var(--text-300);
}
.footer-bottom .footer-copy{ line-height:1.6; }
.footer-bottom-links{ display:flex; gap:var(--sp-4); flex-wrap:wrap; }
.footer-bottom-links a{ color:var(--text-300); }
.footer-bottom-links a:hover{ color:var(--text-200); }

@media (max-width:1023px){
  .footer-brand{ grid-column:span 12; }
  .footer-col{ grid-column:span 4; }
}
@media (max-width:639px){
  .footer-brand{ grid-column:1/-1; }
  .footer-col{ grid-column:span 6; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ====================== 404（design-spec §6.6） ====================== */
.notfound{
  min-height:calc(100vh - var(--header-h));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:var(--sp-6); padding:var(--sp-16) var(--sp-6);
  position:relative;
}
.notfound .spark-mark{ width:96px; height:96px; margin-bottom:var(--sp-4); }
.notfound .notfound-body{ font-size:18px; color:var(--text-200); max-width:40ch; }

/* ====================== 移动端导航切换（<640 抽屉） ====================== */
@media (max-width:639px){
  .site-header{ height:var(--header-h-m); }
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .hamburger{ display:flex; }
  .nav-actions{ margin-left:auto; }
}