#phero{padding:170px 0 90px;overflow:hidden}
#phero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 90% at 80% 25%,rgba(59,74,143,.30),transparent 65%)}
.ph-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;position:relative}
@media(max-width:900px){.ph-grid{grid-template-columns:1fr}.fan{margin-top:10px;height:400px}}
.fan{position:relative;height:470px;display:flex;align-items:center;justify-content:center}
.fan .doc-page{position:absolute;width:320px;min-height:400px;padding:28px 30px 22px;margin:0}
.fan .doc-page.p1{transform:rotate(-7deg) translateX(-58px);opacity:.85;animation:bob 8s ease-in-out infinite}
.fan .doc-page.p2{transform:rotate(5deg) translateX(66px) translateY(14px);opacity:.92;animation:bob 9.5s ease-in-out 1.2s infinite}
.fan .doc-page.p3{transform:rotate(-1deg);z-index:2;animation:bob 11s ease-in-out .6s infinite}
.fan .doc-page:hover{transform:rotate(0) scale(1.02);z-index:3;opacity:1}
.fan .doc-chap{font-size:1.02rem}
.fan .doc-page p{font-size:.79rem;line-height:1.68}
.fan .doc-key p{font-size:.75rem}
.fan .orbits{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:520px;height:520px;pointer-events:none}
.fan .orbits i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(212,182,120,.12)}
.fan .orbits i:nth-child(1){width:340px;height:340px}
.fan .orbits i:nth-child(2){width:440px;height:440px;border-color:rgba(212,182,120,.08)}
.fan .orbits i:nth-child(3){width:520px;height:520px;border-color:rgba(212,182,120,.05)}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
@media(max-width:920px){.why{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}}
.why-card{border-radius:var(--al-r-lg);background-image:var(--al-grad-surface);
  border:1px solid var(--al-hairline);box-shadow:var(--al-e2);padding:0;overflow:hidden;transition:transform 200ms ease-out}
.why-card:hover{transform:translateY(-5px)}
.why-card .why-body{padding:24px 30px 28px}
.why-card h3{font-size:1rem;font-weight:500;margin-bottom:8px}
.why-card p{font-size:.87rem;color:var(--al-text-dim);line-height:1.7}
.why-sky{position:relative;height:120px;overflow:hidden;
  background-image:radial-gradient(1.6px 1.6px at 12% 34%,#F6E7C2,transparent),radial-gradient(1.2px 1.2px at 30% 68%,rgba(255,255,255,.6),transparent),
  radial-gradient(1.5px 1.5px at 54% 26%,#F6E7C2,transparent),radial-gradient(1.2px 1.2px at 76% 62%,rgba(255,255,255,.55),transparent),
  radial-gradient(1.4px 1.4px at 90% 30%,#F6E7C2,transparent),
  linear-gradient(172deg,#141733 0%,#0C0F22 60%,#080A18 100%)}
.ill-moon-s{position:absolute;left:50%;top:56%;width:66px;height:66px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#FFFBF0,#F3E9D4 22%,#D9CBAC 48%,#A9997A 72%,#4A4335 100%);
  box-shadow:0 0 30px -6px rgba(212,182,120,.5),inset -9px -7px 18px rgba(12,15,34,.5)}
.ill-sun-s{position:absolute;left:50%;top:56%;width:70px;height:70px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,#FFF8E4 0%,#F6E7C2 34%,#D4B678 62%,#9A7B3C 100%);
  box-shadow:0 0 46px -6px rgba(212,182,120,.75),0 0 18px rgba(246,231,194,.4)}
.ill-sun-s::after{content:'';position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(212,182,120,.26)}
.ill-sat-s{position:absolute;left:50%;top:56%;width:64px;height:64px;transform:translate(-50%,-50%)}
.ill-sat-s b{position:absolute;inset:0;border-radius:50%;
  background:repeating-linear-gradient(172deg,#E8D2A0 0 6%,#C9A468 6% 11%,#E3CB9A 11% 17%,#B08E52 17% 22%);
  box-shadow:0 0 0 1px rgba(246,231,194,.2),0 0 28px -6px rgba(212,182,120,.5),inset -9px -6px 18px rgba(12,15,34,.6)}
.ill-sat-s i{position:absolute;left:-32%;top:38%;width:164%;height:24%;border-radius:50%;
  border:2px solid rgba(246,231,194,.5);border-bottom-color:rgba(246,231,194,.14);transform:rotate(-16deg)}
.chapters{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;margin-top:52px;max-width:900px;margin-left:auto;margin-right:auto}
@media(max-width:820px){.chapters{grid-template-columns:1fr}}
.chap{display:flex;gap:16px;align-items:flex-start;border-radius:var(--al-r-md);
  background-image:var(--al-grad-surface);border:1px solid var(--al-hairline);box-shadow:var(--al-e1);
  padding:16px 20px;transition:transform 180ms ease-out,border-color 180ms ease-out}
.chap:hover{transform:translateX(4px);border-color:var(--al-border)}
.chap-num{font-family:var(--al-font-display);font-size:.95rem;color:var(--al-gold-300);
  min-width:32px;height:32px;border-radius:50%;border:1px solid var(--al-border-strong);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chap b{display:block;font-weight:500;font-size:.9rem;color:var(--al-ivory);margin-bottom:1px}
.chap span{font-size:.8rem;color:var(--al-text-dim);line-height:1.55}
.quest-callout{max-width:900px;margin:36px auto 0;display:flex;gap:18px;align-items:flex-start;
  border-radius:var(--al-r-lg);border:1px solid var(--al-border);background-image:var(--al-grad-surface);
  box-shadow:var(--al-e2);padding:26px 30px}
.xtabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:36px 0 30px}
.xtab{border-radius:var(--al-r-pill);padding:9px 20px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--al-text-dim);background:none;border:1px solid var(--al-hairline);cursor:pointer;
  font-family:var(--al-font-ui);transition:all 180ms ease-out}
.xtab:hover{color:var(--al-ivory);border-color:var(--al-border-strong)}
.xtab.on{background:var(--al-grad-gold);color:#1A1305;border-color:#E7D3A9;box-shadow:var(--al-emboss-gold);font-weight:600}
.xpage{display:none}
.xpage.on{display:block;animation:xfade .5s ease-out}
@keyframes xfade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:52px;max-width:960px;margin-left:auto;margin-right:auto;position:relative}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:34px}}
.step{text-align:center;padding:0 26px;position:relative}
.step .stepseal{width:56px;height:56px;border-radius:50%;margin:0 auto 20px;
  background:var(--al-grad-gold);border:1px solid #E7D3A9;box-shadow:var(--al-emboss-gold);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--al-font-display);font-size:1.15rem;color:#191104}
.step h3{font-size:.98rem;font-weight:500;margin-bottom:8px}
.step p{font-size:.86rem;color:var(--al-text-dim);line-height:1.7}
#comment .steps::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:640px;height:640px;border-radius:50%;border:1px solid rgba(212,182,120,.07);pointer-events:none}
#comment .steps::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:440px;height:440px;border-radius:50%;border:1px solid rgba(212,182,120,.10);pointer-events:none}
.eth-grid{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center;max-width:820px;margin:44px auto 0}
@media(max-width:720px){.eth-grid{grid-template-columns:1fr;justify-items:center;text-align:left}}
.moon-ash{width:150px;height:150px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 34% 28%,#DDE4FF,#A9B2D8 26%,#6B75A6 54%,#3A4066 78%,#151A30 100%);
  box-shadow:0 0 0 1px rgba(221,228,255,.24),0 0 60px -16px rgba(107,121,196,.5),inset -16px -12px 34px rgba(8,10,24,.6);
  animation:bob 10s ease-in-out infinite}
.buy-wrap{max-width:520px;margin:52px auto 0}
.buy{position:relative;border-radius:var(--al-r-lg);background-image:var(--al-grad-surface);
  border:1px solid var(--al-border-strong);box-shadow:var(--al-e3);padding:40px 38px;text-align:center}
.buy .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%)}
.buy .price-row{justify-content:center}
.buy .price{font-size:3.4rem}
.buy ul{list-style:none;text-align:left;border-top:1px solid var(--al-hairline);
  padding-top:20px;margin:22px 0 26px;display:grid;gap:10px}
.buy li{font-size:.88rem;color:var(--al-text-dim);padding-left:22px;position:relative}
.buy li::before{content:'✦';position:absolute;left:0;top:2px;color:var(--al-gold-400);font-size:.62rem;font-family:var(--al-font-glyph)}
.buy .btn{width:100%;justify-content:center}
.buy .offer-moon{top:-26px;right:-18px;width:74px;height:74px;animation:bob 9s ease-in-out infinite}

@media(max-width:820px){
  #comment .steps::before{width:330px;height:330px}
  #comment .steps::after{width:230px;height:230px}
}