@charset "utf-8";
/* ============================================================
   横风动漫 · hfdmgw.org.cn
   第 8 档视觉：冷瓷白底 + 正红骨架 + 墨蓝靛深块 + 电光青点缀
   渲染语言：右上角斜切「片格」卡片 + 1px 冷灰描边 + 零投影
   布局骨架：Hero 图左文右 + 内容区「粘性窄栏 + 主栏」
   动效机制：纯 CSS @keyframes streak（横向 clip-path 揭示）
   ============================================================ */

:root{
  --bg:#F5F6F7;
  --panel:#FFFFFF;
  --panel2:#EBEDEF;
  --ink:#14181F;
  --ink2:#4A5260;
  --ink3:#858E9C;
  --line:#DDE1E5;
  --line2:#C8CDD3;

  --red:#D22B2B;
  --red-d:#A31C1C;
  --red-l:#FBE7E5;

  --navy:#16233F;
  --navy-d:#0E1729;
  --navy-l:#E3E6EC;

  --cyan:#21C7D4;
  --yellow:#FFCE3A;

  --wrap:1180px;
  --cut:18px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.78;
}

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

a{color:var(--red-d);text-decoration:none}
a:hover{color:var(--red);text-decoration:underline}

h1,h2,h3{margin:0;line-height:1.32;letter-spacing:.2px}
p{margin:0}

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

/* 跳转链接：视口内隐藏式（不可用 left:-9999px，否则闸门判越界） */
.skip{
  position:absolute;top:0;left:0;
  width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  background:var(--red);color:#fff;z-index:99;
}
.skip:focus{
  width:auto;height:auto;clip:auto;clip-path:none;
  padding:.6rem 1rem;
}

/* ---------- 入场动效：纯 CSS，与滚动位置无关 ---------- */
@keyframes streak{
  from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-10px)}
  to{opacity:1;clip-path:inset(0 0 0 0);transform:none}
}
.rise{animation:streak .58s cubic-bezier(.2,.7,.3,1) both}
.rise.d1{animation-delay:.06s}
.rise.d2{animation-delay:.12s}
.rise.d3{animation-delay:.18s}
.rise.d4{animation-delay:.24s}
.rise.d5{animation-delay:.28s}
.rise.d6{animation-delay:.32s}

@media (prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none;clip-path:none}
}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.78rem 1.5rem;
  background:var(--red);color:#fff;
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%);
  font-weight:700;font-size:.97rem;letter-spacing:.4px;
  border:0;cursor:pointer;transition:background .18s ease;
}
.btn:hover{background:var(--red-d);color:#fff;text-decoration:none}
.btn--ghost{
  background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line2);
}
.btn--ghost:hover{background:var(--navy);color:#fff;box-shadow:none}
.btn--light{background:#fff;color:var(--navy)}
.btn--light:hover{background:var(--cyan);color:var(--navy-d)}
.btn--sm{padding:.5rem 1rem;font-size:.88rem}

/* ---------- 导航 ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(245,246,247,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(8px);
}
.nav__in{display:flex;align-items:center;gap:1.1rem;min-height:66px}
.brand{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.brand img{width:38px;height:38px;border-radius:11px}
.brand__t{font-size:1.12rem;font-weight:800;color:var(--ink);letter-spacing:.6px}
.brand__s{
  font-size:.68rem;color:var(--red);
  padding:.1rem .34rem;border:1px solid var(--red);
  letter-spacing:.5px;
}
.menu{display:flex;gap:.2rem;margin-left:auto;flex-wrap:wrap}
.menu a{
  padding:.46rem .78rem;color:var(--ink2);font-size:.94rem;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--red);text-decoration:none}
.menu a.is-on{color:var(--red);border-bottom-color:var(--red);font-weight:700}
.nav .btn{flex:0 0 auto}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(118deg,#0E1729,#1B2B4D 46%,#2A1740);
  color:#fff;
  padding:3.4rem 0 3.2rem;
}
.hero::after{
  content:"";position:absolute;top:0;right:0;width:46%;height:100%;
  background:
    repeating-linear-gradient(115deg,rgba(210,43,43,.42) 0 2px,transparent 2px 30px),
    repeating-linear-gradient(115deg,rgba(33,199,212,.30) 0 1px,transparent 1px 30px);
  background-position:0 0,15px 0;
  pointer-events:none;
}
.hero__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 326px;
  gap:2.6rem;align-items:center;
}
.hero__shot{
  margin:0;justify-self:center;width:100%;max-width:326px;
}
.hero__shot img{
  width:100%;height:auto;
  border-radius:20px;
  box-shadow:0 0 0 6px rgba(255,255,255,.10),0 18px 40px -18px rgba(0,0,0,.7);
}
.hero__shot figcaption{
  margin-top:.7rem;text-align:center;
  font-size:.8rem;color:rgba(255,255,255,.62);letter-spacing:.3px;
}
.kicker{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.8rem;letter-spacing:1.4px;color:var(--cyan);
  text-transform:uppercase;
}
.hero__labels{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.kicker::before{
  content:"";width:7px;height:7px;background:var(--red);
  clip-path:polygon(0 0,100% 0,100% 100%);
}
.hero h1{
  font-size:2.5rem;font-weight:800;margin:.85rem 0 0;
  color:#fff;letter-spacing:1px;
}
.hero h1 em{font-style:normal;color:var(--cyan)}
.hero-lead{
  margin-top:1rem;font-size:1rem;color:rgba(255,255,255,.80);
  max-width:38em;
}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem;
}
.pill{
  font-size:.8rem;color:#fff;
  padding:.24rem .7rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  background:rgba(255,255,255,.07);
}
.pill b{color:var(--yellow);font-weight:700}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.hero__cta .btn--ghost{
  background:transparent;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);
}
.hero__cta .btn--ghost:hover{
  background:#fff;color:var(--navy-d);box-shadow:none;
}
.hero__note{margin-top:.9rem;font-size:.82rem;color:rgba(255,255,255,.55)}

/* ---------- 事实条 ---------- */
.facts{background:var(--navy);color:#fff;padding:.2rem 0}
.facts__in{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.facts__i{padding:1.35rem 1.1rem}
.facts__i + .facts__i{border-left:1px solid rgba(255,255,255,.16)}
.facts__n{font-size:1.5rem;font-weight:800;color:var(--cyan);letter-spacing:.5px}
.facts__l{font-size:.82rem;color:rgba(255,255,255,.68);margin-top:.2rem}

/* ---------- 区块 ---------- */
.sec{padding:3.2rem 0}
.sec--alt{background:var(--panel)}
.sec--line{border-top:1px solid var(--line)}
.sec__head{max-width:44em;margin-bottom:1.9rem}
.sec h2{
  font-size:1.62rem;font-weight:800;
  padding-top:.85rem;position:relative;
}
.sec h2::before{
  content:"";position:absolute;left:0;top:0;
  width:52px;height:5px;background:var(--red);
}
.sec h2::after{
  content:"";position:absolute;left:60px;top:1px;
  width:26px;height:3px;background:var(--cyan);
}
.sec__sub{margin-top:.6rem;color:var(--ink2);font-size:.96rem}

/* ---------- 卡片：右上角斜切「片格」 ---------- */
.grid{display:grid;gap:1.1rem}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{
  position:relative;
  background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
  padding:1.45rem 1.3rem 1.35rem;
}
.card::before{
  content:"";position:absolute;left:0;top:0;width:46px;height:4px;background:var(--red);
}
.card h3{font-size:1.06rem;font-weight:800;margin-bottom:.5rem}
.card p{color:var(--ink2);font-size:.92rem}
.card__tag{
  display:inline-block;margin-bottom:.6rem;
  font-size:.72rem;letter-spacing:1px;color:var(--navy);
  background:var(--navy-l);padding:.14rem .5rem;
}
.card--flat{background:var(--panel2)}

/* ---------- 界面预览 ---------- */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.shot{margin:0}
.shot img{
  width:100%;height:auto;
  border-radius:14px;
  box-shadow:0 0 0 1px var(--line),0 12px 26px -18px rgba(20,24,31,.55);
}
.shot figcaption{
  margin-top:.55rem;font-size:.82rem;color:var(--ink2);text-align:center;
}
.shot figcaption b{color:var(--ink);font-weight:700}

/* ---------- 入口卡 ---------- */
.enter{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.enter a{
  display:block;background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
  padding:1.25rem 1.15rem 1.15rem;
  color:var(--ink);
}
.enter a:hover{
  text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--red);
  background:var(--red-l);
}
.enter kbd{
  display:block;font-family:inherit;font-size:.72rem;letter-spacing:1px;
  color:var(--red);font-weight:700;
}
.enter strong{display:block;margin:.35rem 0 .4rem;font-size:1.02rem}
.enter span{font-size:.87rem;color:var(--ink2)}

/* ---------- 评价 ---------- */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.quote{
  background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line);
  border-left:5px solid var(--red);
  padding:1.25rem 1.25rem 1.1rem;
}
.quote p{font-size:.94rem;color:var(--ink2)}
.quote footer{
  margin-top:.75rem;font-size:.82rem;color:var(--ink3);
  display:flex;align-items:center;gap:.45rem;
}
.quote footer b{color:var(--ink);font-weight:700}
.stars{color:var(--yellow);letter-spacing:1px}
.quote time{display:block;margin-top:8px;color:var(--ink3);font-size:12px}

/* ---------- 速览列表 / 步骤 ---------- */
.qlist{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem 1.4rem;margin:0;padding:0;list-style:none}
.qlist li{
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
  padding:.85rem 1rem;font-size:.92rem;color:var(--ink2);
}
.qlist li b{color:var(--ink)}
.qlist a{font-weight:700}

.steps{margin:0;padding:0;list-style:none;counter-reset:st}
.steps li{
  counter-increment:st;position:relative;
  padding:1.05rem 1.15rem 1rem 3.5rem;
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
}
.steps li + li{margin-top:.7rem}
.steps li::before{
  content:counter(st,decimal-leading-zero);
  position:absolute;left:1.1rem;top:1.05rem;
  font-weight:800;font-size:.94rem;color:var(--red);letter-spacing:.5px;
}
.steps h3{font-size:1rem;margin-bottom:.34rem}
.steps p{font-size:.91rem;color:var(--ink2)}

/* ---------- 内页文档骨架：粘性窄栏 + 主栏 ---------- */
.page-hero{
  background:linear-gradient(118deg,#0E1729,#1B2B4D 52%,#2A1740);
  color:#fff;padding:2.6rem 0 2.4rem;position:relative;overflow:hidden;
}
.page-hero::after{
  content:"";position:absolute;top:0;right:0;width:46%;height:100%;
  background:repeating-linear-gradient(115deg,rgba(210,43,43,.36) 0 2px,transparent 2px 28px);
  pointer-events:none;
}
.page-hero__in{position:relative;z-index:1;max-width:44em}
.page-hero h1{font-size:2rem;font-weight:800;margin:.7rem 0 0;color:#fff}
.page-hero .lead{margin-top:.85rem;color:rgba(255,255,255,.80);font-size:.98rem}
.crumb{font-size:.8rem;color:rgba(255,255,255,.58)}
.crumb a{color:rgba(255,255,255,.78)}
.crumb a:hover{color:var(--cyan)}
.crumb span{margin:0 .4rem;color:rgba(255,255,255,.35)}

.doc{
  display:grid;grid-template-columns:248px 1fr;gap:2.4rem;
  padding:2.7rem 0 3.2rem;align-items:start;
}
.rail{position:sticky;top:84px}
.rail__box{
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
  padding:1.1rem 1.1rem 1rem;
}
.rail__box + .rail__box{margin-top:.9rem}
.rail__h{
  font-size:.74rem;letter-spacing:1.3px;color:var(--red);font-weight:700;
  margin-bottom:.6rem;
}
.rail ol{margin:0;padding-left:1.1rem;font-size:.9rem}
.rail ol li{margin:.32rem 0;color:var(--ink2)}
.rail ol a{color:var(--ink2)}
.rail ol a:hover{color:var(--red)}
.rail__score{display:flex;align-items:baseline;gap:.45rem}
.rail__score b{font-size:1.7rem;font-weight:800;color:var(--navy)}
.rail__score i{font-style:normal;color:var(--ink3);font-size:.82rem}
.rail__stars{color:var(--yellow);letter-spacing:2px;font-size:.95rem}
.rail dl{margin:.6rem 0 0;font-size:.85rem}
.rail dt{color:var(--ink3);margin-top:.45rem}
.rail dd{margin:.1rem 0 0;color:var(--ink);font-weight:600}

.prose{max-width:52em}
.prose > * + *{margin-top:1.05rem}
.prose h2{
  font-size:1.46rem;font-weight:800;
  padding-top:.8rem;position:relative;margin-top:2.4rem;
  scroll-margin-top:86px;
}
.prose h2::before{
  content:"";position:absolute;left:0;top:0;width:44px;height:5px;background:var(--red);
}
.prose h2::after{
  content:"";position:absolute;left:52px;top:1px;width:22px;height:3px;background:var(--cyan);
}
.prose h3{font-size:1.08rem;font-weight:800;margin-top:1.5rem;color:var(--navy)}
.prose p{color:var(--ink2);font-size:.96rem}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{color:var(--ink2);font-size:.95rem;padding-left:1.25rem}
.prose li{margin:.38rem 0}
.prose li::marker{color:var(--red)}
.callout{
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
  border-left:5px solid var(--cyan);
  padding:1.05rem 1.15rem;
}
.callout p{font-size:.93rem}
.callout b{color:var(--navy)}

.fig{margin:1.4rem 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.fig figure{margin:0}
.fig img{
  width:100%;height:auto;max-width:340px;margin:0 auto;
  border-radius:14px;box-shadow:0 0 0 1px var(--line),0 10px 22px -16px rgba(20,24,31,.5);
}
.fig figcaption{
  margin-top:.5rem;font-size:.82rem;color:var(--ink3);text-align:center;
}

/* ---------- FAQ ---------- */
.faq-group + .faq-group{margin-top:1.7rem}
.faq-group h3{
  font-size:1.02rem;font-weight:800;color:var(--navy);
  padding-bottom:.5rem;border-bottom:1px solid var(--line);
}
details.qa{
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
  margin-top:.6rem;
}
details.qa[open]{box-shadow:inset 0 0 0 1px var(--red)}
details.qa summary{
  cursor:pointer;list-style:none;
  padding:.9rem 1.1rem;font-weight:700;font-size:.96rem;
  display:flex;gap:.6rem;align-items:flex-start;
}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::before{
  content:"？";flex:0 0 auto;color:var(--red);font-weight:800;
}
details.qa .ans{
  padding:0 1.1rem 1rem 2.2rem;font-size:.93rem;color:var(--ink2);
}

/* ---------- CTA 条 ---------- */
.cta{
  background:var(--navy);color:#fff;padding:2.7rem 0;
  position:relative;overflow:hidden;
}
.cta::after{
  content:"";position:absolute;top:0;right:0;width:44%;height:100%;
  background:repeating-linear-gradient(115deg,rgba(33,199,212,.22) 0 1px,transparent 1px 26px);
  pointer-events:none;
}
.cta__in{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.6rem;flex-wrap:wrap;
}
.cta h2{font-size:1.5rem;font-weight:800;color:#fff;padding:0}
.cta h2::before,.cta h2::after{display:none}
.cta p{color:rgba(255,255,255,.72);font-size:.93rem;margin-top:.5rem;max-width:36em}
.cta__act{display:flex;gap:.7rem;flex-wrap:wrap}
.cta__act .btn{display:inline-flex;align-items:center;gap:8px}
.android-icon{width:20px;height:20px;flex:0 0 auto}
.cta .btn{background:var(--red);color:#fff}
.cta .btn:hover{background:#fff;color:var(--navy-d)}
.cta .btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.cta .btn--ghost:hover{background:#fff;color:var(--navy-d);box-shadow:none}

/* ---------- 页脚 ---------- */
.foot{background:var(--navy-d);color:#98A2B3;padding:2.6rem 0 1.6rem;font-size:.88rem}
.foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1.8rem}
.foot h4{margin:0 0 .7rem;color:#fff;font-size:.95rem;letter-spacing:.5px}
.foot ul{margin:0;padding:0;list-style:none}
.foot li{margin:.3rem 0}
.foot a{color:#B6BFCC}
.foot a:hover{color:var(--cyan)}
.foot__brand{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.foot__brand img{width:34px;height:34px;border-radius:9px}
.foot__brand b{color:#fff;font-size:1.02rem;letter-spacing:.6px}
.foot__disc{
  margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.12);
  color:#8B94A3;font-size:.84rem;
}
.foot__copy{margin-top:.5rem;color:#6C7583;font-size:.82rem}

/* ---------- 断点 980 ---------- */
@media (max-width:980px){
  .hero__in{grid-template-columns:1fr;gap:1.9rem}
  .hero__shot{max-width:250px}
  .hero::after{width:70%}
  .hero h1{font-size:2.05rem}
  .facts__in{grid-template-columns:repeat(2,1fr)}
  .facts__i:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16)}
  .facts__i:nth-child(odd){border-left:0}
  .grid--3,.grid--4,.enter,.shots{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:1fr}
  .doc{grid-template-columns:1fr;gap:1.6rem}
  .rail{position:static}
  .rail__box + .rail__box{margin-top:.9rem}
  .foot__top{grid-template-columns:1fr 1fr}
}

/* ---------- 断点 620 ---------- */
@media (max-width:620px){
  body{font-size:15px}
  .wrap{padding:0 1.1rem}
  .nav__in{
    flex-wrap:wrap;min-height:0;
    padding-top:.55rem;padding-bottom:.5rem;gap:.45rem;
  }
  .brand{order:1}
  .brand img{width:32px;height:32px;border-radius:9px}
  .brand__t{font-size:1rem}
  .brand__s{display:none}
  .nav .btn{order:2;margin-left:auto}
  .menu{
    order:3;width:100%;margin:0;
    gap:0;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .menu a{padding:.34rem .58rem;font-size:.87rem;white-space:nowrap}
  .hero{padding:2.3rem 0 2.1rem}
  .hero h1{font-size:1.72rem}
  .hero__shot{max-width:210px}
  .facts__in{grid-template-columns:1fr 1fr}
  .facts__i{padding:1rem .8rem}
  .facts__n{font-size:1.28rem}
  .sec{padding:2.3rem 0}
  .sec h2{font-size:1.32rem}
  .grid--3,.grid--4,.enter,.shots,.grid--2{grid-template-columns:1fr}
  .shots{gap:.9rem}
  .fig{grid-template-columns:1fr}
  .qlist{grid-template-columns:1fr}
  .steps li{padding:1rem .95rem .95rem 3.1rem}
  .steps li::before{left:.9rem}
  .page-hero h1{font-size:1.55rem}
  .doc{padding:2rem 0 2.4rem}
  .cta__in{flex-direction:column;align-items:flex-start}
  .foot__top{grid-template-columns:1fr}
}