/* =============================================================================
   Incipit ConsultEdge — Premium Public Design System (Foundations)
   FILE 3 OF 4 — COMPONENTS
   Premium pill buttons (gradient Primary→Secondary), glass header, card
   lifts, marquee, work/team/awards styles, back-to-top, scroll reveal.
   No inline styles; all interaction via this sheet + incipit-awake.js.
   ============================================================================= */

/* 1. Header / navbar (fixed glass, premium) + mega menus */
.header {
  padding: 14px 0;
  z-index: 99;
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  animation: 0.6s ease-in-out 0s normal none 1 running fadeInDown;
}

@keyframes fadeInDown {
  0% { opacity: 0; transform: translateY(-28px); }
  100% { opacity: 1; transform: translateY(0); }
}

.header .logo img { height: 42px; width: auto; }
.offcanvas .logo img { height: 34px; width: auto; }

/* Transparent resting state — frosted glass pill */
.navbar.navbar-expand-xl.rounded-pill {
  background-color: rgba(255, 255, 255, 0.60);
  border: 1px solid rgba(134, 151, 196, 0.30);
  border-radius: 9999px;
  padding: 10px 18px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Scrolled glass state — tinted surface with brand tint */
.header.fixed-header .navbar {
  background-color: rgba(255, 255, 255, 0.88);
  border-color: var(--bs-accent);
  box-shadow: var(--bs-box-shadow-sm);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Desktop top-level nav links */
.header .nav-link,
.offcanvas .nav-link {
  color: var(--bs-body-color);
  font-weight: 500;
  border-radius: 9999px;
  transition: all 0.2s ease;
}

.header .nav-link:hover,
.header .nav-link.active,
.offcanvas .nav-link.active {
  color: var(--bs-primary);
  background-color: var(--bs-primary-bg-subtle);
}

.header .nav-link.active {
  font-weight: 600;
}

.navbar-toggler { border: 0; padding: 0; box-shadow: none; color: var(--bs-body-color); }

/* Skip link — visually hidden, revealed only on keyboard focus */
.skip-link {
    position: absolute;
    top: -48px;
    left: 1rem;
    z-index: 1100;
    padding: .6rem 1rem;
    border-radius: 10px;
    background: var(--bs-primary);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: top .2s ease;
}
.skip-link:focus {
    top: 1rem;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Mega menu panel — premium floating surface, left-aligned under the nav container */
.mega-menu {
    position: absolute;
    left: 0;
    min-width: 540px;
    max-width: 960px;
    margin-top: .5rem;
    padding: 0;
    border: 1px solid var(--bs-accent-border-subtle);
    background-color: #fff;
    box-shadow: var(--bs-box-shadow-lg);
    border-radius: var(--bs-border-radius-lg);
}
.mega-menu .container { max-width: 100%; padding-left: 1.5rem; padding-right: 1.5rem; }

.mega-item {
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.mega-item:hover {
  background-color: var(--bs-primary-bg-subtle);
  transform: translateY(-2px);
}

/* 2. Pill button — the signature CTA with sliding round icon.
   Base .btn uses the Premium gradient; contextual variants adjust. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: var(--bs-gradient-primary);
  color: #fff;
  border-radius: 9999px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.05s ease, box-shadow 0.25s ease;
  width: fit-content;
  padding: 12px 42px 12px 20px;
}

.btn:hover {
  background: var(--bs-gradient-primary);
  transform: translateY(-1px);
  box-shadow: var(--bs-box-shadow-sm);
}

.btn:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 3px; }

.btn .btn-text {
  position: relative;
  z-index: 1;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  transition: transform 0.25s ease, color 0.25s ease;
  padding-inline-end: 10px;
}

.btn:hover .btn-text {
  color: var(--bs-primary);
  transform: translateX(2.5rem);
}

.btn .btn-icon {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(-120%, -50%);
  z-index: 0;
  transition: transform 0.4s ease, left 0.4s ease;
}

.btn:hover .btn-icon {
  left: 0;
  color: var(--bs-primary) !important;
  background-color: #fff !important;
  transform: translate(20%, -50%) rotate(45deg);
}

/* Outline secondary CTA */
.btn-outline-dark,
.btn-outline-secondary {
  background: transparent !important;
  color: var(--bs-primary);
  border-color: var(--bs-accent);
}

.btn-outline-dark:hover,
.btn-outline-secondary:hover {
  color: #fff;
  background: var(--bs-gradient-primary) !important;
}

.btn-outline-dark:hover .btn-text,
.btn-outline-secondary:hover .btn-text { color: #fff; }

.btn-outline-dark:hover .btn-icon,
.btn-outline-secondary:hover .btn-icon {
  color: var(--bs-primary) !important;
  background-color: #fff !important;
}

/* Solid dark variant (used on get-in-touch banners) — deep on-page accent */
.btn-dark {
  background: var(--bs-gradient-primary);
  color: #fff;
}

.btn-dark:hover .btn-text { color: var(--bs-primary); }
.btn-dark:hover .btn-icon {
  color: var(--bs-primary) !important;
  background-color: #fff !important;
}

/* Plain (no pill animation) rounded buttons for forms */
.btn.rounded-pill:not(.btn-text) {
  padding: 12px 28px;
  font-weight: 500;
  background: var(--bs-gradient-primary);
  color: #fff;
  border: 1px solid transparent;
}

.btn.rounded-pill.btn-outline-dark,
.btn.rounded-pill.btn-outline-secondary {
  background: transparent;
  color: var(--bs-primary);
  border-color: var(--bs-accent);
}

.btn.rounded-pill.btn-outline-dark:hover,
.btn.rounded-pill.btn-outline-secondary:hover {
  color: #fff;
  background: var(--bs-gradient-primary);
}

/* White button on dark surfaces */
.btn-white {
  border-color: #fff !important;
  background-color: #fff;
  color: var(--bs-heading-color);
}
.btn-white .btn-text { color: var(--bs-heading-color); }
.btn-white:hover .btn-text { color: var(--bs-primary); }
.btn-white:hover .btn-icon {
  color: var(--bs-primary) !important;
  background-color: #fff !important;
  border: 1px solid var(--bs-accent);
}

/* Toggle / checked state */
.btn-check:checked + .btn,
.btn.active,
.btn.show {
  background: var(--bs-gradient-primary) !important;
  border-color: var(--bs-primary) !important;
  box-shadow: unset !important;
}

/* 3. Cards — premium surface with soft border & lift */
.card {
  background-color: #fff;
  border: 1px solid var(--bs-accent);
  border-color: var(--bs-accent);
  border-radius: var(--bs-border-radius);
  margin-bottom: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.2s ease;
}

.card.bg-warning,
.card.bg-primary,
.card.bg-dark {
  border-color: transparent;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bs-box-shadow);
}

.card.border {
  border: 1px solid var(--bs-accent) !important;
}

.card.bg-surface {
  background-color: var(--bs-surface) !important;
  border-color: var(--bs-accent-border-subtle);
}

/* 4. Banner gradient field behind hero (soft pastel, premium) */
.bg-gradient-shaph { position: relative; }
.bg-gradient-shaph::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, #EEF2FF 0%, #EDE8F5 70%);
  filter: blur(60px);
  opacity: 0.7;
  z-index: 0;
}
.banner-section .container { position: relative; z-index: 1; }

/* 5. Marquee (logo/feature ticker) */
.marquee-content {
  animation: marquee 24s linear infinite running;
}
.marquee-content:hover { animation-play-state: paused; }
.marquee-tag {
  width: 200px;
  transition: all 0.25s ease;
  color: var(--bs-secondary);
}
.marquee-tag:hover {
  transform: scale(1.12);
  color: var(--bs-primary);
  cursor: pointer;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translate(-50%); }
}

/* 6. Work cards — overlay arrow, premium lift */
.work .work-img { position: relative; overflow: hidden; border-radius: var(--bs-border-radius); }
.work .work-img::before {
  content: "";
  display: block;
  padding-top: 72%;
}
.work .work-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.work:hover .work-img > img { transform: scale(1.05); }
.work:hover .work-details .work-title { color: var(--bs-primary); }
.work .work-img .work-overlay {
  position: absolute;
  inset: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: all 0.4s ease-in-out;
  background-color: rgba(61, 82, 160, 0.85);
}
.work .work-img:hover .work-overlay {
  visibility: visible;
  transform: translateY(0);
}
.work .work-img .work-overlay .work-icon:hover {
  color: var(--bs-primary) !important;
  background-color: #fff !important;
}

/* 7. Team — grayscale lift on hover */
.team:hover .team-img img { filter: grayscale(100%) brightness(1.05); }

/* 8. Accordion — rounded, light open state */
.accordion .accordion-item .accordion-button:not(.collapsed) {
  box-shadow: unset;
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
  font-weight: 600;
}
.accordion .accordion-item .collapse.show .accordion-body {
  background-color: var(--bs-primary-bg-subtle);
}
.accordion-item {
  border-radius: var(--bs-border-radius);
  overflow: hidden;
  border: 1px solid var(--bs-accent);
}

/* 9. Awards cards — premium hover lift */
.awards-card:hover .awards-title { color: var(--bs-primary); }

/* 10. Customer story background helper */
.customer-bg-img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* 11. Back to top — round primary button revealed after scroll */
#scrollToTopBtn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bs-gradient-primary);
  color: #fff;
  align-items: center;
  justify-content: center;
  transition: all 0.45s ease-in-out;
  display: none;
  border: 0;
}
#scrollToTopBtn.show { display: flex; transform: scale(1); }
#scrollToTopBtn:hover {
  transform: scale(1.1);
  box-shadow: var(--bs-box-shadow);
}

/* 12. Scroll reveal — local AOS replacement */
[data-aos] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
[data-aos].aos-animate {
  opacity: 1;
  transform: none;
}
[data-aos-left][data-aos].aos-animate { transform: none; }
[data-aos-top][data-aos].aos-animate { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .marquee-content, .header { animation: none !important; }
  [data-aos] { opacity: 1; transform: none; transition: none; }
  .card:hover { transform: none; box-shadow: unset; }
  .work .work-img > img { transition: none; }
  .awards-card:hover { transform: none; box-shadow: unset; }
}

/* 13. Reduced-motion guard */
@media (prefers-reduced-motion: reduce) {
  .awards-grid .awards-card { transition: none; }
}