/* =========================================================
   漫蛙漫画 jiuyaomax.cn —— 主题样式
   四色：#000 / #fff / #5DA95A(蛙绿主色) / #FF6B35(橙红对比)
   禁令：无圆角 · 无渐变 · 无柔和阴影 · 全部直角硬线
   ========================================================= */

/* ---------- 基础重置 ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:#1a1a1a;background:#fafaf6;line-height:1.6;
  font-size:15px;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul,ol{list-style:none}
input,button,textarea,select{font:inherit;color:inherit}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 顶栏 ---------- */
.mast{position:sticky;top:0;z-index:100;background:#fff;border-bottom:2px solid #000}
.mast-bar{display:flex;align-items:center;gap:20px;height:64px;position:relative}
.mast-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px}
.mast-brand img{width:32px;height:32px;object-fit:contain}
.mast-links{display:flex;gap:6px;margin-left:auto}
.mast-links a{padding:8px 12px;font-size:14px;font-weight:500;color:#333;transition:color .15s}
.mast-links a:hover{color:#5DA95A}
.mast-tap{
  background:#5DA95A;color:#fff;padding:9px 22px;font-size:14px;font-weight:600;
  box-shadow:3px 3px 0 #000;border:2px solid #000;
}
.mast-tap:hover{background:#4a8a47;transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000}
.mast-burger{display:none;flex-direction:column;gap:5px;padding:8px}
.mast-burger span{display:block;width:22px;height:2px;background:#000}
.mast-strip{height:3px;background:linear-gradient(to right,#5DA95A 33%,#FF6B35 33%,#FF6B35 66%,#000 66%);display:flex}

/* ---------- 通用按钮 ---------- */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:#5DA95A;color:#fff;padding:14px 32px;font-weight:700;font-size:15px;
  border:2px solid #000;box-shadow:5px 5px 0 #000;
  transition:transform .1s,box-shadow .1s;
}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #000}
.btn-ghost{
  display:inline-flex;align-items:center;gap:6px;
  padding:14px 24px;font-weight:600;font-size:15px;border:2px solid #000;
  background:#fff;transition:background .15s;
}
.btn-ghost:hover{background:#f0f0f0}

/* ---------- 英雄区：漫画卷轴 ---------- */
.hero{background:#fafaf6;padding:80px 0;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;
  background:#5DA95A;color:#fff;font-size:12px;font-weight:700;letter-spacing:.5px;
  border:2px solid #000;margin-bottom:18px;
}
.eyebrow i{width:6px;height:6px;background:#FF6B35;display:inline-block}
.hero-text h1{font-size:48px;font-weight:900;line-height:1.15;color:#000;margin-bottom:16px}
.hero-text .lead{font-size:16px;color:#333;margin-bottom:22px;line-height:1.75}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.tags span{
  padding:6px 14px;font-size:13px;font-weight:600;border:1.5px solid #000;background:#fff;
}
.tags .tag-a{background:#5DA95A;color:#fff;border-color:#000}
.tags .tag-b{background:#FF6B35;color:#fff}
.tags .tag-c{background:#000;color:#fff}
.action{display:flex;gap:14px;margin-bottom:30px}
.metrics{display:flex;gap:40px;border-top:2px solid #000;padding-top:24px}
.metrics div b{font-size:28px;font-weight:900;color:#5DA95A;display:block}
.metrics div span{font-size:13px;color:#666;font-weight:500}

/* 卷轴视觉 */
.hero-visual{display:flex;justify-content:center}
.scroll{position:relative;width:100%;max-width:420px}
.scroll-rod{
  position:absolute;top:0;width:18px;height:100%;background:#8B7355;
  border:2px solid #000;z-index:2;
}
.scroll-rod-l{left:-8px;border-right:none}
.scroll-rod-r{right:-8px;border-left:none}
.scroll-body{
  background:#f5f0e1;border:2px solid #000;padding:18px 22px;
  box-shadow:8px 6px 0 #000;position:relative;
}
.scroll-frame{position:relative;border:2px solid #000;background:#fff;overflow:hidden}
.scroll-frame img{width:100%;aspect-ratio:9/12;object-fit:cover}
.scroll-corners{position:absolute;inset:6px;pointer-events:none}
.scroll-corners i{position:absolute;width:14px;height:14px;border:2px solid #5DA95A}
.scroll-corners i:nth-child(1){top:-2px;left:-2px;border-right:none;border-bottom:none}
.scroll-corners i:nth-child(2){top:-2px;right:-2px;border-left:none;border-bottom:none}
.scroll-corners i:nth-child(3){bottom:-2px;left:-2px;border-right:none;border-top:none}
.scroll-corners i:nth-child(4){bottom:-2px;right:-2px;border-left:none;border-top:none}
.scroll-caption{
  display:flex;align-items:center;gap:10px;margin-top:14px;
  padding:10px 14px;background:#000;color:#fff;font-size:13px;font-weight:600;
}
.scroll-ch{color:#5DA95A}
.scroll-dot{width:8px;height:8px;background:#FF6B35;display:inline-block}
.frog{
  position:absolute;right:-24px;bottom:-36px;width:80px;height:70px;z-index:5;
}
.frog-body{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:70px;height:52px;background:#5DA95A;border:2px solid #000;border-radius:50% 50% 45% 45%/55% 55% 45% 45%;
  box-shadow:4px 3px 0 #000;
}
.frog-eye{
  position:absolute;width:22px;height:22px;background:#fff;border:2px solid #000;border-radius:50%;top:0;
}
.frog-eye-l{left:10px}
.frog-eye-r{right:10px}
.frog-eye i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:#000;border-radius:50%}
.frog-mouth{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  width:28px;height:6px;border-bottom:2px solid #000;border-radius:0 0 50% 50%;
}
.frog-hand{display:none}

/* ---------- 通栏分割线 ---------- */
.section-rule{border:none;height:0;border-top:3px double #5DA95A;margin:0}

/* ---------- 界面展示：瀑布流堆叠 ---------- */
.shot{background:#fff;padding:72px 0;border-top:2px solid #000}
.shot-head{text-align:center;margin-bottom:40px}
.shot-eyebrow{
  display:inline-block;padding:6px 16px;font-size:12px;font-weight:700;letter-spacing:.5px;
  color:#FF6B35;background:#fff;border:2px solid #FF6B35;margin-bottom:14px;
}
.shot-head h2{font-size:30px;font-weight:900;color:#000;margin-bottom:8px}
.shot-head p{font-size:14px;color:#666}
.waterfall{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.wf-card{
  border:2px solid #000;background:#fff;overflow:hidden;
  box-shadow:4px 4px 0 rgba(93,169,90,.3);transition:transform .15s;
}
.wf-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(93,169,90,.4)}
.wf-h1 .wf-img{aspect-ratio:3/4}
.wf-h2 .wf-img{aspect-ratio:4/5}
.wf-h3 .wf-img{aspect-ratio:2/3}
.wf-h4 .wf-img{aspect-ratio:5/6}
.wf-img img{width:100%;height:100%;object-fit:cover}
.wf-cap{padding:14px 16px;border-top:2px solid #000;background:#fafaf6}
.wf-cap b{display:block;font-size:15px;font-weight:800;color:#000;margin-bottom:4px}
.wf-cap span{font-size:12px;color:#666;font-weight:500}

/* ---------- 核心特色：圆形气泡图标网格 ---------- */
.feat{background:#f0f0eb;padding:72px 0}
.feat-head{text-align:center;margin-bottom:48px}
.feat-eyebrow{
  display:inline-block;padding:6px 16px;font-size:12px;font-weight:700;letter-spacing:.5px;
  color:#fff;background:#000;margin-bottom:14px;
}
.feat-head h2{font-size:30px;font-weight:900;color:#000;margin-bottom:8px}
.feat-head p{font-size:14px;color:#666}
.bubble-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.bb-cell{
  padding:28px 24px;background:#fff;border:2px solid #000;
  position:relative;box-shadow:6px 4px 0 #FF6B35;
}
.bb-icon{
  width:56px;height:56px;border:2.5px solid #000;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;
  margin-bottom:16px;box-shadow:3px 3px 0 #000;
}
.bb-g{background:#5DA95A;color:#fff}
.bb-o{background:#FF6B35;color:#fff}
.bb-body b{display:block;font-size:17px;font-weight:800;color:#000;margin-bottom:10px}
.bb-body p{font-size:14px;color:#444;line-height:1.7}
.bb-cell:nth-child(even){box-shadow:6px -4px 0 #5DA95A}

/* ---------- 使用指南：手风琴折叠步骤 ---------- */
.guide{background:#fff;padding:72px 0;border-top:2px solid #e0e0e0}
.guide-head{text-align:center;margin-bottom:40px}
.guide-eyebrow{
  display:inline-block;padding:6px 16px;font-size:12px;font-weight:700;letter-spacing:.5px;
  color:#fff;background:#5DA95A;border:2px solid #000;margin-bottom:14px;
}
.guide-head h2{font-size:30px;font-weight:900;color:#000;margin-bottom:8px}
.guide-head p{font-size:14px;color:#666}
.accordion{display:flex;flex-direction:column;gap:0;max-width:760px;margin:0 auto;border:2px solid #000}
.ac-item{border-bottom:2px solid #000}
.ac-item:last-child{border-bottom:none}
.ac-head{
  display:flex;align-items:center;gap:18px;padding:20px 24px;
  cursor:pointer;background:#fafaf6;font-size:16px;font-weight:700;color:#000;
  transition:background .15s;list-style:none;
}
.ac-head::-webkit-details-marker{display:none}
.ac-head:hover{background:#f0f0eb}
.ac-item[open] .ac-head{background:#5DA95A;color:#fff}
.ac-num{
  width:36px;height:36px;border:2px solid #000;background:#000;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;
  flex-shrink:0;
}
.ac-item[open] .ac-num{background:#fff;color:#000}
.ac-title{flex:1}
.ac-arrow{font-size:18px;transition:transform .2s}
.ac-item[open] .ac-arrow{transform:rotate(180deg)}
.ac-body{padding:20px 24px;background:#fff;border-top:2px solid #000}
.ac-body p{font-size:14px;color:#444;line-height:1.75}

/* ---------- FAQ：简洁手风琴单列 ---------- */
.faq{background:#000;padding:72px 0;color:#fff}
.faq-head{text-align:center;margin-bottom:40px}
.faq-eyebrow{
  display:inline-block;padding:6px 16px;font-size:12px;font-weight:700;letter-spacing:.5px;
  color:#000;background:#5DA95A;margin-bottom:14px;
}
.faq-head h2{font-size:30px;font-weight:900;color:#fff;margin-bottom:8px}
.faq-head p{font-size:14px;color:#aaa}
.qa-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:0}
.qa-row{border-bottom:1px solid #333}
.qa-row summary{
  padding:20px 0;cursor:pointer;font-size:15px;font-weight:600;color:#fff;
  display:flex;align-items:center;gap:14px;list-style:none;
}
.qa-row summary::-webkit-details-marker{display:none}
.qa-row summary::before{
  content:'+';width:28px;height:28px;border:2px solid #FF6B35;color:#FF6B35;
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex-shrink:0;
}
.qa-row[open] summary::before{content:'-';background:#FF6B35;color:#fff}
.qa-row[open] summary{color:#FF6B35}
.qa-row p{
  padding:0 0 20px 42px;font-size:14px;color:#ccc;line-height:1.75;
}

/* ---------- 评论：横向滚动轮播卡 ---------- */
.rev{background:#fafaf6;padding:72px 0}
.rev-head{text-align:center;margin-bottom:40px}
.rev-eyebrow{
  display:inline-block;padding:6px 16px;font-size:12px;font-weight:700;letter-spacing:.5px;
  color:#000;background:#fff;border:2px solid #000;margin-bottom:14px;
}
.rev-head h2{font-size:30px;font-weight:900;color:#000;margin-bottom:8px}
.rev-head p{font-size:14px;color:#666}
.rev-carousel{position:relative;max-width:800px;margin:0 auto}
.rev-track{position:relative;border:2px solid #000;background:#fff;box-shadow:6px 6px 0 #5DA95A}
.rev-slide{
  position:absolute;inset:0;padding:32px 36px;opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.rev-slide.active{opacity:1;pointer-events:auto;position:relative}
.rev-s-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.rev-s-ava{
  width:44px;height:44px;border:2px solid #000;background:#FF6B35;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;
}
.rev-s-who b{display:block;font-size:15px;font-weight:800;color:#000}
.rev-s-who time{font-size:12px;color:#888}
.rev-s-star{margin-left:auto;color:#FF6B35;font-size:15px}
.rev-slide p{font-size:14px;color:#333;line-height:1.8}
.rev-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;background:#000;color:#fff;border:2px solid #000;
  font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;
  z-index:2;
}
.rev-arrow:hover{background:#5DA95A}
.rev-prev{left:-52px}
.rev-next{right:-52px}
.rev-dots{display:flex;justify-content:center;gap:8px;margin-top:24px}
.rev-dots i{width:10px;height:10px;background:#ccc;border:1.5px solid #000;display:inline-block}
.rev-dots i.on{background:#5DA95A}

/* ---------- 下载条：青蛙立牌主题 ---------- */
.dl{background:#5DA95A;padding:64px 0;border-top:2px solid #000}
.dl-frog{display:flex;align-items:center;gap:40px;max-width:800px;margin:0 auto}
.dl-illus{
  width:120px;height:110px;flex-shrink:0;position:relative;
}
.dl-frog-f{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  width:90px;height:68px;background:#fff;border:2.5px solid #000;
  border-radius:50% 50% 45% 45%/55% 55% 45% 45%;
}
.dl-frog-eye{
  position:absolute;width:22px;height:22px;background:#fff;border:2px solid #000;border-radius:50%;top:4px;
}
.dl-frog-eye:nth-child(1){left:14px}
.dl-frog-eye:nth-child(2){right:14px}
.dl-frog-eye i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:9px;height:9px;background:#000;border-radius:50%}
.dl-frog-smile{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  width:30px;height:8px;border-bottom:2.5px solid #000;border-radius:0 0 50% 50%;
}
.dl-lily{
  position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
  width:100px;height:16px;background:#fff;border:2px solid #000;
  border-bottom:none;border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
.dl-text{flex:1}
.dl-title{display:block;font-size:22px;font-weight:900;color:#000;margin-bottom:10px}
.dl-sub{font-size:14px;color:#1a3a1a;margin-bottom:22px;line-height:1.7}
.dl-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:#000;color:#5DA95A;padding:16px 36px;font-weight:800;font-size:16px;
  border:2px solid #000;box-shadow:5px 5px 0 #fff;
  transition:transform .1s,box-shadow .1s;
}
.dl-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #fff}

/* ---------- 页脚 ---------- */
.foot{background:#000;color:#aaa;padding:48px 0 32px}
.foot-inner{display:grid;grid-template-columns:auto 1fr;gap:40px}
.foot-brand{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.foot-brand img{width:40px;height:40px;object-fit:contain}
.foot-brand b{display:block;font-size:18px;font-weight:800;color:#fff;margin-bottom:2px}
.foot-brand span{font-size:12px;color:#777}
.foot-nav{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:20px}
.foot-nav a{font-size:14px;color:#888;font-weight:500;transition:color .15s}
.foot-nav a:hover{color:#5DA95A}
.foot-legal{grid-column:1/-1;border-top:1px solid #222;padding-top:20px}
.foot-legal p{font-size:12px;color:#666;margin-bottom:6px;line-height:1.7}

/* ---------- 返回顶部 ---------- */
.back-top{
  position:fixed;right:24px;bottom:20px;width:46px;height:46px;
  background:#000;color:#5DA95A;border:2px solid #000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:90;
}
.back-top.show{opacity:1;pointer-events:auto}
.back-top:hover{background:#5DA95A;color:#000}

/* ---------- 入场动画 ---------- */
.fade{opacity:0;transform:translateY(20px);transition:opacity .5s,transform .5s}
.fade.in{opacity:1;transform:translateY(0)}

/* =========================================================
   移动端适配（<768px）
   ========================================================= */
@media (max-width:768px){
  .wrap{padding:0 18px}
  .mast-links{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;flex-direction:column;padding:16px;border-bottom:2px solid #000}
  .mast-links.on{display:flex}
  .mast-burger{display:flex}
  .mast-tap{padding:7px 14px;font-size:13px}

  .hero{padding:48px 0}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-text h1{font-size:36px}
  .action{flex-direction:column}
  .action .btn-primary,.action .btn-ghost{justify-content:center}
  .metrics{gap:24px;margin-top:20px}
  .metrics div b{font-size:22px}

  .scroll{max-width:340px;margin:0 auto}
  .frog{width:60px;height:52px;right:-16px;bottom:-28px}
  .frog-body{width:52px;height:40px}
  .frog-eye{width:18px;height:18px}
  .frog-eye-l{left:6px}.frog-eye-r{right:6px}

  .shot,.feat,.guide,.faq,.rev{padding:52px 0}
  .shot-head h2,.feat-head h2,.guide-head h2,.faq-head h2,.rev-head h2{font-size:24px}

  .waterfall{grid-template-columns:repeat(2,1fr);gap:14px}
  .wf-h3{grid-row:span 1}

  .bubble-grid{grid-template-columns:1fr}
  .bb-cell{padding:22px 20px}

  .rev-prev{left:-6px}
  .rev-next{right:-6px}
  .rev-slide{padding:24px 22px}

  .dl{padding:48px 0}
  .dl-frog{flex-direction:column;text-align:center;gap:20px}
  .dl-illus{width:100px;height:90px}
  .dl-btn{justify-content:center}

  .foot-inner{grid-template-columns:1fr}
  .foot-brand{margin-bottom:16px}
}

@media (prefers-reduced-motion:reduce){
  .fade{opacity:1;transform:none;transition:none}
  .hero-grid .btn-primary,.hero-grid .btn-ghost{transition:none}
}