/* Reset & Smooth Scroll */
html { scroll-behavior: smooth; }

/* Subtle Section Dividers & Rhythm */
.e-con.e-parent:not(.frd-hero-section):not(#cta-final) {
  border-bottom: 1px solid rgba(226, 232, 240, 0.75);
}

/* Scroll Progress Bar at very top of viewport */
#frd-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #3E64FF, #60A5FA, #10B981);
  z-index: 999999;
  width: 0%;
  pointer-events: none;
  transition: width 0.08s ease-out;
}

/* Hero Radial Glow */
.frd-hero-section {
  position: relative;
  overflow: hidden;
}
.frd-hero-section::before {
  content: "";
  position: absolute;
  top: -25%;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 650px;
  background: radial-gradient(circle, rgba(62,100,255,0.2) 0%, rgba(15,30,74,0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* Spotlight Card Effect (Linear / Stripe style) */
.frd-card-hover {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
  overflow: hidden;
}

/* Dark Referral Box (Explicit styling so it never turns white) */
.frd-referral-box {
  background: linear-gradient(135deg, #0B132B 0%, #172554 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 22px !important;
  padding: 36px !important;
  color: #FFFFFF !important;
  box-shadow: 0 20px 50px rgba(11, 19, 43, 0.3) !important;
  position: relative;
  overflow: hidden;
}
.frd-card-hover::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(
    380px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(62, 100, 255, 0.4),
    transparent 65%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.frd-card-hover:hover::before {
  opacity: 1;
}
.frd-card-hover:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08) !important;
  border-color: #CBD5E1 !important;
}

.frd-dark-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  padding: 6px 18px;
  backdrop-filter: blur(8px);
}
.frd-hero-highlight {
  background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 50%, #93C5FD 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.frd-category-lbl {
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Quick Navigation Bar */
.frd-quick-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0 35px 0;
}
.frd-quick-link {
  font-size: 13px;
  font-weight: 600;
  color: #94A3B8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 14px;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.2s ease;
  backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.frd-quick-link:hover {
  color: #FFFFFF;
  background: rgba(62, 100, 255, 0.25);
  border-color: #3E64FF;
  transform: translateY(-2px);
}

/* Final CTA pills */
.frd-final-cta-pills {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #CBD5E1;
}
.frd-cta-pill-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.frd-pill-check {
  color: #34D399;
  font-weight: 700;
}

/* FAQ modern design Centered */
#faq {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
#faq .e-con,
#faq .e-con-inner,
#faq > div {
  align-items: center !important;
  justify-content: center !important;
}
.frd-faq-wrapper {
  max-width: 860px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
}
.frd-faq-wrapper .elementor-widget-container {
  max-width: 860px !important;
  width: 100% !important;
  margin: 0 auto !important;
}
.frd-faq-wrapper .elementor-accordion {
  border: none !important;
  width: 100% !important;
  margin: 0 auto !important;
}
.frd-faq-wrapper .elementor-accordion .elementor-accordion-item {
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  margin-bottom: 14px !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03) !important;
  transition: all 0.2s ease !important;
}
.frd-faq-wrapper .elementor-accordion .elementor-accordion-item:hover {
  border-color: #CBD5E1 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}
.frd-faq-wrapper .elementor-accordion .elementor-tab-title {
  padding: 20px 24px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  background: #FFFFFF !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.frd-faq-wrapper .elementor-accordion .elementor-tab-title.elementor-active {
  color: #3E64FF !important;
  border-bottom: 1px solid #F1F5F9 !important;
  background: #FAFAFC !important;
}
.frd-faq-wrapper .elementor-accordion .elementor-tab-content {
  padding: 20px 24px !important;
  font-size: 15px !important;
  line-height: 1.68 !important;
  color: #475569 !important;
  background: #FAFAFC !important;
  border: none !important;
}
.frd-seo-inlink {
  color: #3E64FF;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: color 0.2s ease;
}
.frd-seo-inlink:hover {
  color: #1D4ED8;
}