/* ============================================================
   掘金有道 · 共享设计系统
   编辑杂志风：米白纸面 / 墨色标题 / 鎏金点缀 / 印章红
   ============================================================ */
:root{
  --paper: oklch(97.5% 0.012 92);
  --paper-2: oklch(94.5% 0.018 90);
  --paper-3: oklch(91% 0.02 88);
  --ink: oklch(23% 0.015 80);
  --ink-2: oklch(38% 0.02 80);
  --ink-3: oklch(55% 0.02 82);
  --gold: oklch(66% 0.13 82);
  --gold-deep: oklch(50% 0.11 80);
  --gold-pale: oklch(88% 0.06 88);
  --seal: #b5432e;
  --line: oklch(84% 0.02 85);
  --line-dark: oklch(30% 0.02 80);
  --serif:"Songti SC","STSong","Noto Serif SC","SimSun",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:16px;line-height:1.7;font-kerning:normal;-webkit-font-smoothing:antialiased}
::selection{background:var(--gold);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.num{font-family:Georgia,"Songti SC",serif;font-variant-numeric:tabular-nums}

/* ---------- 快讯带 ---------- */
.ticker{background:var(--ink);color:oklch(88% 0.03 88);overflow:hidden;white-space:nowrap;font-size:12.5px;letter-spacing:.04em;border-bottom:1px solid var(--line-dark)}
.ticker-inner{display:inline-block;padding:7px 0;animation:tick 42s linear infinite}
.ticker-inner span{margin:0 26px}
.ticker-inner span::before{content:"◆";color:var(--gold);margin-right:12px;font-size:8px;vertical-align:2px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 导航 ---------- */
nav{position:sticky;top:0;z-index:90;background:color-mix(in oklab,var(--paper) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{display:flex;align-items:center;gap:12px}
.logo-seal{width:38px;height:38px;background:var(--seal);color:#f5ead8;font-family:var(--serif);font-size:15px;font-weight:700;display:grid;place-items:center;border-radius:4px;line-height:1.1;text-align:center;letter-spacing:1px;box-shadow:2px 2px 0 color-mix(in oklab,var(--ink) 25%,transparent)}
.logo-text{font-family:var(--serif);font-size:21px;font-weight:900;letter-spacing:.12em}
.logo-text small{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.32em;color:var(--ink-3);font-weight:500}
.nav-links{display:flex;gap:28px;font-size:14.5px}
.nav-links a{position:relative;padding:4px 0;color:var(--ink-2);letter-spacing:.06em}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--gold-deep);transition:width .35s var(--ease)}
.nav-links a:hover,.nav-links a.on{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.on::after{width:100%}
.btn{display:inline-block;border:1.5px solid var(--ink);padding:9px 26px;font-size:14px;letter-spacing:.14em;background:var(--ink);color:var(--paper);transition:all .3s var(--ease);cursor:pointer;font-family:var(--sans)}
.btn:hover{background:var(--gold-deep);border-color:var(--gold-deep);transform:translateY(-2px);box-shadow:0 6px 18px rgba(138,99,32,.3)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper);box-shadow:none}
.btn.gold{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}
.btn.gold:hover{background:var(--seal);border-color:var(--seal)}
.btn.sm{padding:6px 16px;font-size:12.5px}
.menu-btn{display:none;font-size:22px;background:none;border:none;cursor:pointer;color:var(--ink)}

/* ---------- 子页面头部 ---------- */
.page-hero{border-bottom:1px solid var(--line);padding:58px 0 46px;position:relative;overflow:hidden}
.page-hero .crumb{font-size:12px;letter-spacing:.3em;color:var(--gold-deep);margin-bottom:14px}
.page-hero h1{font-family:var(--serif);font-size:clamp(32px,5vw,52px);font-weight:900;letter-spacing:.04em;line-height:1.25}
.page-hero p{margin-top:14px;max-width:62ch;color:var(--ink-2);font-size:15.5px}
.page-hero .stamp{position:absolute;right:8%;top:40px;width:84px;height:84px;border:2px solid var(--seal);border-radius:6px;color:var(--seal);display:grid;place-items:center;font-family:var(--serif);font-weight:900;font-size:19px;line-height:1.3;letter-spacing:2px;transform:rotate(7deg);text-align:center;opacity:.9}

/* ---------- 通用章节 ---------- */
section{padding:80px 0}
.sec-head{display:flex;align-items:baseline;gap:26px;margin-bottom:14px;flex-wrap:wrap}
.sec-no{font-family:Georgia,serif;font-size:14px;color:var(--gold-deep);letter-spacing:.2em}
.sec-head h2{font-family:var(--serif);font-size:clamp(28px,3.6vw,42px);font-weight:900;letter-spacing:.06em}
.sec-head .en{font-size:11px;letter-spacing:.4em;color:var(--ink-3);text-transform:uppercase;margin-left:auto}
.sec-desc{max-width:64ch;color:var(--ink-2);margin-bottom:44px;font-size:15.5px}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.more-link{font-size:14px;color:var(--gold-deep);font-weight:600;letter-spacing:.08em;border-bottom:1px solid var(--gold);padding-bottom:2px;transition:color .25s}
.more-link:hover{color:var(--seal);border-color:var(--seal)}

/* ---------- 首页英雄 ---------- */
.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 300px;gap:40px;padding:84px 0 72px}
.hero-kicker{display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.3em;color:var(--gold-deep);margin-bottom:26px}
.hero-kicker::before{content:"";width:44px;height:1px;background:var(--gold-deep)}
.hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(42px,6.2vw,84px);line-height:1.12;letter-spacing:.02em}
.hero h1 em{font-style:normal;color:var(--gold-deep);position:relative}
.hero h1 em::after{content:"";position:absolute;left:0;bottom:6px;width:100%;height:10px;background:var(--gold-pale);z-index:-1}
.hero-sub{margin-top:26px;max-width:56ch;font-size:16.5px;color:var(--ink-2)}
.hero-cta{margin-top:38px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-note{font-size:12.5px;color:var(--ink-3);letter-spacing:.05em}
.hero-side{border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:8px 0}
.v-text{writing-mode:vertical-rl;font-family:var(--serif);font-size:15px;letter-spacing:.5em;color:var(--ink-2);line-height:2}
.hero-stamp{width:74px;height:74px;border:2px solid var(--seal);border-radius:6px;color:var(--seal);display:grid;place-items:center;font-family:var(--serif);font-weight:900;font-size:17px;line-height:1.25;letter-spacing:2px;transform:rotate(6deg);text-align:center;padding:6px}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.stat{padding:26px;border-right:1px solid var(--line);transition:background .3s}
.stat:last-child{border-right:none}
.stat:hover{background:var(--paper-2)}
.stat b{display:block;font-family:Georgia,var(--serif);font-size:clamp(28px,3vw,40px);font-weight:700}
.stat b i{font-style:normal;color:var(--gold-deep);font-size:.55em;margin-left:2px}
.stat span{font-size:13px;color:var(--ink-3);letter-spacing:.12em}

/* ---------- 四大板块 ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--paper)}
.pillar{padding:36px 28px 32px;border-right:1px solid var(--line);transition:all .35s var(--ease)}
.pillar:last-child{border-right:none}
.pillar:hover{background:#fff;transform:translateY(-4px);box-shadow:0 14px 34px rgba(60,42,10,.1)}
.pillar .no{font-family:var(--serif);font-size:13px;color:var(--gold-deep);letter-spacing:.15em}
.pillar h3{font-family:var(--serif);font-size:22px;font-weight:900;margin:12px 0 10px;letter-spacing:.08em}
.pillar p{font-size:13.5px;color:var(--ink-2);line-height:1.8}
.pillar .tag{display:inline-block;margin-top:16px;font-size:11.5px;color:var(--gold-deep);border:1px solid var(--gold);padding:3px 10px;letter-spacing:.1em}

/* ---------- 玩法 ---------- */
.play-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.play{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 30px 30px;background:var(--paper);position:relative;transition:all .35s var(--ease);overflow:hidden}
.play:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--line-dark)}
.play::before{content:attr(data-no);position:absolute;right:18px;top:10px;font-family:Georgia,serif;font-size:52px;font-weight:700;color:var(--paper-3);transition:color .35s;z-index:0}
.play:hover::before{color:var(--gold-pale)}
.play>*{position:relative;z-index:1}
.play-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:8px}
.freq{font-size:11px;letter-spacing:.14em;color:#fff;background:var(--ink);padding:3px 10px;white-space:nowrap}
.freq.hot{background:var(--seal)}
.play h3{font-family:var(--serif);font-size:21px;font-weight:900;letter-spacing:.06em;margin-bottom:10px}
.play h3::after{content:"";display:block;width:26px;height:2px;background:var(--gold);margin-top:10px}
.play p{font-size:13.5px;color:var(--ink-2)}
.play .who{margin-top:14px;font-size:12px;color:var(--ink-3)}
.play .who b{color:var(--gold-deep);font-weight:600}

/* ---------- 会员 ---------- */
#member-sec{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tier{background:#fff;border:1px solid var(--line);padding:38px 34px 34px;position:relative;transition:all .4s var(--ease);display:flex;flex-direction:column}
.tier:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(60,42,10,.12)}
.tier.main{border:2px solid var(--gold-deep);box-shadow:0 18px 44px rgba(138,99,32,.16)}
.tier .rec{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--seal);color:#fff;font-size:11.5px;letter-spacing:.22em;padding:4px 16px;white-space:nowrap}
.tier h3{font-family:var(--serif);font-size:23px;font-weight:900;letter-spacing:.14em}
.tier .sub{font-size:12px;color:var(--ink-3);letter-spacing:.08em;margin-top:4px}
.tier .price{margin:24px 0 6px;display:flex;align-items:baseline;gap:6px}
.tier .price b{font-family:Georgia,var(--serif);font-size:44px;font-weight:700}
.tier .price b i{font-style:normal;font-size:16px;font-weight:400;margin-right:2px}
.tier .price span{font-size:13px;color:var(--ink-3)}
.tier .anchor{font-size:12.5px;color:var(--gold-deep);padding:8px 0;border-bottom:1px dashed var(--line);margin-bottom:20px}
.tier ul{flex:1}
.tier li{font-size:13.5px;padding:7px 0 7px 22px;position:relative;color:var(--ink-2)}
.tier li::before{content:"✦";position:absolute;left:0;color:var(--gold);font-size:11px;top:9px}
.tier li.off{color:var(--ink-3)}
.tier li.off::before{content:"—";color:var(--ink-3);top:8px}
.tier .btn{margin-top:24px;text-align:center;width:100%}

/* 对照表 */
.cmp{background:#fff;border:1px solid var(--line);overflow-x:auto}
.cmp table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.cmp th,.cmp td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left}
.cmp thead th{background:var(--ink);color:var(--paper);font-weight:500;letter-spacing:.1em;font-size:13px}
.cmp thead th.hl{background:var(--gold-deep);color:#fff}
.cmp thead th:first-child{color:oklch(80% 0.02 85)}
.cmp tbody tr:hover{background:var(--paper-2)}
.cmp td:first-child{font-weight:600;width:34%}
.cmp td{color:var(--ink-2)}
.cmp td.yes{color:var(--gold-deep);font-weight:700}
.cmp td.no{color:var(--ink-3)}

/* 计算器 */
.calc{background:var(--ink);color:oklch(90% 0.02 88);padding:44px 40px;display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:center}
.calc h3{font-family:var(--serif);font-size:24px;font-weight:900;letter-spacing:.1em;margin-bottom:6px}
.calc .sub{font-size:12.5px;color:oklch(70% 0.02 85);letter-spacing:.08em;margin-bottom:22px}
.calc-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer;border:1px solid oklch(38% 0.02 80);padding:10px 14px;transition:all .25s;user-select:none}
.opt:hover{border-color:var(--gold)}
.opt.on{border-color:var(--gold);background:oklch(30% 0.03 80)}
.opt .box{width:16px;height:16px;border:1.5px solid var(--gold);display:grid;place-items:center;font-size:11px;color:var(--gold);flex:none}
.opt.on .box::before{content:"✓"}
.opt .val{margin-left:auto;color:var(--gold);font-size:12px}
.calc-total{text-align:center;border-left:1px solid oklch(38% 0.02 80);padding-left:44px}
.calc-total .lbl{font-size:12px;letter-spacing:.3em;color:oklch(70% 0.02 85)}
.calc-total .big{font-family:Georgia,serif;font-size:56px;font-weight:700;color:var(--gold);margin:6px 0}
.calc-total .vs{font-size:13px;line-height:2}
.calc-total .vs b{color:#fff;font-size:17px}
.calc-total .vs em{font-style:normal;color:var(--seal);background:#fff;padding:1px 8px;font-weight:700}

/* ---------- 学堂 ---------- */
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.course{background:#fff;border:1px solid var(--line);padding:28px 26px;transition:all .35s var(--ease);display:flex;flex-direction:column;cursor:pointer}
.course:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(60,42,10,.11);border-color:var(--gold)}
.course .meta{display:flex;justify-content:space-between;font-size:11.5px;letter-spacing:.1em;margin-bottom:14px}
.course .meta .cat{color:var(--gold-deep);border:1px solid var(--gold);padding:2px 9px}
.course .meta .lv{color:var(--ink-3)}
.course h3{font-family:var(--serif);font-size:19px;font-weight:900;line-height:1.5;margin-bottom:8px}
.course p{font-size:13px;color:var(--ink-2);flex:1}
.course .foot{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line);display:flex;justify-content:space-between;align-items:center;font-size:12.5px}
.course .foot .t{color:var(--ink-3)}
.course .foot .p{color:var(--seal);font-weight:700}
.course .foot .p.free{color:var(--gold-deep)}
.teachers{margin-top:44px;display:flex;gap:14px;flex-wrap:wrap}
.tch{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:#fff;padding:10px 20px 10px 12px;font-size:13px;transition:border-color .3s}
.tch:hover{border-color:var(--gold-deep)}
.tch .av{width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--gold);display:grid;place-items:center;font-family:var(--serif);font-weight:900;font-size:16px;flex:none}
.tch b{display:block;font-weight:600}
.tch span{color:var(--ink-3);font-size:11.5px}

/* ---------- 对接墙 ---------- */
#match-sec{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tabs{display:flex;border:1px solid var(--line);background:#fff;margin-bottom:34px;flex-wrap:wrap}
.tab{padding:11px 26px;font-size:13.5px;letter-spacing:.1em;cursor:pointer;border-right:1px solid var(--line);transition:all .25s;color:var(--ink-2)}
.tab:last-child{border-right:none}
.tab.on{background:var(--ink);color:var(--paper)}
.tab:not(.on):hover{background:var(--paper-2)}
.wall{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card-m{background:#fff;border:1px solid var(--line);border-top:3px solid var(--ink);padding:24px;transition:all .3s var(--ease);display:flex;flex-direction:column}
.card-m.supply{border-top-color:var(--gold-deep)}
.card-m.demand{border-top-color:var(--seal)}
.card-m.event{border-top-color:var(--ink)}
.card-m.mine{outline:2px dashed var(--gold-deep);outline-offset:-6px}
.card-m:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(60,42,10,.1)}
.card-m .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px}
.badge{font-size:11px;letter-spacing:.16em;padding:3px 10px;color:#fff;background:var(--gold-deep);white-space:nowrap}
.badge.d{background:var(--seal)}
.badge.e{background:var(--ink)}
.card-m .loc{font-size:12px;color:var(--ink-3);text-align:right}
.card-m h4{font-family:var(--serif);font-size:17px;font-weight:900;margin-bottom:8px;line-height:1.55}
.card-m p{font-size:13px;color:var(--ink-2);flex:1}
.card-m .foot{margin-top:16px;padding-top:13px;border-top:1px dashed var(--line);display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);align-items:center}
.card-m .foot a{color:var(--gold-deep);font-weight:600;cursor:pointer}
.card-m .foot a:hover{text-decoration:underline}
.card-m .del{color:var(--ink-3);cursor:pointer;font-size:11.5px;border:1px solid var(--line);padding:2px 8px}
.card-m .del:hover{color:var(--seal);border-color:var(--seal)}

/* ---------- 商城 ---------- */
.mall-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.goods{background:#fff;border:1px solid var(--line);transition:all .35s var(--ease);display:flex;flex-direction:column}
.goods:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(60,42,10,.12);border-color:var(--gold)}
.goods .pic{height:190px;display:grid;place-items:center;border-bottom:1px solid var(--line);overflow:hidden}
.goods:hover .pic svg{transform:scale(1.06) rotate(-2deg)}
.goods .pic svg{transition:transform .5s var(--ease)}
.goods .body{padding:20px;display:flex;flex-direction:column;flex:1}
.goods h4{font-family:var(--serif);font-size:16.5px;font-weight:900;margin-bottom:6px}
.goods p{font-size:12.5px;color:var(--ink-3);flex:1}
.goods .price{margin-top:14px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.goods .price b{font-family:Georgia,serif;font-size:23px;color:var(--seal)}
.goods .price s{font-size:12.5px;color:var(--ink-3)}
.goods .price em{font-style:normal;font-size:10.5px;color:#fff;background:var(--gold-deep);padding:2px 7px;letter-spacing:.1em;margin-left:auto}
.goods .add{margin-top:14px}
.mall-note{margin-top:26px;font-size:13px;color:var(--ink-2);border-left:3px solid var(--gold);padding:10px 18px;background:var(--paper-2)}

/* 购物车条 */
.cartbar{
  position:fixed;bottom:0;left:0;right:0;z-index:80;background:var(--ink);color:var(--paper);
  transform:translateY(100%);transition:transform .4s var(--ease);box-shadow:0 -10px 30px rgba(0,0,0,.2);
}
.cartbar.show{transform:none}
.cartbar .in{max-width:1200px;margin:0 auto;padding:12px 28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cartbar .cnt{font-family:Georgia,serif;font-size:20px;color:var(--gold);min-width:64px}
.cartbar .sum{font-size:13px;color:oklch(80% 0.02 85)}
.cartbar .sum b{color:var(--gold);font-size:19px;font-family:Georgia,serif;margin:0 4px}
.cartbar .list{flex:1;font-size:12px;color:oklch(70% 0.02 85);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}
.cartbar .btn{padding:8px 22px}

/* ---------- 榜单带 / 口碑 / FAQ / 步骤 / CTA ---------- */
.rankband{background:var(--ink);color:oklch(90% 0.02 88);padding:54px 0;overflow:hidden}
.rankband .ttl{font-family:var(--serif);font-size:20px;letter-spacing:.3em;color:var(--gold);text-align:center;margin-bottom:30px}
.rank-marquee{overflow:hidden;white-space:nowrap}
.rank-inner{display:inline-block;animation:tick 38s linear infinite}
.rank-item{display:inline-block;margin:0 34px;font-size:14.5px}
.rank-item b{color:var(--gold);font-family:var(--serif);margin-right:8px}
.rank-item span{color:oklch(75% 0.02 85);font-size:12.5px}

.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.quote{background:#fff;border:1px solid var(--line);padding:32px 28px;position:relative;transition:all .3s}
.quote:hover{box-shadow:0 14px 32px rgba(60,42,10,.1)}
.quote::before{content:"「";font-family:var(--serif);font-size:54px;color:var(--gold-pale);position:absolute;top:6px;left:16px;line-height:1}
.quote p{font-size:14px;color:var(--ink-2);line-height:1.9;position:relative;margin-top:14px}
.quote .who{margin-top:20px;padding-top:14px;border-top:1px dashed var(--line);font-size:12.5px}
.quote .who b{font-family:var(--serif);font-size:14.5px}
.quote .who span{color:var(--ink-3);margin-left:8px}

.faq-list{max-width:860px;margin:0 auto}
.faq{border:1px solid var(--line);background:#fff;margin-bottom:14px}
.faq-q{padding:20px 26px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:600;font-size:15px;gap:16px;user-select:none}
.faq-q .ic{font-family:Georgia,serif;color:var(--gold-deep);font-size:20px;transition:transform .35s var(--ease);flex:none}
.faq.open .ic{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq-a p{padding:0 26px 22px;font-size:14px;color:var(--ink-2)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:#fff;margin-bottom:56px}
.step{padding:32px 26px;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:none}
.step .n{font-family:Georgia,serif;font-size:40px;color:var(--gold-pale);font-weight:700;position:absolute;top:14px;right:18px;transition:color .3s}
.step:hover .n{color:var(--gold)}
.step h4{font-family:var(--serif);font-size:18px;font-weight:900;margin-bottom:8px;letter-spacing:.06em}
.step p{font-size:13px;color:var(--ink-2)}

.cta-box{background:var(--ink);color:var(--paper);padding:64px 56px;display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-box::after{content:"會";position:absolute;right:-16px;bottom:-38px;font-family:var(--serif);font-size:220px;color:oklch(30% 0.02 80);line-height:1;font-weight:900}
.cta-box h3{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);font-weight:900;letter-spacing:.08em}
.cta-box p{color:oklch(75% 0.02 85);font-size:14px;margin-top:10px}
.cta-box .btn{position:relative;z-index:1}

/* ---------- 表单 ---------- */
.form-box{background:#fff;border:1px solid var(--line);padding:40px 38px}
.form-box h3{font-family:var(--serif);font-size:22px;font-weight:900;letter-spacing:.1em;margin-bottom:4px}
.form-box .sub{font-size:12.5px;color:var(--ink-3);margin-bottom:24px;letter-spacing:.06em}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:12.5px;letter-spacing:.1em;color:var(--ink-2);margin-bottom:6px}
.fld input,.fld select,.fld textarea{
  width:100%;padding:11px 14px;border:1px solid var(--line);background:var(--paper);
  font-family:var(--sans);font-size:14px;color:var(--ink);outline:none;transition:border .25s;
}
.fld textarea{min-height:96px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--gold-deep);background:#fff}
.fld .radio-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.fld .rchip{border:1px solid var(--line);padding:9px 18px;font-size:13.5px;cursor:pointer;transition:all .25s;background:var(--paper);user-select:none}
.fld .rchip.on{border-color:var(--gold-deep);background:var(--gold-pale);color:var(--gold-deep);font-weight:600}
.form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}

/* ---------- 弹窗 / Toast ---------- */
.mask{position:fixed;inset:0;background:rgba(28,25,20,.55);z-index:200;display:none;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .3s}
.mask.show{display:flex;opacity:1}
.modal{background:var(--paper);width:min(560px,100%);padding:40px 38px;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.3);transform:translateY(18px);transition:transform .35s var(--ease);max-height:88vh;overflow:auto;position:relative}
.mask.show .modal{transform:none}
.modal .close{position:absolute;top:14px;right:18px;font-size:22px;cursor:pointer;color:var(--ink-3);background:none;border:none}
.modal h3{font-family:var(--serif);font-size:23px;font-weight:900;letter-spacing:.1em;margin-bottom:6px}
.modal .sub{font-size:12.5px;color:var(--ink-3);margin-bottom:22px;letter-spacing:.06em}
.modal .btn{width:100%;margin-top:10px}
/* 课程详情目录 */
.lesson-list{border-top:1px solid var(--line);margin-top:8px}
.lesson{display:flex;gap:14px;padding:11px 4px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-2);align-items:baseline}
.lesson .ln{font-family:Georgia,serif;color:var(--gold-deep);min-width:26px}
.lesson .lk{margin-left:auto;font-size:11px;color:var(--ink-3);white-space:nowrap}
.modal .mrow{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2);padding:8px 0;border-bottom:1px dashed var(--line)}
.modal .mrow b{color:var(--ink)}

/* ---------- 页脚 ---------- */
footer{border-top:1px solid var(--line);padding:52px 0 34px;background:var(--paper-2)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
.foot-grid h5{font-size:12.5px;letter-spacing:.24em;color:var(--ink-3);margin-bottom:16px}
.foot-grid a{display:block;font-size:13.5px;color:var(--ink-2);padding:4px 0;transition:color .2s;cursor:pointer}
.foot-grid a:hover{color:var(--gold-deep)}
.foot-brand p{font-size:13px;color:var(--ink-2);max-width:36ch;margin-top:14px}
.copy{border-top:1px solid var(--line);padding-top:22px;font-size:12px;color:var(--ink-3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;letter-spacing:.05em}

/* ---------- 响应式 ---------- */
@media (max-width:1000px){
  .play-grid,.course-grid,.wall,.quote-grid{grid-template-columns:repeat(2,1fr)}
  .pillars,.stats-row,.steps{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}
  .mall-grid{grid-template-columns:repeat(2,1fr)}
  .tiers{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}
  .calc{grid-template-columns:1fr;padding:34px 26px}
  .calc-total{border-left:none;padding-left:0;border-top:1px solid oklch(38% 0.02 80);padding-top:26px}
  .hero-grid{grid-template-columns:1fr;padding-top:56px}
  .hero-side{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .form-grid2{grid-template-columns:1fr}
  .page-hero .stamp{display:none}
}
@media (max-width:640px){
  .nav-links{display:none}
  .menu-btn{display:block}
  .play-grid,.course-grid,.wall,.quote-grid,.pillars,.stats-row,.steps,.mall-grid{grid-template-columns:1fr}
  .stat{border-right:none;border-bottom:1px solid var(--line)}
  section{padding:56px 0}
  .calc-opts{grid-template-columns:1fr}
  .cta-box{padding:44px 28px}
  .nav-cta-text{display:none}
  .cartbar .list{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}