/* ============ BUTTONS ============ */
.btn {
  position:        relative;
  /* .btn--gold's ::before gradient layer relies on z-index: -1 to sit just
     behind the button. Without an explicit z-index here, .btn has no
     stacking context of its own, so that -1 layer escapes to the nearest
     ancestor's stacking context and can render behind IT instead — hiding
     the gradient entirely until :hover adds a transform (which always
     creates a stacking context) and suddenly makes it visible. */
  z-index:         0;
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  font-family:     var(--font-display);
  font-size:       14.5px;
  font-weight:     700;
  letter-spacing:  .01em;
  text-transform:  none;
  padding:         15px 26px;
  border-radius:   999px;
  cursor:          pointer;
  border:          1px solid transparent;
  /* .btn is also used on native <button> elements (e.g. "Start the
     assessment"), which get an opaque UA background by default — that
     would sit on top of and hide .btn--gold's ::before gradient layer. */
  background:      none;
  /* Native <button> UA styling (unlike <a>) can also render its own
     platform appearance on top of custom border/background — reset it so
     <button class="btn"> renders identically to <a class="btn">. */
  appearance:         none;
  -webkit-appearance: none;
  transition:
    transform   .18s ease,
    box-shadow  .25s ease,
    background  .2s  ease,
    color       .2s  ease;
  white-space: nowrap;
}

/* Gradient fill lives on its own layer, clipped by its own border-radius,
   instead of painting directly on .btn — avoids a Chrome/Safari rendering
   bug where a gradient background combined with border-radius + box-shadow
   on the same element leaves a thin gap/sliver at the rounded corners. */
.btn--gold {
  color:      #fff;
  box-shadow: 0 8px 24px -12px var(--glow);
}

/* ::after, not ::before — .crosslink .btn::before is a separate shine-sweep
   hover effect (07-overrides.css) and, being more specific than
   .btn--gold::before, was completely overriding this gradient layer inside
   .crosslink sections, leaving those gold buttons with no fill at all. */
.btn--gold::after {
  content:       "";
  position:      absolute;
  inset:         0;
  z-index:       -1;
  border-radius: inherit;
  background:    linear-gradient(135deg, var(--gold), var(--gold-deep));
}

.btn.btn--gold:hover {
  transform:  translateY(-3px) scale(1.03);
  box-shadow: 0 22px 54px -12px var(--glow);
  filter:     brightness(1.12);
}

.btn.btn--gold:active {
  transform: translateY(-1px);
}

.btn--ghost {
  background:   transparent;
  color:        var(--text);
  border-color: var(--line-strong);
}

.btn.btn--ghost:hover {
  border-color: var(--gold);
  color:        #fff;
  background:   rgba(139,92,246,.20);
  transform:    translateY(-3px) scale(1.03);
  box-shadow:   0 18px 42px -16px var(--glow);
}

.btn.btn--ghost:active {
  transform: translateY(-1px);
}

.btn.btn--youtube:hover {
  border-color: #FF0000;
  color:        #fff;
  background:   #FF0000;
  box-shadow:   0 16px 40px -14px rgba(255,0,0,.55);
}

.btn svg {
  width:  15px;
  height: 15px;
}

/* ============ NAV ============ */
header {
  position:     sticky;
  top:          0;
  z-index:      60;
  border-bottom: 1px solid transparent;
  transition:
    background      .3s ease,
    border-color    .3s ease,
    backdrop-filter .3s;
}

header.is-scrolled {
  background:       rgba(10,12,18,.82);
  backdrop-filter:  blur(14px);
  border-color:     var(--line);
}

.nav {
  display:               grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:           center;
  height:                74px;
  gap:                   24px;
}

.nav > .brand {
  justify-self: start;
}

.nav > .nav__links {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             30px;
}

.nav > .nav__actions {
  display:     flex;
  align-items: center;
  justify-content: flex-end;
  gap:         14px;
  margin-right: -18px;
}

.brand {
  display:         flex;
  align-items:     center;
  gap:             11px;
  font-family:     var(--font-display);
  font-weight:     800;
  font-size:       18px;
  letter-spacing:  -.01em;
}

.brand__logo {
  height:  42px;
  width:   auto;
  display: block;
}

.footer__brand .brand__logo {
  height: 38px;
}

.brand__mark {
  width:        34px;
  height:       34px;
  border-radius: 9px;
  display:      grid;
  place-items:  center;
  background:   linear-gradient(140deg, var(--gold), var(--gold-deep));
  color:        #fff;
  font-family:  var(--font-mono);
  font-weight:  700;
  font-size:    16px;
  flex:         none;
}

.brand sup {
  font-family:     var(--font-mono);
  font-size:       9px;
  color:           var(--gold);
  font-weight:     700;
  margin-left:     1px;
}

.nav__links {
  display:      flex;
  align-items:  center;
  gap:          30px;
  justify-self: center;
}

.nav__links a {
  font-size:   16px;
  font-weight: 500;
  color:       var(--muted);
  transition:  color .2s;
}

.nav__links a:hover {
  color: var(--text);
}

.nav__actions {
  display:     flex;
  align-items: center;
  gap:         14px;
}

.nav__actions .btn {
  padding:   14px 26px;
  font-size: 15px;
}

/* ============ MOBILE MENU TOGGLE ============ */
.menu-toggle {
  display:         none;
  background:      none;
  border:          0;
  color:           var(--text);
  cursor:          pointer;
  flex-direction:  column;
  gap:             5px;
  padding:         8px;
}

.menu-toggle span {
  width:       22px;
  height:      2px;
  background:  var(--text);
  transition:  .25s;
  display:     block;
}

.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============ MOBILE MENU ============ */
.mobile-menu {
  display:          none;
  flex-direction:   column;
  gap:              4px;
  padding:          8px 24px 24px;
  background:       rgba(10,12,18,.97);
  border-bottom:    1px solid var(--line);
}

.mobile-menu a {
  padding:       13px 0;
  border-bottom: 1px solid var(--line);
  color:         var(--muted);
  font-size:     15px;
}

.mobile-menu .btn {
  margin-top:      14px;
  justify-content: center;
}

/* .mobile-menu a (class+element) otherwise beats .btn--gold (class only)
   on specificity, overriding the button's white text back to the muted
   grey used for plain nav links. */
.mobile-menu a.btn--gold {
  color: #fff;
}