@charset "UTF-8";
/* ==========================================================================
   横风动漫 · hfdmgw.com.cn
   配色档：淡藕荷白底 / 莓紫红主色 / 午夜靛蓝辅助 / 蜜糖橙+湖青点缀
   渲染语言：22px 大圆角 + 柔和漫射投影（无描边）
   动效机制：纯 CSS @keyframes drift（与滚动位置无关）
   ========================================================================== */

:root{
  --bg:#FAF7FD;
  --bg-soft:#F2ECFA;
  --surface:#FFFFFF;
  --ink:#1B2140;
  --ink-2:#4B5273;
  --ink-3:#767CA0;
  --main:#D6336C;
  --main-d:#A61E52;
  --main-l:#FBE4EE;
  --aux:#1F2A5C;
  --aux-d:#131B3F;
  --aux-l:#E7EAF6;
  --pop:#FF9F1C;
  --teal:#2EC4B6;
  --line:rgba(31,42,92,.10);
  --r-lg:22px;
  --r-md:14px;
  --sh-1:0 18px 40px -24px rgba(31,42,92,.34);
  --sh-2:0 30px 64px -32px rgba(31,42,92,.46);
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",
         "Noto Sans CJK SC","WenQuanYi Micro Hei",Arial,sans-serif;
  --wrap:1160px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.82;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--main-d);text-decoration:none}
h1,h2,h3{line-height:1.35;margin:0}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
/* 跳转链接：必须留在视口内（left:-9999px 会被闸门判为元素越界） */
.skip{
  position:absolute;top:8px;left:8px;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.skip:focus{
  width:auto;height:auto;clip:auto;clip-path:none;padding:9px 16px;
  background:#fff;color:var(--main-d);font-weight:700;border-radius:10px;
  box-shadow:var(--sh-1);z-index:99;overflow:visible;
}

/* ── 入场动效：与滚动无关，闸门读到的一定是终态 ───────────────── */
@keyframes drift{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes glow{from{opacity:0}to{opacity:1}}
.drift{animation:drift .6s cubic-bezier(.2,.7,.3,1) both}
.d1{animation-delay:.06s}.d2{animation-delay:.12s}.d3{animation-delay:.18s}
.d4{animation-delay:.24s}.d5{animation-delay:.30s}.d6{animation-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .drift,.d1,.d2,.d3,.d4,.d5,.d6{animation:none;opacity:1;transform:none}
}

/* ── 顶栏 ───────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px);
  box-shadow:0 8px 26px -22px rgba(31,42,92,.55);
}
.bar-in{display:flex;align-items:center;gap:26px;min-height:74px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);font-weight:800;letter-spacing:.4px}
.brand img{width:46px;height:46px;border-radius:13px;flex:0 0 auto}
.brand-txt{font-size:20px}
.nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav a{
  padding:9px 15px;border-radius:999px;color:var(--ink-2);font-size:16px;font-weight:600;
  transition:background .18s,color .18s;
}
.nav a:hover{background:var(--main-l);color:var(--main-d)}
.nav a.on{background:var(--aux);color:#fff}
.bar-btn{flex:0 0 auto}
.menu{display:none;margin-left:auto;width:44px;height:42px;background:none;border:0;cursor:pointer;padding:9px 8px}
.menu span{display:block;height:2.5px;border-radius:2px;background:var(--aux);margin:5px 0;transition:.22s}
.menu[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ── 按钮 ──────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--main) 0%,#B4295F 52%,var(--aux) 100%);
  color:#fff;font-weight:700;border-radius:var(--r-md);padding:13px 26px;
  box-shadow:0 16px 34px -18px rgba(214,51,108,.75);
  transition:transform .18s,box-shadow .18s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 22px 40px -18px rgba(214,51,108,.85)}
.btn-sm{padding:10px 20px;font-size:15.5px;border-radius:12px}
.btn-lg{padding:16px 40px;font-size:18px;border-radius:16px}
/* 深色区块（Hero / 下载条）里的按钮换成高亮蜜糖橙，避免与底色同色系导致对比不足 */
.hero .btn,.cta .btn{
  background:linear-gradient(135deg,#FFD36E 0%,#FF9F1C 58%,#F5810B 100%);
  color:#2E1400;box-shadow:0 18px 38px -18px rgba(255,159,28,.9);
}
.hero .btn:hover,.cta .btn:hover{box-shadow:0 24px 46px -16px rgba(255,159,28,1)}
.ghost{
  display:inline-flex;align-items:center;padding:16px 26px;border-radius:16px;
  color:#fff;font-weight:600;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42);
}
.ghost:hover{background:rgba(255,255,255,.12)}

/* ── Hero：圆角内嵌卡，图左文右（镜像骨架） ───────────────────── */
.hero{padding:26px 0 8px}
.hero-grid{
  display:grid;grid-template-columns:400px 1fr;gap:62px;align-items:center;
  background:
    radial-gradient(560px 380px at 88% -6%,rgba(214,51,108,.52),transparent 62%),
    radial-gradient(420px 320px at 4% 104%,rgba(255,159,28,.26),transparent 66%),
    linear-gradient(148deg,#1D2450 0%,#241C4E 46%,#3A1A46 100%);
  border-radius:38px;padding:54px 56px;color:#fff;box-shadow:var(--sh-2);
  animation:glow .5s ease both;
}
.hero-fig{margin:0;display:flex;justify-content:center}
.hero-copy{min-width:0}
.kicker{
  display:inline-block;margin:0 0 14px;padding:5px 15px;border-radius:999px;
  background:rgba(255,255,255,.15);color:#FFD9E7;font-size:14px;font-weight:700;letter-spacing:1px;
}
.hero h1{font-size:clamp(30px,4.1vw,50px);font-weight:800;letter-spacing:1px;margin:0 0 18px}
.hero-lead{color:#DCD9EE;font-size:17.5px;margin:0 0 28px;max-width:36em}
.hero-btns{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:34px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px;max-width:520px}
.facts li{
  background:rgba(255,255,255,.10);border-radius:var(--r-md);padding:13px 16px;
}
.facts b{display:block;font-size:15.5px;color:#fff;font-weight:800}
.facts span{display:block;font-size:13.5px;color:#B9B6D6;line-height:1.5}

/* ── 手机外框 ───────────────────────────────────────────────── */
.phone{
  background:#fff;border-radius:30px;padding:11px;
  box-shadow:0 40px 70px -34px rgba(9,13,32,.72);width:100%;max-width:272px;
}
.phone img{width:100%;height:auto;border-radius:20px}
.phone.sm{border-radius:22px;padding:8px;max-width:224px;
  box-shadow:0 26px 46px -26px rgba(20,26,58,.55)}
.phone.sm img{border-radius:15px}

/* ── 区块 ──────────────────────────────────────────────────── */
.sec{padding:74px 0}
.sec-alt{background:var(--bg-soft)}
.sec h2{font-size:clamp(23px,2.5vw,31px);font-weight:800;letter-spacing:.6px;margin:0 0 30px}
.sec-alt h2{margin-bottom:14px}
.sub{color:var(--ink-2);margin:0 0 32px;font-size:16.5px}

/* 软件预览 */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 26px}
.shot{margin:0;text-align:center}
.shot .phone{margin:0 auto}
.shot figcaption{margin-top:15px;font-size:14.5px;color:var(--ink-2);line-height:1.65}
.shot figcaption b{color:var(--ink);display:block;font-size:15.5px;margin-bottom:3px}

/* 功能卡 */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.card{
  background:var(--surface);border-radius:var(--r-lg);padding:28px 26px;
  box-shadow:var(--sh-1);transition:transform .2s,box-shadow .2s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.card h3{font-size:18.5px;font-weight:800;margin:0 0 13px;color:var(--aux)}
.card h3::before{
  content:"";display:block;width:34px;height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--main),var(--pop));margin-bottom:14px;
}
.card p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.85}

/* 评价 */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.quote{
  margin:0;background:var(--surface);border-radius:var(--r-lg);padding:26px 28px;
  box-shadow:var(--sh-1);position:relative;
}
.quote::before{
  content:"\201C";position:absolute;left:20px;top:6px;
  font-size:62px;line-height:1;color:var(--main-l);font-family:Georgia,serif;
}
.quote p{margin:0;position:relative;font-size:15.5px;color:var(--ink-2);padding-left:6px}

/* 内页入口 */
.entries{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.entry{
  display:block;background:var(--surface);border-radius:var(--r-lg);padding:28px 26px;
  box-shadow:var(--sh-1);color:var(--ink);transition:transform .2s,box-shadow .2s;
}
.entry:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.entry h3{font-size:19px;font-weight:800;margin:0 0 12px;color:var(--main-d)}
.entry p{margin:0 0 16px;font-size:15.5px;color:var(--ink-2)}
.entry .more{font-size:14.5px;font-weight:700;color:var(--aux)}
.entry .more::after{content:" \2192"}

/* 问答 */
.faq-mini{display:grid;gap:14px;max-width:900px}
.qa{
  background:var(--surface);border-radius:var(--r-md);box-shadow:var(--sh-1);
  padding:6px 22px;
}
.qa summary{
  cursor:pointer;font-weight:700;font-size:16.5px;color:var(--aux);
  padding:16px 0;list-style:none;position:relative;padding-right:30px;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-size:22px;color:var(--main);font-weight:700;line-height:1;
}
.qa[open] summary::after{content:"\2212"}
.qa p{margin:0 0 18px;font-size:15.5px;color:var(--ink-2)}

/* ── 内页横幅 ───────────────────────────────────────────────── */
.page-hero{
  padding:64px 0 52px;
  background:
    radial-gradient(520px 300px at 92% 0%,rgba(214,51,108,.16),transparent 64%),
    radial-gradient(400px 260px at 0% 100%,rgba(46,196,182,.14),transparent 66%),
    linear-gradient(180deg,#F7F2FD,#FAF7FD);
}
.page-hero h1{font-size:clamp(27px,3.4vw,41px);font-weight:800;letter-spacing:1px;margin:0 0 18px}
.page-hero .hero-lead{color:var(--ink-2);font-size:17.5px;max-width:44em;margin:0}
.page-hero .kicker{background:var(--main-l);color:var(--main-d)}

/* 长文排版 */
.prose{max-width:880px}
.prose h2{
  font-size:clamp(21px,2.2vw,27px);font-weight:800;margin:52px 0 18px;color:var(--aux);
  padding-left:16px;position:relative;
}
.prose h2::before{
  content:"";position:absolute;left:0;top:.22em;bottom:.22em;width:5px;border-radius:3px;
  background:linear-gradient(180deg,var(--main),var(--pop));
}
.prose > h2:first-child{margin-top:0}
.prose p{font-size:16.5px;color:var(--ink-2);line-height:1.95}
.prose .faq-list{display:grid;gap:14px;margin-bottom:34px}

/* ── 下载条 ────────────────────────────────────────────────── */
.cta{padding:0 0 74px}
.cta-in{
  display:flex;align-items:center;gap:34px;flex-wrap:wrap;justify-content:space-between;
  background:
    radial-gradient(520px 300px at 6% -20%,rgba(255,159,28,.30),transparent 62%),
    linear-gradient(115deg,#1D2450 0%,#2C1A48 58%,#3C1A44 100%);
  border-radius:var(--r-lg);padding:44px 48px;color:#fff;box-shadow:var(--sh-2);
}
.cta-copy{min-width:0;flex:1 1 320px}
.cta h2{font-size:clamp(21px,2.3vw,28px);font-weight:800;margin:0 0 10px;color:#fff}
.cta p{margin:0;color:#C9C5E2;font-size:16px}

/* ── 页脚 ──────────────────────────────────────────────────── */
.foot{background:var(--aux-d);color:#AEB4D2;padding:64px 0 30px;font-size:15px}
.foot-in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.brand-foot{color:#fff}
.foot-desc{margin:18px 0 0;font-size:14.5px;line-height:1.85;color:#8E95B8;max-width:34em}
.foot h3{font-size:16px;color:#fff;margin:0 0 16px;font-weight:700}
.foot-nav li,.foot-meta li{margin-bottom:10px}
.foot-nav a{color:#AEB4D2}
.foot-nav a:hover{color:#fff}
.foot-bot{
  margin-top:46px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;
}
.disc{color:#8E95B8;font-size:13.5px;margin:0;line-height:1.8;flex:1 1 420px}
.copy{color:#767CA0;font-size:13.5px;margin:0}

/* ── 断点 980 ──────────────────────────────────────────────── */
@media (max-width:980px){
  body{font-size:16.5px}
  .wrap{padding:0 20px}
  .nav{
    position:absolute;left:0;right:0;top:74px;flex-direction:column;gap:0;
    background:#fff;box-shadow:0 26px 40px -26px rgba(31,42,92,.5);
    padding:10px 20px 18px;display:none;
  }
  .js .nav.open{display:flex}
  .nav a{border-radius:10px;padding:12px 14px;width:100%}
  .menu{display:block;order:3}
  .bar-btn{order:2;margin-left:auto}
  .bar-in{gap:14px}
  .hero-grid{grid-template-columns:300px 1fr;gap:40px;padding:44px 36px;border-radius:32px}
  .sec{padding:60px 0}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px}
  .cards,.entries{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quotes{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-col:first-child{grid-column:1/-1}
  .cta-in{padding:38px 34px}
}

/* ── 断点 620 ──────────────────────────────────────────────── */
@media (max-width:620px){
  body{font-size:16px;line-height:1.78}
  .wrap{padding:0 16px}
  .bar-in{min-height:66px}
  .brand img{width:40px;height:40px;border-radius:11px}
  .brand-txt{font-size:17.5px}
  .bar-btn{padding:9px 15px;font-size:14.5px}
  .nav{top:66px}
  .hero{padding:16px 0 4px}
  .hero-grid{
    grid-template-columns:1fr;gap:32px;padding:32px 22px 36px;border-radius:26px;
    text-align:left;
  }
  .hero-fig{order:2}
  .hero-copy{order:1}
  .phone{max-width:212px}
  .hero h1{font-size:29px}
  .hero-lead{font-size:16px;margin-bottom:22px}
  .hero-btns{gap:12px;margin-bottom:26px}
  .btn-lg{padding:14px 30px;font-size:16.5px}
  .ghost{padding:14px 20px}
  .facts{grid-template-columns:1fr 1fr;gap:12px;max-width:none}
  .facts li{padding:11px 13px}
  .facts b{font-size:14.5px}
  .facts span{font-size:12.5px}
  .sec{padding:48px 0}
  .sec h2{font-size:22px;margin-bottom:22px}
  .sec-alt h2{margin-bottom:12px}
  .sub{font-size:15.5px;margin-bottom:24px}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
  .phone.sm{max-width:168px;border-radius:18px;padding:6px}
  .phone.sm img{border-radius:12px}
  .shot figcaption{font-size:13px;margin-top:11px}
  .shot figcaption b{font-size:14px}
  .cards,.entries{grid-template-columns:1fr;gap:16px}
  .card,.entry{padding:22px 20px;border-radius:18px}
  .quote{padding:22px 20px;border-radius:18px}
  .qa{padding:4px 17px}
  .qa summary{font-size:15.5px;padding:14px 26px 14px 0}
  .qa p{font-size:15px}
  .page-hero{padding:44px 0 38px}
  .page-hero h1{font-size:26px}
  .page-hero .hero-lead{font-size:16px}
  .prose h2{margin:38px 0 14px;font-size:20px}
  .prose p{font-size:15.5px;line-height:1.9}
  .cta{padding:0 0 48px}
  .cta-in{padding:30px 22px;gap:22px;border-radius:20px}
  .cta p{font-size:15px}
  .foot{padding:48px 0 26px}
  .foot-in{grid-template-columns:1fr;gap:28px}
  .foot h3{margin-bottom:12px}
  .foot-bot{margin-top:32px;gap:14px}
}