/* ====================================================================
   扬帆云 (yfyun.art) 官方网站统一样式表
   - 设计风格：二次元 / 动漫梦幻风 (Anime & ACG Cyber-Fantasy)
   - 特色要素：自定义魔法星芒光标、青空与樱花落粉渐变、果冻弹跳流光按键、
               轻小说晶透卡片、动漫网点星空背景、霓虹高光与触感物理反馈
   - 性能约束：纯 CSS3 + 内联 SVG Data-URI，零外部 CDN，零外部字体，体积 < 60KB
   ==================================================================== */

:root {
  /* 纯本地系统字体栈，保证极致加载速度 */
  --font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;

  /* 二次元动漫梦幻色彩体系 (Anime Palette) */
  --color-primary: #0284c7;
  --color-primary-hover: #0369a1;
  --color-primary-light: #f0f9ff;
  --color-primary-border: #bae6fd;
  --color-primary-badge: #e0f2fe;

  /* 动漫强调色：青空蓝、樱花粉、幻境紫、星光金 */
  --anime-sky: #0ea5e9;
  --anime-sakura: #ec4899;
  --anime-sakura-light: #fdf2f8;
  --anime-sakura-border: #fbcfe8;
  --anime-violet: #8b5cf6;
  --anime-violet-light: #f5f3ff;
  --anime-gold: #f59e0b;
  --anime-cyan: #06b6d4;

  /* 动漫渐变定义 */
  --gradient-anime-main: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 50%, #ec4899 100%);
  --gradient-anime-hover: linear-gradient(135deg, #0284c7 0%, #7c3aed 50%, #db2777 100%);
  --gradient-anime-card: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 255, 0.9) 100%);
  --gradient-anime-soft: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(236, 72, 153, 0.08) 100%);

  /* 界面基底色与卡片 */
  --color-bg: #f7f9fd;
  --color-surface: #ffffff;
  --color-surface-hover: #fcfdff;
  --color-border: #e6ecf6;
  --color-border-light: #f1f5f9;

  /* 文字颜色体系 */
  --color-text-main: #0f172a;
  --color-text-muted: #475569;
  --color-text-dim: #8b9ab0;
  --color-text-inverse: #ffffff;

  /* 标牌与指示器 */
  --color-tag-bg: #fdf2f8;
  --color-tag-text: #db2777;
  --color-success: #10b981;
  --color-success-bg: #ecfdf5;
  --color-warning: #f59e0b;

  /* 动漫高光阴影 */
  --shadow-sm: 0 2px 4px 0 rgba(139, 92, 246, 0.05);
  --shadow-md: 0 6px 16px -2px rgba(139, 92, 246, 0.08), 0 2px 6px -1px rgba(14, 165, 233, 0.05);
  --shadow-lg: 0 14px 28px -4px rgba(139, 92, 246, 0.12), 0 6px 12px -3px rgba(236, 72, 153, 0.08);
  --shadow-card-hover: 0 16px 36px -6px rgba(139, 92, 246, 0.18), 0 0 20px rgba(14, 165, 233, 0.15);
  --shadow-neon-primary: 0 0 18px rgba(139, 92, 246, 0.4), 0 4px 14px rgba(236, 72, 153, 0.3);

  /* 动漫圆角规范 */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --header-height: 72px;
  --container-max-width: 1140px;

  /* 自定义动漫 SVG Data-URI 光标 */
  --cursor-default: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M4 4L11 23L14.5 15.5L22 12L4 4Z" fill="%230ea5e9" stroke="%23ffffff" stroke-width="2" stroke-linejoin="round"/><circle cx="14" cy="14" r="2.5" fill="%23ec4899"/><path d="M19 4L20 7L23 8L20 9L19 12L18 9L15 8L18 7L19 4Z" fill="%23fbbf24"/></svg>') 4 4, auto;
  --cursor-pointer: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><circle cx="16" cy="16" r="14" fill="%23ec4899" fill-opacity="0.2" stroke="%23ec4899" stroke-width="1.5" stroke-dasharray="3 3"/><path d="M8 24L20 12" stroke="%238b5cf6" stroke-width="3" stroke-linecap="round"/><path d="M22 6L23.5 10L27.5 11.5L23.5 13L22 17L20.5 13L16.5 11.5L20.5 10L22 6Z" fill="%23fbbf24" stroke="%23ffffff" stroke-width="1"/><circle cx="22" cy="11.5" r="1.5" fill="%23ffffff"/><path d="M9 7L10 9L12 10L10 11L9 13L8 11L6 10L8 9L9 7Z" fill="%2338bdf8"/><path d="M25 21L25.8 22.5L27.5 23.3L25.8 24.1L25 25.8L24.2 24.1L22.5 23.3L24.2 22.5L25 21Z" fill="%23f43f5e"/></svg>') 16 16, pointer;
}

/* 基础重置与动漫光标生效 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-main);
  background-color: var(--color-bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  cursor: var(--cursor-default);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  cursor: var(--cursor-default);
  /* 动漫星空与轻小说半色调网点背景图层 */
  background-color: #f7f9fd;
  background-image: 
    radial-gradient(circle at 12% 18%, rgba(236, 72, 153, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 88% 22%, rgba(14, 165, 233, 0.09) 0%, transparent 45%),
    radial-gradient(circle at 50% 75%, rgba(139, 92, 246, 0.07) 0%, transparent 50%),
    radial-gradient(circle, rgba(139, 92, 246, 0.08) 1.5px, transparent 1.5px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 26px 26px;
  background-attachment: fixed;
}

/* 二次元可交互元素光标绑定 */
a, button, [role="button"], summary, input, select, label, .highlight-item, .benefit-card, .pricing-plan-card {
  cursor: var(--cursor-pointer);
}

/* 无障碍键盘聚焦可见性 (动漫粉紫双环霓虹光效) */
:focus-visible {
  outline: 2px solid var(--anime-sakura);
  outline-offset: 3px;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.45);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.25s ease, transform 0.2s ease;
}

a:hover {
  color: var(--anime-sakura);
}

img, svg {
  vertical-align: middle;
  max-width: 100%;
}

button {
  font-family: inherit;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

/* 布局容器 */
.site-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* ====================================================================
   动漫果冻与扫光按键规范 (触控目标 >= 44px)
   ==================================================================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 28px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-inverse) !important;
  background: var(--gradient-anime-main);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 6px 18px -2px rgba(139, 92, 246, 0.35), 0 2px 6px rgba(14, 165, 233, 0.2);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, filter 0.25s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.3px;
}

/* 动漫必杀技高光扫光特效 (Shimmer Sweep) */
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -130%;
  width: 65%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-25deg);
}

.btn-primary:hover::before {
  left: 140%;
  transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 26px -4px rgba(236, 72, 153, 0.45), 0 0 16px rgba(139, 92, 246, 0.35);
  color: var(--color-text-inverse) !important;
}

.btn-primary:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 3px 8px rgba(139, 92, 246, 0.3);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 26px;
  font-size: 15px;
  font-weight: 600;
  color: var(--anime-violet) !important;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(139, 92, 246, 0.3);
  border-radius: var(--radius-full);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(139, 92, 246, 0.06);
}

.btn-secondary:hover {
  background-color: #ffffff;
  border-color: var(--anime-sakura);
  color: var(--anime-sakura) !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 18px rgba(236, 72, 153, 0.22);
}

.btn-secondary:active {
  transform: translateY(1px) scale(0.98);
}

/* ====================================================================
   头部导航条 (动漫通透晶体与磨砂模糊)
   ==================================================================== */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1.5px solid rgba(139, 92, 246, 0.15);
  box-shadow: 0 4px 20px -2px rgba(139, 92, 246, 0.06);
  z-index: 1000;
}

.site-header .site-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 800;
  color: var(--color-text-main);
  letter-spacing: -0.5px;
  min-height: 44px;
}

.brand-logo:hover {
  color: var(--anime-sakura);
}

.logo-symbol {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--gradient-anime-main);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 19px;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
  transform: rotate(-3deg);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand-logo:hover .logo-symbol {
  transform: rotate(6deg) scale(1.08);
}

.main-navigation {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-link-item {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: color 0.2s ease, transform 0.2s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  position: relative;
}

.nav-link-item::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 100%;
  height: 2.5px;
  background: var(--gradient-anime-main);
  border-radius: var(--radius-full);
  transition: transform 0.25s ease;
}

.nav-link-item:hover,
.nav-link-item.active {
  color: var(--anime-violet);
  transform: translateY(-1px);
}

.nav-link-item:hover::after,
.nav-link-item.active::after {
  transform: translateX(-50%) scaleX(1);
}

.header-action-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-btn-register {
  padding: 9px 20px;
  font-size: 14px;
}

.mobile-toggle {
  display: none;
  padding: 10px;
  min-height: 44px;
  min-width: 44px;
  color: var(--color-text-main);
}

/* ====================================================================
   首屏 Hero 区域 (二次元幻彩渐变与星芒微光)
   ==================================================================== */
.section-hero {
  padding: 60px 0 54px;
  background: radial-gradient(circle at 50% 0%, rgba(14, 165, 233, 0.12) 0%, rgba(236, 72, 153, 0.06) 45%, rgba(247, 249, 253, 0) 75%);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

.hero-main-content {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* 动漫胶囊徽章 */
.hero-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 20px;
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid var(--anime-sakura-border);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  color: var(--anime-sakura);
  margin-bottom: 24px;
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.12);
  transition: transform 0.25s ease;
}

.hero-status-pill:hover {
  transform: scale(1.03);
}

.status-indicator-dot {
  width: 8px;
  height: 8px;
  background-color: var(--anime-sakura);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--anime-sakura);
  animation: animeBlink 1.8s infinite ease-in-out;
}

@keyframes animeBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

/* 动漫主标题渐变文字 */
.hero-headline {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.8px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #0284c7 0%, #7c3aed 45%, #db2777 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(139, 92, 246, 0.15));
}

.hero-subheadline {
  font-size: 17px;
  line-height: 1.68;
  color: var(--color-text-muted);
  margin-bottom: 34px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.hero-button-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 38px;
  flex-wrap: wrap;
}

/* 动漫高光特点条 */
.hero-highlights-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(139, 92, 246, 0.18);
  border-radius: var(--radius-lg);
  margin-bottom: 42px;
  box-shadow: 0 6px 20px -3px rgba(139, 92, 246, 0.08);
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-main);
  transition: transform 0.2s ease, color 0.2s ease;
}

.highlight-item:hover {
  transform: translateY(-1px);
  color: var(--anime-violet);
}

.highlight-icon-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #10b981, #06b6d4);
  color: #ffffff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

/* 核心拓扑示意图 (二次元霓虹晶体框架) */
.hero-diagram-container {
  max-width: 940px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  border: 1.5px solid rgba(139, 92, 246, 0.22);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: 0 16px 36px -6px rgba(139, 92, 246, 0.14), 0 0 20px rgba(14, 165, 233, 0.1);
  position: relative;
}

.diagram-caption {
  font-size: 13px;
  color: var(--color-text-dim);
  text-align: center;
  margin-top: 14px;
  font-weight: 500;
}

/* ====================================================================
   通用 Section 与标题排版
   ==================================================================== */
.site-section {
  padding: 72px 0;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.site-section.bg-surface {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
}

.section-header-block {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 52px;
}

/* 动漫二次元副标题标牌 */
.section-pretitle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--anime-violet);
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: var(--radius-full);
  padding: 4px 14px;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.section-pretitle::before {
  content: "✦";
  color: var(--anime-sakura);
}

.section-pretitle::after {
  content: "✦";
  color: var(--anime-sky);
}

.section-main-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #0f172a 0%, #4338ca 60%, #db2777 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-description {
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.68;
}

/* ====================================================================
   核心优势网格 (轻小说通透卡片)
   ==================================================================== */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.benefit-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(139, 92, 246, 0.16);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

.benefit-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-anime-main);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.benefit-card:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: rgba(236, 72, 153, 0.4);
  box-shadow: var(--shadow-card-hover);
}

.benefit-card:hover::after {
  opacity: 1;
}

.card-icon-box {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--gradient-anime-soft);
  border: 1.5px solid var(--color-primary-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--anime-violet);
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.benefit-card:hover .card-icon-box {
  transform: rotate(8deg) scale(1.1);
  background: var(--gradient-anime-main);
  color: #ffffff;
}

.card-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 10px;
}

.card-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.68;
}

/* ====================================================================
   使用场景卡 (3张二次元角色/场景化卡片)
   ==================================================================== */
.scenarios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.scenario-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(139, 92, 246, 0.16);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.scenario-card:hover {
  transform: translateY(-4px);
  border-color: var(--anime-sakura);
  box-shadow: var(--shadow-card-hover);
}

.scenario-tag {
  align-self: flex-start;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--anime-sakura);
  background: var(--anime-sakura-light);
  border: 1px solid var(--anime-sakura-border);
  border-radius: var(--radius-full);
  margin-bottom: 16px;
}

.scenario-header {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 8px;
}

.scenario-device-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--anime-violet);
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(139, 92, 246, 0.2);
}

.scenario-body-text {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.68;
  flex-grow: 1;
}

/* ====================================================================
   流媒体与 AI 生态支持
   ==================================================================== */
.ecosystem-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.ecosystem-panel {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(139, 92, 246, 0.18);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.06);
}

.ecosystem-panel-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ecosystem-panel-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 22px;
  line-height: 1.65;
}

.badge-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.platform-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-main);
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.05);
}

.platform-badge-pill:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: var(--anime-sakura);
  color: var(--anime-sakura);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.2);
}

/* ====================================================================
   4项核心功能特性
   ==================================================================== */
.features-grid-four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.feature-cell {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(139, 92, 246, 0.16);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.feature-cell:hover {
  transform: translateY(-3px);
  border-color: var(--anime-sky);
  box-shadow: var(--shadow-card-hover);
}

.feature-cell-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 10px;
}

.feature-cell-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ====================================================================
   定价套餐网格 (动漫爆款主角高光卡片)
   ==================================================================== */
.pricing-matrix-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

.pricing-plan-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(139, 92, 246, 0.18);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.pricing-plan-card:hover {
  transform: translateY(-4px);
  border-color: var(--anime-violet);
  box-shadow: var(--shadow-card-hover);
}

/* 动漫店长推荐款 / 爆款主角卡片 */
.pricing-plan-card.is-popular {
  border: 2px solid var(--anime-sakura);
  box-shadow: 0 16px 36px -4px rgba(236, 72, 153, 0.3), 0 0 20px rgba(139, 92, 246, 0.2);
  transform: translateY(-6px);
  background: linear-gradient(180deg, #ffffff 0%, #fff9fc 100%);
}

.pricing-plan-card.is-popular:hover {
  transform: translateY(-9px) scale(1.02);
  box-shadow: 0 20px 44px -4px rgba(236, 72, 153, 0.45), 0 0 28px rgba(139, 92, 246, 0.3);
}

.popular-ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 18px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.4);
  letter-spacing: 0.5px;
}

.plan-tier-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 6px;
}

.plan-audience-target {
  font-size: 13px;
  color: var(--color-text-dim);
  margin-bottom: 20px;
}

.plan-pricing-display {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px dashed rgba(139, 92, 246, 0.2);
}

.price-currency {
  font-size: 22px;
  font-weight: 800;
  color: var(--anime-sakura);
}

.price-amount {
  font-size: 42px;
  font-weight: 900;
  color: var(--color-text-main);
  line-height: 1;
}

.price-period {
  font-size: 14px;
  color: var(--color-text-muted);
}

.plan-feature-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
  flex-grow: 1;
}

.plan-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.plan-feature-icon {
  color: var(--anime-sakura);
  font-weight: bold;
  flex-shrink: 0;
}

.pricing-plan-card .btn-primary,
.pricing-plan-card .btn-secondary {
  width: 100%;
}

/* ====================================================================
   常见问题 (FAQ 轻小说任务书/对话框折叠面板)
   ==================================================================== */
.faq-accordion-list {
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.faq-accordion-item {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(139, 92, 246, 0.18);
  border-radius: var(--radius-md);
  transition: all 0.25s ease;
  overflow: hidden;
}

.faq-accordion-item:hover,
.faq-accordion-item[open] {
  border-color: var(--anime-sakura);
  box-shadow: 0 8px 24px -4px rgba(236, 72, 153, 0.15);
}

.faq-accordion-summary {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-main);
  padding: 20px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  list-style: none;
}

.faq-accordion-summary::-webkit-details-marker {
  display: none;
}

.faq-summary-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.faq-q-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--gradient-anime-main);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
}

.faq-chevron-icon {
  width: 20px;
  height: 20px;
  color: var(--anime-violet);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
  flex-shrink: 0;
}

.faq-accordion-item[open] .faq-chevron-icon {
  transform: rotate(180deg) scale(1.15);
  color: var(--anime-sakura);
}

.faq-accordion-body {
  font-size: 14.5px;
  color: var(--color-text-muted);
  line-height: 1.7;
  padding: 0 26px 22px 62px;
  border-top: 1px dashed rgba(139, 92, 246, 0.18);
  padding-top: 16px;
}

/* ====================================================================
   最终 CTA 区块 (星空深邃次元裂隙风格)
   ==================================================================== */
.section-final-cta {
  padding: 80px 0;
  background: linear-gradient(135deg, #090d16 0%, #1e1b4b 50%, #311042 100%);
  color: #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.section-final-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.cta-banner-content {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.cta-headline {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #ffffff 0%, #fbcfe8 50%, #c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cta-subline {
  font-size: 16px;
  color: #cbd5e1;
  margin-bottom: 34px;
  line-height: 1.68;
}

.section-final-cta .btn-primary {
  padding: 15px 42px;
  font-size: 16px;
  box-shadow: 0 8px 30px rgba(236, 72, 153, 0.5);
}

/* ====================================================================
   页脚 (Footer - 严格规范：导航与合规，禁止塞入文章列表)
   ==================================================================== */
.site-footer {
  background: rgba(255, 255, 255, 0.95);
  border-top: 1.5px solid rgba(139, 92, 246, 0.15);
  padding: 52px 0 28px;
  color: var(--color-text-muted);
  font-size: 14px;
}

.footer-top-columns {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 38px;
}

.footer-brand-info p {
  margin-top: 14px;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 400px;
}

.footer-column-heading {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 18px;
  position: relative;
  display: inline-block;
}

.footer-column-heading::after {
  content: '✦';
  color: var(--anime-sakura);
  font-size: 11px;
  margin-left: 6px;
}

.footer-link-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-link-list a {
  color: var(--color-text-muted);
  font-size: 14px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-link-list a:hover {
  color: var(--anime-sakura);
  transform: translateX(4px);
}

.footer-bottom-bar {
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--color-text-dim);
}

.footer-compliance-disclosure {
  font-size: 13px;
  color: var(--color-text-dim);
  line-height: 1.55;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed rgba(139, 92, 246, 0.2);
}

/* ====================================================================
   移动端吸底 CTA 栏 (动漫流光胶囊 Dock)
   ==================================================================== */
.mobile-sticky-dock {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 2px solid var(--anime-sakura-border);
  padding: 0 16px;
  z-index: 999;
  box-shadow: 0 -8px 24px rgba(139, 92, 246, 0.15);
}

.mobile-dock-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mobile-dock-info {
  display: flex;
  flex-direction: column;
}

.dock-brand-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text-main);
}

.dock-desc-text {
  font-size: 11px;
  color: var(--anime-sakura);
  font-weight: 600;
}

.mobile-dock-inner .btn-primary {
  padding: 10px 22px;
  font-size: 14px;
  animation: animePulse 2.2s infinite ease-in-out;
}

@keyframes animePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(236, 72, 153, 0); }
}

/* ====================================================================
   独立文章与内容页面样式 (轻小说排版风格)
   ==================================================================== */
.article-page-layout {
  padding: 48px 0 72px;
}

.article-breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-dim);
  margin-bottom: 26px;
}

.breadcrumb-separator {
  color: var(--anime-sakura);
  font-size: 11px;
}

.article-content-wrapper {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  border: 1.5px solid rgba(139, 92, 246, 0.18);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: 0 16px 36px -6px rgba(139, 92, 246, 0.08);
  max-width: 880px;
  margin: 0 auto;
}

.article-header-meta {
  margin-bottom: 34px;
  padding-bottom: 26px;
  border-bottom: 1.5px dashed rgba(139, 92, 246, 0.2);
}

.article-post-title {
  font-size: 30px;
  font-weight: 800;
  color: var(--color-text-main);
  line-height: 1.38;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #0f172a 0%, #3730a3 50%, #9d174d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.article-meta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  color: var(--color-text-dim);
  flex-wrap: wrap;
}

/* 动漫轻小说导读框 */
.article-intro-box {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(236, 72, 153, 0.08) 100%);
  border-left: 4px solid var(--anime-sakura);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 18px 22px;
  font-size: 15px;
  color: var(--color-text-main);
  line-height: 1.75;
  margin-bottom: 38px;
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.06);
}

.article-typography {
  font-size: 15.5px;
  line-height: 1.82;
  color: var(--color-text-main);
}

.article-typography h2 {
  font-size: 23px;
  font-weight: 800;
  color: var(--color-text-main);
  margin: 40px 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--anime-sakura-border);
  position: relative;
}

.article-typography h2::before {
  content: '「 ';
  color: var(--anime-sakura);
}

.article-typography h2::after {
  content: ' 」';
  color: var(--anime-sakura);
}

.article-typography h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--anime-violet);
  margin: 28px 0 14px;
}

.article-typography p {
  margin-bottom: 20px;
  color: #334155;
}

.article-typography ul,
.article-typography ol {
  margin: 18px 0 24px 22px;
}

.article-typography li {
  margin-bottom: 10px;
  color: #334155;
}

.article-typography ul {
  list-style: disc;
}

.article-typography ol {
  list-style: decimal;
}

.article-table-responsive {
  width: 100%;
  overflow-x: auto;
  margin: 28px 0;
}

.article-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.article-data-table th,
.article-data-table td {
  border: 1px solid var(--color-border);
  padding: 14px 16px;
  text-align: left;
}

.article-data-table th {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(139, 92, 246, 0.1));
  font-weight: 700;
  color: var(--color-text-main);
}

.article-data-table tr:nth-child(even) {
  background-color: #fafbfd;
}

.article-callout-box {
  background: rgba(245, 243, 255, 0.7);
  border: 1.5px solid rgba(139, 92, 246, 0.25);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin: 26px 0;
  font-size: 14.5px;
  line-height: 1.7;
}

.article-callout-box strong {
  color: var(--anime-violet);
}

.article-faq-section {
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px dashed rgba(139, 92, 246, 0.2);
}

.article-faq-section h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 20px;
}

.article-faq-item {
  margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid rgba(139, 92, 246, 0.18);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}

.article-faq-q {
  font-weight: 800;
  font-size: 15.5px;
  color: var(--color-text-main);
  margin-bottom: 8px;
}

.article-faq-a {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.65;
}

.article-summary-box {
  margin-top: 40px;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1.5px solid #a7f3d0;
  border-radius: var(--radius-md);
  padding: 22px;
  font-size: 14.5px;
  color: #166534;
  line-height: 1.7;
}

.article-summary-box strong {
  color: #065f46;
  font-size: 15.5px;
  display: block;
  margin-bottom: 8px;
}

.article-bottom-cta-banner {
  margin-top: 44px;
  background: var(--gradient-anime-main);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  text-align: center;
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.3);
}

.article-bottom-cta-banner h3 {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
}

.article-bottom-cta-banner p {
  font-size: 14.5px;
  color: #fdf2f8;
  margin-bottom: 22px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.article-bottom-cta-banner .btn-primary {
  background: #ffffff;
  color: var(--anime-violet) !important;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.article-bottom-cta-banner .btn-primary:hover {
  background: #ffffff;
  color: var(--anime-sakura) !important;
  transform: translateY(-3px) scale(1.04);
}

.article-internal-links-box {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px dashed rgba(139, 92, 246, 0.2);
}

.internal-links-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 14px;
}

.internal-links-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.internal-links-list a {
  font-size: 14px;
  color: var(--anime-violet);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
}

.internal-links-list a:hover {
  color: var(--anime-sakura);
  transform: translateX(4px);
}

/* ====================================================================
   独立法律/关于页面通用样式
   ==================================================================== */
.legal-page-card {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  border: 1.5px solid rgba(139, 92, 246, 0.18);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: 0 16px 36px -6px rgba(139, 92, 246, 0.08);
  max-width: 880px;
  margin: 0 auto;
}

.legal-page-card h1 {
  font-size: 30px;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 14px;
  background: linear-gradient(135deg, #0f172a 0%, #4338ca 60%, #db2777 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.legal-last-updated {
  font-size: 13px;
  color: var(--color-text-dim);
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1.5px dashed rgba(139, 92, 246, 0.2);
}

.legal-body-content h2 {
  font-size: 21px;
  font-weight: 800;
  color: var(--color-text-main);
  margin: 32px 0 14px;
}

.legal-body-content p {
  font-size: 14.5px;
  line-height: 1.78;
  color: #334155;
  margin-bottom: 18px;
}

.legal-body-content ul {
  list-style: disc;
  margin: 14px 0 22px 26px;
}

.legal-body-content li {
  font-size: 14.5px;
  color: #334155;
  margin-bottom: 10px;
  line-height: 1.65;
}

/* ====================================================================
   指南导航页特有样式
   ==================================================================== */
.guides-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin-top: 38px;
}

.guide-catalog-item {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(139, 92, 246, 0.18);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.guide-catalog-item:hover {
  transform: translateY(-4px);
  border-color: var(--anime-sakura);
  box-shadow: var(--shadow-card-hover);
}

.guide-category-badge {
  align-self: flex-start;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--anime-sakura);
  background: var(--anime-sakura-light);
  border: 1px solid var(--anime-sakura-border);
  border-radius: var(--radius-full);
  margin-bottom: 14px;
}

.guide-item-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 12px;
  line-height: 1.45;
}

.guide-item-title a {
  color: var(--color-text-main);
}

.guide-item-title a:hover {
  color: var(--anime-sakura);
}

.guide-item-summary {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.65;
  flex-grow: 1;
  margin-bottom: 18px;
}

.guide-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-text-dim);
  padding-top: 14px;
  border-top: 1px dashed rgba(139, 92, 246, 0.18);
}

/* ====================================================================
   网站地图样式
   ==================================================================== */
.sitemap-tree-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 32px;
}

.sitemap-branch-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(139, 92, 246, 0.18);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.05);
}

.sitemap-branch-card h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--anime-sakura-border);
}

.sitemap-leaf-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sitemap-leaf-list a {
  font-size: 14px;
  color: #334155;
  transition: color 0.2s ease, transform 0.2s ease;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.sitemap-leaf-list a:hover {
  color: var(--anime-sakura);
  transform: translateX(4px);
}

/* ====================================================================
   响应式媒体查询
   ==================================================================== */
@media (max-width: 992px) {
  .hero-headline {
    font-size: 35px;
  }
  .benefits-grid,
  .scenarios-grid,
  .pricing-matrix-grid {
    grid-template-columns: 1fr;
  }
  .features-grid-four {
    grid-template-columns: repeat(2, 1fr);
  }
  .ecosystem-container {
    grid-template-columns: 1fr;
  }
  .footer-top-columns {
    grid-template-columns: 1fr 1fr;
  }
  .guides-catalog-grid {
    grid-template-columns: 1fr;
  }
  .sitemap-tree-grid {
    grid-template-columns: 1fr;
  }
  .pricing-plan-card.is-popular {
    transform: none;
  }
}

@media (max-width: 768px) {
  /* 移动端恢复系统默认触控光标 */
  html, body, a, button, summary {
    cursor: auto !important;
  }

  .main-navigation {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    border-bottom: 1.5px solid rgba(139, 92, 246, 0.2);
    flex-direction: column;
    align-items: stretch;
    padding: 18px 22px;
    gap: 16px;
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.15);
  }

  .main-navigation.is-open {
    display: flex;
  }

  .mobile-toggle {
    display: block;
  }

  .header-action-group .btn-primary {
    display: none;
  }

  .hero-headline {
    font-size: 29px;
  }

  .hero-subheadline {
    font-size: 15px;
  }

  .hero-highlights-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .features-grid-four {
    grid-template-columns: 1fr;
  }

  .footer-top-columns {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .mobile-sticky-dock {
    display: block;
  }

  body {
    padding-bottom: 64px;
  }

  .article-content-wrapper,
  .legal-page-card {
    padding: 26px 20px;
  }

  .article-post-title {
    font-size: 23px;
  }
}