:root {
  --acid: #c9ff4a;
  --violet: #7057ff;
  --hot-coral: #ff705c;
}

body {
  background-image: radial-gradient(circle at 8% 24%, rgba(201,255,74,.1), transparent 24%);
}

.hero h1,
.section-heading h2,
.excel h2,
.pilot-cta h2 {
  font-family: "Space Grotesk", "DM Sans", sans-serif;
  letter-spacing: -.055em;
}

.hero {
  position: relative;
  background:
    radial-gradient(circle at 6% 18%, rgba(201,255,74,.52) 0 6%, transparent 21%),
    radial-gradient(circle at 82% 20%, rgba(112,87,255,.18) 0 9%, transparent 30%),
    radial-gradient(circle at 72% 89%, rgba(255,112,92,.18) 0 7%, transparent 28%),
    linear-gradient(135deg,#fbfff3 0%,#f3f7ff 52%,#fff5f1 100%);
}

.hero:before {
  content: "NUEVO";
  position: absolute;
  top: 45px;
  right: 5vw;
  padding: 7px 13px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  transform: rotate(8deg);
  font: 700 10px "Space Grotesk", sans-serif;
  letter-spacing: .1em;
}

.hero h1 em {
  display: inline;
  color: var(--ink);
  background: linear-gradient(transparent 63%, var(--acid) 63%);
}

.hero-copy > p {
  color: #455855;
}

.button.primary,
.nav-cta {
  background: var(--ink);
}

.button.primary:hover,
.nav-cta:hover {
  color: var(--ink) !important;
  background: var(--acid);
  transform: translateY(-2px);
}

.button {
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.momentum {
  min-height: 82px;
  padding: 18px 4vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 22px;
  overflow: hidden;
  background: var(--acid);
  color: var(--ink);
  border-block: 2px solid var(--ink);
  font: 700 13px "Space Grotesk", sans-serif;
  letter-spacing: .08em;
  white-space: nowrap;
}

.momentum i {
  color: var(--violet);
  font-size: 20px;
  font-style: normal;
}

.problem {
  background:
    radial-gradient(circle at 92% 8%, rgba(112,87,255,.26), transparent 25%),
    var(--forest);
}

.problem-grid article {
  transition: transform .25s ease, border-color .25s ease;
}

.problem-grid article:hover {
  transform: translateY(-7px) rotate(-.5deg);
  border-color: var(--acid);
}

.problem-grid span,
.problem .eyebrow,
.bridge strong {
  color: var(--acid);
}

.demo-tabs button[aria-selected=true] {
  background: var(--violet);
  border-color: var(--violet);
}

.feature-grid article:nth-child(3n) {
  box-shadow: inset 0 4px 0 var(--hot-coral);
}

.feature-grid article:nth-child(3n + 1):not(.featured) {
  box-shadow: inset 0 4px 0 var(--violet);
}

.feature-grid article:nth-child(3n + 2) {
  box-shadow: inset 0 4px 0 var(--acid);
}

.pilot-cta {
  background:
    radial-gradient(circle at 12% 20%, rgba(112,87,255,.42), transparent 27%),
    radial-gradient(circle at 80% 80%, rgba(201,255,74,.16), transparent 32%),
    var(--forest-2);
}

.button.amber {
  background: var(--acid);
}

@media (max-width: 760px) {
  .hero:before { top: 18px; right: 18px; }
  .momentum { justify-content: flex-start; overflow-x: auto; min-height: 66px; }
}