/* ==========================================================================
   site.css: page-specific layer on top of style.css + custom.css.
   Loaded last so it wins the cascade. Extracted from the former inline
   \3c style> block in index.html (no rule changes).
   ========================================================================== */

/* Header background (light theme is overridden by the glass header in theme.css) */
.header-area .main-header-area {
  background: #040e27 !important;
}
body.dark-mode .header-area .main-header-area {
  background: #121620 !important;
}

/* Dark mode link hover colors */
body.dark-mode a:hover,
body.dark-mode footer a:hover,
body.dark-mode footer li a:hover,
body.dark-mode footer ul li a:hover,
body.dark-mode .footer a:hover,
body.dark-mode .footer_widget a:hover,
body.dark-mode .footer-links a:hover,
body.dark-mode .footer-links li a:hover,
body.dark-mode .footer-contact a:hover,
body.dark-mode .main-menu ul li a:hover,
body.dark-mode nav a:hover,
body.dark-mode a.contact-link:hover,
body.dark-mode .contact-link:hover,
body.dark-mode .contact-links-wrapper a:hover,
body.dark-mode .contact-links-wrapper a.contact-link:hover,
body.dark-mode .cta-contact-links a:hover,
body.dark-mode .cta-contact-links .contact-link:hover,
body.dark-mode .cta-contact-links .contact-links-wrapper a:hover,
body.dark-mode .final-cta-section a:hover,
body.dark-mode .final-cta-section .contact-link:hover,
body.dark-mode .linkedin-link:hover,
body.dark-mode a.linkedin-link:hover,
body.dark-mode .testimonial_area .linkedin-link:hover {
  color: #fac800 !important;
}

/* LinkedIn link hover animation */
body.dark-mode .linkedin-link {
  transition:
    color 0.3s ease,
    transform 0.3s ease !important;
  display: inline-block !important;
}
body.dark-mode .linkedin-link:hover {
  transform: translateX(5px) !important;
}

/* Social icons hover */
body.dark-mode .social-item:hover,
body.dark-mode .social-item:hover i,
body.dark-mode footer .social-item:hover,
body.dark-mode footer .social-item:hover i,
body.dark-mode .footer_widget .social-item:hover,
body.dark-mode .footer_widget .social-item:hover i {
  color: #fac800 !important;
  background: transparent !important;
  border-color: #fac800 !important;
}

/* Hover animations for nav links */
body.dark-mode .main-menu ul li a {
  transition:
    color 0.3s ease,
    transform 0.3s ease !important;
}
body.dark-mode .main-menu ul li a:hover {
  transform: translateY(-2px) !important;
}

/* Hover animations for footer links */
body.dark-mode .footer-links a,
body.dark-mode .footer-contact a {
  transition:
    color 0.3s ease,
    transform 0.3s ease !important;
  display: inline-block !important;
}
body.dark-mode .footer-links a:hover,
body.dark-mode .footer-contact a:hover {
  transform: translateX(5px) !important;
}

/* Hover animations for contact links */
body.dark-mode .contact-link,
body.dark-mode .contact-links-wrapper a {
  transition:
    color 0.3s ease,
    transform 0.3s ease !important;
}
body.dark-mode .contact-link:hover,
body.dark-mode .contact-links-wrapper a:hover {
  transform: scale(1.05) !important;
}

/* Social icons hover animation */
body.dark-mode .social-item {
  transition:
    color 0.3s ease,
    transform 0.3s ease,
    border-color 0.3s ease !important;
}
body.dark-mode .social-item:hover {
  transform: scale(1.15) !important;
}

/* ===== CUSTOM SCROLLBAR ===== */
/* Light Mode - White track + Navy thumb */
::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}
::-webkit-scrollbar-track {
  background: #ffffff !important;
}
::-webkit-scrollbar-thumb {
  background: #040e27 !important;
  border-radius: 10px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: #0a1a3a !important;
}

/* Dark Mode - Orange (#fac800) + Background (#121620) */
html.dark-mode::-webkit-scrollbar-track,
html.dark-mode ::-webkit-scrollbar-track,
body.dark-mode::-webkit-scrollbar-track,
.dark-mode::-webkit-scrollbar-track {
  background: #121620 !important;
}
html.dark-mode::-webkit-scrollbar-thumb,
html.dark-mode ::-webkit-scrollbar-thumb,
body.dark-mode::-webkit-scrollbar-thumb,
.dark-mode::-webkit-scrollbar-thumb {
  background: #fac800 !important;
  border: 2px solid #121620 !important;
}
html.dark-mode::-webkit-scrollbar-thumb:hover,
html.dark-mode ::-webkit-scrollbar-thumb:hover,
body.dark-mode::-webkit-scrollbar-thumb:hover,
.dark-mode::-webkit-scrollbar-thumb:hover {
  background: #ffda44 !important;
}
::-webkit-scrollbar-corner {
  background: #ffffff !important;
}
html.dark-mode::-webkit-scrollbar-corner,
body.dark-mode::-webkit-scrollbar-corner {
  background: #121620 !important;
}

/* Firefox scrollbar colors */
html {
  scrollbar-color: #040e27 #ffffff;
  scrollbar-width: thin;
}
html.dark-mode {
  scrollbar-color: #fac800 #121620 !important;
}

/* ============================================
   MEET CARD: inside HERO, transparent (inherits hero bg)
   LIGHT: white with navy border  |  DARK: #121620 inherit with white border
   ============================================ */
#meet .meet-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 48px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  color: #040e27;
}
#meet .meet-card .meet-h3 {
  color: #040e27;
}
#meet .meet-card .meet-body {
  color: #424245;
}
#meet .meet-card .meet-list li {
  color: #040e27;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
#meet .meet-card .meet-eyebrow {
  color: #040e27 !important;
}
#meet .meet-card .meet-em {
  color: #040e27 !important;
  font-weight: 800;
}
#meet .meet-card .meet-caption {
  color: #6e6e73;
}
#meet .meet-card .meet-num {
  position: absolute;
  top: 28px;
  right: 40px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(56px, 8vw, 110px);
  line-height: 1;
  color: rgba(0, 0, 0, 0.07);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
#meet .meet-card .meet-glow {
  position: absolute;
  top: -150px;
  right: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0) 60%
  );
  pointer-events: none;
  z-index: 0;
}
#meet .meet-card .meet-ring {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  pointer-events: none;
}
/* Light mode overrides for bullet check circles + secondary link */
#meet .meet-card .meet-check {
  background: rgba(0, 0, 0, 0.08) !important;
  color: #040e27 !important;
}
#meet .meet-card .meet-link {
  color: #040e27 !important;
  border-bottom-color: rgba(0, 0, 0, 0.3) !important;
}
#meet .meet-card .meet-play-icon {
  color: #040e27 !important;
}

/* Dark: transparent card, inherits #121620 hero bg, white hairline border */
body.dark-mode #meet .meet-card {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
  color: #f1f3f8;
}
body.dark-mode #meet .meet-card .meet-h3 {
  color: #ffffff;
}
body.dark-mode #meet .meet-card .meet-body {
  color: rgba(241, 243, 248, 0.82);
}
body.dark-mode #meet .meet-card .meet-list li {
  color: rgba(241, 243, 248, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
body.dark-mode #meet .meet-card .meet-eyebrow {
  color: #fac800 !important;
}
body.dark-mode #meet .meet-card .meet-em {
  color: #fac800 !important;
}
body.dark-mode #meet .meet-card .meet-caption {
  color: rgba(241, 243, 248, 0.65);
}
body.dark-mode #meet .meet-card .meet-num {
  color: rgba(250, 200, 0, 0.12);
}
body.dark-mode #meet .meet-card .meet-glow {
  background: radial-gradient(
    circle,
    rgba(250, 200, 0, 0.1) 0%,
    rgba(250, 200, 0, 0) 60%
  );
}
body.dark-mode #meet .meet-card .meet-ring {
  border-color: rgba(250, 200, 0, 0.25);
}
body.dark-mode #meet .meet-card .meet-check {
  background: rgba(250, 200, 0, 0.18) !important;
  color: #fac800 !important;
}
body.dark-mode #meet .meet-card .meet-link {
  color: #fac800 !important;
  border-bottom-color: rgba(250, 200, 0, 0.4) !important;
}
body.dark-mode #meet .meet-card .meet-play-icon {
  color: #fac800 !important;
}

/* Watermark "01": hide on small screens so it never overlaps */
@media (max-width: 991px) {
  #meet .meet-card .meet-num {
    display: none;
  }
}

/* ============================================
   MEET VIDEO FRAME: locked 9:16 portrait, seamless poster↔video
   ============================================ */
#meet .meet-video-wrap {
  position: relative;
  display: inline-block;
  max-width: 440px;
  width: 100%;
}
#meet .meet-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
  isolation: isolate;
}
body.dark-mode #meet .meet-video-frame {
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(250, 200, 0, 0.08);
}
#meet .meet-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #000;
  /* The source is already cropped to the portrait frame (no pillarbox),
     so no zoom is needed to hide black bars. */
  pointer-events: none;
}
#meet .meet-video-frame > img,
#meet .meet-video > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Premium click-surface: always intercepts clicks so the browser
   never auto-pauses on stray taps, and toggles play/pause itself. */
#meet .meet-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.06) 0%,
    rgba(0, 0, 0, 0.28) 100%
  );
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition:
    background 240ms ease-out,
    opacity 240ms ease-out;
  z-index: 2;
  will-change: opacity, background;
}
/* While playing: overlay fades to fully transparent but stays clickable.
   No transforms, no box-shadow animations: prevents flicker on hover. */
#meet .meet-play-overlay.is-playing {
  background: transparent;
  opacity: 0;
}
#meet .meet-play-overlay.is-playing:hover,
#meet .meet-play-overlay.is-playing:focus-visible {
  opacity: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.2) 100%
  );
}
/* Icon swap: play when paused, pause when playing */
#meet .meet-play-overlay.is-playing .meet-play-btn .icon-play {
  display: none;
}
#meet .meet-play-overlay:not(.is-playing) .meet-play-btn .icon-pause {
  display: none;
}

#meet .meet-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #0071e3;
  color: #ffffff;
  padding: 0;
  box-shadow:
    0 10px 28px rgba(0, 113, 227, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    0 0 0 8px rgba(255, 255, 255, 0.12);
  transition:
    box-shadow 240ms ease-out,
    background 240ms ease-out;
  will-change: box-shadow;
}
#meet .meet-play-btn .icon-play,
#meet .meet-play-btn .icon-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  line-height: 0;
}
#meet .meet-play-btn svg {
  display: block;
  width: 32px;
  height: 32px;
  transform: none !important;
}
#meet .meet-play-overlay:hover .meet-play-btn {
  background: #0077ed;
  box-shadow:
    0 14px 36px rgba(0, 113, 227, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    0 0 0 10px rgba(255, 255, 255, 0.18);
}
/* Dark theme: gold */
body.dark-mode #meet .meet-play-btn {
  background: #fac800;
  color: #040e27;
  box-shadow:
    0 10px 28px rgba(250, 200, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 0 0 8px rgba(250, 200, 0, 0.1);
}
body.dark-mode #meet .meet-play-overlay:hover .meet-play-btn {
  background: #ffd633;
  box-shadow:
    0 14px 36px rgba(250, 200, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset,
    0 0 0 10px rgba(250, 200, 0, 0.14);
}

/* Ring hugs the new frame */
#meet .meet-card .meet-ring {
  inset: -10px;
}

/* Mobile: slightly shorter frame */
@media (max-width: 767px) {
  #meet .meet-video-wrap {
    max-width: 320px;
  }
}

/* ============================================
   MOBILE-ONLY refinements: tighter hero top gap,
   near edge-to-edge video, subtle hairline border,
   centered meet-card copy, buttons that fit cards
   ============================================ */
@media (max-width: 575px) {
  /* Header is ~56px on mobile (logo 28px + padding 14px top/bottom).
     Slider needs enough top padding to clear the fixed header + gap. */
  html body .slider_area,
  html body .slider_area.hero-premium,
  html body #home.slider_area {
    padding-top: 92px !important;
  }
  html body .hero-premium .hero-single,
  html body .hero-premium .single_slider,
  html body .hero-premium .slider_bg_1,
  html body .hero-premium .single_slider.slider_bg_1 {
    padding-top: 12px !important;
    padding-bottom: 32px !important;
    align-items: flex-start !important;
    min-height: 0 !important;
    height: auto !important;
  }
  /* Remove the large bottom margin on the opening eyebrow to tighten header-to-H3 rhythm */
  html body .hero-premium .slider_text .title-arhitect {
    margin-bottom: 14px !important;
    margin-top: 0 !important;
  }
  html body .hero-premium .slider_text h1 {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }
  /* Meet card: remove side padding so the video can extend edge-to-edge */
  #meet .meet-card {
    padding: 20px 10px !important;
    border-radius: 18px;
  }
  /* Meet row margin-top shrunk: the hero padding already handles the gap */
  #meet {
    margin-top: 16px !important;
  }
  /* Video wrap: wider on mobile, hairline border, no outer ring */
  #meet .meet-video-wrap {
    max-width: 100% !important;
  }
  #meet .meet-card .meet-ring {
    display: none !important;
  }
  #meet .meet-video-frame {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 14px;
    background: transparent !important;
  }
  body.dark-mode #meet .meet-video-frame {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* --- Meet card COPY COLUMN: center everything on mobile --- */
  #meet .meet-card .col-lg-7 {
    text-align: center !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #meet .meet-eyebrow {
    justify-content: center !important;
    text-align: center !important;
  }
  #meet .meet-h3,
  #meet .meet-body {
    text-align: center !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #meet .meet-list {
    text-align: left !important;
  }
  #meet .meet-list li {
    justify-content: flex-start !important;
  }
  /* Button group: stack centered, primary button full-width */
  #meet .meet-card .col-lg-7 > div:last-child {
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
  }
  #meet .meet-card .col-lg-7 > div:last-child > a.btn {
    width: 100% !important;
    text-align: center !important;
  }

  /* --- Products "Visit ...com" buttons: fit within card --- */
}

/* ============================================
   FINAL CTA: 3 step cards (theme-aware)
   ============================================ */
.step-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  padding: 32px 28px;
  height: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
  color: #040e27;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
/* Spacing between the 3 step cards: uses modern CSS gap instead of
   Bootstrap gutters. Scoped with #final-cta parent ID to beat every
   competing `.services-area > [class*="col-"]` rule. */
#final-cta .services-area {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 40px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#final-cta .services-area > [class*="col-"] {
  flex: 1 1 calc(33.333% - 27px) !important;
  max-width: calc(33.333% - 27px) !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (max-width: 991px) {
  #final-cta .services-area {
    gap: 28px !important;
  }
  #final-cta .services-area > [class*="col-"] {
    flex: 1 1 calc(50% - 14px) !important;
    max-width: calc(50% - 14px) !important;
  }
}
@media (max-width: 575px) {
  #final-cta .services-area > [class*="col-"] {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}
.step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.12);
}
.step-card .step-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: #040e27;
  opacity: 0.65;
  margin-bottom: 10px;
}
.step-card h3 {
  color: #040e27 !important;
  margin: 0 0 14px 0 !important;
}
.step-card p {
  color: #424245 !important;
  margin-bottom: 20px !important;
}
.step-card.step-featured {
  background: #040e27;
  border: 1px solid #040e27;
  color: #f1f3f8;
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}
.step-card.step-featured .step-eyebrow {
  color: #ffffff;
  opacity: 0.85;
}
.step-card.step-featured h3 {
  color: #ffffff !important;
}
.step-card.step-featured p {
  color: rgba(241, 243, 248, 0.9) !important;
}

/* Dark mode overrides for step cards */
body.dark-mode .step-card {
  background: linear-gradient(
    135deg,
    rgba(20, 26, 42, 0.9) 0%,
    rgba(12, 16, 28, 0.95) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f1f3f8;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
body.dark-mode .step-card:hover {
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
body.dark-mode .step-card .step-eyebrow {
  color: #fac800;
  opacity: 1;
}
body.dark-mode .step-card h3 {
  color: #ffffff !important;
}
body.dark-mode .step-card p {
  color: rgba(241, 243, 248, 0.82) !important;
}
body.dark-mode .step-card.step-featured {
  background: linear-gradient(
    135deg,
    rgba(250, 200, 0, 0.14) 0%,
    rgba(250, 200, 0, 0.06) 100%
  );
  border: 1px solid rgba(250, 200, 0, 0.45);
  box-shadow: 0 30px 80px rgba(250, 200, 0, 0.12);
}
body.dark-mode .step-card.step-featured .step-eyebrow {
  color: #fac800;
}
body.dark-mode .step-card.step-featured h3 {
  color: #ffffff !important;
}

/* ============================================
   STICKY HEADER CTA: blue on light, gold on dark
   ============================================ */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: #0071e3;
  color: #ffffff !important;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
  white-space: nowrap;
}
.header-cta:hover,
.header-cta:focus {
  background: #0077ed;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 113, 227, 0.35);
  text-decoration: none;
}
body.dark-mode .header-cta {
  background: #fac800;
  color: #040e27 !important;
}
body.dark-mode .header-cta:hover {
  background: #ffda44;
  color: #040e27 !important;
  box-shadow: 0 10px 30px rgba(250, 200, 0, 0.35);
}
@media (max-width: 991px) {
  .header-cta-wrap {
    display: none !important;
  }
}

/* ============================================
   ACCENT LINK: blue on light, gold on dark
   ============================================ */
.accent-link {
  color: #0071e3 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.accent-link:hover {
  color: #0077ed !important;
}
body.dark-mode .accent-link {
  color: #fac800 !important;
}
body.dark-mode .accent-link:hover {
  color: #ffda44 !important;
}

/* ============================================
   ACCENT CARD: CTA cards with tinted bg
   Light = blue-brand tint, Dark = gold tint
   ============================================ */
.accent-card {
  background: rgba(0, 113, 227, 0.06) !important;
  border: 1px solid rgba(0, 113, 227, 0.35) !important;
}
body.dark-mode .accent-card {
  background: rgba(250, 200, 0, 0.08) !important;
  border: 1px solid rgba(250, 200, 0, 0.4) !important;
}

/* ============================================
   REVIEW CARDS: stars + divider + text theme-aware
   Light = brand blue for heading, navy body (high-class, readable)
   Dark  = gold accents, white body (default)
   ============================================ */
.review-divider {
  border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
}
body.dark-mode .review-divider {
  border-top: 1px solid rgba(250, 200, 0, 0.25) !important;
}
.review-stars {
  color: #040e27 !important;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
body.dark-mode .review-stars {
  color: #fac800 !important;
}

/* LIGHT theme: blue-navy premium palette across Reviews section */
body:not(.dark-mode) #reviews h2,
body:not(.dark-mode) #reviews #reviews-title {
  color: #040e27 !important;
}
body:not(.dark-mode) #reviews .section-subtitle {
  color: #424245 !important;
}
body:not(.dark-mode) #reviews .testimonial-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06) !important;
}
body:not(.dark-mode) #reviews .testimonial-text {
  color: #040e27 !important;
}
body:not(.dark-mode) #reviews .quote-icon,
body:not(.dark-mode) #reviews .quote-icon i {
  color: #0071e3 !important;
  opacity: 0.75 !important;
}
body:not(.dark-mode) #reviews .author-name {
  color: #040e27 !important;
  font-weight: 600 !important;
}
body:not(.dark-mode) #reviews .author-company {
  color: #6e6e73 !important;
}
body:not(.dark-mode) #reviews .linkedin-link {
  color: #0071e3 !important;
}
body:not(.dark-mode) #reviews .linkedin-link:hover {
  color: #0066cc !important;
}
body:not(.dark-mode) #reviews strong {
  color: #040e27 !important;
}

/* ============================================
   STEP 2 FEATURED BUTTON (inside .step-featured card)
   Light card = navy solid → white button / navy text
   Dark card = gold-tinted → gold button
   ============================================ */
.step-featured .btn-primary.btn-step-featured {
  background: #ffffff !important;
  color: #040e27 !important;
  border-color: #ffffff !important;
}
.step-featured .btn-primary.btn-step-featured:hover {
  background: #f1f3f8 !important;
  color: #040e27 !important;
  border-color: #f1f3f8 !important;
}
body.dark-mode .step-featured .btn-primary.btn-step-featured {
  background: #fac800 !important;
  color: #040e27 !important;
  border-color: #fac800 !important;
}
body.dark-mode .step-featured .btn-primary.btn-step-featured:hover {
  background: #ffda44 !important;
  color: #040e27 !important;
  border-color: #ffda44 !important;
}

/* ============================================
   HERO: PREMIUM STATEMENT BACKGROUND
   Aurora mesh + dot grid + SVG accent rings
   Theme-aware (dark navy / light off-white)
   ============================================ */
.hero-premium,
.slider_area.hero-premium {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
  background-image: none !important;
  height: auto !important;
  min-height: 0 !important;
}
.hero-premium .hero-single,
.hero-premium .single_slider,
.hero-premium .slider_bg_1,
.hero-premium .single_slider.slider_bg_1 {
  padding-top: clamp(90px, 11vh, 140px) !important;
  padding-bottom: clamp(60px, 8vh, 90px) !important;
  position: relative !important;
  display: block !important;
  align-items: unset !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  isolation: isolate;
}
/* Ensure slider_text block + meet row flow naturally */
.hero-premium .slider_text,
.hero-premium .container,
.hero-premium .row {
  position: relative !important;
  z-index: 10 !important;
  max-height: none !important;
  overflow: visible !important;
}
/* Base color = strict brand theme color */
.hero-premium {
  background: #ffffff !important;
}
body.dark-mode .hero-premium {
  background: #121620 !important;
}

/* FORCE #121620 EVERYWHERE on dark theme for uniform look */
body.dark-mode,
html.dark-mode,
body.dark-mode .slider_area,
body.dark-mode .single_slider,
body.dark-mode .slider_bg_1,
body.dark-mode .creative_people,
body.dark-mode #home,
body.dark-mode #meet,
body.dark-mode #recognize,
body.dark-mode #services,
body.dark-mode #products,
body.dark-mode #case-studies,
body.dark-mode #how-we-work,
body.dark-mode #investment,
body.dark-mode #faq,
body.dark-mode #reviews,
body.dark-mode .final-cta-section,
body.dark-mode .service_area,
body.dark-mode .how-we-work-section,
body.dark-mode .pricing-section,
body.dark-mode .faq-section,
body.dark-mode .testimonial_area,
body.dark-mode .case-studies-section,
body.dark-mode .discuss_projects {
  background: #121620 !important;
  background-color: #121620 !important;
  background-image: none !important;
}
body.dark-mode .footer {
  background-color: #0c0f16 !important;
  background-image: none !important;
}
body.dark-mode #sticky-header,
body.dark-mode .main-header-area,
body.dark-mode .header-area,
body.dark-mode .header-area .main-header-area {
  background: #121620 !important;
  background-color: #121620 !important;
}

/* Layer 1: Base: LIGHT pure white, no gradients */
.hero-premium .hero-mesh {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none;
  display: block !important;
  background: #ffffff !important;
}
/* DARK theme: SOLID #121620 brand color, ONLY this color, nothing else */
body.dark-mode .hero-premium .hero-mesh {
  background: #121620 !important;
}

/* Content always on top */
.hero-premium .container {
  position: relative;
  z-index: 4;
}

/* Hero typography rhythm */
.hero-premium .slider_text .title-arhitect {
  display: inline-block;
  margin-bottom: 32px;
  letter-spacing: 0.08em;
}
/* Premium eyebrow: small, letter-spaced, flanked by hairlines.
   Makes the headline dominant and gives the hero a visual anchor.
   Uses ::before/::after with vertical-align: middle: the
   typography-correct way to align a line to cap-height optical center. */
.hero-premium .slider_text .title-arhitect.hero-eyebrow-premium {
  display: inline-block !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase;
  margin-bottom: 28px !important;
  line-height: 1 !important;
  white-space: nowrap;
}
.hero-premium .slider_text .title-arhitect.hero-eyebrow-premium::before,
.hero-premium .slider_text .title-arhitect.hero-eyebrow-premium::after {
  content: "";
  display: inline-block;
  vertical-align: 0.35em; /* lands on cap-height middle */
  width: 36px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.hero-premium .slider_text .title-arhitect.hero-eyebrow-premium::before {
  margin-right: 18px;
}
.hero-premium .slider_text .title-arhitect.hero-eyebrow-premium::after {
  margin-left: 18px;
}
body:not(.dark-mode)
  .hero-premium
  .slider_text
  .title-arhitect.hero-eyebrow-premium {
  color: #6e6e73 !important; /* soft slate: doesn't compete with navy headline */
}
body.dark-mode .hero-premium .slider_text .title-arhitect.hero-eyebrow-premium {
  color: rgba(250, 200, 0, 0.82) !important; /* gold, slightly muted */
}
@media (max-width: 575px) {
  /* Mobile eyebrow: text-only, no flanking dashes (they look cramped
     on small viewports). Smaller font + tighter tracking to fit cleanly. */
  .hero-premium .slider_text .title-arhitect.hero-eyebrow-premium {
    display: inline-block !important;
    font-size: clamp(0.42rem, 1.95vw, 0.58rem) !important;
    letter-spacing: 0.14em !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    padding: 0 14px !important;
    max-width: 100% !important;
    text-align: center;
  }
  /* Hide flanking dashes on small devices: look cramped with tight text */
  .hero-premium .slider_text .title-arhitect.hero-eyebrow-premium::before,
  .hero-premium .slider_text .title-arhitect.hero-eyebrow-premium::after {
    display: none !important;
  }

  /* Hero h3: bigger + dominant on mobile (was slightly too small) */
  html body .hero-premium .slider_text h1 {
    font-size: clamp(2rem, 8.2vw, 2.4rem) !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    letter-spacing: -0.012em !important;
    padding: 0 6px !important;
  }
}
/* Tablet: beat the generic 24px/400 from custom.css that otherwise
   hijacks the hero at the 576–991 range (visibly thin & undersized).
   Scales smoothly between mobile (32px/700) and desktop (50px/400). */
@media (min-width: 576px) and (max-width: 991px) {
  html body .hero-premium .slider_text h1 {
    font-size: clamp(2.25rem, 4.4vw, 2.875rem) !important;
    line-height: 1.18 !important;
    font-weight: 600 !important;
    letter-spacing: -0.012em !important;
    padding: 0 12px !important;
  }
}
.hero-premium .slider_text h1 {
  margin-bottom: 32px;
}
/* Accent phrase: premium editorial treatment with subtle gradient
   and tight tracking. No neumorphism on text (hurts readability);
   instead a sharp 1px "engraved" shadow for tactile feel. */
.hero-premium .slider_text h1 .hero-accent {
  display: block;
  margin-top: 6px;
  font-style: normal;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -0.015em;
}
/* Light theme: navy-to-blue gradient, sharp engrave shadow */
body:not(.dark-mode) .hero-premium .slider_text h1 .hero-accent {
  color: #0071e3 !important; /* fallback */
  background: linear-gradient(180deg, #0066cc 0%, #0071e3 55%, #2997ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
/* Dark theme: gold-to-warm gradient, subtle glow above */
body.dark-mode .hero-premium .slider_text h1 .hero-accent {
  color: #fac800 !important; /* fallback */
  background: linear-gradient(180deg, #ffdd44 0%, #fac800 55%, #e5a800 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 -1px 0 rgba(255, 220, 100, 0.15);
}
@media (max-width: 575px) {
  .hero-premium .slider_text h1 .hero-accent {
    margin-top: 4px;
    letter-spacing: -0.01em;
  }
}

/* Reusable conversion accent: apply to high-conversion phrases only.
   Same editorial-premium treatment as hero accent, inline usage. */
.conversion-accent {
  font-weight: 800;
  letter-spacing: -0.015em;
}
body:not(.dark-mode) .conversion-accent {
  color: #0071e3 !important;
  background: linear-gradient(180deg, #0066cc 0%, #0071e3 55%, #2997ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
body.dark-mode .conversion-accent {
  color: #fac800 !important;
  background: linear-gradient(180deg, #ffdd44 0%, #fac800 55%, #e5a800 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 -1px 0 rgba(255, 220, 100, 0.15);
}
.hero-premium .hero-cta-buttons {
  margin-top: 40px;
  margin-bottom: 12px;
}

/* ============================================
   HERO TEXT COLORS: theme-aware
   Light = navy text, Dark = white (default template)
   ============================================ */
body:not(.dark-mode) .hero-premium .slider_text h1,
body:not(.dark-mode) .hero-premium .slider_text h1,
body:not(.dark-mode) .hero-premium .slider_text h2 {
  color: #040e27 !important;
}
body:not(.dark-mode) .hero-premium .slider_text .title-arhitect {
  color: #040e27 !important;
}
body:not(.dark-mode) .hero-premium .slider_text .social-proof-hero {
  color: #424245 !important;
}
body:not(.dark-mode) .hero-premium .slider_text .social-proof-hero strong {
  color: #040e27 !important;
}
/* Or go direct: on light (bg is off-white) */
body:not(.dark-mode) .hero-premium .hero-go-direct {
  color: #424245 !important;
}
body:not(.dark-mode) .hero-premium .hero-go-direct .hero-go-label {
  color: rgba(0, 0, 0, 0.55) !important;
}
body:not(.dark-mode) .hero-premium .hero-go-direct .hero-go-sep {
  color: rgba(0, 0, 0, 0.3) !important;
}
body:not(.dark-mode) .hero-premium .hero-go-direct .hero-direct-link {
  color: #040e27 !important;
  text-decoration-color: rgba(0, 0, 0, 0.35) !important;
}
body:not(.dark-mode) .hero-premium .hero-go-direct .hero-direct-link:hover {
  color: #0071e3 !important;
  text-decoration-color: #0071e3 !important;
}
/* Secondary CTA button outline: navy on light */
body:not(.dark-mode) .hero-premium .btn-outline-light {
  color: #040e27 !important;
  border-color: #040e27 !important;
}
body:not(.dark-mode) .hero-premium .btn-outline-light:hover {
  background: #040e27 !important;
  color: #ffffff !important;
  border-color: #040e27 !important;
}

/* ============================================
   HERO "Or go direct:": stacked label + inline links, properly spaced
   ============================================ */
.hero-go-direct {
  color: rgba(255, 255, 255, 0.75) !important;
  opacity: 1 !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin-top: 26px !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: center !important;
  letter-spacing: 0.02em !important;
}
.hero-go-direct .hero-go-label {
  color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.22em !important;
  font-size: 0.7rem !important;
  margin: 0 !important;
  display: block !important;
}
.hero-go-direct .hero-direct-links {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 14px !important;
  row-gap: 6px !important;
}
.hero-go-direct .hero-go-sep {
  color: rgba(255, 255, 255, 0.3) !important;
  margin: 0 !important;
  display: inline-block !important;
  line-height: 1 !important;
}
.hero-go-direct .hero-direct-link {
  color: rgba(255, 255, 255, 0.92) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255, 255, 255, 0.35) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  transition:
    color 0.25s ease,
    text-decoration-color 0.25s ease;
}
.hero-go-direct .hero-direct-link:hover {
  color: #ffffff !important;
  text-decoration-color: #ffffff !important;
}

/* ============================================
   NEUMORPHISM ELEVATION: subtle premium touch
   Only shadow (no bg/border change) on high-impact cards
   ============================================ */

/* LIGHT: soft dual shadow (no bg change, keeps existing look) */
body:not(.dark-mode) #services .single_service,
body:not(.dark-mode) .step-card,
body:not(.dark-mode) #meet .meet-card,
body:not(.dark-mode) .pricing-card {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
body:not(.dark-mode) #services .single_service:hover,
body:not(.dark-mode) .step-card:hover {
  transform: translateY(-3px) !important;
}

/* DARK: subtle light top-left glow + deeper bottom-right shadow */
body.dark-mode #services .single_service,
body.dark-mode .step-card,
body.dark-mode #meet .meet-card,
body.dark-mode .pricing-card {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
body.dark-mode #services .single_service:hover,
body.dark-mode .step-card:hover {
  transform: translateY(-3px) !important;
}

/* ============================================
   PRODUCT CARD TITLES: smaller, finer, refined
   ============================================ */

/* Products CTA buttons: SAME width for both cards */

/* ============================================
   NEUMORPHIC PREMIUM UI: high-impact elements
   Buttons, toggle, social icons, check circles
   ============================================ */

/* --- Primary CTA buttons (hero + final CTA + FAQ + inv) --- */
body:not(.dark-mode) .hero-cta-buttons .btn-primary,
body:not(.dark-mode) .final-cta-section .btn-primary,
body:not(.dark-mode) .faq-cta .btn-primary,
body:not(.dark-mode) .pricing-footer .btn-primary,
body:not(.dark-mode) .btn_1.boxed-btn,
body:not(.dark-mode) #services .single_service a.btn,
body:not(.dark-mode) #recognize .single_service a.btn {
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
body:not(.dark-mode) .hero-cta-buttons .btn-primary:hover,
body:not(.dark-mode) .final-cta-section .btn-primary:hover,
body:not(.dark-mode) .faq-cta .btn-primary:hover,
body:not(.dark-mode) .pricing-footer .btn-primary:hover,
body:not(.dark-mode) .btn_1.boxed-btn:hover {
  transform: translateY(-2px) !important;
}
body.dark-mode .hero-cta-buttons .btn-primary,
body.dark-mode .final-cta-section .btn-primary,
body.dark-mode .faq-cta .btn-primary,
body.dark-mode .pricing-footer .btn-primary,
body.dark-mode .btn_1.boxed-btn {
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
body.dark-mode .hero-cta-buttons .btn-primary:hover,
body.dark-mode .final-cta-section .btn-primary:hover,
body.dark-mode .faq-cta .btn-primary:hover,
body.dark-mode .pricing-footer .btn-primary:hover,
body.dark-mode .btn_1.boxed-btn:hover {
  transform: translateY(-2px) !important;
}

/* --- Sticky header CTA "Book a call" --- */

/* --- Theme toggle (floating): soft neumorphic orb --- */

/* --- Meet card check circles: tiny neumorphic dots (premium detail) --- */

/* ============================================
   BUTTONS: NO all-caps (override any template uppercase rules)
   ============================================ */
.btn,
.btn-primary,
.btn-outline-light,
.btn_1,
.btn_2,
.boxed-btn,
button.btn,
a.btn,
.header-cta,
.step-card .btn,
#services .single_service a.btn,
.final-cta-section .btn,
.hero-cta-buttons .btn,
.hero-cta-buttons a {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

/* ============================================
   CARDS: equal height + centered icons + proper spacing
   ============================================ */
#recognize .services-area,
#services .services-area,
#reviews .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
/* Vertical spacing between cards on wrap */
#recognize .services-area > [class*="col-"],
#services .services-area > [class*="col-"],
#reviews .row > [class*="col-"] {
  margin-bottom: 28px;
  padding-left: 14px;
  padding-right: 14px;
}
#recognize .single_service,
#services .single_service {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 28px !important;
  border-radius: 18px;
}
#recognize .single_service .icon,
#services .single_service .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 18px;
}
#recognize .single_service h3,
#services .single_service h3 {
  text-align: center;
}
#recognize .single_service p,
#services .single_service p {
  text-align: center;
  flex: 1 1 auto;
}
/* Review cards equal height */
#reviews .testimonial-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#reviews .testimonial-text {
  flex: 1 1 auto;
}

/* ============================================================
   HERO EYEBROW: hide on phones & small screens
   The "Senior Full Stack Developer · UI/UX · Product Creator"
   line competes with the headline on narrow viewports; it adds
   clutter without conveying anything the headline doesn't already.
   Hide on ≤767px (Bootstrap mobile + small tablet); reveal on ≥768px.
   ============================================================ */
@media (max-width: 767px) {
  .hero-premium .slider_text .title-arhitect.hero-eyebrow-premium {
    display: none !important;
  }
}

/* ============================================================
   TYPOGRAPHY POLISH: prevent orphans/widows
   text-wrap: pretty avoids single-word last lines on paragraphs.
   text-wrap: balance evenly distributes lines on headings.
   Both fall back to normal wrap on unsupported browsers (no harm).
   ============================================================ */
p,
.section-subtitle,
.testimonial-text,
.case-study-content p,
.meet-card p,
.step-card p,
.author-company,
blockquote,
figcaption {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h-display,
.h-eyebrow,
.case-study-title,
.author-name {
  text-wrap: balance;
}

/* Anchor scroll target: leaves room for sticky header on
   scrollIntoView calls (used by Show fewer toggle) */
#reviews-title {
  scroll-margin-top: 90px;
}

/* ============================================================
   REVIEWS: expandable grid + filter chips + cascade reveal
   Default: only first 6 cards visible, chips + extra cards hidden.
   When .reviews-section.is-expanded:
     - extra-review cards reveal with cascade fade-in
     - filter chips appear
     - toggle button label flips to "Show fewer"
   When chip filter active (.is-filtered-manager / .is-filtered-peer):
     - non-matching cards collapse out
   ============================================================ */
#reviews .reviews-filter {
  display: none;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto 32px auto;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 360ms ease,
    transform 360ms ease;
}
#reviews .reviews-section.is-expanded .reviews-filter {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
#reviews .chip {
  background: transparent;
  border: 1.5px solid rgba(250, 200, 0, 0.45);
  color: #fac800;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 220ms ease;
  font-family: inherit;
}
#reviews .chip:hover {
  border-color: #fac800;
  background: rgba(250, 200, 0, 0.08);
  transform: translateY(-1px);
}
#reviews .chip.is-active {
  background: #fac800;
  border-color: #fac800;
  color: #040e27;
}
#reviews .chip:focus-visible {
  outline: 2px solid #fac800;
  outline-offset: 3px;
}
/* Light theme: chips use navy accent for premium feel */
body:not(.dark-mode) #reviews .chip {
  border-color: rgba(0, 113, 227, 0.4);
  color: #0071e3;
}
body:not(.dark-mode) #reviews .chip:hover {
  border-color: #0071e3;
  background: rgba(0, 113, 227, 0.06);
}
body:not(.dark-mode) #reviews .chip.is-active {
  background: #0071e3;
  border-color: #0071e3;
  color: #ffffff;
}

/* Hide extra cards by default */
#reviews .extra-review {
  display: none;
}
/* Reveal when expanded: cascade fade+slide */
#reviews .reviews-section.is-expanded .extra-review {
  display: block;
  animation: reviewReveal 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
/* Stagger up to 20 extras (~50ms apart) */
#reviews .reviews-section.is-expanded .extra-review:nth-of-type(7) {
  animation-delay: 0ms;
}
#reviews .reviews-section.is-expanded .extra-review:nth-of-type(8) {
  animation-delay: 40ms;
}
#reviews .reviews-section.is-expanded .extra-review:nth-of-type(9) {
  animation-delay: 80ms;
}
#reviews .reviews-section.is-expanded .extra-review:nth-of-type(10) {
  animation-delay: 120ms;
}
#reviews .reviews-section.is-expanded .extra-review:nth-of-type(11) {
  animation-delay: 160ms;
}
#reviews .reviews-section.is-expanded .extra-review:nth-of-type(12) {
  animation-delay: 200ms;
}
#reviews .reviews-section.is-expanded .extra-review:nth-of-type(13) {
  animation-delay: 240ms;
}
#reviews .reviews-section.is-expanded .extra-review:nth-of-type(14) {
  animation-delay: 280ms;
}
#reviews .reviews-section.is-expanded .extra-review:nth-of-type(15) {
  animation-delay: 320ms;
}
#reviews .reviews-section.is-expanded .extra-review:nth-of-type(n + 16) {
  animation-delay: 360ms;
}
@keyframes reviewReveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Filter: hide non-matching when filter active */
#reviews .reviews-section.is-filtered-manager .col-review[data-category="peer"],
#reviews
  .reviews-section.is-filtered-peer
  .col-review[data-category="manager"] {
  display: none !important;
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #reviews .reviews-section.is-expanded .extra-review {
    animation: none;
  }
  #reviews .reviews-filter {
    transition: none;
  }
}

/* Toggle button: pill-shaped, premium */
#reviews .reviews-cta-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
#reviews .btn-reviews-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1.5px solid #fac800;
  color: #fac800;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 220ms ease;
  font-family: inherit;
}
#reviews .btn-reviews-toggle:hover {
  background: #fac800;
  color: #040e27;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(250, 200, 0, 0.25);
}
#reviews .btn-reviews-toggle:focus-visible {
  outline: 2px solid #fac800;
  outline-offset: 3px;
}
#reviews .reviews-toggle-icon {
  display: inline-block;
  transition: transform 280ms ease;
}
#reviews .reviews-section.is-expanded .reviews-toggle-icon {
  transform: rotate(180deg);
}
body:not(.dark-mode) #reviews .btn-reviews-toggle {
  border-color: #0071e3;
  color: #0071e3;
}
body:not(.dark-mode) #reviews .btn-reviews-toggle:hover {
  background: #0071e3;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(0, 113, 227, 0.25);
}
#reviews .reviews-linkedin-link {
  font-size: 14px;
}
/* Small screens: stack chips with smaller padding */
@media (max-width: 575px) {
  #reviews .reviews-filter {
    gap: 8px;
    margin-bottom: 24px;
  }
  #reviews .chip {
    padding: 6px 14px;
    font-size: 12px;
  }
  #reviews .btn-reviews-toggle {
    padding: 10px 22px;
    font-size: 13px;
  }
}
/* Products (case-studies) equal height */
/* Step cards (Final CTA) equal height already set */
.final-cta-section .step-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.final-cta-section .step-card p {
  flex: 1 1 auto;
}

/* ============================================
   SECTION HEADERS: uniform font size across ALL sections
   + brand blue on light, white default on dark
   ============================================ */
#recognize h2,
#recognize-title,
#services h2,
#services-title,
#products h2,
#products-title,
#case-studies h2,
#how-we-work h2,
#investment h2,
#faq h2,
#reviews h2,
#reviews-title,
.final-cta-section h2,
#final-cta-title {
  font-size: clamp(2rem, 3.6vw, 2.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.028em !important;
  margin-bottom: 0 !important;
}
body:not(.dark-mode) #recognize h2,
body:not(.dark-mode) #services h2,
body:not(.dark-mode) #products h2,
body:not(.dark-mode) #case-studies h2,
body:not(.dark-mode) #how-we-work h2,
body:not(.dark-mode) #investment h2,
body:not(.dark-mode) #faq h2,
body:not(.dark-mode) #reviews h2,
body:not(.dark-mode) .final-cta-section h2 {
  /* navy headings; the blue accent lives in .section-kicker above */
  color: #040e27 !important;
}
body:not(.dark-mode) #recognize .section-subtitle,
body:not(.dark-mode) #services .section-subtitle,
body:not(.dark-mode) #products .section-subtitle,
body:not(.dark-mode) #case-studies .section-subtitle,
body:not(.dark-mode) #how-we-work .section-subtitle,
body:not(.dark-mode) #investment .section-subtitle,
body:not(.dark-mode) #faq .section-subtitle,
body:not(.dark-mode) #reviews .section-subtitle,
body:not(.dark-mode) .final-cta-section .section-subtitle {
  color: #424245 !important;
}

/* Section subtitle: premium, larger, conversion-focused copy */
#recognize .section-subtitle,
#services .section-subtitle,
#products .section-subtitle,
#case-studies .section-subtitle,
#how-we-work .section-subtitle,
#investment .section-subtitle,
#faq .section-subtitle,
#reviews .section-subtitle,
.final-cta-section .section-subtitle {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 20px !important;
  text-align: center !important;
  line-height: 1.7 !important;
  font-size: 1.12rem !important;
}

/* ============================================
   WATERMARKS (outline_text): hidden in BOTH themes (visual noise)
   ============================================ */
.outline_text,
.outline_text.white {
  display: none !important;
}

/* ============================================
   SECTION RHYTHM: premium alternating bg + hairline dividers
   Light: white ↔ off-white-blue
   Dark:  deep navy ↔ slightly lifted navy
   ============================================ */
:root {
  --bg-base-light: #ffffff;
  --bg-muted-light: #f6f8fc;
  --bg-base-dark: #121620;
  --bg-muted-dark: #121620;
  --rule-light: rgba(0, 0, 0, 0.07);
  --rule-dark: rgba(255, 255, 255, 0.06);
}

/* Default (light): alternating backgrounds (Meet excluded: it's inside hero now) */
#recognize,
#products,
#how-we-work,
#faq {
  background: var(--bg-muted-light) !important;
}
#services,
#case-studies,
#investment,
#reviews {
  background: var(--bg-base-light) !important;
}

/* Dark overrides */
body.dark-mode #recognize,
body.dark-mode #products,
body.dark-mode #how-we-work,
body.dark-mode #faq {
  background: var(--bg-muted-dark) !important;
}
body.dark-mode #services,
body.dark-mode #case-studies,
body.dark-mode #investment,
body.dark-mode #reviews {
  background: var(--bg-base-dark) !important;
}

/* Hairline separator: gradient that fades in/out at the edges */
#recognize::before,
#services::before,
#products::before,
#case-studies::before,
#how-we-work::before,
#investment::before,
#faq::before,
#reviews::before,
.final-cta-section::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(86%, 1100px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rule-light) 25%,
    var(--rule-light) 75%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 5;
}
body.dark-mode #recognize::before,
body.dark-mode #services::before,
body.dark-mode #products::before,
body.dark-mode #case-studies::before,
body.dark-mode #how-we-work::before,
body.dark-mode #investment::before,
body.dark-mode #faq::before,
body.dark-mode #reviews::before,
body.dark-mode .final-cta-section::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rule-dark) 25%,
    var(--rule-dark) 75%,
    transparent 100%
  );
}
/* Ensure positioning context for ::before */
#recognize,
#services,
#products,
#case-studies,
#how-we-work,
#investment,
#faq,
#reviews,
.final-cta-section {
  position: relative;
}

/* Final CTA keeps its existing strong bg, but rhythm: base-colored */
.final-cta-section {
  background: var(--bg-base-light) !important;
}
body.dark-mode .final-cta-section {
  background: var(--bg-base-dark) !important;
}

/* ============================================
   FOOTER: stylized social icons (fix oversize)
   ============================================ */
.footer_widget.site-footer {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px !important;
}
.footer_widget.site-footer .social-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease !important;
  text-decoration: none !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.footer_widget.site-footer .social-item i {
  font-size: 14px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  color: inherit !important;
}
.footer_widget.site-footer .social-item:hover,
.footer_widget.site-footer .social-item:focus {
  transform: translateY(-2px) !important;
}
/* Light theme: blue hover */
body:not(.dark-mode) .footer_widget.site-footer .social-item:hover,
body:not(.dark-mode) .footer_widget.site-footer .social-item:focus {
  background: #0071e3 !important;
  color: #ffffff !important;
  border-color: #0071e3 !important;
}
body:not(.dark-mode) .footer_widget.site-footer .social-item:hover i,
body:not(.dark-mode) .footer_widget.site-footer .social-item:focus i {
  color: #ffffff !important;
}
/* Dark theme: gold hover */
body.dark-mode .footer_widget.site-footer .social-item:hover,
body.dark-mode .footer_widget.site-footer .social-item:focus {
  background: #fac800 !important;
  color: #040e27 !important;
  border-color: #fac800 !important;
}
body.dark-mode .footer_widget.site-footer .social-item:hover i,
body.dark-mode .footer_widget.site-footer .social-item:focus i {
  color: #040e27 !important;
}

/* ============================================
   EXTERNAL LINK indicator (↗ arrow after links)
   ============================================ */
a.ext-link::after {
  content: "\2197";
  display: inline-block;
  margin-left: 5px;
  font-size: 0.82em;
  opacity: 0.55;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
  transform: translateY(-1px);
  font-weight: 400;
}
a.ext-link:hover::after {
  opacity: 1;
  transform: translate(2px, -3px);
}