/* Brand accents (tweak these two variables to rebrand quickly) */
:root {
  --brand: #6851ff;           /* primary accent */
  --brand-2: #00d1b2;         /* secondary accent */
  --bs-brand-text-emphasis: #7f6cfe;
  --bs-brand-bg-subtle: #070033;
  --bs-brand-border-subtle: #1b0896;
  --bs-border-opacity: 1;
}
.text-brand { color: var(--brand) !important; }
.bg-brand   { background: var(--brand) !important; }
.btn-brand  { background: var(--brand); border-color: var(--brand); }
.btn-brand:hover { background: #5744d8; border-color: #5744d8; }
.border-brand {
    border-color: var(--brand) !important;
}
.bg-brand-subtle {
    background-color: var(--bs-brand-bg-subtle) !important;
}
.text-brand-emphasis {
    color: var(--bs-brand-text-emphasis) !important;
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70rem 70rem at -10% -20%, rgba(104,81,255,.25), transparent 50%),
    radial-gradient(60rem 60rem at 120% 0%, rgba(0,209,178,.20), transparent 50%);
}
.hero .glass {
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--bs-body-bg) 70%, transparent);
  border: 1px solid rgba(125,125,125,.15);
}
/* Logo strip */
.logo-bar img {
  filter: grayscale(100%) opacity(.85);
  height: 28px; object-fit: contain;
}
/* Feature icons */
.feature-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}
/* Pricing */
.price {
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  font-weight: 700;
}
/* Footer */
.footer-link { text-decoration: none; }
.footer-link:hover { text-decoration: underline; }

/* Smooth scrolling for anchor links */
html { scroll-behavior: smooth; }