/* ============ 星豆社官网 · 全局样式（品牌黄蓝太空风） ============ */
:root{
  --yellow:#FFC53D;
  --yellow-deep:#FFB300;
  --yellow-soft:#FFF3D6;
  --blue:#2E6FD8;
  --blue-deep:#1D4FA8;
  --blue-soft:#E8F1FE;
  --bg:#FFF9EE;
  --card:#FFFFFF;
  --ink:#2A3B55;
  --muted:#7A8299;
  --line:#F0E4C8;
  --shadow:0 10px 40px rgba(180,130,20,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ============ 导航 ============ */
.daohang{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 6vw;
  background:rgba(255,249,238,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.daohang .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:.5px}
.daohang .brand .brand-logo{
  width:38px;height:38px;border-radius:10px;object-fit:cover;
  box-shadow:0 4px 12px rgba(29,79,168,.25);
}
.daohang .brand small{font-weight:600;color:var(--blue);font-size:12px;letter-spacing:1px}
.daohang .nav{display:flex;gap:26px;font-size:15px}
.daohang .nav a{padding:4px 2px;color:var(--ink);position:relative;transition:.2s}
.daohang .nav a.active,.daohang .nav a:hover{color:var(--blue)}
.daohang .nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--yellow),var(--blue));
}

/* ============ 通用布局 ============ */
.wrap{max-width:1180px;margin:0 auto;padding:0 6vw}
.section{padding:70px 0}
.section h2{font-size:30px;font-weight:900;text-align:center;margin-bottom:8px;color:var(--blue-deep)}
.section .sub{text-align:center;color:var(--muted);margin-bottom:42px;font-size:15px}
.seal{
  display:inline-block;font-size:13px;color:#8a6a14;font-weight:700;letter-spacing:1px;
  background:var(--yellow-soft);border:1px solid #F2DFAE;border-radius:20px;
  padding:4px 16px;margin-bottom:14px;
}

/* ============ Hero ============ */
#home-body{
  background:
    radial-gradient(720px 360px at 12% 8%, rgba(255,197,61,.25), transparent 65%),
    radial-gradient(560px 320px at 94% 22%, rgba(46,111,216,.13), transparent 65%),
    radial-gradient(rgba(255,179,0,.16) 1.5px, transparent 1.6px) 0 0/26px 26px,
    var(--bg);
}
.box{
  display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:center;
  max-width:1140px;margin:0 auto;padding:56px 6vw 30px;
  position:relative;
}
/* 散布星星装饰 */
.sp{position:absolute;font-style:normal;pointer-events:none;user-select:none;opacity:.9}
.sp.s1{top:6%;left:38%;font-size:26px;color:var(--yellow)}
.sp.s2{top:16%;left:30%;font-size:15px;color:var(--blue)}
.sp.s3{top:60%;left:42%;font-size:20px;color:var(--yellow-deep)}
.sp.s4{bottom:8%;left:46%;font-size:14px;color:var(--blue)}
.sp.s5{top:8%;right:6%;font-size:30px;color:var(--yellow);opacity:.55}
.sp.s6{bottom:14%;right:12%;font-size:18px;color:var(--blue);opacity:.5}

/* 手机模型 */
.iphone-wrapper{display:grid;place-items:center}
.iphone{
  position:relative;width:300px;height:610px;border-radius:46px;
  background:linear-gradient(160deg,#2b2f3a,#0c0e14);
  padding:13px;box-shadow:0 30px 60px rgba(30,50,110,.28),inset 0 0 0 2px #3a3f4d;
}
.iphone::before{
  content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:120px;height:26px;background:#0c0e14;border-radius:0 0 18px 18px;z-index:6;
}
.screen{
  position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;
  background:#101321;display:flex;flex-direction:column;
}
.screen .shot{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top;
}
/* 漂浮标签 */
.iphone-wrapper{position:relative}
.chip{
  position:absolute;z-index:7;background:#fff;border-radius:16px;
  padding:9px 15px;font-size:13px;font-weight:800;color:var(--blue-deep);
  border:1px solid #FFF2D2;
  box-shadow:0 14px 30px rgba(29,79,168,.16),0 3px 8px rgba(180,130,20,.14);
  white-space:nowrap;
}
.chip.c1{top:66px;right:-30px;transform:rotate(3deg)}
.chip.c2{bottom:126px;left:-44px;transform:rotate(-3deg)}
.chip.c3{bottom:42px;right:-26px;transform:rotate(2deg)}
.sbar{display:flex;justify-content:space-between;align-items:center;padding:10px 18px 4px;font-size:12px;font-weight:700;color:#33415e}
.sbar .icons{display:flex;gap:4px;align-items:center}
.sbar .icons i{display:block;background:#33415e;border-radius:2px}
.sbar .icons .sig{width:15px;height:10px;clip-path:polygon(0 100%,20% 100%,20% 60%,40% 60%,40% 40%,60% 40%,60% 20%,80% 20%,80% 0,100% 0,100% 100%)}
.sbar .icons .wifi{width:13px;height:10px;clip-path:polygon(50% 0,100% 45%,75% 70%,50% 50%,25% 70%,0 45%)}
.sbar .icons .bat{width:20px;height:11px;border:1.5px solid #33415e;border-radius:3px;position:relative}
.sbar .icons .bat::after{content:"";position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:13px;background:#33415e;border-radius:1px}
.appbar{display:flex;align-items:center;gap:8px;padding:6px 14px 12px}
.appbar .logo{width:28px;height:28px;border-radius:8px;object-fit:cover}
.appbar .name{font-weight:800;font-size:16px;color:var(--blue-deep)}
.appbar .search{flex:1;background:#fff;border:1px solid var(--line);border-radius:16px;padding:5px 12px;font-size:12px;color:var(--muted)}
.banner{
  margin:0 14px 12px;border-radius:16px;padding:15px 16px;color:var(--blue-deep);
  background:linear-gradient(120deg,#FFE29A,var(--yellow) 70%);
  box-shadow:0 8px 20px rgba(255,179,0,.35);position:relative;overflow:hidden;
}
.banner::after{content:"★";position:absolute;right:12px;top:8px;font-size:34px;opacity:.3;color:#fff}
.banner b{font-size:15px;display:block;margin-bottom:4px}
.banner span{font-size:12px;opacity:.85;color:#4a5a7a}
.draw{
  margin:0 14px 12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;
  box-shadow:0 6px 16px rgba(180,130,20,.08);
}
.draw .t{font-size:13px;font-weight:800;display:flex;justify-content:space-between;align-items:center;color:var(--blue-deep)}
.draw .t em{font-style:normal;font-size:11px;color:var(--blue);background:var(--blue-soft);border-radius:10px;padding:1px 8px}
.cardback{
  height:96px;margin:10px 0;border-radius:12px;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.2) 0 8px,transparent 8px 16px),
    linear-gradient(135deg,var(--blue) 20%,var(--yellow));
  display:grid;place-items:center;color:#fff;font-weight:800;letter-spacing:3px;
  text-shadow:0 2px 6px rgba(0,0,0,.25);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
}
.draw .btns{display:flex;gap:8px}
.draw .btns button{flex:1;border:none;border-radius:20px;padding:7px 0;font-size:12px;font-weight:800;cursor:pointer}
.draw .btns .one{background:var(--yellow-soft);color:var(--blue-deep)}
.draw .btns .ten{background:linear-gradient(135deg,var(--blue),var(--blue-deep));color:#fff}
.goods{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 14px 14px}
.good{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.good .pic{height:58px;background:linear-gradient(135deg,#FFE9B8,#FFD66E)}
.good.a .pic{background:linear-gradient(135deg,#FFE29A,#FFC53D)}
.good.b .pic{background:linear-gradient(135deg,#CFE0FB,#A8C6F5)}
.good.c .pic{background:linear-gradient(135deg,#E4DBFA,#C9BDF2)}
.good .info{padding:6px 8px}
.good .info .n{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.good .info .p{font-size:12px;color:var(--blue);font-weight:800;margin-top:2px}
.good .info .p s{color:#bbb;font-weight:500;font-size:10px;margin-left:4px}
.tabbar{
  margin-top:auto;display:flex;background:#fff;border-top:1px solid var(--line);
  padding:7px 0 9px;
}
.tabbar .tb{flex:1;text-align:center;font-size:10px;color:var(--muted)}
.tabbar .tb .ic{font-size:16px;display:block;margin-bottom:1px}
.tabbar .tb.on{color:var(--blue);font-weight:700}

/* ============ 手机内 · 真实小程序首页还原 ============ */
/* 顶部：品牌 + 搜索 + 胶囊 */
.mp-nav{display:flex;align-items:center;gap:6px;padding:4px 10px 8px}
.mp-nav .brand{
  display:flex;align-items:center;gap:4px;flex:none;
  background:linear-gradient(135deg,var(--yellow),var(--yellow-deep));
  border-radius:14px 4px 14px 4px;padding:3px 8px 3px 4px;
  font-size:11px;font-weight:800;color:#5a3a00;
}
.mp-nav .brand img{width:16px;height:16px;border-radius:50%;object-fit:cover}
.mp-nav .search{
  flex:1;display:flex;align-items:center;gap:4px;justify-content:center;
  background:rgba(255,255,255,.9);border-radius:14px;padding:4px 8px;
  font-size:10.5px;color:#9aa3b8;
}
.mp-nav .capsule{
  flex:none;display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.85);border:1px solid #e8e2d2;border-radius:12px;
  padding:3px 8px;font-size:10px;color:#5a6478;line-height:1;
}
.mp-nav .capsule i{font-style:normal;opacity:.7}
/* 主视觉：丛林寻宝 Banner */
.mp-hero{
  margin:0 10px;border-radius:14px;overflow:hidden;position:relative;
  background:
    radial-gradient(circle at 12% 18%,#2f7a4f 0 14px,transparent 15px),
    radial-gradient(circle at 90% 12%,#256a43 0 17px,transparent 18px),
    radial-gradient(circle at 6% 78%,#2f7a4f 0 15px,transparent 16px),
    radial-gradient(circle at 94% 82%,#1e5d3a 0 18px,transparent 19px),
    radial-gradient(circle at 50% 0%,#3b8a5c 0 30px,transparent 31px),
    radial-gradient(circle at 20% 100%,#2a7048 0 22px,transparent 23px),
    linear-gradient(160deg,#3a7d54,#1c5236 70%);
  padding:14px 12px 12px;text-align:center;
}
.mp-hero .leaf{position:absolute;font-size:15px;opacity:.85}
.mp-hero .leaf.l1{top:8px;left:9px}
.mp-hero .leaf.l2{top:6px;right:11px;transform:scaleX(-1)}
.mp-hero .leaf.l3{bottom:9px;left:13px;transform:rotate(-30deg)}
.mp-hero .leaf.l4{bottom:7px;right:9px;transform:scaleX(-1) rotate(-25deg)}
.mp-hero .tt{
  font-size:13.5px;font-weight:900;line-height:1.45;letter-spacing:.5px;
  background:linear-gradient(180deg,#FFF3C4 20%,#F2C25B 60%,#D89A2E);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(90,50,0,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.mp-hero .tt .btm{display:block;font-size:15.5px;letter-spacing:1px}
.mp-map{
  margin:10px auto 0;width:86%;border-radius:8px;position:relative;
  background:
    radial-gradient(circle at 78% 26%,rgba(140,100,40,.4) 0 10px,transparent 11px),
    radial-gradient(circle at 20% 72%,rgba(140,100,40,.35) 0 8px,transparent 9px),
    repeating-linear-gradient(0deg,rgba(120,90,40,.06) 0 2px,transparent 2px 7px),
    linear-gradient(135deg,#E9D9AE,#D3BC85);
  border:2px solid #A98548;box-shadow:0 4px 10px rgba(0,0,0,.35),inset 0 0 18px rgba(120,88,30,.35);
  padding:12px 10px 10px;
}
.mp-map::before{
  content:"✧";position:absolute;top:6px;right:9px;font-size:11px;color:#8a6a30;
}
.mp-map::after{
  content:"";position:absolute;left:10px;bottom:8px;width:14px;height:14px;
  border:2px dashed rgba(138,106,48,.7);border-radius:50%;
}
.mp-box{
  width:64%;margin:0 auto;position:relative;
  background:linear-gradient(180deg,#8a6a44,#6d5232);
  border:1.5px solid #543e24;border-radius:4px;
  box-shadow:3px 4px 0 #4a3720,0 6px 12px rgba(0,0,0,.35);
  padding:9px 6px 10px;
}
.mp-box::before{
  content:"";position:absolute;top:-7px;left:-5px;right:-5px;height:10px;
  background:linear-gradient(180deg,#a3845c,#7d6039);border-radius:3px 3px 0 0;
}
.mp-box .tag{
  display:inline-block;font-size:8px;color:#f4e3b2;letter-spacing:1px;
  border:1px solid rgba(244,227,178,.6);border-radius:3px;padding:1px 5px;margin-bottom:3px;
}
.mp-box .nm{
  font-size:12px;font-weight:900;color:#F6E7BE;line-height:1.4;
  text-shadow:0 1px 2px rgba(0,0,0,.5);letter-spacing:1px;
}
.mp-box .nm i{display:block;font-style:normal;font-size:10px}
.mp-hero .dots{margin-top:9px;display:flex;gap:4px;justify-content:center}
.mp-hero .dots i{width:14px;height:3px;border-radius:2px;background:rgba(255,255,255,.4)}
.mp-hero .dots i.on{background:#fff}
/* 金刚位 */
.mp-quick{
  display:flex;margin:12px 10px 4px;background:#fff;border-radius:14px 14px 0 0;
  padding:12px 6px 10px;justify-content:space-around;
}
.mp-quick .q{text-align:center;font-size:10.5px;color:#44506a;flex:1}
.mp-quick .q .ico{
  width:36px;height:36px;margin:0 auto 4px;border-radius:50%;
  display:grid;place-items:center;font-size:17px;
  background:radial-gradient(circle at 32% 28%,#BFE0FF,#8FBFF5 70%);
  box-shadow:inset 0 -3px 6px rgba(29,79,168,.25);
}
.mp-quick .q:nth-child(2) .ico,
.mp-quick .q:nth-child(3) .ico,
.mp-quick .q:nth-child(4) .ico{
  background:radial-gradient(circle at 32% 28%,#FFE9A8,#FFD05E 70%);
  box-shadow:inset 0 -3px 6px rgba(200,120,0,.3);
}
/* 双活动入口 */
.mp-duo{display:flex;gap:7px;margin:0 10px;background:#fff;border-radius:0 0 14px 14px;padding:2px 8px 12px}
.mp-duo .d{
  flex:1;border-radius:10px;padding:9px 10px 10px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,#FFE9A0,#FFD05E);
  color:#6b4a00;
}
.mp-duo .d .t{font-size:12.5px;font-weight:900;letter-spacing:.5px}
.mp-duo .d .s{font-size:9px;opacity:.75;margin-top:2px}
.mp-duo .d .em{position:absolute;right:5px;bottom:3px;font-size:22px;opacity:.9}
/* 底部五 Tab（中间凸起抽卡机） */
.mp-tab{
  margin-top:auto;display:flex;align-items:flex-end;background:#fff;
  border-top:1px solid var(--line);padding:5px 0 7px;position:relative;
}
.mp-tab .tb{flex:1;text-align:center;font-size:9.5px;color:#9aa3b8;line-height:1.3}
.mp-tab .tb .ic{font-size:15px;display:block;margin-bottom:1px}
.mp-tab .tb.on{color:#2A3B55;font-weight:800}
.mp-tab .tb.mid{position:relative;margin-top:-20px}
.mp-tab .tb.mid .ball{
  width:42px;height:42px;margin:0 auto 2px;border-radius:50%;
  background:linear-gradient(160deg,#5B8FE8,var(--blue-deep));
  display:grid;place-items:center;font-size:19px;color:#fff;
  border:3px solid #fff;box-shadow:0 6px 14px rgba(29,79,168,.4);
}

/* 介绍区 */
.description .tit-row{display:flex;align-items:center;gap:20px;margin-bottom:16px}
.description .logo{
  width:84px;height:84px;border-radius:22px;object-fit:cover;flex-shrink:0;
  box-shadow:0 14px 30px rgba(29,79,168,.28);
}
.description .tit{font-size:34px;font-weight:900;line-height:1.35;margin-bottom:14px;color:var(--blue-deep)}
.description .tit .hl{
  color:#5a3a00;background:linear-gradient(135deg,var(--yellow),var(--yellow-deep));
  padding:0 12px;border-radius:12px;box-shadow:0 6px 16px rgba(255,179,0,.4);
}
.description .lead{font-size:15px;color:#4a5a7a;margin-bottom:8px}
.description .lead p{margin-bottom:10px}
.description .lead b{color:var(--blue-deep)}
/* 卖点标签（好评卡同款黄底描边） */
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.tags span{
  background:#fff;border:1.5px solid var(--yellow);border-radius:22px;
  padding:8px 18px;font-size:14px;font-weight:700;color:var(--blue-deep);
  box-shadow:0 6px 16px rgba(255,179,0,.16);
}

/* 新人福利 */
.coupons{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}
.coupon{
  position:relative;flex:1;min-width:120px;background:#fff;border:1.5px dashed var(--blue);
  border-radius:12px;padding:12px 12px;color:var(--blue-deep);text-align:center;overflow:hidden;
}
.coupon::before,.coupon::after{content:"";position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--bg);transform:translateY(-50%)}
.coupon::before{left:-7px}.coupon::after{right:-7px}
.coupon .v{font-size:20px;font-weight:800}
.coupon .v b{font-size:13px}
.coupon .l{font-size:12px;color:var(--muted);margin-top:2px}

/* CTA */
.cta{display:flex;gap:18px;align-items:flex-start;margin-top:22px;flex-wrap:wrap}
.qr{
  width:108px;height:108px;border-radius:14px;background:#fff;border:1px solid var(--line);
  padding:7px;box-shadow:var(--shadow);
}
.qr svg{width:100%;height:100%}
.qr-cap{font-size:12px;color:var(--muted)}
.qr-cap b{color:var(--ink);font-size:13px;display:block;margin-bottom:2px}
.btn{
  display:inline-block;border-radius:26px;padding:12px 26px;font-weight:800;font-size:15px;cursor:pointer;transition:.2s;
  border:1px solid var(--blue);
}
.btn.primary{background:linear-gradient(135deg,var(--blue),var(--blue-deep));color:#fff;box-shadow:0 10px 24px rgba(46,111,216,.3)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.ghost{background:#fff;color:var(--blue-deep)}
.btn.ghost:hover{background:var(--blue-soft)}

/* ============ 核心玩法 ============ */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feat{
  background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px 22px;
  box-shadow:var(--shadow);transition:.25s;position:relative;overflow:hidden;
}
.feat::after{
  content:"★";position:absolute;right:-8px;bottom:-16px;font-size:64px;
  color:var(--yellow);opacity:.12;transition:.25s;
}
.feat:hover{transform:translateY(-6px);border-color:var(--yellow);box-shadow:0 18px 44px rgba(180,130,20,.18)}
.feat .ic{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:26px;
  background:linear-gradient(135deg,#FFE9A8,#FFD05E);
  box-shadow:inset 0 -4px 8px rgba(200,120,0,.25);
  margin-bottom:14px;
}
.feat h3{font-size:17px;margin-bottom:6px;color:var(--blue-deep)}
.feat p{font-size:13.5px;color:var(--muted)}

/* ============ 好评卡展示 ============ */
.cards-duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cards-duo figure{
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow);
}
.cards-duo img{width:100%;display:block}
.cards-duo figcaption{
  text-align:center;padding:12px;font-size:14px;font-weight:700;color:var(--blue-deep);
  background:var(--yellow-soft);
}

/* ============ 保障 ============ */
.guarantee{
  background:
    radial-gradient(rgba(255,255,255,.6) 2px, transparent 2.6px) 0 0/110px 110px,
    linear-gradient(180deg,#FFF3D0,#FFE7A6);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.guards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.guard{
  text-align:center;padding:18px 10px;background:rgba(255,255,255,.75);
  border-radius:20px;border:1px solid rgba(255,255,255,.9);
  box-shadow:0 10px 26px rgba(180,130,20,.12);
}
.guard .num{font-size:44px;line-height:1}
.feat .ic svg{width:40px;height:40px;display:block}
.guard .num svg{width:46px;height:46px;display:block;margin:0 auto}
.guard h4{font-size:16px;margin:10px 0 4px;color:var(--blue-deep)}
.guard p{font-size:13.5px;color:#7a6a45}

/* ============ 关于页 ============ */
.about-hero{text-align:center;padding:70px 6vw 30px}
.about-hero h1{font-size:34px;font-weight:800;margin-bottom:12px;color:var(--blue-deep)}
.about-hero p{color:var(--muted);max-width:680px;margin:0 auto}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;margin-top:30px}
.about-grid .txt h3{font-size:20px;margin:18px 0 8px;color:var(--blue)}
.about-grid .txt p{color:#4a5a7a;font-size:15px;margin-bottom:8px}
.about-grid .visual{
  background:
    radial-gradient(circle at 80% 15%,rgba(255,255,255,.35) 0 6px,transparent 7px),
    radial-gradient(circle at 15% 80%,rgba(255,255,255,.3) 0 5px,transparent 6px),
    linear-gradient(135deg,var(--blue-deep),var(--blue));
  border-radius:24px;padding:40px;color:#fff;text-align:center;box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.about-grid .visual::before{content:"★";position:absolute;top:14px;right:20px;font-size:40px;color:var(--yellow);opacity:.9}
.about-grid .visual::after{content:"✦";position:absolute;bottom:18px;left:22px;font-size:24px;color:var(--yellow);opacity:.7}
.about-grid .visual img{width:110px;height:110px;border-radius:24px;margin:0 auto 14px;object-fit:cover}
.about-grid .visual .big{font-size:40px;font-weight:800;letter-spacing:2px}
.about-grid .visual .small{opacity:.92;margin-top:6px;font-size:15px;color:#FFE29A}
.about-grid .visual .tags{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.about-grid .visual .tags span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:5px 14px;font-size:13px}

/* ============ 协议页 ============ */
.legal{max-width:820px;margin:0 auto;padding:60px 6vw 80px}
.legal h1{font-size:26px;margin-bottom:6px;color:var(--blue-deep)}
.legal .meta{color:var(--muted);font-size:13px;margin-bottom:26px}
.legal h2{font-size:18px;margin:26px 0 8px;color:var(--blue)}
.legal p,.legal li{font-size:14.5px;color:#44506a;margin-bottom:8px}
.legal ol{padding-left:22px}
.note{background:var(--yellow-soft);border:1px solid #F2DFAE;border-radius:12px;padding:14px 16px;color:#8a6a14;font-size:13.5px;margin:18px 0}

/* ============ 页脚 ============ */
.footer{
  text-align:center;padding:26px 6vw;color:var(--muted);font-size:13px;
  background:#fff;border-top:1px solid var(--line);line-height:1.9;
}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--blue)}

/* ============ 响应式 ============ */
@media(max-width:880px){
  .box{grid-template-columns:1fr;gap:28px;padding-top:34px;padding-bottom:24px}
  .iphone-wrapper{order:-1;margin:0 auto}
  .chip.c1{right:2px}
  .chip.c2{left:2px}
  .chip.c3{right:6px}
  .features{grid-template-columns:repeat(2,1fr)}
  .guards{grid-template-columns:repeat(3,1fr);gap:12px}
  .about-grid{grid-template-columns:1fr}
  .description .tags{display:none}
  .description .tit{font-size:25px}
  .daohang .nav{gap:16px;font-size:14px}
  .section{padding:46px 0}
}
@media(max-width:520px){
  .features{grid-template-columns:repeat(2,1fr)}
  .guards{grid-template-columns:repeat(3,1fr);gap:8px}
  .guards .guard{padding:14px 4px}
  .guards .num{font-size:34px}
  .feat .ic svg{width:34px;height:34px}
  .guard .num svg{width:36px;height:36px}
  .guards h4{font-size:14px;margin:6px 0 3px}
  .guards p{font-size:11.5px}
  .feat{padding:18px 12px}
  .feat .ic{width:44px;height:44px;font-size:22px}
  .feat h3{font-size:15px}
  .feat p{font-size:12px}
  .section{padding:38px 0}
  .section h2{font-size:22px}
  .section .sub{font-size:13.5px;margin-bottom:26px}
  .box{gap:22px;padding-top:26px}
  .iphone{width:234px;height:492px}
  .iphone::before{width:96px;height:22px}
  .chip{padding:7px 11px;font-size:11.5px}
  .chip.c1{top:48px}
  .chip.c2{bottom:96px;left:-2px}
  .chip.c3{bottom:30px}
  .description .tit-row{gap:12px;margin-bottom:12px}
  .description .logo{width:56px;height:56px;border-radius:16px}
  .description .tit{font-size:22px}
  .description .lead{font-size:13.5px}
  .tags{gap:7px;margin-top:16px}
  .tags span{padding:6px 13px;font-size:12.5px}
  .daohang{padding:8px 5vw}
  .daohang .brand{font-size:16px}
  .daohang .brand .brand-logo{width:32px;height:32px}
  .daohang .nav{gap:12px;font-size:13px}
  .daohang .brand small{display:none}
  .footer{font-size:12px;padding:20px 5vw}
}