/* Global */
:root {
  --se-primary-start: #2D9CFF;
  --se-primary-end:   #A855FF;
  --se-accent:        #FF6FD8;
  --se-text-main:     #0F172A;
  --se-text-muted:    #6B7280;
  --se-bg:            #F5F7FB;
  --se-card-bg:       #FFFFFF;
}

* {
  box-sizing: border-box;
}


.brand-logo {
    height: 32px;       /* controls the navbar size */
    width: auto;
    display: block;
    object-fit: contain;
}


body.bg-body {
  background: radial-gradient(circle at top left, #fdfbff 0, #f5f7fb 45%, #edf3ff 100%);
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--se-text-main);
}


.brand-name {
  letter-spacing: 0.02em;
  font-size: 1.1rem;
}

.navbar-brand .brand-logo {
    max-height: 32px;
}


/* Navbar tweaks */
.navbar {
  backdrop-filter: blur(12px);
}

.navbar .nav-link {
  font-size: 0.9rem;
  color: var(--se-text-muted);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--se-text-main);
}

/* Buttons */
.btn-gradient {
  border-radius: 999px;
  background: linear-gradient(135deg, var(--se-primary-start), var(--se-primary-end));
  border: none;
  color: #fff;
  font-weight: 500;
  box-shadow: 0 10px 25px rgba(79, 70, 229, 0.25);
}

.btn-gradient:hover {
  color: #fff;
  filter: brightness(1.03);
  box-shadow: 0 16px 35px rgba(79, 70, 229, 0.35);
}

.btn-outline-secondary {
  border-radius: 999px;
}

/* Cards */
.card {
  border: none;
  border-radius: 20px;
  background-color: var(--se-card-bg);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

.card-sm-muted {
  box-shadow: 0 8px 25px rgba(15, 23, 42, 0.08);
}

/* Hero section */
.hero {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.hero-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--se-text-muted);
}

.hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
}

.hero-highlight {
  background: linear-gradient(135deg, var(--se-primary-start), var(--se-primary-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-subtitle {
  font-size: 0.98rem;
  color: var(--se-text-muted);
}

/* Feature chips */
.feature-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(45, 156, 255, 0.06);
  color: var(--se-text-muted);
  font-size: 0.8rem;
}

.feature-chip span {
  width: 8px;
  height: 8px;
  margin-right: 0.4rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--se-primary-start), var(--se-primary-end));
}

/* How it works steps */
.step-card {
  border-radius: 18px;
  padding: 1.25rem 1.1rem;
  background: #fff;
  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.08);
  height: 100%;
}

.step-number {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(45, 156, 255, 0.1);
  color: var(--se-primary-start);
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.35rem;
}

/* Section headings */
.section-title {
  font-size: 1.4rem;
  font-weight: 600;
}

/* Utility */
.text-muted-soft {
  color: var(--se-text-muted);
}

.badge-soft {
  background: rgba(148, 163, 184, 0.15);
  color: var(--se-text-muted);
  font-weight: 500;
}

/* Mobile spacing tweaks */
@media (max-width: 576px) {
  .hero {
    padding-top: 1.5rem;
    padding-bottom: 2.25rem;
  }
  .card {
    border-radius: 16px;
  }
}