@charset "utf-8";
/* ==========================================================================
   横风动漫 · hfdmapp.cc
   视觉档位：暗夜霓虹（深空紫黑底 + 霓虹紫主 + 电光青辅 + 青柠点缀）
   渲染语言：14px 中圆角 + 内描边（inset box-shadow）+ 霓虹外发光 + 顶部渐变亮线
   动效机制：纯 CSS @keyframes，水平方向滑入 + 光带 background-position 漂移
   ========================================================================== */

:root{
  --bg:#0F0B1E;
  --bg-deep:#0B0817;
  --card:#181233;
  --card-2:#1F1843;
  --line:rgba(139,92,246,.24);
  --line-c:rgba(34,211,238,.22);

  --violet:#8B5CF6;
  --violet-d:#6D3DE0;
  --violet-l:#C6B4FF;
  --cyan:#22D3EE;
  --cyan-d:#0E97AE;
  --lime:#A3E635;

  --ink:#F2EEFF;
  --ink-2:#B9B0D8;
  --ink-3:#7C7398;

  --foot:#0A0716;
  --foot-ink:#8F86AC;

  --r:14px;
  --r-sm:9px;
  --col:70rem;
  --shadow:0 20px 46px -30px rgba(0,0,0,.96);
  --glow-v:0 0 34px -8px rgba(139,92,246,.6);
  --glow-c:0 0 34px -8px rgba(34,211,238,.55);
}

*,*::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","Microsoft YaHei","Hiragino Sans GB","Noto Sans SC","Source Han Sans SC","WenQuanYi Micro Hei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.78;
  letter-spacing:.01em;
}

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

a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--violet-l)}

h1,h2,h3,h4{margin:0;line-height:1.32;font-weight:800;letter-spacing:.01em}

p{margin:0}

ul,ol{margin:0;padding:0;list-style:none}

.wrap{
  width:100%;
  max-width:var(--col);
  margin-left:auto;
  margin-right:auto;
  padding-left:1.25rem;
  padding-right:1.25rem;
}

.sec{padding-top:4.6rem;padding-bottom:4.6rem}
.sec-tight{padding-top:3rem;padding-bottom:3rem}

/* ───────────── 入场动效：纯 CSS，与滚动位置无关 ───────────── */
@keyframes inL{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes inR{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes bandSlide{from{background-position:0 0}to{background-position:280px 0}}
@keyframes haloTurn{0%,100%{opacity:.5}50%{opacity:1}}

.rise{animation:inL .62s cubic-bezier(.22,.72,.3,1) both}
.rise-r{animation:inR .62s cubic-bezier(.22,.72,.3,1) both}
.d1{animation-delay:.07s}
.d2{animation-delay:.14s}
.d3{animation-delay:.21s}
.d4{animation-delay:.28s}
.d5{animation-delay:.35s}
.halo{animation:haloTurn 4.6s ease-in-out infinite}

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

/* ───────────── 顶栏 ───────────── */
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(15,11,30,.9);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{
  display:flex;align-items:center;gap:1rem;
  min-height:4.2rem;flex-wrap:wrap;
  padding-top:.55rem;padding-bottom:.55rem;
}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);font-weight:800;font-size:1.16rem}
.brand:hover{color:var(--ink)}
.brand img{width:2.3rem;height:2.3rem;flex:0 0 auto}
.brand span{letter-spacing:.06em}

.nav{margin-left:auto;display:flex;gap:.15rem;flex-wrap:wrap}
.nav a{
  display:block;padding:.42rem .8rem;border-radius:999px;
  color:var(--ink-2);font-size:.93rem;font-weight:600;
  transition:color .2s,background-color .2s,box-shadow .2s;
}
.nav a:hover{color:var(--ink);background:rgba(139,92,246,.14)}
.nav a[aria-current="page"]{
  color:var(--ink);
  background:linear-gradient(120deg,rgba(139,92,246,.34),rgba(34,211,238,.24));
  box-shadow:inset 0 0 0 1px rgba(198,180,255,.6);
}
.top-dl{
  display:inline-flex;align-items:center;
  padding:.45rem 1.05rem;border-radius:999px;
  font-size:.9rem;font-weight:700;color:#fff;
  background:linear-gradient(120deg,var(--violet),var(--cyan-d));
  box-shadow:var(--glow-v);
}
.top-dl:hover{color:#fff}

/* ───────────── Hero ───────────── */
.hero{
  position:relative;
  background:
    radial-gradient(58rem 26rem at 10% -12%,rgba(139,92,246,.42),transparent 62%),
    radial-gradient(46rem 24rem at 96% 4%,rgba(34,211,238,.28),transparent 60%),
    linear-gradient(170deg,#1B1338,#120C27 58%,#0D0919);
  border-bottom:1px solid var(--line);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(114deg,rgba(255,255,255,.055) 0 2px,transparent 2px 24px);
  animation:bandSlide 20s linear infinite;
  opacity:.75;
}
.hero .wrap{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.04fr .96fr;
  gap:3rem;align-items:center;
  padding-top:3.6rem;padding-bottom:3.6rem;
}
.hero h1{
  font-size:clamp(1.85rem,4.1vw,2.85rem);
  letter-spacing:.04em;
  color:#fff;
}
.hero h1 b{
  font-weight:800;
  background:linear-gradient(96deg,var(--violet-l),var(--cyan));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--violet-l);
}
.hero .lead-p{
  margin-top:1.05rem;
  color:var(--ink-2);
  font-size:1.02rem;
  max-width:34rem;
}
.meta-note{
  margin-top:.7rem;color:var(--ink-3);font-size:.9rem;
}
.acts{margin-top:1.6rem;display:flex;gap:.85rem;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.86rem 1.9rem;border-radius:999px;
  font-weight:800;font-size:1rem;color:#fff;
  background:linear-gradient(118deg,var(--violet),var(--cyan-d));
  box-shadow:var(--glow-v),0 16px 34px -22px rgba(0,0,0,.95);
  transition:transform .22s,box-shadow .22s;
}
.btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 0 44px -4px rgba(139,92,246,.95),0 18px 36px -22px rgba(0,0,0,.95)}
.btn-ghost{
  background:rgba(34,211,238,.07);
  box-shadow:inset 0 0 0 1.5px rgba(34,211,238,.62);
  color:var(--cyan);
}
.btn-ghost:hover{color:#fff;background:rgba(34,211,238,.16);box-shadow:inset 0 0 0 1.5px var(--cyan),var(--glow-c)}
.btn svg{width:1.05rem;height:1.05rem;flex:0 0 auto}

.phone{
  position:relative;width:100%;max-width:19rem;margin-left:auto;margin-right:auto;
  padding:8px;border-radius:24px;
  background:linear-gradient(158deg,rgba(139,92,246,.7),rgba(34,211,238,.42));
  box-shadow:var(--shadow),var(--glow-v);
}
.phone img{width:100%;height:auto;border-radius:17px}
.phone::before{
  content:"";position:absolute;left:16%;right:16%;bottom:-14px;height:26px;
  border-radius:50%;background:rgba(139,92,246,.42);filter:blur(18px);z-index:-1;
}

/* ───────────── 事实条（全宽霓虹细条）───────────── */
.facts{
  background:linear-gradient(90deg,rgba(139,92,246,.2),rgba(34,211,238,.14) 70%,rgba(163,230,53,.1));
  border-bottom:1px solid var(--line-c);
}
.facts ul{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:.4rem;
  padding-top:1rem;padding-bottom:1rem;
}
.facts li{display:flex;flex-direction:column;gap:.1rem;padding-left:.9rem;border-left:1px solid rgba(255,255,255,.14)}
.facts b{font-size:.74rem;letter-spacing:.14em;color:var(--ink-3);font-weight:700}
.facts span{font-size:.94rem;font-weight:700;color:#fff}

/* ───────────── 标题组 ───────────── */
.sec-h{margin-bottom:2.1rem}
.eyebrow{
  font-size:.72rem;letter-spacing:.26em;font-weight:700;
  color:var(--cyan);text-transform:uppercase;margin-bottom:.5rem;
}
h2{
  font-size:clamp(1.35rem,2.5vw,1.78rem);
  display:flex;align-items:center;gap:.6rem;
}
h2::before{
  content:"";width:.62em;height:.62em;flex:0 0 auto;
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  transform:rotate(45deg);border-radius:3px;
  box-shadow:var(--glow-v);
}
.sub-p{margin-top:.62rem;color:var(--ink-2);font-size:.97rem;max-width:44rem}
h3{font-size:1.12rem}

/* ───────────── 卡片（渲染语言：内描边 + 顶部亮线 + 霓虹发光）───────────── */
.card{
  position:relative;
  padding:1.55rem 1.5rem;
  border-radius:var(--r);
  background:linear-gradient(178deg,var(--card),var(--card-2));
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow);
  transition:transform .26s,box-shadow .26s;
}
.card::before{
  content:"";position:absolute;top:0;left:1rem;right:1rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--violet),var(--cyan));opacity:.8;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px rgba(139,92,246,.5),var(--glow-v),var(--shadow);
}
.card h3{color:#fff;margin-bottom:.55rem}
.card p{color:var(--ink-2);font-size:.95rem}

.ic{
  width:2.6rem;height:2.6rem;border-radius:10px;margin-bottom:.95rem;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,rgba(139,92,246,.32),rgba(34,211,238,.22));
  box-shadow:inset 0 0 0 1px rgba(198,180,255,.42);
}
.ic svg{width:1.35rem;height:1.35rem}

/* 错位两列（第二列整体下移，区别于等宽栅格与 zigzag）*/
.grid-offset{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem}
.grid-offset > .card:nth-child(even){margin-top:2.1rem}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}

/* ───────────── 预览图 ───────────── */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.shot{
  margin:0;padding:7px;border-radius:var(--r);
  background:linear-gradient(178deg,var(--card),var(--card-2));
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow);
}
.shot img{width:100%;height:auto;border-radius:var(--r-sm)}
.shot figcaption{
  margin-top:.6rem;padding:0 .2rem .35rem;
  font-size:.85rem;color:var(--ink-3);text-align:center;
}

/* 内页插图 */
.figure{margin:1.7rem 0;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:center}
.figure .shot{max-width:17rem;justify-self:center;width:100%}
.figure .fig-txt h3{margin-bottom:.5rem;color:#fff}
.figure .fig-txt p{color:var(--ink-2);font-size:.96rem}
.figure.rev .fig-txt{order:2}
.figure.rev .shot{order:1}

/* ───────────── 深度入口卡（带大号序号）───────────── */
.entries{display:grid;gap:1rem}
.entry{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:center;
  padding:1.3rem 1.5rem;border-radius:var(--r);
  background:linear-gradient(96deg,var(--card),var(--card-2));
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow);
  color:var(--ink);
  transition:transform .24s,box-shadow .24s;
}
.entry:hover{color:var(--ink);transform:translateX(6px);box-shadow:inset 0 0 0 1px rgba(34,211,238,.5),var(--glow-c),var(--shadow)}
.entry .no{
  font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;
  background:linear-gradient(140deg,var(--violet-l),var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--violet-l);
}
.entry h3{font-size:1.05rem;color:#fff;margin-bottom:.2rem}
.entry p{font-size:.92rem;color:var(--ink-2)}
.entry .go{color:var(--cyan);font-size:.9rem;font-weight:700;white-space:nowrap}

/* ───────────── 评价 ───────────── */
.quotes{display:grid;gap:1rem}
.quote{
  position:relative;padding:1.4rem 1.5rem 1.4rem 3.4rem;
  border-radius:var(--r);
  background:rgba(139,92,246,.07);
  box-shadow:inset 0 0 0 1px var(--line);
}
.quote::before{
  content:"“";position:absolute;left:1.1rem;top:.5rem;
  font-size:2.7rem;line-height:1;color:var(--violet);opacity:.75;font-weight:700;
}
.quote p{color:var(--ink-2);font-size:.97rem}
.quote cite{
  display:block;margin-top:.7rem;font-style:normal;
  font-size:.86rem;color:var(--ink-3);
}
.quote cite b{color:var(--cyan);font-weight:700}

/* ───────────── FAQ ───────────── */
.faq-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
details{
  border-radius:var(--r);
  background:linear-gradient(178deg,var(--card),var(--card-2));
  box-shadow:inset 0 0 0 1px var(--line);
  overflow:hidden;
}
details + details{margin-top:.85rem}
summary{
  cursor:pointer;list-style:none;
  padding:1rem 2.6rem 1rem 1.2rem;
  position:relative;font-weight:700;color:#fff;font-size:.97rem;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:1.15rem;top:1.45rem;
  width:.5rem;height:.5rem;border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);
  transform:rotate(45deg);transition:transform .24s;
}
details[open] summary::after{transform:rotate(-135deg)}
details .ans{padding:0 1.2rem 1.15rem;color:var(--ink-2);font-size:.94rem}

/* ───────────── 正文排版 ───────────── */
.prose{max-width:52rem}
.prose h2{margin-top:2.6rem;margin-bottom:1rem}
.prose h3{margin-top:1.7rem;margin-bottom:.6rem;color:#fff}
.prose p{margin-top:.85rem;color:var(--ink-2)}
.prose ul{margin-top:.9rem}
.prose ul li{
  position:relative;padding-left:1.35rem;margin-top:.5rem;color:var(--ink-2);
}
.prose ul li::before{
  content:"";position:absolute;left:.2rem;top:.72em;
  width:.42rem;height:.42rem;border-radius:2px;
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  transform:rotate(45deg);
}
.prose ol{counter-reset:st;margin-top:.9rem}
.prose ol li{
  position:relative;padding-left:2.5rem;margin-top:.75rem;color:var(--ink-2);
  counter-increment:st;
}
.prose ol li::before{
  content:counter(st,decimal-leading-zero);
  position:absolute;left:0;top:.05em;
  font-size:.82rem;font-weight:800;color:var(--cyan);
  font-variant-numeric:tabular-nums;
}
.prose b,.prose strong{color:#fff}

.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.chips a{
  padding:.42rem .95rem;border-radius:999px;font-size:.89rem;font-weight:600;
  color:var(--ink-2);background:rgba(139,92,246,.1);
  box-shadow:inset 0 0 0 1px var(--line);
}
.chips a:hover{color:#fff;background:rgba(139,92,246,.24);box-shadow:inset 0 0 0 1px rgba(198,180,255,.6)}

.tbl-scroll{overflow-x:auto;margin-top:1.3rem;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line)}
table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.94rem}
th,td{padding:.78rem 1rem;text-align:left;border-bottom:1px solid rgba(139,92,246,.16)}
th{background:rgba(139,92,246,.14);color:#fff;font-weight:700;white-space:nowrap}
td{color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
.tbl-cap,.tbl-note{margin-top:.7rem;font-size:.88rem;color:var(--ink-3)}

.callout{
  margin-top:1.5rem;padding:1.2rem 1.4rem;border-radius:var(--r);
  background:linear-gradient(120deg,rgba(34,211,238,.11),rgba(139,92,246,.09));
  box-shadow:inset 0 0 0 1px var(--line-c);
}
.callout p{color:var(--ink-2);font-size:.95rem}
.callout b{color:#fff}

/* ───────────── 内页横幅 ───────────── */
.page-hero{
  position:relative;
  background:
    radial-gradient(40rem 18rem at 8% -30%,rgba(139,92,246,.38),transparent 64%),
    radial-gradient(34rem 16rem at 96% -10%,rgba(34,211,238,.24),transparent 62%),
    linear-gradient(168deg,#180F31,#0E0A1D);
  border-bottom:1px solid var(--line);
}
.page-hero .wrap{padding-top:3rem;padding-bottom:2.6rem}
.page-hero h1{font-size:clamp(1.6rem,3.4vw,2.25rem);color:#fff}
.page-hero .lead-p{margin-top:1rem;color:var(--ink-2);max-width:44rem}
.crumb{font-size:.84rem;color:var(--ink-3);margin-bottom:.9rem}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--cyan)}

/* ───────────── CTA 光带 ───────────── */
.cta{
  position:relative;
  background:
    radial-gradient(38rem 18rem at 50% 120%,rgba(34,211,238,.3),transparent 62%),
    linear-gradient(120deg,rgba(139,92,246,.34),rgba(34,211,238,.2) 72%,rgba(163,230,53,.14));
  border-top:1px solid var(--line-c);
  border-bottom:1px solid var(--line);
}
.cta .wrap{
  padding-top:3.1rem;padding-bottom:3.1rem;
  text-align:center;
}
.cta h2{justify-content:center}
.cta .sub-p{margin-left:auto;margin-right:auto;text-align:center}
.cta .acts{justify-content:center}

/* ───────────── 页脚 ───────────── */
footer{background:var(--foot);border-top:1px solid var(--line);color:var(--foot-ink)}
.f-cols{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;
  padding-top:3rem;padding-bottom:2.2rem;
}
.f-cols h4{color:#fff;font-size:.98rem;margin-bottom:.85rem}
.f-cols li{margin-top:.42rem}
.f-cols a{color:var(--foot-ink);font-size:.92rem}
.f-cols a:hover{color:var(--cyan)}
.f-brand{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.f-brand img{width:2.1rem;height:2.1rem}
.f-brand span{color:#fff;font-weight:800;letter-spacing:.05em}
.f-about p{font-size:.92rem;color:var(--foot-ink);max-width:22rem}
.f-bottom{
  border-top:1px solid rgba(139,92,246,.18);
  padding-top:1.3rem;padding-bottom:1.7rem;
  font-size:.86rem;color:var(--ink-3);
}
.f-bottom p + p{margin-top:.5rem}

/* ───────────── 响应式 ───────────── */
@media (max-width:980px){
  .topbar{position:static}
  .topbar .wrap{min-height:0}
  .nav{margin-left:0;width:100%;order:3}
  .hero .wrap{grid-template-columns:1fr;gap:2.3rem;padding-top:2.6rem;padding-bottom:2.8rem}
  .phone{max-width:16rem;margin-left:0}
  .facts ul{grid-template-columns:repeat(3,1fr);gap:.9rem}
  .facts li{border-left:0;padding-left:0}
  .grid-offset{grid-template-columns:1fr}
  .grid-offset > .card:nth-child(even){margin-top:0}
  .grid3{grid-template-columns:1fr 1fr}
  .shots{grid-template-columns:1fr 1fr}
  .faq-2{grid-template-columns:1fr}
  .figure{grid-template-columns:1fr}
  .figure.rev .fig-txt{order:1}
  .figure.rev .shot{order:2}
  .f-cols{grid-template-columns:1fr 1fr;gap:1.6rem}
  .sec{padding-top:3.4rem;padding-bottom:3.4rem}
}
@media (max-width:620px){
  body{font-size:15.5px}
  .brand img{width:2rem;height:2rem}
  .brand{font-size:1.05rem}
  .nav a{padding:.34rem .6rem;font-size:.88rem}
  .top-dl{padding:.4rem .85rem;font-size:.85rem}
  .hero h1{font-size:1.72rem}
  .facts ul{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr 1fr;gap:.8rem}
  .entry{grid-template-columns:auto 1fr;row-gap:.35rem;padding:1.1rem 1.15rem}
  .entry .go{grid-column:2}
  .quote{padding-left:2.9rem}
  .f-cols{grid-template-columns:1fr}
  .acts{gap:.7rem}
  .btn{padding:.78rem 1.4rem;font-size:.95rem;flex:1 1 auto;justify-content:center}
}