/* ============================================================
   黑料网入口 — 真相档案 · 设计系统
   风格：纸质档案 / 编辑排版 / 荧光注解
   ============================================================ */

:root{
  --paper:#F5F2EC;
  --paper-2:#EDE7DB;
  --paper-3:#FFFFFF;
  --ink:#241B4B;
  --ink-70:rgba(36,27,75,.70);
  --ink-50:rgba(36,27,75,.50);
  --line:rgba(36,27,75,.14);
  --line-2:rgba(36,27,75,.26);
  --lime:#C8F04C;
  --lime-deep:#A6D62A;
  --coral:#FF6B4A;
  --sky:#8FD4FF;
  --shadow-hard:6px 6px 0 var(--ink);
  --shadow-soft:0 10px 30px -12px rgba(36,27,75,.28);
  --r:14px;
  --r-sm:8px;
}

/* ---------- 基础重置 ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  font-family: system-ui, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  overflow-x:hidden;
  background-color:var(--paper);
  color:var(--ink);
  line-height:1.65;
  font-size:16px;
  font-weight:400;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--lime); color:var(--ink); }

img{ max-width:100%; display:block; }

a{ color:inherit; }

:focus-visible{
  outline:2px dashed var(--coral);
  outline-offset:3px;
}

::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--paper-2); }
::-webkit-scrollbar-thumb{
  background:var(--ink);
  border:3px solid var(--paper-2);
  border-radius:99px;
}
::-webkit-scrollbar-thumb:hover{ background:var(--coral); }

/* ---------- 核心布局 ---------- */
.container {
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  position:relative;
  z-index:2;
}

.section {
  padding:96px 0;
  position:relative;
  overflow:hidden;
}

.section:nth-child(even) {
  background:var(--paper-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* 段落编号装饰 */
.section:nth-child(even)::before{
  content:'';
  position:absolute;
  top:0; left:50%;
  width:120px; height:6px;
  transform:translateX(-50%);
  background:var(--lime);
  border-radius:0 0 6px 6px;
  opacity:.9;
}

/* ---------- 导航 ---------- */
.site-header{
  position:fixed;
  top:0; left:0;
  width:100%;
  z-index:1000;
  background:rgba(245,242,236,.86);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease;
}

.site-header:hover{ box-shadow:0 8px 30px -18px rgba(36,27,75,.4); }

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:68px;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:1.15rem;
  letter-spacing:-.01em;
  text-decoration:none;
  color:var(--ink);
  white-space:nowrap;
}

.logo-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  background:var(--lime);
  color:var(--ink);
  font-weight:900;
  border:1px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}

.logo:hover .logo-icon{
  transform:rotate(-8deg) translate(-1px,-1px);
  box-shadow:4px 4px 0 var(--ink);
}

.main-nav{
  display:flex;
  align-items:center;
  gap:6px;
  list-style:none;
}

.main-nav a{
  text-decoration:none;
  font-size:.9rem;
  font-weight:600;
  color:var(--ink-70);
  padding:8px 12px;
  border-radius:99px;
  position:relative;
  transition:color .2s ease, background .2s ease;
}

.main-nav a::after{
  content:'';
  position:absolute;
  left:12px; right:12px; bottom:4px;
  height:3px;
  background:var(--lime);
  border-radius:99px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}

.main-nav a:hover{ color:var(--ink); }
.main-nav a:hover::after{ transform:scaleX(1); }

.nav-cta{
  padding:9px 20px !important;
  border-radius:99px !important;
  color:#fff !important;
  font-weight:700 !important;
  background:var(--ink);
  border:1px solid var(--ink);
  box-shadow:3px 3px 0 var(--lime);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.nav-cta::after{ display:none; }

.nav-cta:hover{
  transform:translate(-1px,-1px);
  box-shadow:5px 5px 0 var(--lime);
  background:var(--coral);
}

.menu-toggle{
  display:none;
  width:42px; height:38px;
  align-items:center; justify-content:center;
  background:var(--paper-3);
  border:1px solid var(--ink);
  border-radius:10px;
  box-shadow:2px 2px 0 var(--ink);
  cursor:pointer;
  font-size:1rem;
  color:var(--ink);
}

/* ---------- 首页 Hero ---------- */
.hero{
  min-height:70vh;
  display:flex;
  align-items:center;
  padding:150px 0 96px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(880px 420px at 90% 6%, rgba(200,240,76,.55), transparent 62%),
    radial-gradient(680px 520px at 2% 100%, rgba(143,212,255,.42), transparent 62%),
    var(--paper);
}

.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(36,27,75,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,27,75,.07) 1px, transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(circle at 62% 42%, #000 8%, transparent 76%);
  mask-image:radial-gradient(circle at 62% 42%, #000 8%, transparent 76%);
  pointer-events:none;
}

.hero::after{
  content:'';
  position:absolute;
  right:-90px;
  top:22%;
  width:300px;
  height:300px;
  border-radius:50%;
  border:1px dashed var(--line-2);
  pointer-events:none;
  animation:spin 42s linear infinite;
}

@keyframes spin{ to{ transform:rotate(360deg); } }

.hero-content{
  max-width:760px;
  position:relative;
  z-index:2;
}

.hero-content::before{
  content:'';
  position:absolute;
  left:-18px;
  top:6px;
  bottom:6px;
  width:5px;
  border-radius:99px;
  background:linear-gradient(180deg, var(--lime), var(--sky), var(--coral));
}

.hero-eyebrow{
  display:inline-block;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:6px 16px 6px 14px;
  border-radius:99px;
  margin-bottom:22px;
  background:var(--lime);
  color:var(--ink);
  border:1px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
}

.hero h1{
  font-size:clamp(2.2rem, 6.4vw, 4.2rem);
  line-height:1.08;
  margin-bottom:22px;
  font-weight:900;
  letter-spacing:-.035em;
  color:var(--ink);
}

.hero h1 em{
  font-style:normal;
  position:relative;
  white-space:nowrap;
  background:linear-gradient(180deg, transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%);
  padding:0 .08em;
}

.hero p {
  font-size:1.12rem;
  color:var(--ink-70);
  max-width:560px;
  margin-bottom:34px;
  font-weight:400;
}

.hero-buttons{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.hero-image{
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid var(--ink);
  box-shadow:var(--shadow-hard);
  background:var(--paper-3);
  position:relative;
}

.hero-image img{
  width:100%;
  height:auto;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}

.hero-image:hover img{ transform:scale(1.04); }

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 30px;
  border-radius:99px;
  font-weight:700;
  font-size:.95rem;
  cursor:pointer;
  border:1px solid var(--ink);
  text-decoration:none;
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),
             box-shadow .22s ease,
             background .22s ease,
             color .22s ease;
  will-change:transform;
}

.btn::after{
  content:'→';
  font-size:1em;
  transition:transform .25s cubic-bezier(.34,1.4,.64,1);
}

.btn:hover::after{ transform:translateX(4px); }

.btn-primary{
  color:#fff;
  background:var(--ink);
  box-shadow:4px 4px 0 var(--lime);
}

.btn-primary:hover{
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 var(--lime);
  background:#332766;
}

.btn-primary:active{
  transform:translate(1px,1px);
  box-shadow:2px 2px 0 var(--lime);
}

.btn-outline{
  background:transparent;
  border:1.5px solid var(--ink);
  color:var(--ink);
}

.btn-outline:hover{
  background:var(--lime);
  transform:translate(-2px,-2px);
  box-shadow:5px 5px 0 var(--ink);
}

.btn-outline:active{
  transform:translate(1px,1px);
  box-shadow:2px 2px 0 var(--ink);
}

/* ---------- 标签 / 标题 ---------- */
.section-label{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:16px;
  color:var(--ink-70);
}

.section-label::before{
  content:'';
  width:10px;
  height:10px;
  background:var(--coral);
  border-radius:2px;
  transform:rotate(45deg);
  flex:none;
}

.section-title{
  font-size:clamp(1.6rem, 3.4vw, 2.4rem);
  margin-bottom:16px;
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.18;
  color:var(--ink);
}

.section-desc{
  max-width:600px;
  color:var(--ink-70);
  margin-bottom:44px;
  font-size:1.02rem;
}

/* ---------- 卡片网格 ---------- */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:22px;
}

.category-card{
  border-radius:var(--r);
  padding:30px 26px;
  border:1px solid var(--ink);
  background:var(--paper-3);
  transition:transform .28s cubic-bezier(.22,1,.36,1),
             box-shadow .28s ease,
             background .28s ease;
  position:relative;
  overflow:hidden;
}

.category-card::after{
  content:'';
  position:absolute;
  right:-40px;
  bottom:-40px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:var(--lime);
  opacity:0;
  transition:opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1);
  transform:scale(.6);
  z-index:0;
}

.category-card > *{ position:relative; z-index:1; }

.category-card:hover{
  transform:translate(-4px,-4px);
  box-shadow:8px 8px 0 var(--ink);
  background:#fff;
}

.category-card:hover::after{
  opacity:.35;
  transform:scale(1);
}

.card-icon{
  width:48px;
  height:48px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  font-size:1.3rem;
  background:var(--lime);
  color:var(--ink);
  border:1px solid var(--ink);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .3s ease;
}

.category-card:hover .card-icon{
  transform:rotate(-8deg) scale(1.06);
  background:var(--sky);
}

.category-card h3{
  font-size:1.12rem;
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:8px;
}

.category-card p{
  font-size:.92rem;
  color:var(--ink-70);
  margin-bottom:16px;
}

.card-link{
  font-weight:800;
  font-size:.84rem;
  letter-spacing:.04em;
  text-decoration:none;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-bottom:2px solid var(--lime);
  padding-bottom:2px;
  transition:gap .22s ease, color .22s ease;
}

.card-link::after{ content:'↗'; font-size:.95em; }

.card-link:hover{
  gap:11px;
  color:var(--coral);
  border-bottom-color:var(--coral);
}

/* ---------- 特性块 ---------- */
.feature-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}

.feature-image{
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid var(--ink);
  box-shadow:var(--shadow-hard);
  background:var(--paper-3);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}

.feature-image:hover{
  transform:translate(-3px,-3px);
  box-shadow:9px 9px 0 var(--sky);
}

.feature-image img{
  width:100%;
  height:auto;
}

.feature-text h2{
  font-size:clamp(1.5rem, 3vw, 2.1rem);
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.2;
  margin-bottom:16px;
}

.feature-text p{
  color:var(--ink-70);
  margin-bottom:22px;
}

.feature-list{
  list-style:none;
  display:grid;
  gap:8px;
}

.feature-list li{
  padding:8px 0 8px 0;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.96rem;
  font-weight:500;
  border-bottom:1px dashed var(--line-2);
}

.feature-list li::before{
  content:'✓';
  font-weight:900;
  flex:none;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.74rem;
  border-radius:50%;
  background:var(--lime);
  color:var(--ink);
  border:1px solid var(--ink);
}

/* ---------- 数据条 ---------- */
.stats-bar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  text-align:center;
}

.stat-item{
  padding:28px 18px;
  border-radius:var(--r);
  border:1px dashed var(--line-2);
  background:var(--paper-3);
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}

.stat-item:hover{
  background:var(--lime);
  border-color:var(--ink);
  border-style:solid;
  transform:translateY(-4px);
}

.stat-number{
  font-size:clamp(1.8rem, 4vw, 2.4rem);
  font-weight:900;
  letter-spacing:-.045em;
  line-height:1.1;
  display:block;
}

.stat-label{
  font-size:.86rem;
  color:var(--ink-70);
  margin-top:8px;
  font-weight:600;
  letter-spacing:.03em;
}

.stat-item:hover .stat-label{ color:var(--ink); }

/* ---------- 内容墙 ---------- */
.content-wall{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
  gap:22px;
}

.content-wall-item{
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid var(--ink);
  background:var(--paper-3);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}

.content-wall-item:hover{
  transform:translate(-4px,-4px);
  box-shadow:8px 8px 0 var(--coral);
}

.content-wall-item img{
  width:100%;
  height:200px;
  object-fit:cover;
  filter:saturate(.88) contrast(1.03);
  transition:filter .35s ease, transform .55s cubic-bezier(.22,1,.36,1);
}

.content-wall-item:hover img{
  filter:saturate(1.15) contrast(1.06);
  transform:scale(1.05);
}

.content-wall-body{
  padding:20px 22px 24px;
}

.content-wall-body h3{
  font-size:1.04rem;
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:8px;
}

.content-wall-body p{
  font-size:.9rem;
  color:var(--ink-70);
}

/* ---------- FAQ ---------- */
.faq-list{
  max-width:800px;
  margin:0 auto;
}

.faq-item{
  border:1px solid var(--line-2);
  border-radius:12px;
  margin-bottom:10px;
  overflow:hidden;
  cursor:pointer;
  background:var(--paper-3);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.faq-item:hover{
  border-color:var(--ink);
  transform:translateX(3px);
}

.faq-item .faq-question{
  padding:17px 22px;
  font-weight:700;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-size:1rem;
  position:relative;
}

.faq-item .faq-question::after{
  content:'+';
  flex:none;
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--lime);
  border:1px solid var(--ink);
  font-weight:900;
  font-size:1rem;
  line-height:1;
  transition:transform .3s cubic-bezier(.34,1.4,.64,1), background .3s ease;
}

.faq-item.open{
  border-color:var(--ink);
  box-shadow:5px 5px 0 var(--lime);
}

.faq-item.open .faq-question::after{
  transform:rotate(135deg);
  background:var(--coral);
  color:#fff;
}

.faq-item .faq-answer{
  padding:0 22px 18px;
  display:none;
  color:var(--ink-70);
  font-size:.95rem;
  line-height:1.75;
}

.faq-item.open .faq-answer{
  display:block;
  animation:fadeUp .32s ease both;
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- CTA横幅 ---------- */
.cta-banner{
  padding:64px 32px;
  text-align:center;
  border-radius:var(--r);
  color:var(--ink);
  background:
    radial-gradient(600px 300px at 15% 10%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(118deg, var(--lime) 0%, #DCF77E 45%, var(--sky) 115%);
  border:1px solid var(--ink);
  box-shadow:var(--shadow-hard);
  position:relative;
  overflow:hidden;
}

.cta-banner::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(36,27,75,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,27,75,.06) 1px, transparent 1px);
  background-size:44px 44px;
  pointer-events:none;
}

.cta-banner > *{ position:relative; z-index:1; }

.cta-banner h2{
  color:var(--ink);
  font-size:clamp(1.5rem, 3.4vw, 2.2rem);
  font-weight:900;
  letter-spacing:-.03em;
  margin-bottom:12px;
}

.cta-banner p{
  max-width:560px;
  margin:0 auto 28px;
  color:rgba(36,27,75,.78);
  font-weight:500;
}

.cta-banner .btn-primary{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
  box-shadow:4px 4px 0 #fff;
}

.cta-banner .btn-primary:hover{
  background:var(--coral);
  box-shadow:7px 7px 0 #fff;
}

/* ---------- 页脚 ---------- */
.site-footer{
  padding:64px 0 28px;
  background:var(--paper-2);
  border-top:1px solid var(--line-2);
  position:relative;
}

.site-footer::before{
  content:'';
  position:absolute;
  top:-1px; left:0;
  width:100%;
  height:5px;
  background:repeating-linear-gradient(90deg,
    var(--ink) 0 22px,
    var(--lime) 22px 44px,
    var(--coral) 44px 66px,
    var(--sky) 66px 88px);
  opacity:.85;
}

.site-footer .container{ }

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

.footer-brand{
  max-width:320px;
  font-size:.92rem;
  color:var(--ink-70);
}

.footer-brand .logo{
  margin-bottom:16px;
  font-size:1.3rem;
}

.footer-col h4{
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:16px;
  color:var(--ink);
}

.footer-col ul{
  list-style:none;
  display:grid;
  gap:9px;
}

.footer-col a{
  font-size:.9rem;
  color:var(--ink-70);
  text-decoration:none;
  transition:color .2s ease, padding-left .2s ease;
  display:inline-block;
}

.footer-col a:hover{
  color:var(--ink);
  padding-left:6px;
}

.footer-bottom{
  border-top:1px solid var(--line-2);
  margin-top:44px;
  padding-top:22px;
  text-align:center;
  font-size:.84rem;
  color:var(--ink-50);
  letter-spacing:.02em;
}

.footer-bottom a{
  color:var(--ink);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid var(--lime);
}

/* ---------- 工具类 ---------- */
.text-accent{
  color:var(--coral);
  font-weight:800;
  background:linear-gradient(180deg, transparent 62%, rgba(200,240,76,.85) 62%);
}

.text-center{ text-align:center; }

.seo-description{
  max-width:600px;
  margin:0 auto 48px;
  color:var(--ink-70);
  font-size:1rem;
}

.text-center .section-label::before{ margin:0 auto; }

.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px){
  .hero h1{ letter-spacing:-.03em; }
  .footer-grid{ grid-template-columns:1.6fr 1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; max-width:100%; }
}

@media (max-width: 768px) {
  .section{ padding:68px 0; }
  .hero{ padding:126px 0 72px; min-height:auto; }
  .hero-content::before{ display:none; }

  .feature-block{ grid-template-columns:1fr; gap:32px; }
  .feature-block .feature-image{ order:-1; }

  .stats-bar{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }

  .main-nav{ display:none; }
  .menu-toggle{ display:flex; }

  .main-nav.open{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    position:absolute;
    top:68px;
    left:0;
    width:100%;
    background:var(--paper);
    padding:20px 24px 26px;
    border-bottom:1px solid var(--line-2);
    box-shadow:0 20px 40px -22px rgba(36,27,75,.5);
    animation:fadeUp .25s ease both;
  }

  .main-nav.open a{ width:100%; padding:11px 14px; border-radius:10px; }
  .main-nav.open a:hover{ background:var(--lime); }
  .main-nav.open a::after{ display:none; }
  .main-nav.open .nav-cta{ width:auto; margin-top:6px; }

  .btn{ width:100%; justify-content:center; }
  .hero-buttons .btn{ width:100%; }
}

@media (max-width: 480px) {
  .container{ padding:0 18px; }
  .header-inner{ padding:0 18px; height:62px; }
  .main-nav.open{ top:62px; }

  .cards-grid,
  .content-wall,
  .stats-bar{ grid-template-columns:1fr; }

  .footer-grid{ grid-template-columns:1fr; }
  .hero-buttons{ flex-direction:column; }

  .cta-banner{ padding:44px 20px; }
  .faq-item .faq-question{ padding:15px 16px; font-size:.94rem; }
  .faq-item .faq-answer{ padding:0 16px 16px; }
  .category-card{ padding:24px 20px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}