/* assets/css/custom.css */
/* Fonts (system stack with safe fallbacks) */
:root {
  --a1: #00c2a8;
  --a2: #ff7a59;
  --a3: #2f5bea;
  --a4: #0b132b;
  --surface: #ffffff;
}

html,
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
    Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji",
    "Segoe UI Emoji", sans-serif;
}
body {
  font-feature-settings: "liga" 1, "calt" 1;
  background: #fbfcfe;
}
a:focus,
button:focus {
  outline: 2px dashed var(--a3);
  outline-offset: 2px;
}

.hero-vibes {
  background: radial-gradient(
      1000px 500px at 10% -10%,
      rgba(0, 194, 168, 0.45) 0%,
      rgba(0, 194, 168, 0) 60%
    ),
    radial-gradient(
      900px 500px at 100% 0%,
      rgba(255, 122, 89, 0.45) 0%,
      rgba(255, 122, 89, 0) 60%
    ),
    linear-gradient(135deg, var(--a3), var(--a4));
}
.cta-vibes {
  background: linear-gradient(135deg, var(--a1), var(--a2));
}

.feature-card {
  padding: 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
  text-align: left;
}
.feature-card i {
  font-size: 1.6rem;
  color: var(--a3);
}

.step {
  background: #fff;
  border: 1px dashed rgba(0, 0, 0, 0.15);
  border-radius: 1rem;
  padding: 1rem;
}
.step-num {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--a3);
  color: #fff;
  font-weight: 700;
}

.pricing-card {
  border-radius: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: 0.2s;
}
.pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.75rem 1.25rem rgba(47, 91, 234, 0.15);
}
.pricing-card.featured {
  border: 2px solid var(--a3);
  box-shadow: 0 0.75rem 1.25rem rgba(47, 91, 234, 0.18);
}

.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(47, 91, 234, 0.25);
  border-color: var(--a3);
}
.btn-primary {
  background-color: var(--a3);
  border-color: var(--a3);
}
.btn-outline-primary {
  color: var(--a3);
  border-color: var(--a3);
}
.btn-outline-primary:hover {
  background: var(--a3);
  border-color: var(--a3);
}

.breadcrumb {
  --bs-breadcrumb-divider: "›";
}

.small-muted {
  font-size: 0.9rem;
  color: #6c757d;
}