/* ==========================================================
   美乐养老管理系统 · 官网样式
   设计规范：site/DESIGN.md
   基底：Airbnb 温暖 hospitality × Stripe 信息层次 · 浅橙主题
   ========================================================== */

/* ---------- 自托管数字字体 ----------
   Manrope 500/600（现代几何无衬线）。选定它而不是衬线体的原因：
   试过 Bodoni Moda（Didone 高对比度），大字号确实优雅，
   但小字号（统计卡片 19~23px、表格 13~16px）的发丝横画撑不住，
   在浅橙底上发虚、看不清。Manrope 笔画粗细均匀、字腔开阔，
   小字号清晰，大字号也够稳重。

   两档：500 用于小字，600 用于大字（价格、Hero 数字）。
   都已子集化为纯数字+符号（各 17KB），中文自动回退系统字体。

   字体文件自托管，不依赖 Google Fonts CDN（国内 fonts.googleapis.com 会被墙）。
   font-display:swap —— 字体没加载完时先用系统字体显示，不阻塞页面。 */
@font-face{
  font-family:"Manrope Number";
  src:url("../fonts/manrope-500.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
  /* 只让这些字符用 Manrope，中文与全角标点走系统字体 */
  unicode-range:U+0020-007E,U+00A5,U+00B0,U+00B7,U+00D7,U+00F7,U+2013,U+2014,
                U+2030,U+2212,U+00A3,U+20AC;
}
@font-face{
  font-family:"Manrope Number Bold";
  src:url("../fonts/manrope-600.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0020-007E,U+00A5,U+00B0,U+00B7,U+00D7,U+00F7,U+2013,U+2014,
                U+2030,U+2212,U+00A3,U+20AC;
}

/* ---------- Tokens ---------- */
:root{
  /* 主色 · 浅橙 */
  --c-primary-50:#FFF8F2;
  --c-primary-100:#FFEFE0;
  --c-primary-200:#FEDFC7;
  --c-primary-300:#FBC79E;
  --c-primary-400:#F8B885;   /* 300 与 500 之间，用于渐变中段 */
  --c-primary:#F5A26B;
  --c-primary-500:#EE8A45;
  --c-primary-600:#E0722C;
  --c-primary-700:#C25A1B;

  /* 中性 · 暖偏移 */
  --c-ink-900:#2A1E15;
  --c-ink-700:#5A463A;
  --c-ink-500:#8B7466;
  --c-ink-300:#C9B6A8;
  --c-ink-200:#E8DCD2;
  --c-ink-100:#F4EDE7;
  --c-ink-50:#FDFAF7;
  --c-white:#fff;

  /* 语义色 */
  --c-success:#4B9E6B;
  --c-warning:#D9902F;
  --c-danger:#D2603F;
  --c-info:#5B84B1;

  /* 阴影 · 带暖棕偏移 */
  --sh-xs:0 1px 2px rgba(122,74,40,.06);
  --sh-sm:0 2px 8px rgba(122,74,40,.07);
  --sh-md:0 8px 24px rgba(122,74,40,.09), 0 2px 6px rgba(122,74,40,.05);
  --sh-lg:0 18px 48px rgba(122,74,40,.12), 0 4px 12px rgba(122,74,40,.06);
  --sh-xl:0 32px 80px rgba(122,74,40,.16), 0 8px 20px rgba(122,74,40,.07);
  --sh-primary:0 10px 28px rgba(224,114,44,.32);

  /* 圆角 */
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  /* 字体 */
  --font-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei","HarmonyOS Sans SC",
             -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-serif:"Noto Serif SC","Songti SC","Source Han Serif SC",Georgia,serif;
  /* 数字字体：Manrope（现代几何无衬线，笔画均匀、小字号清晰）
     --font-num       大字（价格 47px、Hero 37px）用 600 字重
     --font-num-sm    小字（表格 13~23px）用 500 字重
     末尾 DIN / Segoe 是系统字体兜底 —— 字体文件没加载成功时仍能显示得体。 */
  --font-num:"Manrope Number Bold","Manrope Number","DIN Alternate","Bahnschrift",
             "Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-num-sm:"Manrope Number","Manrope Number Bold","DIN Alternate","Bahnschrift",
             "Segoe UI","Helvetica Neue",Arial,sans-serif;

  /* 动效 */
  --ease:cubic-bezier(.22,1,.36,1);
  --t:.3s var(--ease);

  --nav-h:74px;
  /* 头部固定层总高度 = 公告条 + 导航。
     公告条默认 hidden（display:none），高度为 0，所以默认就是 nav-h；
     公告条显示时由 JS 读取实际高度写入 --notice-h。 */
  --notice-h:0px;
  --head-h:calc(var(--notice-h) + var(--nav-h));
}

/* ---------- 页脚专用字体：思源黑体 Light(300) ----------
   为什么单独换字体：全站 --font-sans 首选 PingFang SC / 微软雅黑，
   这两款笔画本身偏厚，13px 排在 #241A12 深底上会显粗重。
   思源黑体 ExtraLight 笔画明显更细，深底浅字对比下更精致。

   family 名故意取「MeileFooterSC」而不是「Noto Sans SC」：
   若与系统字体同名，装了思源/Noto 的机器会命中系统本地字体、
   没装的机器才用 web font —— 同一网站在不同电脑上粗细会不一致。
   取独有名字后，所有电脑一律走自托管字体，渲染完全统一。
   品牌名同理，用MeileFooterSerif（思源宋体 Light）。

   只用于 .footer，不影响正文与导航。
   片0 覆盖页脚全部固定文案（首屏必需，零回退）；
   片1 是常用字兜底，后台改文案命中未收录的字时才按需下载。
   ⚠ 后台若填了罕见字（GB2312 二级字），会回退系统字体 —— 可接受。
   字符集由 tools/build-footfont.py 从页面源码自动提取，勿手改。 */
@font-face{font-family:"MeileFooterSC";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/FootSC-0.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00A1-00AC,U+00AE-00BF,U+00D7,U+00F7,U+2010-2016,U+2018-2022,U+2026-2027,U+2030,U+2039-203A,U+20AC,U+2116,U+2121-2122,U+2190-2195,U+2460-2469,U+25A0-25A1,U+25A3-25A5,U+25AA-25AB,U+25B2-25B3,U+25BC-25BD,U+25C6-25C7,U+25C9,U+25CB,U+25CE-25CF,U+25F7,U+2605-2606,U+260E-260F,U+266A-266B,U+2706,U+2709,U+270D,U+3000-3003,U+3008-3011,U+3014-3017,U+301D-301E,U+4E00,U+4E03,U+4E07,U+4E09-4E0B,U+4E0E,U+4E13,U+4E18,U+4E1A,U+4E1C,U+4E2D,U+4E32,U+4E4C,U+4E50,U+4E5D,U+4E61,U+4E70,U+4E86,U+4E8B-4E8C,U+4E8E,U+4E91,U+4E94,U+4EA4,U+4EAB-4EAC,U+4EB2,U+4EBA,U+4EBF,U+4ED8,U+4EEC,U+4EF7,U+4EFB,U+4F01,U+4F0D,U+4F1A,U+4F20,U+4F30,U+4F4D,U+4F4F,U+4F53,U+4F5C,U+4FDD,U+4FE1,U+5165,U+5168,U+516B-516D,U+5170,U+5173,U+517B,U+5229,U+5236,U+52A0-52A1,U+52A8-52A9,U+5316-5317,U+533A,U+5341,U+5343,U+534A,U+534F,U+5355,U+5357,U+539F,U+53BF,U+53C1,U+53CB,U+53E3,U+53F0,U+53F7-53F8,U+5408-5409,U+540C,U+5468,U+54A8,U+54C8,U+5546,U+56DB,U+56DE,U+56E2,U+56FD,U+5728,U+5740,U+574A,U+57CE,U+5821,U+58C1,U+58F9,U+5907,U+590D,U+590F,U+591A,U+5929-592A,U+5931,U+597D,U+5B81,U+5B88-5B89,U+5B97-5B98,U+5BA2,U+5BA4,U+5BB6,U+5BBF,U+5BC6,U+5C01,U+5C14,U+5C42,U+5C6F,U+5C71,U+5C97,U+5CAD,U+5CE1,U+5DDD-5DDE,U+5DE5,U+5E02,U+5E2E,U+5E38,U+5E62,U+5E73-5E74,U+5E78,U+5E7F,U+5E84,U+5E86,U+5E8A,U+5E97,U+5EB7,U+5EFA,U+5F00,U+5FAE,U+5FBD,U+5FC3,U+5FD7,U+5FEB,U+606F,U+60C5,U+6210-6211,U+6240,U+624B,U+626B,U+62A4,U+62C9,U+62FE,U+634C,U+6392,U+63A5,U+63D0,U+652F,U+6599,U+65B0,U+65B9,U+65E5,U+6606,U+660C,U+660E,U+6625,U+665A,U+667A,U+66F4,U+6709,U+670D,U+6728,U+672C,U+673A,U+6743,U+6751,U+6761,U+676D,U+6784,U+6797,U+67D2,U+67E5,U+680B,U+683C,U+6842,U+6848,U+6863,U+697C,U+6B63,U+6B66,U+6C34,U+6C49,U+6C5F,U+6C88,U+6C99,U+6CAA,U+6CB3,U+6CE8,U+6D1B,U+6D25,U+6D3B,U+6D41,U+6D4E,U+6D59,U+6D77,U+6DA7,U+6E2F,U+6E56,U+6E58,U+6E7E,U+6EE8,U+6F14,U+6F2F,U+6FB3,U+6FEE,U+700D,U+7126,U+7167,U+7248,U+7396,U+73ED,U+7406,U+743C,U+7518,U+751F,U+7528,U+7535,U+7559,U+7586,U+767E,U+7684,U+7696,U+76DF,U+7701,U+770B,U+771F,U+77F3,U+7801,U+793A,U+798F,U+7A0B,U+7A7F,U+7B49,U+7B7E,U+7BA1,U+7BB1,U+7C7B,U+7C98,U+7CA4,U+7CFB,U+7EA6-7EA7,U+7EBF,U+7EC3-7EC4,U+7EDF,U+7F16,U+7F34,U+7F51,U+7F72,U+7F8E,U+8001,U+8054,U+8083,U+8086,U+80A5,U+80FD,U+81EA,U+82CF,U+8428,U+85CF,U+8857,U+88C5,U+897F,U+89C1,U+89E3,U+8BAD-8BAE,U+8BB8,U+8BBF,U+8BC4,U+8BD5,U+8BDD,U+8BE2,U+8BE6,U+8C6B,U+8D26,U+8D2D,U+8D2F-8D30,U+8D34-8D35,U+8D39,U+8D63,U+8DEF,U+8F7D,U+8F96,U+8FBD,U+8FD4,U+9000,U+9053,U+90AE,U+90D1,U+90FD,U+9102,U+91CD,U+91D1,U+94F6,U+94FE,U+9547,U+957F,U+95E8,U+95EE,U+95FD,U+961F,U+9633,U+9646,U+9655,U+9662,U+9669,U+96F6,U+9752,U+9875-9876,U+987E,U+9884,U+9890,U+9898,U+9910,U+996E,U+9996,U+9999,U+9A6C,U+9A7B,U+9A8C,U+9C81,U+9E64,U+9ED1,U+9F50,U+9F99,U+FF01-FF5F}
@font-face{font-family:"MeileFooterSC";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/FootSC-1.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00A1-00AC,U+00AE-00BF,U+00D7,U+00F7,U+2010-2016,U+2018-2022,U+2026-2027,U+2030,U+2039-203A,U+20AC,U+2116,U+2121-2122,U+2190-2195,U+2460-2469,U+25A0-25A1,U+25A3-25A5,U+25AA-25AB,U+25B2-25B3,U+25BC-25BD,U+25C6-25C7,U+25C9,U+25CB,U+25CE-25CF,U+25F7,U+2605-2606,U+260E-260F,U+266A-266B,U+2706,U+2709,U+270D,U+3000-3003,U+3008-3011,U+3014-3017,U+301D-301E,U+4E01,U+4E0D,U+4E11,U+4E19,U+4E1B,U+4E22,U+4E2A,U+4E30,U+4E39,U+4E4E-4E4F,U+4E56,U+4E58,U+4E92,U+4EA5,U+4EA7-4EA8,U+4EC7,U+4ECE,U+4ED3,U+4EE3,U+4EFD,U+4EFF,U+4F0F-4F10,U+4F2F,U+4F34,U+4F43,U+4F46,U+4F4E,U+4F55,U+4F5B,U+4F70,U+4F88,U+4F97,U+4F9B,U+4FA7,U+4FAF,U+4FBF,U+4FC3-4FC4,U+4FD8,U+4FEF,U+4FFA,U+500D,U+5012,U+5019,U+5021,U+507F,U+5085,U+508D,U+50A3,U+50A8,U+50AC,U+50B2,U+513F,U+5145,U+5149,U+5151,U+515A,U+515C,U+5171,U+5175,U+5178,U+5188,U+518C,U+51A0,U+51AC,U+51AF-51B0,U+51B2,U+51BB,U+51CB,U+51D1,U+51E1,U+51E4,U+51F0,U+51F3,U+51F9-51FA,U+51FD,U+5200-5201,U+5206,U+5212,U+521A-521B,U+521D,U+522B,U+522E,U+5230,U+523A,U+523D,U+5241,U+5250,U+5265,U+526F,U+5272,U+529E-529F,U+52C3,U+52FE,U+5305-5306,U+5319,U+532A,U+5349,U+534E,U+5351,U+535A,U+535C,U+535E,U+5382,U+5384,U+5395,U+539A,U+53A8,U+53C2,U+53C9,U+53CD,U+53D1,U+53D8,U+53E0,U+53E4,U+53ED-53EE,U+53FC,U+5403-5404,U+540A,U+540E,U+5420,U+5426-5429,U+542B,U+5435,U+5439,U+543C,U+5446,U+5448,U+544A,U+5475,U+547C,U+548C,U+5490,U+5495,U+54C0,U+54C4,U+54C6,U+54CE,U+54D7,U+54E5,U+54FA,U+54FC,U+5507,U+5509,U+5524,U+552C,U+5531,U+554A,U+5561,U+5589-558A,U+5598,U+559D,U+560E,U+5632,U+563F,U+5676,U+568E,U+56E4,U+56F1,U+56FA,U+572D,U+5730,U+573A,U+574F,U+575D,U+575F,U+5782,U+579B,U+57A2,U+57AB,U+57C2-57C3,U+57E0,U+5806,U+5815,U+5824,U+5835,U+58A9,U+58D5,U+58F6,U+5904,U+591F,U+5927,U+592B,U+592F,U+593A,U+5949,U+594B,U+5954,U+5960,U+5965,U+5987,U+5992,U+59A8,U+59D1,U+5A25,U+5AE1,U+5B58,U+5B64,U+5B69,U+5B75,U+5B8F,U+5B9A,U+5B9D,U+5BA0,U+5BA6,U+5BAB,U+5BB3,U+5BBE,U+5BCC,U+5BD2,U+5BDF,U+5BE1,U+5BF8-5BF9,U+5BFC,U+5C18,U+5C1D,U+5C3A,U+5C94,U+5C9B,U+5CB8,U+5CE8,U+5CF0,U+5D07,U+5D14,U+5D29,U+5DE2,U+5DE9,U+5DEE,U+5DF4,U+5E01,U+5E03,U+5E06,U+5E1B,U+5E1D,U+5E26,U+5E45,U+5E4C,U+5E72,U+5E76,U+5E7B,U+5E87,U+5E95,U+5E9A,U+5E9C,U+5E9F,U+5EA6,U+5F0A,U+5F13,U+5F17-5F18,U+5F1B,U+5F1F,U+5F27,U+5F39,U+5F52-5F53,U+5F69-5F6A,U+5F6C,U+5F7B-5F7C,U+5F85,U+5F88,U+5F8A,U+5F97,U+5FB7,U+5FC5,U+5FF1,U+5FFD,U+5FFF-6000,U+6016,U+6020,U+602A,U+604D,U+6052,U+6062,U+6068-6069,U+606B,U+606D,U+6076,U+608D,U+6094,U+60A3,U+60B2,U+60BC,U+60E0,U+60E6,U+60E8-60E9,U+60EB,U+60ED-60F0,U+60F6,U+6101,U+611F,U+6124,U+6148,U+614C,U+6167,U+618B,U+61A8,U+61BE,U+61C2,U+61CA,U+6208,U+6233-6234,U+6237,U+623F,U+6241,U+624D,U+6252-6253,U+626E-626F,U+6273,U+6276,U+627C,U+627F,U+6284,U+628A,U+6296,U+629A,U+62A5,U+62B1,U+62B5,U+62BD,U+62C2,U+62C5-62C6,U+62CC,U+62D0,U+62D4,U+62DC,U+62E8,U+62F1,U+6301-6302,U+6309,U+6321,U+6325,U+6328,U+632B,U+634D,U+6355,U+6362-6363,U+6376,U+6382,U+6387,U+6389,U+63A3,U+63AA,U+63B8,U+63BA,U+63D2,U+63E3,U+6400-6401,U+640F-6410,U+6413,U+641E,U+642C-642D,U+643D,U+6446,U+6448,U+6467,U+6491,U+64A4,U+64AD-64AE,U+64BC,U+64CD,U+64E6,U+6539,U+653B,U+653E,U+6545,U+654C,U+6556,U+655D-655E,U+6562,U+6566,U+6577,U+658C,U+6591,U+6597,U+65A5,U+65A7,U+65AD,U+65E6,U+65F1,U+6602,U+6643,U+6666,U+6668,U+6697,U+66B4,U+66F9,U+671D,U+6735,U+6746,U+6750,U+675C,U+6760,U+676F,U+677F,U+679C,U+67AB,U+67C4,U+67CF,U+67D1,U+67DC,U+67F4,U+6807,U+6838-6839,U+6853,U+6886,U+6897,U+68CD,U+68D2,U+68FA,U+693D,U+693F,U+695A,U+6982,U+699C,U+69D0,U+69FD,U+6A0A,U+6A2A,U+6A59,U+6A71,U+6B21-6B22,U+6B4C,U+6B64-6B65,U+6B79,U+6B86,U+6B8B,U+6BB5,U+6BBF,U+6BC1,U+6BD2,U+6BD4-6BD6,U+6BD9,U+6BEB,U+6C1B,U+6C1F,U+6C26,U+6C28,U+6C2E,U+6C47,U+6C57,U+6C5E,U+6C60,U+6C7E,U+6C89,U+6C9F,U+6CA7,U+6CB8,U+6CBD,U+6CCA,U+6CD5,U+6CDB,U+6CE2,U+6CF5,U+6D1E,U+6D2A,U+6D31,U+6D4B,U+6D69,U+6D6E,U+6DA3-6DA4,U+6DAA,U+6DB5,U+6DB8,U+6DC0,U+6DE1,U+6DEC,U+6DEE,U+6DF3,U+6E21,U+6E24,U+6E89,U+6EC1,U+6EC7,U+6ED1,U+6EDA,U+6EF4,U+6F6E,U+6F84,U+6F88,U+6FD2,U+704C,U+706F-7070,U+707F,U+708A,U+7092,U+70B3,U+70B9,U+70BD,U+70D8,U+70E6,U+70E9,U+70FD,U+710A,U+7115,U+7119-711A,U+714C,U+71AC,U+7206,U+7231,U+7236,U+7238-7239,U+728A,U+72AF,U+72C4,U+72C8,U+72D0,U+72D7,U+72E0,U+72EC,U+7316,U+731C,U+7334,U+733E,U+73AF,U+73BB,U+73D0,U+745A,U+7470,U+74DC,U+74E3,U+74F7,U+752B,U+752D,U+7538,U+753B,U+7545,U+756A,U+7574,U+7599,U+75A4,U+75AE-75AF,U+75B5,U+75C5,U+75D5,U+75D8,U+75EA,U+75F4,U+75F9,U+7601,U+7629-762A,U+764C,U+7678,U+767B,U+767D,U+7687,U+768B,U+7691,U+76CE,U+76D2,U+76D6-76D7,U+76EF,U+76FE,U+7763,U+776C,U+7779,U+7785,U+77AA,U+77D7,U+77ED-77EE,U+77FE,U+7840,U+7845,U+7889,U+788D,U+7891,U+7898,U+789F,U+78A7,U+78B4,U+78C1,U+78C5,U+78CB,U+78FA,U+7977,U+79BE,U+79C6,U+79C9,U+79E4,U+79F0,U+79FD,U+7A17,U+7A20,U+7A3B,U+7A3F,U+7A97,U+7A9C,U+7AEF,U+7AFF,U+7B06,U+7B14,U+7B1B,U+7B26,U+7B28,U+7B2C,U+7B4F,U+7B54,U+7B56,U+7B79,U+7B8D,U+7B94,U+7BD9,U+7BE1,U+7C07,U+7C27,U+7C3F,U+7C89,U+7C97,U+7CAA,U+7CB9,U+7CCA,U+7CD5,U+7CD9,U+7E41,U+7EA2,U+7EAF,U+7EB2,U+7EB7,U+7EBA,U+7ECA,U+7ED1,U+7ED9,U+7EF0,U+7EF7-7EF8,U+7F0E,U+7F13-7F14,U+7F1A,U+7F1D,U+7F20,U+7F38,U+7F50,U+7F55,U+7F5A,U+7F62,U+7F94,U+7FB9,U+7FC5,U+7FDF-7FE0,U+7FF0-7FF1,U+7FFB,U+800C,U+8015,U+8017,U+8019,U+8033,U+803B,U+803D,U+803F,U+806A,U+809A-809B,U+809D,U+80A0-80A1,U+80A4,U+80AA,U+80AE,U+80BA,U+80C6,U+80CC,U+80DE,U+80E1,U+80F3,U+80FA,U+8106,U+8116,U+812F,U+8150-8151,U+8179,U+8180,U+818A,U+818F,U+8198,U+81C2,U+81E3,U+81ED,U+822A,U+822C,U+8231,U+8235-8236,U+8239,U+827E,U+82AC-82AD,U+82B1,U+82B3,U+82CD,U+82DE-82DF,U+82EF,U+8303,U+8328,U+832C,U+8336,U+8349,U+8352,U+8361,U+8377,U+83C7,U+83CF,U+83DC,U+83E0,U+83F2,U+845B,U+8463,U+846B,U+8471,U+8482,U+84D6,U+8521,U+853C-853D,U+8584,U+85E9,U+864E,U+866B,U+8679,U+868C,U+8695,U+86CA-86CB,U+86D4,U+86E4,U+86FE,U+8702,U+8749,U+8757,U+8774,U+8776,U+8822,U+8861,U+8865,U+8868,U+886C,U+8884,U+888B,U+88AB,U+88B1,U+88C1,U+88F9,U+8902,U+8910,U+8912,U+8986,U+89C2,U+89C4,U+89E6,U+8BA2-8BA3,U+8BB3,U+8BB9,U+8BBD,U+8BCD,U+8BDA,U+8BDE,U+8BE1,U+8BE5,U+8BE7,U+8BF2,U+8BFB,U+8BFD,U+8C03,U+8C0D-8C0E,U+8C17,U+8C24,U+8C37,U+8C46,U+8C62,U+8C6A,U+8C79-8C7A,U+8C89,U+8D1D,U+8D1F,U+8D21-8D22,U+8D25,U+8D29,U+8D2C,U+8D37,U+8D3A,U+8D3F,U+8D4B-8D4C,U+8D50,U+8D64,U+8D6B,U+8D74,U+8D76,U+8D81,U+8D85,U+8DCB-8DCC,U+8DDF,U+8DEA,U+8DFA,U+8E0C,U+8E29,U+8E48,U+8E66,U+8E6C-8E6D,U+8E72,U+8E7F,U+8E87,U+8EAC,U+8EB2,U+8F66,U+8F68,U+8F70,U+8F85,U+8F88-8F8A,U+8F90,U+8F9C,U+8F9E-8F9F,U+8FA8-8FA9,U+8FAB,U+8FB0,U+8FB9,U+8FBE,U+8FC7,U+8FD8,U+8FDF,U+8FEA,U+8FED,U+8FF8,U+9012,U+9017,U+901B,U+901E,U+9022,U+902E,U+903C,U+9041,U+904D,U+904F,U+907F,U+9093,U+90A6,U+90AF,U+90DD,U+90E8,U+90ED,U+90F4,U+90F8,U+9119,U+915A,U+9163,U+916C,U+9187,U+918B,U+91C7,U+91DC,U+9489,U+9492-9493,U+9499,U+949D-949E,U+94A1-94A2,U+94A9,U+94B5,U+94C2,U+94EC,U+94F2,U+9504-9505,U+950B,U+9519,U+9524,U+952D,U+953B,U+9540,U+9550-9551,U+95ED,U+95EF,U+95FA,U+9600-9602,U+9610,U+961C,U+9632,U+963F,U+9644,U+9648,U+965B,U+9661,U+9664,U+9694,U+9698,U+96C7,U+96CC,U+96CF,U+96D5,U+96F9,U+9738,U+975B,U+975E,U+9769,U+9776,U+978D,U+97AD,U+97E9,U+987F,U+9881,U+989D,U+98A0,U+98A4,U+98CE,U+98DE,U+996D,U+9971,U+9975,U+997C,U+997F,U+9986,U+998B,U+9A70,U+9A73,U+9A87,U+9A8B,U+9AA8,U+9AB8,U+9AD8,U+9B3C,U+9C8D,U+9CD6,U+9E3D,U+9E3F,U+9E45,U+9EC4,U+9F0E,U+9F13,U+9F3B,U+9F7F,U+9F9A,U+9F9F,U+FF01-FF5F}
@font-face{font-family:"MeileFooterSerif";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/FootSerif-0.woff2") format("woff2");
  unicode-range:U+4E50,U+517B,U+52A1,U+670D,U+673A,U+6784,U+7406,U+7BA1,U+7CFB,U+7EDF,U+7F8E,U+8001}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 20px);-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  font-size:16px;line-height:1.78;
  color:var(--c-ink-700);
  background:var(--c-ink-50);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
strong{font-weight:700;color:var(--c-ink-900)}
::selection{background:var(--c-primary-200);color:var(--c-ink-900)}

/* ---------- Layout ---------- */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 32px}
.container.narrow{max-width:860px}
.section{padding:72px 0;position:relative}

/* ---------- 通用标题组件 ---------- */
/* ---------- 板块标签（带图标的橙色胶囊） ----------
   用户要放大的是这个，不是 h2.sec-title。
   32px→40px 高、12.5px→14px 字、图标 15px→18px、左右内边距 16px→20px。
   比例上图标占高度 45%，与 14px 文字的视觉重量匹配（原来 15px/32px 只有 47%，
   放大后必须同步放大图标，否则图标会显得偏小）。 */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  height:40px;padding:0 20px;border-radius:var(--r-full);
  background:var(--c-primary-100);
  color:var(--c-primary-700);
  font-size:14px;font-weight:600;letter-spacing:.03em;
  margin-bottom:24px;
  /* 标签文字必须单行。
     移动端如果换行，胶囊会被撑成多行的小圆角块，
     图标也跟着被挤到只剩 2~3px，变成一坨看不懂的色块。 */
  white-space:nowrap;max-width:100%;
}
/* 板块标签前的图标：单色 SVG，继承胶囊的文字色。
   原来是一个 6px 圆点，语义为零；现在每个板块配一个语义图标
   （为什么需要它=警示 / 自动化=闪电 / 核心功能=模块 / 业务流程=流转 / 系统界面=屏 …），
   扫一眼就能分辨。stroke=currentColor 保证始终是单色，不做多色填充。

   ⚠ flex:none 与 width/height 必须同时给：
   SVG 默认有 intrinsic size（viewBox 决定），在 flex 容器里
   若允许收缩，窄屏下会被压成极小尺寸导致图标糊成一团。
   min-width/max-width 一起锁死，防止任何浏览器下变形。 */
.eyebrow .eb-ic{
  width:18px;height:18px;flex:0 0 18px;
  min-width:18px;max-width:18px;stroke-width:2;
}
.eyebrow .dot{width:6px;height:6px;flex:0 0 6px;min-width:6px;border-radius:50%;background:var(--c-primary-600)}
.eyebrow.center{display:flex;width:max-content;margin-left:auto;margin-right:auto}
/* 窄屏放不下时缩字号而不是换行 —— 换行会破坏胶囊形态 */
@media (max-width:420px){
  .eyebrow{gap:7px;padding:0 13px;font-size:12px;letter-spacing:.02em}
  .eyebrow .eb-ic{width:15px;height:15px;flex:0 0 15px;min-width:15px;max-width:15px}
}
/* 深色底（CTA / 按需定制卡）上的胶囊标签：金色底 + 深棕字。
   原来用 rgba(255,255,255,.18) 半透明白，在深色背景上偏灰白、
   对比不足；金色能呼应品牌主色，深棕字 (#2E2117) 与 .c-ink-900 同色系，
   在浅金底上对比度远高于白字。 */
.eyebrow.light{background:linear-gradient(135deg,#FBC79E,#F5A26B);color:#2E2117}
.eyebrow.light .dot{background:#2E2117}

/* sec-head 与 sec-title 已还原为改版前基准：
   max-width 760px、clamp(30px,3.4vw,42px)、line-height 1.24、letter-spacing -.016em。
   链路说明句的 nowrap 断点也一并回到 900px（与 760px 容器配套）。 */
.sec-head{text-align:center;max-width:760px;margin:0 auto 46px}
.sec-title{
  font-family:var(--font-serif);
  font-size:clamp(30px,3.4vw,42px);font-weight:700;line-height:1.24;
  letter-spacing:-.016em;color:var(--c-ink-900);
}
.sec-desc{margin-top:20px;font-size:17px;line-height:1.85;color:var(--c-ink-500)}

/* ---------- 链路说明句：整句换行，绝不从句子中间断开 ----------
   `.sec-head` 宽 760px，这句放不下会自然折行，但浏览器是按字符断的，
   会出现「…排班则贯穿在 / 院全程。」这种把一个词劈开的结果。
   做法：把两个语义整句各包一个 <span>，
   span 默认 inline（不折行，放得下就一行放下）；
   屏幕窄到连第一句都放不下时，媒体查询把 span 改成 block，
   让断行只发生在分号处 —— 两句各自完整，不会截断句子。 */
.chain-desc .cd-l1,.chain-desc .cd-l2{white-space:nowrap}
@media (max-width:900px){
  .chain-desc .cd-l1,.chain-desc .cd-l2{display:block;white-space:normal}
}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:52px;padding:0 28px;border-radius:var(--r-full);
  font-size:16px;font-weight:600;letter-spacing:.01em;
  transition:all .28s var(--ease);white-space:nowrap;
}
.btn-primary{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-500));color:#fff;box-shadow:var(--sh-primary)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(224,114,44,.4)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:rgba(255,255,255,.7);color:var(--c-ink-900);border:1px solid var(--c-ink-200);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:#fff;border-color:var(--c-primary-300);box-shadow:var(--sh-sm)}
.btn-outline{background:transparent;color:var(--c-primary-700);border:1.5px solid var(--c-primary-300)}
.btn-outline:hover{background:var(--c-primary-50);border-color:var(--c-primary-400)}
.btn-sm{height:42px;padding:0 20px;font-size:14px}
.btn-lg{height:58px;padding:0 30px;font-size:17px}
.btn.full{width:100%}

/* ---------- 徽标 ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  height:28px;padding:0 12px;border-radius:var(--r-full);
  font-size:12.5px;font-weight:600;letter-spacing:.03em;white-space:nowrap;
}
.badge-orange{background:var(--c-primary-100);color:var(--c-primary-700)}
.badge-success{background:#E8F3EC;color:#3A7A54}
.badge-info{background:#E7EEF6;color:#45688F}
.badge-warning{background:#FBF0DC;color:#9C6716}

/* ==========================================================
   头部容器（公告条 + 导航）
   ----------------------------------------------------------
   原来只有 .nav 是 position:fixed;top:0，脱离文档流压在公告条上，
   公告条被顶出视口顶部（用户反馈「公告条没挨着最上方」）。
   现在两层一起放进 .head-wrap 整体固定 —— 公告条在上、导航在下。
   .nav 改为 position:relative，由父级承担固定职责。 */
.head-wrap{position:fixed;top:0;left:0;right:0;z-index:100}

/* ---------- 公告条 ----------
   加深背景（原 #E0722C→#EE8A45 偏浅，配白字对比不足），
   字号 13.5→15px，字重提到 600，加一枚白色小圆点做视觉锚。 */
.notice{
  background:linear-gradient(90deg,var(--c-primary-700) 0%,var(--c-primary-600) 55%,var(--c-primary-700) 100%);
  color:#fff;
}
.notice-in{
  display:flex;align-items:center;justify-content:center;gap:12px;
  min-height:46px;font-size:15px;font-weight:600;letter-spacing:.01em;
  flex-wrap:wrap;padding-top:8px;padding-bottom:8px;text-align:center;
}
/* 前置小圆点，纯装饰 */
.notice-dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.85);
  box-shadow:0 0 0 3px rgba(255,255,255,.22);
}
.notice-in a{
  font-weight:700;white-space:nowrap;
  padding:2px 10px;border-radius:var(--r-full);
  background:rgba(255,255,255,.18);text-decoration:none;
  transition:background .25s var(--ease);
}
.notice-in a:hover{background:rgba(255,255,255,.32)}

/* ==========================================================
   导航
   ========================================================== */
.nav{
  position:relative;   /* 固定职责已上移到 .head-wrap */
  height:var(--nav-h);
  background:rgba(253,250,247,.72);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid transparent;
  transition:all .3s var(--ease);
}
.nav.scrolled{
  background:rgba(255,255,255,.88);
  border-bottom-color:rgba(201,182,168,.4);
  box-shadow:0 2px 20px rgba(122,74,40,.06);
}
.nav-inner{height:100%;display:flex;align-items:center;gap:32px}

.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand-mark{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-600));
  color:#fff;font-family:var(--font-serif);font-size:21px;font-weight:700;
  display:grid;place-items:center;
  box-shadow:0 4px 12px rgba(224,114,44,.3);
}
/* 放了图片 LOGO 的状态：去掉底色方块与阴影，避免圆角把 logo 边缘裁掉。
   图片用 object-fit:contain 完整显示，尺寸放大到 44px 让品牌更醒目。 */
.brand-mark.has-img{
  background:none;
  box-shadow:none;
  width:44px;height:44px;
  border-radius:0;
  overflow:visible;
}
.brand-mark.has-img img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  /* 图片本身通常带圆角，不要再强制加 border-radius，否则会切掉图案边缘 */
  border-radius:0;
}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-text strong{font-family:var(--font-serif);font-size:18.5px;font-weight:700;letter-spacing:-.005em}
/* 页脚区内的品牌文字不加粗 —— 与 .af-note 那句正文同一粗细（400） */
.footer .brand-text strong{font-weight:400}
/* 副标题（logoSub）在后台留空时 JS 会清空内容，这里同时兜底隐藏，
   避免空 <em> 仍占一行高度把主标题顶偏 */
.brand-text em:empty{display:none}
.brand-text em{font-style:normal;font-size:11.5px;color:var(--c-ink-500);letter-spacing:.14em}

.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-link{
  position:relative;padding:0 15px;height:44px;
  display:inline-flex;align-items:center;
  font-size:15px;font-weight:500;color:var(--c-ink-500);
  border-radius:var(--r-full);transition:all .25s var(--ease);
}
.nav-link::after{
  content:"";position:absolute;left:15px;right:15px;bottom:8px;height:2px;
  background:var(--c-primary-500);border-radius:2px;
  transform:scaleX(0);transform-origin:center;transition:transform .3s var(--ease);
}
.nav-link:hover{color:var(--c-ink-900)}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.nav-link.active{color:var(--c-ink-900);font-weight:600}

/* ---------- 演示账号 ---------- */
.demo-box{position:relative}
.nav-demo{
  height:42px;padding:0 18px;display:inline-flex;align-items:center;gap:7px;
  font-size:14.5px;font-weight:500;color:var(--c-ink-700);
  border-radius:var(--r-full);transition:all .25s var(--ease);
}
.nav-demo:hover{background:rgba(245,162,107,.14);color:var(--c-primary-700)}
.demo-tip{
  position:absolute;top:calc(100% + 12px);right:0;width:230px;
  padding:16px 18px;border-radius:15px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(201,182,168,.55);box-shadow:var(--sh-lg);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:all .28s var(--ease);pointer-events:none;z-index:5;
}
.demo-box:hover .demo-tip{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.demo-tip::before{
  content:"";position:absolute;top:-6px;right:26px;width:12px;height:12px;
  background:rgba(255,255,255,.97);border-left:1px solid rgba(201,182,168,.55);
  border-top:1px solid rgba(201,182,168,.55);transform:rotate(45deg);
}
.dt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0}
.dt-row span{font-size:12.5px;color:var(--c-ink-500);flex:none}
.dt-row b{
  font-family:var(--font-num-sm);font-size:14.5px;color:var(--c-primary-700);
  letter-spacing:.02em;user-select:all;
}
.demo-tip i{display:block;margin-top:10px;padding-top:10px;border-top:1px dashed var(--c-ink-200);font-style:normal;font-size:11.5px;color:var(--c-ink-300);line-height:1.6}

.nav-actions{display:flex;align-items:center;gap:12px;flex:none;margin-left:8px}
.nav-demo{
  height:42px;padding:0 18px;display:inline-flex;align-items:center;
  font-size:14.5px;font-weight:500;color:var(--c-ink-700);
  border-radius:var(--r-full);transition:all .25s var(--ease);
}
.nav-demo:hover{background:rgba(245,162,107,.14);color:var(--c-primary-700)}

.nav-toggle{display:none;width:44px;height:44px;border-radius:12px;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--c-ink-900);border-radius:2px;transition:all .3s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ==========================================================
   Hero
   ========================================================== */
.hero{position:relative;padding:calc(var(--head-h) + 72px) 0 72px;overflow:hidden}

/* ---------- Hero 背景层 ----------
   三种模式共用一个 .hero-bg 容器，靠 data-mode 切换表现：
   fixed    固定单色渐变（默认，主题色）
   color    预设渐变色板轮播（纯 CSS 动画，无需 JS 定时器）
   slide    用户上传的图片幻灯片（淡入淡出轮播）
   切换时加 .is-fading 做 600ms 交叉淡入，观感平滑不生硬。 */
.hero-bg{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
/* fixed 模式：默认暖阳橙主题 */
.hero-bg[data-mode="fixed"]{background:var(--c-ink-50)}
/* 固定模式同样铺满整屏（inset:0），与色彩/图片模式保持一致的取景 */
.hero-bg[data-mode="fixed"]::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse farthest-corner at 78% 20%,rgba(245,162,107,.30),transparent 78%),
    radial-gradient(ellipse farthest-corner at 16% 70%,rgba(254,223,199,.40),transparent 80%),
    linear-gradient(160deg,#FFFDF8,#FEF5E9);
}
.hero-bg[data-mode="fixed"]::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,var(--c-ink-50) 100%);
}

/* color 模式：预设 6 组暖色渐变，逐层绝对定位，靠 animation 交叉淡入 */
.hero-bg[data-mode="color"] .bg-layer{
  position:absolute;inset:0;opacity:0;
  /* 不用 animation 简写：var() 在简写里遇到含逗号的值
     （--ease 是 cubic-bezier(.22,1,.36,1)）会被判为无效并整条丢弃，
     表现为 duration=0s、背景全透明。拆成子属性最稳。 */
  animation-name:bgCycle;animation-duration:24s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;
}
.hero-bg[data-mode="color"] .bg-layer:nth-child(1){animation-delay:0s}
.hero-bg[data-mode="color"] .bg-layer:nth-child(2){animation-delay:4s}
.hero-bg[data-mode="color"] .bg-layer:nth-child(3){animation-delay:8s}
.hero-bg[data-mode="color"] .bg-layer:nth-child(4){animation-delay:12s}
.hero-bg[data-mode="color"] .bg-layer:nth-child(5){animation-delay:16s}
.hero-bg[data-mode="color"] .bg-layer:nth-child(6){animation-delay:20s}
@keyframes bgCycle{
  0%{opacity:0}
  4%{opacity:1}
  17%{opacity:1}     /* 停留约 3.3s */
  21%,100%{opacity:0}
}
/* 每层内部是同构的柔光球，色相靠 CSS 变量区分 */
/* 每层铺满整个 .hero-bg（inset:0），不留白边。
   三层叠加：
     ① 底层 linear-gradient —— 保证整幅有底色，不出现纯白区域
     ② 主光斑 radial-gradient(ellipse farthest-corner) —— 覆盖到角落
     ③ 辅光斑 偏移到左上，与主光斑错开，避免看起来是同心圆
   blur 从 30px 降到 18px：范围变大后不需要那么强的模糊来藏边界。 */
.bg-layer{
  background:
    radial-gradient(ellipse farthest-corner at 78% 22%,var(--glow-1),transparent 78%),
    radial-gradient(ellipse farthest-corner at 18% 68%,var(--glow-2),transparent 80%),
    linear-gradient(160deg,var(--base-1),var(--base-2));
}
/* 底部与下一屏衔接：让渐变一直延伸到 Hero 底边，不会突然截断 */
.bg-layer::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,var(--c-ink-50) 100%);
}

/* slide 模式：用户上传图，淡入淡出 */
.hero-bg[data-mode="slide"] .bg-slide{
  position:absolute;inset:0;opacity:0;
  background-size:cover;background-position:center;
  animation-name:bgSlide;animation-duration:18s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;
}
.hero-bg[data-mode="slide"] .bg-slide:nth-child(1){animation-delay:0s}
.hero-bg[data-mode="slide"] .bg-slide:nth-child(2){animation-delay:6s}
.hero-bg[data-mode="slide"] .bg-slide:nth-child(3){animation-delay:12s}
@keyframes bgSlide{
  0%{opacity:0}
  5%{opacity:1}
  30%{opacity:1}
  35%,100%{opacity:0}
}
/* 图片上盖一层暖色蒙版，保证白字可读，不做纯图铺满 */
.hero-bg[data-mode="slide"]::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(253,250,247,.72),rgba(255,248,242,.55) 40%,rgba(253,250,247,.86));
}

/* 无 JS 时若 mode 落在 slide/color，用 fixed 的底色兜底，避免背景空白 */
.hero-bg:not([data-mode]) ,.hero-bg[data-mode=""]{background:var(--c-ink-50)}
.hero-bg:not([data-mode])::before,.hero-bg[data-mode=""]::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse farthest-corner at 78% 20%,rgba(245,162,107,.30),transparent 78%),
    radial-gradient(ellipse farthest-corner at 16% 70%,rgba(254,223,199,.40),transparent 80%),
    linear-gradient(160deg,#FFFDF8,#FEF5E9);
}

.hero-inner{position:relative;display:grid;grid-template-columns:1.02fr 1fr;gap:60px;align-items:center}

.hero-copy{max-width:600px}
.hero-title{
  font-family:var(--font-serif);
  /* 「养老院全流程管理」8 个汉字，66px + .04em 字距约需 570px；
     clamp 上限压到 60px 并收紧视口系数，保证 1440px 及以上单行不折 */
  font-size:clamp(34px,4.35vw,60px);font-weight:600;line-height:1.24;
  letter-spacing:.03em;color:var(--c-ink-900);
  margin-bottom:30px;
  /* 桌面端强制单行，宁可字号略小也不要出现「理」字孤字换行 */
  white-space:nowrap;
}
.hero-sub{
  font-size:clamp(15px,1.45vw,18px);font-weight:400;line-height:1.5;
  letter-spacing:.18em;color:var(--c-primary-700);
  margin-bottom:34px;padding-bottom:30px;
  border-bottom:1px solid rgba(201,182,168,.55);
  display:inline-block;
}
.hero-desc{font-size:15.5px;line-height:1.92;color:var(--c-ink-500);max-width:560px}
.hero-desc strong{color:var(--c-ink-700);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.hero-stats{display:flex;gap:44px;margin-top:44px;padding-top:32px;border-top:1px solid rgba(201,182,168,.5)}
.stat{display:flex;flex-direction:column;gap:4px}
.stat strong{
  font-family:var(--font-num);font-size:35px;line-height:1.15;
  letter-spacing:-.005em;color:var(--c-primary-600);
  font-variant-numeric:tabular-nums;
}
.stat span{font-size:13.5px;color:var(--c-ink-500);letter-spacing:.01em}

/* --- 产品截图设备框 --- */
.hero-visual{position:relative;perspective:1400px}
.device{
  position:relative;border-radius:var(--r-xl);
  background:rgba(255,255,255,.9);
  border:1px solid rgba(201,182,168,.55);
  box-shadow:var(--sh-xl);
  overflow:hidden;
  transform:rotateY(-6deg) rotateX(2deg) translateZ(0);
  transition:transform .7s var(--ease);
}
.hero-visual:hover .device{transform:rotateY(-2deg) rotateX(1deg)}
.device-bar{
  height:44px;display:flex;align-items:center;gap:7px;
  padding:0 16px;background:linear-gradient(180deg,#FDFAF7,#F7EFE7);
  border-bottom:1px solid var(--c-ink-100);
}
.device-bar .dot-r,.device-bar .dot-y,.device-bar .dot-g{width:10px;height:10px;border-radius:50%;flex:none}
.dot-r{background:#F08A7E}.dot-y{background:#F3C176}.dot-g{background:#8FCB9D}
.device-url{
  margin-left:14px;flex:1;height:26px;max-width:260px;
  display:flex;align-items:center;padding:0 12px;
  background:rgba(255,255,255,.9);border-radius:var(--r-full);
  font-size:11.5px;color:var(--c-ink-300);letter-spacing:.02em;
}
.device-body{display:flex;height:400px;background:var(--c-ink-50)}

.mock-side{
  width:62px;flex:none;background:#fff;border-right:1px solid var(--c-ink-100);
  display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 0;
}
.mock-logo{
  width:32px;height:32px;border-radius:10px;margin-bottom:6px;
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-600));
  color:#fff;font-family:var(--font-serif);font-size:16px;font-weight:700;
  display:grid;place-items:center;
}
.mock-nav{width:32px;height:32px;border-radius:9px;background:#F4EDE7}
.mock-nav.active{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-500));box-shadow:0 3px 8px rgba(224,114,44,.35)}

.mock-main{flex:1;padding:20px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.mock-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.mock-h1{height:15px;width:130px;border-radius:5px;background:#E8DCD2;margin-bottom:8px}
.mock-h2{height:9px;width:90px;border-radius:5px;background:#F0E6DD}
.mock-btns{display:flex;gap:7px}
.mock-chip{width:52px;height:24px;border-radius:7px;background:#F4EDE7}
.mock-chip.solid{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-500))}

.mock-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mock-kpi{
  background:#fff;border:1px solid rgba(201,182,168,.4);border-radius:12px;
  padding:11px 13px;display:flex;flex-direction:column;gap:3px;
}
.mock-kpi span{font-size:10.5px;color:var(--c-ink-500)}
.mock-kpi strong{font-family:var(--font-num);font-size:21px;letter-spacing:-.005em;font-variant-numeric:tabular-nums}
.mock-kpi em{font-style:normal;font-size:10px;color:var(--c-ink-300)}
.mock-kpi em.up{color:var(--c-success)}
.mock-kpi em.warn{color:var(--c-warning)}

.mock-chart{flex:1;background:#fff;border:1px solid rgba(201,182,168,.4);border-radius:12px;padding:12px 13px;display:flex;flex-direction:column;gap:6px;min-height:0}
.mock-chart-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--c-ink-700);font-weight:500}
.mock-legend{font-size:9.5px;color:var(--c-ink-300);display:flex;align-items:center;gap:4px}
.mock-legend i,.lgd i{width:8px;height:8px;border-radius:2.5px;background:var(--c-primary);display:inline-block;margin-right:3px}
.mock-legend i.l2,.lgd i.l2{background:var(--c-ink-300)}
.chart-svg{flex:1;width:100%;min-height:0}

.mock-rows{display:flex;flex-direction:column;gap:6px}
.mock-row{
  display:flex;align-items:center;gap:9px;
  background:#fff;border:1px solid rgba(201,182,168,.4);border-radius:10px;padding:7px 11px;
}
.mock-row .av{width:22px;height:22px;border-radius:7px;flex:none}
.av.a1{background:linear-gradient(135deg,#FFD9BC,#FBC79E)}
.av.a2{background:linear-gradient(135deg,#DCE8F2,#B9CFE4)}
.av.a3{background:linear-gradient(135deg,#FBE3C0,#F3C176)}
.mock-row .nm{font-size:11.5px;color:var(--c-ink-700);font-weight:500;flex:1}
.mock-row b{font-family:var(--font-num-sm);font-size:12.5px;color:var(--c-ink-900);font-variant-numeric:tabular-nums}
.tag{font-style:normal;font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:var(--r-full)}
.t-ok{background:#E8F3EC;color:#3A7A54}
.t-info{background:#E7EEF6;color:#45688F}
.t-warn{background:#FBF0DC;color:#9C6716}

/* 浮动卡片 */
.float-card{
  position:absolute;display:flex;align-items:center;gap:11px;
  padding:13px 17px;border-radius:16px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(201,182,168,.5);
  box-shadow:var(--sh-lg);
  animation:floaty 5s var(--ease) infinite;
}
.float-card div{display:flex;flex-direction:column;line-height:1.45}
.float-card strong{font-size:13.5px;font-weight:600}
.float-card em{font-style:normal;font-size:11.5px;color:var(--c-ink-500)}
.fc-icon{
  width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,#FFF0E2,#FEDFC7);color:var(--c-primary-600);
}
.fc-icon.ok{background:linear-gradient(135deg,#E8F3EC,#CFE7D8);color:#3A7A54}
.fc-1{top:14%;left:-46px;animation-delay:0s}
.fc-2{bottom:12%;right:-40px;animation-delay:2.4s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* ==========================================================
   信任条
   ========================================================== */
.trust{border-top:1px solid rgba(201,182,168,.4);border-bottom:1px solid rgba(201,182,168,.4);background:rgba(255,255,255,.5);padding:34px 0}
.trust-inner{display:flex;align-items:center;gap:44px;flex-wrap:wrap}
.trust-label{font-size:13.5px;color:var(--c-ink-500);flex:none;letter-spacing:.02em}
.trust-logos{display:flex;align-items:center;gap:38px;flex-wrap:wrap}
.trust-logos span{
  font-family:var(--font-serif);font-size:17px;font-weight:600;
  color:var(--c-ink-300);letter-spacing:.02em;transition:color .3s var(--ease);
}
.trust-logos span:hover{color:var(--c-primary-500)}

/* ==========================================================
   痛点 · 左右对比式
   ========================================================== */
.problems{background:linear-gradient(180deg,var(--c-ink-50),var(--c-primary-50))}
.cmp{display:grid;grid-template-columns:1fr 56px 1fr;align-items:stretch}
.cmp-col{padding:36px 34px;border-radius:var(--r-xl);border:1px solid var(--c-ink-200);background:var(--c-white)}
.cmp-col.old{background:rgba(255,255,255,.55)}
.cmp-col.new{
  background:linear-gradient(160deg,var(--c-white),var(--c-primary-50));
  border-color:rgba(245,162,107,.42);box-shadow:var(--sh-lg);
}
.cmp-head{margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--c-ink-100)}
.cmp-col.old .cmp-head{border-bottom-color:var(--c-ink-200)}
.cmp-tag{
  display:inline-flex;align-items:center;height:26px;padding:0 13px;
  border-radius:var(--r-full);font-size:12.5px;font-weight:600;letter-spacing:.03em;
  background:var(--c-ink-100);color:var(--c-ink-500);margin-bottom:14px;
}
.cmp-col.new .cmp-tag{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-500));color:#fff}
.cmp-head h3{font-family:var(--font-serif);font-size:25px;font-weight:600;color:var(--c-ink-900);letter-spacing:-.014em}
.cmp-col.old .cmp-head h3{color:var(--c-ink-300)}

.cmp-list{display:flex;flex-direction:column;gap:20px}
.cmp-list li{display:flex;align-items:flex-start;gap:14px}
.cmp-list svg{flex:none;margin-top:3px}
.cmp-col.old .cmp-list svg{color:#D3BFB0}
.cmp-col.new .cmp-list svg{color:var(--c-primary-500)}
.cmp-list li>div{display:flex;flex-direction:column;gap:3px;line-height:1.55;min-width:0}
.cmp-list strong{font-size:16px;font-weight:600;letter-spacing:-.006em}
.cmp-col.old strong{color:var(--c-ink-500)}
.cmp-list span{font-size:13.5px;line-height:1.7}
.cmp-col.old span{color:var(--c-ink-300)}
.cmp-col.new span{color:var(--c-ink-500)}

.cmp-arrow{display:grid;place-items:center}
.cmp-arrow svg{
  color:var(--c-primary-400);padding:12px;border-radius:50%;
  background:var(--c-white);border:1px solid rgba(245,162,107,.35);box-shadow:var(--sh-sm);
}

/* ---------- 链路顺序条 ---------- */
.chain-strip{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:6px 4px;margin:-18px 0 32px;
}
/* 窄屏（≤1023）排成 3 列 × 3 行，最后一格留给「排班管理」独占。
   用 grid 而非 flex-wrap：flex 换行位置由剩余宽度决定，
   会出现「排班管理」孤零零掉到第二行中间。 */
@media (max-width:1023px){
  .chain-strip{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;margin:-10px 0 26px;
  }
  .chain-strip .cs-item{justify-content:center}
  /* 7 个节点：前 6 个占满 2 行，第 7 个（排班）单独占第 3 行居中 */
  .chain-strip .cs-item.loop{grid-column:1 / -1;justify-self:center}
  /* 3 列网格下 7 个节点放不进整行，箭头无处可指，直接隐藏；
     手机单列时靠竖线表达方向，也不要箭头。 */
  .chain-strip .cs-arrow{display:none}
}
.cs-item{
  display:inline-flex;align-items:center;gap:8px;
  height:36px;padding:0 15px;border-radius:var(--r-full);
  background:var(--c-white);border:1px solid rgba(201,182,168,.55);
  font-size:13.5px;font-weight:500;color:var(--c-ink-700);
  white-space:nowrap;transition:all .3s var(--ease);
}
.cs-item:hover{border-color:var(--c-primary-300);color:var(--c-primary-700);box-shadow:var(--sh-sm)}
.cs-item i{
  width:19px;height:19px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-style:normal;
  font-family:var(--font-num-sm);font-size:11px;font-weight:700;
  background:var(--c-primary-100);color:var(--c-primary-700);
}
/* 排班是贯穿全程的支撑，不是链条上的一环 —— 用虚线框区分 */
.cs-item.loop{border-style:dashed;border-color:rgba(245,162,107,.55);background:var(--c-primary-50)}
.cs-arrow{color:var(--c-primary-300);font-size:15px;line-height:1}

/* ==========================================================
   核心功能 · 侧栏 + 详情面板
   ========================================================== */
.features{background:linear-gradient(180deg,var(--c-primary-50),var(--c-ink-50) 55%)}
.feat-split{
  display:grid;grid-template-columns:330px 1fr;gap:0;
  background:var(--c-white);border:1px solid rgba(201,182,168,.5);
  border-radius:var(--r-xl);box-shadow:var(--sh-lg);overflow:hidden;
}
.feat-nav{
  display:flex;flex-direction:column;gap:2px;padding:14px;
  background:linear-gradient(180deg,#FDFAF7,#F7EFE7);
  border-right:1px solid var(--c-ink-100);
}
.fn-item{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:15px 18px;border-radius:14px;text-align:left;
  transition:all .3s var(--ease);position:relative;
}
.fn-item:hover{background:rgba(255,255,255,.8)}
.fn-item.active{background:var(--c-white);box-shadow:var(--sh-sm)}
.fn-item.active::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:26px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--c-primary-400),var(--c-primary-600));
}
.fn-ic{
  width:42px;height:42px;border-radius:13px;flex:none;
  display:grid;place-items:center;
  background:var(--c-white);color:var(--c-ink-300);
  border:1px solid var(--c-ink-200);transition:all .32s var(--ease);
}
.fn-item:hover .fn-ic{color:var(--c-primary-500);border-color:var(--c-primary-200)}
.fn-item.active .fn-ic{
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-600));
  color:#fff;border-color:transparent;box-shadow:0 5px 14px rgba(224,114,44,.3);
}
.fn-tx{display:flex;flex-direction:column;line-height:1.5;min-width:0}
.fn-tx strong{font-size:15.5px;font-weight:600;letter-spacing:-.006em;color:var(--c-ink-700);transition:color .3s var(--ease)}
.fn-item.active .fn-tx strong{color:var(--c-ink-900)}
.fn-tx em{font-style:normal;font-size:12.5px;color:var(--c-ink-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.feat-panels{padding:38px 40px;min-height:400px}
.fpanel{display:none;animation:fadeUp .42s var(--ease)}
.fpanel.active{display:block}
.fp-head{padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid var(--c-ink-100)}
.fp-head h3{font-family:var(--font-serif);font-size:27px;font-weight:600;color:var(--c-ink-900);letter-spacing:-.016em;margin-bottom:9px}
.fp-head p{font-size:15px;line-height:1.75;color:var(--c-ink-500)}
.fp-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fp-list li{
  padding:18px 20px;border-radius:var(--r-md);
  background:var(--c-ink-50);border:1px solid var(--c-ink-100);
  transition:all .32s var(--ease);
}
.fp-list li:hover{background:var(--c-primary-50);border-color:var(--c-primary-200);transform:translateY(-3px);box-shadow:var(--sh-sm)}
.fp-list span{display:block;font-size:15.5px;font-weight:600;color:var(--c-ink-900);margin-bottom:6px;letter-spacing:-.006em}
.fp-list em{font-style:normal;font-size:13.5px;line-height:1.65;color:var(--c-ink-500)}

/* ==========================================================
   自动化任务 · 2×2 大区块
   ----------------------------------------------------------
   为什么不是四列窄卡：每列只有 ~200px 宽，17 个条目挤在四列里
   （一列 4~5 条），一是流程标签「A → B → C」放不下必须换行、
   箭头被甩到行尾，二是每个条目还各带一层圆角盒子，
   四列并排时盒子高度参差、底边对不齐，看起来又乱又长。

   改成 2×2：每块宽 560px，流程标签一行放得下；
   条目改为「序号 + 标题 + 说明」三段横排，去掉内层盒子，
   靠一条淡分隔线区分相邻条目 —— 视觉噪音从 17 个盒子降到 4 个大块。

   grid-auto-rows:1fr —— 每一行的两块强制等高。
   否则上排（4+5 条）比下排（4+4 条）高 120px，整块看起来仍不对称。
   .ac-list{flex:1} 让列表吃掉多余高度，条目间距自然拉开而不是底部留白。
   ========================================================== */
.auto{background:var(--c-ink-50)}
.auto-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  grid-auto-rows:1fr;gap:22px;align-items:stretch;
}
.auto-col{
  display:flex;flex-direction:column;
  padding:28px 30px 24px;border-radius:var(--r-xl);
  background:var(--c-white);border:1px solid rgba(201,182,168,.5);
  box-shadow:var(--sh-sm);transition:all .38s var(--ease);
}
.auto-col:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:var(--c-primary-200)}

.ac-head{display:flex;align-items:center;gap:15px;padding-bottom:20px;margin-bottom:6px;border-bottom:1px solid var(--c-ink-100)}
.ac-ic{
  width:46px;height:46px;border-radius:15px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-600));
  color:#fff;box-shadow:0 6px 16px rgba(224,114,44,.28);
}
.ac-head h3{font-family:var(--font-serif);font-size:21px;font-weight:600;color:var(--c-ink-900);letter-spacing:-.014em;line-height:1.4;margin-bottom:2px}
.ac-head p{font-size:13px;color:var(--c-ink-500)}

/* 条目：序号 + 标题 + 说明，最后一条不画分隔线。
   flex:1 让同一块的条目均分多余高度（4 条与 5 条的两块也能对齐底边），
   而不是把空白全堆在最后一条下面。 */
.ac-list{display:flex;flex-direction:column;flex:1}
.ac-list li{
  position:relative;
  flex:1;
  display:grid;grid-template-columns:26px 1fr;column-gap:14px;
  padding:15px 0 14px;border-bottom:1px dashed rgba(201,182,168,.55);
  transition:all .3s var(--ease);
}
.ac-list li:last-child{border-bottom:none;padding-bottom:0}
.ac-list li:hover{background:var(--c-primary-50)}

/* 序号：与标题「首行文字」对齐（不是整体居中）——
   标题 15.5px、序号 12px，整体居中时序号会明显偏低半个字。
   align-self:start + margin-top 调到与 15.5px 汉字的视觉中线一致。 */
.ac-list li::before{
  counter-increment:acIdx;content:counter(acIdx);
  grid-column:1;grid-row:1;
  width:26px;height:26px;border-radius:9px;
  display:grid;place-items:center;
  font-family:var(--font-num-sm);font-size:12px;font-weight:600;
  color:var(--c-primary-700);background:var(--c-primary-100);
  align-self:start;margin-top:1px;
}
.ac-list{counter-reset:acIdx}

/* 条目内容：顶部对齐。flex:1 撑出的多余高度靠 li 的 padding 均分，
   内容本身保持自然高度 —— 序号与标题首行严格对齐。 */
.ac-body{grid-column:2;grid-row:1;min-width:0;align-self:start}
.ac-list strong{display:block;font-size:15.5px;font-weight:600;color:var(--c-ink-900);letter-spacing:-.008em;margin-bottom:5px}

/* 触发 → 动作：内联排版，箭头始终夹在两个标签之间，不会被甩到行尾 */
.ac-flow{display:block}
.ac-flow i{
  display:inline-block;font-style:normal;font-size:12.5px;font-weight:500;
  padding:3px 10px;margin:2px 0;border-radius:var(--r-full);
  background:var(--c-primary-50);border:1px solid var(--c-primary-200);color:var(--c-primary-700);
  white-space:nowrap;vertical-align:middle;
}
.ac-flow em{font-style:normal;color:var(--c-primary-500);font-size:12.5px;vertical-align:middle;padding:0 2px}
.ac-note{display:block;font-size:13.5px;line-height:1.72;color:var(--c-ink-500)}

.auto-foot{margin-top:24px}
.af-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  padding:26px 32px;border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--c-primary-50),#fff);
  border:1px solid rgba(245,162,107,.32);
}
/* 四个数字现在是按钮：点一下展开对应的具体条目。
   li 保留 flex 居中，按钮接管排版 —— 全button 无法撑满格子，
   会让四个数字左对齐不齐，所以让button 自己也stretch。 */
.af-stats li{display:flex}
.af-stat{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:8px 6px;margin:-8px -6px;
  border-radius:var(--r-md);cursor:pointer;text-align:center;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.af-stat:hover{background:rgba(245,162,107,.1)}
.af-stat:active{transform:translateY(1px)}
/* 展开态：底色 + 主色描边，视线不用找就知道当前在看哪一组 */
.af-stat[aria-expanded="true"]{
  background:rgba(245,162,107,.16);
  box-shadow:inset 0 0 0 1px rgba(224,114,44,.4);
}
.af-stat:focus-visible{outline:2px solid var(--c-primary-600);outline-offset:2px}
.af-stat strong{
  font-family:var(--font-num);font-size:32px;line-height:1.2;
  color:var(--c-primary-600);font-variant-numeric:tabular-nums;letter-spacing:-.005em;
}
.af-stat[aria-expanded="true"] strong{color:var(--c-primary-700)}
.af-stat span{
  font-size:13px;color:var(--c-ink-500);
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
/* 「点击展开」提示：默认淡，hover/展开时才明显 —— 不抢数字的视觉重量 */
.af-more{
  font-style:normal;font-size:11px;line-height:1.4;letter-spacing:.02em;
  color:var(--c-primary-600);opacity:0;
  transform:translateY(-2px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.af-stat:hover .af-more,.af-stat[aria-expanded="true"] .af-more{opacity:.9;transform:none}
.af-stat[aria-expanded="true"] .af-more{color:var(--c-primary-700)}

/* ---------- 展开面板：把「有多少」摊成「是什么」 ----------
   这是本次改动的核心。抽象数字（17类/11类/6条）只能让人知道量级，
   看不出具体是什么；把条目按类列出，访客能自己核对系统真做了这些事。 */
.af-panel{
  margin-top:14px;padding:22px 26px 24px;border-radius:var(--r-lg);
  background:#fff;border:1px solid rgba(224,114,44,.26);
  box-shadow:var(--sh-md);
  animation:afIn .32s var(--ease);
}
@keyframes afIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.af-panel[hidden]{display:none}
.af-panel-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.af-panel-ic{
  flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:rgba(245,162,107,.16);color:var(--c-primary-600);
}
.af-panel-head h4{
  font-family:var(--font-serif);font-size:18px;font-weight:600;color:var(--c-ink-900);
  margin-right:auto;letter-spacing:-.01em;
}
.af-panel-n{
  flex:none;font-size:12px;font-weight:600;letter-spacing:.02em;
  color:var(--c-primary-700);background:var(--c-primary-100);
  padding:3px 10px;border-radius:var(--r-full);
}
.af-panel-close{
  flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  color:var(--c-ink-500);transition:background .2s var(--ease),color .2s var(--ease);
}
.af-panel-close:hover{background:var(--c-ink-100);color:var(--c-ink-900)}
.af-panel-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:9px 22px;
}
.af-panel-list li{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 12px;border-radius:10px;
  background:var(--c-ink-50);border:1px solid rgba(201,182,168,.4);
  font-size:13.5px;line-height:1.6;color:var(--c-ink-700);
}
/* 序号圆点：用主色实心，和数字区呼应 */
.af-panel-list li::before{
  content:attr(data-n);flex:none;
  width:19px;height:19px;border-radius:50%;margin-top:1px;
  display:grid;place-items:center;
  background:var(--c-primary-600);color:#fff;
  font-family:var(--font-num-sm);font-size:11px;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.af-panel-list b{color:var(--c-ink-900);font-weight:600}
.af-panel-list em{
  display:block;font-style:normal;margin-top:2px;
  font-size:12.5px;line-height:1.55;color:var(--c-ink-500);
}
.af-panel-foot{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--c-ink-100);
  font-size:12.5px;line-height:1.7;color:var(--c-ink-500);
}

/* 面板展开时，对应的自动化卡高亮 —— 点数字 → 视线能对上具体在哪张卡 */
.auto-col[data-afcard]{transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.auto-col[data-afcard].af-lit{
  box-shadow:0 0 0 2px rgba(224,114,44,.45),var(--sh-md);
  transform:translateY(-2px);
}

.af-note{
  display:flex;align-items:flex-start;gap:11px;
  margin-top:16px;padding:18px 24px;border-radius:var(--r-md);
  background:rgba(255,255,255,.68);border:1px solid rgba(201,182,168,.5);
}
.af-note svg{flex:none;color:var(--c-primary-600);margin-top:3px}
.af-note{font-size:14px;line-height:1.8;color:var(--c-ink-700)}

/* ==========================================================
   业务流程
   ========================================================== */
.flow{background:var(--c-ink-50)}
.flow-wrap{
  background:var(--c-white);border:1px solid rgba(201,182,168,.5);
  border-radius:var(--r-xl);box-shadow:var(--sh-md);
  padding:34px 40px 30px;
}
.flow-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px}
.fs-item{
  position:relative;padding:16px 20px 16px 24px;border-radius:14px;
  background:linear-gradient(140deg,var(--c-primary-50),#fff);
  border:1px solid rgba(245,162,107,.3);
  display:flex;align-items:baseline;gap:12px;
  transition:all .32s var(--ease);
}
.fs-item:hover{transform:translateY(-3px);box-shadow:var(--sh-sm);border-color:var(--c-primary-400)}
.fs-no{
  font-family:var(--font-num-sm);font-size:13.5px;
  color:var(--c-primary-400);letter-spacing:.06em;flex:none;
}
.fs-item strong{
  font-family:var(--font-serif);font-size:17px;font-weight:600;
  color:var(--c-ink-900);letter-spacing:-.008em;
}

.flow-track{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.flow-line{
  position:absolute;top:25px;left:8%;right:8%;height:2px;
  background:linear-gradient(90deg,var(--c-primary-200),var(--c-primary-300),var(--c-primary-200));
  z-index:0;
}
.flow-step{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.flow-dot{
  width:52px;height:52px;border-radius:50%;
  background:var(--c-white);border:2px solid var(--c-primary-200);
  display:grid;place-items:center;margin-bottom:20px;
  box-shadow:0 0 0 8px var(--c-white);
  transition:all .35s var(--ease);
}
.flow-dot span{
  font-family:var(--font-num);font-size:19px;
  color:var(--c-primary-600);transition:all .35s var(--ease);
}
.flow-step:hover .flow-dot{
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-500));
  border-color:transparent;transform:scale(1.12);
  box-shadow:0 0 0 8px var(--c-white),0 8px 22px rgba(224,114,44,.32);
}
.flow-step:hover .flow-dot span{color:#fff}
.flow-step h4{
  font-family:var(--font-serif);font-size:19px;font-weight:600;
  color:var(--c-ink-900);margin-bottom:8px;letter-spacing:-.01em;
}
.flow-step p{font-size:13.5px;line-height:1.7;color:var(--c-ink-500);max-width:170px}

.flow-foot{
  display:flex;align-items:flex-start;gap:11px;margin-top:38px;padding-top:26px;
  border-top:1px solid var(--c-ink-100);
}
.flow-foot svg{flex:none;color:var(--c-primary-500);margin-top:3px}
.flow-foot p{font-size:14.5px;line-height:1.8;color:var(--c-ink-500)}

/* ==========================================================
   系统界面 · Tabs
   ========================================================== */
.dashboard{background:linear-gradient(180deg,var(--c-ink-50),var(--c-primary-50) 60%,var(--c-ink-50))}
.tabs-wrap{
  background:var(--c-white);border:1px solid rgba(201,182,168,.5);
  border-radius:var(--r-xl);box-shadow:var(--sh-lg);overflow:hidden;
  position:relative;
}
/* 移动端右侧渐隐提示：告诉用户「还能往右滑」。
   滚到最右时 JS 给 .tabs-wrap 加 .at-end，渐隐消失。 */
.tabs-wrap::after{
  content:"";position:absolute;top:0;right:0;bottom:1px;width:42px;
  background:linear-gradient(90deg,rgba(253,250,247,0),rgba(247,239,231,.96));
  pointer-events:none;
  opacity:0;transition:opacity .22s var(--ease);
}
.tabs-wrap.at-end::after{opacity:0}
.tabs{
  display:flex;gap:4px;padding:14px;overflow-x:auto;
  background:linear-gradient(180deg,#FDFAF7,#F7EFE7);
  border-bottom:1px solid var(--c-ink-100);
  scrollbar-width:none;
  /* 移动端关键：让 tab 能真正横向滑动并带吸附感，
     否则 6 个 tab 超出屏宽会被裁掉，用户以为只有 4 个 */
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none;height:44px;padding:0 22px;border-radius:var(--r-full);
  font-size:14.5px;font-weight:500;color:var(--c-ink-500);
  transition:all .28s var(--ease);
  scroll-snap-align:center;
}
.tab:hover{background:rgba(245,162,107,.14);color:var(--c-primary-700)}
.tab.active{
  background:var(--c-white);color:var(--c-ink-900);font-weight:600;
  box-shadow:var(--sh-sm);
}

.panels{padding:34px 36px 38px;min-height:520px}
.panel{display:none;animation:fadeUp .45s var(--ease)}
.panel.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.pane-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--c-ink-100)}
.pane-head h3{font-family:var(--font-serif);font-size:23px;font-weight:600;color:var(--c-ink-900);letter-spacing:-.012em;margin-bottom:6px}
.pane-head p{font-size:14.5px;color:var(--c-ink-500);line-height:1.7}

.pane-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.pk{
  padding:18px 20px;border-radius:var(--r-md);
  background:linear-gradient(160deg,var(--c-primary-50),#fff);
  border:1px solid rgba(245,162,107,.32);
  display:flex;flex-direction:column;gap:3px;
  transition:all .3s var(--ease);
}
.pk:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.pk span{font-size:12.5px;color:var(--c-ink-500);letter-spacing:.02em}
.pk strong{font-family:var(--font-num);font-size:27px;letter-spacing:-.005em;font-variant-numeric:tabular-nums;line-height:1.3}
.pk em{font-style:normal;font-size:12px;color:var(--c-ink-300)}
.pk em.up{color:var(--c-success)}
.pk em.warn{color:var(--c-warning)}

.pane-split{display:grid;grid-template-columns:1.25fr 1fr;gap:18px}
.pane-box{background:var(--c-ink-50);border:1px solid rgba(201,182,168,.4);border-radius:var(--r-md);padding:20px 22px}
.pane-box-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.pane-box-head h4{font-size:15.5px;font-weight:600;color:var(--c-ink-900);letter-spacing:-.006em}
.lgd{font-size:12px;color:var(--c-ink-300);display:flex;align-items:center;gap:4px}
.mini-num{font-size:12.5px;font-weight:600;color:var(--c-primary-700);background:var(--c-primary-100);padding:2px 10px;border-radius:var(--r-full)}
.big-chart{width:100%;height:150px}

.mini-btn{
  height:30px;padding:0 14px;border-radius:9px;
  font-size:12.5px;font-weight:600;
  background:var(--c-white);color:var(--c-ink-700);
  border:1px solid var(--c-ink-200);transition:all .25s var(--ease);
}
.mini-btn:hover{border-color:var(--c-primary-300);color:var(--c-primary-700)}
.mini-btn.solid{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-500));color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(224,114,44,.3)}
.mini-btn.ghost{background:transparent}

.todo{display:flex;flex-direction:column;gap:12px}
.todo li{display:flex;align-items:flex-start;gap:11px}
.todo li>div{display:flex;flex-direction:column;line-height:1.5}
.todo strong{font-size:14px;font-weight:600}
.todo span{font-size:12.5px;color:var(--c-ink-500)}
.todo i{width:8px;height:8px;border-radius:50%;margin-top:8px;flex:none}
.dot-warn{background:var(--c-warning)}
.dot-danger{background:var(--c-danger)}
.dot-info{background:var(--c-info)}

/* 档案 */
.profile{display:grid;grid-template-columns:290px 1fr;gap:22px}
.pf-left{
  padding:28px 24px;border-radius:var(--r-md);
  background:linear-gradient(170deg,var(--c-primary-50),#fff);
  border:1px solid rgba(245,162,107,.32);text-align:center;
}
.pf-avatar{
  width:76px;height:76px;border-radius:26px;margin:0 auto 16px;
  background:linear-gradient(135deg,var(--c-primary-200),var(--c-primary-400));
  color:#fff;font-family:var(--font-serif);font-size:30px;font-weight:700;
  display:grid;place-items:center;box-shadow:0 8px 20px rgba(224,114,44,.24);
}
.pf-left h4{font-family:var(--font-serif);font-size:21px;font-weight:600;color:var(--c-ink-900)}
.pf-sub{font-size:13.5px;color:var(--c-ink-500);margin:5px 0 14px}
.pf-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:22px}
.pf-meta{display:flex;flex-direction:column;gap:11px;text-align:left;padding-top:20px;border-top:1px dashed rgba(201,182,168,.6)}
.pf-meta li{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pf-meta span{font-size:13px;color:var(--c-ink-500)}
.pf-meta b{font-size:13.5px;font-weight:600;color:var(--c-ink-900)}

.pf-right{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-content:start}
.rec{display:flex;flex-direction:column;gap:12px}
.rec li{display:flex;flex-direction:column;gap:2px;padding-bottom:11px;border-bottom:1px dashed rgba(201,182,168,.5)}
.rec li:last-child{border-bottom:none;padding-bottom:0}
.rec span{font-size:12.5px;color:var(--c-ink-500)}
.rec p{font-size:14px;color:var(--c-ink-900);line-height:1.65}
.rec p.amt{font-family:var(--font-num-sm);font-size:16px;font-variant-numeric:tabular-nums}
.rec p.amt.danger{color:var(--c-danger)}
.rec p.amt.warn{color:var(--c-warning)}

.tl{display:flex;flex-direction:column}
.tl li{position:relative;display:flex;align-items:flex-start;gap:12px;padding-bottom:20px}
.tl li:last-child{padding-bottom:0}
.tl li::before{
  content:"";position:absolute;left:5px;top:16px;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--c-primary-200),var(--c-ink-100));
}
.tl li:last-child::before{display:none}
.tl li>i{width:12px;height:12px;border-radius:50%;flex:none;margin-top:5px;background:var(--c-white);border:2.5px solid var(--c-primary-400);z-index:1}
.tl li>div{flex:1;display:flex;flex-direction:column;line-height:1.5}
.tl strong{font-size:13.5px;font-weight:600}
.tl span{font-size:12.5px;color:var(--c-ink-500)}
.tl time{font-size:11.5px;color:var(--c-ink-300);font-family:var(--font-num-sm);flex:none;margin-top:3px}

/* 评估 */
.eval{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ev-left,.ev-right{padding:22px;border-radius:var(--r-md);background:var(--c-ink-50);border:1px solid rgba(201,182,168,.4)}
.ev-list{display:flex;flex-direction:column;gap:9px}
.ev-list li{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--c-white);border:1px solid var(--c-ink-100);border-radius:11px;
  transition:all .28s var(--ease);
}
.ev-list li:hover{border-color:var(--c-primary-300);transform:translateX(3px)}
.ev-list li>i{
  width:26px;height:26px;border-radius:9px;flex:none;
  display:grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--c-ink-100);color:var(--c-ink-300);
  font-style:normal;
}
.ev-list li.done>i{background:linear-gradient(135deg,#E8F3EC,#CFE7D8);color:#3A7A54}
.ev-list li.done>i svg{width:14px;height:14px}
.ev-list li.active{border-color:var(--c-primary-400);background:var(--c-primary-50);box-shadow:var(--sh-sm)}
.ev-list li.active>i{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-500));color:#fff}
.ev-list li>div{flex:1;display:flex;flex-direction:column;line-height:1.5}
.ev-list strong{font-size:14px;font-weight:600}
.ev-list span{font-size:12px;color:var(--c-ink-500)}
.ev-list b{font-family:var(--font-num);font-size:17px;color:var(--c-ink-900);font-variant-numeric:tabular-nums}
.ev-list li.active b{color:var(--c-ink-300)}

.grade-box{background:var(--c-white);border:1px solid var(--c-primary-200);border-radius:var(--r-md);padding:22px;box-shadow:var(--sh-sm)}
.grade-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.grade-head h4{font-size:15.5px;font-weight:600;color:var(--c-ink-900)}
.grade-main{display:flex;align-items:center;gap:18px;padding:20px;border-radius:14px;background:linear-gradient(135deg,var(--c-primary-50),var(--c-primary-100));margin-bottom:20px}
.grade-letter{
  width:70px;height:70px;border-radius:22px;flex:none;
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-600));
  color:#fff;font-family:var(--font-serif);font-size:38px;font-weight:700;
  display:grid;place-items:center;box-shadow:0 8px 22px rgba(224,114,44,.32);
}
.grade-main strong{display:block;font-size:18px;font-family:var(--font-serif);font-weight:600;margin-bottom:4px}
.grade-main p{font-size:13.5px;line-height:1.7;color:var(--c-ink-700)}

.grade-bars{display:flex;flex-direction:column;gap:13px;margin-bottom:20px}
.gb{display:flex;align-items:center;gap:12px}
.gb>span{font-size:13px;color:var(--c-ink-500);width:64px;flex:none}
.gb-track{flex:1;height:8px;border-radius:var(--r-full);background:var(--c-ink-100);overflow:hidden}
.gb-track i{display:block;height:100%;border-radius:var(--r-full);background:linear-gradient(90deg,var(--c-primary-400),var(--c-primary-600));transition:width 1s var(--ease)}
.gb-track.low i{background:linear-gradient(90deg,#8FCB9D,var(--c-success))}
.gb b{font-family:var(--font-num-sm);font-size:13.5px;width:44px;text-align:right;flex:none;font-variant-numeric:tabular-nums}
.grade-foot{display:flex;gap:10px}
.grade-foot .mini-btn{flex:1;height:40px;border-radius:11px;font-size:14px}

/* 床位 */
.bed-legend{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--c-ink-100)}
.bed-legend span{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--c-ink-500)}
.bed-legend i{width:12px;height:12px;border-radius:4px;flex:none}
.b-ok{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-500))}
.b-fix{background:#B9CFE4}
.b-tr{background:#F3C176}
.b-empty{background:var(--c-ink-200)}
.b-maint{background:#E8DCD2}

.bed-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bed-floor{padding:20px;border-radius:var(--r-md);background:var(--c-ink-50);border:1px solid rgba(201,182,168,.4)}
.bed-floor h5{font-size:14.5px;font-weight:600;color:var(--c-ink-900);margin-bottom:16px;letter-spacing:-.006em}
.beds{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.bed{
  aspect-ratio:1/0.92;border-radius:12px;padding:9px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-family:var(--font-num-sm);font-size:13.5px;
  border:1.5px solid transparent;transition:all .3s var(--ease);
  cursor:default;
}
.bed span{font-family:var(--font-sans);font-size:11px;font-weight:400;opacity:.85}
.bed.ok{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-500));color:#fff;box-shadow:0 4px 12px rgba(224,114,44,.26)}
.bed.tr{background:#FBF0DC;color:#9C6716;border-color:#F3C176}
.bed.fix{background:#E7EEF6;color:#45688F;border-color:#B9CFE4}
.bed.empty{background:var(--c-white);color:var(--c-ink-300);border-color:var(--c-ink-200);border-style:dashed}
.bed.maint{background:var(--c-ink-100);color:var(--c-ink-300);border-color:var(--c-ink-200)}
.bed:hover{transform:translateY(-4px) scale(1.03);box-shadow:var(--sh-md);z-index:1}

/* 费用 */
.fee{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}
.fee-left,.fee-right{display:flex;flex-direction:column;gap:18px}
.fee-left{padding:22px;border-radius:var(--r-md);background:var(--c-ink-50);border:1px solid rgba(201,182,168,.4)}
.fee-table{width:100%;border-collapse:collapse;font-size:14px}
.fee-table th{
  text-align:left;padding:9px 10px;font-size:12.5px;font-weight:600;
  color:var(--c-ink-500);border-bottom:1px solid var(--c-ink-200);
}
.fee-table th:last-child,.fee-table td:last-child{text-align:right}
.fee-table td{padding:11px 10px;border-bottom:1px solid rgba(201,182,168,.4);color:var(--c-ink-700)}
.fee-table td:last-child{font-family:var(--font-num-sm);font-weight:600;font-variant-numeric:tabular-nums;color:var(--c-ink-900)}
.fee-table tr.sum td{border-bottom:none;padding-top:14px;font-weight:600}
.fee-table tr.sum td:last-child{font-size:19px;color:var(--c-primary-600)}
.fee-note{margin-top:16px;padding:12px 14px;border-radius:11px;background:var(--c-primary-50);font-size:13px;color:var(--c-ink-700);line-height:1.7}

.ring-wrap{display:flex;align-items:center;gap:22px}
.ring{
  width:104px;height:104px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--c-primary) calc(var(--p)*1%),var(--c-ink-100) 0);
  position:relative;
}
.ring::after{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--c-ink-50)}
.ring>div{position:relative;z-index:1;text-align:center;line-height:1.3}
.ring strong{display:block;font-family:var(--font-num);font-size:22px;color:var(--c-ink-900);font-variant-numeric:tabular-nums}
.ring span{font-size:11.5px;color:var(--c-ink-500)}
.ring-legend{flex:1;display:flex;flex-direction:column;gap:9px}
.ring-legend li{display:flex;align-items:center;gap:8px;font-size:13px}
.ring-legend i{width:9px;height:9px;border-radius:3px;flex:none}
.c-ok{background:var(--c-primary)}
.c-warn{background:var(--c-warning)}
.c-danger{background:var(--c-danger)}
.ring-legend span{color:var(--c-ink-500);flex:1}
.ring-legend b{font-family:var(--font-num-sm);font-variant-numeric:tabular-nums;font-size:14.5px}

/* 报表 */
.bars{display:flex;flex-direction:column;gap:15px}
.bars li{display:flex;align-items:center;gap:12px}
.bars>li>span{font-size:13.5px;color:var(--c-ink-700);width:70px;flex:none}
.bar-track{flex:1;height:22px;border-radius:var(--r-full);background:var(--c-white);border:1px solid var(--c-ink-100);overflow:hidden}
.bar-track i{
  display:block;height:100%;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--c-primary-300),var(--c-primary-500));
  width:0;transition:width 1.1s var(--ease);
}
.bars b{font-family:var(--font-num-sm);font-size:14px;width:58px;text-align:right;flex:none;font-variant-numeric:tabular-nums}

.comp{display:flex;flex-direction:column;gap:15px}
.comp li{display:flex;align-items:center;gap:12px}
.comp li>i{
  width:var(--w);height:22px;border-radius:6px;flex:none;
  background:var(--c);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.05);
  transition:width .9s var(--ease);
}
.comp span{font-size:13.5px;color:var(--c-ink-700);flex:1}
.comp b{font-family:var(--font-num-sm);font-size:15px;font-variant-numeric:tabular-nums}

/* ==========================================================
   版本价格
   ========================================================== */
.versions{background:linear-gradient(180deg,var(--c-ink-50),var(--c-primary-50))}
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.price-card{
  position:relative;display:flex;flex-direction:column;
  padding:32px 26px 28px;border-radius:var(--r-xl);
  background:var(--c-white);border:1px solid rgba(201,182,168,.5);
  box-shadow:var(--sh-sm);transition:all .38s var(--ease);
}
/* 头部与价格区：等高对齐 */
.pc-head{height:112px}
.price-card.featured .pc-head{height:112px}
.price-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lg);border-color:var(--c-primary-200)}
.price-card.featured{
  border:2px solid var(--c-primary-400);
  box-shadow:var(--sh-xl);
  background:linear-gradient(180deg,#FFF9F4,#fff 44%);
  transform:scale(1.035);
}
.price-card.featured:hover{transform:scale(1.035) translateY(-8px)}
.pc-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  height:27px;padding:0 16px;border-radius:var(--r-full);
  display:inline-flex;align-items:center;
  background:linear-gradient(135deg,var(--c-primary-500),var(--c-primary-700));
  color:#fff;font-size:12px;font-weight:600;letter-spacing:.04em;white-space:nowrap;
  box-shadow:0 6px 16px rgba(224,114,44,.36);
}
.pc-head{margin-bottom:20px}
.pc-tag{
  display:inline-flex;align-items:center;height:26px;padding:0 12px;
  border-radius:var(--r-full);background:var(--c-primary-100);
  color:var(--c-primary-700);font-size:12.5px;font-weight:600;letter-spacing:.03em;margin-bottom:12px;
}
.price-card.featured .pc-tag{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-500));color:#fff}
.pc-head h3{font-family:var(--font-serif);font-size:25px;font-weight:600;color:var(--c-ink-900);letter-spacing:-.014em;margin-bottom:8px}
.pc-for{font-size:13.5px;line-height:1.7;color:var(--c-ink-500)}

.pc-price{
  display:flex;align-items:baseline;gap:3px;
  height:82px;padding:20px 0;margin-bottom:6px;
  border-top:1px dashed rgba(201,182,168,.7);border-bottom:1px dashed rgba(201,182,168,.7);
}
.pc-price .cur{font-family:var(--font-num);font-size:22px;color:var(--c-primary-600);flex:none;letter-spacing:0}
/* Playfair 只有一个字重(400)。这里必须写 400，
   写 700 会触发浏览器伪粗体（描边加粗），把高对比度衬线体弄糊。 */
.pc-price strong{font-family:var(--font-num);font-size:46px;letter-spacing:-.005em;color:var(--c-ink-900);font-variant-numeric:tabular-nums;line-height:1.16}
/* 「一次买断」四个字必须横排：禁止收缩 + 禁止内部折行 */
.pc-price em{font-style:normal;font-size:13.5px;color:var(--c-ink-500);margin-left:5px;flex:none;white-space:nowrap}

.pc-feat{display:flex;flex-direction:column;gap:11px;margin:22px 0 26px;flex:1}
.pc-feat li{position:relative;padding-left:23px;font-size:14px;line-height:1.7;color:var(--c-ink-700)}
.pc-feat li::before{
  content:"";position:absolute;left:0;top:5px;width:15px;height:15px;border-radius:50%;
  background:var(--c-primary-100);
}
.pc-feat li::after{
  content:"";position:absolute;left:4.5px;top:8.5px;width:6px;height:3.5px;
  border-left:2px solid var(--c-primary-600);border-bottom:2px solid var(--c-primary-600);
  transform:rotate(-45deg);
}

/* ---------- 按需定制卡 ---------- */
.price-card.custom{
  display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:start;
  margin-top:20px;padding:34px 38px;
  background:linear-gradient(140deg,#2A1E15,#3B2A1D 55%,#4A3323);
  border:none;box-shadow:var(--sh-xl);
}
.price-card.custom:hover{transform:translateY(-6px);box-shadow:0 40px 96px rgba(122,74,40,.28)}
/* 「第五种方案」标签：与 .eyebrow.light 同一套金色胶囊 */
.custom-tag{background:linear-gradient(135deg,#FBC79E,#F5A26B);color:#2E2117}
.custom-l h3{font-family:var(--font-serif);font-size:30px;font-weight:600;color:#fff;letter-spacing:-.016em;margin-bottom:12px}
.custom-l>.pc-for{font-size:15px;line-height:1.82;color:rgba(255,255,255,.66);max-width:520px}
.custom-l .pc-feat{margin:24px 0 0;gap:12px}
.custom-l .pc-feat li{color:rgba(255,255,255,.82);font-size:14.5px;padding-left:24px}
.custom-l .pc-feat li::before{background:rgba(245,162,107,.22)}
.custom-l .pc-feat li::after{border-color:var(--c-primary-300)}

.custom-r{display:flex;flex-direction:column;gap:16px;align-self:stretch}
.custom-note{
  padding:22px 24px;border-radius:var(--r-md);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
}
.custom-note strong{display:block;font-size:14.5px;color:#fff;margin-bottom:14px;font-weight:600}
.custom-note ul{display:flex;flex-direction:column;gap:10px}
.custom-note li{position:relative;padding-left:18px;font-size:14px;color:rgba(255,255,255,.72);line-height:1.7}
.custom-note li::before{
  content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;
  background:var(--c-primary-300);
}
.custom-r .btn{margin-top:auto}
/* 「需求不限大小…」这句补充说明。
   原为 12.5px + rgba(255,255,255,.44) —— 深底上的小字 + 低亮度 = 又小又糊，
   实测是全站深底区里最难读的一处。
   改为 13px + 实色 #CFC2B4（与页脚正文同色），行高 1.75。
   注意：字号不能缩更小，13px 是中文小字在深底上的可读下限。 */
.custom-tip{
  font-size:13px;line-height:1.75;text-align:center;
  color:#CFC2B4;   /* 实色，不用半透明 —— 半透明在深底上就是发糊 */
}

/* ---------- 四版通用权益 ---------- */
.pc-common{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:22px;padding:28px 32px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.62);border:1px solid rgba(201,182,168,.5);
}
.pcc-item{
  display:grid;grid-template-columns:24px 1fr;
  grid-template-rows:auto auto;column-gap:14px;row-gap:5px;
  align-items:start;
}
.pcc-item svg{grid-column:1;grid-row:1 / span 2;flex:none;color:var(--c-primary-600);margin-top:4px}
.pcc-item strong{
  grid-column:2;grid-row:1;
  font-size:16.5px;font-weight:600;color:var(--c-ink-900);
  letter-spacing:-.008em;line-height:1.4;white-space:nowrap;
}
.pcc-item span{grid-column:2;grid-row:2;font-size:13.5px;line-height:1.7;color:var(--c-ink-500)}

.ver-note{
  display:flex;align-items:flex-start;gap:12px;margin-top:26px;
  padding:20px 24px;border-radius:var(--r-md);
  background:rgba(255,255,255,.68);border:1px solid rgba(201,182,168,.5);
}
.ver-note svg{flex:none;color:var(--c-primary-600);margin-top:4px}
.ver-note p{font-size:14px;line-height:1.8;color:var(--c-ink-700)}

/* ==========================================================
   FAQ
   ========================================================== */
.faq{background:var(--c-ink-50)}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:var(--c-white);border:1px solid rgba(201,182,168,.5);
  border-radius:var(--r-md);overflow:hidden;
  transition:all .3s var(--ease);
}
.faq-item:hover{border-color:var(--c-primary-200)}
.faq-item.open{border-color:var(--c-primary-300);box-shadow:var(--sh-md)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 24px;text-align:left;
  font-size:16.5px;font-weight:600;color:var(--c-ink-900);letter-spacing:-.008em;
}
.faq-ic{
  position:relative;width:22px;height:22px;flex:none;
  border-radius:50%;background:var(--c-primary-100);
  transition:transform .35s var(--ease),background .3s var(--ease);
}
.faq-ic::before,.faq-ic::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--c-primary-700);
  transform:translate(-50%,-50%);border-radius:2px;transition:all .3s var(--ease);
}
.faq-ic::before{width:10px;height:2px}
.faq-ic::after{width:2px;height:10px}
.faq-item.open .faq-ic{background:var(--c-primary-400);transform:rotate(180deg)}
.faq-item.open .faq-ic::before,.faq-item.open .faq-ic::after{background:#fff}
.faq-item.open .faq-ic::after{height:0}

.faq-a{max-height:0;overflow:hidden;transition:max-height .42s var(--ease)}
.faq-a p{padding:0 24px 24px;font-size:15px;line-height:1.88;color:var(--c-ink-500)}

/* ==========================================================
   CTA 表单
   ========================================================== */
.cta{padding:76px 0;background:var(--c-ink-50)}
.cta-inner{
  position:relative;display:grid;grid-template-columns:1fr 460px;gap:56px;align-items:start;
  padding:60px;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(140deg,#2A1E15 0%,#3B2A1D 48%,#4A3323 100%);
  box-shadow:var(--sh-xl);
}
.cta-glow{
  position:absolute;top:-140px;right:-100px;width:520px;height:520px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(245,162,107,.32),transparent 70%);
  filter:blur(20px);
}
.cta-copy{position:relative;z-index:1}
.cta-copy h2{
  font-family:var(--font-serif);font-size:clamp(28px,3.1vw,40px);font-weight:700;
  line-height:1.26;letter-spacing:-.02em;color:#fff;margin-bottom:20px;
}
.cta-copy>p{font-size:16.5px;line-height:1.88;color:rgba(255,255,255,.72);margin-bottom:30px}
.cta-points{display:flex;flex-direction:column;gap:13px}
.cta-points li{display:flex;align-items:center;gap:11px;font-size:15px;color:rgba(255,255,255,.88)}
.cta-points svg{width:19px;height:19px;flex:none;color:var(--c-primary-300)}

.cta-form{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:7px;position:relative}
.field:nth-child(5),.field:nth-child(6),.cta-form>.btn,.form-note,.form-ok{grid-column:1/-1}
.field label{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.8);letter-spacing:.01em}
.field label i{color:var(--c-primary-300);font-style:normal}
.input{
  width:100%;height:50px;padding:0 16px;
  background:rgba(255,255,255,.07);color:#fff;
  border:1.5px solid rgba(255,255,255,.16);border-radius:var(--r-sm);
  font-size:15px;transition:all .25s var(--ease);
}
.input::placeholder{color:rgba(255,255,255,.38)}
.input:hover{background:rgba(255,255,255,.1)}
.input:focus{
  outline:none;background:rgba(255,255,255,.13);
  border-color:var(--c-primary-400);
  box-shadow:0 0 0 4px rgba(245,162,107,.2);
}
.input.ta{height:auto;padding:14px 16px;line-height:1.7;resize:vertical;min-height:88px;font-family:inherit}
select.input{
  appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FBC79E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;
}
select.input option{background:#3B2A1D;color:#fff}
select.input:invalid{color:rgba(255,255,255,.38)}

.field.err-on .input{border-color:#E8836A;box-shadow:0 0 0 4px rgba(232,131,106,.16)}
.field .err{display:none;font-size:12.5px;color:#F0A48F}
.field.err-on .err{display:block}

.form-note{font-size:12.5px;color:rgba(255,255,255,.42);line-height:1.6}

/* ---------- 提交成功状态 ----------
   原设计是一个裸对勾 + 两行字，提交后表单区域整块空掉，
   像「页面坏了」而不是「提交成功了」。改为卡片式：
   ① 卡��� + 微光背景，给出明确的视觉重心
   ② 对勾带描边动画（ring 扩散 + tick 划入），强化完成感
   ③ 补「接下来会发生什么」三步，降低访客的等待焦虑
   ④ 保留「再填一份」出口，方便一次填多个机构
   用 rgba 半透明是刻意的：这里要的是通透质感而非实体卡片，
   深底上方块状实体反而会显得笨重。 */
.form-ok{
  display:none;padding:6px 0;color:#fff;
}
.form-ok.show{display:block;animation:okIn .5s var(--ease)}
@keyframes okIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.form-ok-card{
  position:relative;text-align:center;
  padding:38px 30px 30px;border-radius:var(--r-lg);
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(245,162,107,.16),transparent 62%),
    rgba(255,255,255,.045);
  border:1px solid rgba(245,162,107,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.14);
  overflow:hidden;
}
/* 顶部一道极细的金线，强化"完成"的仪式感 */
.form-ok-card::before{
  content:"";position:absolute;left:50%;top:0;width:120px;height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--c-primary-300),transparent);
}

/* 对勾：外环扩散 + 内勾划入 */
.form-ok-ring{
  display:grid;place-items:center;position:relative;
  width:60px;height:60px;margin:0 auto 18px;
}
.form-ok-ring::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(245,162,107,.42);
  animation:okRing .55s var(--ease) both;
}
@keyframes okRing{from{transform:scale(.72);opacity:0}to{transform:scale(1);opacity:1}}
.form-ok-tick{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(140deg,var(--c-primary-400),var(--c-primary-600));
  box-shadow:0 10px 24px rgba(224,114,44,.34);
  color:#fff;
}
.form-ok-tick svg{width:23px;height:23px}
.form-ok-tick svg path{
  stroke-dasharray:24;stroke-dashoffset:24;
  animation:okTick .42s var(--ease) .18s both;
}
@keyframes okTick{to{stroke-dashoffset:0}}

.form-ok-card>strong{
  display:block;font-family:var(--font-serif);font-size:25px;font-weight:600;
  color:#fff;letter-spacing:.01em;margin-bottom:9px;
}
.form-ok-sub{
  font-size:14px;color:rgba(255,255,255,.68);line-height:1.7;
  margin-bottom:22px;
}
/* 接下来会发生什么：三步竖排，比单行说明更有确定感 */
.form-ok-next{
  display:flex;flex-direction:column;gap:9px;
  max-width:340px;margin:0 auto 22px;text-align:left;
}
.form-ok-next li{
  display:flex;align-items:center;gap:11px;
  padding:10px 14px;border-radius:11px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
  font-size:13.5px;color:rgba(255,255,255,.82);
}
.form-ok-next i{
  flex:none;display:grid;place-items:center;
  width:21px;height:21px;border-radius:50%;
  background:rgba(245,162,107,.2);color:var(--c-primary-300);
  font-family:var(--font-num-sm);font-size:11.5px;font-weight:700;font-style:normal;
}
.form-ok-again{
  height:38px;padding:0 22px;border-radius:var(--r-full);
  font-size:13.5px;color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.16);
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.form-ok-again:hover{
  color:#fff;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.06);
}
.cta-form.sent > *:not(.form-ok){display:none}

/* ==========================================================
   页脚
   --------------------------------------------------------
   字号字重基准：与价格卡权益列表（.pc-feat li）完全一致 ——
   14px / 400 / 行高 1.7 / 实色 rgb(90,70,58) 对应到深底上的等效明度。

   ⚠ 为什么不用 rgba(255,255,255,.4) 这类半透明
     半透明色在深色底上会与背景色混合，实际呈现为「灰」，
     笔画边缘与底色相互渗透 —— 这就是「看起来发糊」的原因。
     视觉不糊的做法是给**足够亮的实色**，让字形边界清晰。
     这里按 14px 正文的等效观感，用 #E8DED4（浅米灰）实色，
     不透明度100%，与深棕底(#241A12)的对比度约 11:1，远高于 WCAG AA。

   ⚠ 品牌名用宋体（Noto Serif SC），笔画本就比黑体密，
     所以它需要额外加字距让字形松快，不能只靠降字重。
   ========================================================== */
.footer{
  background:#241A12;padding:48px 0 26px;color:#CFC2B4;
  /* 页脚专用字体：思源黑体 ExtraLight(250)，比全站黑体笔画细两号 */
  font-family:"MeileFooterSC","Source Han Sans SC","Noto Sans SC","PingFang SC",
              "Microsoft YaHei","HarmonyOS Sans SC",sans-serif;
  font-weight:300;
}
/* ---------- 右侧「友情链接 / 自定义 / 版权」统一规格 ----------
   这三行是同一类信息（都是被动信息，不引导行动），
   字号字重必须完全一致 —— 只要有一行跑偏，右侧就会显得乱。

   规格：12px / 250 / line-height 1.75，比左侧正文小一号、细一号。
   用 !important 是有意的：后台「自定义内容」支持填 HTML，
   用户可能贴带 <span style="font-size:18px"> 的代码片段，
   不强制压就会被撑大，右边三行字号打架。 */
.foot-meta .foot-links,
.foot-meta .foot-links *{font-size:12px!important;font-weight:250!important;line-height:1.75!important}
.foot-meta .foot-custom,
.foot-meta .foot-custom *{font-size:12px!important;font-weight:250!important;line-height:1.75!important}
.foot-meta .foot-copy,
.foot-meta .foot-copy *{font-size:12px!important;font-weight:250!important;line-height:1.75!important}
/* 自定义内容里的 <a> 保留链接色，但字号字重跟随统一规格 */
.foot-meta .foot-custom a{font-weight:250!important}
.foot-meta .fl-list a{font-weight:250!important}
/* ---------- 页脚字重总闸 ----------
   全局有strong{font-weight:700}，后台自定义内容里也可能带 <b>/<strong>/<span style>，
   漏网之鱼会让页脚局部突然变粗、字号突然变大。
   这里统一把页脚内所有元素的字重压回 300（与 MeileFooterSC 一致）。
   font-size 不做全局重置 —— 各区块有明确规格（正文 13、辅助信息 12、
   品牌名 17），重置会破坏层级；后面对 .foot-meta 三兄弟另有兜底。
   ⚠ 这条要放在页脚样式之前，否则会被后面的规则覆盖。 */
.footer,.footer *{font-weight:300}
/* 全局 strong{color:var(--c-ink-900)} 是深墨色，放到深棕页脚上会几乎看不见。
   页脚内的 strong/b 一律继承外层颜色。 */
.footer strong,.footer b{color:inherit}
/* 合成粗体：只有一档字重时，浏览器不该为缺字/缺重自动加粗。
   禁止合成可避免个别未收录字被「救粗」后又显突兀。 */
.footer,.footer *{font-synthesis-weight:none}
/* 页脚正文色：实色，不用半透明 —— 半透明=发糊的根源。
   但也不能太亮：#241A12 深底上的高亮文字会「光渗」，笔画边缘外溢，
   视觉上反而显粗（这是深色底浅字的固有现象，与字体无关）。
   实测 #CFC2B4 在深底上既清晰又纤细，比 #E8DED4 精致一档。 */
:root{
  --foot-ink:#CFC2B4;         /* 正文：略降亮，减轻深底浅字的光渗（光渗=显粗） */
  --foot-ink-strong:#E4D9CC; /* 强调（品牌名、链接） */
  --foot-ink-dim:#A99C8E;    /* 次要（副标题、版权） */
}
.foot-contact .brand-text strong{
  color:var(--foot-ink-strong);
  font-weight:300;
  font-family:"MeileFooterSerif","Source Han Serif SC","Noto Serif SC",
              "Songti SC",serif;
  font-size:17px;
  letter-spacing:.06em;   /* 字距拉开，宋体的笔画挤在一起才松快 */
}
.foot-contact .brand-text em{
  color:var(--foot-ink-dim);
  font-weight:300;
  font-size:11px;
  letter-spacing:.16em;
}
/* 品牌介绍：13px / 400 / 行高 1.75 —— 页脚统一规格，比正文小一号 */
.foot-contact>p{
  margin:14px 0 12px;
  font-size:13px;font-weight:300;line-height:1.75;
  color:var(--foot-ink);
  max-width:520px;
}
/* 「在线体验系统 →」—— 页脚唯一的行动号召(CTA)，必须比周围信息更醒目。
   为什么单独提出来：它是「引导访客去看演示」的唯一入口，
   跟旁边的版权/备案这类被动信息不是一个性质，需要视觉优先级。

   ⚠ 字重要压过 .footer *{font-weight:300} 的总闸，
     所以用 .footer .foot-link 提高特异性，声明放在总闸之后。
   ⚠ 黄色不用纯 #FFD700 —— 在#241A12 深棕底上刺眼且廉价。
     选 #FFC94D（琥珀金），与页面主色 #F5A26B 同属暖色族，
     和深底对比度约 10:1，既是明确的黄，又不破坏整体调性。 */
.footer .foot-link{
  font-size:13px;font-weight:600;line-height:1.7;
  color:#FFC94D;
  padding:3px 0;
  border-bottom:1px solid rgba(255,201,77,.4);
  align-self:flex-start;
  font-synthesis-weight:none;   /* 只有 250/600 可用，别让浏览器硬凑 */
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.footer .foot-link:hover{
  color:#FFDD8A;
  border-bottom-color:rgba(255,221,138,.75);
}

/* ---------- 页脚 · 品牌+联系方式（左） | 二维码（右） ----------
   用 minmax 而非 1fr auto：auto 会被左侧长文本挤到换行，
   minmax(0,1fr) + auto 才能保证二维码始终贴右侧并排。 */
.foot-contact{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:flex-start;
  padding-bottom:0;border-bottom:0;
}
.fc-info{min-width:0}

/* 联系方式：固定三行 —— 电话/邮箱 · 地址 · 工作时间 */
/* 联系方式与「在线体验系统」之间要留出呼吸感，否则像挤在一起 */
.fc-list{display:flex;flex-direction:column;gap:2px;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.07)}
/* 下内边距为 0：否则最后一行底部会多出 5px，
   右侧版权就永远比「工作时间」低一截。行间距由 gap 控制。 */
.fc-list li{display:flex;align-items:flex-start;gap:11px;font-size:13px;font-weight:300;color:var(--foot-ink);padding:5px 0 0}
/* [hidden] 要能压住 flex 布局，否则 display:flex 会覆盖它 */
.fc-list li[hidden]{display:none}
.fc-ic{
  flex:none;width:21px;height:21px;border-radius:7px;margin-top:1px;
  display:grid;place-items:center;font-size:12px;
  background:rgba(255,255,255,.10);color:var(--c-primary-200);
}
/* 同一行里的第二个图标（邮箱）要小一号并靠紧文字 */
.fc-ic-sm{width:18px;height:18px;font-size:10px;border-radius:6px}
/* 电话与邮箱之间的间隔 */
.fc-gap{display:inline-block;width:12px}
.fc-line{min-width:0;line-height:1.75;word-break:break-word}
/* 电话 + 邮箱必须同行：整体不换行，邮箱过长时才在邮箱内部断行 */
.fc-line--contact{display:flex;align-items:center;flex-wrap:wrap;gap:0 4px}
.fc-list a{transition:color .25s var(--ease)}
.fc-list a:hover{color:var(--c-primary-300)}

/* 二维码：横向排列，逐个识别 */
/* 二维码外框顶部要跟左侧「美乐养老」文字顶部平齐（不是跟 44px 的 LOGO）。
   品牌区是 align-items:center，文字比 LOGO 矮，两者顶部相差 (44-文字行高)/2。
   实测差 11px，这里补回来。 */
.fc-qrs{
  display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;
  flex:none;justify-content:flex-end;margin-top:11px;
}
.fc-qr{text-align:center;width:92px}
.fc-qr-box{
  width:92px;height:92px;border-radius:11px;padding:7px;
  background:#fff;display:grid;place-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.22);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.fc-qr-box:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.fc-qr-box img{width:100%;height:100%;object-fit:contain;display:block;border-radius:4px}
.fc-qr-name{
  margin-top:7px;font-size:12px;color:rgba(255,255,255,.55);
  line-height:1.4;word-break:break-all;
}

/* 右侧列：二维码 + 版权。
   两端对齐 —— 列本身顶部对齐（align-self:start）让二维码与「美乐养老」齐平，
   版权用 margin-top:auto 推到整块底部与「工作时间」齐平。
   注意：列高由 grid 行高决定，auto 只在有剩余空间时才生效；
   若二维码比左列还高，版权会紧跟其后（这正是想要的效果）。 */
.fc-right{
  display:flex;flex-direction:column;align-items:flex-end;
  gap:22px;flex:none;align-self:start;height:100%;
}
/* ---------- 友情链接 / 自定义 / 版权 的行距 ----------
   这三行包在 .foot-meta 里，用它自己的 gap 控制行距。
   为什么不用 .fc-right 的 gap —— 那个 22px 是给「二维码 ↔ 文字」留的呼吸空间，
   三行纯文字之间也吃 22px 就显得松散，跟左侧联系方式的密集行距不匹配。
   .foot-meta margin-top:auto 让它贴到列底（与左侧「工作时间」底部对齐）。

   行距 7px 对齐左侧：.fc-list gap:2px + li padding-top:5px ≈ 7px。 */
.foot-meta{
  display:flex;flex-direction:column;align-items:flex-end;
  gap:7px;margin-top:auto;min-width:0;max-width:420px;
}

/* 页脚左栏的品牌介绍。
   ⚠ 这条以前漏写了规则 —— #footDesc 是<p>，浏览器给了默认 16px，
   在页脚里显得又大又粗，比旁边的备案号、版权信息都重。
   现在与 .foot-custom（备案号）/ .foot-copy（版权）统一：12.5px、字重 400。
   注意它在**左栏**（.fc-left），所以是左对齐，不要写成 right。 */
#footDesc{
  margin:0;padding:0;
  font-size:13px;font-weight:300;line-height:1.75;
  color:var(--foot-ink);
  max-width:520px;
}
.foot-copy{font-size:12px;color:var(--foot-ink-dim);white-space:nowrap;font-weight:250;line-height:1.75}

/* ---------- 友情链接（版权上方一行） ----------
   后台填「名称,网址」每行一条，留空则整行隐藏。
   与二维码同列（align-items:flex-end），右对齐。 */
/* 行距对齐左侧「手机号 / 地址 / 工作时间」：
   左侧是 gap:2px + li padding-top:5px ≈ 7px 行距，
   这里用 gap:7px + 行高 1.7×12.5px ≈ 21px，视觉密度接近。
   .fc-right 的 gap:22px 保留给「二维码 ↔ 友情链接」这一处
   （二维码是图形，需要呼吸空间），三行文字之间另设紧凑间距。 */
.foot-links{
  display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;
  gap:6px 14px;max-width:420px;
  /* 统一规格：12px / 250（比正文小一号、细一号） */
  font-size:12px;line-height:1.75;font-weight:250;
}
.foot-links[hidden]{display:none}
.fl-label{color:var(--foot-ink-dim);flex:none}
.fl-list{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:flex-end}
/* a 标签是行内元素，若后台写了多个 <a> 会挤在一起 —— 强制成块级再 flex 排 */
.fl-list a{
  display:inline-block;color:var(--foot-ink);
  text-decoration:none;font-weight:300;
  transition:color .25s var(--ease);white-space:nowrap;
}
.fl-list a:hover{color:var(--foot-ink-strong)}

/* ---------- 自定义内容（版权上方，支持 HTML，单行） ----------
   故意不加 white-space:nowrap —— 用户填的 HTML 可能有多个元素，
   硬压成一行会挤爆。改为「最多两行 + 超出省略」，
   既保持单行观感，又不会把长内容撑破布局。 */
.foot-custom{
  max-width:420px;
  /* 统一规格：12px / 250 */
  font-size:12px;line-height:1.75;font-weight:250;
  color:var(--foot-ink);
  text-align:right;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  /* 后台可能填 <a> / <span> / <img>，统一收敛内边距避免错位 */
}
.foot-custom[hidden]{display:none}
/* 自定义内容里的链接：与周围文字**同亮度**，不单独提亮。
   它是备案号/说明文字的一部分，不是需要被点击的导航链接，
   提亮会让右栏三行的视觉权重不一致。 */
.foot-custom a{color:var(--foot-ink);font-weight:300;text-decoration:none}
.foot-custom a:hover{color:var(--foot-ink-strong)}
.foot-custom img{max-height:16px;vertical-align:-3px;margin:0 2px}


/* ==========================================================
   弹层（微信 / 演示账号）
   ========================================================== */
.wx-mask,.demo-mask{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;padding:24px;
  background:rgba(42,30,21,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:fadeIn .25s var(--ease);
}
.wx-mask[hidden],.demo-mask[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.wx-panel,.demo-panel{
  position:relative;width:100%;max-width:400px;
  padding:38px 36px 32px;border-radius:var(--r-xl);
  background:var(--c-white);box-shadow:var(--sh-xl);
  text-align:center;animation:popIn .35s var(--ease);
}
@keyframes popIn{from{opacity:0;transform:scale(.92) translateY(14px)}to{opacity:1;transform:none}}

.wx-close{
  position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;color:var(--c-ink-500);
  transition:all .25s var(--ease);
}
.wx-close:hover{background:var(--c-ink-100);color:var(--c-ink-900)}
.wx-panel h3,.demo-panel h3{
  font-family:var(--font-serif);font-size:22px;font-weight:700;
  color:var(--c-ink-900);letter-spacing:-.014em;margin-bottom:8px;
}
.wx-note{font-size:13.5px;line-height:1.7;color:var(--c-ink-500);margin-bottom:24px}

.wx-qr{
  width:210px;height:210px;margin:0 auto 22px;border-radius:var(--r-md);
  background:var(--c-ink-50);border:1px dashed var(--c-ink-200);
  display:grid;place-items:center;overflow:hidden;
}
.wx-qr img{width:100%;height:100%;object-fit:contain}
.wx-qr span{font-size:13px;color:var(--c-ink-300);text-align:center;padding:16px;line-height:1.6}

.wx-id{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-radius:var(--r-sm);background:var(--c-primary-50);
  border:1px solid rgba(245,162,107,.32);text-align:left;
}
.wx-id[hidden]{display:none}
.wx-id span{font-size:13px;color:var(--c-ink-500);flex:none}
.wx-id b{
  flex:1;font-family:var(--font-num-sm);font-size:16.5px;
  color:var(--c-ink-900);letter-spacing:.02em;user-select:all;word-break:break-all;
}
.wx-copy{
  height:30px;padding:0 14px;border-radius:8px;flex:none;
  background:var(--c-white);border:1px solid var(--c-primary-300);
  color:var(--c-primary-700);font-size:12.5px;font-weight:600;
  transition:all .25s var(--ease);
}
.wx-copy:hover{background:var(--c-primary-500);color:#fff;border-color:transparent}
.wx-copy.done{background:var(--c-success);border-color:transparent;color:#fff}

.demo-cred{
  display:flex;flex-direction:column;gap:2px;text-align:left;
  padding:8px 20px;margin-bottom:24px;border-radius:var(--r-md);
  background:var(--c-ink-50);border:1px solid var(--c-ink-100);
}
.dc-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0}
.dc-row+.dc-row{border-top:1px dashed var(--c-ink-200)}
.dc-row span{font-size:13.5px;color:var(--c-ink-500);flex:none}
.dc-row b{
  font-family:var(--font-num-sm);font-size:16px;
  color:var(--c-ink-900);letter-spacing:.02em;word-break:break-all;text-align:right;user-select:all;
}

/* ---------- 悬浮 CTA ---------- */
.float-cta{
  position:fixed;right:26px;bottom:26px;z-index:90;
  height:56px;padding:0 22px;border-radius:var(--r-full);
  display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-600));
  color:#fff;font-size:15px;font-weight:600;
  box-shadow:0 12px 34px rgba(224,114,44,.42);
  transform:translateY(90px);opacity:0;pointer-events:none;
  transition:all .4s var(--ease);
}
.float-cta.show{transform:none;opacity:1;pointer-events:auto}
.float-cta:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(224,114,44,.5)}

/* ==========================================================
   动效 · 滚动进场
   ========================================================== */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* ==========================================================
   响应式
   ========================================================== */
@media (max-width:1180px){
  .fc-1{left:-16px}
  .fc-2{right:-14px}
  .hero-inner{gap:44px}
  .price-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .pc-head{height:auto}
  .price-card.featured{transform:none}
  .price-card.featured:hover{transform:translateY(-8px)}
  .cta-inner{grid-template-columns:1fr 420px;gap:40px;padding:48px}
}

@media (max-width:1023px){
  .container{padding:0 28px}
  .section{padding:60px 0}

  .nav-links{
    position:fixed;top:var(--head-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:12px 28px 24px;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--c-ink-200);
    box-shadow:var(--sh-lg);
    transform:translateY(-14px);opacity:0;pointer-events:none;
    transition:all .3s var(--ease);
  }
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-link{height:52px;padding:0 4px;border-radius:0;border-bottom:1px solid var(--c-ink-100);font-size:16px}
  .nav-link::after{display:none}
  .nav-link.active{color:var(--c-primary-700)}
  .nav-toggle{display:flex}
  .nav-demo{display:none}

  .hero{padding-top:calc(var(--head-h) + 48px);padding-bottom:72px}
  .hero-inner{grid-template-columns:1fr;gap:56px}
  .hero-copy{max-width:none;text-align:center}
  /* 移动端放开单行约束，改为居中折行，避免溢出裁切 */
  .hero-title{white-space:normal;font-size:clamp(30px,8.4vw,44px);letter-spacing:.02em}
  .hero-desc{margin-left:auto;margin-right:auto}
  .hero-cta,.hero-stats{justify-content:center}
  .eyebrow{margin-left:auto;margin-right:auto}
  .hero-visual{max-width:620px;margin:0 auto;width:100%}
  .device{transform:none}
  .hero-visual:hover .device{transform:none}

  .cmp{grid-template-columns:1fr;gap:20px}
  .cmp-arrow{height:44px;transform:rotate(90deg)}
  .feat-split{grid-template-columns:1fr}
  .feat-nav{
    flex-direction:row;overflow-x:auto;border-right:none;
    border-bottom:1px solid var(--c-ink-100);padding:12px;gap:6px;
    /* 移动端关键：6 个模块横向滑动 + 滚动吸附，
       否则会被容器裁掉，用户以为只有 1 个 */
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .feat-nav::-webkit-scrollbar{display:none}
  .fn-item{flex:none;padding:11px 16px;scroll-snap-align:center}
  .fn-item.active::before{display:none}
  .fn-ic{width:36px;height:36px;border-radius:11px}
  .fn-tx strong{font-size:14.5px}
  .fn-tx em{display:none}
  .feat-panels{padding:30px 26px;min-height:auto}
  .pc-common{grid-template-columns:1fr;gap:18px;padding:22px}
  .flow-stages{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:32px}
  .flow-wrap{padding:32px 28px 28px}
  .price-card.custom{grid-template-columns:1fr;gap:28px;padding:32px 28px}
  .flow-track{grid-template-columns:repeat(3,1fr);gap:32px 20px}
  .flow-line{display:none}

  .pane-kpis{grid-template-columns:repeat(2,1fr)}
  .pane-split{grid-template-columns:1fr}
  .profile{grid-template-columns:1fr}
  .pf-right{grid-template-columns:1fr}
  .eval{grid-template-columns:1fr}
  .bed-grid{grid-template-columns:1fr}
  .fee{grid-template-columns:1fr}

  .auto-grid{grid-template-columns:1fr;gap:18px}
  .af-stats{grid-template-columns:1fr 1fr;gap:22px 16px;padding:24px}
  /* 展开面板在窄屏收成单列 —— 两列会挤到每条不足 160px，说明文字换行成堆 */
  .af-panel{padding:20px 20px 22px}
  .af-panel-list{grid-template-columns:1fr;gap:8px}
  .af-panel-head h4{font-size:16.5px}
  .af-panel-n{display:none}
  .chain-strip{margin:-10px 0 26px}

  .cta-inner{grid-template-columns:1fr;padding:44px 36px}
  .cta-copy{text-align:center}
  .cta-points{align-items:center;display:inline-flex;flex-direction:column;margin:0 auto}
}

@media (max-width:767px){
  :root{--nav-h:66px}
  .container{padding:0 20px}
  .section{padding:50px 0}
  .brand-mark{width:36px;height:36px;font-size:19px;border-radius:11px}
  /* 图片 LOGO 在移动端同步缩小，但要覆盖上面那条的圆角 */
  .brand-mark.has-img{width:40px;height:40px;border-radius:0}
  /* 窄屏下品牌名收回一档，避免跟汉堡菜单挤在一起 */
  .brand-text strong{font-size:17px}

  .sec-head{margin-bottom:34px}
  /* 胶囊标签在390px 宽下 40px 高 + 20px 内边距偏占屏，收一档。
     图标必须同时锁 flex 基准（flex:0 0 16px + min/max-width）——
     只写 width:16px 的话窄屏下 SVG 仍会被 flex 压缩，
     表现就是「图标特别大、文字竖排」两个问题同时出现。 */
  .eyebrow{height:34px;padding:0 14px;font-size:13px;gap:7px;letter-spacing:.02em}
  .eyebrow .eb-ic{width:16px;height:16px;flex:0 0 16px;min-width:16px;max-width:16px}
  .hero{padding-top:calc(var(--head-h) + 36px)}
  .hero-title{font-size:32px;line-height:1.22;margin-bottom:16px}
  .hero-sub{font-size:14.5px;letter-spacing:.04em;margin-bottom:18px;padding-bottom:18px}
  .hero-desc{font-size:15.5px;line-height:1.85}
  .hero-cta{flex-direction:column;margin-top:28px}
  .hero-cta .btn{width:100%}
  .hero-stats{gap:0;justify-content:space-between;margin-top:36px;padding-top:28px}
  .stat{align-items:center;text-align:center;flex:1}
  .stat strong{font-size:26px}
  .stat span{font-size:11.5px}

  .device-body{height:330px}
  .mock-side{width:48px}
  .mock-main{padding:14px;gap:10px}
  .fc-1,.fc-2{display:none}

  .trust-inner{flex-direction:column;gap:20px;text-align:center}
  .trust-logos{gap:14px 24px;justify-content:center}
  .trust-logos span{font-size:14.5px}

  .cmp-col{padding:26px 22px}
  .cmp-head h3{font-size:21px}
  .cmp-list{gap:16px}
  .cmp-list strong{font-size:15px}
  .fp-list{grid-template-columns:1fr;gap:12px}
  .fp-head h3{font-size:22px}
  .fp-head p{font-size:14px}
  .fp-list li{padding:15px 16px}

  /* 链路条：≤1023 已改为 3 列网格（见上），这里只收尺寸。
     不要改回 flex 换行 —— 会出现行尾悬空箭头和「排班管理」孤行。 */
  .chain-strip{gap:7px}
  .cs-item{height:32px;padding:0 10px;font-size:12.5px;gap:6px}
  .cs-item i{width:17px;height:17px;font-size:10px}

  /* 手机：3 列在 390px 下每格不足 110px，「智慧评估」这类四字会挤。
     改单列纵向，7 个节点顺序往下走，用左侧竖线表示链条方向。 */
  .chain-strip{grid-template-columns:1fr;gap:0;margin:-6px 0 22px}
  .chain-strip .cs-item{justify-content:flex-start;height:40px;padding:0 14px;font-size:14px;border-radius:12px}
  .chain-strip .cs-item.loop{grid-column:auto;justify-self:stretch}
  .chain-strip .cs-item i{width:20px;height:20px;font-size:11px}
  /* 竖向连接线：除最后一项外都画一条向下的短线 */
  .chain-strip .cs-item:not(.loop)::after{
    content:"";position:absolute;left:24px;top:100%;width:1.5px;height:8px;
    background:var(--c-primary-200);
  }
  .chain-strip .cs-item{position:relative}

  /* 自动化板块在 ≤1023 已由 2 列改单列（见上），这里只收内边距与字号。
     条目是「序号 + 标题 + 说明」横排，不再有内层圆角盒子。 */
  .auto-col{padding:24px 22px 22px}
  .ac-head{padding-bottom:18px;gap:13px}
  .ac-ic{width:42px;height:42px;border-radius:14px}
  .ac-head h3{font-size:19px}
  .ac-head p{font-size:12.5px}
  .ac-list li{grid-template-columns:24px 1fr;column-gap:12px;padding:14px 0 13px}
  .ac-list li::before{width:24px;height:24px;border-radius:8px;font-size:11.5px}
  .ac-list strong{font-size:15px;margin-bottom:4px}
  .ac-note{font-size:13px;line-height:1.7}
  .ac-flow i{font-size:12.5px;padding:3px 9px}
  .ac-flow em{font-size:12.5px}
  .af-stats{padding:20px 16px;gap:18px 12px}
  .af-stats strong{font-size:26px}
  .af-stats span{font-size:11.5px}
  .af-note{padding:16px 18px;font-size:13.5px}
  .flow-stages{grid-template-columns:1fr;gap:10px;margin-bottom:26px}
  .fs-item{padding:13px 16px}
  .fs-item strong{font-size:15.5px}
  .flow-wrap{padding:24px 18px 22px}
  .flow-track{grid-template-columns:1fr;gap:24px;margin-top:4px}
  .flow-step{flex-direction:row;align-items:flex-start;text-align:left;gap:16px}
  .flow-dot{margin-bottom:0;box-shadow:none;width:42px;height:42px;flex:none}
  .flow-step h4{font-size:17px;margin-bottom:4px}
  .flow-step p{max-width:none;font-size:13px}
  .flow-foot{margin-top:28px;padding-top:20px}
  .pc-head{height:auto}
  .pc-price{height:auto}
  .wx-panel,.demo-panel{padding:32px 24px 26px}
  .wx-qr{width:180px;height:180px}

  .flow-track{grid-template-columns:repeat(2,1fr);gap:28px 16px}
  .flow-step p{font-size:12.5px;max-width:none}
  .flow-dot{width:46px;height:46px;margin-bottom:14px}
  .flow-step h4{font-size:17px}

  .tabs{padding:10px}
  .tab{height:40px;padding:0 16px;font-size:13.5px}
  /* 移动端才显示右侧渐隐提示（桌面端 tab 全部放得下，不需要） */
  .tabs-wrap.has-overflow::after{opacity:1}  .panels{padding:22px 18px 26px;min-height:auto}
  .pane-head{flex-direction:column;gap:12px;margin-bottom:20px}
  .pane-head h3{font-size:20px}
  .pane-kpis{grid-template-columns:1fr 1fr;gap:10px}
  .pk{padding:14px 15px}
  .pk strong{font-size:21px}
  .pane-box{padding:16px}
  .profile{gap:16px}
  .pf-left{padding:22px 18px}
  .beds{grid-template-columns:repeat(3,1fr)}
  .grade-main{flex-direction:column;text-align:center;gap:12px}
  .ring-wrap{flex-direction:column;align-items:flex-start;gap:16px}
  .ring-legend{width:100%}
  .fee-table{font-size:13px}
  .fee-table td,.fee-table th{padding:9px 6px}
  .fee-table tr.sum td:last-child{font-size:17px}

  .price-grid{grid-template-columns:1fr}
  .pc-price strong{font-size:40px}
  .ver-note{padding:16px 18px}

  .faq-q{padding:18px;font-size:15.5px;gap:14px}
  .faq-a p{padding:0 18px 20px;font-size:14.5px}

  .cta{padding:64px 0}
  .cta-inner{padding:34px 22px;border-radius:var(--r-lg);gap:32px}
  .cta-copy h2{font-size:27px}
  .cta-copy>p{font-size:15px}
  .cta-form{grid-template-columns:1fr}
  .btn-lg{height:54px;font-size:16px}

  /* 窄屏：单列堆叠，版权紧跟二维码即可，不要 margin-top:auto 留空隙 */
  .fc-right{align-items:flex-start;align-self:auto;height:auto}
  /* 窄屏单列堆叠，.foot-meta 的 margin-top:auto 不再需要 */
  .foot-meta{margin-top:0;align-items:flex-start;max-width:100%}
  .foot-links{justify-content:flex-start}
  .foot-contact{grid-template-columns:1fr;gap:30px}
  .fc-qrs{gap:16px}
  .float-cta{right:16px;bottom:16px;height:52px;padding:0 18px;font-size:14px}
  .float-cta span{display:none}
  .float-cta{width:52px;padding:0;justify-content:center}
}

@media (max-width:400px){
  .hero-stats{flex-wrap:wrap;gap:20px}
  .stat{min-width:42%}
  .beds{grid-template-columns:repeat(2,1fr)}
  .fc-qrs{gap:14px}
  .fc-qr{width:92px}
  .fc-qr-box{width:92px;height:92px;padding:7px}
}

/* 背景轮播是纯装饰动画。
   用户开启「减弱动态效果」时，不该让背景整个变成空白 ——
   那样正文会直接压在纯底色上，和 fixed 模式差别太大。
   这里让第一层保持可见（停在不透明状态），其余层仍隐藏。 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .hero-bg[data-mode="color"] .bg-layer:nth-child(1),
  .hero-bg[data-mode="slide"] .bg-slide:nth-child(1){
    animation:none!important;opacity:1!important;
  }
  .hero-bg[data-mode="color"] .bg-layer:not(:nth-child(1)),
  .hero-bg[data-mode="slide"] .bg-slide:not(:nth-child(1)){display:none}
}