@charset "utf-8";
/* ============================================================
   横风动漫 · 站点样式（档 4 · hfdmapp.net.cn）
   渲染语言：0 圆角 + 2px 实色描边 + 顶部色条 + 零投影
   动效：纯 CSS wipe（竖向裁剪揭示）/ sweep（色条刷入）/ band（背景位移）
   ============================================================ */

:root{
  --bg:#F1F5F0;
  --panel:#FFFFFF;
  --panel2:#E6EFE8;
  --main:#1B8A5A;
  --main-d:#0F6942;
  --main-l:#DCF0E6;
  --deep:#14483F;
  --sun:#F5C231;
  --sky:#3FA9D8;
  --ink:#16211C;
  --ink2:#4B5A53;
  --ink3:#8A9A93;
  --line:#DCE7E0;
  --line2:#C9DAD1;
  --foot:#0D2B24;
  --foot-ink:#A8C3B8;
  --col:46rem;
  --bw:2px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.75;
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",
              system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--main-d);text-decoration:none}
a:hover{color:var(--main)}
p{margin:0 0 1.05rem}
ul,ol{margin:0 0 1.05rem;padding-left:1.35rem}
li{margin:.3rem 0}
strong{color:var(--ink);font-weight:700}

.wrap{max-width:68rem;margin-left:auto;margin-right:auto;padding-left:1.15rem;padding-right:1.15rem}
.prose{max-width:var(--col);margin-left:auto;margin-right:auto}

/* ---------- 入场动效（纯 CSS，与滚动位置无关） ---------- */
@keyframes wipe{from{clip-path:inset(0 0 100% 0);opacity:0}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes band{to{background-position:18px 0}}
.rise{animation:wipe .62s cubic-bezier(.22,.72,.28,1) both}
.rise.d1{animation-delay:.06s}
.rise.d2{animation-delay:.12s}
.rise.d3{animation-delay:.18s}
.rise.d4{animation-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .rise,.rise.d1,.rise.d2,.rise.d3,.rise.d4{animation:none;opacity:1;clip-path:none}
  .hero-band,.hero::after{animation:none}
}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);
  border-bottom:var(--bw) solid var(--line2);
}
.topbar .wrap{display:flex;align-items:center;gap:.9rem;min-height:4.15rem}
.brand{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.brand img{width:42px;height:42px;border:var(--bw) solid var(--deep)}
.brand span{font-size:1.2rem;font-weight:800;letter-spacing:.06em;color:var(--deep)}
.nav{display:flex;align-items:center;gap:.15rem;margin-left:auto;flex-wrap:wrap}
.nav a{
  display:block;padding:.36rem .68rem;color:var(--ink2);font-size:.95rem;
  border:var(--bw) solid transparent;
}
.nav a:hover{color:var(--main-d);border-color:var(--line2);background:var(--main-l)}
.nav a.on{color:#fff;background:var(--main);border-color:var(--main)}
.top-cta{flex:0 0 auto}
.menu-btn{
  display:none;margin-left:auto;background:#fff;border:var(--bw) solid var(--deep);
  color:var(--deep);font-size:.9rem;padding:.4rem .7rem;cursor:pointer;font-family:inherit;
}
@media (max-width:980px){
  .topbar{position:static}
  .menu-btn{display:block}
  .nav{display:none;width:100%;margin:.2rem 0 .7rem;flex-direction:column;align-items:stretch}
  .nav.open{display:flex}
  .topbar .wrap{flex-wrap:wrap;padding-top:.5rem;padding-bottom:.5rem}
  .top-cta{display:none}
}

/* ---------- 按钮（直角 · 实色 · 零投影） ---------- */
.btn{
  display:inline-block;padding:.72rem 1.5rem;background:var(--main);color:#fff;
  font-weight:700;font-size:1rem;border:var(--bw) solid var(--main-d);line-height:1.2;
}
.btn:hover{background:var(--main-d);color:#fff}
.btn-sm{padding:.5rem 1rem;font-size:.92rem}
.btn-ghost{background:#fff;color:var(--deep);border-color:var(--deep)}
.btn-ghost:hover{background:var(--deep);color:#fff}
.btn-sun{background:var(--sun);color:var(--deep);border-color:#C99A15}
.btn-sun:hover{background:#E0AC18;color:var(--deep)}

/* ---------- Hero（居中堆叠 —— 本站群首次） ---------- */
.hero{
  position:relative;background:linear-gradient(180deg,#FFFFFF 0%,var(--bg) 100%);
  border-bottom:var(--bw) solid var(--line2);padding-top:3.2rem;padding-bottom:3.4rem;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(27,138,90,.05) 0 2px,transparent 2px 18px);
  animation:band 14s linear infinite;
}
.hero .wrap{position:relative;z-index:2;text-align:center}
.hero-tag{
  display:inline-block;margin-bottom:1rem;padding:.3rem .8rem;background:#fff;
  border:var(--bw) solid var(--deep);color:var(--deep);font-size:.86rem;letter-spacing:.1em;
}
h1{font-size:2.35rem;line-height:1.28;margin:0 0 .55rem;color:var(--deep);letter-spacing:.01em}
.hero-band{display:block;width:5.2rem;height:6px;background:var(--sun);margin:.1rem auto 1.1rem;transform-origin:center;animation:sweep .7s cubic-bezier(.2,.7,.3,1) both}
.lead{max-width:38rem;margin:0 auto 1.5rem;color:var(--ink2);font-size:1.02rem}
.hero-btns{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap}
.hero-note{margin-top:.9rem;font-size:.88rem;color:var(--ink3)}
.visual{
  position:relative;max-width:20rem;margin:2.4rem auto 0;padding:.75rem;
  background:linear-gradient(158deg,var(--main) 0%,var(--deep) 100%);
  border:var(--bw) solid var(--deep);
}
.visual::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;background:var(--sun)}
.visual img{width:100%;height:auto;border:var(--bw) solid rgba(255,255,255,.85)}

/* ---------- 事实条（4 格通栏直角条） ---------- */
.facts{border-bottom:var(--bw) solid var(--line2);background:var(--deep)}
.facts .wrap{padding-left:0;padding-right:0;max-width:68rem}
.fact-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:1.15rem 1.2rem;border-left:1px solid rgba(255,255,255,.16);color:#fff}
.fact:first-child{border-left:0}
.fact b{display:block;font-size:1.42rem;color:var(--sun);line-height:1.25}
.fact span{display:block;font-size:.9rem;color:#BFD8CC;margin-top:.15rem}

/* ---------- 通用分区 ---------- */
.sec{padding-top:3.1rem;padding-bottom:.6rem}
.sec-alt{background:var(--panel2);border-top:var(--bw) solid var(--line2);border-bottom:var(--bw) solid var(--line2);padding-bottom:2.4rem}
.sec-white{background:var(--panel);border-top:var(--bw) solid var(--line2)}
h2{font-size:1.5rem;line-height:1.4;margin:0 0 .35rem;color:var(--deep);letter-spacing:.01em}
h2::after{content:"";display:block;width:2.75rem;height:4px;background:var(--sun);margin-top:.55rem}
h3{font-size:1.08rem;margin:0 0 .4rem;color:var(--deep)}
.sec-sub{color:var(--ink2);margin:.9rem 0 1.5rem;font-size:.97rem}
.sec-white h2::after,.sec-alt h2::after{background:var(--main)}

/* ---------- Bento 拼块（首页功能区） ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;margin-bottom:2.6rem}
.cell{
  background:#fff;border:var(--bw) solid var(--line2);border-top:4px solid var(--main);
  padding:1.15rem 1.2rem 1.25rem;
}
.cell.a{grid-column:span 3}
.cell.b{grid-column:span 3}
.cell.c{grid-column:span 2}
.cell.d{grid-column:span 2}
.cell.e{grid-column:span 2}
.cell.sun{border-top-color:var(--sun)}
.cell.sky{border-top-color:var(--sky)}
.cell.deep{border-top-color:var(--deep)}
.cell p{margin:0;color:var(--ink2);font-size:.95rem}
.cell .no{display:block;font-size:.8rem;letter-spacing:.16em;color:var(--ink3);margin-bottom:.2rem}

/* ---------- 软件预览 ---------- */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.shot{background:#fff;border:var(--bw) solid var(--line2);padding:.5rem}
.shot img{width:100%;height:auto;border:1px solid var(--line)}
.shot figcaption{margin-top:.55rem;font-size:.88rem;color:var(--ink2);text-align:center}
.figure{max-width:19rem;margin:1.6rem auto;background:#fff;border:var(--bw) solid var(--line2);padding:.5rem}
.figure img{width:100%;height:auto;border:1px solid var(--line)}
.figure figcaption{margin-top:.55rem;font-size:.86rem;color:var(--ink3);text-align:center}

/* ---------- 深度内容入口（直角等宽卡） ---------- */
.entries{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.entry{
  display:block;background:#fff;border:var(--bw) solid var(--line2);border-left:6px solid var(--main);
  padding:1.1rem 1.2rem;color:var(--ink);
}
.entry:hover{border-left-color:var(--sun);background:var(--main-l)}
.entry b{display:block;color:var(--deep);font-size:1.06rem;margin-bottom:.3rem}
.entry span{display:block;color:var(--ink2);font-size:.93rem}
.entry em{display:block;margin-top:.6rem;font-style:normal;font-size:.88rem;color:var(--main-d)}

/* ---------- 评价 ---------- */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.quote{background:#fff;border:var(--bw) solid var(--line2);border-top:4px solid var(--sun);padding:1.15rem 1.2rem}
.quote p{margin:0 0 .7rem;color:var(--ink2);font-size:.96rem}
.quote footer{font-size:.87rem;color:var(--ink3)}

/* ---------- FAQ ---------- */
.faq-group{margin-bottom:1.6rem}
.faq-group h3{border-left:6px solid var(--sun);padding-left:.6rem}
details.q{background:#fff;border:var(--bw) solid var(--line2);margin-bottom:.55rem}
details.q summary{cursor:pointer;padding:.75rem 2.2rem .75rem .9rem;font-weight:700;color:var(--deep);position:relative;list-style:none}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";position:absolute;right:.9rem;top:.62rem;color:var(--main);font-weight:700;font-size:1.15rem}
details.q[open] summary::after{content:"\2013"}
details.q .ans{padding:0 .95rem 1rem;color:var(--ink2);font-size:.95rem}
details.q .ans p:last-child{margin-bottom:0}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(150deg,var(--deep) 0%,#1C5C4C 60%,var(--main) 100%);color:#fff;border-top:4px solid var(--sun);padding-top:2.9rem;padding-bottom:2.9rem}
.cta h2{color:#fff}
.cta h2::after{background:var(--sun)}
.cta p{color:#CFE3D8;max-width:36rem;margin-left:auto;margin-right:auto}
.cta .wrap{text-align:center}
.cta small{display:block;margin-top:.85rem;color:#A9C6B9;font-size:.86rem}

/* ---------- 内页页头（无主视觉图） ---------- */
.page-hero{background:var(--panel);border-bottom:var(--bw) solid var(--line2);padding-top:2.4rem;padding-bottom:1.9rem}
.page-hero .wrap{max-width:var(--col);text-align:center}
.page-hero h1{font-size:1.9rem}
.crumb{font-size:.86rem;color:var(--ink3);margin-bottom:.8rem}
.crumb a{color:var(--ink2)}

/* ---------- 内页正文（单栏 · 杂志式分节） ---------- */
.prose-sec{position:relative;border-top:var(--bw) solid var(--line2);padding-top:1.7rem;margin-bottom:2.4rem}
.prose-sec::before{
  content:attr(data-n);position:absolute;right:0;top:.9rem;font-size:3.4rem;font-weight:800;
  line-height:1;color:var(--main-l);letter-spacing:-.03em;pointer-events:none;
}
.prose-sec h2{margin-bottom:.9rem}
.prose-sec h3{margin-top:1.4rem}
.tick{margin:0 0 1.05rem;padding-left:0;list-style:none}
.tick li{position:relative;padding-left:1.5rem;color:var(--ink2)}
.tick li::before{content:"";position:absolute;left:0;top:.62rem;width:.6rem;height:.6rem;background:var(--sun)}
.steps{counter-reset:st;list-style:none;padding-left:0}
.steps li{position:relative;padding-left:2.5rem;margin-bottom:.9rem;color:var(--ink2)}
.steps li::before{
  counter-increment:st;content:counter(st);position:absolute;left:0;top:.15rem;
  width:1.7rem;height:1.7rem;line-height:1.7rem;text-align:center;background:var(--main);
  color:#fff;font-size:.86rem;font-weight:700;
}
.tip{background:var(--main-l);border-left:6px solid var(--main);padding:.9rem 1rem;color:var(--ink2);font-size:.95rem;margin:0 0 1.2rem}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-top:1.4rem}
.rel a{display:block;background:#fff;border:var(--bw) solid var(--line2);border-top:4px solid var(--main);padding:.9rem 1rem;color:var(--ink)}
.rel a:hover{background:var(--main-l)}
.rel b{display:block;color:var(--deep);margin-bottom:.25rem}
.rel span{font-size:.9rem;color:var(--ink2)}

/* ---------- 页脚 ---------- */
.foot{background:var(--foot);color:var(--foot-ink);padding-top:2.4rem;padding-bottom:1.8rem;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:1.6rem;margin-bottom:1.8rem}
.foot h4{color:#fff;font-size:1rem;margin:0 0 .6rem}
.foot ul{list-style:none;padding:0;margin:0}
.foot a{color:var(--foot-ink)}
.foot a:hover{color:#fff}
.disclaim{border-top:1px solid rgba(255,255,255,.16);padding-top:1.2rem;color:#8FAFA1;font-size:.87rem}

/* ---------- 窄屏 ---------- */
@media (max-width:980px){
  h1{font-size:2rem}
  .bento{grid-template-columns:repeat(2,1fr)}
  .cell.a,.cell.b,.cell.c,.cell.d,.cell.e{grid-column:span 1}
  .cell.a,.cell.b{grid-column:span 2}
  .shots{grid-template-columns:repeat(2,1fr)}
  .rel{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  body{font-size:15.5px}
  h1{font-size:1.65rem}
  h2{font-size:1.28rem}
  .sec{padding-top:2.3rem}
  .facts .wrap{padding-left:0;padding-right:0}
  .fact-grid{grid-template-columns:repeat(2,1fr)}
  .fact{border-top:1px solid rgba(255,255,255,.16)}
  .bento{grid-template-columns:1fr}
  .cell.a,.cell.b{grid-column:span 1}
  .entries,.quotes{grid-template-columns:1fr}
  .rel{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero{padding-top:2.2rem;padding-bottom:2.4rem}
  .visual{max-width:16rem}
  .prose-sec::before{font-size:2.5rem}
}