/* ===== 漫蛙33 — 目标站1风格还原 ===== */
/* 配色：浅米白背景 + 深森林绿深色区 + 亮草绿强调 */
:root{
  --bg:#F5F5F0;          /* 浅米白主背景 */
  --bg-2:#FFFFFF;        /* 白色卡片/头部 */
  --dark:#1A3C28;        /* 深森林绿（深色章节/页脚） */
  --accent:#A4D03E;      /* 亮草绿（按钮/强调） */
  --accent-dark:#8BB532; /* 草绿悬停态 */
  --ink:#1A1A1A;         /* 主标题近黑 */
  --ink-2:#4A4A4A;       /* 正文深灰 */
  --muted:#888888;       /* 辅助中灰 */
  --line:#E0E0E0;        /* 浅灰细边框 */
  --line-dark:rgba(255,255,255,.18); /* 深色区边框 */
  --font-cn:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-serif:"Noto Serif SC",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--font-cn);background:var(--bg);color:var(--ink-2);line-height:1.7;overflow-x:hidden}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ===== 动态背景：浅米白底 + 柔和绿色光晕 + 细网点 ===== */
.bg-layer{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.bg-ink{position:absolute;inset:0;background:
  radial-gradient(ellipse at 15% 12%,rgba(164,208,62,.08),transparent 45%),
  radial-gradient(ellipse at 85% 78%,rgba(26,60,40,.05),transparent 45%),
  var(--bg)}
.bg-halftone{position:absolute;inset:0;background-image:radial-gradient(rgba(26,60,40,.06) 1px,transparent 1px);background-size:28px 28px;opacity:.5}
.bg-orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.12;animation:drift 30s ease-in-out infinite}
.orb-1{width:440px;height:440px;background:#A4D03E;top:-140px;right:-80px}
.orb-2{width:360px;height:360px;background:#1A3C28;bottom:6%;left:-80px;animation-delay:-12s}
.orb-3{width:280px;height:280px;background:#A4D03E;top:45%;left:62%;animation-delay:-20s;opacity:.07}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-24px,20px)}}

/* ===== 顶栏：白底 + 绿色品牌 ===== */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.3rem;color:var(--ink);font-family:var(--font-serif)}
.brand img{width:36px;height:36px}
.site-nav{display:flex;gap:1.8rem;align-items:center}
.site-nav a{font-size:.88rem;color:var(--ink-2);transition:.2s;position:relative;padding:.3rem 0}
.site-nav a:hover{color:var(--dark)}
.site-nav a:hover::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent)}
.nav-cta{background:var(--accent);color:#1A3C28!important;padding:.5rem 1.4rem;font-weight:700;border-radius:6px;transition:.2s}
.nav-cta:hover{background:var(--accent-dark);color:#fff!important}
.nav-cta::after{display:none!important}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;width:44px;height:44px;justify-content:center;align-items:center}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--dark)}
.m-menu{display:none;position:fixed;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:1rem 20px;flex-direction:column;gap:.7rem;z-index:99}
.m-menu.is-open{display:flex}
.m-menu a{font-size:.92rem;color:var(--ink-2);padding:.75rem 0;border-bottom:1px solid var(--line);min-height:44px;display:flex;align-items:center}
.m-menu .nav-cta{justify-content:center;margin-top:.5rem;border-bottom:none;min-height:44px}

/* ===== Hero ===== */
.hero{position:relative;padding:3.5rem 0 3rem;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;position:relative;z-index:1}
/* 章节编号标签：小号绿色大写英文 */
.tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-cn);font-size:.72rem;letter-spacing:.16em;color:var(--accent-dark);text-transform:uppercase;font-weight:700;margin-bottom:1rem}
.tag .dot-live{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero h1{font-family:var(--font-serif);font-size:clamp(2rem,7vw,4rem);font-weight:900;color:var(--ink);letter-spacing:.01em;line-height:1.1;margin-bottom:.8rem}
.hero h1 .g{color:var(--accent-dark)}
.hero h1 .sub{display:block;font-family:var(--font-cn);font-size:.32em;color:var(--ink-2);font-weight:500;margin-top:.6rem;letter-spacing:.02em}
.hero-lead{font-size:1.08rem;color:var(--ink-2);margin-bottom:.6rem;font-weight:500}
.hero-desc{color:var(--muted);font-size:.92rem;margin-bottom:1.8rem;max-width:30rem;line-height:1.75}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-bottom:1.8rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.8rem;font-weight:700;font-size:.95rem;border:none;cursor:pointer;border-radius:8px;transition:.25s}
/* 亮草绿圆角矩形按钮 */
.btn-primary{background:var(--accent);color:#1A3C28}
.btn-primary:hover{background:var(--accent-dark);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--dark);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-dark)}
/* 横向功能亮点标签：浅灰细线边框 */
.hero-pills{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-pills span{font-size:.82rem;color:var(--ink-2);background:#fff;border:1px solid var(--line);padding:.35rem 1rem;border-radius:4px;font-weight:500}

/* Hero 手机展示 */
.hero-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:480px}
.phone-frame{position:relative;border-radius:36px;padding:12px;background:#fff;box-shadow:0 20px 50px -12px rgba(26,60,40,.18),0 0 0 1px var(--line)}
.phone-frame img{width:210px;height:auto;border-radius:26px;aspect-ratio:320/756;object-fit:cover}

/* ===== 通用板块 ===== */
.sec{padding:4rem 0}
.sec-alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* 章节头部：大号深绿衬线编号 + 小号绿色大写英文标签 */
.sec-head{text-align:center;margin-bottom:2.8rem}
.sec-head .tag{margin-bottom:.4rem}
.sec-head h2{font-family:var(--font-serif);font-size:clamp(1.8rem,4.5vw,2.4rem);font-weight:700;color:var(--ink);margin-bottom:.6rem}
.sec-head p{color:var(--muted);font-size:.92rem}

/* ===== 01 发现路径 ===== */
.discover-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
/* 白卡 + 浅灰细边框 + 无阴影 + 圆角4px */
.discover-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:1.8rem 1.6rem;position:relative;transition:.25s}
.discover-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.d-num{font-family:var(--font-serif);font-size:2.2rem;font-weight:900;color:var(--dark);opacity:.15;margin-bottom:.4rem;line-height:1}
.discover-card h3{font-size:1.12rem;color:var(--ink);margin-bottom:.5rem;font-weight:700}
.discover-card p{font-size:.86rem;color:var(--ink-2);line-height:1.7;margin-bottom:1rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chips span{font-size:.74rem;color:var(--ink-2);background:#F5F5F0;padding:.28rem .7rem;border-radius:4px;border:1px solid var(--line)}

/* ===== 02 更新追踪时间线 — 深森林绿背景 ===== */
#update{background:var(--dark);color:#fff}
#update .sec-head h2{color:#fff}
#update .sec-head p{color:rgba(255,255,255,.6)}
#update .tag{color:var(--accent)}
.timeline{max-width:820px;margin:0 auto}
/* 星期列表 */
.tl-days{display:flex;gap:.5rem;justify-content:center;margin-bottom:2.2rem;flex-wrap:wrap}
.tl-days span{font-size:.82rem;color:rgba(255,255,255,.6);padding:.5rem 1rem;border-radius:20px;border:1px solid var(--line-dark);transition:.2s;cursor:default;font-weight:500}
.tl-days span.active{background:var(--accent);color:var(--dark);border-color:var(--accent);font-weight:700}
/* 时间线事件 */
.tl-list{display:flex;flex-direction:column;gap:.9rem}
.tl-item{display:flex;gap:1.3rem;align-items:flex-start;background:rgba(255,255,255,.05);border:1px solid var(--line-dark);border-radius:8px;padding:1.1rem 1.4rem;transition:.2s}
.tl-item:hover{background:rgba(255,255,255,.08)}
.tl-time{font-family:var(--font-cn);font-size:.88rem;color:var(--accent);min-width:60px;padding-top:.15rem;font-weight:700}
.tl-body{flex:1}
.tl-body h4{font-size:.98rem;color:#fff;margin-bottom:.2rem;font-weight:600}
.tl-body p{font-size:.84rem;color:rgba(255,255,255,.6);line-height:1.6}
.tl-tag{display:inline-block;margin-top:.5rem;font-size:.68rem;font-weight:700;padding:.2rem .7rem;border-radius:4px;letter-spacing:.05em}
.tl-tag.new{background:var(--accent);color:var(--dark)}
.tl-tag{background:rgba(164,208,62,.15);color:var(--accent)}
.tl-tag.done{background:rgba(255,255,255,.12);color:rgba(255,255,255,.7)}

/* ===== 03 应用截图 ===== */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;max-width:920px;margin:0 auto}
.shot{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:.25s;background:#fff}
.shot:hover{border-color:var(--accent);transform:translateY(-3px)}
.shot img{width:100%;height:auto;object-fit:cover}
.shot .cap{display:block;padding:.7rem .8rem;font-size:.8rem;color:var(--ink-2);text-align:center;font-weight:500;background:#fff;border-top:1px solid var(--line)}

/* ===== 04 核心功能 ===== */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.feat-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:1.6rem;position:relative;transition:.25s}
.feat-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.feat-icon{font-size:1.9rem;margin-bottom:.7rem;display:inline-flex;width:48px;height:48px;align-items:center;justify-content:center;background:#F5F5F0;border-radius:10px}
.feat-card h3{font-size:1.06rem;color:var(--ink);margin-bottom:.5rem;font-weight:700}
.feat-card p{font-size:.86rem;color:var(--ink-2);line-height:1.7}

/* ===== 应用信息规格表 ===== */
.spec-wrap{overflow-x:auto;max-width:820px;margin:0 auto}
.spec-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.spec-table th,.spec-table td{padding:.85rem 1.3rem;text-align:left;font-size:.88rem;border-bottom:1px solid var(--line)}
.spec-table th{background:#F5F5F0;color:var(--dark);font-weight:700;width:32%}
.spec-table td{color:var(--ink-2)}
.spec-table tr:last-child td{border-bottom:none}

/* ===== 下载CTA — 深森林绿背景 ===== */
.dock{position:relative;padding:4.5rem 0;background:var(--dark);color:#fff}
.dock-inner{max-width:680px;margin:0 auto;text-align:center}
.dock .tag{color:var(--accent)}
.dock-inner h2{font-family:var(--font-serif);font-size:clamp(1.8rem,4.5vw,2.5rem);margin-bottom:.8rem;color:#fff}
.dock-inner h2 em{color:var(--accent);font-style:normal}
.dock-inner p{color:rgba(255,255,255,.65);margin-bottom:1.5rem;font-size:.95rem}
.checks{list-style:none;display:flex;justify-content:center;gap:1.8rem;flex-wrap:wrap;margin-bottom:2rem}
.checks li{font-size:.86rem;color:rgba(255,255,255,.8)}
.checks li::before{content:"✓ ";color:var(--accent);font-weight:700}

/* ===== 05 FAQ — 黑色粗体问题 + 绿色"+"图标 ===== */
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line);background:transparent}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.4rem;cursor:pointer;font-weight:700;color:var(--ink);font-size:1rem;transition:.2s}
.faq-q:hover{color:var(--dark)}
/* 绿色"+"图标 */
.faq-q .arrow{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--dark);font-size:1.1rem;font-weight:700;transition:.3s;flex-shrink:0;margin-left:1rem}
.faq-item.is-open .faq-q .arrow{transform:rotate(45deg);background:var(--dark);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 1.4rem}
.faq-item.is-open .faq-a{max-height:400px;padding-bottom:1.2rem}
.faq-a p{color:var(--ink-2);font-size:.9rem;line-height:1.8}

/* ===== 06 评价 — 2×2白色卡片 ===== */
.review-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.review-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1.5rem;transition:.25s}
.review-card:hover{border-color:var(--accent)}
.review-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}
/* 绿色圆形头像占位 */
.review-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--dark);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;flex-shrink:0}
.review-card .stars{color:#F5A623;font-size:.8rem;letter-spacing:2px}
.review-card .meta-name{font-weight:700;color:var(--ink);font-size:.88rem}
.review-card .meta-date{font-size:.75rem;color:var(--muted)}
.review-card p{font-size:.86rem;color:var(--ink-2);line-height:1.75}

/* ===== 页脚 — 深灰/黑 ===== */
.site-footer{border-top:1px solid var(--line);padding:2.2rem 0;background:#111;color:rgba(255,255,255,.6)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-brand{display:flex;align-items:center;gap:.5rem;font-weight:700;color:#fff;font-family:var(--font-serif);font-size:1.05rem}
.footer-links{display:flex;gap:1.3rem;flex-wrap:wrap}
.footer-links a{font-size:.82rem;color:rgba(255,255,255,.55);transition:.2s;padding:.4rem 0;min-height:32px;display:inline-flex;align-items:center}
.footer-links a:hover{color:var(--accent)}
.footer-copy{font-size:.76rem;color:rgba(255,255,255,.4);margin-top:1rem;text-align:center;width:100%}

/* ===== 返回顶部 — 绿色圆形 ===== */
.back-top{position:fixed;bottom:1.5rem;right:1.5rem;width:46px;height:46px;background:var(--accent);color:var(--dark);border:none;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:50;border-radius:50%;box-shadow:0 4px 14px rgba(164,208,62,.4);transition:.2s}
.back-top:hover{background:var(--accent-dark);color:#fff}
.back-top.is-show{display:flex}

/* ===== 进场动画 ===== */
.rev{opacity:1;transform:none;transition:opacity .6s,transform .6s}
.js .rev{opacity:0;transform:translateY(24px)}
.js .rev.is-in{opacity:1;transform:translateY(0)}
.js .rev-done{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .rev,.js .rev.is-in,.js .rev-done{opacity:1;transform:none;transition:none}
}

/* ===== 响应式 ===== */
@media(max-width:980px){
  .site-nav{display:none}
  .nav-toggle{display:flex}
  .hero-grid{grid-template-columns:1fr;gap:2rem}
  .hero-stage{min-height:420px;order:-1}
  .discover-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr}
  .shots{grid-template-columns:repeat(2,1fr)}
  .review-grid{grid-template-columns:1fr}
  .dock .checks{flex-direction:column;gap:.5rem}
}
@media(max-width:560px){
  .hero-stage{min-height:380px}
  .phone-frame img{width:168px}
  .shots{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .tl-item{flex-direction:column;gap:.3rem}
  .tl-time{min-width:auto}
  .sec{padding:3rem 0}
  .hero-pills span{font-size:.76rem}
  .faq-q{font-size:.92rem;padding:1rem 1.1rem}
  .faq-q .arrow{width:24px;height:24px;font-size:1rem}
}