/* 夜空蓝底色 + 居中 + 艺术化过渡  // 全站风格 */
:root{
  --bg:#0b1226;      /* 夜蓝主底 */
  --bg2:#132a4a;     /* 夜蓝次底 */
  --ink:#f1f5f9;    /* 主文更亮 */
  --muted:#e2e8f0;  /* 次文也更亮，不发灰 */
  --line:rgba(148,163,184,.25);
  --pink:#f9a8d4; --blue:#93c5fd;
  --radius:18px;
  --container:1800px;
  --shadow:0 12px 40px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--ink);
  font: 16px/1.65 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  -webkit-font-smoothing:antialiased;
}

.container{max-width:var(--container);margin:0 auto;padding:0 22px}
.row{display:flex;align-items:center;justify-content:space-between}
.center{text-align:center}

/* 顶栏：深色毛玻璃 */
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(150%) blur(10px);
  background:rgba(11,18,38,.55);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:black}
.brand-icon{width:70px;height:auto}
.brand-name{font-weight:800;letter-spacing:.2px}
.brand-sub{margin-left:6px;padding:3px 8px;border-radius:999px;background:linear-gradient(90deg,#fde2f3,#dbeafe);font-size:12px}
.nav a{display:inline-block;padding:14px 10px;margin:0 2px;color:#f8fafc;text-decoration:none;border-radius:10px}
.nav a:hover{background:rgba(255,255,255,.07)}

/* HERO：轻雾 + 居中 */
.hero{position:relative;min-height:clamp(720px,88vh,880px);display:flex;align-items:center}
.bg-cover{background-size:cover;background-position:center}
.hero-overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(1100px 420px at 42% 62%, rgba(255,255,255,.18), rgba(255,255,255,.06)),
    linear-gradient(180deg, rgba(249,168,212,.08), rgba(147,197,253,.06));
}
.hero-inner{position:relative;margin:auto;padding:90px 0}
.hero-title{ font-size: clamp(34px, 5vw, 60px); font-weight: 800; }
.hero-tag{   font-size: clamp(16px, 2.2vw, 20px); font-weight: 550; }
.chips{list-style:none;padding:0;margin:0 0 18px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.chips li{padding:8px 12px;border-radius:999px;background:linear-gradient(90deg,#fde2f3,#e0e7ff);color:#111;font-weight:700;font-size:13px}
.cta{display:flex;gap:12px;justify-content:center}
.btn{padding:12px 18px;border-radius:14px;border:1px solid var(--line);text-decoration:none;color:#111;box-shadow:var(--shadow);background:#fff}
.btn.primary{background:linear-gradient(180deg,#fce7f3,#dbeafe)}
.btn.ghost{background:#fff}

/* Apple 风：每屏 1/2 + 1/2 */
.section{min-height:clamp(640px,80vh,800px);display:grid;grid-template-rows:1fr 1fr}
.section .container{height:100%}
.intro{position:relative;display:flex;align-items:center}
.bg-photo{background-size:cover;background-position:center}
.dim-60::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.52))}
.intro .container{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.section-title{ font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; }
.section-title::after{content:"";display:block;width:76px;height:4px;border-radius:999px;margin:12px auto 0;background:linear-gradient(90deg,#f9a8d4,#93c5fd)}
.lead{ font-size: clamp(17px, 2vw, 19px); font-weight: 520; line-height: 1.78; }
.learnmore{display:inline-block;margin-top:14px;color:#f9a8d4;text-decoration:none}
.learnmore:hover{text-decoration:underline}

/* 下半：纯底色 + 白卡 */
.grid{display:flex;align-items:center}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:100%}
.card{
  background: rgba(255,255,255,.6);          /* 80% 白 */
  color:#0b0b0c;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  box-shadow:var(--shadow);
  text-decoration:none;
  transform:translateY(6px);
  transition:transform .3s ease, box-shadow .3s ease, opacity .3s ease;
}

.card:hover{transform:translateY(0);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.card-body{padding:22px}
.card h3{margin:0 0 6px}
.card p{margin:0;color:#475569}

/* 报纸风（仍用白卡） */
.newspaper{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:100%}
.story{
  background: rgba(255,255,255,.8);          /* 80% 白 */
  color:#0b0b0c;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:22px;
  transform:translateY(6px);
  transition:transform .3s ease, box-shadow .3s ease, opacity .3s ease;
}

.story:hover{transform:translateY(0);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.story-link{text-decoration:none;font-weight:800}

/* 动画：淡入上移 + 轻微视差 */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) forwards}

/* 响应式 */
@media (max-width:980px){
  .cards,.newspaper{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .cards,.newspaper{grid-template-columns:1fr}
  .nav{display:none}
}


/* ===== 下半：三卡区（定宽三列，宽度锁死） ===== */
:root{
  --cards-gap: 16px;       /* 卡间距 */
  --card-w: 332px;         /* 单卡固定宽度（320~360按需调） */
  --card-h: 320px;         /* 单卡高度（你不 care 可保持） */
  --media-h: 180px;        /* 顶部图片固定高度 */
  --card-radius: 16px;     /* 圆角 */
}

/* 行容器 */
.grid{ display:flex; align-items:center; }

/* 三卡容器：像素级定宽，避免父容器差异引起的“忽宽忽窄” */
.cards,
.newspaper{ /* 报纸风也用同一套定宽规则，保持一致 */
  display: grid;
  grid-template-columns: repeat(3, var(--card-w));
  gap: var(--cards-gap);
  width: calc(var(--card-w) * 3 + var(--cards-gap) * 2);
  margin: 0 auto;
  justify-content: center;
  align-items: stretch;
  box-sizing: border-box;
}

/* 卡片：固定宽度/高度，不随文字撑大 */
.card,
.story{
  width: var(--card-w);
  height: var(--card-h);
  overflow: hidden;
  border-radius: var(--card-radius);
  background: rgba(255,255,255,.6);
  color:#0b0b0c;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow);
  text-decoration:none;
  display:flex; flex-direction:column;
  transform: translateY(6px);
  transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease;
}
.card:hover,
.story:hover{ transform:translateY(0); box-shadow:0 18px 50px rgba(0,0,0,.35); }

/* 顶部图片：固定高 + 16:9 裁切视觉 */
.card-media{
  margin:0;
  width:100%;
  height:var(--media-h);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  background:#f8fafc;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.card-media img{ width:100%; height:100%; display:block; object-fit:cover; }

/* 文案：行数裁切，避免把卡撑高；间距统一 */
.card .card-body,
.story{ padding:12px 16px 16px; }
.card h3, .card p,
.story h3, .story p{
  margin:0 0 6px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
}
.card h3, .story h3{ -webkit-line-clamp:2; font-weight:800; }
.card p,  .story p { -webkit-line-clamp:2; color:#475569; }

/* —— 响应式只改列数，并精确重算容器宽度 —— */
@media (max-width:1100px){
  .cards, .newspaper{
    grid-template-columns: repeat(2, var(--card-w));
    width: calc(var(--card-w) * 2 + var(--cards-gap) * 1);
  }
}
@media (max-width:720px){
  .cards, .newspaper{
    grid-template-columns: var(--card-w);
    width: var(--card-w);
  }
  .card, .story{ height: calc(var(--card-h) - 10px); } /* 手机端轻微收紧，可删 */
}

/* 顶栏品牌区：并列两个链接 */
.topbar .brand{
  display:inline-flex; align-items:center; gap:10px;
}

.topbar .brand-logo{
  display:inline-flex; align-items:center;
  text-decoration:none;
}
.topbar .brand-icon{
  display:block; height:28px; width:auto;
}

.topbar .brand-sub{
  font-weight:600; color:inherit; text-decoration:none;
}
.topbar .brand-sub:hover{ text-decoration:underline; }
/* =================== Brand (split links) — override patch =================== */
/* 顶栏品牌区整体：跟原来一致的对齐与间距；强制文字颜色用全站主题色，而不是黑色 */
.topbar .brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: var(--ink);            /* 覆盖前面 brand{color:black} 的影响 */
  text-decoration:none;
}

/* 左侧 logo 链接：点击区域更宽，垂直居中，不改变整体高度 */
.topbar .brand-logo{
  display:inline-flex;
  align-items:center;
  padding: 8px 0;              /* 与右侧 nav 的高度更协调 */
  text-decoration:none;
}

/* logo 图片尺寸回到“原来”的 70px 宽；按宽定高，避免被拉伸 */
.topbar .brand-logo .brand-icon,
.topbar .brand .brand-icon{     /* 兼容你之前的 class 写法 */
  width: 70px;
  height: auto;
  display: block;
}

/* 右侧 Stable Diffusion 胶囊：恢复原来的渐变 + 粗体 + 小字重 */
.topbar .brand-sub{
  display:inline-flex;
  align-items:center;
  margin-left: 6px;
  padding: 3px 10px;
  height: 28px;                /* 视觉上更像胶囊 */
  border-radius: 999px;
  background: linear-gradient(90deg,#fde2f3,#dbeafe);
  font-size: 12px;
  font-weight: 800;            /* 和原来的 .brand-name/.brand-sub 粗细接近 */
  letter-spacing: .2px;
  color: #111;                 /* 放在浅色胶囊上 */
  text-decoration: none;
  line-height: 1;
}

/* 悬停与键盘可达性（和原站风格一致） */
.topbar .brand-sub:hover{ filter: brightness(1.05); }
.topbar .brand-logo:hover{ opacity: .95; }
.topbar .brand a:focus-visible{
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

/* 如果你前面有这段，会把 logo 拉到 28px 高，这里把它“回正”：
.topbar .brand-icon{ display:block; height:28px; width:auto; }
上面这句高度会被我们宽度规则覆盖；为了保险，做一次强优先覆盖： */
.topbar .brand-icon{ height: auto !important; width: 70px !important; }

/* ===== Topbar -20% height (keep logo & fonts the same) ===== */
/* 原 nav 链接上下 padding: 14px → 14 * 0.8 = 11px */
.topbar .nav a { padding: 11px 10px; }

/* 原 brand-logo 上下 padding: 8px → 6px */
.topbar .brand-logo { padding: 1px 0; }

/* 如果你的顶栏仍显高，可选再收一点行高（不改字号） */
// .topbar { line-height: 1.4; }  /* 可选 */

/* ===== Stable Diffusion capsule: no underline on hover ===== */
.topbar .brand-sub,
.topbar .brand-sub:hover,
.topbar .brand-sub:focus {
  text-decoration: none !important;
}