:root {
  /* === Core Palette — canonical token set for all pages === */
  --black:           #000000;
  --charcoal:        #0a0a0a;
  --dark-grey:       #1a1a1a;
  --mid-grey:        #666666;
  --light-grey:      #cccccc;
  --white:           #ffffff;
  --gold:            #FEC027;
  --gold-dark:       #E6AD1F;
  --gold-glow:       rgba(254, 192, 39, 0.2);
  --electric-blue:   #00D4FF;
  --electric-purple: #A855F7;

  /* === Backward-Compat Aliases — do not remove === */
  --brand-gold: var(--gold);
  --brand-red:  #dc2626;
  --page-bg:    var(--charcoal);
  --text-1:     var(--white);
  --text-2:     rgba(255, 255, 255, 0.70);
  --text-muted: #888888;

  /* === Shadow Tokens === */
  --gold-shadow:  0 0 15px rgba(254, 192, 39, 0.5);
  --magic-shadow: 0 0 8px rgba(254, 192, 39, 0.3);

  /* === Layout === */
  --wrap-max:           1200px;
  --radius:             12px;
  --hero-header-offset: 82px;
  --hero-top-gap:       5px;

  /* === Navigation === */
  --nav-accent:    var(--gold);
  --nav-red:       var(--brand-red);
  --nav-bg:        #000;
  --nav-text:      rgba(255, 255, 255, 0.85);
  --nav-dim:       rgba(255, 255, 255, 0.65);
  --nav-dd-bg:     rgba(0, 0, 0, 0.95);
  --nav-dd-border: rgba(254, 192, 39, 0.4);
  --nav-shadow:    0 10px 40px rgba(254, 192, 39, 0.3), 0 0 0 1px rgba(254, 192, 39, 0.2);
}

*,*::before,*::after{ box-sizing:border-box }
html{
  overflow-y: scroll;
  scrollbar-gutter: stable both-edges;
}
html,body{ height:100% }
body{
  margin:0;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{
  overflow-x: hidden;
}
img,svg,video,canvas,audio{ display:block; max-width:100%; height:auto }
button,input,select,textarea{ font:inherit }
a{ color:inherit; text-decoration:none }

body{
  background: var(--page-bg);
  color: var(--text-1);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
}

.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.wrap{
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   Global CTA Button — used sitewide
   ========================================================================== */
.btn-hero-primary {
  padding: 22px 60px;
  font-size: 19px;
  font-weight: 800;
  background: var(--brand-gold);
  color: #000000;
  border: none;
  border-radius: 60px;
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-hero-primary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--text-1);
  transition: width 0.8s, height 0.8s, top 0.8s, left 0.8s;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.btn-hero-primary:hover::before {
  width: 500px;
  height: 500px;
}

.btn-hero-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 70px rgba(254,192,39,0.6);
}

.btn-hero-primary span {
  position: relative;
  z-index: 1;
}