/* V4 贴纸俱乐部 — 白 + 紫 + TikTok 青粉 */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --ink:#161b32; --deep:#5d2260; --violet:#974292; --lilac:#f3e8f7;
  --cyan:#25F4EE; --pink:#FE2C55; --yellow:#ffed9b; --bg:#ffffff;
}
html { scroll-behavior:smooth; }
body { font-family:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--ink); overflow-x:hidden; }
::selection { background:var(--violet); color:#fff; }
a { color:inherit; text-decoration:none; }

/* 浮动药丸导航 */
.nav { position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:100; display:flex; align-items:center; gap:6px; background:#fff; border:3px solid var(--ink); border-radius:999px; padding:8px 12px; box-shadow:0 6px 0 rgba(22,27,50,.12); transition:transform .3s cubic-bezier(.62,.05,.01,.99); white-space:nowrap; }
.nav.shrink { transform:translateX(-50%) scale(.88); }
.nav .brand { font-weight:900; font-size:15px; padding:0 10px; }
.nav .brand i { font-style:normal; color:var(--violet); }
.nav a.nl { font-size:13px; font-weight:700; padding:8px 14px; border-radius:999px; transition:.2s; }
.nav a.nl:hover, .nav a.nl.on { background:var(--lilac); color:var(--deep); }
.nav a.cta { font-size:13px; font-weight:800; padding:8px 18px; border-radius:999px; background:var(--yellow); border:3px solid var(--ink); transition:.2s; }
.nav a.cta:hover { transform:scale(1.05); }

/* 视频展示区：三部竖屏手机并排 */
.vphones { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:50px; justify-items:center; }
.vphone { width:100%; max-width:300px; }
.vphone .frame { aspect-ratio:9/18.5; background:#161b32; border:4px solid var(--ink); border-radius:36px; padding:10px; box-shadow:8px 8px 0 rgba(151,66,146,.35); transition:transform .25s, box-shadow .25s; position:relative; }
.vphone:hover .frame { transform:translateY(-6px); box-shadow:12px 12px 0 rgba(254,44,85,.35); }
/* 无视频占位屏 */
.vplaceholder { position:absolute; inset:0; z-index:2; background:linear-gradient(160deg,#2a1550,#5d2260 60%,#3B1E8F); display:flex; align-items:center; justify-content:center; }
.vplaceholder .vmute { position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%; border:2px solid rgba(255,255,255,.6); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; }
.vplaceholder .vloading { color:#fff; font-size:15px; font-weight:800; letter-spacing:1px; }
.vplaceholder .vltitle { position:absolute; bottom:22px; left:22px; color:#cbb3d6; font-size:14px; font-weight:700; }
/* 博客分类标签 */
.blog-tabs { display:flex; gap:14px; flex-wrap:wrap; margin:26px 0 34px; }
.blog-tab { padding:10px 24px; border-radius:999px; border:3px solid var(--ink); background:#fff; font-size:14px; font-weight:800; cursor:pointer; transition:.2s; box-shadow:4px 4px 0 rgba(22,27,50,.1); }
.blog-tab:hover { transform:translate(-2px,-2px); }
.blog-tab.on { background:var(--violet); color:#fff; box-shadow:4px 4px 0 rgba(151,66,146,.4); }
.vphone .screen { width:100%; height:100%; border-radius:26px; overflow:hidden; background:#000; position:relative; }
.vphone .notch { position:absolute; top:16px; left:50%; transform:translateX(-50%); width:84px; height:18px; background:#161b32; border-radius:999px; z-index:3; }
.vphone video { width:100%; height:100%; object-fit:cover; display:block; }
.vplay { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; background:rgba(22,27,50,.25); cursor:pointer; transition:.25s; border:none; width:100%; }
.vplay .pbtn { width:76px; height:76px; border-radius:50%; background:var(--violet); border:3px solid #fff; box-shadow:0 10px 30px rgba(151,66,146,.6); display:flex; align-items:center; justify-content:center; transition:.25s; }
.vplay:hover .pbtn { transform:scale(1.12); background:var(--pink); }
.vplay .pbtn::after { content:""; border-left:24px solid #fff; border-top:14px solid transparent; border-bottom:14px solid transparent; margin-left:6px; }
.vphone.playing .vplay { display:none; }
.vcap { margin-top:18px; text-align:center; font-size:13px; font-weight:800; color:var(--violet); }
.vtitle { margin-top:6px; text-align:center; font-size:15px; font-weight:900; color:var(--ink); }
@media (max-width:860px) { .vphones { grid-template-columns:1fr; gap:28px; } }

/* 多列页脚 */
.foot-cols { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.15); margin-bottom:40px; }
.foot-cols .fbrand { display:inline-block; background:#fff; color:var(--deep); font-weight:900; border-radius:12px; padding:10px 18px; font-size:16px; }
.foot-cols .fdesc { margin-top:16px; color:#cbb3d6; font-size:13px; line-height:1.9; max-width:280px; }
.foot-cols h5 { font-size:15px; font-weight:900; color:#fff; margin-bottom:16px; }
.foot-cols ul { list-style:none; }
.foot-cols li { margin-bottom:12px; }
.foot-cols li a { color:#cbb3d6; font-size:14px; transition:.2s; }
.foot-cols li a:hover { color:var(--cyan); padding-left:4px; }
@media (max-width:860px) { .foot-cols { grid-template-columns:1fr 1fr; } }

/* Hero */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:120px 6vw 80px; background:radial-gradient(circle at 20% 15%,rgba(37,244,238,.18),transparent 45%),radial-gradient(circle at 85% 20%,rgba(254,44,85,.12),transparent 45%),radial-gradient(circle at 50% 90%,rgba(151,66,146,.14),transparent 50%),#fff; }
.hero h1 { font-size:clamp(44px,8vw,110px); font-weight:900; line-height:1.05; letter-spacing:-.02em; }
.hero h1 .purple { color:var(--violet); }
.hero h1 .stroke { color:transparent; -webkit-text-stroke:3px var(--ink); }
.hero h1 .tiktok { position:relative; display:inline-block; text-shadow:-3px 0 var(--cyan), 3px 0 var(--pink); }
.hero .sub { margin:26px auto 0; max-width:620px; font-size:17px; line-height:1.9; color:#4a5068; }
.cta-row { margin-top:36px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:15px 34px; border-radius:999px; font-size:16px; font-weight:800; border:3px solid var(--ink); cursor:pointer; transition:transform .2s; background:#fff; color:var(--ink); }
.btn .arr { transition:transform .25s, opacity .25s; opacity:0; transform:translateX(-8px); }
.btn:hover .arr { opacity:1; transform:translateX(0); }
.btn:hover { transform:scale(1.04) rotate(-1deg); }
.btn-y { background:var(--yellow); }
.btn-p { background:var(--violet); color:#fff; }

/* 可拖拽贴纸 */
.sticker { position:absolute; z-index:5; cursor:grab; user-select:none; touch-action:none; border:3px solid var(--ink); box-shadow:4px 4px 0 rgba(22,27,50,.15); font-weight:900; transition:box-shadow .2s; }
.sticker:active { cursor:grabbing; box-shadow:8px 8px 0 rgba(22,27,50,.2); }
.st-a { background:var(--cyan); color:var(--ink); border-radius:999px; padding:18px 38px; font-size:24px; transform:rotate(-8deg); top:18%; left:7%; }
.st-b { background:var(--pink); color:#fff; border-radius:20px; padding:20px 32px; font-size:22px; transform:rotate(6deg); top:22%; right:8%; }
.st-c { background:var(--yellow); border-radius:50%; width:160px; height:160px; display:flex; align-items:center; justify-content:center; font-size:21px; transform:rotate(-5deg); bottom:20%; left:12%; }
.st-d { background:#fff; border-radius:18px; padding:18px 30px; font-size:20px; transform:rotate(4deg); bottom:24%; right:11%; }
.st-e { background:var(--violet); color:#fff; border-radius:999px; padding:16px 34px; font-size:20px; transform:rotate(-3deg); top:54%; left:3.5%; }

/* 数据统计 */
.stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); }
.stat { padding:46px 3vw; text-align:center; border-right:3px solid var(--ink); }
.stat:last-child { border-right:none; }
.stat:nth-child(odd) { background:var(--lilac); }
.stat b { display:block; font-size:clamp(36px,4.5vw,62px); font-weight:900; color:var(--deep); letter-spacing:-.02em; }
.stat span { font-size:13px; font-weight:700; color:#6a7090; letter-spacing:1px; }

section { padding:110px 7vw; }
.sec-tag { display:inline-block; background:var(--yellow); border:3px solid var(--ink); border-radius:999px; padding:6px 18px; font-size:13px; font-weight:900; letter-spacing:2px; margin-bottom:18px; transform:rotate(-2deg); }
.sec-title { font-size:clamp(30px,4.2vw,58px); font-weight:900; letter-spacing:-.01em; margin-bottom:16px; }
.sec-title .v { color:var(--violet); }
.sec-desc { color:#4a5068; max-width:640px; line-height:1.9; font-size:16px; }

/* 服务卡片（贴纸卡） */
.svc-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:48px; }
.svc { background:#fff; border:3px solid var(--ink); border-radius:22px; padding:34px; cursor:pointer; box-shadow:6px 6px 0 rgba(22,27,50,.12); transition:transform .25s, box-shadow .25s; position:relative; }
.svc:hover { transform:translate(-3px,-3px) rotate(-.6deg); box-shadow:10px 10px 0 rgba(151,66,146,.3); }
.svc .no { position:absolute; top:-16px; left:24px; background:var(--pink); color:#fff; font-weight:900; font-size:13px; border:3px solid var(--ink); border-radius:999px; padding:4px 14px; }
.svc:nth-child(2) .no { background:var(--cyan); color:var(--ink); }
.svc:nth-child(3) .no { background:var(--yellow); color:var(--ink); }
.svc:nth-child(4) .no { background:var(--violet); }
.svc h3 { font-size:22px; font-weight:900; margin:10px 0 10px; }
.svc p { color:#4a5068; font-size:14px; line-height:1.8; }
.svc .more { margin-top:16px; font-weight:800; font-size:14px; color:var(--violet); }

/* 弹窗 */
.modal-mask { position:fixed; inset:0; z-index:200; background:rgba(22,27,50,.45); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .35s; }
.modal-mask.show { opacity:1; pointer-events:auto; }
.modal { background:#fff; border:3px solid var(--ink); border-radius:26px; max-width:640px; width:100%; max-height:85vh; overflow:auto; padding:40px; box-shadow:10px 10px 0 rgba(151,66,146,.35); transform:scale(.8) rotate(-3deg); transition:transform .35s cubic-bezier(.34,1.56,.64,1) .1s; }
.modal-mask.show .modal { transform:scale(1) rotate(0); }
.modal .m-tag { display:inline-block; background:var(--lilac); border:2px solid var(--ink); border-radius:999px; padding:4px 14px; font-size:12px; font-weight:900; color:var(--deep); }
.modal h3 { font-size:26px; font-weight:900; margin:14px 0 16px; }
.modal ul { list-style:none; margin:10px 0 20px; }
.modal li { padding:12px 0 12px 26px; border-bottom:2px dashed #e6e2f0; font-size:15px; line-height:1.7; position:relative; color:#333a55; }
.modal li::before { content:"→"; position:absolute; left:0; color:var(--violet); font-weight:900; }
.modal li b { color:var(--ink); }
.modal .close-x { position:sticky; float:right; top:0; background:var(--ink); color:#fff; border:none; width:36px; height:36px; border-radius:50%; font-size:16px; cursor:pointer; }

/* 关于页 */
.about-hero { padding:160px 7vw 60px; }
.about-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.polaroid { background:#fff; border:3px solid var(--ink); border-radius:8px; padding:16px 16px 46px; box-shadow:8px 8px 0 rgba(22,27,50,.12); transform:rotate(-3deg); }
.polaroid .ph { aspect-ratio:4/3; border:2px solid var(--ink); border-radius:4px; background:radial-gradient(circle at 30% 25%,rgba(37,244,238,.5),transparent 55%),radial-gradient(circle at 75% 80%,rgba(254,44,85,.45),transparent 55%),linear-gradient(140deg,#2a1550,#5d2260); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; }
.polaroid figcaption { text-align:center; margin-top:14px; font-size:13px; font-weight:700; color:#6a7090; letter-spacing:1px; }
.mv { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:50px; }
.mv div { border:3px solid var(--ink); border-radius:20px; padding:28px; background:#fff; }
.mv div:nth-child(1) { background:var(--lilac); transform:rotate(-1deg); }
.mv div:nth-child(2) { background:#e8fbfa; transform:rotate(1deg); }
.mv div:nth-child(3) { background:#fff0f3; transform:rotate(-1deg); }
.mv h4 { font-size:18px; font-weight:900; margin-bottom:10px; }
.mv p { font-size:14px; color:#4a5068; line-height:1.8; }

/* 博客卡片网格 */
.bgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:10px; }
.bcard { border:3px solid var(--ink); border-radius:20px; overflow:hidden; background:#fff; box-shadow:5px 5px 0 rgba(22,27,50,.1); transition:.25s; display:flex; flex-direction:column; }
.bcard:hover { transform:translate(-3px,-3px); box-shadow:9px 9px 0 rgba(151,66,146,.3); }
.bcard .bcover { aspect-ratio:16/9; background:linear-gradient(135deg,var(--cyan),var(--violet),var(--pink)); overflow:hidden; border-bottom:3px solid var(--ink); }
.bcard .bcover img { width:100%; height:100%; object-fit:cover; display:block; }
.bcard .bbody { padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.bcard .bcat { display:inline-block; align-self:flex-start; background:var(--lilac); color:var(--deep); font-size:12px; font-weight:800; padding:4px 12px; border-radius:999px; margin-bottom:12px; }
.bcard h4 { font-size:17px; font-weight:900; line-height:1.5; }
.bcard p { color:#4a5068; font-size:13px; line-height:1.7; margin-top:8px; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bcard .bmeta { display:flex; justify-content:space-between; align-items:center; margin-top:16px; font-size:12px; color:#6a7090; font-weight:700; }
.bcard .bread { color:var(--violet); font-weight:900; font-size:13px; }
@media (max-width:860px) { .bgrid { grid-template-columns:1fr; } }

/* 资源页 */
.art-list { margin-top:40px; }
.art { display:flex; gap:24px; align-items:center; border:3px solid var(--ink); border-radius:20px; padding:20px; margin-bottom:18px; background:#fff; transition:.25s; cursor:pointer; }
.art:hover { transform:translateX(8px); box-shadow:6px 6px 0 rgba(151,66,146,.25); }
.art .thumb { width:150px; aspect-ratio:16/10; border:2px solid var(--ink); border-radius:12px; background:linear-gradient(135deg,var(--cyan),var(--violet),var(--pink)); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; overflow:hidden; }
.art .thumb img { width:100%; height:100%; object-fit:cover; }
.art h4 { font-size:18px; font-weight:900; }
.art p { color:#4a5068; font-size:13px; margin-top:6px; line-height:1.7; }
.art time { font-size:12px; font-weight:800; color:var(--violet); }
.faq-item { border:3px solid var(--ink); border-radius:16px; margin-bottom:14px; background:#fff; overflow:hidden; }
.faq-q { width:100%; background:none; border:none; text-align:left; padding:20px 24px; font-size:15px; font-weight:800; cursor:pointer; display:flex; justify-content:space-between; color:var(--ink); }
.faq-q::after { content:"+"; color:var(--violet); font-size:22px; font-weight:900; }
.faq-item.open .faq-q { background:var(--lilac); }
.faq-item.open .faq-q::after { content:"–"; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s; color:#4a5068; font-size:14px; line-height:1.9; padding:0 24px; }
.faq-item.open .faq-a { max-height:220px; padding-bottom:20px; }

/* 联系页 */
.contact-wrap { min-height:100vh; display:flex; align-items:center; padding:140px 7vw 80px; }
.contact-card { width:100%; border:3px solid var(--ink); border-radius:28px; background:linear-gradient(140deg,#fff, var(--lilac)); padding:60px; display:grid; grid-template-columns:1.2fr .8fr; gap:50px; align-items:center; box-shadow:10px 10px 0 rgba(151,66,146,.25); }
.wx-pill { display:inline-block; margin-top:24px; background:var(--yellow); border:3px solid var(--ink); border-radius:999px; padding:14px 34px; font-weight:900; font-size:22px; }
.qr { width:220px; height:220px; border:3px dashed var(--violet); border-radius:20px; display:flex; align-items:center; justify-content:center; color:#6a7090; font-size:13px; justify-self:center; background:#fff; }

/* 超大页脚 */
footer { background:var(--deep); color:#fff; padding:60px 7vw 30px; overflow:hidden; }
.foot-word { font-size:13vw; font-weight:900; line-height:.9; letter-spacing:-.02em; color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.35); white-space:nowrap; user-select:none; }
.foot-row { display:flex; justify-content:space-between; margin-top:30px; font-size:13px; color:#cbb3d6; flex-wrap:wrap; gap:10px; }

/* 动效 */
.wiggle:hover { animation:wig .3s steps(2,end) infinite; }
@keyframes wig { from { transform:rotate(-1.25deg); } to { transform:rotate(1.25deg); } }
.reveal { opacity:0; transform:translateY(40px); transition:opacity .8s cubic-bezier(.23,1,.32,1), transform .8s cubic-bezier(.23,1,.32,1); }
.reveal.in { opacity:1; transform:none; }
.page-in { animation:pageIn .5s cubic-bezier(.23,1,.32,1); }
@keyframes pageIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }

/* 流水收益（贴纸照片墙，一排六张） */
.egrid { display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:40px; }
.ecard { background:#fff; border:3px solid var(--ink); border-radius:12px; padding:8px 8px 10px; box-shadow:5px 5px 0 rgba(151,66,146,.28); transition:transform .25s, box-shadow .25s; }
.ecard:nth-child(3n+1) { transform:rotate(-1.6deg); }
.ecard:nth-child(3n+2) { transform:rotate(1.2deg); }
.ecard:nth-child(3n) { transform:rotate(-.8deg); }
.ecard:hover { transform:translateY(-8px) rotate(0); box-shadow:9px 9px 0 rgba(254,44,85,.3); }
.ecard img { width:100%; display:block; border:2px solid var(--ink); border-radius:6px; }
.ecard .ecap { margin-top:8px; text-align:center; font-size:11px; font-weight:800; color:var(--deep); }
.eempty { border:3px dashed var(--violet); border-radius:20px; padding:60px 20px; text-align:center; color:var(--violet); font-weight:800; background:#fbf7fd; margin-top:50px; }
@media (max-width:1200px) { .egrid { grid-template-columns:repeat(3,1fr); gap:16px; } }
@media (max-width:640px) { .egrid { grid-template-columns:repeat(2,1fr); gap:14px; } }

/* 弹窗价格卡 & 价格表 */
.mprice { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:6px 0 18px; }
.mprice .mp { border:3px solid var(--ink); border-radius:16px; padding:20px; background:var(--lilac); }
.mprice .mp:nth-child(2) { background:#e8fbfa; }
.mprice .mp h5 { font-size:15px; font-weight:900; margin-bottom:8px; }
.mprice .mp .num { font-size:26px; font-weight:900; color:var(--pink); }
.mprice .mp .num.c { color:#0a9e97; }
.mprice .mp p { font-size:12px; color:#4a5068; margin-top:6px; line-height:1.7; }
.mnote { font-size:13px; color:#6a7090; margin:-6px 0 16px; }
.ptable { width:100%; border-collapse:collapse; margin:8px 0 18px; font-size:13px; }
.ptable th { background:var(--ink); color:#fff; padding:9px 8px; font-size:12px; }
.ptable td { border-bottom:2px dashed #e6e2f0; padding:9px 8px; text-align:center; color:#333a55; }
.ptable td.p { color:var(--pink); font-weight:900; white-space:nowrap; }
.ptable td.r { color:var(--violet); font-weight:800; }
.ptable tr td:first-child { font-weight:900; color:var(--deep); }

/* 科普板块 & 对比表 */
.edu { max-width:1000px; margin:0 auto; }
.edu-q { background:#fff; border:3px solid var(--ink); border-radius:22px; padding:34px 38px; box-shadow:6px 6px 0 rgba(22,27,50,.12); margin-top:40px; }
.edu-q h4 { font-size:20px; font-weight:900; margin-bottom:14px; }
.edu-q h4 .qn { display:inline-block; background:var(--cyan); border:2px solid var(--ink); border-radius:8px; padding:2px 12px; margin-right:10px; font-size:15px; }
.edu-q p { color:#333a55; font-size:15px; line-height:2; margin-bottom:12px; }
.edu-q p b { color:var(--deep); }
.ctable-wrap { overflow-x:auto; margin-top:40px; border:3px solid var(--ink); border-radius:20px; box-shadow:8px 8px 0 rgba(151,66,146,.25); background:#fff; }
.ctable { width:100%; border-collapse:collapse; font-size:13px; min-width:760px; }
.ctable th, .ctable td { padding:13px 14px; text-align:center; border-bottom:2px solid #efeaf5; color:#333a55; line-height:1.6; }
.ctable thead th { background:var(--ink); color:#fff; font-size:13px; padding:16px 14px; }
.ctable thead th.us { background:linear-gradient(135deg,var(--pink),var(--violet)); position:relative; }
.ctable td.k { font-weight:900; color:var(--deep); background:#fbf7fd; text-align:left; white-space:nowrap; }
.ctable td.us { background:#fdf0f6; font-weight:700; color:var(--ink); }
.ctable tr:last-child td { border-bottom:none; }
.rec-pill { display:inline-block; background:var(--yellow); border:2px solid var(--ink); border-radius:999px; font-size:11px; font-weight:900; padding:2px 10px; margin-bottom:6px; }

@media (max-width:860px) {
  .nav { max-width:94vw; overflow-x:auto; }
  .nav a.nl { padding:8px 10px; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2) { border-right:none; }
  .svc-grid, .about-grid, .mv, .contact-card, .mprice { grid-template-columns:1fr; }
  .sticker { display:none; }
  .art .thumb { width:100px; }
}