/* ==========================================================
   Moonblast · 叫叫塔  —  shared styles
   ========================================================== */

:root{
  --bg:        #07060c;
  --bg-2:      #0b0914;
  --panel:     rgba(255,255,255,.035);
  --line:      rgba(196,178,255,.13);
  --line-soft: rgba(196,178,255,.07);
  --ink:       #ece8f7;
  --ink-2:     #a9a2bf;
  --ink-3:     #8b849f;
  --gold:      #d8bd8a;
  --gold-soft: #e8d5b2;
  --violet:    #a996e8;
  --rose:      #d6a2c0;
  --serif:     "Cormorant Garamond", "Noto Serif SC", "Songti SC", serif;
  --sans:      "Jost", "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
  --ease:      cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.85;
  letter-spacing:0;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:rgba(216,189,138,.28); color:#fff; }

/* ---- scrollbar ---- */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:#08070e; }
::-webkit-scrollbar-thumb{ background:#262038; border-radius:9px; }
::-webkit-scrollbar-thumb:hover{ background:#37304f; }

/* ==========================================================
   Ambient background : starfield + nebula
   ========================================================== */
.sky{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.sky::before,
.sky::after{
  content:""; position:absolute; border-radius:50%; filter:blur(90px);
}
.sky::before{
  width:70vw; height:70vw; left:-24vw; top:-28vw;
  background:radial-gradient(circle, rgba(122,96,214,.30), transparent 62%);
  animation:drift 26s var(--ease) infinite alternate;
}
.sky::after{
  width:62vw; height:62vw; right:-26vw; bottom:-24vw;
  background:radial-gradient(circle, rgba(196,150,190,.18), transparent 62%);
  animation:drift 32s var(--ease) infinite alternate-reverse;
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(4vw,3vw,0) scale(1.12); }
}
#stars{ position:absolute; inset:0; width:100%; height:100%; }
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ==========================================================
   Layout helpers
   ========================================================== */
.wrap{ width:min(1180px, calc(100% - 10vw)); margin-inline:auto; position:relative; z-index:2; }
main{ position:relative; z-index:2; }
section{ position:relative; }

.eyebrow{
  font-family:var(--sans);
  font-size:11px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); font-weight:400;
  display:flex; align-items:center; gap:14px;
}
.eyebrow::before{
  content:""; width:34px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{
  content:""; width:34px; height:1px;
  background:linear-gradient(270deg, transparent, var(--gold));
}

h1,h2,h3,h4{ font-family:var(--serif); font-weight:300; line-height:1.25; letter-spacing:.01em; }
.h-xl{ font-size:clamp(2.9rem,6.6vw,5.6rem); line-height:1.06; }
.h-lg{ font-size:clamp(2rem,3.6vw,3.1rem); }
.h-md{ font-size:clamp(1.35rem,2vw,1.7rem); }
.italic{ font-style:italic; color:var(--gold-soft); }
.muted{ color:var(--ink-2); }
.small{ font-size:13.5px; letter-spacing:.06em; color:var(--ink-3); }

.rule{
  height:1px; border:0;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}

/* ---- buttons ---- */
.btn{
  --bc:var(--gold);
  position:relative; display:inline-flex; align-items:center; gap:12px;
  padding:15px 34px; border:1px solid rgba(216,189,138,.5);
  border-radius:999px; font-size:12.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-soft);
  background:linear-gradient(180deg, rgba(216,189,138,.10), rgba(216,189,138,.02));
  overflow:hidden; transition:.5s var(--ease); cursor:pointer;
  font-family:var(--sans);
}
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,246,224,.22) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .9s var(--ease);
}
.btn:hover{ border-color:var(--gold); color:#fff8e8; box-shadow:0 0 40px -10px rgba(216,189,138,.45); }
.btn:hover::after{ transform:translateX(120%); }
.btn.solid{
  background:linear-gradient(135deg,#e6d2ae,#c2a375);
  color:#1a1408; border-color:transparent; font-weight:500;
}
.btn.solid:hover{ box-shadow:0 0 46px -8px rgba(216,189,138,.6); color:#120d04; }
.btn.ghost{ border-color:var(--line); color:var(--ink-2); background:transparent; }
.btn.ghost:hover{ color:var(--ink); border-color:rgba(169,150,232,.5); box-shadow:none; }
.btn .arw{ transition:transform .45s var(--ease); }
.btn:hover .arw{ transform:translateX(5px); }

/* ==========================================================
   Nav
   ========================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90;
  transition:.55s var(--ease);
  padding:26px 0;
}
.nav.scrolled{
  padding:14px 0;
  background:rgba(7,6,12,.78);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line-soft);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand{ display:flex; align-items:center; gap:13px; }
.brand .mark{ width:34px; height:34px; flex:none; }
.brand .txt{ display:flex; flex-direction:column; line-height:1; }
.brand .en{
  font-family:var(--serif); font-size:19px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink);
}
.brand .cn{
  font-size:10px; letter-spacing:.5em; color:var(--gold);
  margin-top:6px; padding-left:2px;
}
.menu{ display:flex; align-items:center; gap:38px; }
.menu a{
  position:relative; font-size:12.5px; letter-spacing:.2em; color:#b6afc9;
  padding:4px 0; transition:color .4s;
}
.menu a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .45s var(--ease);
}
.menu a:hover, .menu a.active{ color:var(--ink); }
.menu a:hover::after, .menu a.active::after{ width:100%; }
.nav .btn{ padding:11px 24px; font-size:11px; }

.burger{
  display:none; width:30px; height:18px; position:relative; cursor:pointer;
  background:none; border:0;
}
.burger span{
  position:absolute; left:0; height:1px; width:100%; background:var(--ink);
  transition:.4s var(--ease);
}
.burger span:nth-child(1){ top:2px; }
.burger span:nth-child(2){ top:9px; width:70%; }
.burger span:nth-child(3){ top:16px; }
.burger.open span:nth-child(1){ top:9px; transform:rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ top:9px; transform:rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:85; display:none;
  background:rgba(7,6,12,.97); backdrop-filter:blur(20px);
  flex-direction:column; justify-content:center; align-items:center; gap:6px;
  opacity:0; pointer-events:none; transition:opacity .5s;
}
.drawer.show{ opacity:1; pointer-events:auto; }
.drawer a{
  font-family:var(--serif); font-size:27px; color:var(--ink-2);
  padding:12px 0; letter-spacing:.08em; transition:.4s;
}
.drawer a:hover{ color:var(--gold-soft); }

/* ==========================================================
   Hero
   ========================================================== */
.hero{
  min-height:100svh; display:flex; align-items:center;
  padding:140px 0 90px; overflow:hidden;
}
.hero .wrap{
  display:grid; grid-template-columns:1.08fr .92fr; gap:5vw; align-items:center;
}
.hero-txt{ max-width:620px; }
.hero h1{ margin:26px 0 0; }
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line > span{ display:inline-block; }
.hero .lead{
  margin-top:30px; max-width:440px; font-size:15.5px; color:var(--ink-2);
  line-height:2.05;
}
.hero-cta{ margin-top:44px; display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.hero-meta{
  margin-top:64px; display:flex; gap:44px; flex-wrap:wrap;
  padding-top:26px; border-top:1px solid var(--line-soft);
}
.hero-meta .it{ display:flex; flex-direction:column; gap:2px; }
.hero-meta .n{ font-family:var(--serif); font-size:26px; color:var(--gold-soft); letter-spacing:.04em; }
.hero-meta .l{ font-size:10.5px; letter-spacing:.26em; color:var(--ink-3); text-transform:uppercase; }

/* floating cards */
.hero-art{ position:relative; display:grid; place-items:center; min-height:520px; }
.orbit{
  position:absolute; width:440px; height:440px; border-radius:50%;
  border:1px solid rgba(169,150,232,.16);
}
.orbit.two{ width:560px; height:560px; border-color:rgba(216,189,138,.10); }
.orbit.three{ width:330px; height:330px; border-style:dashed; border-color:rgba(169,150,232,.14); animation:spin 90s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.card-stack{ position:relative; width:270px; height:420px; transform-style:preserve-3d; }
.tcard{
  position:absolute; inset:0; border-radius:14px; overflow:hidden;
  border:1px solid rgba(216,189,138,.35);
  background:
    radial-gradient(circle at 50% 0%, rgba(120,96,200,.34), transparent 55%),
    linear-gradient(165deg, #16112a, #0a0813 60%, #120e1f);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.95), inset 0 0 0 6px rgba(7,6,12,.85), inset 0 0 0 7px rgba(216,189,138,.18);
  transition:transform .9s var(--ease);
}
.tcard .fig{ position:absolute; inset:16% 14% 26%; display:grid; place-items:center; }
.tcard .cap{
  position:absolute; left:0; right:0; bottom:22px; text-align:center;
  font-family:var(--serif); font-size:15px; letter-spacing:.3em; color:var(--gold-soft);
  text-transform:uppercase;
}
.card-stack .c1{ transform:rotate(-13deg) translate(-58px,18px) scale(.94); opacity:.55; }
.card-stack .c2{ transform:rotate(11deg) translate(62px,26px) scale(.94); opacity:.7; }
.card-stack .c3{ transform:rotate(-1.5deg) translate(0,0); }
.hero-art:hover .c1{ transform:rotate(-19deg) translate(-100px,26px) scale(.94); }
.hero-art:hover .c2{ transform:rotate(17deg) translate(104px,34px) scale(.94); }
.hero-art:hover .c3{ transform:rotate(0) translateY(-12px); }

.moon-mark{
  position:absolute; bottom:6%; right:2%; opacity:.85;
  animation:float 7s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-16px); }
}

.scroll-hint{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; z-index:3;
}
.scroll-hint span{ font-size:9.5px; letter-spacing:.4em; color:var(--ink-3); text-transform:uppercase; }
.scroll-hint i{
  width:1px; height:52px; background:linear-gradient(180deg, var(--gold), transparent);
  position:relative; overflow:hidden;
}
.scroll-hint i::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:linear-gradient(180deg, transparent, #fff6e0, transparent);
  animation:scrollDot 2.4s var(--ease) infinite;
}
@keyframes scrollDot{ 0%{ top:-100%; } 100%{ top:100%; } }

/* ==========================================================
   Marquee strip
   ========================================================== */
.strip{
  border-block:1px solid var(--line-soft);
  padding:20px 0; overflow:hidden; background:rgba(255,255,255,.012);
}
.strip-track{ display:flex; gap:0; width:max-content; animation:marq 48s linear infinite; }
.strip:hover .strip-track{ animation-play-state:paused; }
.strip-track .item{
  display:flex; align-items:center; gap:26px; padding:0 26px;
  font-family:var(--serif); font-size:15px; letter-spacing:.28em;
  color:var(--ink-3); text-transform:uppercase; white-space:nowrap;
}
.strip-track .item b{ color:var(--gold); font-weight:400; font-size:11px; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ==========================================================
   Generic section header
   ========================================================== */
.sec{ padding:120px 0; }
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:64px; }
.sec-head .left{ max-width:640px; }
.sec-head h2{ margin-top:20px; }
.sec-head p{ margin-top:18px; color:var(--ink-2); font-size:15px; max-width:470px; }

/* ==========================================================
   Cards / services
   ========================================================== */
.grid{ display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.grid.g3{ grid-template-columns:repeat(3,1fr); }
.grid.g2{ grid-template-columns:repeat(2,1fr); }

.svc{
  position:relative; background:var(--bg); padding:48px 40px 42px;
  transition:background .6s var(--ease); overflow:hidden;
}
.svc::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .6s;
  background:radial-gradient(120% 90% at 50% 0%, rgba(169,150,232,.12), transparent 60%);
}
.svc:hover{ background:#0a0812; }
.svc:hover::before{ opacity:1; }
.svc .idx{
  font-family:var(--serif); font-size:12px; letter-spacing:.3em; color:var(--gold);
  display:flex; justify-content:space-between; align-items:center;
}
.svc .idx svg{ width:42px; height:42px; flex:none; }
.svc .idx > span{ padding-top:14px; }
.svc .ico{ width:46px; height:46px; opacity:.9; }
svg{ max-width:100%; }
.svc h3{ margin:34px 0 14px; font-size:23px; }
.svc p{ font-size:14px; color:var(--ink-2); line-height:1.95; min-height:76px; }
.svc .price{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; align-items:baseline;
}
.svc .price .p{ font-family:var(--serif); font-size:22px; color:var(--gold-soft); }
.svc .price .d{ font-size:11px; letter-spacing:.2em; color:var(--ink-3); text-transform:uppercase; }
.svc .go{
  position:absolute; right:34px; top:46px; opacity:0; transform:translate(-6px,6px);
  transition:.5s var(--ease); color:var(--gold);
}
.svc:hover .go{ opacity:1; transform:translate(0,0); }

/* ==========================================================
   About
   ========================================================== */
.about-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:7vw; align-items:center; }
.portrait{
  position:relative; aspect-ratio:3/4; border-radius:2px; overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(170deg,#120e22,#080710);
}
.portrait .ph{ position:absolute; inset:0; display:grid; place-items:center; }
.portrait::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(7,6,12,.92));
}
.portrait .tag{
  position:absolute; left:26px; bottom:24px; z-index:2;
  font-family:var(--serif); font-size:13px; letter-spacing:.34em; color:var(--gold-soft);
}
.about-body p{ color:var(--ink-2); font-size:15px; margin-bottom:20px; }
.quotebox{
  margin:34px 0; padding:24px 28px; border-left:1px solid rgba(216,189,138,.4);
  background:linear-gradient(90deg, rgba(216,189,138,.045), transparent);
  font-family:var(--serif); font-size:18px; font-style:italic; color:var(--gold-soft);
  line-height:1.8;
}
.facts{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft); margin-top:36px; }
.fact{ background:var(--bg); padding:22px 24px; }
.fact .n{ font-family:var(--serif); font-size:28px; color:var(--ink); }
.fact .l{ font-size:11px; letter-spacing:.22em; color:var(--ink-3); text-transform:uppercase; margin-top:4px; }

/* ==========================================================
   Steps / process
   ========================================================== */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:10px; }
.step{ position:relative; padding:0 30px 0 0; }
.step .bar{ height:1px; background:var(--line); position:relative; margin-bottom:26px; }
.step .bar::before{
  content:""; position:absolute; left:0; top:-3px; width:7px; height:7px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 14px var(--gold);
}
.step .no{ font-family:var(--serif); font-size:13px; letter-spacing:.3em; color:var(--ink-3); }
.step h4{ margin:12px 0 10px; font-size:20px; }
.step p{ font-size:13.5px; color:var(--ink-2); line-height:1.9; }

/* ==========================================================
   Divination / online form
   ========================================================== */
.divine{
  position:relative; border:1px solid var(--line); border-radius:4px;
  background:
    radial-gradient(120% 100% at 50% -20%, rgba(122,96,214,.16), transparent 60%),
    linear-gradient(180deg,#0c0a16,#080711);
  padding:clamp(34px,5vw,72px); overflow:hidden;
}
.divine::before, .divine::after{
  content:""; position:absolute; width:120px; height:120px; border:1px solid rgba(216,189,138,.22);
  pointer-events:none;
}
.divine::before{ left:14px; top:14px; border-right:0; border-bottom:0; }
.divine::after{ right:14px; bottom:14px; border-left:0; border-top:0; }

.deck-zone{ display:grid; grid-template-columns:1fr 400px; gap:60px; align-items:center; }
.deck{ position:relative; height:360px; display:flex; align-items:center; justify-content:center; }
.deck-card{
  position:absolute; width:152px; height:236px; border-radius:10px; cursor:pointer;
  border:1px solid rgba(216,189,138,.42);
  background:
    radial-gradient(circle at 50% 20%, rgba(140,112,220,.35), transparent 60%),
    linear-gradient(165deg,#17112b,#0a0814);
  box-shadow:0 20px 50px -22px #000, inset 0 0 0 4px #080711, inset 0 0 0 5px rgba(216,189,138,.2);
  transition:transform .7s var(--ease), opacity .5s var(--ease);
  display:grid; place-items:center;
  transform-origin:50% 150%;
  /* 扇形：由 JS 写入 --rot / --ty / --d */
  transform:translateY(var(--ty,0)) rotate(var(--rot,0deg));
  animation:fanIn .55s var(--ease) backwards;
  animation-delay:var(--d,0ms);
}
@keyframes fanIn{ from{ opacity:0; transform:translateY(30px) rotate(0deg) scale(.9); } }
.deck-card .back{ width:58px; height:58px; opacity:.6; }
.deck-card .flutter{ animation:shimmer 3.2s ease-in-out infinite; }
/* 悬停：抬起并被抽出一点 */
.deck.ready .deck-card:hover{
  z-index:20 !important;
  transform:translateY(calc(var(--ty,0px) - 34px)) rotate(calc(var(--rot,0deg) * .35)) scale(1.06);
  border-color:rgba(232,213,178,.85);
  box-shadow:0 30px 60px -20px #000, 0 0 40px -12px rgba(216,189,138,.45), inset 0 0 0 4px #080711, inset 0 0 0 5px rgba(216,189,138,.35);
}
.deck-card.taken{ opacity:0; transform:translateY(-190px) rotate(0) scale(.72); pointer-events:none; }
.deck.spent .deck-card{ opacity:.14; pointer-events:none; }
.deck.spent .deck-card.taken{ opacity:0; }
/* 洗牌：牌堆抖动 */
.deck.shuffling .deck-card{ animation:shuf .16s ease-in-out infinite; }
@keyframes shuf{
  0%{ transform:translateY(var(--ty,0)) rotate(var(--rot,0deg)) translate(0,0); }
  33%{ transform:translateY(var(--ty,0)) rotate(calc(var(--rot,0deg) + 5deg)) translate(7px,-4px); }
  66%{ transform:translateY(var(--ty,0)) rotate(calc(var(--rot,0deg) - 5deg)) translate(-7px,3px); }
  100%{ transform:translateY(var(--ty,0)) rotate(var(--rot,0deg)) translate(0,0); }
}
@keyframes shimmer{ 0%,100%{ opacity:.45; } 50%{ opacity:.85; } }

.spread{ display:flex; gap:22px; justify-content:center; perspective:1200px; }
.spread .slot{
  width:170px; height:264px; border-radius:10px; position:relative;
  border:1px dashed rgba(169,150,232,.25);
  display:grid; place-items:center;
  transition:.6s var(--ease);
}
.spread .slot.filled{ border-style:solid; border-color:rgba(216,189,138,.4); }
.spread .slot .mini{ text-align:center; font-size:11px; letter-spacing:.24em; color:var(--ink-3); text-transform:uppercase; }

.flip{
  width:170px; height:264px; perspective:900px; cursor:pointer;
}
.flip-in{
  position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform 1s var(--ease);
}
.flip.on .flip-in{ transform:rotateY(180deg); }
.face{
  position:absolute; inset:0; border-radius:10px; backface-visibility:hidden;
  display:grid; place-items:center; border:1px solid rgba(216,189,138,.4);
  background:linear-gradient(165deg,#17112b,#0a0814);
  box-shadow:inset 0 0 0 5px #080711, inset 0 0 0 6px rgba(216,189,138,.18);
}
.face.back{ transform:rotateY(180deg); background:linear-gradient(180deg,#141026,#0a0813); padding:18px; }
.face.back .nm{ font-family:var(--serif); font-size:16px; color:var(--gold-soft); letter-spacing:.1em; margin-top:10px; }
.face.back .rev{ font-size:10px; letter-spacing:.28em; color:var(--ink-3); }
.face.back .sym{ width:80px; height:80px; }

/* form */
.field{ margin-bottom:26px; }
.field label{
  display:block; font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:11px;
}
.field input, .field textarea, .field select{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
  color:var(--ink); font-family:var(--sans); font-size:15px; font-weight:300;
  padding:10px 0 12px; outline:none; transition:.4s; letter-spacing:.01em;
}
.field textarea{ resize:vertical; min-height:92px; line-height:1.8; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--gold); }
.field input::placeholder, .field textarea::placeholder{ color:#4c4760; }
.field select{ appearance:none; cursor:pointer; }
.field select option{ background:#0b0914; }
.chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  padding:9px 18px; border:1px solid var(--line); border-radius:999px;
  font-size:12.5px; color:var(--ink-2); cursor:pointer; transition:.35s; user-select:none;
}
.chip:hover{ border-color:rgba(169,150,232,.45); color:var(--ink); }
.chip.on{ background:rgba(216,189,138,.14); border-color:rgba(216,189,138,.7); color:#f3e6cf; box-shadow:inset 0 0 0 1px rgba(216,189,138,.18), 0 0 20px -8px rgba(216,189,138,.6); }

.notice{
  font-size:12.5px; color:var(--ink-3); line-height:1.9; margin-top:22px;
  padding-left:16px; border-left:1px solid var(--line);
}

/* ==========================================================
   Testimonials
   ========================================================== */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.qcard{
  padding:38px 32px; border:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008));
  position:relative; transition:.6s var(--ease);
}
.qcard:hover{ border-color:rgba(216,189,138,.3); transform:translateY(-5px); }
.qcard .stars{ color:var(--gold); letter-spacing:.24em; font-size:12px; margin-bottom:20px; }
.qcard p{ font-family:var(--serif); font-size:17px; line-height:1.85; color:var(--ink); font-style:italic; }
.qcard .who{ margin-top:24px; display:flex; align-items:center; gap:12px; }
.qcard .av{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-family:var(--serif); color:var(--gold); font-size:13px; }
.qcard .who span{ font-size:12px; letter-spacing:.16em; color:var(--ink-3); }

/* ==========================================================
   CTA band
   ========================================================== */
.cta-band{
  position:relative; text-align:center; padding:110px 0; overflow:hidden;
  border-block:1px solid var(--line-soft);
}
.cta-band .glow{
  position:absolute; left:50%; top:50%; width:60vw; height:60vw; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(122,96,214,.20), transparent 60%); filter:blur(50px);
  pointer-events:none;
}
.cta-band h2{ position:relative; }
.cta-band p{ position:relative; margin:20px auto 40px; max-width:440px; color:var(--ink-2); font-size:15px; }

/* ==========================================================
   Footer
   ========================================================== */
footer{ padding:80px 0 36px; border-top:1px solid var(--line-soft); position:relative; z-index:2; }
.f-grid{ display:grid; grid-template-columns:1.5fr .85fr .85fr .9fr 1.15fr; gap:40px; }
.f-grid h5{
  font-size:10.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
  font-weight:400; margin-bottom:22px; font-family:var(--sans);
}
.f-grid ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.f-grid ul a{ font-size:13.5px; color:#8f88a6; transition:.35s; }
.f-grid ul a:hover{ color:var(--ink); padding-left:5px; }
.f-about p{ font-size:13.5px; color:var(--ink-3); line-height:1.95; margin-top:20px; max-width:300px; }
.f-bottom{
  margin-top:64px; padding-top:26px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:11.5px; letter-spacing:.1em; color:#6a6484;
}

/* ==========================================================
   Reveal animation
   ========================================================== */
.rv{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.08s; } .rv.d2{ transition-delay:.16s; }
.rv.d3{ transition-delay:.24s; } .rv.d4{ transition-delay:.32s; }
.rv.d5{ transition-delay:.4s; }

/* page hero (inner pages) */
.phero{
  padding:200px 0 90px; position:relative; text-align:center;
  border-bottom:1px solid var(--line-soft);
}
.phero .glow{
  position:absolute; left:50%; top:0; width:70vw; height:36vw; transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(122,96,214,.24), transparent 62%); filter:blur(60px);
  pointer-events:none;
}
.phero h1{ position:relative; margin-top:24px; font-size:clamp(2.4rem,5vw,4.2rem); }
.phero p{ position:relative; margin:24px auto 0; max-width:540px; color:var(--ink-2); font-size:15px; }
.crumb{ position:relative; font-size:10.5px; letter-spacing:.32em; color:var(--ink-3); text-transform:uppercase; }
.crumb b{ color:var(--gold); font-weight:400; }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width:1024px){
  .hero .wrap{ grid-template-columns:1fr; gap:60px; }
  .hero-art{ min-height:460px; order:-1; }
  .about-grid{ grid-template-columns:1fr; gap:50px; }
  .portrait{ max-width:360px; }
  .deck-zone{ grid-template-columns:1fr; gap:44px; }
  .grid.g3{ grid-template-columns:repeat(2,1fr); }
  .quotes{ grid-template-columns:1fr; }
  .f-grid{ grid-template-columns:1fr 1fr; gap:40px; }
  .steps{ grid-template-columns:1fr 1fr; gap:40px 0; }
  .sec{ padding:90px 0; }
}
@media (max-width:760px){
  .menu, .nav .btn{ display:none; }
  .burger{ display:block; }
  .drawer{ display:flex; }
  .wrap{ width:calc(100% - 44px); }
  .hero{ padding-top:104px; min-height:auto; }
  .hero-art{ min-height:300px; }
  .card-stack{ width:150px; height:236px; }
  .orbit{ width:250px; height:250px; } .orbit.two{ width:300px; height:300px; } .orbit.three{ width:190px; height:190px; }
  .card-stack .c1{ transform:rotate(-13deg) translate(-34px,10px) scale(.94); }
  .card-stack .c2{ transform:rotate(11deg) translate(36px,14px) scale(.94); }
  .hero-art:hover .c1{ transform:rotate(-17deg) translate(-46px,14px) scale(.94); }
  .hero-art:hover .c2{ transform:rotate(15deg) translate(48px,18px) scale(.94); }
  .tcard .cap{ font-size:10px; letter-spacing:.24em; bottom:14px; }
  .tcard .fig svg{ width:74px; height:74px; }
  .moon-mark svg{ width:54px; height:54px; }
  .hero .lead{ font-size:14.5px; }
  .hero-cta .btn{ padding:13px 24px; font-size:11px; }
  .hero-meta{ margin-top:40px; }
  .hero-meta{ gap:28px; }
  .grid.g3, .grid.g2{ grid-template-columns:1fr; }
  .svc{ padding:38px 28px; }
  .sec-head{ flex-direction:column; align-items:flex-start; gap:20px; }
  .steps{ grid-template-columns:1fr; gap:34px; }
  .spread{ gap:8px; }
  .spread .slot, .flip{ width:100px; height:156px; }
  .face.back .sym{ width:52px; height:52px; }
  .face.back .nm{ font-size:12px; }
  .deck{ height:340px; }
  .deck-card{ width:120px; height:188px; }
  .deck-card:nth-child(1){ transform:rotate(-16deg) translate(-62px,10px); }
  .deck-card:nth-child(2){ transform:rotate(15deg) translate(62px,8px); }
  .deck-card:nth-child(3){ transform:rotate(-6deg) translate(-24px,-4px); }
  .deck-card:nth-child(4){ transform:rotate(6deg) translate(24px,-2px); }
  .facts{ grid-template-columns:1fr; }
  .f-grid{ grid-template-columns:1fr; }
  .phero{ padding:160px 0 70px; }
  .divine{ padding:30px 22px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
}

/* 表单双列 */
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.form-ok{ display:none; }
@media (max-width:1024px){
  .book-grid, .contact-grid{ grid-template-columns:1fr !important; gap:56px !important; }
}
@media (max-width:760px){
  .form-row{ grid-template-columns:1fr; gap:24px; }
}
.d-meta{ }

/* 解读结果三栏 */
.read-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); margin-bottom:36px; }
.read-cols > div{ background:var(--bg); padding:26px 22px; }
@media (max-width:760px){
  .read-cols{ grid-template-columns:1fr; }
  .read-cols > div{ padding:22px 18px; }
}

/* ==========================================================
   Membership page
   ========================================================== */
.mem-grid{ gap:0; }
.tier{
  background:var(--bg); border:1px solid var(--line); padding:40px 34px 36px;
  display:flex; flex-direction:column; transition:.5s var(--ease); position:relative;
}
.tier:hover{ background:rgba(216,189,138,.035); border-color:rgba(216,189,138,.32); transform:translateY(-4px); }
.tier-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.tier-rate{
  font-family:var(--serif); font-size:40px; line-height:1; color:var(--gold-soft); letter-spacing:.02em;
}
.tier-rate small{ font-family:var(--sans); font-size:12px; color:var(--ink-3); margin-left:3px; letter-spacing:.16em; }
.tier-line{
  display:flex; gap:26px; margin-top:26px; padding-top:20px; border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--ink-3); letter-spacing:.06em;
}
.tier-line b{ color:var(--gold); font-weight:400; font-family:var(--serif); font-size:16px; margin-left:4px; }
.tier-list{ list-style:none; margin-top:22px; display:flex; flex-direction:column; gap:11px; flex:1; }
.tier-list li{ font-size:13px; color:var(--ink-2); line-height:1.75; padding-left:16px; position:relative; }
.tier-list .dot{ position:absolute; left:0; top:9px; width:4px; height:4px; border-radius:50%; background:var(--gold); opacity:.75; }

.mem-table{ border:1px solid var(--line-soft); overflow-x:auto; }
.mem-table table{ width:100%; border-collapse:collapse; font-size:14px; }
.mem-table th,.mem-table td{ padding:17px 20px; text-align:left; border-bottom:1px solid var(--line-soft); }
.mem-table th{ font-size:10.5px; font-weight:400; letter-spacing:.2em; color:var(--gold); text-transform:uppercase; }
.mem-table td{ color:var(--ink-2); }
.mem-table td:first-child{ color:var(--ink); }
.mem-table td em{ font-style:normal; font-family:var(--serif); font-size:15px; color:var(--ink-3); margin-left:12px; letter-spacing:.02em; }
.mem-table .n{ text-align:right; white-space:nowrap; font-family:var(--serif); font-size:16px; letter-spacing:.02em; }
.mem-table td.gold{ color:var(--gold-soft); }
.mem-table tr:last-child td{ border-bottom:none; }

.ruleitem{ background:var(--bg); border:1px solid var(--line-soft); padding:34px 30px; }
.ruleitem .rn{ font-family:var(--serif); font-size:12px; letter-spacing:.3em; color:var(--gold); opacity:.8; }
.ruleitem h4{ font-size:19px; font-weight:400; margin:12px 0 10px; letter-spacing:.04em; }
.ruleitem p{ font-size:13.5px; color:var(--ink-2); line-height:1.95; }

.mem-steps{ grid-template-columns:repeat(3,1fr); }

@media (max-width:1024px){
  .mem-grid{ grid-template-columns:1fr; }
  .mem-steps{ grid-template-columns:1fr; gap:34px; }
  .mem-table th,.mem-table td{ padding:14px 13px; font-size:13px; }
}
@media (max-width:760px){
  .tier{ padding:32px 24px 28px; }
  .mem-table{ font-size:12.5px; }
  .mem-table .n{ font-size:14px; }
}

/* 会员价目表 · 移动端改为表头短标签避免竖排换行 */
.mem-table th .lb{ display:none; }
@media (max-width:760px){
  .mem-table th{ font-size:10px; letter-spacing:.12em; white-space:nowrap; padding:13px 8px; }
  .mem-table th .full{ display:none; }
  .mem-table th .lb{ display:inline; }
  .mem-table td,.mem-table td em{ font-size:12px; }
  .mem-table td em{ display:block; margin-left:0; font-size:12px; }
}

/* ==========================================================
   Spreads page
   ========================================================== */
.sp-bar{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding-bottom:20px; border-bottom:1px solid var(--line-soft);
}
.catchips{ display:flex; gap:10px; flex-wrap:wrap; }
.catchip{
  font-family:var(--sans); font-size:12.5px; letter-spacing:.12em; color:var(--ink-2);
  background:none; border:1px solid var(--line); border-radius:999px;
  padding:9px 18px; cursor:pointer; transition:.35s var(--ease);
}
.catchip span{ font-size:10px; color:var(--ink-3); margin-left:6px; letter-spacing:.04em; }
.catchip:hover{ color:var(--ink); border-color:rgba(216,189,138,.4); }
.catchip.on{ background:rgba(216,189,138,.12); border-color:rgba(216,189,138,.55); color:var(--gold-soft); }
.catchip.on span{ color:var(--gold); opacity:.75; }
.spsort{ display:flex; gap:8px; }
.sortbtn{
  font-family:var(--sans); font-size:11.5px; color:var(--ink-3); background:none;
  border:none; border-bottom:1px solid transparent; padding:6px 2px; cursor:pointer; transition:.3s;
}
.sortbtn:hover{ color:var(--ink-2); }
.sortbtn.on{ color:var(--gold); border-bottom-color:rgba(216,189,138,.5); }
.sp-hint{ color:var(--ink-3); margin-top:16px; letter-spacing:.04em; }

.sp-sec .sp-cat{ margin-bottom:76px; }
.sp-sec .sp-cat:last-child{ margin-bottom:20px; }
.sp-cathead{
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px;
  margin-bottom:34px; padding-bottom:18px; border-bottom:1px solid var(--line-soft);
}
.sp-cathead .h-lg{ font-size:clamp(26px,3.4vw,40px); }
.sp-cathead .h-lg .italic{ margin-left:10px; color:var(--gold); font-size:.52em; letter-spacing:.06em; }
.sp-cathead p{ font-size:13.5px; color:var(--ink-3); max-width:360px; line-height:1.85; text-align:right; }

.sp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); }
.sp{
  background:var(--bg); padding:32px 30px 26px; display:flex; flex-direction:column;
  transition:.5s var(--ease); position:relative;
}
.sp:hover{ background:rgba(216,189,138,.028); }
.sp:hover::after{
  content:""; position:absolute; inset:0; border:1px solid rgba(216,189,138,.28); pointer-events:none;
}
.sp-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.sp-no{ font-family:var(--serif); font-size:13px; letter-spacing:.2em; color:var(--gold); opacity:.75; }
.sp-cut{
  font-size:10.5px; letter-spacing:.16em; color:var(--ink-3);
  border:1px solid var(--line); border-radius:999px; padding:3px 11px;
}
.sp-multi{
  font-size:9.5px; letter-spacing:.1em; color:var(--gold); opacity:.62;
  margin-left:8px; padding:2px 7px; border-radius:3px;
  border:1px solid rgba(216,189,138,.24);
}
.sp h3{ font-family:var(--serif); font-size:25px; font-weight:400; letter-spacing:.04em; line-height:1.35; }
.sp-en{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); margin-top:8px; }
.sp-desc{ font-size:13.5px; line-height:1.95; color:var(--ink-2); margin-top:18px; flex:1; }
.sp-pos{
  font-size:11.5px; line-height:1.85; color:var(--ink-3); margin-top:18px;
  padding-top:16px; border-top:1px dashed rgba(196,178,255,.1);
}
.sp-pos b{ display:block; font-weight:400; font-size:10px; letter-spacing:.24em; color:var(--gold); opacity:.8; margin-bottom:6px; }
.sp-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.sp-note{
  font-size:11.5px; line-height:1.9; color:var(--gold); opacity:.82;
  margin-top:12px; padding:9px 12px; border-left:1px solid rgba(216,189,138,.35);
  background:rgba(216,189,138,.035);
}
.sp-tag{
  font-size:10.5px; color:var(--ink-3); padding:2px 9px;
  border:1px solid rgba(196,178,255,.12); border-radius:3px; letter-spacing:.06em;
}
.sp-foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:12px;
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line-soft);
}
.sp-price{ font-family:var(--serif); font-size:31px; color:var(--gold-soft); line-height:1; letter-spacing:.02em; }
.sp-price .cur{ font-size:16px; margin-right:2px; opacity:.8; }
.sp-price small{
  display:flex; flex-wrap:wrap; gap:5px; font-family:var(--sans); font-size:10.5px;
  color:var(--ink-3); letter-spacing:.02em; margin-top:12px; line-height:1;
}
.sp-price small span{
  white-space:nowrap; color:#8b849f; padding:4px 7px;
  border:1px solid rgba(196,178,255,.13); border-radius:3px;
}
.sp-price small em{ font-style:normal; margin-left:4px; color:var(--gold); }
.sp-price em{ font-style:normal; color:var(--gold); }
.sp-go{ font-size:11.5px; letter-spacing:.1em; color:var(--ink-3); white-space:nowrap; transition:.3s; }
.sp:hover .sp-go{ color:var(--gold); }
.sp-empty{
  border:1px dashed rgba(196,178,255,.14); padding:44px 30px; text-align:center;
  font-size:13.5px; color:var(--ink-3); line-height:2;
}
.sp.hide{ display:none !important; }
.sp-cat.hide{ display:none !important; }

@media (max-width:1024px){
  .sp-grid{ grid-template-columns:repeat(2,1fr); }
  .sp-cathead{ flex-direction:column; align-items:flex-start; gap:12px; }
  .sp-cathead p{ text-align:left; max-width:none; }
}
@media (max-width:760px){
  .sp-grid{ grid-template-columns:1fr; }
  .sp{ padding:28px 22px 24px; }
  .sp h3{ font-size:23px; }
  .sp-bar{ gap:14px; }
  .catchips{ gap:8px; }
  .catchip{ padding:8px 14px; font-size:12px; }
  .spsort{ width:100%; justify-content:space-between; }
  .sp-sec .sp-cat{ margin-bottom:56px; }
}

/* 牌阵页底部两栏：顶部对齐，避免左右高度不齐 */
.sp-sec + .rule + .sec .grid.g2{ align-items:start; }

/* 服务页 → 牌阵一览 引导条 */
.more-link{
  display:flex; align-items:center; gap:18px; margin-top:26px; padding:22px 26px;
  border:1px solid var(--line); transition:.45s var(--ease);
}
.more-link:hover{ border-color:rgba(216,189,138,.4); background:rgba(216,189,138,.04); }
.more-link .ml-txt{ flex:1; font-size:14px; color:var(--ink-2); letter-spacing:.04em; }
.more-link .ml-n{ font-family:var(--serif); font-size:13px; letter-spacing:.2em; color:var(--gold); }
.more-link .ml-arw{ color:var(--gold); font-size:16px; transition:.4s var(--ease); }
.more-link:hover .ml-arw{ transform:translateX(6px); }
@media (max-width:760px){
  .more-link{ flex-wrap:wrap; gap:10px; padding:18px 20px; }
  .more-link .ml-txt{ flex:1 1 100%; font-size:13px; }
}

/* 牌阵示意图 */
.sp-fig{
  margin:20px -8px 4px; padding:14px 4px 10px; border:1px solid var(--line-soft);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(169,150,232,.07), transparent 70%),
    rgba(255,255,255,.012);
  display:flex; justify-content:center;
}
.spm{ width:100%; max-width:100%; height:auto; display:block; }
.spm-card{ transition:.6s var(--ease); }
.sp:hover .spm-card rect:first-child{ stroke-opacity:.7; }

/* 移动端卡片变窄，SVG 整体等比缩小，此处放大字号抵消缩放 */
@media (max-width:760px){
  .spm .spm-card text{ font-size:11px; }
  .spm > text{ font-size:11px; }
  .sp-fig{ margin:16px -4px 4px; padding:10px 2px 8px; }
}

/* ================= 答案之书 ================= */
.ab-wrap{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px);
  gap:clamp(32px,5vw,80px); align-items:center; margin-top:48px; min-height:520px;
}
.ab-stage{ display:flex; justify-content:center; align-items:center; }

/* 书：用透视做出翻页的厚度感 */
.ab-book{
  position:relative; width:min(100%,420px); aspect-ratio:3/4;
  perspective:1400px; transform-style:preserve-3d;
}
.ab-cover, .ab-page{
  position:absolute; inset:0; border-radius:2px 8px 8px 2px;
  transition:transform .62s var(--ease), opacity .62s var(--ease);
  transform-origin:left center;
}
/* 封面 */
.ab-cover{
  background:
    linear-gradient(135deg, rgba(216,189,138,.16), rgba(216,189,138,.03) 40%, rgba(169,150,232,.10)),
    linear-gradient(180deg, #12101d, #0a0812);
  border:1px solid rgba(216,189,138,.34);
  box-shadow:
    0 0 0 1px rgba(216,189,138,.08) inset,
    0 30px 70px -30px rgba(0,0,0,.9),
    0 0 60px -30px rgba(169,150,232,.5);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
}
.ab-cover::before{
  content:""; position:absolute; left:14px; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg, transparent, rgba(216,189,138,.35), transparent);
}
.ab-cover-in{ text-align:center; padding:40px 26px; }
.ab-moon{ width:96px; height:96px; display:block; margin:0 auto 26px; color:var(--gold); opacity:.9; }
.ab-cover-t{
  font-family:var(--serif); font-size:15px; letter-spacing:.42em; line-height:2;
  color:var(--gold-soft); opacity:.82;
}
.ab-cover-s{
  font-family:var(--serif); font-size:30px; letter-spacing:.3em; margin-top:20px;
  color:var(--ink);
}
.ab-cover-h{
  margin-top:30px; font-size:10px; letter-spacing:.34em; color:var(--ink-3);
  padding-top:20px; border-top:1px solid rgba(216,189,138,.18);
  display:inline-block;
}

/* 内页 */
.ab-page{
  background:linear-gradient(160deg, #14111f, #0c0a14);
  border:1px solid rgba(196,178,255,.18);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95);
  display:flex; align-items:center; justify-content:center;
  transform:rotateY(-92deg); opacity:0;
}
.ab-page.open{ transform:rotateY(0deg); opacity:1; }
.ab-page-in{
  padding:clamp(26px,4vw,46px); text-align:center; width:100%;
  display:flex; flex-direction:column; justify-content:center; min-height:340px;
}
.ab-q{
  font-size:12px; letter-spacing:.1em; color:var(--ink-3); line-height:1.9;
  min-height:18px; word-break:break-all;
}
.ab-a{
  font-family:var(--serif); font-size:clamp(21px,2.4vw,27px); line-height:1.65;
  color:var(--gold-soft); margin:26px 0 22px; letter-spacing:.04em;
}
.ab-meta{
  font-size:12.5px; line-height:1.95; color:var(--ink-2);
  padding-top:20px; border-top:1px solid rgba(196,178,255,.12);
}
/* 翻页时的轻微抖动 */
.ab-book.flipping .ab-cover{ transform:rotateY(-16deg) translateZ(6px); opacity:.35; }

.ab-side{ align-self:center; display:flex; flex-direction:column; justify-content:center; }
.ab-side .field label{ color:var(--ink-2); font-size:11.5px; }
.ab-side input[type=text]{
  font-size:14px; padding:14px 0 !important; color:var(--ink);
  border-bottom:1px solid rgba(196,178,255,.22);
}
.ab-side input[type=text]::placeholder{ color:rgba(169,162,191,.45); }
.ab-side .ab-hint{ margin-top:16px; line-height:1.9; color:var(--ink-3); font-size:11.5px; }

@media (max-width:900px){
  .ab-wrap{ grid-template-columns:1fr; gap:36px; }
  .ab-stage{ min-height:0; }
  .ab-book{ width:min(88%,300px); }
  .ab-stage{ padding:6px 0 10px; }
}

/* 答案之书 · 三步说明 */
.ab-steps{ display:flex; flex-direction:column; gap:18px; padding-bottom:26px; border-bottom:1px solid var(--line-soft); }
.ab-step{ display:flex; gap:16px; align-items:flex-start; }
.ab-step span{
  font-family:var(--serif); font-size:11px; letter-spacing:.16em; color:var(--gold);
  opacity:.9; padding-top:2px; flex:none;
}
.ab-step p{ font-size:13px; line-height:1.9; color:#c9c3dd; }

/* ================= 玩法 Tab ================= */
.play-tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  position:relative; align-items:stretch;
}
.ptab{
  display:flex; align-items:center; gap:16px; text-align:left; cursor:pointer;
  padding:22px 26px; border-radius:3px; font:inherit; color:inherit;
  border:1px solid var(--line); background:rgba(255,255,255,.012);
  transition:.45s var(--ease); position:relative; overflow:hidden;
}
.ptab::after{
  content:""; position:absolute; inset:0; opacity:0; transition:.45s;
  background:linear-gradient(120deg, rgba(216,189,138,.09), transparent 62%);
}
.ptab:hover{ border-color:rgba(216,189,138,.32); }
.ptab:hover::after{ opacity:1; }
.ptab.on{
  border-color:rgba(216,189,138,.5);
  background:linear-gradient(120deg, rgba(216,189,138,.10), rgba(169,150,232,.05) 60%, transparent);
}
.ptab.on::after{ opacity:1; }
.ptab-ic{ flex:none; display:grid; place-items:center; width:42px; height:42px;
  border:1px solid rgba(216,189,138,.22); border-radius:50%; }
.ptab-tx{ display:flex; flex-direction:column; gap:5px; flex:1; }
.ptab-tx b{ font-family:var(--serif); font-size:19px; font-weight:400; letter-spacing:.1em; color:var(--ink); }
.ptab-tx em{ font-style:normal; font-size:11px; letter-spacing:.2em; color:var(--ink-3); }
.ptab-ar{ font-size:15px; color:var(--gold); opacity:0; transform:translateX(-6px); transition:.4s; }
.ptab.on .ptab-ar{ opacity:.9; transform:none; }

/* 音效开关 */
.sound-toggle{
  position:absolute; right:-6px; top:-40px; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--ink-3);
  transition:.3s;
}
.sound-toggle:hover{ color:var(--gold); border-color:rgba(216,189,138,.4); }
.sound-toggle.on{ color:var(--gold); }
.sound-toggle:not(.on) .w1,
.sound-toggle:not(.on) .w2{ opacity:0; }

/* ================= 塔罗抽牌舞台 ================= */
.tp-stage{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:clamp(28px,4vw,60px); align-items:center; margin-bottom:8px;
}
.tp-deckwrap{ position:relative; display:flex; justify-content:center; }
.tp-glow{
  position:absolute; left:50%; top:52%; width:420px; height:420px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(169,150,232,.13), transparent 66%);
  pointer-events:none; filter:blur(6px);
}
.tp-side{ display:flex; flex-direction:column; }
.tp-progress{ display:flex; flex-direction:column; gap:0; margin-bottom:30px; }
.tp-step{
  display:flex; align-items:center; gap:14px; padding:11px 0; position:relative;
  opacity:.34; transition:.45s;
}
.tp-step::before{
  content:""; position:absolute; left:7px; top:34px; bottom:-11px; width:1px;
  background:rgba(196,178,255,.14);
}
.tp-step:last-child::before{ display:none; }
.tp-step span{
  width:15px; height:15px; border-radius:50%; flex:none;
  border:1px solid rgba(196,178,255,.3); display:grid; place-items:center;
  font-size:0; transition:.4s;
}
.tp-step em{ font-style:normal; font-size:12.5px; letter-spacing:.14em; color:var(--ink-2); }
.tp-step.on{ opacity:1; }
.tp-step.on span{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(216,189,138,.12); }
.tp-step.on span::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); }
.tp-step.on em{ color:var(--gold-soft); }
.tp-step.done{ opacity:.62; }
.tp-step.done span{ border-color:rgba(216,189,138,.5); }
.tp-step.done span::after{ content:""; width:5px; height:5px; border-radius:50%; background:rgba(216,189,138,.5); }
.tp-step.done em{ color:var(--ink-3); }

.tp-focus{ margin-bottom:22px; }
.tp-focus label{ display:block; font-size:10.5px; letter-spacing:.24em; color:var(--ink-3); margin-bottom:12px; text-transform:uppercase; }
.tp-focus input{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(196,178,255,.2);
  padding:10px 0; font:inherit; font-size:14px; color:var(--ink); outline:none; transition:.35s;
}
.tp-focus input::placeholder{ color:rgba(169,162,191,.4); }
.tp-focus input:focus{ border-bottom-color:rgba(216,189,138,.6); }
.tp-actions{ display:flex; flex-direction:column; gap:10px; }

.tp-status{
  text-align:center; font-size:11.5px; letter-spacing:.22em; color:var(--ink-3);
  margin:22px 0 40px; min-height:16px; transition:.4s;
}
.spread .slot{ width:132px; height:206px; }
.flip, .flip .face{ width:132px; height:206px; }
.face.back .sym{ width:62px; height:62px; }
.face.back .nm{ font-size:14px; }
.spread{ gap:18px; }

@media (max-width:900px){
  .play-tabs{ grid-template-columns:1fr; }
  .sound-toggle{ top:auto; bottom:-42px; right:0; }
  .tp-stage{ grid-template-columns:1fr; gap:8px; }
  .tp-side{ order:-1; margin-bottom:20px; }
  .tp-progress{ flex-direction:row; justify-content:space-between; margin-bottom:22px; }
  .tp-step{ flex-direction:column; gap:8px; padding:0; flex:1; text-align:center; }
  .tp-step::before{ display:none; }
  .tp-step em{ font-size:11px; letter-spacing:.06em; }
  .deck{ transform:scale(.66); transform-origin:center; margin:-64px 0; }
  .spread .slot, .flip, .flip .face{ width:96px; height:150px; }
  .spread{ gap:10px; }
  .face.back .sym{ width:44px; height:44px; }
  .face.back .nm{ font-size:11.5px; margin-top:6px; }
  .face.back .rev{ font-size:8px; letter-spacing:.14em; }
}

/* 首页答案之书按钮 */
.ab-cta{ display:inline-flex; align-items:center; }

/* 预约区块：留出吸顶导航的高度，锚点跳转不被遮挡 */
#booking, #play{ scroll-margin-top:96px; }
#answerbook{ scroll-margin-top:96px; }

/* 线上测试页：压缩首屏 hero，让玩法一屏可见 */
.phero.compact{ padding:150px 0 46px; }
.phero.compact h1{ font-size:clamp(2.1rem,3.8vw,3.2rem); }
.phero.compact p{ margin-top:18px; font-size:14px; }

/* 抽牌面板：压缩标题区，牌堆上提 */
#panel-tarot > .wrap > .divine > div:first-child{ margin-bottom:26px !important; }
#panel-tarot .h-lg{ font-size:clamp(1.9rem,3.2vw,2.6rem) !important; }
#panel-tarot .divine{ padding-top:clamp(26px,3vw,40px); }
#panel-tarot{ padding-top:16px !important; }
.play-tabs{ margin-bottom:4px; }

@media (max-width:760px){
  .ptab{ padding:15px 18px; gap:12px; }
  .ptab-ic{ width:34px; height:34px; }
  .ptab-ic svg{ width:20px; height:20px; }
  .ptab-tx b{ font-size:16px; }
  .ptab-tx em{ font-size:10px; }
  .tp-side{ margin-bottom:12px; }
  .tp-progress{ margin-bottom:16px; }
  .tp-step em{ font-size:10.5px; }
  .tp-status{ margin:14px 0 26px; font-size:10.5px; letter-spacing:.14em; }
  .hero-cta{ flex-wrap:wrap; }
  .hero-cta .btn{ flex:1 1 auto; justify-content:center; }
}

/* ================= 塔罗注意事项 ================= */
.notes-grid{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(30px,4vw,64px); align-items:start; margin-top:8px;
}
.note-list{ display:flex; flex-direction:column; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.note-item{
  display:grid; grid-template-columns:52px 1fr; gap:20px; align-items:start;
  background:var(--bg); padding:26px 28px; transition:.45s var(--ease);
}
.note-item:hover{ background:rgba(216,189,138,.028); }
.note-item .ni{
  font-family:var(--serif); font-size:13px; letter-spacing:.16em; color:var(--gold);
  opacity:.7; padding-top:2px;
}
.note-item h4{
  font-family:var(--serif); font-size:17.5px; font-weight:400; letter-spacing:.04em;
  color:var(--ink); margin-bottom:9px; line-height:1.5;
}
.note-item p{ font-size:13.2px; line-height:1.92; color:var(--ink-2); }

.note-aside{ display:flex; flex-direction:column; gap:24px; position:sticky; top:110px; }
.note-aside > *{ flex:none; }
.na-card{
  border:1px solid rgba(216,189,138,.22); padding:28px 26px;
  background:linear-gradient(160deg, rgba(216,189,138,.055), rgba(169,150,232,.02) 70%, transparent);
}
.na-t{
  font-size:10.5px; letter-spacing:.28em; color:var(--gold); opacity:.85;
  text-transform:uppercase; margin-bottom:20px;
}
.na-card ul{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.na-card li{
  display:flex; gap:12px; font-size:13px; line-height:1.8; color:#c9c3dd;
}
.na-card li span{
  font-family:var(--serif); font-size:10.5px; letter-spacing:.1em;
  color:var(--gold); opacity:.65; flex:none; padding-top:2px;
}
.na-quote{
  font-family:var(--serif); font-size:16.5px; line-height:2; color:var(--ink);
  letter-spacing:.03em; padding-left:20px; border-left:1px solid rgba(216,189,138,.3);
}
.na-note{
  font-size:11.5px; line-height:1.95; color:var(--ink-3);
  padding:16px 18px; border:1px dashed rgba(196,178,255,.12);
}
@media (max-width:900px){
  .notes-grid{ grid-template-columns:1fr; }
  .note-aside{ position:static; }
  .note-item{ grid-template-columns:38px 1fr; gap:14px; padding:22px 20px; }
  .note-item h4{ font-size:16px; }
}

/* 注意事项：适合 / 不适合 */
.na-fit{ border:1px solid var(--line-soft); padding:24px 24px 22px; }
.na-fit-t{
  font-size:10.5px; letter-spacing:.24em; color:var(--ink-3);
  text-transform:uppercase; margin-bottom:18px;
}
.na-fit-row{ display:flex; gap:12px; align-items:flex-start; padding:12px 0; }
.na-fit-row + .na-fit-row{ border-top:1px solid var(--line-soft); }
.na-fit-row .tag{
  flex:none; font-size:10px; letter-spacing:.1em; padding:2px 8px; border-radius:2px; margin-top:2px;
}
.na-fit-row.yes .tag{ color:var(--gold-soft); background:rgba(216,189,138,.12); border:1px solid rgba(216,189,138,.3); }
.na-fit-row.no .tag{ color:var(--ink-3); background:rgba(196,178,255,.05); border:1px solid rgba(196,178,255,.16); }
.na-fit-row p{ font-size:12.5px; line-height:1.85; color:var(--ink-2); }

/* 去掉服务方式标签后，价格行单独居中于卡片底部 */
.svc .price{ justify-content:flex-start; }
.svc .price .p{ letter-spacing:.02em; }
/* 首页预览 / 服务页卡片：描述区高度收一点，避免底部大片留白 */
.svc{ display:flex; flex-direction:column; }
.svc .price{ margin-top:auto; }
.grid{ align-items:stretch; }
.grid .svc{ height:100%; }

/* 服务卡片：描述区不再强制占高，整卡高度由内容决定 */
.grid .svc p{ min-height:auto; }

/* 会员页：删除价目表后，档位区与规则区之间收紧间距 */
#plans + hr.rule{ margin:clamp(30px,3.6vw,46px) auto; }
#plans + hr.rule + section.sec{ padding-top:clamp(30px,3.6vw,48px); }

/* ================= 分享图弹层 ================= */
.sh-modal{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:28px; background:rgba(4,3,8,.86); backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:.4s var(--ease);
}
.sh-modal.on{ opacity:1; pointer-events:auto; }
.sh-box{
  position:relative; width:min(100%,380px); max-height:92vh; overflow-y:auto;
  border:1px solid rgba(216,189,138,.28); padding:22px 20px 24px;
  background:linear-gradient(180deg, #0e0b19, #08060f);
  box-shadow:0 40px 100px -40px #000, 0 0 80px -40px rgba(169,150,232,.6);
  transform:translateY(14px) scale(.98); transition:.45s var(--ease);
}
.sh-modal.on .sh-box{ transform:none; }
.sh-x{
  position:absolute; right:10px; top:8px; width:30px; height:30px; cursor:pointer;
  background:transparent; border:none; color:var(--ink-3); font-size:22px; line-height:1;
  transition:.3s;
}
.sh-x:hover{ color:var(--gold); }
.sh-t{
  font-family:var(--serif); font-size:19px; letter-spacing:.14em; color:var(--ink);
  text-align:center; margin-top:4px;
}
.sh-sub{
  font-size:11.5px; line-height:1.8; color:var(--ink-3); text-align:center;
  margin:8px 0 18px;
}
.sh-canvas-wrap{
  border:1px solid rgba(196,178,255,.1); background:#07060c; overflow:hidden;
  display:flex; justify-content:center;
}
#shCanvas{ width:100%; height:auto; display:block; cursor:zoom-in; transition:transform .3s var(--ease); }
/* 点一下放大，方便小屏时看清二维码 */
.sh-canvas-wrap.zoom{ overflow:auto; justify-content:flex-start; }
.sh-canvas-wrap.zoom #shCanvas{ width:auto; height:auto; max-width:none; margin:0; }
.sh-acts{ display:flex; gap:10px; margin-top:18px; }
.sh-acts .btn{ flex:1; justify-content:center; font-size:11px; padding:13px 14px; }
.sh-tip{ margin-top:12px; text-align:center; line-height:1.7; color:var(--gold); opacity:.75; min-height:16px; }
@media (max-width:760px){
  .sh-modal{ padding:14px; align-items:flex-end; }
  .sh-box{ width:100%; max-height:88vh; padding:20px 16px 20px; }
  #shCanvas{ max-height:52vh; width:auto; max-width:100%; }
  .sh-canvas-wrap{ position:relative; }
  .sh-canvas-wrap.zoom{ max-height:62vh; }
  .sh-canvas-wrap.zoom #shCanvas{ max-height:none; width:520px; max-width:none; margin:0; flex:0 0 520px; }
  .sh-zoomhint{
    position:absolute; right:8px; bottom:8px; z-index:2;
    font-size:10.5px; letter-spacing:.08em; color:var(--gold);
    background:rgba(8,6,15,.82); border:1px solid rgba(216,189,138,.3);
    padding:3px 8px; opacity:.85; pointer-events:none;
  }
}

/* 分享图原图查看 */
.sh-big{
  position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; padding:18px;
  background:rgba(4,3,9,.94); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:.35s var(--ease);
}
.sh-big.on{ opacity:1; pointer-events:auto; }
.sh-big img{
  max-width:min(100%, 620px); max-height:80vh; height:auto;
  box-shadow:0 30px 80px -30px #000; border:1px solid rgba(216,189,138,.25);
}
.sh-bigtip{ font-size:11px; letter-spacing:.1em; color:var(--gold); opacity:.7; }
.sh-bigx{
  position:absolute; right:14px; top:12px; width:36px; height:36px;
  background:transparent; border:none; color:var(--ink-3); font-size:26px; line-height:1; cursor:pointer;
}
@media (max-width:760px){
  .sh-big{ padding:10px; }
  .sh-big img{ max-width:100%; max-height:74vh; }
}

/* ---------- 每日一签 ---------- */
.daily{
  position:relative; margin-top:0; padding:clamp(30px,4.6vw,54px) clamp(22px,4vw,56px);
  border:1px solid rgba(216,189,138,.22); border-radius:4px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(122,96,214,.16), transparent 62%),
    linear-gradient(180deg, rgba(20,16,36,.86), rgba(9,7,18,.94));
  text-align:center; overflow:hidden;
}
.daily::before{
  content:''; position:absolute; inset:14px; border:1px solid rgba(216,189,138,.07);
  border-radius:2px; pointer-events:none;
}
.daily-head{
  display:flex; align-items:center; justify-content:center; gap:clamp(16px,2.4vw,26px);
  flex-wrap:wrap; margin-bottom:clamp(22px,3vw,34px);
}
.daily-head .eyebrow{ margin:0; display:inline-flex; align-items:center; gap:10px; }
.daily-dot{
  width:4px; height:4px; border-radius:50%; background:rgba(216,189,138,.6);
  display:inline-block;
}
.daily-date{
  font-size:11.5px; letter-spacing:.16em; color:var(--ink-3);
  font-family:var(--sans); white-space:nowrap;
  padding-left:clamp(16px,2.4vw,26px); border-left:1px solid rgba(216,189,138,.18);
}
.daily-line{
  font-size:11.5px; letter-spacing:.3em; color:rgba(216,189,138,.6);
  margin-bottom:clamp(16px,2.4vw,24px);
}
.daily-txt{
  font-family:var(--serif); color:var(--ink);
  font-size:clamp(30px,6vw,44px); line-height:1.62; letter-spacing:.04em;
  max-width:760px; margin:0 auto 0; text-wrap:balance;
}
.daily-sub{
  margin-top:clamp(16px,2.4vw,22px); font-size:13.5px; line-height:2;
  color:var(--ink-3); max-width:520px; margin-left:auto; margin-right:auto;
}
.daily-sub:empty{ display:none; }
.daily-foot{
  margin-top:clamp(26px,3.6vw,38px); padding-top:clamp(18px,2.4vw,24px);
  border-top:1px solid rgba(216,189,138,.1);
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
}
.daily-tip{ font-size:11.5px; letter-spacing:.08em; color:rgba(139,132,159,.75); }
.daily-btn{
  padding:11px 24px; border-radius:30px; cursor:pointer; font-family:inherit;
  border:1px solid rgba(216,189,138,.42); background:rgba(216,189,138,.1);
  color:var(--gold-soft); font-size:12.5px; letter-spacing:.1em; transition:.3s;
}
.daily-btn:hover{ background:rgba(216,189,138,.2); border-color:rgba(216,189,138,.7); }
@media (max-width:760px){
  .daily-head{ flex-direction:column; gap:8px; }
  .daily-foot{ flex-direction:column; gap:14px; }
  .daily-btn{ width:100%; }
}