/* ChatbotLearnFlow — Dark palette
   --clf-ink:    #0B101A  (near-black)
   --clf-deep:   #111826  (dark surface)
   --clf-soft:   #0F1B2E  (tinted)
   --clf-primary:#7C5CFC  (violet)
   --clf-accent: #00E5BE  (teal)
   --clf-text:   #EAF2FF  (light text)
*/

:root {
  --clf-ink: #0b101a;
  --clf-deep: #111826;
  --clf-soft: #0f1b2e;
  --clf-primary: #7c5cfc;
  --clf-accent: #00e5be;
  --clf-text: #eaf2ff;
}

.clf-body {
  background: var(--clf-ink);
  color: var(--clf-text);
  font-family: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --bs-body-bg: var(--clf-ink);
  --bs-body-color: var(--clf-text);
  --bs-heading-color: var(--clf-text);
  --bs-link-color: var(--clf-primary);
  --bs-link-hover-color: #5b3df1;
  --bs-border-color: rgba(234, 242, 255, 0.15);
  --bs-secondary-color: rgba(234, 242, 255, 0.78);
  --bs-tertiary-color: rgba(234, 242, 255, 0.6);
}
.text-body-secondary {
  color: var(--bs-secondary-color) !important;
}

h1,
h2,
h3,
.navbar-brand {
  font-family: "Urbanist", "IBM Plex Mono", system-ui, sans-serif;
  letter-spacing: 0.2px;
}
a {
  color: var(--clf-primary);
}
a:hover {
  color: #5b3df1;
}

.bg-clf-ink {
  background: var(--clf-ink);
}
.bg-clf-soft {
  background: var(--clf-soft);
}

.btn-primary,
.card-header.bg-primary {
  background-color: var(--clf-primary) !important;
  border-color: var(--clf-primary) !important;
}
.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

header.bg-clf-ink .navbar {
  background: transparent;
}
header.bg-clf-ink .navbar .navbar-brand,
header.bg-clf-ink .navbar .nav-link {
  color: rgba(255, 255, 255, 0.92);
}
header.bg-clf-ink .navbar .nav-link:hover,
header.bg-clf-ink .navbar .nav-link:focus,
header.bg-clf-ink .navbar .nav-link.active {
  color: #fff;
}
header.bg-clf-ink .navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.45);
}
header.bg-clf-ink .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255,255,255,.92)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.hero-dark {
  background: radial-gradient(
    1200px 600px at 10% 10%,
    #7c5cfc 0%,
    #392aa8 40%,
    #0e0b22 100%
  );
  position: relative;
  z-index: 0;
}
.gradient-text {
  background: linear-gradient(90deg, #fff, #9cf6e8 60%, #cdb9ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.curve {
  position: relative;
  width: 100%;
  height: 120px;
  overflow: hidden;
}
.curve svg {
  width: 100%;
  height: 100%;
  display: block;
}
.curve path {
  fill: var(--clf-ink);
}
.curved-top {
  position: relative;
}
.curved-top .curve-top svg path {
  fill: var(--clf-soft);
}
.curved-bottom {
  position: relative;
}

.card-dark {
  background: var(--clf-deep);
  color: var(--clf-text);
  border: 1px solid rgba(234, 242, 255, 0.14);
  border-radius: 1rem;
}
.card-soft {
  background: rgba(255, 255, 255, 0.06);
  color: var(--clf-text);
  border: 1px solid rgba(234, 242, 255, 0.14);
  border-radius: 1rem;
}
.price-card {
  background: linear-gradient(
    180deg,
    rgba(124, 92, 252, 0.12),
    rgba(255, 255, 255, 0)
  );
  border: 1px solid rgba(234, 242, 255, 0.18);
  border-radius: 1rem;
  color: var(--clf-text);
}
.step-card {
  background: var(--clf-deep);
  color: var(--clf-text);
  border: 1px dashed rgba(234, 242, 255, 0.28);
  border-radius: 1rem;
}

.glass {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0.06)
  );
  border: 1px solid rgba(234, 242, 255, 0.2);
  backdrop-filter: blur(6px);
  color: var(--clf-text);
}
.form-control-dark {
  background: #0f1522;
  color: var(--clf-text);
  border: 1px solid rgba(234, 242, 255, 0.24);
}
.form-control-dark::placeholder {
  color: rgba(234, 242, 255, 0.6);
}
.form-label {
  color: var(--clf-text);
}

details {
  background: var(--clf-deep);
  color: var(--clf-text);
  border: 1px solid rgba(234, 242, 255, 0.18);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}
details[open] {
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.25);
}

:focus-visible {
  outline: 3px solid var(--clf-accent);
  outline-offset: 2px;
}

img.rounded-4 {
  border-radius: 1rem !important;
}

footer a {
  color: var(--clf-text);
  opacity: 0.9;
}
footer a:hover {
  opacity: 1;
}