/* ══════════ CLEOPOODLA ══════════ */
:root{
  --gold:#e8bf5a;
  --gold-hi:#fff0b8;
  --gold-dp:#8a6412;
  --turq:#3fc6d4;
  --turq-dp:#12707d;
  --lapis:#3a63d8;
  --lapis-dp:#16307a;
  --coral:#d4643c;
  --ink:#0b0906;
  --ink-2:#141009;
  --sand:#e9dcc0;
  --sand-dim:#a8987a;
  --pap:#efe2c4;
  --shadow:0 20px 60px rgba(0,0,0,.6);
  --grad-gold:linear-gradient(180deg,#fff3c4 0%,#e8bf5a 38%,#b8891f 62%,#f6dd93 100%);
  --display:'Cinzel Decorative',Georgia,serif;
  --serif:'Cinzel',Georgia,serif;
  --ui:'Rubik',system-ui,-apple-system,sans-serif;
  --mono:'Rubik',system-ui,sans-serif;
  --line-gold:linear-gradient(90deg,transparent,rgba(232,191,90,.75),transparent);
}
/* small caps label — the thing that makes a crypto site read as considered */
.label,.eyebrow,.ca-label,.ca-copy,.stat span,.tier span,.cap,.foot-links a,
.ticker-track span,.strip-track span,.gate-note,.copy{
  font-family:var(--ui);font-weight:800;text-transform:uppercase;
  font-feature-settings:"tnum" 1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--sand);
  font-family:var(--ui);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.locked{overflow:hidden;height:100vh}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* background texture */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%,rgba(232,191,90,.18),transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 100%,rgba(63,198,212,.10),transparent 60%),
    radial-gradient(ellipse 60% 45% at 12% 82%,rgba(58,99,216,.13),transparent 62%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px);
}
#sandCanvas{position:fixed;inset:0;z-index:1;pointer-events:none}
#rayLayer{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:
    linear-gradient(100deg,transparent 42%,rgba(255,231,160,.07) 46%,transparent 50%),
    linear-gradient(84deg,transparent 62%,rgba(255,231,160,.05) 66%,transparent 70%);
  animation:rays 14s ease-in-out infinite alternate;
}
@keyframes rays{to{transform:translateX(6%) skewX(-3deg)}}
#coinLayer{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
#flashLayer{position:fixed;inset:0;z-index:59;pointer-events:none;opacity:0;background:radial-gradient(circle,#fff6cf,#e8bf5a 60%,transparent 75%);mix-blend-mode:screen}

/* ══════════ GATE ══════════ */
#gate{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 45%,#1b1409,#050403 70%);
  transition:opacity .9s ease,visibility .9s;
}
#gate.gone{opacity:0;visibility:hidden}
.gate-inner{text-align:center;padding:24px;max-width:560px}
.gate-glyphs{color:var(--gold);letter-spacing:.55em;font-size:clamp(14px,3vw,20px);opacity:.55;animation:pulse 3s ease-in-out infinite}
@keyframes pulse{50%{opacity:1}}
.gate-face{
  width:min(190px,44vw);aspect-ratio:1;border-radius:50%;object-fit:cover;margin:28px auto 18px;
  border:3px solid var(--gold);box-shadow:0 0 60px rgba(232,191,90,.45),inset 0 0 30px #000;
  animation:float 5s ease-in-out infinite;
}
@keyframes float{50%{transform:translateY(-12px)}}
.gate-title{
  font-family:var(--display);font-weight:900;font-size:clamp(34px,9vw,66px);margin:0 0 12px;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:.015em;line-height:.98;
}
.gate-sub{color:var(--sand-dim);line-height:1.7;margin:0 0 30px;font-size:15.5px;letter-spacing:-.005em}
.gate-btn{
  font-family:var(--ui);font-weight:700;font-size:clamp(14px,3.2vw,17px);letter-spacing:.10em;text-transform:uppercase;
  padding:18px 30px;border:0;border-radius:999px;cursor:pointer;color:#241a04;
  background:var(--grad-gold);box-shadow:0 0 0 0 rgba(232,191,90,.6),0 14px 34px rgba(0,0,0,.5);
  animation:beat 1.9s ease-in-out infinite;transition:transform .15s;
}
.gate-btn:hover{transform:scale(1.05)}
.gate-btn:active{transform:scale(.97)}
@keyframes beat{
  0%,100%{box-shadow:0 0 0 0 rgba(232,191,90,.55),0 14px 34px rgba(0,0,0,.5)}
  70%{box-shadow:0 0 0 26px rgba(232,191,90,0),0 14px 34px rgba(0,0,0,.5)}
}
.gate-note{color:#7d7159;font-size:11px;margin-top:20px;letter-spacing:.14em}

/* ══════════ HUD ══════════ */
.hud{position:fixed;right:14px;bottom:14px;z-index:80;display:flex;gap:8px}
.hud-btn{
  width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:17px;
  background:rgba(20,16,9,.82);color:var(--gold);border:1px solid rgba(232,191,90,.4);
  backdrop-filter:blur(8px);display:grid;place-items:center;position:relative;transition:.2s;
}
.hud-btn:hover{border-color:var(--gold);box-shadow:0 0 18px rgba(232,191,90,.4)}
.hud-btn.off{opacity:.4;color:var(--sand-dim)}
.eq{position:absolute;bottom:7px;display:flex;gap:2px;align-items:flex-end;height:9px}
.eq i{width:2px;background:var(--turq);height:3px;animation:eq .6s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}
@keyframes eq{to{height:9px}}
.hud-btn.off .eq i{animation-play-state:paused;height:2px;background:var(--sand-dim)}

/* ══════════ TICKER ══════════ */
.ticker{
  position:sticky;top:0;z-index:70;overflow:hidden;
  background:linear-gradient(90deg,#120d05,#241a08,#120d05);
  border-bottom:1px solid rgba(232,191,90,.28);
}
.ticker-track{display:flex;white-space:nowrap;animation:scroll 26s linear infinite;padding:9px 0}
.ticker-track span{font-weight:500;font-size:11px;letter-spacing:.26em;color:var(--gold);padding:0 18px}
.ticker-track b{color:var(--turq);padding:0 2px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ══════════ HERO ══════════ */
.hero{position:relative;z-index:2;min-height:calc(100svh - 36px);display:flex;flex-direction:column;justify-content:center;padding:40px 24px 60px}
.hero-glyphwall{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ctext x='10' y='40' font-size='34' fill='%23e8bf5a'%3E%F0%93%82%80%3C/text%3E%3Ctext x='60' y='90' font-size='34' fill='%23e8bf5a'%3E%F0%93%8B%B9%3C/text%3E%3C/svg%3E");
}
.hero-grid{
  position:relative;max-width:1180px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
}
.hero-grid>*{min-width:0}
.eyebrow{color:var(--turq);letter-spacing:.3em;font-size:10.5px;font-weight:700;margin-bottom:18px}
.mega{margin:0;line-height:.84;font-family:var(--display);font-weight:900;font-optical-sizing:auto}
.mega .line{
  display:block;font-size:clamp(52px,10.5vw,132px);letter-spacing:.005em;
  color:#f6eeda;text-shadow:0 2px 1px rgba(0,0,0,.5),0 18px 50px rgba(0,0,0,.75);
}
.mega .gold{
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 2px 1px rgba(0,0,0,.45)) drop-shadow(0 14px 34px rgba(232,191,90,.32));
}
.tagline{color:#b3a486;font-size:clamp(16px,1.7vw,19px);line-height:1.62;margin:26px 0 28px;max-width:32ch;letter-spacing:-.01em}
.tagline em{font-family:var(--display);font-style:italic;font-weight:600;color:var(--turq);font-size:1.12em}

.ca{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer;
  background:rgba(255,255,255,.035);border:1px dashed rgba(232,191,90,.45);
  padding:12px 15px;border-radius:10px;max-width:520px;transition:.2s;
}
.ca:hover{border-color:var(--gold);background:rgba(232,191,90,.09)}
.ca-label{color:var(--turq);font-size:9.5px;font-weight:700;letter-spacing:.22em}
.ca code{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:-.01em;color:var(--sand);word-break:break-all;overflow-wrap:anywhere;flex:1 1 120px;min-width:0}
.ca-copy{font-size:9.5px;font-weight:700;letter-spacing:.16em;color:var(--gold);white-space:nowrap}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0}
.btn{
  display:inline-block;font-family:var(--ui);font-weight:700;letter-spacing:.06em;font-size:14px;
  text-transform:uppercase;padding:16px 28px;border-radius:999px;transition:transform .15s,box-shadow .25s;
}
.btn:active{transform:scale(.96)}
.btn-gold{background:var(--grad-gold);color:#241a04;box-shadow:0 10px 30px rgba(232,191,90,.28)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 16px 42px rgba(232,191,90,.5)}
.btn-ghost{border:1px solid rgba(232,191,90,.5);color:var(--gold)}
.btn-ghost:hover{background:rgba(232,191,90,.12);transform:translateY(-3px)}
.btn.big{font-size:15px;padding:21px 46px;letter-spacing:.1em}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:34px;max-width:560px}
.stat{border-left:2px solid rgba(232,191,90,.35);padding-left:11px}
.stat b{display:block;font-family:var(--display);font-size:clamp(19px,2.7vw,28px);color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15;letter-spacing:.005em}
.stat span{font-size:8.5px;letter-spacing:.18em;color:#7d7159;font-weight:500;display:block;margin-top:5px}

/* ── the queen ── */
.hero-art{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:520px;justify-self:center;width:100%}
.halo{
  position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle,rgba(232,191,90,.35),rgba(63,198,212,.12) 55%,transparent 70%);
  filter:blur(26px);animation:halo 6s ease-in-out infinite;
}
@keyframes halo{50%{transform:scale(1.12);opacity:.75}}
.ring{
  position:absolute;border-radius:50%;color:var(--gold);font-size:15px;
  white-space:nowrap;overflow:hidden;display:grid;justify-items:center;align-items:start;
  border:1px solid rgba(232,191,90,.22);letter-spacing:.4em;opacity:.6;
}
.ring-1{inset:0;animation:spin 44s linear infinite;padding-top:1px}
.ring-2{inset:9%;animation:spin 32s linear infinite reverse;font-size:12px;opacity:.32}
@keyframes spin{to{transform:rotate(360deg)}}
.queen{
  position:relative;width:78%;aspect-ratio:1;border-radius:50%;cursor:pointer;
  transform:translate(var(--px,0px),var(--py,0px));
  transition:transform .25s cubic-bezier(.2,1.6,.4,1);
}
.queen img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;
  animation:float 6s ease-in-out infinite;
  border:3px solid var(--gold);
  box-shadow:0 0 0 8px rgba(232,191,90,.09),0 0 70px rgba(232,191,90,.35),0 30px 60px rgba(0,0,0,.6);
  filter:saturate(1.06) contrast(1.06) sepia(.12);
}
.queen::after{
  content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,transparent 52%,rgba(11,9,6,.55) 78%,rgba(11,9,6,.92) 100%),
             radial-gradient(circle at 50% 50%,rgba(232,191,90,.10),transparent 60%);
  mix-blend-mode:multiply;
}
.queen::before{
  content:'';position:absolute;inset:-2px;border-radius:50%;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 40px rgba(232,191,90,.35);
}
.queen:hover{transform:translate(var(--px,0px),var(--py,0px)) scale(1.05) rotate(-1.5deg)}
.queen:active{transform:translate(var(--px,0px),var(--py,0px)) scale(.95)}
.queen.shake{animation:shake .4s}
@keyframes shake{
  0%,100%{transform:translate(0) rotate(0)}
  20%{transform:translate(-8px,4px) rotate(-3deg)}
  40%{transform:translate(7px,-5px) rotate(3deg)}
  60%{transform:translate(-6px,-3px) rotate(-2deg)}
  80%{transform:translate(5px,3px) rotate(2deg)}
}
.laser{
  position:absolute;top:38%;width:0;height:5px;border-radius:3px;opacity:0;
  background:linear-gradient(90deg,#fff,#ff2d2d 30%,rgba(255,45,45,0));
  box-shadow:0 0 22px #ff2d2d;transition:opacity .12s;
}
.laser-l{left:33%}.laser-r{left:57%}
body.pump .laser{opacity:1;width:60vw;animation:laserflick .1s steps(2) infinite}
@keyframes laserflick{50%{opacity:.7}}
.pet-hint{
  position:absolute;bottom:2%;font-family:var(--mono);font-size:10px;text-transform:uppercase;
  color:#7d7159;letter-spacing:.2em;
  animation:pulse 2.2s ease-in-out infinite;
}
.pet-hint.hide{opacity:0;transition:opacity .4s}
.pet-count{
  position:absolute;top:4%;right:4%;font-family:var(--mono);font-weight:700;color:var(--turq);
  font-size:10px;text-transform:uppercase;letter-spacing:.16em;text-shadow:0 0 14px rgba(63,198,212,.7);
}
.scroll-cue{text-align:center;color:var(--gold);opacity:.45;margin-top:36px;animation:float 2.4s ease-in-out infinite;font-size:14px}

/* ══════════ STRIP ══════════ */
.strip{
  position:relative;z-index:2;overflow:hidden;background:var(--grad-gold);
  transform:rotate(-1.4deg) scale(1.04);margin:10px 0 60px;
}
.strip-track{display:flex;white-space:nowrap;animation:scroll 30s linear infinite}
.strip-track span{color:#241a04;font-weight:700;font-size:11.5px;letter-spacing:.2em;padding:12px 0}

/* ══════════ SECTIONS ══════════ */
.sec{position:relative;z-index:2;padding:70px 24px}
.wrap{max-width:1120px;margin:0 auto}
.wrap.narrow{max-width:760px}
.h2{
  font-family:var(--display);font-weight:900;font-size:clamp(32px,6vw,62px);margin:0 0 14px;
  text-align:center;color:#f6eeda;letter-spacing:.005em;line-height:1;
}
.h2 .gold{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{text-align:center;color:#8d8168;margin:0 0 46px;font-size:15px;letter-spacing:-.005em}
.reveal{opacity:0;transform:translateY(38px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ── lore ── */
.lore-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:start;margin-top:34px}
.papyrus{
  background:linear-gradient(160deg,#e6d6ae,#cdb885);color:#3a2c10;padding:34px 30px;border-radius:4px;
  box-shadow:var(--shadow);line-height:1.72;font-size:15.5px;letter-spacing:-.005em;
  clip-path:polygon(0 1%,3% 0,97% 1.2%,100% 0,99.4% 99%,96% 100%,3% 98.8%,0 100%);
}
.papyrus p{margin:0 0 15px}
.papyrus .big{font-family:var(--display);font-weight:700;font-size:clamp(17px,2.6vw,25px);text-align:center;margin:26px 0;color:#6b4d0d;letter-spacing:.02em}
.papyrus .carve{
  font-family:var(--display);font-weight:900;font-size:clamp(24px,4.4vw,38px);text-align:center;
  color:#5a4210;text-shadow:0 1px 0 rgba(255,255,255,.6),0 -1px 0 rgba(0,0,0,.28);letter-spacing:.06em;margin:20px 0 8px;
}
.papyrus .tiny{font-family:var(--display);font-size:12.5px;opacity:.62;text-align:center;font-style:italic;font-weight:600}
.lore-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lcard{
  background:rgba(255,255,255,.035);border:1px solid rgba(232,191,90,.2);border-radius:16px;padding:22px 18px;
  transition:.25s;cursor:default;
}
.lcard:hover{transform:translateY(-6px);border-color:var(--gold);background:rgba(232,191,90,.08);box-shadow:0 16px 36px rgba(0,0,0,.45)}
.lcard span{font-size:26px;color:var(--gold);display:block;margin-bottom:8px}
.lcard h3{margin:0 0 7px;font-size:17px;color:var(--turq);letter-spacing:-.015em;font-weight:600}
.lcard p{margin:0;font-size:14px;color:#8d8168;line-height:1.58;letter-spacing:-.005em}

/* ── pyramid ── */
.pyramid{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:20px}
.tier{
  background:var(--grad-gold);color:#241a04;text-align:center;padding:16px 10px;
  border-radius:5px;box-shadow:0 10px 24px rgba(0,0,0,.5);transition:.25s;cursor:default;
  display:flex;flex-direction:column;justify-content:center;
}
.tier:hover{transform:translateY(-5px) scale(1.02);filter:brightness(1.12)}
.tier b{font-family:var(--display);font-size:clamp(19px,3.2vw,31px);font-weight:900;display:block;line-height:1.08;letter-spacing:.005em}
.tier span{font-size:8.5px;letter-spacing:.22em;font-weight:500;opacity:.68;display:block;margin-top:5px}
.t1{width:min(230px,62vw)}.t2{width:min(400px,80vw)}.t3{width:min(570px,92vw)}.t4{width:min(740px,98vw)}

/* ── steps ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{
  background:rgba(255,255,255,.035);border:1px solid rgba(232,191,90,.2);border-radius:18px;padding:26px 20px;
  transition:.25s;position:relative;overflow:hidden;
}
.step::after{
  content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.09) 50%,transparent 60%);
  transform:translateX(-100%);transition:transform .7s;
}
.step:hover::after{transform:translateX(100%)}
.step:hover{transform:translateY(-8px);border-color:var(--gold);box-shadow:0 20px 44px rgba(0,0,0,.5)}
.step i{
  font-family:var(--display);font-weight:900;font-style:normal;font-size:38px;line-height:1;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:10px;
}
.step h3{margin:0 0 9px;font-size:17px;color:var(--turq);font-weight:600;letter-spacing:-.015em}
.step p{margin:0;font-size:14px;color:#8d8168;line-height:1.6;letter-spacing:-.005em}
.cta-center{text-align:center;margin-top:44px}

/* ── roadmap ── */
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.phase{
  border:1px solid rgba(232,191,90,.22);border-radius:18px;padding:24px 20px;
  background:rgba(255,255,255,.03);transition:.25s;
}
.phase:hover{transform:translateY(-7px);border-color:var(--gold);background:rgba(232,191,90,.07)}
.phase h3{margin:0 0 15px;font-family:var(--display);font-weight:700;font-size:18px;color:var(--gold);letter-spacing:.005em}
.phase ul{margin:0;padding-left:17px;color:#8d8168;font-size:14px;line-height:1.8;letter-spacing:-.005em}
.phase.done{border-color:var(--turq);background:rgba(63,198,212,.07)}
.phase.done h3{color:var(--turq)}
.phase.done li{text-decoration:line-through;opacity:.62}

/* ── gallery ── */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.gframe{
  position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;cursor:pointer;
  border:2px solid rgba(232,191,90,.32);background:#0e0b06;transition:.25s;
}
.gframe img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gframe:hover{border-color:var(--gold);transform:translateY(-6px) rotate(-1.5deg);box-shadow:0 18px 40px rgba(0,0,0,.55)}
.gframe:hover img{transform:scale(1.09)}
.gframe .cap{
  position:absolute;left:0;right:0;bottom:0;padding:10px 11px;font-size:8.5px;font-weight:500;
  letter-spacing:.16em;color:var(--gold);background:linear-gradient(transparent,rgba(5,4,3,.92));
}
.gf-1 img{filter:sepia(.8) saturate(1.5) hue-rotate(-12deg)}
.gf-2 img{filter:grayscale(1) contrast(1.35)}
.gf-3 img{filter:hue-rotate(160deg) saturate(2)}
.gf-4 img{filter:invert(1) hue-rotate(180deg)}
.gf-5 img{filter:contrast(2.2) saturate(2.6) brightness(1.1)}
.gf-6 img{filter:sepia(1) hue-rotate(300deg) saturate(3)}

/* ── faq ── */
details{
  border:1px solid rgba(232,191,90,.2);border-radius:14px;padding:16px 20px;margin-bottom:11px;
  background:rgba(255,255,255,.03);transition:.2s;
}
details:hover{border-color:rgba(232,191,90,.5)}
details[open]{background:rgba(232,191,90,.07)}
summary{cursor:pointer;font-weight:600;font-size:16.5px;color:var(--gold);list-style:none;letter-spacing:-.015em}
summary::-webkit-details-marker{display:none}
summary::before{content:'𓋹 ';opacity:.7}
details p{margin:13px 0 0;color:#8d8168;font-size:14.5px;line-height:1.7;letter-spacing:-.005em}

/* ══════════ FOOTER ══════════ */
footer{position:relative;z-index:2;text-align:center;padding:60px 24px 46px;border-top:1px solid rgba(232,191,90,.18)}
.foot-face{
  width:88px;height:88px;border-radius:50%;object-fit:cover;margin:0 auto 22px;
  border:2px solid var(--gold);box-shadow:0 0 34px rgba(232,191,90,.32);
}
.foot-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.foot-links a{
  border:1px solid rgba(232,191,90,.4);color:var(--gold);padding:11px 20px;border-radius:999px;
  font-size:10px;font-weight:500;letter-spacing:.2em;transition:.2s;
}
.foot-links a:hover{background:var(--gold);color:#241a04;transform:translateY(-3px)}
.disclaimer{max-width:620px;margin:0 auto 20px;font-size:11.5px;line-height:1.75;color:#645a47;letter-spacing:-.003em}
.copy{font-size:9.5px;color:#7d7159;letter-spacing:.2em;margin:0}

/* ══════════ PUMP MODE ══════════ */
body.pump{animation:quake .28s infinite}
@keyframes quake{
  0%,100%{transform:translate(0)}
  25%{transform:translate(-4px,3px)}
  50%{transform:translate(4px,-3px)}
  75%{transform:translate(-3px,-2px)}
}
body.pump .mega .line{animation:hue 1s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg)}}
.coin{position:absolute;font-size:26px;will-change:transform;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-art{order:-1;max-width:400px}
  .hero-copy{text-align:center}
  .tagline{margin-inline:auto}
  .cta-row,.stats{justify-content:center}
  .stats{margin-inline:auto}
  .lore-grid{grid-template-columns:1fr}
  .steps,.phases{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .sec{padding-block:52px}
  .steps,.phases,.lore-cards{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;gap:14px}
  .ca code{font-size:10px}
  .hud{right:10px;bottom:10px}
  .ring-1,.ring-2{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ═══════════════════════════════════════════════════════════
   L U X E   L A Y E R
   gold foil, cartouches, ornaments, engraved rules
   ═══════════════════════════════════════════════════════════ */

/* ── restore display weights for Cinzel ── */
.mega,.h2,.gate-title{font-weight:900;letter-spacing:.02em}
.mega .line{font-size:clamp(46px,9.4vw,116px);letter-spacing:.015em}
.mega{line-height:.92}
.h2{font-size:clamp(28px,5.6vw,56px);line-height:1.06}
.stat b,.tier b,.phase h3,.step i,.papyrus .big,.papyrus .carve,.papyrus .tiny{font-family:var(--display)}
.tagline em{font-family:var(--ui);font-style:italic;font-weight:600;font-size:1em;
  color:var(--turq);text-shadow:0 0 18px rgba(63,198,212,.4)}
.papyrus .tiny{font-family:var(--serif);font-weight:400}

/* ── animated gold foil: a highlight that travels across the letters ── */
.mega .gold,.h2 .gold,.gate-title{
  background:linear-gradient(100deg,
    #b8891f 0%,#e8bf5a 18%,#fff6d0 33%,#f6dd93 42%,
    #c9992b 55%,#e8bf5a 70%,#fff3c4 85%,#b8891f 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:foil 7s ease-in-out infinite;
}
@keyframes foil{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.mega .line{
  text-shadow:
    0 1px 0 rgba(255,247,214,.35),
    0 -1px 0 rgba(0,0,0,.55),
    0 3px 0 #241a08,
    0 20px 46px rgba(0,0,0,.75);
}
.mega .gold{text-shadow:none;filter:drop-shadow(0 3px 0 rgba(36,26,8,.85)) drop-shadow(0 16px 38px rgba(232,191,90,.35))}

/* ── cartouche: the royal oval around the name ── */
.cartouche{position:relative;padding:16px 0 18px}
.cartouche::before,.cartouche::after{
  content:'';position:absolute;left:-6px;right:-6px;height:1px;pointer-events:none;
  background:var(--line-gold);
}
.cartouche::before{top:0;box-shadow:0 3px 0 -1.5px rgba(232,191,90,.28)}
.cartouche::after{bottom:0;box-shadow:0 -3px 0 -1.5px rgba(232,191,90,.28)}

/* ── ornamental divider under every section heading ── */
.h2::after{
  content:'';display:block;height:20px;margin:16px auto 0;width:min(320px,72%);
  background:
    linear-gradient(90deg,transparent,rgba(232,191,90,.7) 22%,transparent 42%,
                    transparent 58%,rgba(232,191,90,.7) 78%,transparent) center 9px/100% 1px no-repeat,
    linear-gradient(90deg,transparent,rgba(232,191,90,.3) 30%,transparent 44%,
                    transparent 56%,rgba(232,191,90,.3) 70%,transparent) center 13px/100% 1px no-repeat,
    radial-gradient(circle at 50% 10px,var(--gold) 0 3.2px,transparent 3.6px),
    radial-gradient(circle at calc(50% - 13px) 10px,var(--turq) 0 2.1px,transparent 2.5px),
    radial-gradient(circle at calc(50% + 13px) 10px,var(--turq) 0 2.1px,transparent 2.5px),
    radial-gradient(circle at calc(50% - 26px) 10px,var(--lapis) 0 2.1px,transparent 2.5px),
    radial-gradient(circle at calc(50% + 26px) 10px,var(--lapis) 0 2.1px,transparent 2.5px),
    radial-gradient(circle at calc(50% - 39px) 10px,var(--coral) 0 1.8px,transparent 2.2px),
    radial-gradient(circle at calc(50% + 39px) 10px,var(--coral) 0 1.8px,transparent 2.2px);
}
.sub{margin-top:-8px}

/* ── ticker: proper metrics + engraved brass rail ── */
.ticker{
  background:
    linear-gradient(180deg,rgba(255,236,178,.16),transparent 42%,rgba(0,0,0,.4)),
    linear-gradient(90deg,#0d0903,#2a1e09 22%,#3a2a0d 50%,#2a1e09 78%,#0d0903);
  border-top:1px solid rgba(232,191,90,.5);
  border-bottom:1px solid rgba(232,191,90,.42);
  box-shadow:inset 0 1px 0 rgba(255,240,190,.18),inset 0 -1px 0 rgba(0,0,0,.5),0 6px 22px rgba(0,0,0,.55);
}
.ticker::before,.ticker::after{
  content:'';position:absolute;top:0;bottom:0;width:12%;z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,#0d0903,transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,#0d0903,transparent)}
.ticker-track{align-items:center;padding:0;height:38px}
.ticker-track span,.ticker-track b{
  display:inline-flex;align-items:center;height:38px;line-height:1;
}
.ticker-track span{
  font-size:11px;font-weight:800;letter-spacing:.28em;color:#f0d489;padding:0 20px;
  text-shadow:0 1px 0 rgba(0,0,0,.7);
}
.ticker-track b{font-size:11px;color:var(--turq);opacity:.85;padding:0;text-shadow:0 0 10px rgba(63,198,212,.5)}

/* ── strip marquee: brass plate ── */
.strip{
  background:
    linear-gradient(180deg,rgba(255,255,255,.5),transparent 40%,rgba(0,0,0,.22)),
    var(--grad-gold);
  box-shadow:0 10px 34px rgba(232,191,90,.18),inset 0 0 0 1px rgba(255,255,255,.35);
}
.strip-track{align-items:center}
.strip-track span{
  font-size:11.5px;font-weight:900;letter-spacing:.22em;line-height:1;padding:13px 0;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}

/* ── sunburst behind the queen ── */
.sunburst{
  position:absolute;inset:-16%;border-radius:50%;pointer-events:none;opacity:.24;
  background:repeating-conic-gradient(from 0deg,
    rgba(232,191,90,.55) 0deg .55deg,transparent .55deg 6deg);
  -webkit-mask:radial-gradient(circle,transparent 46%,#000 60%,rgba(0,0,0,.55) 74%,transparent 86%);
  mask:radial-gradient(circle,transparent 46%,#000 60%,rgba(0,0,0,.55) 74%,transparent 86%);
  animation:spin 90s linear infinite;
}
.ring{
  border-width:1px;
  box-shadow:inset 0 0 30px rgba(232,191,90,.12),0 0 24px rgba(232,191,90,.08);
}
.ring-1{border-color:rgba(232,191,90,.4)}
.queen img{border-width:2px;box-shadow:
  0 0 0 6px rgba(11,9,6,.9),
  0 0 0 7px rgba(232,191,90,.55),
  0 0 0 14px rgba(232,191,90,.10),
  0 0 80px rgba(232,191,90,.4),
  0 30px 70px rgba(0,0,0,.7);}

/* ── gold gradient hairline borders on every card ── */
.lcard,.step,.phase,details,.gframe{
  border:1px solid transparent;
  background-image:
    linear-gradient(180deg,#17120a,#100c06),
    linear-gradient(150deg,rgba(232,191,90,.72),rgba(58,99,216,.45) 45%,rgba(63,198,212,.4) 100%);
  background-origin:border-box;
  background-clip:padding-box,border-box;
}
.lcard:hover,.step:hover,.phase:hover,details:hover{
  background-image:
    linear-gradient(180deg,#241a0b,#15100a),
    linear-gradient(150deg,var(--gold),var(--lapis) 50%,var(--turq) 100%);
}
.phase.done{
  background-image:
    linear-gradient(180deg,#0d1a1d,#0a1113),
    linear-gradient(150deg,var(--turq),rgba(63,198,212,.35) 60%,rgba(232,191,90,.55));
}

/* ── pyramid tiers: polished blocks with a travelling shine ── */
.tier{position:relative;overflow:hidden;border:1px solid rgba(255,247,214,.55);
  background:
    linear-gradient(180deg,rgba(255,255,255,.55),transparent 38%,rgba(0,0,0,.2)),
    var(--grad-gold);
  box-shadow:0 12px 28px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.7);
}
.tier::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translateX(-120%);
}
.tier:hover::after{transform:translateX(120%);transition:transform .8s ease}
.tier b{text-shadow:0 1px 0 rgba(255,255,255,.45)}

/* ── buttons: foil + shine sweep ── */
.btn-gold{
  position:relative;overflow:hidden;border:1px solid rgba(255,247,214,.6);
  background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 42%),var(--grad-gold);
  box-shadow:0 10px 30px rgba(232,191,90,.3),inset 0 1px 0 rgba(255,255,255,.75);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.btn-gold::after{
  content:'';position:absolute;top:0;bottom:0;width:45%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
  animation:sweep 3.6s ease-in-out infinite;
}
@keyframes sweep{0%{left:-60%}55%,100%{left:130%}}
.btn-ghost{
  border:1px solid transparent;
  background-image:linear-gradient(#12100a,#12100a),
                   linear-gradient(120deg,var(--gold),var(--lapis) 55%,var(--turq));
  background-origin:border-box;background-clip:padding-box,border-box;
}

/* ── papyrus: gilded corners + deckled edge ── */
.papyrus{position:relative;box-shadow:var(--shadow),0 0 0 1px rgba(232,191,90,.25)}
.papyrus::before,.papyrus::after{
  content:'';position:absolute;width:34px;height:34px;pointer-events:none;
  border:1.5px solid rgba(122,90,20,.55);
}
.papyrus::before{top:12px;left:12px;border-right:0;border-bottom:0}
.papyrus::after{bottom:12px;right:12px;border-left:0;border-top:0}

/* ── stat rail: gilded ── */
.stat{border-left:2px solid transparent;
  background:linear-gradient(180deg,var(--gold),rgba(232,191,90,.05)) left/2px 100% no-repeat}
.stat b{text-shadow:0 0 22px rgba(232,191,90,.35)}

/* ── faq: gilded ankh marker ── */
summary::before{color:var(--gold);text-shadow:0 0 12px rgba(232,191,90,.5)}

/* ── section separators: a thin gilded rule between sections ── */
.sec+.sec::before{
  content:'';display:block;height:1px;width:min(880px,86%);margin:-24px auto 46px;
  background:var(--line-gold);opacity:.45;
}

/* ── footer: framed portrait ── */
.foot-face{box-shadow:0 0 0 5px rgba(11,9,6,.9),0 0 0 6px rgba(232,191,90,.5),0 0 40px rgba(232,191,90,.3)}
.foot-links a{
  border:1px solid transparent;
  background-image:linear-gradient(#12100a,#12100a),
                   linear-gradient(120deg,var(--gold),var(--lapis) 55%,var(--turq));
  background-origin:border-box;background-clip:padding-box,border-box;
}
.foot-links a:hover{background-image:var(--grad-gold),var(--grad-gold)}

/* ── gate: ornate ── */
.gate-face{box-shadow:0 0 0 6px rgba(5,4,3,.9),0 0 0 7px rgba(232,191,90,.6),0 0 70px rgba(232,191,90,.45),inset 0 0 30px #000}
.gate-title{letter-spacing:.05em}

details{background-color:transparent}
details[open]{
  background-image:
    linear-gradient(180deg,#221909,#14100a),
    linear-gradient(150deg,var(--gold),rgba(232,191,90,.4) 50%,var(--turq));
}
.gframe{background-image:linear-gradient(#0e0b06,#0e0b06),
        linear-gradient(150deg,var(--gold),var(--lapis) 50%,var(--turq))}

/* ── concept accents: lapis & coral from her collar ── */
.papyrus .mid{
  font-family:var(--display);font-weight:700;text-align:center;margin:-10px 0 22px;
  color:var(--lapis-dp);font-size:clamp(12px,1.9vw,15px);letter-spacing:.16em;
}
.papyrus em{font-style:italic;color:#8a3d1c}
.papyrus b{color:#6b4d0d}
.lcard span{
  background:linear-gradient(180deg,#fff3c4,#e8bf5a 45%,#b8891f);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 8px rgba(232,191,90,.35));
}
.lcard:nth-child(2) h3{color:var(--gold)}
.lcard:nth-child(3) h3{color:var(--coral)}
.lcard:nth-child(4) h3{color:var(--lapis)}
.step:nth-child(2) h3{color:var(--gold)}
.step:nth-child(3) h3{color:var(--coral)}
.step:nth-child(4) h3{color:var(--lapis)}
.ticker-track b:nth-of-type(2n){color:var(--lapis);text-shadow:0 0 10px rgba(58,99,216,.6)}
.ticker-track b:nth-of-type(3n){color:var(--coral);text-shadow:0 0 10px rgba(212,100,60,.5)}
.eyebrow{color:var(--turq);text-shadow:0 0 16px rgba(63,198,212,.35)}
.pet-count{color:var(--coral);text-shadow:0 0 14px rgba(212,100,60,.6)}

/* ── swash safety: gold text is painted with background-clip:text, so any glyph
      ink that overhangs its advance width (Cinzel's final A) falls outside the
      painted box and reads as clipped. Pad the box, pull the layout back. ── */
.gate-title,.mega .gold,.h2 .gold,.lcard span,.step i,.stat b,.tier b{
  padding-inline:.16em;margin-inline:-.16em;
}
/* the gate wordmark is a block: hug the text and never exceed the gate */
.gate-inner{max-width:min(640px,94vw)}
.gate-title{
  display:inline-block;width:max-content;max-width:100%;
  font-size:clamp(28px,7.4vw,62px);
}

/* ── gate wordmark is now SVG: it scales to the box, never clips ── */
.gate-title{
  display:block;width:min(560px,86vw);max-width:100%;margin:0 auto 12px;
  padding:0;font-size:0;line-height:0;
}
.gate-title svg{width:100%;height:auto;overflow:visible;display:block}
.gate-title svg text{font-family:var(--display);font-weight:900}

/* ── hero wordmark: JS shrinks a line that would not fit (see main.js) ── */
.mega .line{white-space:nowrap}

/* inline links inside body copy */
.step p a{color:var(--turq);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(63,198,212,.45)}
.step p a:hover{color:var(--gold);text-decoration-color:var(--gold)}