/*
 * Databox-inspired marketing UI (https://databox.com/)
 * Light surfaces, purple primary, generous spacing, bordered pills.
 */

:root {
  --dbx-purple: #5746f5;
  --dbx-purple-hover: #4538d9;
  --dbx-purple-soft: rgba(87, 70, 245, 0.1);
  --dbx-ink: #111827;
  --dbx-muted: #6b7280;
  --dbx-border: #e5e7eb;
  --dbx-canvas: #f6f7fb;
  --dbx-white: #ffffff;
}

.hq-site {
  font-family:
    "Inter",
    "Noto Sans Arabic",
    system-ui,
    -apple-system,
    sans-serif;
  background: var(--dbx-canvas) !important;
  color: var(--dbx-ink);
}

/* ─── Top bar (Databox: white, crisp border, purple CTA) ─── */
.hq-topbar__bg {
  background: var(--dbx-white) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--dbx-border) !important;
}

.hq-topbar__shine {
  display: none !important;
}

.hq-brand--pulse .hq-brand__mark {
  background: var(--dbx-purple-soft) !important;
  box-shadow: none !important;
  border: 1px solid rgba(87, 70, 245, 0.12) !important;
}

.hq-brand-text strong {
  color: var(--dbx-ink);
}

.hq-topbar__link {
  color: var(--dbx-muted) !important;
  font-weight: 500 !important;
}

.hq-topbar__link:hover {
  color: var(--dbx-ink) !important;
  background: #f3f4f6 !important;
}

.hq-topbar__link.is-active {
  color: var(--dbx-purple) !important;
  background: var(--dbx-purple-soft) !important;
  box-shadow: none !important;
}

.hq-topbar__cta {
  background: var(--dbx-purple) !important;
  box-shadow: 0 4px 14px rgba(87, 70, 245, 0.35) !important;
}

.hq-topbar__cta:hover {
  background: var(--dbx-purple-hover) !important;
  filter: none !important;
  box-shadow: 0 6px 20px rgba(87, 70, 245, 0.4) !important;
}

.hq-topbar__lang-link {
  color: var(--dbx-muted) !important;
}

.hq-topbar__lang-link:hover {
  color: var(--dbx-ink) !important;
  background: #f3f4f6 !important;
}

/* ─── Landing canvas ─── */
.hq-landing--flow {
  background: linear-gradient(180deg, var(--dbx-white) 0%, var(--dbx-canvas) 18%, var(--dbx-white) 45%, var(--dbx-canvas) 100%) !important;
}

.hq-landing--flow::before {
  opacity: 0.35 !important;
}

/* ─── Hero: light, purple accent glow (no dark photo overlay) ─── */
.hq-hero-v2 {
  min-height: min(82vh, 760px) !important;
}

.hq-hero-v2__bg {
  background: linear-gradient(165deg, #ffffff 0%, #f6f7fb 42%, #eef0f7 100%) !important;
}

.hq-hero-v2__noise {
  opacity: 0.025 !important;
}

.hq-hero-v2__bloom {
  inset: -15% -20% auto -10% !important;
  height: 90% !important;
  filter: none !important;
  background:
    radial-gradient(ellipse 70% 55% at 88% 8%, rgba(87, 70, 245, 0.14) 0%, transparent 52%),
    radial-gradient(ellipse 50% 45% at 12% 75%, rgba(87, 70, 245, 0.06) 0%, transparent 50%) !important;
}

.hq-hero-v2__copy {
  color: var(--dbx-ink) !important;
}

.hq-hero-v2__badge {
  background: #f3f4f6 !important;
  border: 1px solid var(--dbx-border) !important;
  color: #4b5563 !important;
  backdrop-filter: none !important;
}

.hq-hero-v2__copy h1 {
  color: var(--dbx-ink) !important;
  max-width: 20ch !important;
  font-weight: 800 !important;
}

.hq-hero-v2__lead {
  color: var(--dbx-muted) !important;
}

.hq-hero-v2__actions .hq-btn-primary {
  background: var(--dbx-purple) !important;
  box-shadow: 0 8px 24px rgba(87, 70, 245, 0.32) !important;
  border-radius: 10px !important;
}

.hq-hero-v2__actions .hq-btn-primary:hover {
  background: var(--dbx-purple-hover) !important;
  box-shadow: 0 12px 28px rgba(87, 70, 245, 0.38) !important;
}

.hq-btn-ghost {
  background: var(--dbx-white) !important;
  border: 1px solid var(--dbx-border) !important;
  color: var(--dbx-ink) !important;
  border-radius: 10px !important;
}

.hq-btn-ghost:hover {
  border-color: #d1d5db !important;
  background: #fafafa !important;
}

/* Product grid visual */
.hq-hero-v2__glass {
  background: var(--dbx-white) !important;
  border: 1px solid var(--dbx-border) !important;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.02) !important;
  backdrop-filter: none !important;
}

.hq-hero-v2__glass-cell {
  background: #f9fafb !important;
  border: 1px solid var(--dbx-border) !important;
  color: var(--dbx-purple) !important;
}

.hq-hero-v2__rail-label {
  color: #9ca3af !important;
}

/* App pills — Databox-style bordered chips */
.hq-app-pill {
  background: var(--dbx-white) !important;
  border: 1px solid var(--dbx-border) !important;
  color: var(--dbx-ink) !important;
  backdrop-filter: none !important;
  border-radius: 999px !important;
  padding: 0.5rem 1rem 0.5rem 0.5rem !important;
}

.hq-app-pill:hover {
  border-color: rgba(87, 70, 245, 0.45) !important;
  background: var(--dbx-white) !important;
  box-shadow: 0 8px 24px rgba(87, 70, 245, 0.1) !important;
  color: var(--dbx-ink) !important;
}

.hq-app-pill__ico {
  background: var(--dbx-purple-soft) !important;
  border: none !important;
  color: var(--dbx-purple) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}

.hq-hero-v2__track::-webkit-scrollbar-thumb {
  background: rgba(87, 70, 245, 0.2) !important;
}

/* Stats row */
.hq-hero-v2__meta {
  border-top: 1px solid var(--dbx-border) !important;
  padding-top: 1.75rem !important;
}

.hq-hero-v2__meta div {
  color: var(--dbx-muted) !important;
}

.hq-hero-v2__meta strong {
  color: var(--dbx-ink) !important;
  font-size: 1.65rem !important;
  font-weight: 800 !important;
}

.hq-hero-v2 .hq-hero-wave path:first-of-type {
  fill: #f6f7fb !important;
}

/* Value strip */
.hq-strip {
  background: var(--dbx-white) !important;
  border-bottom: 1px solid var(--dbx-border) !important;
}

.hq-strip-card {
  border-radius: 16px !important;
  border: 1px solid var(--dbx-border) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
}

.hq-strip-card i {
  color: var(--dbx-purple) !important;
}

/* Spotlight */
.suite-spotlight--gradient h2 {
  background: linear-gradient(125deg, var(--dbx-ink) 0%, var(--dbx-purple) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* How it works + CTA */
.hq-how--rich {
  background: var(--dbx-white) !important;
}

.hq-cta--ribbon {
  background: linear-gradient(135deg, #f6f7fb 0%, #eef0ff 50%, #f6f7fb 100%) !important;
  border-top: 1px solid var(--dbx-border) !important;
}

.hq-cta-inner .hq-btn-primary {
  background: var(--dbx-purple) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(87, 70, 245, 0.3) !important;
}

/* Footer — light, Databox-like */
.hq-footer {
  background: var(--dbx-white) !important;
  color: var(--dbx-muted) !important;
  border-top: 1px solid var(--dbx-border) !important;
}

.hq-footer-brand strong {
  color: var(--dbx-ink) !important;
}

.hq-footer a {
  color: var(--dbx-muted) !important;
}

.hq-footer a:hover {
  color: var(--dbx-purple) !important;
}