:root {
  --bs-primary: #655789;
  --bs-primary-rgb: 101, 87, 137;
  --bs-secondary: #7c5270;
  --bs-body-font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-border-radius: .9rem;
  --bs-border-radius-lg: 1.25rem;
  --bs-border-radius-pill: 999px;

  --ri-surface: #fdf7fe;
  --ri-surface-container: #f2ecf5;
  --ri-surface-container-high: #ece6f0;
  --ri-on-surface: #34313a;
  --ri-on-surface-variant: #615d67;
  --ri-primary-container: #cfbef7;
  --ri-tertiary-container: #f4bfe3;
  --ri-outline-variant: #b6b0bb;
}

html { scroll-behavior: smooth; }

body {
  background: var(--ri-surface);
  color: var(--ri-on-surface);
}

a { text-decoration: none; }

.text-on-surface-variant { color: var(--ri-on-surface-variant); }

/* Header */
.site-header {
  background: rgba(253, 247, 254, 0.9);
  backdrop-filter: blur(10px);
  border-color: var(--ri-surface-container-high) !important;
  z-index: 1030;
}
.nav-link { color: var(--ri-on-surface-variant); }
.nav-link:hover { color: var(--bs-primary); }

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, #655789 0%, #8b7ab8 100%);
  border: none;
  box-shadow: 0 8px 20px -8px rgba(101, 87, 137, .55);
  color: #fdf7ff;
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, #5a4d7a 0%, #7c6ba8 100%);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -8px rgba(101, 87, 137, .6);
  color: #fdf7ff;
}
.btn-outline-primary {
  border-color: var(--ri-outline-variant);
  color: var(--ri-on-surface);
}
.btn-outline-primary:hover {
  background: transparent;
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}
.btn-lg { padding: .85rem 1.9rem; font-weight: 700; }

/* Eyebrow badge */
.eyebrow-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ri-tertiary-container); color: #5a2f4b;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}

/* Hero */
.hero-section { position: relative; padding: 76px 0 40px; overflow: hidden; }
.hero-section::before {
  content: ""; position: absolute; top: -120px; right: -120px; width: 480px; height: 480px;
  background: radial-gradient(closest-side, rgba(207, 190, 247, .55), transparent);
  filter: blur(10px); z-index: -1;
}
.hero-section::after {
  content: ""; position: absolute; bottom: -160px; left: -160px; width: 420px; height: 420px;
  background: radial-gradient(closest-side, rgba(244, 191, 227, .4), transparent);
  z-index: -1;
}
.hero-section h1 { font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.hero-section h1 span { color: var(--bs-primary); }
.hero-lead { font-size: 1.08rem; color: var(--ri-on-surface-variant); max-width: 540px; }

.browser-frame {
  background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid var(--ri-surface-container-high);
  box-shadow: 0 30px 60px -20px rgba(101, 87, 137, .35), 0 8px 24px -8px rgba(101, 87, 137, .2);
}
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: var(--ri-surface-container); }
.browser-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--ri-outline-variant); }
.browser-bar span:nth-child(1) { background: #f28b82; }
.browser-bar span:nth-child(2) { background: #fbbc04; }
.browser-bar span:nth-child(3) { background: #81c995; }

/* Section heading block */
.section-eyebrow-block { max-width: 640px; margin: 0 auto 3rem; text-align: center; }
.section-eyebrow-block h2, h2 { font-weight: 800; letter-spacing: -.01em; }

/* Feature cards */
.feature-card {
  background: var(--ri-surface-container); border: 1px solid var(--ri-surface-container-high);
  border-radius: 1.1rem; padding: 1.6rem 1.4rem; height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -18px rgba(101, 87, 137, .4); }
.feature-icon {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #655789, #8b7ab8); color: #fff; margin-bottom: 1rem;
}

/* Vertical / industry cards */
.vertical-card {
  border: 1px solid var(--ri-surface-container-high); border-radius: 1.1rem;
  padding: 1.8rem 1.5rem; background: var(--ri-surface); height: 100%;
}
.vertical-tag {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--bs-primary); background: var(--ri-primary-container); padding: 4px 10px; border-radius: 999px; margin-bottom: .9rem;
}

/* Numbered steps */
.step-item { position: relative; padding-left: 52px; }
.step-item .step-number {
  position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #655789, #8b7ab8); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, #655789 0%, #8b7ab8 55%, #a993cf 100%);
  color: #fff; border-radius: 1.75rem; padding: 3.5rem 2.5rem; text-align: center;
}
.cta-band p { color: rgba(255, 255, 255, .85); }
.cta-band .btn-light { box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .25); font-weight: 700; }
.cta-band .btn-outline-light:hover { color: #fff; }

/* Wider container for content that feels cramped in Bootstrap's default max-width (e.g. a 4-up pricing grid) */
.container-wide { max-width: 1520px; }

/* Pricing */
.pricing-card {
  border: 1px solid var(--ri-surface-container-high); border-radius: 1.25rem;
  padding: 1.75rem 1.5rem; height: 100%; background: #fff;
}
.pricing-card.featured {
  border: 2px solid var(--bs-primary);
  box-shadow: 0 20px 40px -20px rgba(101, 87, 137, .5);
}
.pricing-card .price { font-size: 2.2rem; font-weight: 800; }

/* Testimonials */
.testimonial-card {
  border: 1px solid var(--ri-surface-container-high); border-radius: 1.1rem;
  padding: 1.6rem; height: 100%; background: var(--ri-surface-container);
}

/* Blog */
.blog-card {
  border: 1px solid var(--ri-surface-container-high); border-radius: 1.1rem;
  padding: 1.6rem; height: 100%; background: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -18px rgba(101, 87, 137, .4); }

/* Footer */
.site-footer { border-top: 1px solid var(--ri-surface-container-high); padding: 2.75rem 0 1.75rem; margin-top: 3rem; }

/* Social links */
.social-icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ri-surface-container-high); color: var(--ri-on-surface-variant);
  transition: background .15s ease, color .15s ease;
}
.social-icon:hover { background: var(--bs-primary); color: #fff; }

/* WhatsApp FAB */
.whatsapp-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 1050;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .35);
}

/* Forms */
.form-control, .form-select {
  border-radius: .65rem; border-color: var(--ri-outline-variant); padding: .65rem .9rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(101, 87, 137, .15);
}

@media (max-width: 991.98px) {
  .hero-section { padding-top: 40px; }
}