/* =========================================================
   FaceMind · 脸谱心智  全站公共样式
   白色基调 · 蓝紫点缀 · 现代极简
   ========================================================= */
:root{
  --pink:#4F72E8;
  --pink-2:#6F8EFF;
  --pink-soft:#EEF3FF;
  --pink-glow:rgba(79,114,232,.18);
  --bg:#FFFFFF;
  --bg-2:#FAFAFC;
  --bg-3:#F4F4F7;
  --card:#FFFFFF;
  --card-2:#FAFAFC;
  --line:rgba(15,15,30,.08);
  --line-2:rgba(15,15,30,.14);
  --text:#0E0E16;
  --text-dim:#5C5C6E;
  --text-mute:#8A8A99;
  --green:#5BBB6C;
  --blue:#3D7BFF;
  --purple:#7A89D9;
  --orange:#FF8E3C;
  --max-w:1200px;
  --radius:18px;
  --radius-sm:12px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);
  color:var(--text);
  font-family:"Space Grotesk","PingFang SC","Microsoft YaHei",-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit}

/* 叠叠社产品标识：圆形角标内使用图标图，替代「叠」字 */
.diedieshe-mark{
  background:transparent !important;
  padding:0 !important;
  overflow:hidden;
  font-size:0 !important;
  line-height:0;
  color:transparent;
}
.diedieshe-mark img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}

/* ---------- 导航 ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 40px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.nav-brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:18px; letter-spacing:-.01em;
}
.nav-brand .logo{
  width:34px;height:34px;border-radius:9px;
  background:#0E0E16;
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;
  box-shadow:0 4px 16px rgba(15,15,30,.18);
  overflow:hidden;
  flex:none;
}
.nav-brand .logo img{
  width:78%;height:78%;object-fit:contain;display:block;
}
.nav-links{display:flex; gap:8px; align-items:center}
.nav-links a{
  padding:8px 14px; border-radius:10px;
  font-size:14px; color:var(--text-dim); font-weight:500;
  transition:all .2s;
}
.nav-links a:hover{ background:var(--bg-3); color:var(--text) }
.nav-links a.active{ background:var(--pink-soft); color:var(--pink) }
.nav-cta{
  padding:8px 18px; border-radius:999px;
  background:linear-gradient(135deg,var(--pink),var(--pink-2));
  color:#fff !important; font-weight:600; font-size:14px;
  box-shadow:0 4px 14px var(--pink-glow);
}
.nav-cta:hover{ background:linear-gradient(135deg,var(--pink-2),var(--pink)); }

.nav-burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-burger span{display:block;width:22px;height:2px;background:var(--text);margin:5px 0;border-radius:2px;transition:.25s}

@media (max-width:860px){
  .nav{padding:12px 20px}
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(255,255,255,.98); backdrop-filter:blur(20px);
    padding:12px 16px; border-bottom:1px solid var(--line);
    transform:translateY(-10px); opacity:0; pointer-events:none; transition:.25s;
  }
  .nav-links.open{transform:none; opacity:1; pointer-events:auto}
  .nav-links a{padding:12px 14px;border-radius:10px}
  .nav-burger{display:block}
}

/* ---------- 页脚 ---------- */
.footer{
  margin-top:80px;
  padding:60px 40px 36px;
  background:var(--bg-2);
  border-top:1px solid var(--line);
}
.footer-inner{
  max-width:var(--max-w); margin:0 auto;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px;
}
.footer h4{font-size:13px; color:var(--text-mute); font-weight:600; margin-bottom:14px; letter-spacing:.06em; text-transform:uppercase}
.footer ul{list-style:none; display:flex; flex-direction:column; gap:10px}
.footer a{font-size:14px; color:var(--text-dim)}
.footer a:hover{color:var(--pink)}
.footer-contact-item{display:flex;flex-direction:column;align-items:flex-start}
.footer-contact-btn{
  background:none; border:0; padding:0; margin:0;
  font:inherit; font-size:14px; color:var(--text-dim); cursor:pointer;
  text-align:left; line-height:inherit;
}
.footer-contact-btn:hover{color:var(--pink)}
.footer-contact-qr{margin-top:12px}
.footer-contact-qr img{
  display:block;
  width:min(200px,72vw);
  height:auto;
  border-radius:14px;
  border:1px solid var(--line);
  box-shadow:0 10px 32px rgba(15,15,30,.08);
}
.footer-brand p{font-size:13px;color:var(--text-mute); margin-top:14px; max-width:320px; line-height:1.7}
.footer-bottom{
  max-width:var(--max-w); margin:48px auto 0; padding-top:24px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:13px; color:var(--text-mute);
}
@media (max-width:860px){
  .footer{padding:48px 20px 32px}
  .footer-inner{grid-template-columns:1fr 1fr; gap:32px}
}

/* ---------- 通用容器 ---------- */
.container{max-width:var(--max-w); margin:0 auto; padding:0 40px}
@media (max-width:860px){.container{padding:0 20px}}

/* ---------- 公共按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:999px;
  font-weight:600; font-size:14px; cursor:pointer; border:0;
  transition:transform .2s, box-shadow .2s;
}
.btn-primary{
  background:linear-gradient(135deg,var(--pink),var(--pink-2));
  color:#fff; box-shadow:0 6px 20px var(--pink-glow);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 28px var(--pink-glow)}
.btn-ghost{
  background:#fff; color:var(--text);
  border:1px solid var(--line-2);
}
.btn-ghost:hover{border-color:var(--pink); color:var(--pink)}

/* ---------- 章节 ---------- */
.section{padding:90px 0}
.section-head{text-align:center; margin-bottom:56px}
.section-tag{
  display:inline-block; padding:6px 14px;
  background:var(--pink-soft); color:var(--pink);
  border-radius:999px; font-size:12px; font-weight:600;
  letter-spacing:.06em; margin-bottom:18px;
}
.section-title{
  font-size:clamp(28px, 4vw, 44px);
  font-weight:700; letter-spacing:-.02em; line-height:1.2;
}
.section-sub{
  margin-top:14px; color:var(--text-dim); font-size:16px;
  max-width:640px; margin-left:auto; margin-right:auto;
}

/* ---------- 卡片网格 ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(15,15,30,.08);
  border-color:var(--line-2);
}

/* ---------- 主页 hero ---------- */
.hero{
  padding:140px 0 90px;
  text-align:center;
  background:
    radial-gradient(circle at 20% 10%, var(--pink-soft) 0%, transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(111,142,255,.08) 0%, transparent 50%),
    linear-gradient(180deg,#FFFFFF 0%, #FAFAFC 100%);
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; background:#fff; border:1px solid var(--line-2);
  border-radius:999px; font-size:13px; color:var(--text-dim); font-weight:500;
  margin-bottom:24px;
  box-shadow:0 4px 14px rgba(15,15,30,.04);
}
.hero-eyebrow .dot{
  width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 4px rgba(91,187,108,.15);
}
.hero h1{
  font-size:clamp(40px, 6.5vw, 76px); font-weight:700;
  letter-spacing:-.03em; line-height:1.05;
}
.hero h1 .grad{
  background:linear-gradient(135deg,var(--pink) 0%, var(--pink-2) 50%, var(--purple) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  margin:24px auto 0; color:var(--text-dim);
  font-size:clamp(16px,1.6vw,19px); max-width:680px; line-height:1.6;
}
.hero-actions{margin-top:36px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ---------- Page hero (子页面通用) ---------- */
.page-hero{
  padding:120px 0 60px;
  background:
    radial-gradient(circle at 80% 0%, var(--pink-soft) 0%, transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%, #FAFAFC 100%);
  text-align:center;
}
.page-hero h1{
  font-size:clamp(34px,5vw,56px); font-weight:700;
  letter-spacing:-.025em; line-height:1.1;
}
.page-hero p{
  margin:18px auto 0; color:var(--text-dim);
  font-size:17px; max-width:680px;
}

/* ---------- 标签 / 徽章 ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.02em;
  background:var(--pink-soft); color:var(--pink);
}
.chip-mute{background:var(--bg-3); color:var(--text-mute)}
.chip-blue{background:rgba(61,123,255,.1); color:var(--blue)}
.chip-green{background:rgba(91,187,108,.12); color:var(--green)}
.chip-purple{background:rgba(122,137,217,.12); color:var(--purple)}
.chip-orange{background:rgba(255,142,60,.12); color:var(--orange)}

/* ---------- 通用动效 ---------- */
@keyframes fadeUp{
  from{opacity:0; transform:translateY(20px)}
  to{opacity:1; transform:none}
}
.reveal{opacity:0; animation:fadeUp .8s ease forwards}
.reveal.d1{animation-delay:.1s}
.reveal.d2{animation-delay:.2s}
.reveal.d3{animation-delay:.3s}
.reveal.d4{animation-delay:.4s}

/* =========================================================
   FaceMind 品牌资产专属区块（深色宇宙感）
   ========================================================= */

/* 通用：暗色品牌带 —— 用于 hero 顶部或区块过渡 */
.brand-band{
  position:relative; overflow:hidden;
  border-radius:24px;
  background:#05060B;
  color:#fff;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 24px 80px rgba(10,10,30,.18);
}
.brand-band .bg{
  position:absolute; inset:0;
  background-image:var(--brand-band-img, url('../assets/brand/facemind-banner.png'));
  background-size:cover; background-position:center;
  opacity:.95;
}
.brand-band .bg::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 30% 60%, rgba(5,6,11,0) 0%, rgba(5,6,11,.55) 75%),
    linear-gradient(180deg, rgba(5,6,11,.15) 0%, rgba(5,6,11,.6) 100%);
}
.brand-band .inner{
  position:relative; z-index:1;
  padding:64px 56px;
}
.brand-band .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  font-size:12px; font-weight:600; letter-spacing:.08em;
  color:#fff; backdrop-filter:blur(8px);
  margin-bottom:18px;
}
.brand-band .eyebrow .dot{
  width:7px;height:7px;border-radius:50%;
  background:#A2C8FF; box-shadow:0 0 0 4px rgba(162,200,255,.18);
}
.brand-band h1, .brand-band h2{
  font-size:clamp(30px,4.5vw,52px);
  font-weight:700; letter-spacing:-.02em; line-height:1.1;
  color:#fff;
}
.brand-band .grad-rainbow{
  background:linear-gradient(110deg,#FFFFFF 0%, #D7E6FF 35%, #A9C5FF 62%, #E7D1A8 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-band p.lead{
  margin-top:18px; max-width:640px;
  font-size:16px; line-height:1.75;
  color:rgba(255,255,255,.78);
}
.brand-band .actions{margin-top:28px; display:flex; gap:12px; flex-wrap:wrap}
.brand-band .btn-light{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:999px;
  background:#fff; color:#0E0E16; font-weight:600; font-size:14px;
  transition:transform .2s, box-shadow .2s;
}
.brand-band .btn-light:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(255,255,255,.18)}
.brand-band .btn-outline-light{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:999px;
  background:rgba(255,255,255,.06); color:#fff;
  border:1px solid rgba(255,255,255,.28);
  font-weight:600; font-size:14px;
  transition:.2s;
}
.brand-band .btn-outline-light:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.55)}
.brand-band .brand-mark{
  position:absolute; right:48px; bottom:36px; z-index:1;
  width:88px; height:88px; border-radius:22px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  display:grid; place-items:center;
  overflow:hidden;
}
.brand-band .brand-mark img{width:64%; height:64%; object-fit:contain}
@media (max-width:860px){
  .brand-band .inner{padding:44px 28px}
  .brand-band .brand-mark{display:none}
}

/* ---- 首页 Hero：F 字母艺术图旁置 ---- */
.hero-with-art{
  display:grid; grid-template-columns:1.25fr .9fr; gap:60px; align-items:center;
  text-align:left;
}
.hero-with-art .hero-copy{text-align:left}
.hero-with-art .hero-copy h1{text-align:left}
.hero-with-art .hero-actions{justify-content:flex-start}
.hero-art{
  position:relative;
  aspect-ratio:1/1;
  border-radius:28px;
  overflow:hidden;
  background:#05060B;
  box-shadow:0 32px 90px rgba(15,15,30,.22),
             0 0 0 1px rgba(255,255,255,.05);
}
.hero-art img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.hero-art::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(5,6,11,.35) 100%);
  pointer-events:none;
}
.hero-art .badge{
  position:absolute; left:18px; bottom:18px;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  color:#fff; font-size:12px; font-weight:600; letter-spacing:.06em;
  backdrop-filter:blur(10px);
}
@media (max-width:980px){
  .hero-with-art{grid-template-columns:1fr; gap:40px; text-align:center}
  .hero-with-art .hero-copy{text-align:center}
  .hero-with-art .hero-copy h1{text-align:center}
  .hero-with-art .hero-actions{justify-content:center}
  .hero-art{max-width:420px; margin:0 auto}
}

/* ---- 品牌资产专属区块 ---- */
.brand-assets{
  background:#05060B; color:#fff;
  border-radius:28px; padding:64px;
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}
.brand-assets::before{
  content:''; position:absolute; inset:0;
  background-image:url('../assets/brand/facemind-banner.png');
  background-size:cover; background-position:center;
  opacity:.35;
}
.brand-assets::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,6,11,.4) 0%, rgba(5,6,11,.85) 100%);
}
.brand-assets > *{position:relative; z-index:1}
.brand-assets .head{text-align:center; margin-bottom:48px}
.brand-assets .head .tag{
  display:inline-block; padding:6px 14px;
  background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px; font-size:12px; font-weight:600;
  letter-spacing:.08em; margin-bottom:18px;
}
.brand-assets .head h2{
  font-size:clamp(28px,3.6vw,40px); font-weight:700; letter-spacing:-.02em;
  color:#fff;
}
.brand-assets .head p{
  margin-top:14px; color:rgba(255,255,255,.7);
  font-size:15px; max-width:580px; margin-left:auto; margin-right:auto;
}
.brand-assets .grid{
  display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:20px;
}
.brand-assets .asset{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px; padding:24px;
  display:flex; flex-direction:column;
  transition:.25s;
}
.brand-assets .asset:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.22);
  transform:translateY(-3px);
}
.brand-assets .asset .preview{
  border-radius:14px; overflow:hidden;
  background:#0A0B12; aspect-ratio:1/1;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.06);
}
.brand-assets .asset.wide .preview{aspect-ratio:21/9}
.brand-assets .asset .preview img{width:100%; height:100%; object-fit:cover}
.brand-assets .asset .label{
  font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:.12em;
  color:rgba(255,255,255,.5); margin-top:18px; margin-bottom:6px;
}
.brand-assets .asset h4{
  font-size:16px; font-weight:600; color:#fff;
}
.brand-assets .asset p{
  margin-top:6px; font-size:13px; color:rgba(255,255,255,.6); line-height:1.6;
}
@media (max-width:980px){
  .brand-assets{padding:40px 24px}
  .brand-assets .grid{grid-template-columns:1fr}
}

/* ---------- 内联代码风格 ---------- */
code, .mono{
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.92em;
}
.kbd{
  padding:2px 7px; border-radius:6px;
  background:var(--bg-3); border:1px solid var(--line);
  font-family:"JetBrains Mono", monospace; font-size:12px;
}