/* ================================================================
   樱花漫画 · yhmhapp.net.cn
   视觉方向 B2 赛博二次元：深紫黑底 + 荧光粉 / 电光青
   结构变体 A2 更新周期风
   ================================================================ */

:root{
  --bg:#0A0614;
  --bg-2:#100A1E;
  --card:#17102B;
  --card-2:#1E1438;
  --pink:#FF3DA6;
  --pink-d:#C2186F;
  --pink-l:#FFD3EA;
  --cyan:#2BE8F0;
  --cyan-d:#12A8B4;
  --cyan-l:#CFFBFC;
  --ink:#F0EAFF;
  --ink-2:#A99BC7;
  --ink-3:#6E6288;
  --line:rgba(255,61,166,.20);
  --line-2:rgba(43,232,240,.18);
  --wrap:1140px;
}

*,*::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","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.78;
  background-image:
    radial-gradient(circle at 12% 6%,rgba(255,61,166,.12),transparent 46%),
    radial-gradient(circle at 92% 78%,rgba(43,232,240,.10),transparent 48%);
  background-attachment:fixed;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--pink-l)}

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

/* ---------------- 入场动效（纯 CSS，与滚动无关） ---------------- */
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes neonScan{0%{transform:translateX(-16%);opacity:0}18%{opacity:.85}82%{opacity:.85}100%{transform:translateX(116%);opacity:0}}
@keyframes dotPulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.2)}}
@keyframes ringSpin{to{transform:rotate(360deg)}}

.rise{animation:riseIn .6s cubic-bezier(.2,.7,.3,1) both}
.rise.d1{animation-delay:.07s}
.rise.d2{animation-delay:.14s}
.rise.d3{animation-delay:.21s}
.rise.d4{animation-delay:.28s}

@media (prefers-reduced-motion:reduce){
  .rise,.rise.d1,.rise.d2,.rise.d3,.rise.d4{animation:none;opacity:1;transform:none}
  .hero__scan,.btn__dot,.foot__spin{animation:none}
}

/* ---------------- 顶部导航 ---------------- */
.top{
  position:sticky;top:0;z-index:40;
  background:rgba(10,6,20,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.top__in{display:flex;align-items:center;gap:18px;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand img{width:38px;height:38px;border-radius:9px}
.brand b{font-size:19px;letter-spacing:.5px;color:var(--ink);font-weight:700}
.brand b i{font-style:normal;color:var(--pink)}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{
  color:var(--ink-2);padding:8px 13px;border-radius:4px;font-size:15px;
  border:1px solid transparent;transition:color .18s,border-color .18s;
}
.nav a:hover{color:var(--ink);border-color:var(--line)}
.nav a.on{color:var(--pink-l);border-color:var(--line);background:rgba(255,61,166,.08)}
.top__btn{
  flex:0 0 auto;margin-left:6px;
  font-size:14px;padding:9px 16px;color:#fff;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  background:linear-gradient(135deg,var(--pink),var(--pink-d));
  border:0;
}
.menu{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  color:var(--ink);width:42px;height:38px;border-radius:4px;font-size:17px;cursor:pointer}

/* ---------------- 按钮（切角霓虹 + 脉冲方点） ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;
  color:#fff;font-size:17px;font-weight:700;letter-spacing:.4px;
  background:linear-gradient(135deg,var(--pink) 0%,var(--pink-d) 100%);
  box-shadow:inset 0 0 0 1px rgba(43,232,240,.5),0 0 26px -8px rgba(255,61,166,.9);
  clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px);
  transition:filter .2s,transform .2s;
}
.btn:hover{filter:brightness(1.1);color:#fff;transform:translateY(-2px)}
.btn__dot{width:9px;height:9px;background:var(--cyan);animation:dotPulse 1.7s ease-in-out infinite;flex:0 0 auto}
.btn--ghost{
  background:transparent;color:var(--cyan-l);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.btn--ghost:hover{color:#fff}
.btn--sm{padding:11px 22px;font-size:15px}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;overflow:hidden;
  padding:62px 0 66px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(165deg,#120A24 0%,#0A0614 58%,#0D0719 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(255,61,166,.055) 0 1px,transparent 1px 26px);
}
.hero::after{
  content:"";position:absolute;right:0;top:0;width:46%;height:100%;pointer-events:none;
  background:radial-gradient(circle at 70% 32%,rgba(43,232,240,.20),transparent 58%);
}
.hero__scan{
  position:absolute;left:0;top:0;height:2px;width:38%;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  animation:neonScan 6.5s linear infinite;
}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:44px;align-items:center}
.kicker{
  display:inline-flex;align-items:center;gap:9px;font-size:13px;letter-spacing:1.4px;
  color:var(--cyan);border:1px solid var(--line-2);padding:6px 13px;border-radius:3px;margin:0 0 20px;
}
.kicker i{width:7px;height:7px;background:var(--pink);font-style:normal;flex:0 0 auto}
.hero h1{
  margin:0 0 16px;font-size:44px;line-height:1.22;letter-spacing:-.4px;
  text-shadow:0 0 30px rgba(255,61,166,.32);
}
.hero h1 em{font-style:normal;color:var(--pink)}
.lead{margin:0 0 26px;font-size:16.5px;color:var(--ink-2);max-width:34em}
.lead b{color:var(--ink);font-weight:600}
.hero__meta{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.hero__meta li{
  font-size:13px;color:var(--ink-2);border:1px solid var(--line);
  padding:6px 12px;border-radius:3px;background:rgba(255,61,166,.05);
}
.hero__meta li b{color:var(--cyan);font-weight:600;font-family:ui-monospace,Consolas,monospace}
.hero__shot{margin:0;position:relative}
.phone{
  width:100%;max-width:326px;margin-left:auto;
  padding:12px;border-radius:22px;
  background:linear-gradient(150deg,rgba(255,61,166,.5),rgba(43,232,240,.4));
  box-shadow:0 24px 60px -26px rgba(0,0,0,.95),0 0 40px -18px rgba(255,61,166,.65);
}
.phone img{width:100%;height:auto;border-radius:12px}
.hero__shot figcaption{
  margin:14px 0 0;text-align:right;font-size:13px;color:var(--ink-3);
}

/* ---------------- 通用区块 ---------------- */
main{display:block}
.sec{padding:64px 0;position:relative}
.sec--alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:760px;margin:0 0 34px}
.sec-head h2{
  margin:0 0 12px;font-size:29px;line-height:1.34;letter-spacing:-.2px;
  position:relative;padding-top:18px;
}
.sec-head h2::before{
  content:"";position:absolute;left:0;top:0;width:40px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--pink),var(--cyan));
}
.sec-head p{margin:0;color:var(--ink-2);font-size:15.5px}
.sec-head p b{color:var(--ink)}

/* ---------------- 周期刻度轴（首页主线） ---------------- */
.axis{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.axis::before{
  content:"";position:absolute;left:0;right:0;top:32px;height:2px;
  background:linear-gradient(90deg,var(--pink) 0%,var(--cyan) 55%,rgba(43,232,240,.15) 100%);
  opacity:.5;
}
.axis__i{position:relative;padding:0 4px}
.axis__n{
  width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:ui-monospace,Consolas,monospace;font-size:15px;font-weight:700;color:var(--bg);
  background:linear-gradient(140deg,var(--pink),var(--pink-d));
  box-shadow:0 0 0 5px var(--bg),0 0 24px -6px rgba(255,61,166,.9);position:relative;z-index:1;
}
.axis__i:nth-child(2) .axis__n{background:linear-gradient(140deg,#FF6EC0,#C2186F)}
.axis__i:nth-child(3) .axis__n{background:linear-gradient(140deg,var(--cyan),var(--cyan-d))}
.axis__i:nth-child(4) .axis__n{background:linear-gradient(140deg,#8FE9F2,#12A8B4)}
.axis__i h3{margin:16px 0 8px;font-size:18px}
.axis__i p{margin:0;font-size:14.5px;color:var(--ink-2)}

/* ---------------- 一周节奏带 ---------------- */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-top:8px}
.week__d{
  background:var(--card);border-top:2px solid var(--line);
  padding:16px 12px 18px;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
.week__d.hot{border-top-color:var(--pink);background:linear-gradient(180deg,rgba(255,61,166,.14),var(--card))}
.week__d b{display:block;font-size:15px;margin-bottom:8px}
.week__d span{display:block;font-size:12.5px;color:var(--ink-3);font-family:ui-monospace,Consolas,monospace}
.week__d i{display:block;font-style:normal;font-size:13px;color:var(--ink-2);margin-top:8px}
.week__d.hot i{color:var(--pink-l)}

/* ---------------- 卡片栅格 ---------------- */
.grid{display:grid;gap:20px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{
  position:relative;padding:26px 24px 30px;background:linear-gradient(180deg,#1B1233,#150E28);
  clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
  box-shadow:inset 0 0 0 1px rgba(43,232,240,.13);
  transition:transform .22s;
}
.card::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:38%;
  background:linear-gradient(90deg,var(--pink),var(--cyan));
  transition:width .3s ease;
}
.card:hover{transform:translateY(-3px)}
.card:hover::after{width:100%}
.card h3{margin:0 0 10px;font-size:18px;letter-spacing:.2px}
.card p{margin:0 0 10px;font-size:14.8px;color:var(--ink-2)}
.card p:last-child{margin-bottom:0}
.card ul{margin:0;padding-left:19px;font-size:14.8px;color:var(--ink-2)}
.card li{margin-bottom:7px}
.card li b{color:var(--cyan-l);font-weight:600}
.tag{
  display:inline-block;font-size:12px;letter-spacing:1px;color:var(--cyan);
  border:1px solid var(--line-2);padding:3px 9px;border-radius:3px;margin-bottom:14px;
  font-family:ui-monospace,Consolas,monospace;
}

/* ---------------- 双栏（文 + 手机） ---------------- */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:46px;align-items:center}
.split--flip .split__txt{order:2}
.split--flip .split__fig{order:1}
.split__txt h2{margin:0 0 16px;font-size:27px;line-height:1.36;position:relative;padding-top:18px}
.split__txt h2::before{
  content:"";position:absolute;left:0;top:0;width:40px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--pink),var(--cyan));
}
.split__txt p{margin:0 0 14px;color:var(--ink-2);font-size:15.5px}
.split__txt p b{color:var(--ink)}
.split__list{margin:18px 0 0;padding:0;list-style:none}
.split__list li{
  padding:11px 0 11px 22px;border-top:1px solid var(--line);position:relative;
  font-size:15px;color:var(--ink-2);
}
.split__list li::before{
  content:"";position:absolute;left:2px;top:19px;width:7px;height:7px;background:var(--cyan);
}
.split__list li b{color:var(--ink)}
.split__fig{margin:0}
.split__fig img{width:100%;height:auto;border-radius:14px;box-shadow:0 20px 46px -24px rgba(0,0,0,.9)}

/* ---------------- 截图网格 ---------------- */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.shot{margin:0}
.shot__fr{
  padding:9px;border-radius:16px;
  background:linear-gradient(150deg,rgba(255,61,166,.42),rgba(43,232,240,.34));
}
.shot img{width:100%;height:auto;border-radius:9px}
.shot figcaption{margin:12px 0 0;font-size:13.5px;color:var(--ink-2)}
.shot figcaption b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:3px}

/* ---------------- 评价 ---------------- */
.quote{
  position:relative;padding:26px 24px 28px;background:var(--card);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
}
.quote::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:44%;background:linear-gradient(90deg,var(--pink),var(--cyan))}
.quote p{margin:0 0 16px;font-size:15.3px;color:var(--ink-2);line-height:1.8}
.quote p b{color:var(--ink)}
.quote footer{font-size:13px;color:var(--ink-3);font-family:ui-monospace,Consolas,monospace}
.quote__st{color:var(--pink);letter-spacing:2px;font-size:14px;margin-bottom:12px}

/* ---------------- 清单 / 步骤 ---------------- */
.steps{counter-reset:s;margin:0;padding:0;list-style:none}
.steps li{
  counter-increment:s;position:relative;padding:16px 0 16px 52px;
  border-top:1px solid var(--line);font-size:15.5px;color:var(--ink-2);
}
.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:15px;
  font-family:ui-monospace,Consolas,monospace;font-size:14px;color:var(--bg);
  background:linear-gradient(135deg,var(--pink),var(--pink-d));
  width:34px;height:26px;display:flex;align-items:center;justify-content:center;
}
.steps li b{color:var(--ink)}

/* ---------------- FAQ ---------------- */
.faq{margin:0;padding:0}
.faq details{
  border-top:1px solid var(--line);padding:0;
}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:17px 34px 17px 0;font-size:16px;color:var(--ink);
  position:relative;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:26px;width:9px;height:9px;
  border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);
  transform:rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{margin:0 0 18px;padding-right:20px;font-size:15px;color:var(--ink-2)}
.faq p b{color:var(--ink)}

/* ---------------- 事实条 ---------------- */
.facts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:rgba(255,61,166,.22);margin-top:40px;
}
.facts div{background:var(--bg-2);padding:22px 20px}
.facts b{display:block;font-size:26px;font-family:ui-monospace,Consolas,monospace;color:var(--pink);margin-bottom:5px}
.facts span{font-size:13.5px;color:var(--ink-2)}

/* ---------------- 内页横幅 ---------------- */
.page-hero{
  padding:52px 0 46px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;
  background:linear-gradient(150deg,#150C2C,#0A0614 62%);
}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(43,232,240,.05) 0 1px,transparent 1px 30px);
}
.page-hero .wrap{position:relative;z-index:1}
.crumb{font-size:13px;color:var(--ink-3);margin:0 0 14px;font-family:ui-monospace,Consolas,monospace}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--cyan)}
.page-hero h1{margin:0 0 14px;font-size:34px;line-height:1.3;max-width:22em}
.page-hero .lead{max-width:44em;margin-bottom:0}

/* ---------------- 正文块 ---------------- */
.blk{margin:0 0 34px}
.blk h2{margin:0 0 14px;font-size:24px;line-height:1.4;position:relative;padding-top:16px}
.blk h2::before{
  content:"";position:absolute;left:0;top:0;width:34px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--pink),var(--cyan));
}
.blk p{margin:0 0 14px;color:var(--ink-2);font-size:15.7px}
.blk p b{color:var(--ink)}
.blk ul{margin:0 0 14px;padding-left:20px;color:var(--ink-2);font-size:15.5px}
.blk li{margin-bottom:8px}
.blk li b{color:var(--cyan-l)}

/* ---------------- 交叉入口 ---------------- */
.xlink{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:8px}
.xlink a{
  display:block;padding:22px;border:1px solid var(--line);color:var(--ink);
  background:linear-gradient(120deg,rgba(255,61,166,.08),transparent 62%);
  transition:border-color .2s;
}
.xlink a:hover{border-color:var(--cyan);color:var(--ink)}
.xlink b{display:block;font-size:17px;margin-bottom:6px}
.xlink span{font-size:14px;color:var(--ink-2)}

/* ---------------- 下载条 ---------------- */
.cta{
  padding:58px 0;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(140deg,#1B0E36,#0A0614 55%,#0C1A22);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 26% 20%,rgba(255,61,166,.20),transparent 52%),
             radial-gradient(circle at 76% 82%,rgba(43,232,240,.18),transparent 52%);
}
.cta .wrap{position:relative;z-index:1}
.cta h2{margin:0 0 14px;font-size:27px}
.cta p{margin:0 auto 26px;max-width:40em;color:var(--ink-2);font-size:15.5px}

/* ---------------- 页脚 ---------------- */
.foot{background:#07040F;border-top:1px solid var(--line);padding:44px 0 30px;font-size:14px}
.foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;margin-bottom:28px}
.foot__brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.foot__brand img{width:34px;height:34px;border-radius:8px}
.foot__brand b{font-size:17px;color:var(--ink)}
.foot p{margin:0 0 10px;color:var(--ink-3);line-height:1.75}
.foot h4{margin:0 0 12px;font-size:15px;color:var(--ink)}
.foot ul{margin:0;padding:0;list-style:none}
.foot li{margin-bottom:9px}
.foot li a{color:var(--ink-2);font-size:14px}
.foot li a:hover{color:var(--cyan)}
.foot__disc{
  border-top:1px solid var(--line);padding-top:20px;color:var(--ink-3);font-size:13.5px;
}
.foot__low{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:14px;color:var(--ink-3);font-size:13px}

/* ---------------- 响应式 ---------------- */
@media (max-width:980px){
  .hero{padding:44px 0 50px}
  .hero__in{grid-template-columns:minmax(0,1fr);gap:32px}
  .hero::after{width:100%;opacity:.5}
  .hero h1{font-size:34px}
  .phone{max-width:280px;margin:0 auto}
  .hero__shot figcaption{text-align:center}
  .sec{padding:48px 0}
  .sec-head h2{font-size:25px}
  .axis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .axis::before{display:none}
  .week{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid--3,.shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:minmax(0,1fr);gap:28px}
  .split--flip .split__txt,.split--flip .split__fig{order:0}
  .split__fig img{max-width:340px;margin:0 auto}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__top{grid-template-columns:1fr 1fr}
}

@media (max-width:620px){
  body{font-size:15.5px}
  .wrap{padding:0 16px}
  .nav{display:none;position:absolute;left:0;right:0;top:66px;flex-direction:column;gap:0;
    background:#0C0718;border-bottom:1px solid var(--line);padding:8px 16px 14px}
  .nav.open{display:flex}
  .nav a{padding:12px 6px;border-bottom:1px solid rgba(255,61,166,.12)}
  .menu{display:block}
  .top__btn{display:none}
  .hero h1{font-size:29px}
  .page-hero h1{font-size:26px}
  .sec-head h2,.blk h2,.split__txt h2{font-size:22px}
  .cta h2{font-size:22px}
  .axis{grid-template-columns:minmax(0,1fr);gap:22px}
  .axis__i{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:start}
  .axis__i h3{margin-top:6px}
  .axis__i p{grid-column:2;margin-top:0}
  .week{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3,.grid--2,.shots,.xlink{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:minmax(0,1fr)}
  .foot__top{grid-template-columns:minmax(0,1fr);gap:22px}
  .btn{width:100%;justify-content:center}
}