body {
  margin: 0;
  color: #222;
  font-family: "Source Sans 3", sans-serif;

  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientMove 15s ease infinite;
}

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

header {
  color: white;
  padding: 60px 20px;
  text-align: center
}

header h1 {
  font-size: 42px;
  margin-bottom: 10px
}

header p {
  font-size: 18px;
  opacity: .9
}

section {
  padding: 60px 20px;
  max-width: 1100px;
  margin: auto;
  color: white;
}

section h2 {
  color: white;
}

#intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  align-items: start;
}

#protect-your-business {
  font-family: "Macondo", sans-serif;
  font-weight: 700;
  font-size: 36pt;
  margin: 0;

  background: linear-gradient(
    90deg,
    #ffd700,
    #fff3a0,
    #ffd700,
    #c9a000
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 4px rgba(255,215,0,0.6),
    0 0 4px rgba(255,215,0,0.4),
    0 0 4px rgba(255,215,0,0.2);
}

#intro span {
  margin-top: 16px;
  font-size: 14pt;
  text-align: justify;
}

#chart-container {
  height: 300px;
  max-width: 1100px;
  margin: 0 auto;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.feature {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  color: #222222;
}

.feature h3 {
  margin-top: 0;
  color: #0b3c5d
}

.how {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px
}

.step {
  background: white;
  padding: 20px;
  border-radius: 8px;
  color: black;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
}

.step, .feature {
  transition: transform;
  transition-duration: 500ms;
}

.step:hover, .feature:hover {
  transform: scale(1.1);
}

#use-cases ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  font-size: 16pt;
}

#use-cases li::marker {
  content: '↬ '
}

.cta {
  background: #0b3c5d;
  color: white;
  text-align: center;
  padding: 60px 20px
}

button {
  background: #ff7a18;
  border: none;
  color: white;
  padding: 15px 30px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer
}

footer {
  text-align: center;
  padding: 25px;
  font-size: 14px;
}