:root {
  --black:   #000;
  --white:   #fff;
  --red:     #f00;
  --yellow:  #ff0;
  --cyan:    #0ff;
  --green:   #0f0;
  --magenta: #f0f;
  --blue:    #00f;
}

/* — HERO LAYOUT — */
.hero {
  position: relative;
  overflow: hidden;
  height: 65vh;             /* 5% shorter */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 12vh;         /* move up ~5% */
  background: var(--white);
  text-align: center;
}

/* — GRADIENT TEXT — */
.gradient-text {
  background: linear-gradient(
    90deg,
    var(--white)   0%,
    var(--yellow) 15%,
    var(--cyan)   30%,
    var(--green)  45%,
    var(--magenta)60%,
    var(--red)    75%,
    var(--blue)   90%,
    var(--black) 100%
  );
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: rainbow 15s ease infinite;
}

@keyframes rainbow {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* — TITLES & SUB — */
.hero-title {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.hero-sub {
  color: #555;
  font-size: 1.125rem;
  max-width: 600px;
  margin-bottom: 2rem;
}

/* — CTAS — */
/* Get Started flip */
.btn-primary .btn-text {
  display: inline-block;
  transform-origin: center;
  transition: transform 0.6s;
}
.btn-primary:hover .btn-text {
  transform: rotateX(360deg);
}
/* Request Demo push/arrow swap */
.btn-outline {
  position: relative;
}
.btn-outline .btn-text,
.btn-outline .btn-icon {
  display: inline-block;
  transition: transform .3s, opacity .3s;
}
.btn-outline:hover .btn-text {
  
}
.btn-outline:hover .btn-icon {
  transform: translateX(5px);
  z-index: -1;
}

/* — CHECKS (red) — */
.hero-checks {
  list-style: none;
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}
.hero-checks li {
  position: relative;
  padding-left: 2rem;
  font-weight: 600;
}
.hero-checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1.5rem; height: 1.5rem;
  background: var(--white);
  border: 1px solid var(--black);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>\
<path fill='%23ff0000' d='M6 10.2L3.5 7.7l-1.4 1.4L6 13 14 5l-1.4-1.4z'/>\
</svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
}