.rc-tool-hero {
  padding: 120px 0 80px;
  background: var(--rc-background-website-grader);
  background-size: 300% 300%;
  animation: rc-gradient-move 15s ease infinite;
  color: var(--rc-color-text-inverse);
  text-align: center;
  border: none;
}

.rc-tool-hero p {
  margin: 0 auto;
  max-width: 680px;
  text-align: center;
}

@keyframes rc-gradient-move {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.rc-tool-container {
  max-width: 900px;
  margin: auto;
  padding: 60px 20px;
}

@media (min-width: 992px) {
  .rc-tool-container {
    padding-top: 120px;
  }
}

.rc-tool-card {
  background: var(--rc-card-bg);
  border: 1px solid var(--rc-card-border);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.rc-tool-form {
  display: grid;
  gap: 20px;
}

.rc-tool-input {
  width: 100%;
  min-height: var(--rc-field-min-height);
  padding: var(--rc-field-padding-y) var(--rc-field-padding-x);
  border: 1px solid var(--rc-field-border);
  border-radius: var(--rc-field-radius);
  font: inherit;
  background: var(--rc-color-surface);
}

.rc-tool-input:focus {
  outline: var(--rc-focus-outline);
  border-color: var(--rc-focus-border);
}

.rc-tool-btn {
  min-height: var(--rc-btn-min-height);
  padding: var(--rc-btn-padding-y) var(--rc-btn-padding-x);
  border-radius: 8px;
  border: 1px solid var(--rc-color-brand-300);
  background: var(--rc-color-brand-500);
  color: var(--rc-color-text-inverse);
  font: inherit;
  font-weight: var(--rc-btn-font-weight);
  cursor: pointer;
  transition:
    background-color 220ms ease,
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.rc-tool-btn:hover {
  background: var(--rc-color-brand-700);
  transform: translateY(-2px);
  box-shadow: var(--rc-shadow-button-hover);
}

.rc-tool-btn:active {
  transform: translateY(0);
  box-shadow: var(--rc-shadow-button-active);
}

.rc-tool-btn:focus-visible {
  box-shadow: var(--rc-focus-ring);
}