/* =========================================================
   禁漫天堂app — 设计系统
   风格：纸感杂志 × 漫画分镜 · 暖奶油底 + 珊瑚橘 / 薄荷青
   ========================================================= */

:root{
  --paper:      #FBF7F0;
  --paper-2:    #EFF6F1;
  --paper-3:    #FFF3EC;
  --ink:        #1B3B34;
  --ink-soft:   rgba(27,59,52,.62);
  --ink-faint:  rgba(27,59,52,.38);
  --line:       #E2DCD0;
  --coral:      #FF6B4A;
  --coral-soft: #FFE0D7;
  --teal:       #20B39C;
  --teal-soft:  #D5F2EC;
  --sun:        #FFCE4A;
  --sun-soft:   #FFF1C9;
  --lilac:      #C6B6F2;
  --lilac-soft: #EDE7FD;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  --shadow-hard: 7px 7px 0 rgba(27,59,52,.10);
  --shadow-soft: 0 22px 45px -30px rgba(27,59,52,.55);
  --ease: cubic-bezier(.2,.8,.25,1);
}

/* ---------- 基础重置 ---------- */
*, *::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:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

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

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

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }

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

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

.section:nth-child(even){ background:var(--paper-2); }
.section:nth-child(odd){  background:var(--paper); }

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

.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);
}

.logo-icon{
  width:36px;
  height:36px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  color:#fff;
  background:
    radial-gradient(circle at 30% 25%, #FFB199 0%, transparent 55%),
    linear-gradient(140deg, var(--coral) 0%, var(--sun) 100%);
  box-shadow:3px 3px 0 rgba(27,59,52,.14);
  transform:rotate(-4deg);
  transition:transform .35s var(--ease);
}
.logo:hover .logo-icon{ transform:rotate(6deg) scale(1.06); }

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

.main-nav a{
  position:relative;
  display:inline-block;
  padding:8px 14px;
  text-decoration:none;
  font-size:.9rem;
  font-weight:600;
  color:var(--ink-soft);
  border-radius:var(--r-pill);
  transition:color .22s var(--ease), background .22s var(--ease);
}

.main-nav a::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:4px;
  width:0;
  height:3px;
  border-radius:2px;
  background:var(--coral);
  transform:translateX(-50%);
  transition:width .28s var(--ease);
}

.main-nav a:hover{
  color:var(--ink);
  background:rgba(32,179,156,.10);
}
.main-nav a:hover::after{ width:22px; }

.nav-cta{
  padding:9px 22px !important;
  border-radius:var(--r-pill) !important;
  color:#fff !important;
  font-weight:700 !important;
  background:linear-gradient(135deg, var(--coral), #FF8E6B);
  box-shadow:4px 4px 0 rgba(255,206,74,.75);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease) !important;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{
  background:linear-gradient(135deg, var(--coral), #FF8E6B) !important;
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 rgba(255,206,74,.85);
}

.menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:1.5px solid var(--line);
  border-radius:12px;
  background:var(--paper);
  color:var(--ink);
  font-size:1.1rem;
  cursor:pointer;
  transition:.22s var(--ease);
}
.menu-toggle:hover{ background:var(--teal-soft); border-color:var(--teal); }

/* ---------- Hero ---------- */
.hero{
  min-height:70vh;
  display:flex;
  align-items:center;
  padding:150px 0 90px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,206,74,.32) 0%, transparent 42%),
    radial-gradient(circle at 6% 88%, rgba(32,179,156,.20) 0%, transparent 44%),
    var(--paper);
}

.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(27,59,52,.10) 1.2px, transparent 1.2px);
  background-size:26px 26px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.5), transparent 70%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.5), transparent 70%);
  opacity:.55;
  pointer-events:none;
}

.hero .container{ position:relative; z-index:2; }

.hero-content{
  max-width:720px;
  animation:riseIn .9s var(--ease) both;
}

.hero-eyebrow{
  display:inline-block;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:6px 16px;
  border-radius:var(--r-pill);
  margin-bottom:20px;
  color:#0E8371;
  background:var(--teal-soft);
  border:1.5px dashed rgba(32,179,156,.55);
}

.hero h1{
  font-size:clamp(2.1rem, 5vw, 3.5rem);
  line-height:1.14;
  letter-spacing:-.028em;
  font-weight:900;
  margin-bottom:22px;
  color:var(--ink);
}

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

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

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

.hero-image{
  margin-top:64px;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:2px solid var(--ink);
  box-shadow:12px 12px 0 var(--coral-soft), 12px 12px 0 2px rgba(27,59,52,.06);
  transform:rotate(-.6deg);
  transition:transform .5s var(--ease);
}
.hero-image:hover{ transform:rotate(0deg) scale(1.008); }
.hero-image img{ width:100%; height:auto; }

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 30px;
  border-radius:var(--r-pill);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  border:none;
  text-decoration:none;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}

.btn-primary{
  color:#fff;
  background:linear-gradient(135deg, var(--coral) 0%, #FF8A63 100%);
  box-shadow:5px 5px 0 rgba(255,206,74,.85);
}
.btn-primary:hover{
  transform:translate(-3px,-3px);
  box-shadow:8px 8px 0 rgba(255,206,74,.95);
}
.btn-primary:active{ transform:translate(0,0); box-shadow:2px 2px 0 rgba(255,206,74,.9); }

.btn-outline{
  background:transparent;
  border:2px solid var(--ink);
  color:var(--ink);
  box-shadow:5px 5px 0 rgba(32,179,156,.35);
}
.btn-outline:hover{
  background:var(--ink);
  color:var(--paper);
  transform:translate(-3px,-3px);
  box-shadow:8px 8px 0 rgba(32,179,156,.55);
}

/* ---------- 标签 / 标题 ---------- */
.section-label{
  display:inline-block;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:5px 14px;
  border-radius:var(--r-pill);
  margin-bottom:16px;
  color:#0E8371;
  background:var(--teal-soft);
}

.section-title{
  font-size:clamp(1.6rem, 3.2vw, 2.15rem);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.25;
  margin-bottom:14px;
}

.section-title::after{
  content:'';
  display:block;
  width:56px;
  height:7px;
  border-radius:4px;
  margin-top:16px;
  background:linear-gradient(90deg, var(--coral) 0 55%, var(--sun) 55% 100%);
}

.section-desc{
  max-width:600px;
  color:var(--ink-soft);
  margin-bottom:44px;
}

.text-center .section-title::after{ margin-left:auto; margin-right:auto; }
.text-center .section-desc{ margin-left:auto; margin-right:auto; }

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

.category-card{
  position:relative;
  border-radius:var(--r-md);
  padding:28px;
  border:1.5px solid var(--line);
  background:#fff;
  overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.category-card::before{
  content:'';
  position:absolute;
  top:-40px; right:-40px;
  width:110px; height:110px;
  border-radius:50%;
  background:var(--teal-soft);
  opacity:0;
  transition:opacity .35s var(--ease), transform .45s var(--ease);
}

.category-card:hover{
  transform:translateY(-5px);
  border-color:var(--ink);
  box-shadow:9px 9px 0 var(--coral-soft);
}
.category-card:hover::before{ opacity:1; transform:scale(1.25); }

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

.card-icon{
  width:48px;
  height:48px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  font-size:1.25rem;
  color:var(--ink);
  background:var(--sun-soft);
  border:1.5px solid rgba(27,59,52,.10);
  transition:transform .35s var(--ease);
}
.category-card:nth-child(3n+2) .card-icon{ background:var(--teal-soft); }
.category-card:nth-child(3n+3) .card-icon{ background:var(--lilac-soft); }
.category-card:hover .card-icon{ transform:rotate(-8deg) scale(1.06); }

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

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

.card-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:800;
  font-size:.85rem;
  text-decoration:none;
  color:var(--coral);
  transition:gap .22s var(--ease), color .22s var(--ease);
}
.card-link::after{ content:'→'; transition:transform .22s var(--ease); }
.card-link:hover{ color:var(--ink); }
.card-link:hover::after{ transform:translateX(4px); }

/* ---------- 特性块 ---------- */
.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:11px 11px 0 var(--teal-soft);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.feature-image:hover{
  transform:translate(-3px,-3px);
  box-shadow:15px 15px 0 var(--teal-soft);
}
.feature-image img{ width:100%; height:auto; }

.feature-text h2{
  font-size:clamp(1.5rem, 2.8vw, 2rem);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.28;
  margin-bottom:16px;
}

.feature-text > p{
  color:var(--ink-soft);
  margin-bottom:24px;
}

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

.feature-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:.95rem;
  font-weight:500;
  color:var(--ink);
}

.feature-list li::before{
  content:'✓';
  flex:0 0 auto;
  width:24px;
  height:24px;
  margin-top:3px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.72rem;
  font-weight:900;
  color:#fff;
  background:var(--teal);
  box-shadow:2px 2px 0 rgba(27,59,52,.12);
}

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

.stat-item{
  padding:30px 20px;
  border-radius:var(--r-md);
  border:1.5px solid var(--line);
  background:#fff;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.stat-item:nth-child(1){ border-top:5px solid var(--coral); }
.stat-item:nth-child(2){ border-top:5px solid var(--teal); }
.stat-item:nth-child(3){ border-top:5px solid var(--sun); }
.stat-item:nth-child(4){ border-top:5px solid var(--lilac); }

.stat-item:hover{
  transform:translateY(-5px);
  border-color:var(--ink);
  box-shadow:8px 8px 0 rgba(27,59,52,.08);
}

.stat-number{
  font-size:clamp(1.8rem, 3.2vw, 2.3rem);
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.2;
  color:var(--ink);
}

.stat-label{
  font-size:.88rem;
  font-weight:600;
  color:var(--ink-faint);
  margin-top:6px;
  letter-spacing:.04em;
}

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

.content-wall-item{
  border-radius:var(--r-md);
  overflow:hidden;
  border:1.5px solid var(--line);
  background:#fff;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}

.content-wall-item:hover{
  transform:translateY(-6px) rotate(-.5deg);
  border-color:var(--ink);
  box-shadow:10px 10px 0 var(--sun-soft);
}

.content-wall-item img{
  width:100%;
  height:200px;
  object-fit:cover;
  transition:transform .6s var(--ease), filter .4s var(--ease);
  filter:saturate(1.05);
}
.content-wall-item:hover img{ transform:scale(1.05); }

.content-wall-body{
  padding:20px;
}
.content-wall-body h3{
  font-size:1.02rem;
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:8px;
}
.content-wall-body p{
  font-size:.9rem;
  color:var(--ink-soft);
}

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

.faq-item{
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  background:#fff;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.faq-item:hover{ border-color:var(--teal); box-shadow:5px 5px 0 var(--teal-soft); }

.faq-item .faq-question{
  padding:18px 22px;
  font-weight:700;
  font-size:.98rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.faq-item .faq-question::after{
  content:'＋';
  flex:0 0 auto;
  font-size:1.05rem;
  font-weight:700;
  color:var(--coral);
  transition:transform .3s var(--ease), color .3s var(--ease);
}

.faq-item .faq-answer{
  padding:0 22px 18px;
  display:none;
  font-size:.94rem;
  color:var(--ink-soft);
  border-top:1px dashed rgba(27,59,52,.12);
  padding-top:14px;
  margin:0 22px 18px;
  padding-left:0;
  padding-right:0;
}

.faq-item.open{
  border-color:var(--ink);
  background:var(--paper-3);
  box-shadow:6px 6px 0 var(--coral-soft);
}
.faq-item.open .faq-question::after{
  content:'＋';
  transform:rotate(135deg);
  color:var(--ink);
}
.faq-item.open .faq-answer{ display:block; animation:fadeUp .35s var(--ease) both; }

/* ---------- CTA 横幅 ---------- */
.cta-banner{
  position:relative;
  padding:64px 32px;
  text-align:center;
  border-radius:var(--r-lg);
  color:#fff;
  overflow:hidden;
  background:linear-gradient(125deg, #1F8E7E 0%, #20B39C 42%, #FF6B4A 100%);
  box-shadow:0 30px 60px -35px rgba(27,59,52,.7);
}

.cta-banner::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.22) 1.4px, transparent 1.4px);
  background-size:22px 22px;
  opacity:.5;
  pointer-events:none;
}

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

.cta-banner h2{
  color:#fff;
  font-size:clamp(1.5rem, 3vw, 2.1rem);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.3;
  margin-bottom:14px;
}

.cta-banner p{
  color:rgba(255,255,255,.88);
  max-width:520px;
  margin:0 auto 30px;
  font-size:.98rem;
}

.cta-banner .btn-primary{
  background:#fff;
  color:var(--ink);
  box-shadow:6px 6px 0 rgba(27,59,52,.25);
}
.cta-banner .btn-primary:hover{
  background:var(--sun);
  transform:translate(-3px,-3px);
  box-shadow:9px 9px 0 rgba(27,59,52,.30);
}

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

.site-footer::before{
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%;
  height:5px;
  background:linear-gradient(90deg,
    var(--coral) 0 25%,
    var(--sun) 25% 50%,
    var(--teal) 50% 75%,
    var(--lilac) 75% 100%);
  opacity:.85;
}

.site-footer .container{ position:relative; }

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

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

.footer-brand p{
  font-size:.9rem;
  color:var(--ink-soft);
  max-width:300px;
}

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

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

.footer-col a{
  font-size:.9rem;
  font-weight:500;
  text-decoration:none;
  color:var(--ink-soft);
  transition:color .22s var(--ease), padding-left .22s var(--ease);
  display:inline-block;
}
.footer-col a:hover{
  color:var(--coral);
  padding-left:6px;
}

.footer-bottom{
  border-top:1px solid rgba(27,59,52,.12);
  margin-top:44px;
  padding-top:22px;
  text-align:center;
  font-size:.84rem;
  color:var(--ink-faint);
}

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

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

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

/* ---------- 动效 ---------- */
@keyframes riseIn{
  from{ opacity:0; transform:translateY(26px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(-6px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ⚠️ 响应式 */
@media (max-width: 1024px){
  .footer-grid{ grid-template-columns:1.5fr 1fr 1fr; }
}

@media (max-width: 768px){
  .section{ padding:60px 0; }

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

  .hero{ padding:120px 0 64px; min-height:auto; }
  .hero-image{ margin-top:44px; box-shadow:8px 8px 0 var(--coral-soft), 8px 8px 0 2px rgba(27,59,52,.06); }

  .main-nav{
    display:none;
  }

  .menu-toggle{ display:flex; }

  .main-nav.open{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    position:absolute;
    top:68px;
    left:0;
    width:100%;
    background:var(--paper);
    padding:20px 24px 26px;
    border-bottom:1.5px solid var(--line);
    box-shadow:0 24px 40px -30px rgba(27,59,52,.6);
    animation:fadeUp .3s var(--ease) both;
  }

  .main-nav.open a{
    padding:12px 16px;
    font-size:.95rem;
    border-radius:12px;
    background:rgba(255,255,255,.75);
    border:1px solid var(--line);
  }
  .main-nav.open .nav-cta{
    text-align:center;
    border:none;
    margin-top:6px;
  }
}

@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{ width:100%; }

  .cta-banner{ padding:48px 20px; border-radius:22px; }
}

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