/* marketing/static/marketing/css/brand.css */

/* ========== CSS VARIABLES (BRAND KIT) ========== */
:root {
  /* BRAND COLORS */
  --sp-color-primary: #7b3cff;          /* main purple */
  --sp-color-primary-soft: rgba(123, 60, 255, 0.18);
  --sp-color-primary-strong: #5a2ccc;   /* deeper shade */
  --sp-color-accent: #21d4fd;           /* blue accent */

  /* BACKGROUNDS */
  --sp-color-body-bg: #050512;          /* main page background */
  --sp-color-body-bg-alt: #0b0b1b;      /* alt section background */
  --sp-color-card-bg: #0e0f22;          /* card background */
  --sp-color-card-bg-soft: rgba(255, 255, 255, 0.03);

  /* BORDERS */
  --sp-color-border-subtle: rgba(255, 255, 255, 0.08);

  /* TEXT – ALL LIGHT */
  --sp-color-text-main: #f7f7ff;        /* main text (headings, body) */
  --sp-color-text-muted: #f7f7ff;       /* keep same as main (no dark text) */

  /* RADII */
  --sp-radius-lg: 1.25rem;
  --sp-radius-md: 0.9rem;
  --sp-radius-pill: 999px;

  /* SHADOWS */
  --sp-shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.55);
  --sp-shadow-soft-sm: 0 8px 25px rgba(0, 0, 0, 0.4);

  /* TRANSITIONS */
  --sp-transition-fast: 0.18s ease-out;
  --sp-transition-med: 0.26s ease;
}

/* ========== GLOBAL ========== */
html,
body {
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

/* main background + text for the whole page */
body.bg-body {
  background: radial-gradient(circle at top, #13132a 0, var(--sp-color-body-bg) 56%, #010106 100%);
  color: var(--sp-color-text-main);
}

/* ensure ALL typography is light by default */
h1, h2, h3, h4, h5, h6,
p, input, label, span {
  color: var(--sp-color-text-main);
}

/* default body text helper */
.text-body {
  color: var(--sp-color-text-main);
}

/* subtitles / descriptions – still light */
.sp-section-subtitle,
.sp-card-text,
.sp-hero-subtitle,
.sp-list,
.sp-footer-text,
.sp-footer-tagline {
  color: var(--sp-color-text-main);
}

/* labels that can use accent blue */
.sp-metric-label,
.sp-pricing-label,
.sp-footer-heading,
.sp-badge {
  color: var(--sp-color-accent);
}

/* ========== HEADER & NAVBAR ========== */
.sp-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  backdrop-filter: blur(14px);
  background: linear-gradient(
    to bottom,
    rgba(5, 5, 18, 0.96),
    rgba(5, 5, 18, 0.92),
    rgba(5, 5, 18, 0.82)
  );
}

.sp-navbar {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 0.95rem;
  background: radial-gradient(circle at 10% 0, var(--sp-color-primary), var(--sp-color-accent));
  color: #fff;
  font-size: 0.95rem;
}

.sp-navbar .navbar-brand span {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}

/* nav links: light, brighter on hover */
.sp-nav-links .nav-link {
  font-size: 0.9rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--sp-radius-pill);
  color: var(--sp-color-text-main);
  transition: background-color var(--sp-transition-fast),
    color var(--sp-transition-fast), transform var(--sp-transition-fast);
}

.sp-nav-links .nav-link:hover,
.sp-nav-links .nav-link.active {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

/* Collapse behaviour for mobile */
.sp-navbar-collapse {
  transition: height var(--sp-transition-med), opacity var(--sp-transition-med);
}

.sp-navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.8rem;
}

/* image logo in navbar */
.brand-logo-img {
  height: 48px;
  width: auto;
  display: block;
  object-fit: contain;
}


/* ========== BUTTONS & BADGES ========== */
.sp-btn-primary {
  background: linear-gradient(135deg, var(--sp-color-primary), var(--sp-color-accent));
  border: none;
  border-radius: var(--sp-radius-pill);
  font-weight: 500;
  padding-inline: 1.5rem;
  box-shadow: var(--sp-shadow-soft-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: transform var(--sp-transition-fast), box-shadow var(--sp-transition-fast),
    filter var(--sp-transition-fast);
  color: #ffffff;
}

.sp-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--sp-shadow-soft);
  filter: brightness(1.05);
}

.sp-btn-outline {
  border-radius: var(--sp-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--sp-color-text-main);
  background: transparent;
  font-weight: 500;
  padding-inline: 1.3rem;
  transition: background-color var(--sp-transition-fast),
    color var(--sp-transition-fast), transform var(--sp-transition-fast),
    border-color var(--sp-transition-fast);
}

.sp-btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

/* badges */
.sp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.8rem;
  border-radius: var(--sp-radius-pill);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.sp-badge-soft {
  background-color: var(--sp-color-primary-soft);
  color: var(--sp-color-primary);
  border-radius: var(--sp-radius-pill);
  padding: 0.15rem 0.7rem;
  font-size: 0.7rem;
}

/* ========== SECTIONS ========== */
.sp-section {
  padding-block: 4rem;
}

.sp-section-hero {
  padding-top: 5.3rem;
  padding-bottom: 4.2rem;
}

.sp-section-alt {
  background: radial-gradient(circle at top, #13132a 0, var(--sp-color-body-bg) 56%, #010106 100%);
}

.sp-section-title {
  font-size: 1.9rem;
  font-weight: 600;
}

/* ========== HERO ========== */
.sp-hero-title {
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.25;
}

@media (min-width: 992px) {
  .sp-hero-title {
    font-size: 2.6rem;
  }
}

.sp-hero-subtitle {
  margin-top: 0.9rem;
  font-size: 0.98rem;
}

.text-gradient {
  background: linear-gradient(135deg, var(--sp-color-primary), var(--sp-color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* hero card */
.sp-hero-card {
  border-radius: var(--sp-radius-lg);
  background: radial-gradient(circle at top, rgba(123, 60, 255, 0.28) 0, #070716 48%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--sp-shadow-soft);
  padding: 1.6rem 1.5rem 1.4rem;
}

.sp-hero-sales {
  font-size: 1.9rem;
  font-weight: 600;
}

.sp-hero-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.sp-mini-card {
  background-color: rgba(5, 5, 18, 0.82);
  border-radius: var(--sp-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.7rem 0.8rem;
}

.sp-mini-card .label {
  font-size: 0.7rem;
  color: var(--sp-color-accent);
}

.sp-mini-card .value {
  font-size: 0.95rem;
  font-weight: 500;
}

/* hero metrics */
.sp-hero-metrics {
  margin-top: 1.25rem;
}

.sp-metric-card {
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
}

.sp-metric-value {
  font-size: 0.9rem;
}

/* ========== CARDS (GLOBAL) ========== */
.sp-card {
  background: radial-gradient(circle at top left, #181830 0, var(--sp-color-card-bg) 55%);
  border-radius: var(--sp-radius-lg);
  border: 1px solid var(--sp-color-border-subtle);
  padding: 1.4rem 1.4rem 1.35rem;
  box-shadow: var(--sp-shadow-soft-sm);
  position: relative;
  overflow: hidden;
}

.sp-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  opacity: 0;
  background: radial-gradient(
    circle at 0 0,
    rgba(123, 60, 255, 0.26),
    transparent 60%
  );
  transition: opacity var(--sp-transition-med);
  pointer-events: none;
}

.sp-card:hover::before {
  opacity: 1;
}

.sp-card-feature {
  min-height: 100%;
}

.sp-card-title {
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

/* glass-like card */
.sp-card-glass {
  background: linear-gradient(
      135deg,
      rgba(123, 60, 255, 0.22),
      rgba(33, 212, 253, 0.12)
    ),
    rgba(5, 5, 18, 0.9);
  border-radius: var(--sp-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* icon circle */
.sp-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.04);
  display: grid;
  place-items: center;
  color: var(--sp-color-primary);
  margin-bottom: 0.85rem;
}

/* ========== LISTS ========== */
.sp-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  margin-top: 0.65rem;
  font-size: 0.88rem;
}

.sp-list li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.25rem;
}

.sp-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sp-color-primary);
}

/* ========== PRICING CARDS ========== */
.sp-card-pricing {
  text-align: left;
  transform: translateY(0);
  transition: transform var(--sp-transition-med), box-shadow var(--sp-transition-med),
    border-color var(--sp-transition-med), background var(--sp-transition-med);
}

.sp-card-pricing:hover {
  transform: translateY(-4px);
  box-shadow: var(--sp-shadow-soft);
  border-color: rgba(255, 255, 255, 0.18);
}

.sp-card-pricing-featured {
  background: linear-gradient(135deg, #15152c, #070716);
  border: 1px solid var(--sp-color-primary-soft);
}

.sp-pricing-price {
  font-weight: 600;
  font-size: 1.4rem;
}

.sp-pricing-price span {
  font-size: 0.8rem;
}

/* ========== HOW IT WORKS STEPS ========== */
.sp-steps {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.sp-steps li {
  position: relative;
  padding-left: 2.2rem;
  margin-bottom: 1.2rem;
}

.sp-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 0.8rem;
  background: radial-gradient(circle at 30% 0, var(--sp-color-primary), var(--sp-color-accent));
  box-shadow: 0 0 0 4px rgba(123, 60, 255, 0.18);
}

/* ========== FORMS ========== */
.sp-card-contact {
  background: radial-gradient(circle at top left, #181830 0, var(--sp-color-body-bg) 60%);
}

.sp-input.form-control,
.sp-input.form-control:focus,
.sp-input.form-control:active {
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--sp-color-text-main);
  font-size: 0.9rem;
  outline: none;
  box-shadow: none;
}

.sp-input.form-control:focus {
  border-color: var(--sp-color-primary);
  box-shadow: 0 0 0 1px rgba(123, 60, 255, 0.34);
}

.sp-section-contact .form-label {
  font-size: 0.86rem;
}

/* ========== FOOTER ========== */
.sp-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background-color: var(--sp-color-body-bg);
  color: var(--sp-color-text-main);
}

/* footer headings */
.sp-footer-heading {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

/* footer text */
.sp-footer-text {
  font-size: 0.86rem;
}

.sp-footer-tagline {
  font-size: 0.85rem;
}

/* footer lists */
.sp-footer-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  font-size: 0.85rem;
}

.sp-footer-list li {
  margin-bottom: 0.25rem;
}

.sp-footer-link {
  color: var(--sp-color-text-main);
  text-decoration: none;
  transition: color var(--sp-transition-fast), transform var(--sp-transition-fast);
}

.sp-footer-link:hover {
  color: var(--sp-color-accent);
  transform: translateX(2px);
}

.sp-footer-link-muted {
  opacity: 0.9;
  cursor: default;
}

/* contact sub-list */
.sp-footer-contact li {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* social icons */
.sp-footer-social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sp-footer-social-link {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--sp-color-text-main);
  font-size: 0.9rem;
  transition: background-color var(--sp-transition-fast),
    border-color var(--sp-transition-fast), color var(--sp-transition-fast),
    transform var(--sp-transition-fast);
}

.sp-footer-social-link:hover {
  background-color: var(--sp-color-primary-soft);
  border-color: var(--sp-color-primary);
  color: #ffffff;
  transform: translateY(-1px);
}

/* bottom strip */
.sp-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 991.98px) {
  .sp-navbar-collapse {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }
  .sp-nav-links .nav-link {
    padding-block: 0.35rem;
  }
}

/* small adjustments for very small devices */
@media (max-width: 575.98px) {
  .sp-hero-title {
    font-size: 1.9rem;
  }
}

/* =========================================
   SMOOTH ANIMATIONS – BUTTONS, CARDS, SECTIONS
   ========================================= */

/* Extra easing for very smooth motion */
:root {
  --sp-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- BUTTONS ---------- */

.sp-btn-primary,
.sp-btn-outline {
  transform: translateZ(0); /* prevent jitter */
  transition:
    transform 180ms var(--sp-ease-soft),
    box-shadow 180ms var(--sp-ease-soft),
    filter 180ms var(--sp-ease-soft),
    background-color 180ms var(--sp-ease-soft),
    border-color 180ms var(--sp-ease-soft);
}

.sp-btn-primary:hover,
.sp-btn-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
}

.sp-btn-primary:active,
.sp-btn-outline:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
}

/* ---------- CARDS (features, pricing, hero, glass) ---------- */

.sp-card,
.sp-hero-card,
.sp-card-pricing,
.sp-card-glass {
  transform: translateY(0) translateZ(0);
  transition:
    transform 220ms var(--sp-ease-soft),
    box-shadow 220ms var(--sp-ease-soft),
    border-color 220ms var(--sp-ease-soft),
    background-position 400ms var(--sp-ease-soft),
    opacity 220ms var(--sp-ease-soft);
  background-position: 50% 0;
}

.sp-card:hover,
.sp-hero-card:hover,
.sp-card-pricing:hover,
.sp-card-glass:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.65);
  border-color: rgba(255, 255, 255, 0.2);
  background-position: 50% -8%;
}

.sp-card:active,
.sp-hero-card:active,
.sp-card-pricing:active,
.sp-card-glass:active {
  transform: translateY(-3px) scale(0.99);
}

/* optional subtle inner glow sweep on hover */
.sp-card::after,
.sp-hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 0 -20%,
    rgba(255, 255, 255, 0.18),
    transparent 60%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--sp-ease-soft);
}

.sp-card:hover::after,
.sp-hero-card:hover::after {
  opacity: 0.38;
}

/* ---------- SECTION / CONTAINER ENTRANCE ANIMATIONS ---------- */

/* Fade up */
@keyframes sp-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale & fade */
@keyframes sp-scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* UTILITIES – add these classes to any container you want animated on first load */

.sp-animate-up {
  animation: sp-fade-up 0.6s var(--sp-ease-soft) both;
}

.sp-animate-scale {
  animation: sp-scale-in 0.5s var(--sp-ease-soft) both;
}
/* =====================================
   AUTO APPEAR ANIMATION FOR ALL CARDS
   ===================================== */

@keyframes sp-card-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animation directly to .sp-card */
.sp-card, .sp-hero-card, .sp-card-pricing {
  animation: sp-card-fade-up 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Stagger effect for grid cards */
.sp-card:nth-child(1) { animation-delay: 0.05s; }
.sp-card:nth-child(2) { animation-delay: 0.12s; }
.sp-card:nth-child(3) { animation-delay: 0.18s; }
.sp-card:nth-child(4) { animation-delay: 0.24s; }
.sp-card:nth-child(5) { animation-delay: 0.30s; }
.sp-card:nth-child(6) { animation-delay: 0.36s; }