/* ============================================================
   Medura — Unified Design System  v2.0
   Pages: home, features, pricing

   Primary: #1a4fdb  (brand blue — from logo)
   Accent:  #7b5cfa  (violet — featured / highlight)
   Teal:    #00c2cb  (secondary accent)
   ============================================================ */

/* ===== TOKENS ===== */
:root {
  --mu-blue:        #1a4fdb;
  --mu-blue-hv:     #1540c0;
  --mu-blue-lt:     rgba(26, 79, 219, 0.08);
  --mu-blue-bd:     rgba(26, 79, 219, 0.2);
  --mu-violet:      #7b5cfa;
  --mu-violet-lt:   rgba(123, 92, 250, 0.08);
  --mu-teal:        #00c2cb;
  --mu-dark:        #0f2057;
  --mu-ink:         #1c1c2e;
  --mu-muted:       #5a5a6e;
  --mu-border:      rgba(28, 28, 46, 0.1);
  --mu-white:       #ffffff;

  /* Shadows */
  --mu-sh-sm:     0 1px 3px rgba(15,32,87,.08), 0 1px 2px rgba(15,32,87,.04);
  --mu-sh-md:     0 4px 16px rgba(15,32,87,.1),  0 2px 6px rgba(15,32,87,.06);
  --mu-sh-lg:     0 12px 40px rgba(15,32,87,.14), 0 4px 12px rgba(15,32,87,.06);
  --mu-sh-blue:   0 6px 24px rgba(26,79,219,.3);
  --mu-sh-blue-hv:0 10px 32px rgba(26,79,219,.42);

  /* Easing */
  --mu-ease:     cubic-bezier(.4,0,.2,1);
  --mu-ease-out: cubic-bezier(0,0,.2,1);
  --mu-t-fast:   0.16s var(--mu-ease);
  --mu-t-base:   0.24s var(--mu-ease);
  --mu-t-slow:   0.4s  var(--mu-ease-out);
}

/* ============================================================
   BUTTON SYSTEM
   ============================================================ */

.btn {
  transition:
    background  var(--mu-t-fast),
    border-color var(--mu-t-fast),
    color        var(--mu-t-fast),
    box-shadow   var(--mu-t-fast),
    transform    var(--mu-t-fast),
    filter       var(--mu-t-fast) !important;
  will-change: transform;
  font-weight: 600 !important;
}
.btn:active {
  transform: translateY(0) scale(0.98) !important;
}

/* ── PRIMARY — was green, now brand blue
   Use body prefix + double-class to beat theme-a specificity ── */
body .btn.btn-primary,
body .tg-btn.btn-primary,
body a.btn.btn-primary,
body a.tg-btn.btn-primary,
body button.btn.btn-primary,
.btn.btn-primary,
.tg-btn.btn-primary {
  background:   var(--mu-blue) !important;
  border-color: var(--mu-blue) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 0.75rem 1.75rem !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  box-shadow: var(--mu-sh-blue) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  transition:
    background   var(--mu-t-fast),
    box-shadow   var(--mu-t-fast),
    transform    var(--mu-t-fast) !important;
}
body .btn.btn-primary:hover,
body .tg-btn.btn-primary:hover,
.btn.btn-primary:hover,
.tg-btn.btn-primary:hover {
  background:   var(--mu-blue-hv) !important;
  border-color: var(--mu-blue-hv) !important;
  color: #fff !important;
  box-shadow: var(--mu-sh-blue-hv) !important;
  transform: translateY(-2px) !important;
}

/* ── HEADER CTA — was orange, now brand blue ── */
body .btn--header-cta,
body .medura-nav-contact-cta,
body a.medura-nav-contact-cta,
.btn--header-cta,
.medura-nav-contact-cta {
  background:   var(--mu-blue) !important;
  border-color: var(--mu-blue) !important;
  color: #fff !important;
  box-shadow: var(--mu-sh-blue) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: all var(--mu-t-fast) !important;
}
body .btn--header-cta:hover,
body .medura-nav-contact-cta:hover,
.btn--header-cta:hover,
.medura-nav-contact-cta:hover {
  background:   var(--mu-blue-hv) !important;
  border-color: var(--mu-blue-hv) !important;
  box-shadow: var(--mu-sh-blue-hv) !important;
  color: #fff !important;
  filter: none !important;
  transform: translateY(-1px) !important;
}

/* Override the BS5 CSS custom properties too (belt + suspenders) */
body .btn.btn-primary,
body .tg-btn.btn-primary {
  --bs-btn-bg: var(--mu-blue) !important;
  --bs-btn-border-color: var(--mu-blue) !important;
  --bs-btn-hover-bg: var(--mu-blue-hv) !important;
  --bs-btn-hover-border-color: var(--mu-blue-hv) !important;
  --bs-btn-active-bg: var(--mu-blue-hv) !important;
}

/* ── .btn--violet keeps violet (featured/highlight use) ── */
body .btn--violet,
.btn--violet {
  background: var(--mu-violet) !important;
  color: #fff !important;
  box-shadow: 0 6px 24px rgba(123,92,250,.28) !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  transition: all var(--mu-t-fast) !important;
}
body .btn--violet:hover,
.btn--violet:hover {
  filter: none !important;
  background: #6a4ce0 !important;
  box-shadow: 0 10px 32px rgba(123,92,250,.4) !important;
  transform: translateY(-2px) !important;
}

/* ── GHOST / OUTLINE ── */
body .btn--ghost,
body .btn.btn-outline-primary,
body a.btn-outline-primary,
.btn--ghost,
.btn.btn-outline-primary,
a.btn-outline-primary {
  background: transparent !important;
  color: var(--mu-ink) !important;
  border: 2px solid var(--mu-border) !important;
  border-radius: 999px !important;
  padding: 0.7rem 1.6rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--mu-t-fast) !important;
}
body .btn--ghost:hover,
body .btn.btn-outline-primary:hover,
.btn--ghost:hover,
.btn.btn-outline-primary:hover {
  background: var(--mu-white) !important;
  border-color: rgba(28,28,46,.22) !important;
  color: var(--mu-ink) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--mu-sh-sm) !important;
}

/* ── DARK button ── */
body .btn--dark,
.btn--dark {
  background: var(--mu-dark) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: var(--mu-sh-md) !important;
  transition: all var(--mu-t-fast) !important;
}
body .btn--dark:hover,
.btn--dark:hover {
  filter: none !important;
  background: #162673 !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--mu-sh-lg) !important;
}

/* ── GREEN → BLUE outline (was btn-green-outline) ── */
body .btn-green-outline,
body a.btn-green-outline,
body .btn-outline-dark,
body a.btn-outline-dark,
.btn-green-outline,
a.btn-green-outline,
.btn.btn-outline-dark,
a.btn-outline-dark {
  border: 2px solid var(--mu-blue) !important;
  color: var(--mu-blue) !important;
  background: transparent !important;
  border-radius: 999px !important;
  padding: 0.75rem 2rem !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all var(--mu-t-fast) !important;
}
body .btn-green-outline:hover,
body a.btn-green-outline:hover,
body .btn-outline-dark:hover,
.btn-green-outline:hover,
a.btn-green-outline:hover,
.btn.btn-outline-dark:hover {
  background: var(--mu-blue) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--mu-sh-blue) !important;
}

/* ── PRICING BUTTONS ── */
.price-btn,
a.price-btn,
button.price-btn {
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  padding: 0.75rem 1.75rem !important;
  text-align: center !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  transition: all var(--mu-t-fast) !important;
}
.price-btn.filled,
a.price-btn.filled {
  background: var(--mu-blue) !important;
  border: 2px solid var(--mu-blue) !important;
  color: #fff !important;
  box-shadow: var(--mu-sh-blue) !important;
}
.price-btn.filled:hover,
a.price-btn.filled:hover {
  background: var(--mu-blue-hv) !important;
  border-color: var(--mu-blue-hv) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--mu-sh-blue-hv) !important;
}
.price-btn.outline,
a.price-btn.outline {
  background: transparent !important;
  border: 2px solid var(--mu-border) !important;
  color: var(--mu-ink) !important;
}
.price-btn.outline:hover,
a.price-btn.outline:hover {
  border-color: var(--mu-blue) !important;
  color: var(--mu-blue) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--mu-sh-sm) !important;
}

/* ── EMAIL BAR button ── */
.email-bar button {
  background: var(--mu-blue) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: all var(--mu-t-fast) !important;
}
.email-bar button:hover {
  background: var(--mu-blue-hv) !important;
  transform: translateY(-1px) !important;
}
.email-bar button:focus-visible {
  outline: 2px solid var(--mu-blue) !important;
  outline-offset: 2px !important;
}

/* ── WHITE buttons (on dark bg) ── */
.btn--white {
  border-radius: 999px !important;
  box-shadow: var(--mu-sh-md) !important;
  transition: all var(--mu-t-fast) !important;
}
.btn--white:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--mu-sh-lg) !important;
}
.btn--white-ghost {
  border-radius: 999px !important;
  border: 2px solid rgba(255,255,255,.35) !important;
  transition: all var(--mu-t-fast) !important;
}
.btn--white-ghost:hover {
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.6) !important;
  transform: translateY(-1px) !important;
}

/* ── Sticky CTA (mobile) ── */
.medura-sticky-cta__link {
  background: var(--mu-blue) !important;
  box-shadow: var(--mu-sh-blue) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: all var(--mu-t-fast) !important;
}
.medura-sticky-cta__link:hover {
  background: var(--mu-blue-hv) !important;
  transform: translateY(-1px) !important;
}

/* ── Focus ring — unified ── */
.btn:focus-visible,
a.btn-primary:focus-visible,
.price-btn:focus-visible,
button:focus-visible {
  outline: 2px solid var(--mu-blue) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px var(--mu-blue-lt) !important;
}

/* ── Pricing toggle ── */
.pr-toggle__btn[aria-pressed="true"],
.billing-toggle[aria-pressed="true"] {
  background: var(--mu-blue) !important;
}

/* ── Pricing featured card ── */
.pr-card--pop {
  border: 2px solid var(--mu-violet) !important;
  box-shadow: 0 0 0 1px rgba(123,92,250,.2), var(--mu-sh-lg) !important;
}

/* ── Enterprise CTA button ── */
.pr-ent__b {
  background: var(--mu-blue) !important;
  transition: all var(--mu-t-fast) !important;
}
.pr-ent__b:hover {
  background: var(--mu-blue-hv) !important;
  transform: translateY(-1px) !important;
  filter: none !important;
}

/* ============================================================
   CARD MICRO-INTERACTIONS
   ============================================================ */

.feat-card,
.pr-card,
.t-card,
.testi-card,
.audience-card,
.int-card,
.how3__it,
.step {
  transition:
    transform   var(--mu-t-base),
    box-shadow  var(--mu-t-base),
    border-color var(--mu-t-base) !important;
  will-change: transform;
}
.feat-card:hover   { transform: translateY(-4px) !important; box-shadow: var(--mu-sh-lg) !important; }
.pr-card:hover     { transform: translateY(-5px) !important; box-shadow: var(--mu-sh-lg) !important; }
.t-card:hover,
.testi-card:hover  { transform: translateY(-3px) !important; box-shadow: var(--mu-sh-md) !important; }
.audience-card:hover { transform: translateY(-4px) !important; }
.int-card:hover    { transform: translateY(-3px) !important; box-shadow: var(--mu-sh-md) !important; }
.faq__item:hover,
.faq-item:hover    { box-shadow: var(--mu-sh-sm) !important; }

/* Feature icon badge */
.feat-card__ic-wrap,
.feature-icon-wrap {
  background: var(--mu-blue-lt) !important;
  border-radius: 12px !important;
  transition: background var(--mu-t-base) !important;
}
.feat-card:hover .feat-card__ic-wrap {
  background: rgba(26,79,219,.14) !important;
}

/* ============================================================
   SCROLL REVEAL — CSS STATES
   JS (medura-scroll-reveal.js) adds these classes
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ── Fade up (default) ── */
  .mu-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
      opacity   0.6s var(--mu-ease-out),
      transform 0.6s var(--mu-ease-out);
  }
  .mu-reveal.mu-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── Slide from left ── */
  .mu-reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition:
      opacity   0.65s var(--mu-ease-out),
      transform 0.65s var(--mu-ease-out);
  }
  .mu-reveal-left.mu-revealed {
    opacity: 1;
    transform: translateX(0);
  }

  /* ── Slide from right ── */
  .mu-reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition:
      opacity   0.65s var(--mu-ease-out),
      transform 0.65s var(--mu-ease-out);
  }
  .mu-reveal-right.mu-revealed {
    opacity: 1;
    transform: translateX(0);
  }

  /* ── Scale + fade (hero visuals, mockups) ── */
  .mu-reveal-scale {
    opacity: 0;
    transform: scale(0.92) translateY(16px);
    transition:
      opacity   0.7s var(--mu-ease-out),
      transform 0.7s var(--mu-ease-out);
  }
  .mu-reveal-scale.mu-revealed {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  /* ── Flip up (cards in a grid) ── */
  .mu-reveal-flip {
    opacity: 0;
    transform: perspective(600px) rotateX(12deg) translateY(24px);
    transition:
      opacity   0.6s var(--mu-ease-out),
      transform 0.6s var(--mu-ease-out);
  }
  .mu-reveal-flip.mu-revealed {
    opacity: 1;
    transform: perspective(600px) rotateX(0deg) translateY(0);
  }

  /* ── Stagger delays on children ── */
  .mu-stagger > *:nth-child(1)  { transition-delay:   0ms !important; }
  .mu-stagger > *:nth-child(2)  { transition-delay:  70ms !important; }
  .mu-stagger > *:nth-child(3)  { transition-delay: 140ms !important; }
  .mu-stagger > *:nth-child(4)  { transition-delay: 210ms !important; }
  .mu-stagger > *:nth-child(5)  { transition-delay: 280ms !important; }
  .mu-stagger > *:nth-child(6)  { transition-delay: 350ms !important; }
  .mu-stagger > *:nth-child(n+7){ transition-delay: 420ms !important; }

  /* ── Page load — header nav items fade in ── */
  .mu-nav-reveal {
    opacity: 0;
    transform: translateY(-8px);
    transition:
      opacity   0.4s var(--mu-ease-out),
      transform 0.4s var(--mu-ease-out);
  }
  .mu-nav-reveal.mu-revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Stat counter — number highlight on reveal ── */
.mu-stat-counted {
  color: var(--mu-blue) !important;
}

/* ============================================================
   SECTION EYEBROWS — consistent violet accent
   ============================================================ */
.section-eyebrow,
.section-label,
.fe-eyebrow,
.pr-ey,
[class*="eyebrow"],
[class*="section-tag"] {
  color: var(--mu-blue) !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

/* ============================================================
   GLOBAL POLISH
   ============================================================ */
/* scroll-behavior: smooth removed — conflicts with Elementor scroll JS */
body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Nav links — smooth transition */
.uc-navbar-nav > li > a.nav-links,
.site-header__nav a {
  transition: color var(--mu-t-fast), background var(--mu-t-fast) !important;
}

/* Sticky header shadow instead of hard border */
.uc-navbar-container.uc-navbar-sticky {
  box-shadow: 0 1px 20px rgba(15,32,87,.08) !important;
}

/* Footer links */
.site-footer a:not(.btn):not(.btn-primary) {
  transition: color var(--mu-t-fast) !important;
}