@charset "UTF-8";
/* =========================================================================
   趣闲赚 · 基础层
   Tokens + 重置 + 全站骨架（顶部通栏 / 导航 / 页脚 / 按钮 / 卡片 / 台账行）
   度量系统：安全边距 120 → 内容区 1200；区块纵向 96；卡片 padding 32 / 圆角 24
   ========================================================================= */

/* 自托管 Archivo Black：所有金额/数字专用（设计稿指定，无系统替代品）。
   不依赖任何外部字体服务，国内直连可用。 */
@font-face{
  font-family:"Archivo Black";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/archivo-black-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo Black";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/archivo-black-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* —— 底色三档：白 / 暖纸 / 深松 —— */
  --paper:#FAF6EE;
  --paper2:#F4EEE2;
  --white:#FFFFFF;
  --deep:#07393A;
  --deep2:#0C4A4C;
  --deep3:#115455;
  --deep4:#0E4F51;
  --deepLine:#1C6C6D;
  --deepLine2:#1E6465;
  /* 深色底上的正文层级 */
  --deepT1:#9CC2C0;
  --deepT2:#A8C4C2;
  --deepT3:#9FD9D8;
  --deepT4:#7FB3B1;
  --deepT5:#6E9D9B;
  --deepT6:#BFE3E1;
  --deepT7:#A8CCC9;
  --deepT8:#8FB5B3;
  /* —— 墨色字阶 —— */
  --ink:#12211F;
  --ink2:#55625F;
  --ink3:#8E9A96;
  --ink4:#A2AB9F;
  --ink5:#B0B8B4;
  --warm:#7A6A55;
  --warm2:#6B5A3C;
  --warm3:#C4BBA9;
  --warm4:#6B6F6D;
  /* —— 描边 —— */
  --line:#E8E0D2;
  --line2:#EDE4D4;
  --line3:#DFD5C2;
  --line4:#E0D6C4;
  --line5:#D8CEBB;
  --line6:#E4DAC8;
  /* 台账分隔线（浅发丝线） */
  --rule:rgba(23,33,31,.08);
  /* —— 品牌青 = 身份 —— */
  --teal:#1CB7B9;
  --tealD:#0E8A8C;
  --tealP:#E4F5F5;
  --tealL:#F1F7F6;
  --tealBd:#D9EDEC;
  /* —— 金 = 只用于钱 —— */
  --gold:#EDAF1C;
  --goldD:#B07E06;
  --goldDD:#8A6200;
  --goldInk:#3A2A00;
  --goldP:#FDF3DC;
  --goldP2:#FBE9B8;
  --goldL:#FDF6E4;
  --goldCream:#FFFBF0;
  --goldBd:#F0DFAE;
  --goldBd2:#F2E2B8;
  --goldBd3:#F0E4CC;
  --goldBd4:#F0DFB4;
  --goldT:#F9DE94;
  --goldT2:#FFD86B;
  /* —— 绿 = 完成 —— */
  --green:#12C08B;
  --greenD:#12A97A;
  --greenT:#0F8A63;
  --greenP:#E6F7EE;
  /* —— 字体分工 —— */
  --font:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --num:"Archivo Black","Noto Sans SC",sans-serif;
  --alt:"Archivo","Noto Sans SC",sans-serif;
  /* —— 阴影（与设计稿一致，不额外增加） —— */
  --sh-card:0 12px 34px -10px rgba(18,33,31,.05);
  --sh-float:0 14px 32px -6px rgba(18,33,31,.13);
  --sh-phone:0 26px 60px -12px rgba(18,33,31,.18),0 8px 18px -4px rgba(18,33,31,.1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.6 var(--font);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
svg{display:block}
:focus-visible{outline:2px solid var(--tealD);outline-offset:3px;border-radius:6px}

/* ---------- 布局骨架 ---------- */
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:20px}
.band--white{background:var(--white)}
.band--paper{background:var(--paper)}
.band--deep{background:var(--deep)}
.band--pt{padding-block:96px}
.band--pt-sm{padding-block:32px 96px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:99;background:var(--deep);color:#fff;padding:10px 16px;border-radius:0 0 12px 0}
.skip-link:focus{left:0}

/* ---------- 导航栏 ---------- */
.nav{background:var(--white);position:relative}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand__logo{width:46px;height:46px;border-radius:14px;object-fit:cover}
.brand__txt{display:flex;flex-direction:column;gap:1px}
.brand__name{font-size:20px;line-height:24px;font-weight:900;color:var(--ink)}
.brand__slogan{font-size:11px;line-height:14px;font-weight:700;color:var(--goldD)}
.nav__menu{display:flex;align-items:center;gap:4px}
.nav__menu a{
  display:inline-block;padding:9px 17px;border-radius:999px;
  font-size:14.5px;line-height:20px;font-weight:500;color:var(--ink2);
  transition:background-color .18s ease,color .18s ease;
}
.nav__menu a:hover{background:var(--paper2);color:var(--ink)}
.nav__menu a.is-on{background:var(--tealP);color:var(--tealD);font-weight:700}
.nav__cta{
  display:inline-flex;align-items:center;gap:9px;padding:12px 24px;border-radius:999px;
  background:var(--tealD);color:#fff;font-size:15px;line-height:20px;font-weight:700;
  transition:background-color .18s ease;
}
.nav__cta:hover{background:#0C7C7E}
.nav__burger{display:none;width:36px;height:36px;border-radius:11px;background:var(--paper2);align-items:center;justify-content:center}

/* ---------- 区块标题组 ---------- */
.sec-head{display:flex;flex-direction:column;gap:16px}
.sec-no{display:inline-flex;align-items:center;gap:12px;font:400 13px/18px var(--num);color:var(--tealD)}
.sec-no i{display:block;width:44px;height:2px;border-radius:999px;background:var(--tealD)}
.sec-title{font-size:40px;line-height:52px;font-weight:900;color:var(--ink)}
.sec-title--sm{font-size:38px;line-height:48px}
.sec-desc{font-size:15px;line-height:28px;color:var(--ink2)}
.sec-desc--lg{font-size:17px;line-height:31px}
.sec-head--deep .sec-no{color:var(--gold)}
.sec-head--deep .sec-no i{background:var(--gold)}
.sec-head--deep .sec-title{color:#fff}
.sec-head--deep .sec-desc{color:var(--deepT4)}
.sec-head--tight{gap:0}
.sec-head--tight .sec-no{margin-bottom:16px}

/* ---------- 胶囊标签 ---------- */
.pill{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;font-size:12.5px;line-height:17px;font-weight:700}
.pill--teal{background:var(--tealP);color:var(--tealD)}
.pill--gold{background:var(--goldP2);color:var(--goldDD)}
.pill--mute{background:var(--paper2);color:var(--ink2);font-weight:500;padding:7px 14px}
.pill--dot{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;line-height:18px;font-weight:500;color:var(--ink2)}
.pill--dot i{display:block;width:8px;height:8px;border-radius:999px;background:var(--green)}
.pill--deepdot{background:var(--deep4);color:var(--deepT3);border:0}
.pill--deepdot i{width:7px;height:7px;background:#2EC9C6}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:999px;font-weight:700;white-space:nowrap;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn svg{flex:none}
.btn--teal{background:var(--tealD);color:#fff}
.btn--teal:hover{background:#0C7C7E}
.btn--gold{background:var(--gold);color:var(--goldInk)}
.btn--gold:hover{background:#E0A20F}
.btn--ghost{background:#fff;border:1px solid var(--line4);color:var(--ink)}
.btn--ghost:hover{background:var(--paper)}
.btn--ghost-line{background:#fff;border:1px solid var(--line3);color:var(--ink)}
.btn--ghost-line:hover{background:var(--paper)}
.btn--outline-deep{border:1px solid #2E6B6B;color:var(--deepT3)}
.btn--outline-deep:hover{background:rgba(255,255,255,.06)}
.btn--lg{padding:19px 34px;font-size:16.5px;line-height:22px}
.btn--md{padding:18px 32px;font-size:15.5px;line-height:21px}
.btn--sm{padding:15px 28px;font-size:15px;line-height:20px}
.btn--xs{padding:15px 26px;font-size:15px;line-height:20px}
.btn--w{padding-block:18px;width:100%}
.btn--txt{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;line-height:20px;font-weight:700;color:var(--gold)}
.btn--txt:hover{color:var(--goldT)}

/* ---------- 卡片 ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px}
.card--shadow{box-shadow:var(--sh-card)}
.card--paper{background:var(--paper)}
.card--cream{background:var(--goldCream);border-color:var(--goldBd)}
.card--teal{background:var(--tealL);border-color:var(--tealBd)}
.card--plain{border:0}
.card__title{font-size:30px;line-height:38px;font-weight:900;color:var(--ink)}
.card__title--sm{font-size:21px;line-height:28px;font-weight:900}
.card__desc{font-size:14px;line-height:26px;color:var(--ink2)}
.card__desc--sm{font-size:13.5px;line-height:24px}

/* 台账小票 / 台账行 */
.receipt{border-radius:16px;border:1px solid var(--line)}
.receipt--cream{border-color:var(--goldBd3);background:#fff}
.receipt--teal{border-color:var(--tealBd);background:#F7FBFB}
.ledgerrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:11px;border-top:1px solid var(--rule)}
.ledgerrow:first-child{border-top:0}
.ledgerrow span{font-size:13.5px;line-height:18px;color:var(--ink2)}
.ledgerrow b{font-size:14px;line-height:18px;font-weight:900;color:var(--ink)}
.ledgerrow b.is-gold{color:var(--goldD)}
.ledgerrow b.is-teal{color:var(--tealD)}

/* ---------- 列表条目 ---------- */
.bullet{display:flex;gap:12px;align-items:flex-start}
.bullet__dot{flex:none;width:6px;padding-top:10px}
.bullet__dot i{display:block;width:6px;height:6px;border-radius:999px;background:var(--teal)}
.bullet__dot--gold i{background:var(--gold)}
.bullet p{flex:1;font-size:15px;line-height:26px;color:var(--ink2)}

/* 卡头：图标底 + 标题 */
.card-head{display:flex;align-items:center;gap:12px}
.card-head__ico{flex:none;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.card-head__ico--teal{background:var(--tealP)}
.card-head__ico--gold{background:#FDF0D4}
.card-head h3{font-size:20px;line-height:28px;font-weight:900;color:var(--ink)}

/* ---------- 页脚 ---------- */
.foot{background:#fff;padding-block:64px 48px;overflow:hidden}
.foot--paper{background:var(--paper)}
.foot__top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-bottom:28px}
.foot__brand{display:flex;align-items:center;gap:14px}
.foot__brand img{width:48px;height:48px;border-radius:14px}
.foot__brand b{display:block;font-size:17px;line-height:22px;font-weight:900;color:var(--ink)}
.foot__brand span{display:block;font-size:12.5px;line-height:17px;color:var(--ink3)}
.foot__nav{display:flex;align-items:center;gap:28px}
.foot__nav a{font-size:13.5px;line-height:18px;font-weight:500;color:var(--ink2)}
.foot__nav a:hover{color:var(--tealD)}
.foot__hr{height:1px;background:var(--rule)}
.foot__risk{display:flex;gap:12px;padding-top:26px}
.foot__risk i{flex:none;width:3px;height:74px;border-radius:999px;background:var(--gold)}
.foot__risk p{flex:1;font-size:12.5px;line-height:22px;color:var(--warm4)}
.foot__risk b{color:var(--goldDD)}
.foot__bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:26px}
.foot__bottom p{font-size:12.5px;line-height:18px;color:var(--ink4)}
.foot__legal{display:flex;align-items:center;gap:20px}
.foot__legal a{font-size:12.5px;line-height:18px;color:var(--ink3)}
.foot__legal a:hover{color:var(--tealD)}
.foot__mark{display:flex;align-items:center;gap:48px;padding-top:34px}
.foot__mark b{font:400 120px/130px var(--num);color:var(--paper2)}
.foot__mark i{flex:1;height:1px;background:linear-gradient(90deg,rgba(216,205,185,.9),rgba(216,205,185,0))}

/* ---------- 入场动效 ---------- */
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- 栅格 ---------- */
.grid{display:grid;gap:24px}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(480px,1fr))}
.split{display:grid;gap:48px;align-items:start}
.split--hero{grid-template-columns:628fr 524fr}
.split--banner{grid-template-columns:1fr 392px;gap:56px}
.split--dl{grid-template-columns:1fr 376px;gap:56px}
.split--main{grid-template-columns:768fr 384fr}
.split--side{grid-template-columns:384fr 768fr}
.stack{display:flex;flex-direction:column}
.gap-16{gap:16px}.gap-14{gap:14px}.gap-24{gap:24px}.gap-12{gap:12px}.gap-44{gap:44px}.gap-48{gap:48px}

/* ---------- 响应式 ---------- */
@media (max-width:1180px){
  .split,.split--hero,.split--banner,.split--dl,.split--main,.split--side{grid-template-columns:1fr;gap:32px}
  .grid--4,.grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .grid--2{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav .wrap{height:auto;padding-block:12px}
  .nav__menu{display:none}
  .nav__menu.is-open{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;left:20px;right:20px;top:100%;background:#fff;
    padding:12px;border-radius:20px;box-shadow:var(--sh-float);z-index:20;
  }
  .nav__menu.is-open a{padding:12px 16px;font-size:16px}
  .nav__cta{display:none}
  .nav__burger{display:flex}
  .brand__logo{width:36px;height:36px;border-radius:11px}
  .brand__name{font-size:17px;line-height:22px}
  .brand__slogan{font-size:10px;line-height:13px}
  .band--pt{padding-block:48px}
  .band--pt-sm{padding-block:24px 48px}
  .sec-title{font-size:28px;line-height:38px}
  .sec-desc--lg{font-size:14.5px;line-height:25px}
  .card{padding:24px;border-radius:24px}
  .card__title{font-size:22px;line-height:31px}
  .foot{padding-block:40px 32px}
  .foot__top{flex-direction:column;gap:20px}
  .foot__nav{flex-wrap:wrap;gap:18px}
  .foot__bottom{flex-direction:column;align-items:flex-start;gap:10px}
  .foot__legal{flex-wrap:wrap;gap:14px}
  .foot__mark{padding-top:24px;gap:20px}
  .foot__mark b{font-size:72px;line-height:80px}
}