:root {
  --brand-gold: #d6aa5e;
  --brand-gold-soft: #edcf96;
}

/* Use the approved logo as a compact mark while the live wordmark remains readable. */
.brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 10px;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  background-color: #07162d;
  background-image: url('/assets/brand/axynd-logo.webp');
  background-repeat: no-repeat;
  background-size: 165%;
  background-position: center 31%;
  box-shadow: 0 0 0 1px rgba(214, 170, 94, .22), 0 10px 28px rgba(0, 0, 0, .2);
}

.brand-word {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 650;
}

/*
  Keep the hero as live HTML for readability. The approved wide banner is
  used only as decorative artwork on the right, so its embedded text never
  competes with the page message.
*/
.hero {
  padding: 86px 0 94px;
  background:
    radial-gradient(circle at 72% 12%, rgba(47,107,255,.16), transparent 34%),
    radial-gradient(circle at 96% 58%, rgba(71,215,255,.10), transparent 30%),
    var(--bg);
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 49%;
  pointer-events: none;
  background: url('/assets/brand/axynd-banner.webp') right center / auto 100% no-repeat;
  opacity: .26;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(8,17,31,0) 42%, rgba(8,17,31,.12) 66%, rgba(8,17,31,.48) 100%);
}

.hero-grid {
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  gap: 64px;
}

.hero-copy {
  max-width: 670px;
}

.hero-tagline {
  margin: 0 0 16px;
  color: var(--brand-gold-soft);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.35;
  font-weight: 650;
  letter-spacing: -.01em;
  max-width: 560px;
}

.hero h1 {
  max-width: 650px;
  font-size: clamp(3rem, 3.8vw, 3.9rem);
  line-height: 1.01;
  letter-spacing: -.045em;
  margin-bottom: 1.45rem;
  text-wrap: balance;
  text-shadow: 0 4px 30px rgba(0,0,0,.22);
}

.hero-lead {
  max-width: 640px;
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  line-height: 1.55;
}

.hero .eyebrow,
.page-hero .eyebrow,
.section-dark .eyebrow {
  color: var(--brand-gold-soft);
}

.trust-card {
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(20,35,56,.94), rgba(11,23,39,.96));
  border-color: rgba(214,170,94,.28);
  box-shadow: 0 28px 72px rgba(0,0,0,.30);
}

/* Keep the CTA clean; the LinkedIn banner is reserved for social sharing. */
.cta-card {
  background: radial-gradient(circle at 80% 20%, rgba(71,215,255,.13), transparent 30%), linear-gradient(135deg, #0a1526, #0e2036);
  border: 1px solid rgba(214,170,94,.18);
}

.text-link,
.object-question,
.use-case-grid article span,
.network-label {
  color: #245dcc;
}

.site-footer .brand-mark {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .hero-copy,
  .hero h1 {
    max-width: 760px;
  }

  .hero::before {
    width: 100%;
    opacity: .11;
    background-position: 82% center;
  }

  .hero::after {
    background: linear-gradient(rgba(8,17,31,.10), rgba(8,17,31,.42));
  }

  .trust-card {
    max-width: 640px;
  }
}

@media (max-width: 620px) {
  .brand-mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .hero {
    padding: 68px 0 74px;
  }

  .hero-tagline {
    font-size: 1rem;
    margin-bottom: 13px;
  }

  .hero h1 {
    font-size: clamp(2.15rem, 9.6vw, 2.75rem);
  }

  .hero::before {
    opacity: .07;
    background-position: 88% center;
  }
}