/* ============================================================
   吃瓜黑料在线观看 · 瓜田在线 · 设计系统
   风格：鲜果新粗野主义 × 杂志排版 · 奶油纸底 + 西瓜红/藤叶绿
   ============================================================ */

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

:root{
  --paper:      #FFFBF3;
  --paper-2:    #F2FAF4;
  --paper-3:    #FDF3E7;
  --ink:        #14211A;
  --ink-soft:   #5A6B60;
  --melon:      #FF4D6D;
  --melon-deep: #D62F51;
  --melon-soft: #FFE3E8;
  --leaf:       #12A150;
  --leaf-soft:  #E3F7EB;
  --sun:        #FFD84D;
}

html { scroll-behavior:smooth; }

body {
  font-family: system-ui, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  overflow-x:hidden;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(rgba(20,33,26,.075) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height:1.6;
}

::selection { background: var(--melon); color:#fff; }

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

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

.section { padding:88px 0; position:relative; }

.section:nth-child(even) {
  background: var(--paper-2);
  border-top:2px solid rgba(20,33,26,.10);
  border-bottom:2px solid rgba(20,33,26,.10);
}

/* ---------- 导航 ---------- */
.site-header {
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  background: rgba(255,251,243,.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:2px solid var(--ink);
}

.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:900; font-size:1.2rem; letter-spacing:-.6px;
  text-decoration:none; color:inherit; white-space:nowrap;
}

.logo-icon {
  width:36px; height:36px; border-radius:50% 50% 12px 12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; position:relative; overflow:hidden;
  background: var(--melon);
  border:2px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(20,33,26,.25);
}
.logo-icon::after {
  content:''; position:absolute; inset:0 0 auto 0; height:34%;
  background: var(--leaf);
  border-bottom:2px solid var(--ink);
}

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

.main-nav a {
  text-decoration:none; font-size:.9rem; font-weight:700;
  color: var(--ink); position:relative; padding:4px 0;
  transition: color .2s ease;
}
.main-nav a::after {
  content:''; position:absolute; left:0; bottom:-2px;
  width:0; height:3px; background: var(--melon);
  transition: width .26s cubic-bezier(.5,1.6,.4,1);
}
.main-nav a:hover { color: var(--melon-deep); }
.main-nav a:hover::after { width:100%; }

.nav-cta {
  padding:9px 22px; border-radius:999px;
  color:#fff !important; font-weight:800;
  background: var(--melon);
  border:2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.nav-cta::after { display:none; }
.nav-cta:hover {
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 var(--ink);
  color:#fff !important;
}

.menu-toggle {
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  border:2px solid var(--ink); background: var(--sun);
  font-weight:900; font-size:1rem; cursor:pointer;
  box-shadow:2px 2px 0 rgba(20,33,26,.25);
}

/* ---------- 首页 Hero ---------- */
.hero {
  min-height:78vh; display:flex; align-items:center;
  padding:150px 0 90px; position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; right:-140px; top:110px;
  width:440px; height:440px; border-radius:50%;
  background: repeating-linear-gradient(45deg, #FFE3E8 0 20px, #FFD2DB 20px 40px);
  opacity:.6; z-index:0; pointer-events:none;
}
.hero::after {
  content:''; position:absolute; left:-90px; bottom:-120px;
  width:300px; height:300px; border-radius:50%;
  background: var(--leaf-soft); opacity:.85; z-index:0; pointer-events:none;
}

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

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.75rem; font-weight:900; letter-spacing:2.5px;
  text-transform:uppercase; padding:6px 16px; border-radius:999px;
  margin-bottom:22px; color: var(--leaf);
  background: var(--leaf-soft);
  border:2px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(20,33,26,.14);
}
.hero-eyebrow::before {
  content:''; width:8px; height:8px; border-radius:50%;
  background: var(--melon); animation: pulse 1.6s infinite ease-in-out;
}
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.5);opacity:.55;} }

.hero h1 {
  font-size: clamp(2.1rem, 6.2vw, 4rem);
  line-height:1.06; margin-bottom:22px;
  font-weight:900; letter-spacing:-2.5px;
}

.hero p {
  font-size:1.08rem; line-height:1.8;
  color: var(--ink-soft); max-width:580px; margin-bottom:36px;
}

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

.hero-image {
  border-radius:22px; overflow:hidden;
  border:2px solid var(--ink);
  box-shadow: 10px 10px 0 var(--melon);
  background:#fff;
}
.hero-image img { width:100%; height:auto; }

/* ---------- 按钮 ---------- */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 32px; border-radius:999px;
  font-weight:800; font-size:.95rem; letter-spacing:.3px;
  cursor:pointer; border:2px solid var(--ink);
  text-decoration:none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn-primary {
  color:#fff;
  background: var(--melon);
  box-shadow: 5px 5px 0 var(--ink);
}
.btn-primary:hover {
  transform: translate(-2px,-2px);
  box-shadow: 9px 9px 0 var(--ink);
  background: var(--melon-deep);
}
.btn-outline {
  background: transparent; color: var(--ink);
  border:2px solid var(--ink);
  box-shadow: 5px 5px 0 rgba(20,33,26,.12);
}
.btn-outline:hover {
  background: var(--ink); color: var(--paper);
  transform: translate(-2px,-2px);
  box-shadow: 7px 7px 0 var(--leaf);
}

/* ---------- 标签 / 标题 ---------- */
.section-label {
  display:inline-flex; align-items:center; gap:9px;
  font-size:.74rem; font-weight:900; letter-spacing:3px;
  text-transform:uppercase; margin-bottom:14px;
  color: var(--melon-deep);
}
.section-label::before {
  content:''; width:9px; height:9px; border-radius:50%;
  background: var(--melon); box-shadow: 0 0 0 3px var(--melon-soft);
}

.section-title {
  font-size: clamp(1.75rem, 3.8vw, 2.65rem);
  font-weight:900; letter-spacing:-1.6px; line-height:1.12;
  margin-bottom:14px;
}

.section-desc {
  max-width:620px; color: var(--ink-soft);
  font-size:1.02rem; line-height:1.8; margin-bottom:44px;
}

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

.category-card {
  border-radius:20px; padding:30px 28px;
  border:2px solid var(--ink); background:#fff;
  box-shadow: 5px 5px 0 rgba(20,33,26,.14);
  transition: transform .2s cubic-bezier(.3,1.4,.5,1), box-shadow .2s ease, background .2s ease;
  position:relative; overflow:hidden;
}
.category-card:nth-child(3n+1) { background: var(--melon-soft); }
.category-card:nth-child(3n+2) { background: var(--leaf-soft); }
.category-card:nth-child(3n)   { background: #FFF6D9; }

.category-card:hover {
  transform: translate(-4px,-4px);
  box-shadow: 11px 11px 0 var(--melon);
}
.category-card:hover .card-icon { transform: rotate(-8deg) scale(1.06); }

.card-icon {
  width:50px; height:50px; border-radius:15px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; font-size:1.3rem;
  background: var(--ink); color: var(--paper);
  border:2px solid var(--ink);
  transition: transform .24s cubic-bezier(.3,1.5,.5,1);
}
.category-card:nth-child(3n+1) .card-icon { background: var(--melon); color:#fff; }
.category-card:nth-child(3n+2) .card-icon { background: var(--leaf);  color:#fff; }
.category-card:nth-child(3n)   .card-icon { background: var(--sun);   color: var(--ink); }

.category-card h3 {
  font-size:1.14rem; font-weight:900; letter-spacing:-.5px;
  margin-bottom:10px;
}
.category-card p {
  font-size:.92rem; line-height:1.72;
  color: var(--ink-soft); margin-bottom:20px;
}

.card-link {
  font-weight:900; font-size:.85rem; text-decoration:none;
  color: var(--ink); letter-spacing:.4px;
  border-bottom:2px solid var(--melon);
  padding-bottom:3px; display:inline-block;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.card-link:hover {
  color: var(--melon-deep); border-color: var(--ink);
  transform: translateX(4px);
}

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

.feature-image {
  border-radius:24px; overflow:hidden;
  border:2px solid var(--ink);
  box-shadow: 10px 10px 0 var(--leaf);
  background:#fff;
}
.feature-image img { width:100%; height:auto; }

.feature-text { position:relative; }
.feature-text h2,
.feature-text h3 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight:900; letter-spacing:-1.2px; line-height:1.2;
  margin-bottom:14px;
}
.feature-text p {
  color: var(--ink-soft); font-size:1rem; line-height:1.82;
}

.feature-list { list-style:none; margin-top:26px; }
.feature-list li {
  padding:9px 0; display:flex; align-items:center; gap:12px;
  font-weight:700; font-size:.97rem; color: var(--ink);
}
.feature-list li::before {
  content:'✓'; font-weight:900; font-size:.72rem;
  width:24px; height:24px; flex:0 0 24px;
  display:grid; place-items:center;
  border-radius:50%; background: var(--leaf); color:#fff;
  border:2px solid var(--ink);
}

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

.stat-item {
  padding:30px 18px; border-radius:20px;
  border:2px solid var(--ink); background:#fff;
  box-shadow: 5px 5px 0 rgba(20,33,26,.13);
  transition: transform .2s ease, box-shadow .2s ease;
  position:relative; overflow:hidden;
}
.stat-item::before {
  content:''; position:absolute; top:0; left:0; right:0; height:6px;
  background: var(--melon);
}
.stat-item:nth-child(2)::before { background: var(--leaf); }
.stat-item:nth-child(3)::before { background: var(--sun); }
.stat-item:nth-child(4)::before { background: var(--melon-deep); }

.stat-item:hover {
  transform: translateY(-6px);
  box-shadow: 8px 12px 0 var(--melon-soft);
}

.stat-number {
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  font-weight:900; letter-spacing:-2px; line-height:1;
  color: var(--melon-deep);
  font-variant-numeric: tabular-nums;
}
.stat-item:nth-child(2) .stat-number { color: var(--leaf); }
.stat-item:nth-child(3) .stat-number { color:#C99A00; }
.stat-item:nth-child(4) .stat-number { color: var(--ink); }

.stat-label {
  font-size:.85rem; font-weight:700; letter-spacing:.6px;
  color: var(--ink-soft); margin-top:10px;
}

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

.content-wall-item {
  border-radius:20px; overflow:hidden;
  border:2px solid var(--ink); background:#fff;
  box-shadow: 5px 5px 0 rgba(20,33,26,.13);
  transition: transform .2s cubic-bezier(.3,1.4,.5,1), box-shadow .2s ease;
  display:flex; flex-direction:column;
}
.content-wall-item:hover {
  transform: translate(-4px,-4px);
  box-shadow: 11px 11px 0 var(--leaf);
}

.content-wall-item img {
  width:100%; height:200px; object-fit:cover;
  border-bottom:2px solid var(--ink);
  transition: transform .5s ease;
}
.content-wall-item:hover img { transform: scale(1.04); }

.content-wall-body { padding:22px 22px 26px; flex:1; }
.content-wall-body h3 {
  font-size:1.05rem; font-weight:900;
  letter-spacing:-.4px; margin-bottom:8px;
}
.content-wall-body p {
  font-size:.9rem; line-height:1.72; color: var(--ink-soft);
}

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

.faq-item {
  border:2px solid var(--ink); border-radius:18px;
  margin-bottom:12px; overflow:hidden; cursor:pointer;
  background:#fff;
  transition: background .22s ease, box-shadow .22s ease, transform .22s ease;
}
.faq-item:hover { box-shadow: 5px 5px 0 var(--melon-soft); }

.faq-item .faq-question {
  padding:19px 24px; font-weight:800; font-size:1rem;
  display:flex; justify-content:space-between; align-items:center;
  gap:18px; letter-spacing:-.2px;
}
.faq-item .faq-question::after {
  content:'+'; font-size:1.5rem; font-weight:900;
  color: var(--melon); line-height:1;
  transition: transform .25s ease;
  flex:0 0 auto;
}
.faq-item.open .faq-question::after { content:'–'; transform: rotate(180deg); }

.faq-item .faq-answer {
  padding:0 24px 20px; display:none;
  color: var(--ink-soft); font-size:.95rem; line-height:1.8;
}
.faq-item.open { background: var(--melon-soft); }
.faq-item.open .faq-answer { display:block; }

/* ---------- CTA 横幅 ---------- */
.cta-banner {
  padding:66px 34px; text-align:center;
  border-radius:28px; color: var(--ink);
  position:relative; overflow:hidden;
  border:2px solid var(--ink);
  background: linear-gradient(135deg, #FFE3E8 0%, #FFD84D 100%);
  box-shadow: 10px 10px 0 var(--ink);
}
.cta-banner::before {
  content:''; position:absolute; right:-70px; top:-70px;
  width:220px; height:220px; border-radius:50%;
  background: rgba(255,255,255,.55);
}
.cta-banner::after {
  content:''; position:absolute; left:-60px; bottom:-80px;
  width:200px; height:200px; border-radius:50%;
  background: rgba(18,161,80,.18);
}
.cta-banner h2 {
  color: var(--ink); position:relative; z-index:1;
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  font-weight:900; letter-spacing:-1.4px; line-height:1.15;
  margin-bottom:14px;
}
.cta-banner p {
  position:relative; z-index:1;
  max-width:520px; margin:0 auto 30px;
  font-weight:600; color: rgba(20,33,26,.72);
}
.cta-banner .btn-primary {
  position:relative; z-index:1;
  background: var(--ink); color:#fff;
  box-shadow: 5px 5px 0 var(--melon);
}
.cta-banner .btn-primary:hover {
  background: var(--melon-deep);
  box-shadow: 8px 8px 0 var(--ink);
}

/* ---------- 页脚 ---------- */
.site-footer {
  padding:64px 0 28px;
  background: #E9F7EE;
  border-top:2px solid var(--ink);
}

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

.footer-brand .logo { margin-bottom:16px; }

.footer-brand p {
  color: var(--ink-soft); font-size:.92rem;
  line-height:1.78; max-width:320px;
}

.footer-col h4 {
  font-size:.78rem; font-weight:900; letter-spacing:2.4px;
  text-transform:uppercase; margin-bottom:18px;
  color: var(--ink);
}

.footer-col a {
  display:block; text-decoration:none;
  color: var(--ink-soft); font-size:.9rem; font-weight:600;
  padding:5px 0;
  transition: color .18s ease, transform .18s ease;
}
.footer-col a:hover {
  color: var(--melon-deep);
  transform: translateX(5px);
}

.footer-bottom {
  border-top:2px dashed rgba(20,33,26,.22);
  margin-top:48px; padding-top:22px;
  text-align:center; font-size:.82rem;
  color: var(--ink-soft); letter-spacing:.3px;
}

/* ---------- 工具类 ---------- */
.text-accent { color: var(--melon-deep); font-weight:900; }
.text-center { text-align:center; }

.seo-description {
  max-width:660px; margin:0 auto 48px;
  color: var(--ink-soft); font-size:1rem; line-height:1.85;
  text-align:center;
}

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

/* ---------- 响应式 ---------- */
@media (max-width: 992px) {
  .feature-block { gap:40px; }
  .footer-grid { grid-template-columns:1.6fr 1fr 1fr; }
}

@media (max-width: 768px) {
  .section { padding:64px 0; }
  .hero { padding:130px 0 70px; min-height:auto; }
  .hero::before { width:300px; height:300px; right:-150px; top:90px; }

  .feature-block { grid-template-columns:1fr; }
  .feature-image { box-shadow:6px 6px 0 var(--leaf); }

  .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;
    position:absolute; top:68px; left:0; width:100%;
    background:#FFFBF3; padding:22px 24px; gap:16px;
    border-bottom:2px solid var(--ink);
    box-shadow:0 12px 0 rgba(20,33,26,.08);
  }
  .main-nav.open a { font-size:1rem; }
  .main-nav.open .nav-cta { align-self:flex-start; }
}

@media (max-width: 480px) {
  .container { padding:0 18px; }
  .cards-grid, .content-wall, .stats-bar { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .hero-buttons { flex-direction:column; align-items:stretch; }
  .hero-buttons .btn { justify-content:center; }
  .cta-banner { padding:48px 22px; border-radius:22px; box-shadow:6px 6px 0 var(--ink); }
  .category-card, .content-wall-item { box-shadow:4px 4px 0 rgba(20,33,26,.14); }
  .hero::before { display:none; }
}