/* ==========================================================================
   GOLD ACCENT LAYER — the "gilded cathedral".
   Colour roles:  frost = intelligence & safety (system, guards, info)
                  gold  = money, premium, action, the brand
                  teal / ember = profit / loss data only
   Loaded last so it can refine the base layers.
   ========================================================================== */

/* utilities ------------------------------------------------------------- */
.gold { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .12em; }
.badge--gold { background: var(--gold-soft); color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--gold-edge); }
.stars { color: var(--gold); font-size: 14px; line-height: 1; }
:focus-visible { outline-color: var(--gold); }
.progress { background: var(--gold-grad); box-shadow: 0 0 10px var(--gold-glow); }

/* primary action: metallic gold pill with an idle sheen ------------------ */
.btn--gold {
  color: #1b1305; font-weight: 600; background: var(--gold-grad); box-shadow: var(--sh-gold);
  overflow: hidden; isolation: isolate; transition: transform .2s var(--ease-out), box-shadow .2s, filter .2s;
}
.btn--gold::after {
  content: ""; position: absolute; inset: 0; z-index: var(--z-below); border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%);
  transform: translateX(-130%); animation: sheen 5.5s var(--ease-in-out) infinite;
}
.btn--gold:hover { filter: brightness(1.07); box-shadow: var(--sh-gold), 0 14px 40px -12px var(--gold-glow); }
@keyframes sheen { 0%, 72% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

/* hero ------------------------------------------------------------------ */
.hero__word { background: linear-gradient(180deg, rgba(255, 231, 163, .15) 0%, rgba(242, 199, 92, 0) 70%); -webkit-background-clip: text; background-clip: text; }

/* LED board: the brand name burns gold ---------------------------------- */
.led__track span.led-gold { color: var(--gold-hi); text-shadow: 0 0 10px rgba(242, 199, 92, .7), 0 0 34px rgba(242, 199, 92, .35); }

/* results: money in gold ------------------------------------------------ */
.stat__bar--gold i { background: var(--gold-grad); }
.tip b { color: var(--gold-hi); }
.heat td.tot { color: var(--gold-hi); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-edge); }

/* engine: the active module is lit in gold ------------------------------ */
.modules__pulse { background: var(--gold-grad); box-shadow: 0 0 12px var(--gold-glow); }
.mod[aria-selected="true"] .mod__icon { color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--gold-edge), inset 0 1px 1px rgba(255, 231, 163, .3), 0 0 28px -6px var(--gold-glow); }
.mod::after { background: var(--gold); }
.bigtime { color: var(--gold-hi); text-shadow: 0 0 14px rgba(242, 199, 92, .6), 0 0 40px rgba(242, 199, 92, .3); }

/* compare: the ZEUS column is gilded ------------------------------------ */
.compare .us { background: linear-gradient(180deg, rgba(242, 199, 92, .07), rgba(242, 199, 92, .02)); }
.compare thead .us { color: var(--gold-hi); box-shadow: inset 0 2px 0 var(--gold), inset 1px 0 0 var(--gold-edge), inset -1px 0 0 var(--gold-edge); }
.compare tbody .us { box-shadow: inset 1px 0 0 var(--gold-edge), inset -1px 0 0 var(--gold-edge), inset 0 -1px 0 var(--edge-soft); }
.compare tbody tr:last-child .us { box-shadow: inset 1px 0 0 var(--gold-edge), inset -1px 0 0 var(--gold-edge), inset 0 -2px 0 var(--gold); }
.compare .us .yes { background: var(--gold-soft); color: var(--gold-hi); }

/* studio simulator ------------------------------------------------------ */
input[type="range"] { background: linear-gradient(90deg, var(--gold) var(--p, 50%), var(--glass-3) var(--p, 50%)); }
input[type="range"]::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(242, 199, 92, .22), 0 0 14px var(--gold-glow); }
input[type="range"]::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(242, 199, 92, .22); }
.switch button[aria-checked="true"] { background: rgba(242, 199, 92, .62); }

/* testimonials ---------------------------------------------------------- */
.quote .stars { display: block; margin-bottom: 14px; }
.quote p em { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* pricing --------------------------------------------------------------- */
.countdown b { color: var(--gold-hi); text-shadow: 0 0 10px rgba(242, 199, 92, .6); }
.seats b { color: var(--gold-hi); }
.seats__bar i { background: var(--gold-grad); }
.price--featured { background: linear-gradient(180deg, rgba(242, 199, 92, .08), transparent 42%), var(--deep-glass); box-shadow: var(--sh-modal), 0 0 0 1px var(--gold-edge), 0 0 90px -20px rgba(242, 199, 92, .38); }
.price--featured::before { width: 70%; background: linear-gradient(90deg, transparent, var(--gold-hi), transparent); }
.price--featured.spot::after { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(242, 199, 92, .08), transparent 65%); }
.price--featured .price__name { color: var(--gold-hi); }
.price--featured li::before { background: var(--gold-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2c75c' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 10px no-repeat; box-shadow: inset 0 0 0 1px var(--gold-edge); }
.pay svg { color: var(--gold); }
/* stacked layouts: lead with the featured (lifetime) plan */
@media (max-width: 1080px) { .price--featured { order: -1; } }

/* guarantee seal -------------------------------------------------------- */
.seal b { color: var(--gold-hi); text-shadow: 0 0 14px rgba(242, 199, 92, .55); }

/* FAQ ------------------------------------------------------------------- */
.faq details[open] summary i { color: var(--gold-hi); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-edge); }

/* final CTA: golden light from above ------------------------------------ */
.final::before { content: ""; position: absolute; left: 50%; top: 55%; width: 900px; height: 560px; transform: translate(-50%, -50%); z-index: var(--z-below); pointer-events: none; background: radial-gradient(ellipse, rgba(242, 199, 92, .10), transparent 65%); }

/* footer + dock --------------------------------------------------------- */
.socials a:hover { color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--gold-edge); }
.dock b { color: var(--gold-hi); }