/* =============================================================
   BC HOME SERVICE — MODERN 2026 DESIGN SYSTEM (v1)
   Layer: modern.css — loaded AFTER main.css on every page.
   Contains: reveal animations, glass surfaces, aurora gradients,
   beam borders, mobile menu (redesigned), sticky CTA, marquee,
   bento grids, scroll progress, 2026 micro-interactions.
   All effects respect prefers-reduced-motion.
   ============================================================= */

/* ===================== DESIGN TOKENS ===================== */
:root {
  --m-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --m-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --m-ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --m-dur-fast: 0.25s;
  --m-dur-med: 0.55s;
  --m-dur-slow: 0.9s;
  --m-glass-bg: rgba(255, 255, 255, 0.72);
  --m-glass-bg-dark: rgba(10, 22, 40, 0.62);
  --m-glass-border: rgba(255, 255, 255, 0.55);
  --m-glass-blur: 18px;
  --m-grad-brand: linear-gradient(135deg, #2E86DE 0%, #00B4D8 100%);
  --m-grad-sunset: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
  --m-grad-deep: linear-gradient(135deg, #0A1628 0%, #1E3A5F 60%, #2E86DE 100%);
  --m-shadow-float: 0 24px 60px -12px rgba(10, 22, 40, 0.18);
  --m-shadow-glow: 0 0 40px -8px rgba(46, 134, 222, 0.45);
}

/* ===================== PAGE FADE-IN ===================== */
@keyframes mPageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
body { animation: mPageIn 0.45s ease-out both; }

/* ===================== SCROLL REVEAL SYSTEM ===================== */
/* Usage: <div data-reveal="up" data-reveal-delay="100"> … </div>
   Variants: up, down, left, right, scale, blur, zoom-rotate, flip  */
[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity var(--m-dur-slow) var(--m-ease-out),
    transform var(--m-dur-slow) var(--m-ease-out),
    filter var(--m-dur-slow) var(--m-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="up"]    { transform: translateY(48px); }
[data-reveal="down"]  { transform: translateY(-48px); }
[data-reveal="left"]  { transform: translateX(-56px); }
[data-reveal="right"] { transform: translateX(56px); }
[data-reveal="scale"] { transform: scale(0.88); }
[data-reveal="blur"]  { filter: blur(14px); transform: translateY(24px); }
[data-reveal="zoom-rotate"] { transform: scale(0.9) rotate(-2.5deg); }
[data-reveal="flip"]  { transform: perspective(1200px) rotateX(18deg) translateY(40px); transform-origin: top center; }
[data-reveal].m-in {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* Stagger container: children get increasing delays automatically */
.m-stagger > *:nth-child(1)  { --reveal-delay: 0ms; }
.m-stagger > *:nth-child(2)  { --reveal-delay: 70ms; }
.m-stagger > *:nth-child(3)  { --reveal-delay: 140ms; }
.m-stagger > *:nth-child(4)  { --reveal-delay: 210ms; }
.m-stagger > *:nth-child(5)  { --reveal-delay: 280ms; }
.m-stagger > *:nth-child(6)  { --reveal-delay: 350ms; }
.m-stagger > *:nth-child(7)  { --reveal-delay: 420ms; }
.m-stagger > *:nth-child(8)  { --reveal-delay: 490ms; }
.m-stagger > *:nth-child(9)  { --reveal-delay: 560ms; }
.m-stagger > *:nth-child(10) { --reveal-delay: 630ms; }

/* ===================== SCROLL-DRIVEN ANIMATIONS (2026) =====================
   Native CSS scroll-driven animations — progressive enhancement.
   Fades + zooms content as it travels through the viewport. */
@supports (animation-timeline: view()) {
  .m-scroll-fade {
    animation: mScrollFade both;
    animation-timeline: view();
    animation-range: entry 0% cover 42%;
  }
  .m-scroll-zoom img,
  img.m-scroll-zoom {
    animation: mScrollZoom both;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }
  @keyframes mScrollFade {
    from { opacity: 0.15; transform: translateY(60px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes mScrollZoom {
    from { scale: 1.14; }
    to   { scale: 1; }
  }
  /* Sticky header shrink driven by scroll position */
  @supports (animation-timeline: scroll()) {
    .m-progress-track { animation: mGrowProgress linear both; animation-timeline: scroll(root); }
    @keyframes mGrowProgress { from { scale: 0 1; } to { scale: 1 1; } }
  }
}

/* ===================== SCROLL PROGRESS BAR ===================== */
.m-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2147483000;
  pointer-events: none;
  background: transparent;
}
.m-progress-track {
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  background: var(--m-grad-brand);
  scale: 0 1;
}
@supports not (animation-timeline: scroll()) {
  .m-progress-track { transform-origin: 0 50%; transform: scaleX(var(--m-progress, 0)); scale: none; }
}

/* ===================== GLASS SURFACES ===================== */
.m-glass {
  background: var(--m-glass-bg);
  -webkit-backdrop-filter: blur(var(--m-glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--m-glass-blur)) saturate(1.5);
  border: 1px solid var(--m-glass-border);
  box-shadow: 0 8px 32px rgba(10, 22, 40, 0.08);
}
.m-glass-dark {
  background: var(--m-glass-bg-dark);
  -webkit-backdrop-filter: blur(var(--m-glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--m-glass-blur)) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ===================== AURORA BACKGROUND ===================== */
.m-aurora {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.m-aurora::before {
  content: '';
  position: absolute;
  inset: -40%;
  z-index: -1;
  background:
    radial-gradient(ellipse 30% 45% at 25% 35%, rgba(46, 134, 222, 0.20), transparent 65%),
    radial-gradient(ellipse 28% 42% at 75% 30%, rgba(0, 180, 216, 0.16), transparent 65%),
    radial-gradient(ellipse 32% 40% at 55% 75%, rgba(255, 107, 53, 0.10), transparent 70%);
  animation: mAuroraDrift 18s var(--m-ease-smooth) infinite alternate;
  pointer-events: none;
}
@keyframes mAuroraDrift {
  0%   { transform: translate(-6%, -4%) rotate(-2deg) scale(1); }
  50%  { transform: translate(4%, 3%) rotate(1.5deg) scale(1.06); }
  100% { transform: translate(7%, -2%) rotate(-1deg) scale(1.02); }
}

/* ===================== BEAM BORDER CARDS (animated gradient border) ===================== */
.m-beam {
  position: relative;
  border-radius: 18px;
  background: #fff;
  isolation: isolate;
}
.m-beam::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    transparent 0%, #2E86DE 12%, #00B4D8 22%, transparent 34%,
    transparent 52%, #FF6B35 62%, #FF8C42 70%, transparent 82%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
  animation: mBeamSpin 3.2s linear infinite;
  z-index: 1;
  pointer-events: none;
}
@property --beam-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes mBeamSpin {
  to { --beam-angle: 360deg; }
}
.m-beam:hover::before, .m-beam:focus-within::before { opacity: 1; }
.m-beam:hover {
  transform: translateY(-6px);
  box-shadow: var(--m-shadow-float);
  transition: transform 0.45s var(--m-ease-spring), box-shadow 0.45s ease;
}

/* ===================== MAGNETIC BUTTON ===================== */
.m-magnetic {
  transition: transform 0.2s var(--m-ease-out), box-shadow 0.2s ease;
  will-change: transform;
}
.m-magnetic:hover {
  box-shadow: var(--m-shadow-glow);
}

/* ===================== SHIMMER / GRADIENT TEXT ===================== */
.m-text-grad {
  background: var(--m-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.m-text-shimmer {
  position: relative;
  background: linear-gradient(100deg, #1a1a2e 30%, #2E86DE 46%, #00B4D4 50%, #2E86DE 54%, #1a1a2e 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mShimmerSlide 3.6s linear infinite;
}
@keyframes mShimmerSlide {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

/* ===================== MARQUEE ===================== */
.m-marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.m-marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: mMarquee 30s linear infinite;
}
.m-marquee:hover .m-marquee-track { animation-play-state: paused; }
.m-marquee[data-direction="reverse"] .m-marquee-track { animation-direction: reverse; }
@keyframes mMarquee {
  to { transform: translateX(-50%); }
}

/* ===================== BENTO GRID ===================== */
.m-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.m-bento-item { min-height: 150px; }
.m-bento-item:nth-child(1) { grid-column: span 2; }
.m-bento-item:nth-child(2) { grid-column: span 2; }
.m-bento-item:nth-child(3) { grid-column: span 1; }
.m-bento-item:nth-child(4) { grid-column: span 1; }
.m-bento-item:nth-child(5) { grid-column: span 2; }
@media (max-width: 900px) {
  .m-bento { grid-template-columns: repeat(2, 1fr); }
  .m-bento-item:nth-child(n) { grid-column: span 2; }
  .m-bento-item:nth-child(3), .m-bento-item:nth-child(4) { grid-column: span 1; }
}

/* ===================== COUNTER PULSE ===================== */
.m-counter { font-variant-numeric: tabular-nums; }

/* ===================== LIFT + GLOW CARDS ===================== */
.m-lift {
  transition:
    transform 0.5s var(--m-ease-spring),
    box-shadow 0.5s ease,
    border-color 0.3s ease;
}
.m-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -16px rgba(10, 22, 40, 0.25);
}

/* Icon chip pop on card hover */
.m-chip {
  transition: transform 0.45s var(--m-ease-spring), box-shadow 0.3s ease;
}
.m-card:hover .m-chip, .m-lift:hover .m-chip {
  transform: scale(1.12) rotate(-4deg);
  box-shadow: 0 10px 26px -6px var(--svc-color-rgb, rgba(46, 134, 222, 0.5));
}

/* ===================== MODERN MOBILE MENU (2026 REDESIGN) ===================== */
/* Full professional slide-in panel — replaces old full-screen anchor list */
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  z-index: 1300;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #0A1628 0%, #0D1B33 45%, #12263f 100%);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  transform: translateX(105%);
  transition: transform 0.5s var(--m-ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-shadow: -30px 0 80px rgba(2, 8, 20, 0.55);
  padding: 0;
  /* v5 FIX: keep top:0/right:0/bottom:0 height constraint (inset:auto
     previously killed it, making the panel taller than the viewport and
     its lower half unreachable). Height uses dvh for mobile browsers. */
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  align-items: stretch;
  gap: 0;
  opacity: 1;
  pointer-events: auto;
  border-radius: 0;
}
@media (min-width: 769px) {
  .mobile-nav { right: 0; top: 0; bottom: 0; }
}
.mobile-nav.active { transform: translateX(0); }

/* Dim + blur the page behind the panel */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1290;
  background: rgba(4, 10, 22, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.mobile-nav-backdrop.active { opacity: 1; pointer-events: auto; }

/* Menu header */
.mn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
  background: rgba(10, 22, 40, 0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  z-index: 2;
}
.mn-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.mn-brand .mn-brand-name { font-weight: 900; font-size: 1.05rem; letter-spacing: -0.01em; }
.mn-brand .mn-brand-sub { font-size: 0.72rem; color: rgba(255, 255, 255, 0.55); font-weight: 600; }
.mn-close {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s var(--m-ease-spring);
}
.mn-close:hover { background: #E74C3C; border-color: #E74C3C; transform: rotate(90deg); }
.mn-close svg { width: 20px; height: 20px; }

/* Emergency banner inside menu */
.mn-emergency {
  margin: 18px 24px 6px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.18), rgba(255, 107, 53, 0.12));
  border: 1px solid rgba(231, 76, 60, 0.35);
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
}
.mn-emergency .mn-em-ico {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #E74C3C, #FF6B35);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: mEmergencyPulse 2s infinite;
}
.mn-emergency .mn-em-ico svg { width: 22px; height: 22px; fill: #fff; }
@keyframes mEmergencyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.55); }
  55% { box-shadow: 0 0 0 12px rgba(231, 76, 60, 0); }
}
.mn-emergency .mn-em-txt strong { display: block; font-size: 0.95rem; font-weight: 800; }
.mn-emergency .mn-em-txt span { font-size: 0.78rem; color: rgba(255, 255, 255, 0.65); }

/* Section label */
.mn-label {
  padding: 20px 26px 8px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

/* Service tiles */
.mn-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 6px 24px 8px;
}
.mn-svc {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  text-decoration: none;
  color: #fff;
  transition: all 0.3s var(--m-ease-out);
  opacity: 0;
  transform: translateX(26px);
}
.mobile-nav.active .mn-svc {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s var(--m-ease-out) var(--mn-d, 0ms),
    transform 0.5s var(--m-ease-out) var(--mn-d, 0ms),
    background 0.25s ease,
    border-color 0.25s ease;
}
.mn-svc:hover, .mn-svc:focus-visible {
  background: color-mix(in srgb, var(--svc-c, #2E86DE) 16%, transparent);
  border-color: color-mix(in srgb, var(--svc-c, #2E86DE) 55%, transparent);
  transform: translateX(4px);
}
.mn-svc .mn-svc-ico {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--svc-c, #2E86DE) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--svc-c, #2E86DE) 40%, transparent);
}
.mn-svc .mn-svc-ico svg { width: 20px; height: 20px; fill: var(--svc-c, #2E86DE); }
.mn-svc .mn-svc-name { font-size: 0.86rem; font-weight: 700; line-height: 1.25; }
.mn-svc .mn-svc-sub { display: block; font-size: 0.68rem; color: rgba(255, 255, 255, 0.5); font-weight: 500; margin-top: 2px; }

/* Simple links list */
.mn-links { padding: 4px 24px 8px; display: flex; flex-direction: column; }
.mn-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.25s ease;
  opacity: 0;
  transform: translateX(26px);
}
.mobile-nav.active .mn-link {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--m-ease-out) var(--mn-d, 0ms), transform 0.5s var(--m-ease-out) var(--mn-d, 0ms), background 0.25s ease, color 0.25s ease;
}
.mn-link:hover, .mn-link:focus-visible { background: rgba(46, 134, 222, 0.14); color: #fff; }
.mn-link svg { width: 16px; height: 16px; opacity: 0.4; }

/* Menu footer */
.mn-foot {
  margin-top: auto;
  padding: 18px 24px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mn-quote-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 22px;
  border-radius: 14px;
  background: var(--m-grad-brand);
  color: #fff;
  font-weight: 800;
  font-size: 0.98rem;
  text-decoration: none;
  box-shadow: 0 12px 30px -8px rgba(46, 134, 222, 0.6);
  transition: all 0.3s var(--m-ease-spring);
}
.mn-quote-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 38px -8px rgba(46, 134, 222, 0.75); }
.mn-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}
.mn-contact-row a { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-weight: 700; }
.mn-contact-row a:hover { color: #48CAE4; }

/* Hamburger button polish (shared) */
.mobile-menu-btn {
  position: relative;
  z-index: 1350;
  border-radius: 12px;
  transition: background 0.25s ease, transform 0.25s var(--m-ease-spring);
}
.mobile-menu-btn:active { transform: scale(0.92); }
.mobile-menu-btn.active { background: rgba(10, 22, 40, 0.08); }

/* Hide the legacy mobile-nav direct <a> full-width styling */
.mobile-nav a.call-link { margin: 0 24px 4px; }

/* ===================== NAV MOBILE FIX =====================
   main.css hides ALL .desktop-nav on mobile — but the hamburger lives
   inside .nav-cta.desktop-nav. Keep the CTA container alive on mobile
   and show ONLY the hamburger button inside it. */
@media (max-width: 900px) {
  .nav-cta.desktop-nav { display: flex !important; }
  .nav-cta.desktop-nav > a { display: none !important; }
  .nav-cta.desktop-nav > .mobile-menu-btn {
    display: flex !important;
    width: 44px;
    height: 44px;
    padding: 10px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    background: none;
    border: none;
    box-shadow: none;
  }
}

/* ===================== STICKY MOBILE CTA BAR ===================== */
.m-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  display: none;
  transform: translateY(110%);
  transition: transform 0.45s var(--m-ease-out);
  background: rgba(10, 22, 40, 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}
.m-sticky-cta.show { transform: translateY(0); }
.m-sticky-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 10px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  transition: transform 0.2s var(--m-ease-spring);
}
.m-sticky-cta a:active { transform: scale(0.96); }
.m-sticky-cta .cta-call {
  background: var(--m-grad-sunset);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(255, 107, 53, 0.55);
}
.m-sticky-cta .cta-quote {
  background: var(--m-grad-brand);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(46, 134, 222, 0.55);
}
@media (max-width: 768px) {
  .m-sticky-cta { display: grid; }
  /* Keep floats above sticky bar */
  .whatsapp-float, .ai-chat-float { bottom: 84px !important; }
  .ai-chat-window { bottom: 150px; }
}

/* ===================== FAQ ACCORDION (modern) ===================== */
.m-faq-item {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.m-faq-item[open], .m-faq-item.open { border-color: rgba(46, 134, 222, 0.4); box-shadow: 0 12px 32px -12px rgba(46, 134, 222, 0.25); }
.m-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.02rem;
  font-weight: 700;
  color: #0a1628;
  text-align: left;
  font-family: inherit;
}
.m-faq-q .m-faq-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #EBF4FF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s var(--m-ease-spring);
}
.m-faq-item.open .m-faq-icon { background: var(--m-grad-brand); transform: rotate(45deg); }
.m-faq-icon svg { width: 16px; height: 16px; stroke: #2E86DE; transition: stroke 0.3s; }
.m-faq-item.open .m-faq-icon svg { stroke: #fff; }
.m-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--m-ease-out);
}
.m-faq-a-inner { padding: 0 22px 20px; color: #4a5568; line-height: 1.75; font-size: 0.96rem; }

/* ===================== TABLE (pricing) ===================== */
.m-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid #e2e8f0; }
table.m-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; background: #fff; }
table.m-table th {
  background: #0a1628;
  color: #fff;
  text-align: left;
  padding: 14px 18px;
  font-weight: 700;
  white-space: nowrap;
}
table.m-table td { padding: 13px 18px; border-top: 1px solid #edf2f7; color: #2d3748; }
table.m-table tr { transition: background 0.2s; }
table.m-table tbody tr:hover { background: #F0F7FF; }

/* ===================== SECTION SHELL ===================== */
.m-section { padding: clamp(64px, 8vw, 110px) 0; position: relative; }
.m-section-head { max-width: 760px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.m-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 100px;
  background: #EBF4FF;
  color: #2E86DE;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.m-eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2E86DE;
  animation: mBlink 2s infinite;
}
@keyframes mBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.75); } }
.m-h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 900; color: #0a1628; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 14px; }
.m-sub { color: #4a5568; font-size: 1.02rem; line-height: 1.7; margin: 0; }

/* ===================== FEATURE CARDS ===================== */
.m-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2.4vw, 26px); }
.m-card {
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 18px;
  padding: 30px 26px;
  position: relative;
  overflow: hidden;
}
.m-card::after {
  content: '';
  position: absolute;
  inset: auto -30% -60% auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--svc-color-rgb, rgba(46, 134, 222, 0.10)), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.m-card:hover::after { opacity: 1; }
.m-chip {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: color-mix(in srgb, var(--svc-color, #2E86DE) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--svc-color, #2E86DE) 26%, #fff);
}
.m-chip svg { width: 27px; height: 27px; fill: var(--svc-color, #2E86DE); }
.m-card h3 { font-size: 1.12rem; font-weight: 800; color: #0a1628; margin: 0 0 10px; }
.m-card p { color: #4a5568; line-height: 1.7; font-size: 0.94rem; margin: 0; }

/* ===================== BADGES ===================== */
.m-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 100px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.m-badge-blue { background: #EBF4FF; color: #2E86DE; }
.m-badge-green { background: #E6F8EF; color: #1B9E5A; }
.m-badge-orange { background: #FFF1E8; color: #E85D2A; }
.m-badge-red { background: #FDECEA; color: #D64541; }
.m-badge-dark { background: #0a1628; color: #48CAE4; }

/* ===================== BEFORE / AFTER SLIDER ===================== */
.m-ba {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
  box-shadow: var(--m-shadow-float);
}
.m-ba img { width: 100%; display: block; }
.m-ba .m-ba-after { position: absolute; inset: 0; }
.m-ba .m-ba-after img { height: 100%; object-fit: cover; }
.m-ba .m-ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  cursor: ew-resize;
  z-index: 3;
}
.m-ba .m-ba-handle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--m-grad-brand);
  border: 3px solid #fff;
  display: flex;
}
.m-ba .m-ba-label {
  position: absolute;
  top: 14px;
  padding: 5px 13px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(10, 22, 40, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 2;
}
.m-ba .m-ba-label.before { left: 14px; }
.m-ba .m-ba-label.after { right: 14px; background: rgba(27, 158, 90, 0.85); }

/* ===================== STEPS ===================== */
.m-steps { display: grid; gap: 0; counter-reset: mstep; }
.m-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px dashed #e2e8f0;
  counter-increment: mstep;
}
.m-step:last-child { border-bottom: none; }
.m-step-num {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--m-grad-brand);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px -10px rgba(46, 134, 222, 0.55);
  position: relative;
}
.m-step-num::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 22px;
  border: 2px dashed rgba(46, 134, 222, 0.35);
}
.m-step h3 { margin: 0 0 8px; font-size: 1.14rem; font-weight: 800; color: #0a1628; }
.m-step p { margin: 0; color: #4a5568; line-height: 1.7; }

/* ===================== CTA BANNER ===================== */
.m-cta {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: var(--m-grad-deep);
  color: #fff;
  padding: clamp(40px, 6vw, 70px) clamp(24px, 5vw, 70px);
  text-align: center;
  isolation: isolate;
}
.m-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 40% 60% at 20% 30%, rgba(46, 134, 222, 0.35), transparent 60%),
    radial-gradient(ellipse 35% 55% at 80% 70%, rgba(0, 180, 216, 0.25), transparent 60%);
  animation: mAuroraDrift 14s ease-in-out infinite alternate;
}
.m-cta h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 900; margin: 0 0 12px; letter-spacing: -0.02em; }
.m-cta p { color: rgba(255, 255, 255, 0.8); max-width: 560px; margin: 0 auto 28px; line-height: 1.7; }

/* ===================== CUSTOM SCROLLBAR ===================== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #eef2f7; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2E86DE, #00B4D8);
  border-radius: 8px;
  border: 2px solid #eef2f7;
}
::-webkit-scrollbar-thumb:hover { background: #1e5fae; }

/* ===================== FOCUS VISIBLE ===================== */
:focus-visible {
  outline: 3px solid rgba(46, 134, 222, 0.55);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ===================== PRINT ===================== */
@media print {
  .mobile-nav, .mobile-nav-backdrop, .m-sticky-cta, .m-progress,
  .whatsapp-float, .ai-chat-float, .ai-chat-window, .topbar, .nav { display: none !important; }
  body { animation: none; }
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .m-marquee-track { animation: none; }
  .m-aurora::before, .m-cta::before { animation: none; }
}