@charset "utf-8";
/* 囧次元 · jiongciyuandm.cc  ——  视觉方向 B4「热血少年」/ 结构变体 A2「更新周期风」
   配色：纯白底 + 燃橙红 + 亮黄 + 墨黑
   渲染语言：墨黑压边条 + 硬落影
   布局骨架：节奏刻度带
   动效机制：纯 CSS 速度线漂移 + 卡片冲入
*/

:root{
  --bg:#FFFFFF;
  --bg2:#FFF8EF;
  --bg3:#FFFDF8;
  --ink:#14110F;
  --ink2:#413C36;
  --ink3:#736C64;
  --line:#E9E2D8;
  --brand:#F63A0C;
  --brand-d:#B82409;
  --brand-l:#FFE5DC;
  --kick:#FFC400;
  --kick-d:#C99A00;
  --kick-l:#FFF6CC;
  --r:6px;
  --hard:7px 7px 0 var(--ink);
  --wrap:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",sans-serif;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-d);text-decoration:none}
a:hover{text-decoration:underline}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.29;letter-spacing:.01em}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ================= 顶栏 ================= */
.top{
  position:sticky;top:0;z-index:60;
  background:var(--bg);
  border-bottom:2px solid var(--ink);
}
.top__in{
  position:relative;
  max-width:var(--wrap);margin:0 auto;padding:10px 20px;
  display:flex;align-items:center;gap:16px;
}
.brand{order:1;display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:800;font-size:20px;letter-spacing:.06em}
.brand:hover{text-decoration:none}
.brand img{width:44px;height:44px;border-radius:11px;flex:none}
.nav{order:2;margin-left:auto;display:flex;align-items:center;gap:6px}
.nav a{
  display:block;padding:8px 14px;border-radius:var(--r);
  color:var(--ink2);font-size:15px;font-weight:600;border:2px solid transparent;
}
.nav a:hover{background:var(--kick-l);border-color:var(--ink);text-decoration:none;color:var(--ink)}
.nav a[aria-current="page"]{background:var(--brand);border-color:var(--ink);color:#fff}
.top__in .btn--sm{order:3;padding:10px 18px;font-size:15px}
.burger{
  order:4;display:none;width:44px;height:44px;flex:none;
  align-items:center;justify-content:center;gap:4px;flex-direction:column;
  background:var(--kick);border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:3px 3px 0 var(--ink);cursor:pointer;padding:0;
}
.burger i{display:block;width:18px;height:2px;background:var(--ink)}

/* ================= 按钮 ================= */
.btn{
  display:inline-block;
  padding:14px 30px;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-d) 100%);
  color:#fff;font-size:17px;font-weight:800;letter-spacing:.04em;
  border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.btn:hover{text-decoration:none;background:linear-gradient(135deg,var(--kick) 0%,var(--kick-d) 100%);color:var(--ink);transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn--ghost{background:#fff;color:var(--ink)}
.btn--ghost:hover{background:var(--kick-l);color:var(--ink)}

/* ================= Hero ================= */
.hero{position:relative;overflow:hidden;background:linear-gradient(152deg,#FFF6EA 0%,#FFFFFF 56%,#FFF1E0 100%);border-bottom:2px solid var(--ink)}
.hero::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(246,58,12,.11) 0 2px,rgba(246,58,12,0) 2px 14px);
  animation:dashRun 16s linear infinite;
}
.hero::after{
  content:"";position:absolute;right:-70px;bottom:-60px;width:44%;height:76%;
  background:var(--brand);opacity:.12;transform:skewX(-9deg);border-radius:12px;
}
.hero__in{
  position:relative;z-index:1;
  max-width:var(--wrap);margin:0 auto;padding:46px 20px 58px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:40px;align-items:center;
}
.hero__txt{min-width:0}
.hero h1{font-size:clamp(30px,4.4vw,52px);font-weight:900;letter-spacing:.02em}
.hero h1 em{font-style:normal;color:var(--brand)}
.lead{margin-top:16px;font-size:16.5px;color:var(--ink2);max-width:33em}
.hero__tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.hero__tags li{
  padding:5px 12px;font-size:13.5px;font-weight:700;
  background:var(--kick-l);border:2px solid var(--ink);border-radius:999px;box-shadow:2px 2px 0 var(--ink);
}
.hero__cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px}
.hero__shot{margin:0}
.hero__shot img{
  width:100%;height:auto;max-width:320px;margin:0 auto;
  border-radius:12px;box-shadow:0 0 0 3px var(--ink),13px 13px 0 var(--kick);
}

/* ================= 事实带 ================= */
.facts{margin-top:-34px;position:relative;z-index:2;padding:0 20px}
.facts__in{
  max-width:var(--wrap);margin:0 auto;
  display:grid;grid-template-columns:repeat(5,1fr);
  border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:var(--hard);
}
.fact{background:var(--ink);padding:18px 16px;border-right:1px solid rgba(255,255,255,.2)}
.fact:last-child{border-right:0}
.fact__n{color:var(--kick);font-weight:800;font-size:15.5px;line-height:1.4}
.fact__k{margin-top:6px;color:#EDE5DA;font-size:13px}

/* ================= 通用区块 ================= */
.seam{height:4px;background:var(--ink);position:relative;margin:0}
.seam::after{content:"";position:absolute;left:50%;top:-4px;width:44px;height:12px;margin-left:-22px;background:var(--kick);border:2px solid var(--ink);border-radius:3px}

.sec{padding:64px 0}
.sec--alt{background:var(--bg2)}
.sec__head{margin-bottom:30px;max-width:46em}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-d);margin-bottom:10px;
}
.kicker::before{content:"";width:10px;height:10px;background:var(--brand);transform:rotate(45deg);border:2px solid var(--ink)}
.sec h2{font-size:clamp(23px,2.9vw,33px);font-weight:900}
.sec h2::after{content:"";display:block;width:78px;height:6px;margin-top:14px;background:linear-gradient(90deg,var(--ink) 0 54px,var(--kick) 54px 78px)}
.sub{margin-top:16px;color:var(--ink3);font-size:15.5px}

.rise{animation:punchIn .5s cubic-bezier(.2,.7,.3,1) both}
.rise.d1{animation-delay:.07s}
.rise.d2{animation-delay:.14s}

@keyframes dashRun{from{background-position:0 0}to{background-position:420px 0}}
@keyframes punchIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}

/* ================= 更新节拍（A2 主线） ================= */
.beat__list{display:grid;gap:22px}
.beat__i{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:0;
  background:#fff;border:2px solid var(--ink);border-left:8px solid var(--brand);
  border-radius:var(--r);box-shadow:var(--hard);overflow:hidden;
}
.beat__no{
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--kick);
  font-size:56px;font-weight:900;line-height:1;letter-spacing:-.03em;
  padding:22px 0;
}
.beat__b{padding:24px 26px}
.beat__b h3{font-size:20px;font-weight:900}
.beat__b p{margin-top:10px;color:var(--ink2);font-size:15.5px}
.plist{margin-top:14px;display:grid;gap:8px}
.plist li{position:relative;padding-left:20px;font-size:14.8px;color:var(--ink2)}
.plist li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;background:var(--kick);border:2px solid var(--ink);transform:rotate(45deg)}

/* ================= 收费与广告（D3 重点） ================= */
.pay__grid{margin-top:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  background:#fff;border:2px solid var(--ink);border-left:8px solid var(--brand);
  border-radius:var(--r);box-shadow:var(--hard);padding:22px 22px 24px;
}
.card h3{font-size:18.5px;font-weight:900}
.card p{margin-top:10px;color:var(--ink2);font-size:15.2px}
.card em{font-style:normal;background:var(--kick-l);padding:0 3px;font-weight:700}

.ads{margin-top:34px;border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--hard);overflow:hidden;background:#fff}
.ad{display:grid;grid-template-columns:210px minmax(0,1fr);gap:0;border-top:2px solid var(--ink)}
.ad:first-child{border-top:0}
.ad__where{
  background:var(--ink);color:var(--kick);font-weight:800;font-size:15px;
  padding:16px 18px;display:flex;align-items:center;
}
.ad__note{padding:16px 20px;font-size:15px;color:var(--ink2)}

/* ================= 深度入口卡 ================= */
.gate__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.xcard{
  display:block;background:#fff;border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--hard);padding:24px 24px 22px;color:var(--ink);
  transition:transform .12s ease,box-shadow .12s ease;
}
.xcard:hover{text-decoration:none;transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink);background:var(--bg3)}
.xcard__k{font-size:12.5px;font-weight:800;letter-spacing:.14em;color:var(--brand-d);text-transform:uppercase}
.xcard__t{margin-top:8px;font-size:21px;font-weight:900}
.xcard__d{margin-top:10px;color:var(--ink2);font-size:15.2px}
.xcard__go{margin-top:16px;display:inline-block;font-weight:800;color:var(--brand-d);font-size:15px;border-bottom:3px solid var(--kick)}

/* ================= 截图栅格 ================= */
.shots__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.shots__grid--2{grid-template-columns:repeat(2,1fr);max-width:760px}
.shot{margin:0;background:#fff;border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--hard);overflow:hidden}
.shot img{width:100%;height:auto}
.shot figcaption{padding:12px 15px;font-size:13.6px;line-height:1.6;color:var(--ink2);background:var(--kick-l);border-top:2px solid var(--ink)}

/* ================= 评价 ================= */
.voice__list{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.say{background:#fff;border:2px solid var(--ink);border-left:8px solid var(--kick);border-radius:var(--r);box-shadow:var(--hard);padding:20px 22px}
.say__q{font-size:15.5px;color:var(--ink2)}
.say__who{margin-top:12px;font-size:13.5px;font-weight:800;color:var(--brand-d)}

/* ================= FAQ ================= */
.faq__list{display:grid;gap:14px}
.faq__list details{
  background:#fff;border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:4px 4px 0 var(--ink);overflow:hidden;
}
.faq__list summary{
  cursor:pointer;list-style:none;padding:16px 56px 16px 20px;position:relative;
  font-weight:800;font-size:16px;
}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::after{
  content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;line-height:25px;text-align:center;
  background:var(--kick);border:2px solid var(--ink);border-radius:var(--r);font-weight:900;color:var(--ink);
}
.faq__list details[open] summary{background:var(--brand-l);border-bottom:2px solid var(--ink)}
.faq__list details[open] summary::after{content:"−"}
.faq__list details p{padding:15px 20px 18px;color:var(--ink2);font-size:15.2px}

/* ================= CTA ================= */
.cta{background:var(--ink);color:#fff;padding:60px 0}
.cta__in{max-width:var(--wrap);margin:0 auto;padding:0 20px;text-align:center}
.cta h2{font-size:clamp(23px,2.9vw,32px);font-weight:900;color:#fff}
.cta h2::after{content:"";display:block;width:78px;height:6px;margin:14px auto 0;background:linear-gradient(90deg,var(--kick) 0 54px,var(--brand) 54px 78px)}
.cta .sub{color:#D9D0C6}
.cta .hero__cta{justify-content:center}
.cta .btn--ghost{background:transparent;color:#fff;border-color:#fff;box-shadow:5px 5px 0 var(--kick)}
.cta .btn--ghost:hover{background:var(--kick);color:var(--ink);border-color:var(--ink)}

/* ================= 内页 ================= */
.page-hero{position:relative;overflow:hidden;background:linear-gradient(152deg,#FFF6EA 0%,#FFFFFF 62%,#FFF1E0 100%);border-bottom:2px solid var(--ink)}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(246,58,12,.09) 0 2px,rgba(246,58,12,0) 2px 16px);
}
.page-hero__in{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:44px 20px 48px}
.page-hero h1{font-size:clamp(27px,3.8vw,42px);font-weight:900}
.page-hero .lead{margin-top:16px;max-width:44em}

.anchors{
  position:sticky;top:66px;z-index:40;
  background:var(--bg2);border-bottom:2px solid var(--ink);padding:10px 0;
}
.anchors__in{max-width:var(--wrap);margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;gap:8px}
.anchors a{
  padding:6px 12px;font-size:13.6px;font-weight:700;color:var(--ink2);
  background:#fff;border:2px solid var(--ink);border-radius:999px;box-shadow:2px 2px 0 var(--ink);
}
.anchors a:hover{text-decoration:none;background:var(--kick);color:var(--ink)}

.block{padding:38px 0;border-bottom:2px dashed var(--line)}
.block:last-of-type{border-bottom:0}
.block h2{font-size:clamp(21px,2.5vw,28px);font-weight:900}
.block h2::after{content:"";display:block;width:78px;height:6px;margin-top:13px;background:linear-gradient(90deg,var(--ink) 0 54px,var(--kick) 54px 78px)}
.block p{margin-top:16px;color:var(--ink2);font-size:15.8px}
.block h3{margin-top:24px;font-size:17.5px;font-weight:900;padding-left:14px;border-left:6px solid var(--brand)}
.block strong{background:var(--kick-l);padding:0 3px}

.xentry{margin-top:34px}
.xentry h3{margin:0 0 14px;font-size:17px;font-weight:900;padding-left:14px;border-left:6px solid var(--kick)}
.xentry__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}

/* ================= 页脚 ================= */
.foot{background:var(--bg2);border-top:4px solid var(--ink);padding:40px 0 30px}
.foot__in{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.foot__brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:19px;letter-spacing:.06em}
.foot__brand img{width:36px;height:36px;border-radius:9px}
.foot__links{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 20px}
.foot__links a{font-size:14.5px;font-weight:700;color:var(--ink2)}
.foot__links a:hover{color:var(--brand-d)}
.foot__note{margin-top:20px;font-size:13.6px;line-height:1.7;color:var(--ink3);max-width:60em}
.foot__copy{margin-top:14px;font-size:13.4px;color:var(--ink3)}

/* ================= 响应式 ================= */
@media (max-width:980px){
  .hero__in{grid-template-columns:1fr;gap:32px;padding:38px 20px 50px}
  .hero__shot img{max-width:300px}
  .facts__in{grid-template-columns:repeat(3,1fr)}
  .fact:nth-child(3){border-right:0}
  .pay__grid{grid-template-columns:1fr}
  .gate__grid,.voice__list,.xentry__grid,.shots__grid--2{grid-template-columns:1fr}
  .shots__grid{grid-template-columns:repeat(2,1fr)}
  .ad{grid-template-columns:170px minmax(0,1fr)}
  .beat__i{grid-template-columns:104px minmax(0,1fr)}
  .beat__no{font-size:44px}
}

@media (max-width:620px){
  .top__in{gap:10px;padding:8px 16px}
  .brand{font-size:17px}
  .brand img{width:38px;height:38px;border-radius:9px}
  .burger{display:flex}
  .nav{
    position:absolute;left:0;right:0;top:100%;margin-left:0;
    flex-direction:column;align-items:stretch;gap:6px;
    background:var(--bg);border-bottom:2px solid var(--ink);
    padding:10px 16px 16px;display:none;
  }
  .burger[aria-expanded="true"] ~ .nav{display:flex}
  .nav a{border:2px solid var(--line)}
  .nav a[aria-current="page"]{border-color:var(--ink)}
  .top__in .btn--sm{padding:9px 13px;font-size:14px}
  .hero h1{font-size:29px}
  .hero__tags li{font-size:12.6px}
  .facts{padding:0 16px}
  .facts__in{grid-template-columns:repeat(2,1fr)}
  .fact:nth-child(3){border-right:1px solid rgba(255,255,255,.2)}
  .fact:nth-child(2n){border-right:0}
  .sec{padding:46px 0}
  .beat__i{grid-template-columns:1fr}
  .beat__no{font-size:36px;justify-content:flex-start;padding:14px 20px}
  .beat__b{padding:18px 20px 22px}
  .shots__grid{grid-template-columns:1fr}
  .ad{grid-template-columns:1fr}
  .ad__where{padding:12px 18px}
  .anchors{top:60px}
  .anchors a{font-size:12.8px;padding:5px 10px}
  .page-hero__in{padding:32px 16px 36px}
  .wrap{padding:0 16px}
  .cta{padding:46px 0}
}

@media (prefers-reduced-motion:reduce){
  .hero::before{animation:none}
  .rise{animation:none;opacity:1;transform:none}
  .btn,.xcard{transition:none}
}