/* ===== The Pyramid ===== */
body { background: #0a0806; color: var(--text); }

/* Cinematic backdrop: gold-duotone stadium, darkened, with a summit glow that
   intensifies as you climb (--climb set by JS, 0 at base, 1 at the summit). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background:
    repeating-linear-gradient(135deg, rgba(202,162,74,.025) 0 1px, transparent 1px 50px),
    linear-gradient(90deg, rgba(6,5,3,.55), rgba(6,5,3,.8) 70%),
    linear-gradient(180deg, rgba(8,6,4,.8), rgba(8,6,4,.9) 50%, rgba(5,4,3,.97)),
    url("../assets/pyramid-bg.jpg") center / cover no-repeat fixed;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(75% 45% at 50% -8%, rgba(202,162,74, calc(.08 + var(--climb, 0) * .30)), transparent 62%);
  transition: background .6s ease;
}

/* Intro */
.pyr-hero {
  position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 110px clamp(20px, 6vw, 80px) 70px;
}
.pyr-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 42% at 50% 16%, rgba(202,162,74,.16), transparent 60%); pointer-events: none; }
.pyr-kicker { position: relative; z-index: 2; font-family: var(--sans); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; color: var(--gold); margin-bottom: 22px; }
.pyr-kicker.center { margin-bottom: 14px; }
.pyr-title { position: relative; z-index: 2; font-family: var(--display); font-weight: 400; font-size: clamp(44px, 8vw, 110px); line-height: .94; color: #fff; letter-spacing: -.01em; text-shadow: 0 8px 50px rgba(0,0,0,.6); }
.pyr-sub { position: relative; z-index: 2; max-width: 600px; margin: 24px auto 0; font-family: var(--sans); font-size: clamp(15px, 1.7vw, 18px); line-height: 1.6; color: #d4cfc5; text-shadow: 0 2px 14px rgba(0,0,0,.6); }

.track-toggle { position: relative; z-index: 2; display: inline-flex; gap: 6px; margin-top: 34px; padding: 6px; border: 1px solid rgba(255,255,255,.14); border-radius: 100px; background: rgba(8,6,4,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.track-btn { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--muted); background: transparent; border: none; cursor: pointer; padding: 11px 22px; border-radius: 100px; transition: color .25s, background .25s; }
.track-btn.active { color: #150f00; background: var(--gold); }
.pyr-scrollcue { position: relative; z-index: 2; margin-top: 46px; font-family: var(--sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #8c8578; }
.pyr-scrollcue span { display: inline-block; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Stage: sticky pyramid rail + scrolling steps */
.stage { display: grid; grid-template-columns: 0.74fr 1.26fr; gap: clamp(24px, 4vw, 56px); max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); }

.pyramid-rail { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; gap: 14px; }
.prestige { position: relative; width: 4px; height: 48vh; border-radius: 10px; background: rgba(255,255,255,.07); flex: none; }
.prestige::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: var(--fill, 20%); border-radius: 10px; background: linear-gradient(180deg, #f7d98a, var(--gold)); box-shadow: 0 0 14px rgba(202,162,74,.5); transition: height .5s cubic-bezier(.22,1,.36,1); }
.prestige-label { position: absolute; left: 14px; bottom: 0; transform: translateY(50%); white-space: nowrap; font-family: var(--sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 700; }

.pyramid-wrap { flex: 1; height: 50vh; display: flex; gap: 14px; align-items: stretch; }
.pyramid-graphic { flex: 1.25; display: flex; flex-direction: column; gap: 6px; filter: drop-shadow(0 16px 30px rgba(0,0,0,.4)); }
.band {
  flex: 1; border: none; padding: 0; cursor: pointer; position: relative;
  background: linear-gradient(180deg, rgba(150,118,52,.24), rgba(70,54,22,.26));
  box-shadow: inset 0 1px 0 rgba(255,235,180,.1);
  transition: filter .35s, background .35s, transform .35s;
}
.band:hover { background: linear-gradient(180deg, rgba(170,136,60,.4), rgba(96,74,30,.4)); }
.band.active { background: linear-gradient(180deg, #f3d488, #caa24a 72%, #9c7a30); filter: drop-shadow(0 0 18px rgba(202,162,74,.45)); transform: translateX(2px); }

.pyramid-labels { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.plabel { flex: 1; display: flex; align-items: center; gap: 9px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--muted); transition: color .25s; }
.plabel .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.22); flex: none; transition: background .25s, box-shadow .25s; }
.plabel:hover { color: #fff; }
.plabel.active .dot { background: var(--gold); box-shadow: 0 0 12px rgba(202,162,74,.7); }
.plabel.active .pl-name { color: var(--gold); }

/* Steps */
.tier-steps { display: flex; flex-direction: column; }
.tier-card { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 56px 0; opacity: .35; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.tier-card.active { opacity: 1; transform: none; }

/* Premium content panel */
.tier-inner {
  position: relative; max-width: 620px; padding: clamp(28px, 3vw, 44px) clamp(26px, 3vw, 46px);
  background: linear-gradient(180deg, rgba(18,15,10,.72), rgba(10,8,5,.8));
  border: 1px solid rgba(255,255,255,.09); border-radius: 22px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 34px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}
.tier-bignum { position: absolute; top: 6px; right: 22px; font-family: var(--display); font-size: clamp(78px, 11vw, 150px); line-height: 1; color: rgba(202,162,74,.1); pointer-events: none; }
.tier-meta { position: relative; display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.tier-step { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.tier-level { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(202,162,74,.4); border-radius: 100px; padding: 4px 11px; }
.tier-name { position: relative; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4.6vw, 58px); color: #fff; line-height: 1; letter-spacing: .01em; }
.tier-tag { position: relative; font-family: var(--serif); font-style: italic; font-size: clamp(17px, 2vw, 23px); color: var(--gold); margin: 12px 0 24px; }
.tier-detail { position: relative; display: grid; gap: 16px; }
.tier-detail .lbl, .tier-who .lbl { display: block; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 5px; }
.tier-detail .lbl { color: #8c8578; }
.tier-detail p { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: #dad5cb; }
/* the GOAT hook, highlighted */
.tier-who { position: relative; margin-top: 20px; padding: 15px 18px; border-radius: 13px; background: rgba(202,162,74,.09); border: 1px solid rgba(202,162,74,.22); }
.tier-who .lbl { color: var(--gold); }
.tier-who p { font-family: var(--sans); font-size: 15px; line-height: 1.55; color: #ece2cd; }
.tier-prestige { position: relative; display: flex; gap: 6px; margin-top: 22px; }
.tier-prestige i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.16); }
.tier-prestige i.on { background: var(--gold); box-shadow: 0 0 10px rgba(202,162,74,.5); }

/* Summit payoff */
.summit-payoff { position: relative; text-align: center; padding: clamp(80px, 14vw, 160px) clamp(20px, 6vw, 80px); }
.summit-payoff::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 55% at 50% 50%, rgba(202,162,74,.14), transparent 65%); pointer-events: none; }
.payoff-title { position: relative; z-index: 2; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 5vw, 62px); color: #fff; line-height: 1; }
.payoff-sub { position: relative; z-index: 2; max-width: 560px; margin: 22px auto 32px; font-family: var(--sans); font-size: clamp(15px, 1.7vw, 18px); line-height: 1.6; color: #d4cfc5; }
.payoff-sub em { color: var(--gold); font-style: italic; font-family: var(--serif); }
.btn-primary { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: #150f00; font-family: var(--sans); font-weight: 600; font-size: 14px; text-decoration: none; padding: 14px 26px; border-radius: 100px; transition: transform .2s, background .2s; }
.btn-primary span { transition: transform .2s; }
.btn-primary:hover { transform: translateY(-2px); background: #e6c468; }
.btn-primary:hover span { transform: translateX(3px); }

/* Back home */
#goat-home { position: fixed; top: 18px; left: 18px; z-index: 60; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #fff; text-decoration: none; padding: 8px 14px; border-radius: 100px; background: rgba(10,10,12,.55); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: .85; transition: opacity .2s, border-color .2s, color .2s; }
#goat-home:hover { opacity: 1; border-color: var(--gold); color: var(--gold); }

/* Mobile: collapse the rail to a slim top strip */
@media (max-width: 880px) {
  .stage { grid-template-columns: 1fr; }
  .pyramid-rail { position: sticky; top: 0; height: auto; padding: 10px 0; background: rgba(8,6,4,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 20; gap: 10px; }
  .prestige { display: none; }
  .pyramid-wrap { height: 56px; gap: 8px; }
  .pyramid-graphic { flex-direction: row; gap: 4px; filter: none; }
  .band { clip-path: none !important; -webkit-clip-path: none !important; border-radius: 5px; }
  .pyramid-labels { display: none; }
  .tier-card { min-height: 66vh; }
}
@media (prefers-reduced-motion: reduce) { .pyr-scrollcue span { animation: none; } .band, .tier-card, .prestige::after, body::after { transition: none; } }