:root {
  --night: #0b1024;
  --ink: #111832;
  --ink-soft: #39415f;
  --paper: #f8f5ed;
  --paper-2: #eee8da;
  --gold: #bd8c3b;
  --gold-light: #efd59b;
  --jade: #49877c;
  --rose: #a75563;
  --line: rgba(17, 24, 50, .13);
  --shadow: 0 20px 55px rgba(5, 10, 28, .15);
  font-family: "Noto Serif SC", "Songti SC", serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.sky { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
.sky::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 10%, rgba(189,140,59,.13), transparent 30%), linear-gradient(180deg, #f6f1e6, #fbf9f3 50%, #eee8da); }
.sky i { position: absolute; border: 1px solid rgba(189,140,59,.16); width: 360px; height: 360px; border-radius: 50%; }
.sky i:nth-child(1) { top: -190px; right: -80px; }
.sky i:nth-child(2) { top: 27%; left: -270px; width: 520px; height: 520px; }
.sky i:nth-child(3) { bottom: -290px; right: -130px; width: 620px; height: 620px; }

.site-header { height: 76px; padding: 0 clamp(20px, 5vw, 72px); display: flex; align-items: center; gap: 30px; position: sticky; top: 0; z-index: 20; background: rgba(248,245,237,.9); border-bottom: 1px solid rgba(17,24,50,.08); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: .14em; white-space: nowrap; }
.brand small { display: block; margin-top: 2px; font-size: 9px; letter-spacing: .3em; color: var(--gold); }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--gold); color: var(--gold); font-family: "Ma Shan Zheng", cursive; font-size: 25px; transform: rotate(45deg); }
.brand-mark::first-letter { transform: rotate(-45deg); }
.desktop-nav { display: flex; gap: clamp(16px, 2vw, 30px); margin: auto; font-size: 14px; color: var(--ink-soft); }
.desktop-nav a { position: relative; padding: 26px 0; }
.desktop-nav a::after { content:""; position:absolute; left:50%; right:50%; bottom:16px; height:1px; background:var(--gold); transition:.25s; }
.desktop-nav a:hover::after, .desktop-nav a.active::after { left:0; right:0; }
.header-actions { display:flex; gap:10px; align-items:center; }
.icon-button, .ghost-button { border: 1px solid var(--line); background: rgba(255,255,255,.35); color: var(--ink); height: 38px; }
.icon-button { width:38px; border-radius:50%; }
.ghost-button { border-radius: 20px; padding: 0 16px; font-size: 13px; }

main { min-height: calc(100vh - 76px); }
.page { width: min(1120px, calc(100% - 36px)); margin: 0 auto; padding: 60px 0 110px; animation: reveal .45s ease both; }
@keyframes reveal { from { opacity:0; transform:translateY(10px); } }
.eyebrow { color: var(--gold); font-size: 12px; letter-spacing: .35em; text-transform: uppercase; }
.page-title { margin: 10px 0 8px; font-family: "Ma Shan Zheng", cursive; font-size: clamp(42px, 7vw, 72px); font-weight: 400; line-height: 1.1; }
.lead { color: var(--ink-soft); line-height: 1.9; max-width: 700px; }
.section-heading { margin: 0 0 25px; font-size: clamp(26px, 4vw, 38px); font-weight: 500; }
.section-heading small { display:block; color:var(--gold); font-size:11px; letter-spacing:.35em; margin-bottom:8px; }

.hero { width: min(1280px, calc(100% - 36px)); min-height: 680px; margin: 24px auto 0; position: relative; display: grid; grid-template-columns: 1.08fr .92fr; overflow: hidden; background: var(--night); color: #f6f0e3; border-radius: 2px 2px 80px 2px; box-shadow: var(--shadow); }
.hero-copy { padding: clamp(55px, 8vw, 112px); z-index:2; }
.hero-kicker { color:var(--gold-light); letter-spacing:.45em; font-size:12px; }
.hero h1 { font-family:"Ma Shan Zheng"; font-weight:400; font-size:clamp(64px,9vw,116px); margin:22px 0 10px; line-height:.85; }
.hero h1 span { display:block; font-family:"Noto Serif SC"; font-size:clamp(17px,2vw,26px); margin-top:32px; letter-spacing:.25em; color:#d8d3c8; }
.hero p { max-width:540px; color:#aeb6ca; line-height:2; margin:28px 0 36px; }
.hero-actions, .form-actions { display:flex; gap:12px; flex-wrap:wrap; }
.primary-button, .secondary-button { border:0; padding:14px 24px; border-radius:2px; transition:.2s; display:inline-flex; justify-content:center; align-items:center; gap:8px; }
.primary-button { background:var(--gold); color:white; box-shadow:0 9px 22px rgba(189,140,59,.22); }
.secondary-button { background:transparent; color:inherit; border:1px solid rgba(255,255,255,.25); }
.primary-button:hover, .secondary-button:hover { transform:translateY(-2px); }
.hero-art { position:relative; min-height:500px; background: radial-gradient(circle at 55% 42%, rgba(239,213,155,.2), transparent 25%), linear-gradient(145deg, transparent 25%, rgba(73,135,124,.15)); overflow:hidden; }
.moon { position:absolute; width:min(32vw,360px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff8da, #c5a761 58%, #615024 61%, transparent 63%); top:14%; left:12%; filter:drop-shadow(0 0 50px rgba(239,213,155,.24)); }
.mountain { position:absolute; inset:auto -10% -20% 5%; height:65%; background:linear-gradient(135deg,transparent 18%,#17203d 18% 38%,transparent 38%),linear-gradient(45deg,transparent 30%,#222b49 30% 60%,transparent 60%); opacity:.95; }
.orbit { position:absolute; width:460px; height:460px; border:1px solid rgba(239,213,155,.25); border-radius:50%; top:7%; left:0; }
.seal { position:absolute; right:9%; bottom:12%; writing-mode:vertical-rl; color:var(--gold-light); border:1px solid var(--gold); padding:15px 10px; letter-spacing:.25em; }

.home-section { width:min(1120px,calc(100% - 36px)); margin:100px auto; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.service-card { min-height:240px; padding:28px; position:relative; overflow:hidden; background:rgba(255,255,255,.52); border:1px solid var(--line); transition:.25s; }
.service-card:hover { transform:translateY(-5px); border-color:rgba(189,140,59,.5); box-shadow:var(--shadow); }
.service-card::after { content:attr(data-char); position:absolute; right:-8px; bottom:-36px; font-family:"Ma Shan Zheng"; font-size:120px; color:rgba(189,140,59,.08); }
.service-card .number { color:var(--gold); font-size:11px; letter-spacing:.2em; }
.service-card h3 { margin:40px 0 12px; font-size:24px; font-weight:500; }
.service-card p { margin:0; color:var(--ink-soft); line-height:1.8; font-size:14px; }
.service-card b { display:inline-block; margin-top:22px; color:var(--gold); font-size:12px; }
.manifesto { display:grid; grid-template-columns:.85fr 1.15fr; background:var(--night); color:white; }
.manifesto-title { padding:60px; background:linear-gradient(135deg,rgba(189,140,59,.22),transparent); }
.manifesto-title strong { font-family:"Ma Shan Zheng"; font-size:54px; font-weight:400; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); }
.principle { padding:48px 30px; border-left:1px solid rgba(255,255,255,.09); }
.principle span { color:var(--gold-light); font-size:28px; }
.principle p { color:#abb2c3; font-size:13px; line-height:1.8; }

.content-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:24px; margin-top:40px; align-items:start; }
.panel { background:rgba(255,255,255,.6); border:1px solid var(--line); padding:clamp(24px,4vw,42px); box-shadow:0 14px 45px rgba(17,24,50,.06); }
.panel.dark { background:var(--night); color:#f6f0e3; }
.panel h2 { font-size:22px; margin:0 0 28px; font-weight:500; }
.field { display:block; margin-bottom:20px; }
.field > span { display:block; font-size:13px; color:var(--ink-soft); margin-bottom:9px; }
.dark .field > span { color:#b6bdcc; }
input, textarea, select { width:100%; border:1px solid var(--line); background:rgba(255,255,255,.72); padding:13px 14px; border-radius:2px; color:var(--ink); outline:none; }
input:focus, textarea:focus, select:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(189,140,59,.08); }
textarea { min-height:100px; resize:vertical; }
.field-row { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.field-row.three { grid-template-columns:repeat(3,1fr); }
.choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:22px; }
.choice { border:1px solid var(--line); background:rgba(255,255,255,.45); padding:14px 10px; color:var(--ink-soft); }
.choice.selected { background:var(--ink); color:white; border-color:var(--ink); }
.masters { display:grid; gap:10px; margin-bottom:24px; }
.master { display:grid; grid-template-columns:44px 1fr; text-align:left; gap:12px; border:1px solid var(--line); background:rgba(255,255,255,.5); padding:14px; }
.master.selected { border-color:var(--gold); background:#fffaf0; }
.master i { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--gold-light); font-style:normal; }
.master strong { display:block; }
.master small { color:var(--ink-soft); }
.note { padding:18px; border-left:2px solid var(--gold); background:rgba(189,140,59,.08); font-size:13px; line-height:1.8; color:var(--ink-soft); }
.price-box { display:flex; justify-content:space-between; align-items:end; border-top:1px solid var(--line); margin-top:24px; padding-top:20px; }
.price-box strong { font-size:30px; color:var(--rose); }
.result { margin-top:25px; padding:30px; background:#fffdf7; border:1px solid rgba(189,140,59,.38); animation:reveal .4s; }
.result h3 { color:var(--gold); font-weight:500; font-size:25px; }
.result p { line-height:2; }
.result-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.result-chip { padding:16px; background:var(--paper-2); }
.result-chip small { color:var(--ink-soft); display:block; margin-bottom:5px; }

.almanac-card { text-align:center; }
.date-orb { width:180px; height:180px; margin:10px auto 30px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; position:relative; }
.date-orb::after { content:""; position:absolute; inset:9px; border:1px dashed rgba(189,140,59,.5); border-radius:50%; }
.date-orb strong { font-family:"Ma Shan Zheng"; font-size:64px; font-weight:400; }
.date-orb small { display:block; font-size:12px; color:var(--gold); }
.yi-ji { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.yi-ji > div { padding:25px; border:1px solid var(--line); }
.yi-ji strong { display:grid; place-items:center; width:34px; height:34px; margin:0 auto 14px; border-radius:50%; background:var(--jade); color:white; }
.yi-ji > div:last-child strong { background:var(--rose); }
.lottery-tube { width:150px; height:220px; margin:25px auto; position:relative; border:2px solid var(--gold); border-radius:12px 12px 50px 50px; background:linear-gradient(90deg,#7f2633,#ad4851,#6f202e); }
.lottery-tube::before { content:"玄 光 灵 签"; position:absolute; inset:50px 42px; color:var(--gold-light); writing-mode:vertical-rl; letter-spacing:.3em; }
.stick { position:absolute; width:8px; height:100px; top:-45px; background:#d7b56b; transform-origin:bottom; }
.stick:nth-child(1){left:30px;transform:rotate(-8deg)} .stick:nth-child(2){left:50px;transform:rotate(2deg)} .stick:nth-child(3){left:75px;transform:rotate(8deg)} .stick:nth-child(4){left:100px;transform:rotate(14deg)}
.shaking { animation:shake .18s infinite; }
@keyframes shake { 25%{transform:rotate(3deg)} 75%{transform:rotate(-3deg)} }
.upload-zone { min-height:200px; border:1px dashed var(--gold); display:grid; place-items:center; text-align:center; padding:30px; background:rgba(189,140,59,.05); }
.upload-zone input { margin-top:15px; }
.meditation { min-height:560px; display:grid; place-items:center; text-align:center; background:var(--night); color:white; position:relative; overflow:hidden; }
.breath { width:210px; height:210px; border-radius:50%; border:1px solid var(--gold); display:grid; place-items:center; animation:breathe 8s ease-in-out infinite; box-shadow:0 0 80px rgba(189,140,59,.15); }
@keyframes breathe { 0%,100%{transform:scale(.8);opacity:.65} 50%{transform:scale(1.12);opacity:1} }
.breath strong { font-family:"Ma Shan Zheng"; font-size:42px; font-weight:400; }
.timer { font-size:44px; font-variant-numeric:tabular-nums; margin:25px 0; }
.incense-stage { min-height:350px; display:flex; justify-content:center; align-items:end; gap:24px; padding:50px; background:linear-gradient(#111832,#202a49); }
.incense { width:5px; height:180px; background:linear-gradient(#a74438 0 80%,#cbb678 80%); position:relative; opacity:.25; }
.incense.lit { opacity:1; }
.incense.lit::before { content:""; position:absolute; width:18px; height:40px; left:-7px; top:-35px; border-radius:50%; background:radial-gradient(ellipse at bottom,rgba(255,255,255,.5),transparent 60%); filter:blur(3px); animation:smoke 3s infinite; }
@keyframes smoke { to{transform:translate(12px,-28px) scale(1.5);opacity:0} }
.records { display:grid; gap:12px; }
.record { padding:18px; border:1px solid var(--line); background:rgba(255,255,255,.55); display:flex; justify-content:space-between; gap:20px; }
.record small { color:var(--ink-soft); }
.record b { color:var(--gold); }
.empty { padding:60px 20px; text-align:center; color:var(--ink-soft); border:1px dashed var(--line); }

.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(5,8,20,.72); backdrop-filter:blur(8px); animation:reveal .2s; }
.modal { width:min(520px,100%); max-height:90vh; overflow:auto; background:var(--paper); padding:32px; box-shadow:0 30px 90px rgba(0,0,0,.35); }
.modal-header { display:flex; justify-content:space-between; align-items:start; margin-bottom:24px; }
.modal-header h2 { margin:0; }
.close { border:0; background:none; font-size:25px; }
.pay-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0; }
.pay-option { border:1px solid var(--line); background:white; padding:18px; }
.pay-option.selected { border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); }
.qr { width:170px; height:170px; margin:20px auto; padding:12px; background:white; display:grid; grid-template-columns:repeat(9,1fr); gap:2px; border:1px solid var(--line); }
.qr i { background:var(--ink); }
#toast { position:fixed; left:50%; bottom:95px; z-index:200; transform:translate(-50%,20px); opacity:0; background:var(--ink); color:white; padding:12px 20px; border-radius:2px; transition:.25s; pointer-events:none; }
#toast.show { opacity:1; transform:translate(-50%,0); }
.affiliate-fab { position:fixed; right:22px; bottom:30px; z-index:30; width:50px; height:50px; border-radius:50%; border:1px solid var(--gold); background:var(--night); color:var(--gold-light); box-shadow:var(--shadow); }
.mobile-nav { display:none; }
.footer { width:min(1120px,calc(100% - 36px)); margin:80px auto 30px; padding-top:30px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--ink-soft); font-size:12px; }

@media (max-width: 860px) {
  .desktop-nav { display:none; }
  .site-header { height:64px; padding:0 18px; }
  .header-actions { margin-left:auto; }
  .ghost-button { display:none; }
  main { min-height:calc(100vh - 64px); }
  .hero { grid-template-columns:1fr; min-height:auto; border-radius:0 0 50px 0; }
  .hero-copy { padding:65px 28px 35px; }
  .hero-art { min-height:350px; }
  .moon { width:260px; left:calc(50% - 130px); }
  .service-grid { grid-template-columns:1fr 1fr; }
  .manifesto { grid-template-columns:1fr; }
  .manifesto-title { padding:40px 30px; }
  .content-grid { grid-template-columns:1fr; }
  .page { padding-top:40px; }
  .mobile-nav { position:fixed; display:grid; grid-template-columns:repeat(5,1fr); left:0; right:0; bottom:0; z-index:40; height:68px; background:rgba(248,245,237,.96); border-top:1px solid var(--line); backdrop-filter:blur(16px); }
  .mobile-nav a { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; color:var(--ink-soft); font-size:10px; }
  .mobile-nav a span { font-size:18px; }
  .mobile-nav a.active { color:var(--gold); }
  .affiliate-fab { right:16px; bottom:82px; }
  .footer { margin-bottom:90px; }
}
@media (max-width: 560px) {
  .service-grid, .principles, .field-row, .field-row.three, .result-grid { grid-template-columns:1fr; }
  .choice-grid { grid-template-columns:1fr 1fr; }
  .home-section { margin:70px auto; }
  .service-card { min-height:205px; }
  .service-card h3 { margin-top:25px; }
  .hero-actions .primary-button, .hero-actions .secondary-button { width:100%; }
  .panel { padding:24px 18px; }
  .yi-ji { grid-template-columns:1fr; }
}