:root{
  --bg:#0b0b0f; --panel:#12131a; --muted:#8a8fa3; --text:#e9ecf1;
  --brand:#8b5cf6; /* violet */
  --brand2:#22d3ee; /* cyan */
  --accent:#f8a91c; /* optional gold micro accents */
  --radius:16px; --max:1040px;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
img{max-width:100%;display:block}
a{color:#c7d2fe;text-decoration:none}
a:hover{text-decoration:underline}
.small{font-size:.875rem;color:var(--muted)}
.lede{font-size:1.125rem;color:#cfd3e6}

/* ===== Header / Footer：Logo 居中，无导航 ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:10;
  padding:18px 20px;               /* 14 -> 18，整体更「稳」一点 */
  display:flex;
  justify-content:center;
  align-items:center;
  backdrop-filter:saturate(1.2) blur(8px);
  background:linear-gradient(180deg, rgba(11,11,15,.96), rgba(11,11,15,.72) 60%, rgba(11,11,15,0));
  border-bottom:1px solid #1a1b22;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.8rem;                        /* 稍微拉开图标与文字间距 */
  padding:8px 18px;                 /* 6x12 -> 8x18，pill 更有存在感 */
  border-radius:999px;
  background:rgba(10,11,18,.98);
  box-shadow:
    0 0 0 1px #24273a,
    0 14px 40px rgba(0,0,0,.55);
}
.brand img{
  width:52px;                       /* 40 -> 52px */
  height:52px;
  border-radius:14px;
}

.brand span{
  letter-spacing:.06em;             /* 提高品牌感 */
  font-weight:700;
  font-size:1.2rem;                 /* ~19px */
  text-transform:uppercase;         /* FANSTUDIO，全大写更像品牌 */
}

.site-footer{
  padding:14px 20px;
  border-top:1px solid #1a1b22;
}
.footer-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  gap:20px;
  grid-template-columns:2fr 1fr 1fr;
  align-items:start;
}
.footer-grid nav,
.footer-grid .social{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.site-footer .legal{text-align:center;margin-top:16px}
.compact{text-align:center}

/* ===== Generic layout ===== */
.hero{
  position:relative;
  overflow:hidden;
  padding:72px 20px 64px;
}
.hero-inner{
  max-width:var(--max);
  margin:0 auto;
  text-align:center;
}
.hero h1{
  font-size:clamp(2.2rem,4vw,3.2rem);
  margin:.3rem 0 .6rem;
}
.hero .cta-row{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:18px;
}
.hero-art{
  position:absolute;
  inset:-20% -10% auto -10%;
  height:120%;
  background:
    radial-gradient(60% 60% at 60% 40%, rgba(139,92,246,.45), transparent 60%),
    radial-gradient(40% 40% at 30% 60%, rgba(34,211,238,.35), transparent 60%);
  filter:saturate(1.2) blur(40px);
  opacity:.8;
  pointer-events:none;
}

/* section headings */
.section-title{
  max-width:var(--max);
  margin:40px auto 16px;
  padding:0 20px;
  font-size:1.25rem;
}
.subtle{opacity:.9}

/* Apps list */
.apps{
  padding:10px 0 24px;
}
.app-card{
  max-width:var(--max);
  margin:0 auto 12px;
  padding:16px 18px;
  display:grid;
  grid-template-columns:96px 1fr;
  gap:16px;
  background:#11121a;
  border:1px solid #1f2130;
  border-radius:var(--radius);
}
.app-card .cta-row{
  margin-top:10px;
}
.app-icon{
  border-radius:22%;
}

.coming-grid{
  max-width:var(--max);
  margin:0 auto;
  padding:0 20px 10px;
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.coming-card{
  padding:14px 14px;
  background:#11121a;
  border:1px solid #1f2130;
  border-radius:12px;
  color:#cbd5e1;
}
.tag{
  margin-left:8px;
  font-size:.75rem;
  padding:3px 8px;
  border-radius:999px;
  background:#1a1b26;
  color:#c7d2fe;
}

/* values */
.values{
  padding:16px 20px 36px;
}
.value-list{
  max-width:var(--max);
  margin:0 auto;
  padding-left:18px;
}

/* newsletter + Buttondown */
.newsletter{
  text-align:center;
  padding:28px 20px 50px;
}
.newsletter form{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.newsletter input[type="email"]{
  min-width:220px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid #283046;
  background:#0b0b10;
  color:var(--text);
}
.newsletter input[type="email"]::placeholder{
  color:var(--muted);
}
.newsletter .small{
  margin-top:8px;
}

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  border-radius:12px;
  padding:10px 14px;
  font-weight:600;
  border:1px solid transparent;
}
.btn-primary{
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  color:#080810;
  border:0;
}
.btn-secondary{
  background:#1a1b26;
  border-color:#283046;
}
.btn-outline{
  border-color:#283046;
}
.btn-ghost{
  background:transparent;
  border-color:#283046;
}

/* Product page */
.product .product-hero{
  max-width:var(--max);
  margin:28px auto;
  padding:0 20px;
  display:grid;
  grid-template-columns:128px 1fr;
  gap:18px;
  align-items:center;
}
.app-icon-xl{
  border-radius:26%;
}
.feature-grid{
  max-width:var(--max);
  margin:16px auto;
  padding:0 20px;
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.feature{
  background:#11121a;
  border:1px solid #1f2130;
  border-radius:14px;
  padding:16px 14px;
}
.faq{
  max-width:var(--max);
  margin:10px auto 24px;
  padding:0 20px;
}
details{
  background:#11121a;
  border:1px solid #1f2130;
  border-radius:12px;
  margin:8px 0;
  padding:10px 12px;
}
details>summary{
  cursor:pointer;
  font-weight:600;
}

.cta-wide{
  text-align:center;
  padding:28px 20px 52px;
}
.cta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* legal/support pages */
.legal-page,
.support{
  max-width:860px;
  margin:22px auto;
  padding:0 20px 40px;
}

/* ===== Screens: 竖图网格，PC 居中，多列自适应 ===== */
.screens{
  margin-block:3rem 4rem;
}
.screens .screens-track{
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(240px, 360px));
  justify-content:center;
  align-content:start;
  padding-inline:.5rem;
}
.screen.phone{
  width:clamp(240px, 26vw, 360px);
  aspect-ratio:9 / 19.5;
  border-radius:20px;
  background:radial-gradient(90% 120% at 50% 10%, #101418, #080a0d);
  box-shadow:0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  padding:10px;
  display:grid;
  place-items:center;
  overflow:hidden;
  margin:0;
}
.screen.phone img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:14px;
  background:#0b0f14;
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
}

/* mobile tweaks */
@media (max-width: 600px){
  .screens .screens-track{
    grid-template-columns:1fr;
    justify-content:center;
  }
  .screen.phone{
    width:min(420px, 96vw);
  }
  .product .product-hero{
    grid-template-columns:1fr;
    text-align:left;
  }
  .footer-grid{
    grid-template-columns:1fr;
  }
}


/* 外层容器：PC 居中、移动端自动缩放 */
.blog-shell{
  max-width: 860px;
  margin: 32px auto 60px;
  padding: 0 20px 40px;
}

/* 列表页顶部标题区 */
.blog-hero{
  text-align:center;
  margin-bottom:28px;
}
.blog-hero h1{
  margin:0 0 8px;
  font-size:clamp(2rem, 3.2vw, 2.4rem);
}
.blog-hero p{
  margin:0;
  color:var(--muted);
}

/* 列表中的每一篇文章卡片 */
.post-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:26px;
}
.post-card{
  background:#11121a;
  border-radius:14px;
  border:1px solid #1f2130;
  padding:16px 18px;
}
.post-card h2{
  margin:0 0 4px;
  font-size:1.1rem;
}
.post-card h2 a{
  color:var(--text);
  text-decoration:none;
}
.post-card h2 a:hover{
  text-decoration:underline;
}
.post-meta{
  font-size:.8rem;
  color:var(--muted);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:4px;
}

/* 文章正文页 */
.blog-article{
  max-width:760px;
  margin:32px auto 64px;
  padding:0 20px 48px;
}
.blog-article-header{
  margin-bottom:24px;
}
.blog-article-header h1{
  margin:0 0 10px;
  font-size:clamp(2rem, 3.2vw, 2.5rem);
}
.blog-article-header .post-meta{
  margin-top:4px;
}

/* 正文排版，略微比默认大一点、行距更松 */
.blog-article p{
  margin:0 0 1.1rem;
  font-size:.98rem;
  line-height:1.8;
}
.blog-article h2{
  margin:2.2rem 0 .6rem;
  font-size:1.35rem;
}
.blog-article h3{
  margin:1.6rem 0 .4rem;
  font-size:1.1rem;
}
.blog-article ul{
  padding-left:1.2rem;
  margin:0 0 1.1rem;
}
.blog-article li{
  margin:.3rem 0;
}

/* 引用块，用来放一句话总结或感想 */
.blog-article blockquote{
  margin:1.4rem 0;
  padding:.6rem 1rem;
  border-left:3px solid var(--brand);
  background:#11121a;
  border-radius:8px;
  color:#c7cbdd;
  font-style:italic;
}

/* 文章里的链接颜色稍改一点 */
.blog-article a{
  color:#a5b4fc;
}
.blog-article a:hover{
  text-decoration:underline;
}

@media (max-width:600px){
  .blog-shell{ margin-top:24px; }
  .blog-article{ margin-top:24px; }
}