/* ============================================================
   黄色吃瓜黑料网 — 设计系统 “蜜瓜日光 / Melon Daylight”
   色彩：奶油暖白 · 蜜瓜红 · 叶绿 · 日晒黄
   风格：明亮杂志派 · 硬边圆角 · 重量级排版
   ============================================================ */

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

:root{
  --cream:#FFFBF0;
  --cream-2:#FFF3DA;
  --cream-3:#FFFDF8;
  --mint:#E7F7EE;
  --mint-2:#D6F0E1;
  --ink:#16241C;
  --ink-soft:#5A6B60;
  --ink-faint:rgba(22,36,28,0.14);
  --melon:#F2455E;
  --melon-deep:#C92341;
  --leaf:#0FA36B;
  --leaf-deep:#07784C;
  --sun:#FFC93C;
  --sun-deep:#F0A400;
  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;
  --shadow-hard:5px 5px 0 var(--ink);
  --ease:cubic-bezier(.22,.68,.32,1.2);
}

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

/* 颗粒网点底层 —— 让奶油底色不空洞 */
body::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.5;
  background-image:radial-gradient(rgba(22,36,28,0.07) 1px, transparent 1.2px);
  background-size:24px 24px;
}

img{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:var(--sun);color:var(--ink);}

::-webkit-scrollbar{width:11px;}
::-webkit-scrollbar-track{background:var(--cream-2);}
::-webkit-scrollbar-thumb{background:var(--melon);border-radius:99px;border:3px solid var(--cream-2);}

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

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

.section:nth-child(even){
  background:var(--mint);
  border-top:1.5px solid var(--ink-faint);
  border-bottom:1.5px solid var(--ink-faint);
}

/* ---------- 导航 ---------- */
.site-header{
  position:fixed;
  top:0;left:0;
  width:100%;
  z-index:1000;
  background:rgba(255,251,240,0.86);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  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:8px;
  font-weight:800;
  font-size:1.2rem;
  text-decoration:none;
  color:var(--ink);
  letter-spacing:-0.02em;
}

.logo-icon{
  width:36px;
  height:36px;
  border-radius:11px 11px 11px 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  background:
    radial-gradient(circle at 30% 28%, var(--sun) 0 42%, transparent 43%),
    linear-gradient(140deg, var(--melon) 0%, var(--melon-deep) 100%);
  border:2px solid var(--ink);
  color:#fff;
  box-shadow:2px 2px 0 rgba(22,36,28,0.9);
  transform:rotate(-4deg);
  transition:transform .35s var(--ease);
}
.logo:hover .logo-icon{transform:rotate(8deg) scale(1.06);}

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

.main-nav a{
  text-decoration:none;
  font-size:0.9rem;
  font-weight:600;
  color:var(--ink);
  position:relative;
  padding:4px 0;
  transition:color .2s;
}
.main-nav a::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  width:100%;height:6px;
  border-radius:3px;
  background:var(--sun);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
  z-index:-1;
}
.main-nav a:hover{color:var(--melon-deep);}
.main-nav a:hover::after{transform:scaleX(1);}

.nav-cta{
  padding:8px 20px;
  border-radius:99px;
  color:#fff !important;
  font-weight:700;
  background:var(--melon);
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .18s, box-shadow .18s, background .18s;
}
.nav-cta:hover{
  background:var(--leaf);
  transform:translate(3px,3px);
  box-shadow:0 0 0 var(--ink);
}
.nav-cta::after{display:none;}

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

/* ---------- Hero ---------- */
.hero{
  min-height:70vh;
  display:flex;
  align-items:center;
  padding:150px 0 90px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(860px 520px at 88% 4%, rgba(255,201,60,0.42), transparent 68%),
    radial-gradient(760px 520px at 4% 96%, rgba(15,163,107,0.18), transparent 70%),
    radial-gradient(520px 380px at 62% 88%, rgba(242,69,94,0.12), transparent 72%),
    var(--cream);
  border-bottom:2px solid var(--ink);
}

.hero::before{
  content:'瓜';
  position:absolute;
  right:-2vw;
  top:50%;
  transform:translateY(-50%) rotate(-12deg);
  font-size:38vw;
  font-weight:900;
  line-height:0.75;
  color:rgba(242,69,94,0.055);
  pointer-events:none;
  user-select:none;
  z-index:0;
}

.hero::after{
  content:'';
  position:absolute;
  left:-90px;bottom:-90px;
  width:280px;height:280px;
  border-radius:50%;
  background:repeating-linear-gradient(45deg, var(--leaf) 0 10px, transparent 10px 22px);
  opacity:.14;
  pointer-events:none;
}

.hero-content{max-width:720px;position:relative;z-index:3;}

.hero-eyebrow{
  display:inline-block;
  font-size:0.85rem;
  font-weight:700;
  padding:4px 14px;
  border-radius:20px;
  margin-bottom:16px;
  background:var(--sun);
  color:var(--ink);
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  letter-spacing:0.04em;
  transform:rotate(-1.2deg);
}

.hero h1{
  font-size:clamp(2.3rem, 6vw, 4.3rem);
  line-height:1.06;
  margin-bottom:20px;
  font-weight:900;
  letter-spacing:-0.035em;
  text-wrap:balance;
}
.hero h1 em{
  font-style:normal;
  color:var(--melon);
  position:relative;
  white-space:nowrap;
}
.hero h1 em::after{
  content:'';
  position:absolute;
  left:-2px;right:-2px;bottom:6px;
  height:14px;
  background:var(--sun);
  opacity:.6;
  border-radius:4px;
  z-index:-1;
}

.hero p{
  font-size:1.1rem;
  color:var(--ink-soft);
  max-width:560px;
  margin-bottom:32px;
}

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

.hero-image{
  border-radius:var(--r-lg);
  overflow:hidden;
  border:2px solid var(--ink);
  box-shadow:8px 8px 0 var(--sun);
}
.hero-image img{width:100%;height:auto;}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 28px;
  border-radius:99px;
  font-weight:700;
  font-size:0.95rem;
  cursor:pointer;
  border:2px solid var(--ink);
  text-decoration:none;
  transition:transform .18s var(--ease), box-shadow .18s, background .2s, color .2s;
  box-shadow:4px 4px 0 var(--ink);
  letter-spacing:0.01em;
}
.btn:hover{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink);}
.btn:active{transform:translate(4px,4px) scale(.98);}

.btn-primary{
  color:#fff;
  background:linear-gradient(135deg, var(--melon) 0%, var(--melon-deep) 100%);
}
.btn-primary:hover{background:linear-gradient(135deg, var(--leaf) 0%, var(--leaf-deep) 100%);}

.btn-outline{
  background:var(--cream-3);
  border:2px solid var(--ink);
  color:var(--ink);
}
.btn-outline:hover{background:var(--sun);}

/* ---------- 标签 / 标题 ---------- */
.section-label{
  display:inline-block;
  font-size:0.8rem;
  font-weight:800;
  letter-spacing:2.5px;
  margin-bottom:12px;
  color:var(--melon-deep);
  text-transform:uppercase;
  padding-left:26px;
  position:relative;
}
.section-label::before{
  content:'';
  position:absolute;
  left:0;top:50%;
  transform:translateY(-50%);
  width:16px;height:16px;
  border-radius:5px 5px 5px 1px;
  background:var(--leaf);
  box-shadow:2px 2px 0 var(--ink);
}

.section-title{
  font-size:clamp(1.7rem, 3.6vw, 2.5rem);
  margin-bottom:14px;
  font-weight:900;
  letter-spacing:-0.03em;
  line-height:1.15;
}

.section-desc{
  max-width:600px;
  color:var(--ink-soft);
  margin-bottom:40px;
  font-size:1.03rem;
}

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

.category-card{
  border-radius:var(--r-lg);
  padding:28px;
  border:2px solid var(--ink);
  background:var(--cream-3);
  transition:transform .25s var(--ease), box-shadow .25s, background .25s;
  position:relative;
  overflow:hidden;
  box-shadow:4px 4px 0 rgba(22,36,28,0.9);
}
.category-card::before{
  content:'';
  position:absolute;
  top:-40px;right:-40px;
  width:110px;height:110px;
  border-radius:50%;
  background:var(--sun);
  opacity:0;
  transition:opacity .3s, transform .4s var(--ease);
  transform:scale(.6);
  z-index:0;
}
.category-card:hover{
  transform:translate(-3px,-3px);
  box-shadow:8px 8px 0 var(--melon);
  background:#fff;
}
.category-card:hover::before{opacity:.32;transform:scale(1);}
.category-card > *{position:relative;z-index:1;}

.card-icon{
  width:48px;
  height:48px;
  border-radius:14px 14px 14px 5px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  font-size:1.3rem;
  background:var(--mint-2);
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .3s var(--ease), background .25s;
}
.category-card:hover .card-icon{
  background:var(--melon);
  color:#fff;
  transform:rotate(-8deg) scale(1.05);
}

.category-card h3{
  font-size:1.15rem;
  font-weight:800;
  margin-bottom:8px;
  letter-spacing:-0.02em;
}
.category-card p{
  font-size:0.92rem;
  color:var(--ink-soft);
  margin-bottom:14px;
}

.card-link{
  font-weight:800;
  font-size:0.85rem;
  text-decoration:none;
  color:var(--leaf-deep);
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-bottom:2px solid var(--sun);
  padding-bottom:2px;
  transition:gap .2s, color .2s;
}
.card-link::after{content:'→';}
.card-link:hover{gap:12px;color:var(--melon-deep);border-bottom-color:var(--melon);}

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

.feature-image{
  border-radius:var(--r-lg);
  overflow:hidden;
  border:2px solid var(--ink);
  box-shadow:8px 8px 0 var(--leaf);
  position:relative;
}
.feature-image img{width:100%;height:auto;}
.feature-image::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(160deg, rgba(255,201,60,0.14), rgba(242,69,94,0.12));
  pointer-events:none;
}

.feature-text{}
.feature-text h3{
  font-size:clamp(1.4rem,2.6vw,1.9rem);
  font-weight:900;
  letter-spacing:-0.025em;
  margin-bottom:14px;
  line-height:1.24;
}
.feature-text p{color:var(--ink-soft);margin-bottom:18px;}

.feature-list{list-style:none;}
.feature-list li{
  padding:8px 0;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  font-size:0.96rem;
  border-bottom:1px dashed var(--ink-faint);
}
.feature-list li:last-child{border-bottom:none;}
.feature-list li::before{
  content:'✓';
  font-weight:800;
  flex:0 0 auto;
  width:22px;height:22px;
  border-radius:7px 7px 7px 2px;
  background:var(--leaf);
  color:#fff;
  font-size:0.72rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--ink);
}

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

.stat-item{
  padding:28px 20px;
  border-radius:var(--r-lg);
  border:2px solid var(--ink);
  background:var(--cream-3);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .22s var(--ease), background .25s;
}
.stat-item:hover{transform:translateY(-5px);background:var(--sun);}
.stat-item:nth-child(2n):hover{background:var(--mint-2);}

.stat-number{
  font-size:clamp(1.9rem,4vw,2.6rem);
  font-weight:900;
  letter-spacing:-0.045em;
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--melon);
}
.stat-item:nth-child(even) .stat-number{color:var(--leaf-deep);}

.stat-label{
  font-size:0.9rem;
  color:var(--ink-soft);
  margin-top:6px;
  font-weight:600;
}

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

.content-wall-item{
  border-radius:var(--r-lg);
  overflow:hidden;
  border:2px solid var(--ink);
  background:var(--cream-3);
  transition:transform .25s var(--ease), box-shadow .25s;
  box-shadow:4px 4px 0 rgba(22,36,28,0.9);
}
.content-wall-item:hover{
  transform:translate(-3px,-3px);
  box-shadow:8px 8px 0 var(--sun);
}
.content-wall-item img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-bottom:2px solid var(--ink);
}
.content-wall-body{padding:20px;}
.content-wall-body h4{
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-0.02em;
  margin-bottom:6px;
}
.content-wall-body p{font-size:0.9rem;color:var(--ink-soft);}

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

.faq-item{
  border:2px solid var(--ink);
  border-radius:var(--r-md);
  margin-bottom:10px;
  overflow:hidden;
  cursor:pointer;
  background:var(--cream-3);
  transition:background .25s, box-shadow .25s, transform .2s;
  box-shadow:3px 3px 0 rgba(22,36,28,0.9);
}
.faq-item:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--leaf);}

.faq-item .faq-question{
  padding:16px 20px;
  font-weight:800;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  letter-spacing:-0.01em;
}
.faq-item .faq-question::after{
  content:'+';
  flex:0 0 auto;
  width:28px;height:28px;
  border-radius:9px 9px 9px 3px;
  background:var(--sun);
  border:2px solid var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  font-weight:900;
  line-height:1;
  transition:transform .3s var(--ease), background .25s;
}
.faq-item.open{background:var(--mint);}
.faq-item.open .faq-question::after{
  content:'−';
  background:var(--melon);
  color:#fff;
  transform:rotate(180deg);
}

.faq-item .faq-answer{
  padding:0 20px 16px;
  display:none;
  color:var(--ink-soft);
  font-size:0.95rem;
}
.faq-item.open .faq-answer{display:block;animation:fadeUp .35s ease both;}

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

/* ---------- CTA 横幅 ---------- */
.cta-banner{
  padding:56px 24px;
  text-align:center;
  border-radius:var(--r-lg);
  color:#fff;
  background:
    radial-gradient(520px 320px at 12% 10%, rgba(255,201,60,0.65), transparent 62%),
    linear-gradient(130deg, var(--melon) 0%, var(--melon-deep) 55%, var(--leaf-deep) 140%);
  border:2px solid var(--ink);
  box-shadow:10px 10px 0 var(--ink);
  position:relative;
  overflow:hidden;
}
.cta-banner::before{
  content:'';
  position:absolute;
  right:-60px;bottom:-60px;
  width:220px;height:220px;
  border-radius:50%;
  border:18px solid rgba(255,255,255,0.16);
  pointer-events:none;
}
.cta-banner h2{
  color:#fff;
  font-size:clamp(1.5rem,3.4vw,2.2rem);
  font-weight:900;
  letter-spacing:-0.03em;
  margin-bottom:12px;
  position:relative;
}
.cta-banner p{
  color:rgba(255,255,255,0.88);
  max-width:560px;
  margin:0 auto 26px;
  position:relative;
}
.cta-banner .btn-primary{
  background:#fff;
  color:var(--melon-deep);
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  position:relative;
}
.cta-banner .btn-primary:hover{
  background:var(--sun);
  color:var(--ink);
}

/* ---------- 页脚 ---------- */
.site-footer{
  padding:56px 0 28px;
  background:var(--cream-2);
  border-top:2px solid var(--ink);
  position:relative;
}
.site-footer .container{}

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

.footer-brand{}
.footer-brand p{
  color:var(--ink-soft);
  font-size:0.9rem;
  max-width:320px;
  margin-top:12px;
}
.footer-brand .logo{margin-bottom:4px;}

.footer-col h4{
  font-size:0.83rem;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:14px;
  color:var(--melon-deep);
}
.footer-col a{
  display:block;
  font-size:0.9rem;
  color:var(--ink-soft);
  text-decoration:none;
  padding:4px 0;
  transition:color .2s, transform .2s, padding-left .2s;
}
.footer-col a:hover{
  color:var(--leaf-deep);
  padding-left:6px;
}

.footer-bottom{
  border-top:2px dashed var(--ink-faint);
  margin-top:40px;
  padding-top:20px;
  text-align:center;
  font-size:0.85rem;
  color:var(--ink-soft);
}

/* ---------- 工具类 ---------- */
.text-accent{color:var(--melon);}
.text-center{text-align:center;}
.seo-description{
  max-width:600px;
  margin:0 auto 48px;
  color:var(--ink-soft);
}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}

/* ---------- 响应式 ---------- */
@media (max-width:768px){
  .feature-block{grid-template-columns:1fr;gap:32px;}
  .stats-bar{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .main-nav{display:none;}
  .menu-toggle{display:flex;}
  .main-nav.open{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    position:absolute;
    top:68px;
    left:0;
    width:100%;
    background:var(--cream-3);
    padding:20px;
    gap:14px;
    border-bottom:2px solid var(--ink);
    box-shadow:0 12px 0 rgba(22,36,28,0.08);
  }
  .main-nav.open a{font-size:1rem;}
  .hero{padding:130px 0 70px;}
  .section{padding:60px 0;}
  .btn{padding:11px 22px;}
}

@media (max-width:480px){
  .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;}
  .hero::before{font-size:60vw;opacity:.7;}
  .container{padding:0 18px;}
  .cta-banner{padding:38px 18px;box-shadow:6px 6px 0 var(--ink);}
}